refactor: 增加 Region 组件

Author: ArgoZhang

src/components/BootstrapBlazor.Region/Components/Region.razor

@@ -7,12 +7,35 @@
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
-    <div data-bs-toggle="bb.dropdown" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString">
+    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString">
         <input type="text" id="@InputId" disabled="@Disabled" readonly placeholder="@PlaceHolder" class="@InputClassString" value="@CurrentValue" />
         <span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
     </div>
     @if (GetClearable())
     {
         <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
     }
+    <div class="dropdown-menu">
+		<div class="bb-region-header">
+			<ul>
+				<li>省/直辖市</li>
+				<li>市</li>
+				<li>区/县</li>
+				<li>乡/镇/街道</li>
+			</ul>
+		</div>
+        <div class="bb-region-body">
+            @RenderProvinces()
+        </div>
+    </div>
 </div>
+
+@code {
+    RenderFragment RenderProvinces() =>
+    @<ul class="bb-region-province">
+        @foreach(var item in RegionService.GetProvinces())
+        {
+            <li>@item</li>
+        }
+    </ul>;
+}

src/components/BootstrapBlazor.Region/Components/Region.razor.cs

@@ -54,7 +54,11 @@ public partial class Region
     /// </summary>
     [Inject]
     [NotNull]
-    protected IIconTheme? IconTheme { get; set; }
+    private IIconTheme? IconTheme { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IRegionService? RegionService { get; set; }
 
     private string? ClassString => CssBuilder.Default("select bb-region")
         .AddClassFromAttributes(AdditionalAttributes)

src/components/BootstrapBlazor.Region/Components/Region.razor.css

@@ -1,3 +1,51 @@
 .bb-region {
     position: relative;
 }
+
+.bb-region-province {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+    .bb-region-province > li {
+        padding: 3px 12px;
+        border-radius: var(--bs-border-radius);
+        cursor: pointer;
+    }
+
+        .bb-region-province > li:hover {
+            background-color: var(--bs-secondary-bg-subtle);
+        }
+
+.popover-region ul {
+    margin: 0;
+    padding: 0;
+}
+
+.popover-region li {
+    list-style: none;
+}
+
+.bb-region-header ul {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: .5rem;
+    font-weight: bold;
+}
+
+    .bb-region-header ul li {
+        cursor: pointer;
+        padding: 3px 12px;
+        border-radius: var(--bs-border-radius);
+    }
+
+        .bb-region-header ul li:hover {
+            background-color: var(--bs-secondary-bg-subtle);
+        }
+
+.bb-region-body {
+    padding: .5rem;
+    max-width: 400px;
+}

src/components/BootstrapBlazor.Region/Components/Region.razor.js

@@ -1,7 +1,23 @@
-export function init(id) {
+import Data from "../../BootstrapBlazor/modules/data.js"
+import Popover from "../../BootstrapBlazor/modules/base-popover.js"
 
+export function init(id) {
+    const el = document.getElementById(id)
+    if (el === null) {
+        return
+    }
+    const input = el.querySelector(`#${id}_input`);
+    const popover = Popover.init(el);
+
+    Data.set(id, { el, popover });
 }
 
 export function dispose(id) {
+    const region = Data.get(id)
+    Data.remove(id)
 
+    const { el, popover } = region;
+    if (popover) {
+        Popover.dispose(select.popover);
+    }
 }