5.0.106-Beta1

Improved Support for BlazorServer Side Adds Callbacks for all necessary Interop EventListen in javascript is now able to clean up dereferenced event listeners. Validation now correctly marks Fields on submit.
chanan · May 5, 2022 · 2f7d1b0 · 2f7d1b0
1 parent 3e2df65
commit 2f7d1b0
Show file tree

Hide file tree

Showing 72 changed files with 1,037 additions and 448 deletions.
diff --git a/docs/V5/_content/BlazorStrap/blazorstrap.js b/docs/V5/_content/BlazorStrap/blazorstrap.js
@@ -20,7 +20,22 @@ if (!Element.prototype.closest) {
         return null;
     };
 }
+
 window.blazorStrap = {
+    CleanUpEvents: function () {
+        Object.keys(blazorStrap.EventHandlers).forEach(key => {
+            if (document.querySelector("[data-blazorstrap='" + key + "']") === null) {
+                Object.keys(blazorStrap.EventHandlers[key]).forEach(name => {
+                    Object.keys(blazorStrap.EventHandlers[key][name]).forEach(type => {
+                        try {
+                            window.removeEventListener(type, blazorStrap.EventHandlers[key][name][type].Callback, false);
+                        } catch {}
+                    });
+                });
+                delete blazorStrap.EventHandlers[key];
+            }
+        });
+    },
     BlurAll: function () {
         var tmp = document.createElement("input");
         tmp.position = "absolute";
@@ -56,6 +71,8 @@ window.blazorStrap = {
         });
     },
     AddEventInternal: function (objRef, element, id, name, type, ignoreChildren = false, filter = "") {
+        blazorStrap.CleanUpEvents();
+
         let expandedWidth = 0;
         if (type === "resize" && element == document) {
             let navbar = document.querySelector("[class*=navbar-expand]");
@@ -83,57 +100,62 @@ window.blazorStrap = {
             resizeFunc: function () { }
         }
         blazorStrap.EventHandlers[id][name][type] = {
-            Callback: function (event) {
-                let resizeFunc;
-                if (type === "resize" && element === document) {
-                    clearTimeout(resizeFunc);
-                    resizeFunc = setTimeout(function () {
-                        if (window.innerWidth < expandedWidth)
-                            navbarShown = false;
-                        if (window.innerWidth > expandedWidth && navbarShown === false) {
-                            navbarShown = true;
-                            // noinspection JSUnresolvedVariable,JSUnresolvedFunction
-                            try {
-                                var test = objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
-                            } catch {
-                                // ObjectRef may be gone by time this fires   
+            Callback: async function (event) {
+                try {
+                    let resizeFunc;
+                    if (type === "resize" && element === document) {
+                        clearTimeout(resizeFunc);
+                        resizeFunc = setTimeout(function () {
+                            if (window.innerWidth < expandedWidth)
+                                navbarShown = false;
+                            if (window.innerWidth > expandedWidth && navbarShown === false) {
+                                navbarShown = true;
+                                // noinspection JSUnresolvedVariable,JSUnresolvedFunction
+                                try {
+                                    var test = objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
+                                } catch {
+                                    // ObjectRef may be gone by time this fires   
+                                }
                             }
-                        }
-                    }, 100);
-                    return;
-                }
-                if (type === "resize") {
-                    clearTimeout(blazorStrap.EventHandlers[id][name][type][resizeFunc]);
-                    blazorStrap.EventHandlers[id][name][type][resizeFunc] = setTimeout(function () {
-                        objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
-                    }, 250);
-                    return;
-                }
-                if (type === "transitionend" && id !== event.target.getAttribute("data-blazorstrap")) return;
+                        }, 100);
+                        return;
+                    }
+                    if (type === "resize") {
+                        clearTimeout(blazorStrap.EventHandlers[id][name][type][resizeFunc]);
+                        blazorStrap.EventHandlers[id][name][type][resizeFunc] = setTimeout(function () {
+                            objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
+                        }, 250);
+                        return;
+                    }
+                    if (type === "transitionend" && id !== event.target.getAttribute("data-blazorstrap")) return;
 
-                if (name === "bsdropdown") {
-                    let parent = document.querySelector("[data-blazorstrap='" + id + "']");
+                    if (name === "bsdropdown") {
+                        let parent = document.querySelector("[data-blazorstrap='" + id + "']");
 
-                    if (parent !== null) {
-                        if (parent.contains(event.target)) {
-                            if (event.target.closest(".dropdown-toggle") !== null) {
-                                return;
+                        if (parent !== null) {
+                            if (parent.contains(event.target)) {
+                                if (event.target.closest(".dropdown-toggle") !== null) {
+                                    return;
+                                }
                             }
                         }
                     }
-                }
-                if (ignoreChildren) {
-                    let parent = document.querySelector("[data-blazorstrap='" + id + "']");
+                    if (ignoreChildren) {
+                        let parent = document.querySelector("[data-blazorstrap='" + id + "']");
 
-                    if (parent !== null) {
-                        if (parent.contains(event.target)) return;
+                        if (parent !== null) {
+                            if (parent.contains(event.target)) return;
+                        }
                     }
-                }
-                if (filter === "") {
-                    objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
-                } else if (element.getElementsByClassName(filter)) {
-                    // noinspection JSUnresolvedVariable,JSUnresolvedFunction
-                    objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
+                    if (filter === "") {
+                        objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
+                    } else if (element.getElementsByClassName(filter)) {
+                        // noinspection JSUnresolvedVariable,JSUnresolvedFunction
+                        objRef.invokeMethodAsync("InteropEventCallback", id, name, type, element.classList, blazorStrap.GetEvents(event));
+                    }
+                } catch
+                {
+                    await blazorStrap.RemoveEventInternal(element, id, name, type);
                 }
             }
         };
@@ -389,8 +411,9 @@ window.blazorStrap = {
         });
     },
     RemoveEventInternal: function (element, id, name, type) {
+        blazorStrap.CleanUpEvents();
         if (blazorStrap.EventHandlers[id] === undefined) return;
-
+        
         if (name !== "null" && type !== "null") {
             if (blazorStrap.EventHandlers[id][name] === undefined) return;
             if (blazorStrap.EventHandlers[id][name][type] === undefined) return;

diff --git a/docs/V5/_content/BlazorStrap/blazorstrap.min.js b/docs/V5/_content/BlazorStrap/blazorstrap.min.js
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll b/docs/V5/_framework/BlazorStrap-Docs.dll
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll.br b/docs/V5/_framework/BlazorStrap-Docs.dll.br
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll.gz b/docs/V5/_framework/BlazorStrap-Docs.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap-Docs.pdb.gz b/docs/V5/_framework/BlazorStrap-Docs.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.dll b/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.dll
diff --git a/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.dll.br b/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.dll.gz b/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.pdb.gz b/docs/V5/_framework/BlazorStrap.Extensions.FluentValidation.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll b/docs/V5/_framework/BlazorStrap.WASM.dll
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll.br b/docs/V5/_framework/BlazorStrap.WASM.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll.gz b/docs/V5/_framework/BlazorStrap.WASM.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.WASM.pdb.gz b/docs/V5/_framework/BlazorStrap.WASM.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.dll b/docs/V5/_framework/BlazorStrap.dll
diff --git a/docs/V5/_framework/BlazorStrap.dll.br b/docs/V5/_framework/BlazorStrap.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.dll.gz b/docs/V5/_framework/BlazorStrap.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.pdb.gz b/docs/V5/_framework/BlazorStrap.pdb.gz
diff --git a/docs/V5/_framework/System.Runtime.dll b/docs/V5/_framework/System.Runtime.dll
diff --git a/docs/V5/_framework/System.Runtime.dll.br b/docs/V5/_framework/System.Runtime.dll.br
diff --git a/docs/V5/_framework/System.Runtime.dll.gz b/docs/V5/_framework/System.Runtime.dll.gz
diff --git a/docs/V5/_framework/blazor.boot.json b/docs/V5/_framework/blazor.boot.json
@@ -8,10 +8,10 @@
   "resources": {
     "assembly": {
       "BlazorComponentUtilities.dll": "sha256-UapksNiQg3lu5QM9uVSLyjEuzRH\/7o22fmcmxcLAAeI=",
-      "BlazorStrap.dll": "sha256-QgWPGYdFeC1Yee5bpk2Aqk1pGY7LCr3SLdl9lOqqLu8=",
-      "BlazorStrap.Extensions.FluentValidation.dll": "sha256-3bp0v+Qy3GuUkqsyc9Y9e1Rd9\/cHbhiQhvKXTy49OuY=",
-      "BlazorStrap.WASM.dll": "sha256-WXAEebsRd05Hj7uOYI6PDya919RVh4VSlUf1PCFUB74=",
-      "BlazorStrap-Docs.dll": "sha256-5J1kh6ciEtuuXV34ICLrE7dd9uWsLr9H\/02\/WrQpNMo=",
+      "BlazorStrap.dll": "sha256-wTJQMWJWvOVpuUx\/+RkUgcZ0GozuzSuMygCggIkn42E=",
+      "BlazorStrap.Extensions.FluentValidation.dll": "sha256-u6LpgajdJjmKuQ1F+ktPtlTpvuN6Lb95V5+Eu1XTUds=",
+      "BlazorStrap.WASM.dll": "sha256-7gnOrMGpH6X3QEw6NEm7lyAOH0CtFp6rWsw9Rnnlsfc=",
+      "BlazorStrap-Docs.dll": "sha256-w+px5Z37ltgxKEALFGofAULCNE\/yt7TRZ2XRjVbY570=",
       "ColorCode.dll": "sha256-hF07ps23in9mbwaN4uSoZklQVfyJIw2Ep4R448bfkOk=",
       "FluentValidation.dll": "sha256-NflrIQKcfYxeVjrVYw+AP1+xnZJp67Wq9L5Vsd5Cr\/8=",
       "Markdig.dll": "sha256-9\/ICq2gSL+hjhMdZXNoIRs8wyZFtZpr3yFSW+RQVdoQ=",
@@ -55,7 +55,7 @@
       "System.Private.Uri.dll": "sha256-PpbUIPM8Pjk0ME17MJheR2w2j9lBS56QJu0Pws5Ozrg=",
       "System.Resources.ResourceManager.dll": "sha256-rBR\/TTm+QwkLniBspB265urFSkD5rs75OxCDZP1G8fQ=",
       "System.Runtime.CompilerServices.Unsafe.dll": "sha256-O8WiSMBiiMGrpEJTUcyiFfXnDiU9om7qB3SgJGJBRgg=",
-      "System.Runtime.dll": "sha256-SE1PfoAOHGrtdzWrx8SGakQm81NpS\/T+wLBkt3I2ilI=",
+      "System.Runtime.dll": "sha256-ooaUax4cYzVLP1LHaXAVZq4Mf6447JhVE1Gx54wQkDc=",
       "System.Runtime.Extensions.dll": "sha256-5tDXXcQwwKbXclVE+6Knv52dpoVAXlEc9v3xO9o3SPM=",
       "System.Text.Encodings.Web.dll": "sha256-\/4vFBsI1atbrhKlq4SBdTWgTOMLy5FhvSNuqe1kOKZs=",
       "System.Text.Json.dll": "sha256-Cz9OOnvmQD3RAVbyf2r2LF6UPp7bKCLaJXLtDcoACqE=",

diff --git a/docs/V5/_framework/blazor.boot.json.br b/docs/V5/_framework/blazor.boot.json.br
diff --git a/docs/V5/_framework/blazor.boot.json.gz b/docs/V5/_framework/blazor.boot.json.gz
diff --git a/docs/V5/docs/BlazorStrap-Docs.bundle.scp.css b/docs/V5/docs/BlazorStrap-Docs.bundle.scp.css
@@ -16,3 +16,20 @@ text#svg-text[b-1lgjffb7c2]  {
         transform: rotate(360deg);
     }
 }
+/* docs/Samples/Forms/Validation/ValidationMain.razor.rz.scp.css */
+[b-cv9jnflrzf] .custom-file-button input[type=file] {
+    margin-left: -2px !important;
+}
+
+    [b-cv9jnflrzf] .custom-file-button input[type=file]::-webkit-file-upload-button {
+        display: none;
+    }
+
+    [b-cv9jnflrzf].custom-file-button input[type=file]::file-selector-button {
+        display: none;
+    }
+
+[b-cv9jnflrzf] .custom-file-button:hover label {
+    background-color: #dde0e3;
+    cursor: pointer;
+}
diff --git a/docs/V5/docs/Samples/Components/Modal/Modal7.md b/docs/V5/docs/Samples/Components/Modal/Modal7.md
@@ -1,4 +1,4 @@
-<BSModal DataId="modal7a" IsCentered="true">
+<BSModal DataId="modal7a" IsCentered="true" IsStaticBackdrop="true">
     <Header>Modal 1</Header>
     <Content>Hide this modal and show the second with the button below.</Content>
     <Footer>

diff --git a/docs/V5/docs/Samples/Content/Tables/Tables1b.md b/docs/V5/docs/Samples/Content/Tables/Tables1b.md
@@ -0,0 +1,30 @@
+<BSTable IsResponsive="true" IsStriped="true">
+    <BSTHead>
+        <BSTR>
+            <BSTD>#</BSTD>
+            <BSTD>First</BSTD>
+            <BSTD>Last</BSTD>
+            <BSTD>Handle</BSTD>
+        </BSTR>
+    </BSTHead>
+    <BSTBody>
+        <BSTR>
+            <BSTD>1</BSTD>
+            <BSTD>John</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JohnDoe <br/>media.com</BSTD>
+        </BSTR>
+        <BSTR>
+            <BSTD>2</BSTD>
+            <BSTD>Jane</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JaneDoe <br/>media.com</BSTD>
+        </BSTR>
+    </BSTBody>
+    <BSTFoot>
+        <BSTR>
+            <BSTD ColSpan="4">Spanned Table Footer Here</BSTD>
+        </BSTR>
+
+    </BSTFoot>
+</BSTable>
diff --git a/docs/V5/docs/Samples/Forms/Validation/ValidationMain.md b/docs/V5/docs/Samples/Forms/Validation/ValidationMain.md
@@ -1,34 +1,34 @@
 @using System.ComponentModel.DataAnnotations
-<BSForm Model="Modal" IsRow="true" Gutters="Gutters.Medium" OnValidSubmit="OnSubmit" OnReset="Reset">
-    <DataAnnotationsValidator/>
+<BSForm Model="Modal" IsRow="true" Gutters="Gutters.Medium" OnSubmit="OnSubmit" OnReset="Reset">
+    <DataAnnotationsValidator />
     <BSCol Position="Position.Relative" ColumnMedium="12">
         @_message
-        <BSValidationSummary/>
+        <BSValidationSummary />
     </BSCol>
     <BSCol Position="Position.Relative" ColumnMedium="4">
         <BSLabel>First name</BSLabel>
-        <BSInput InputType="InputType.Text" @bind-Value="Modal.FirstName" ValidateOnInput="true"/>
-        <BSFeedback For="@(() => Modal.FirstName)" ValidMessage="First name looks good."/>
+        <BSInput InputType="InputType.Text" @bind-Value="Modal.FirstName" ValidateOnInput="true" />
+        <BSFeedback For="@(() => Modal.FirstName)" ValidMessage="First name looks good." />
     </BSCol>
     <BSCol Position="Position.Relative" ColumnMedium="4">
         <BSLabel>Middle name</BSLabel>
-        <BSInput InputType="InputType.Text" @bind-Value="Modal.MiddleName"/>
-        <BSFeedback For="@(() => Modal.MiddleName)" ValidMessage="Middle name looks good."/>
+        <BSInput InputType="InputType.Text" @bind-Value="Modal.MiddleName" />
+        <BSFeedback For="@(() => Modal.MiddleName)" ValidMessage="Middle name looks good." />
     </BSCol>
     <BSCol Position="Position.Relative" ColumnMedium="4">
         <BSLabel>Last name</BSLabel>
-        <BSInput InputType="InputType.Text" @bind-Value="Modal.LastName"/>
-        <BSFeedback For="@(() => Modal.LastName)" ValidMessage="Last name looks good."/>
+        <BSInput InputType="InputType.Text" @bind-Value="Modal.LastName" />
+        <BSFeedback For="@(() => Modal.LastName)" ValidMessage="Last name looks good." />
     </BSCol>
-    <BSCol Position="Position.Relative" ColumnMedium="4" Class="@(@BS.Form_Floating)"> 
-        <BSInput InputType="InputType.Text" @bind-Value="Modal.Email" placeholder="Email Address"/>
-        <BSLabel IsFloating="true" PaddingStart="Padding.Large">Email Address</BSLabel>
-        <BSFeedback For="@(() => Modal.Email)" ValidMessage="Email address looks good."/>
+    <BSCol Position="Position.Relative" ColumnMedium="4">
+        <BSLabel>Email Address</BSLabel>
+        <BSInput InputType="InputType.Text" @bind-Value="Modal.Email" placeholder="Email Address" />
+        <BSFeedback For="@(() => Modal.Email)" ValidMessage="Email address looks good." />
     </BSCol>
     <BSCol Position="Position.Relative" ColumnMedium="6">
         <BSLabel>Photo</BSLabel>
-        <BSInputFile ValidWhen="@(() => Modal.HasPendingPhoto)" OnChange="OnFileChange"/>
-        <BSFeedback For="@(() => Modal.HasPendingPhoto)" ValidMessage="Looks like you selected a photo."/>
+        <BSInputFile ValidWhen="@(() => Modal.HasPendingPhoto)" OnChange="OnFileChange" />
+        <BSFeedback For="@(() => Modal.HasPendingPhoto)" ValidMessage="Looks like you selected a photo." />
     </BSCol>
     <BSCol Column="12">
         <BSButton Color="BSColor.Primary" IsSubmit="true">Submit</BSButton>
@@ -49,7 +49,10 @@
     }
     private void OnSubmit(EditContext e)
     {
-        _message = "Submitted to database";
+        if (e.Validate())
+        {
+            _message = "Submitted to database";
+        }
     }
     public class EmployeeModal
     {
@@ -69,7 +72,7 @@
         public bool? HasPendingPhoto { get; set; }
         public string? PhotoName { get; set; }
     }
-    public void Reset ()
+    public void Reset()
     {
         Modal = new EmployeeModal();
     }

diff --git a/docs/V5/docs/Samples/Forms/Validation/ValidationMain.razor.md b/docs/V5/docs/Samples/Forms/Validation/ValidationMain.razor.md
@@ -0,0 +1,16 @@
+::deep .custom-file-button input[type=file] {
+    margin-left: -2px !important;
+}
+
+    ::deep .custom-file-button input[type=file]::-webkit-file-upload-button {
+        display: none;
+    }
+
+    ::deep.custom-file-button input[type=file]::file-selector-button {
+        display: none;
+    }
+
+::deep .custom-file-button:hover label {
+    background-color: #dde0e3;
+    cursor: pointer;
+}
diff --git a/docs/V5/docs/Static/Content/Tables.md b/docs/V5/docs/Static/Content/Tables.md
@@ -3,13 +3,19 @@
 See [shared](layout/shared) for additional parameters    
 :::
 
-| Parameter    | Type | Valid      | Remarks/Output      | 
-|--------------|------|------------|---------------------|
-| Color        | Enum | BSColor    | `.table-[]`         | {.table-striped .p-2}  
-| IsBordered   | bool | true/false | `.table-bordered`   |
-| IsBorderLess | bool | true/false | `.table-borderless` |
-| IsCaptionTop | bool | true/false | `.caption-top`      |
-| IsStriped    | bool | true/false | `.table-striped`    |
+| Parameter		         | Type   | Valid      | Remarks/Output        | 
+|------------------------|--------|------------|-----------------------|
+| Color			         | Enum   | BSColor    | `.table-[]`           | {.table-striped .p-2}  
+| IsBordered	         | bool   | true/false | `.table-bordered`     |
+| IsBorderLess	         | bool   | true/false | `.table-borderless`   |
+| IsHoverable	         | bool   | true/false | `.table-hover`        |
+| IsCaptionTop	         | bool   | true/false | `.caption-top`        |
+| IsDark		         | bool   | true/false | `.table-dark`         |
+| IsSmall		         | bool   | true/false | `.table-sm`           |
+| IsStriped		         | bool   | true/false | `.table-striped`      |
+| IsResponsive           | bool   | true/false | `.table-responsive`   |
+| ResponsiveSize         | bool   | true/false | `.table-responsive-#` |
+| ResponsiveWrapperClass | string |	string     | Adds string to class  |
 
 :::
 #### Component \<BSTR\>
@@ -41,6 +47,10 @@ Shared Parameters only
 
 {{sample=Content/Tables/Tables1}}
 
+### Responsive Tables Example
+
+{{sample=Content/Tables/Tables1b}}
+
 #### Component \<BSDataTable<TValue>\> (Version  >= 5.0.105-Preview2)
 See [shared](layout/shared) for additional parameters    
 :::

diff --git a/src/BlazorStrap-Docs/Samples/Components/Modal/Modal7.razor b/src/BlazorStrap-Docs/Samples/Components/Modal/Modal7.razor
@@ -1,4 +1,4 @@
-<BSModal DataId="modal7a" IsCentered="true">
+<BSModal DataId="modal7a" IsCentered="true" IsStaticBackdrop="true">
     <Header>Modal 1</Header>
     <Content>Hide this modal and show the second with the button below.</Content>
     <Footer>