fix(RibbonTab): cannot automatically shrink in float mode (#5775)

* 修复无法自动收缩问题

* refactor: 代码规范化

* fix: 提高性能

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: izanhzh

src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor

@@ -7,7 +7,8 @@
                      OnItemClickAsync="OnItemClickAsync!" OnMenuClickAsync="OnMenuClickAsync!" OnFloatChanged="OnFloatChanged!"
                      EncodeAnchorCallback="EncodeAnchorCallback!" DecodeAnchorCallback="DecodeAnchorCallback!"
                      RightButtonsTemplate="RightButtonsTemplate!"
-                     RibbonArrowUpIcon="@RibbonArrowUpIcon" RibbonArrowDownIcon="@RibbonArrowDownIcon" RibbonArrowPinIcon="@RibbonArrowPinIcon"></RibbonTabHeader>
+                     RibbonArrowUpIcon="@RibbonArrowUpIcon" RibbonArrowDownIcon="@RibbonArrowDownIcon"
+                     RibbonArrowPinIcon="@RibbonArrowPinIcon"></RibbonTabHeader>
     @if (ChildContent != null)
     {
         <div class="ribbon-body">

src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.js

@@ -1,37 +1,43 @@
 import Data from "../../modules/data.js"
 import EventHandler from "../../modules/event-handler.js"
+import { registerBootstrapBlazorModule } from "../../modules/utility.js"
 
 export function init(id, invoke, callback) {
     const el = document.getElementById(id)
     const rt = {
         element: el, invoke, callback,
         handlerClick: e => {
-            const isFloat = el.classList.contains('is-float')
-            if (isFloat) {
-                const expanded = el.classList.contains('is-expand')
-                if (expanded) {
-                    const ribbonBody = e.target.closest('.ribbon-body');
-                    if (ribbonBody) {
-                        invoke.invokeMethodAsync(callback)
-                    }
-                    else {
-                        const ribbonTab = e.target.closest('.ribbon-tab')
-                        if (ribbonTab !== el) {
-                            invoke.invokeMethodAsync(callback)
-                        }
+            [...document.querySelectorAll('.ribbon-header.is-float.is-expand')].forEach(headerEl => {
+                const tabId = headerEl.parentElement.getAttribute("id");
+                const tab = Data.get(tabId);
+                const { element, invoke, callback } = tab;
+
+                const ribbonBody = e.target.closest('.ribbon-body');
+                if (ribbonBody) {
+                    invoke.invokeMethodAsync(callback);
+                }
+                else {
+                    const ribbonTab = e.target.closest('.ribbon-tab')
+                    if (ribbonTab !== element) {
+                        invoke.invokeMethodAsync(callback);
                     }
                 }
-            }
+            });
         }
     }
     Data.set(id, rt)
 
-    EventHandler.on(document, 'click', rt.handlerClick)
+    registerBootstrapBlazorModule('RibbonTab', id, () => {
+        EventHandler.on(document, 'click', rt.handlerClick)
+    });
 }
 
 export function dispose(id) {
     const rt = Data.get(id)
     Data.remove(id)
 
-    EventHandler.off(document, 'click', rt.handlerClick)
+    const { RibbonTab } = window.BootstrapBlazor;
+    RibbonTab.dispose(id, () => {
+        EventHandler.off(document, 'click', rt.handlerClick)
+    });
 }

src/BootstrapBlazor/Components/RibbonTab/RibbonTabHeader.razor.cs

@@ -17,9 +17,7 @@ public partial class RibbonTabHeader
     /// </summary>
     [Parameter]
     [NotNull]
-#if NET6_0_OR_GREATER
     [EditorRequired]
-#endif
     public IEnumerable<RibbonTabItem>? Items { get; set; }
 
     /// <summary>