fix(FilterButton): use Popover prevent blocked (#6900)

* chore: 更新清除 Filter 图标

* refactor: 更新 MD 图标

* feat: FilterButton 支持 Popover

* feat: 支持录入后自动过滤功能

Author: ArgoZhang

src/BootstrapBlazor/Components/Filters/FilterButton.razor

@@ -2,13 +2,15 @@
 @typeparam TValue
 @inherits Dropdown<TValue>
 
-<button type="button" class="btn btn-filter dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="@FilterIcon" />
-</button>
-<div class="dropdown-menu shadow">
-    @foreach (var item in Items)
-    {
-        <div class="@ActiveItem(item)" @onclick="e => OnItemClick(item)">@item.Text</div>
-    }
+<div id="@Id" class="bb-filter-btn-group">
+    <button type="button" class="btn btn-filter dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false">
+        <i class="@FilterIcon" />
+    </button>
+    <div class="dropdown-menu shadow">
+        @foreach (var item in Items)
+        {
+            <div class="@ActiveItem(item)" @onclick="e => OnItemClick(item)">@item.Text</div>
+        }
+    </div>
+    <Button Icon="@ClearIcon" Color="Color.None" class="btn-ban text-danger" OnClickWithoutRender="ClearFilter" />
 </div>
-<Button Icon="@ClearIcon" Color="Color.None" class="btn-ban text-danger" OnClickWithoutRender="ClearFilter" />

src/BootstrapBlazor/Components/Filters/FilterButton.razor.js

@@ -0,0 +1,22 @@
+import Data from "../../modules/data.js"
+import Popover from "../../modules/base-popover.js"
+
+export function init(id) {
+    const el = document.getElementById(id)
+    if (el == null) {
+        return
+    }
+    const popover = Popover.init(el);
+
+    const dropdown = { popover }
+    Data.set(id, dropdown)
+}
+
+export function dispose(id) {
+    const dropdown = Data.get(id)
+    Data.remove(id)
+
+    if (dropdown) {
+        Popover.dispose(dropdown.popover)
+    }
+}

src/BootstrapBlazor/Components/Filters/FilterButton.razor.scss

@@ -0,0 +1,4 @@
+.bb-filter-btn-group {
+    display: flex;
+    flex-wrap: nowrap;
+}

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -40,6 +40,7 @@
 @use "../../Components/ErrorLogger/ErrorLogger.razor.scss";
 @use "../../Components/FlipClock/FlipClock.razor.scss";
 @use "../../Components/FileIcon/FileIcon.razor.scss";
+@use "../../Components/Filters/FilterButton.razor.scss";
 @use "../../Components/Filters/MultiFilter.razor.scss";
 @use "../../Components/Filters/TableColumnFilter.razor.scss";
 @use "../../Components/Footer/Footer.razor.scss";