feat: 增加省选择组件

Author: ArgoZhang

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

@@ -0,0 +1,26 @@
+@namespace BootstrapBlazor.Components
+@inherits SelectRegionBase
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js")]
+
+@if (IsShowLabel)
+{
+    <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
+}
+<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
+    <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="@CurrentValueAsString" />
+        <span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
+    </div>
+    @if (!IsDisabled)
+    {
+        <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
+    }
+    <div class="dropdown-menu bb-region-body">
+        <ul>
+            @foreach (var item in GetProvinces())
+            {
+                <li class="@GetActiveClass(item)" @onclick="() => OnSelectProvince(item)">@item</li>
+            }
+        </ul>
+    </div>
+</div>

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

@@ -0,0 +1,60 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// SelectProvince 组件
+/// </summary>
+public partial class SelectProvince
+{
+    /// <summary>
+    /// 获得/设置 是否可多选 默认 false 单选
+    /// </summary>
+    [Parameter]
+    public bool IsMultiple { get; set; }
+
+    private string InputId => $"{Id}_input";
+
+    private string? ClassString => CssBuilder.Default("select bb-province")
+        .AddClass("disabled", IsDisabled)
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private readonly HashSet<string> _values = [];
+
+    private string? GetActiveClass(string item) => _values.Contains(item) || CurrentValue == item ? "active" : null;
+
+    private async Task OnClearValue()
+    {
+        if (IsMultiple)
+        {
+            _values.Clear();
+        }
+        CurrentValue = "";
+
+        if (OnClearAsync != null)
+        {
+            await OnClearAsync();
+        }
+    }
+
+    private void OnSelectProvince(string item)
+    {
+        if (IsMultiple)
+        {
+            if (!_values.Remove(item))
+            {
+                _values.Add(item);
+            }
+            CurrentValue = string.Join(",", _values);
+        }
+        else
+        {
+            CurrentValue = item;
+        }
+    }
+
+    private HashSet<string> GetProvinces() => RegionService.GetProvinces();
+}

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

@@ -0,0 +1,66 @@
+.bb-province {
+    position: relative;
+}
+
+    .bb-province:not(.disabled):hover .form-select-append {
+        display: none;
+    }
+
+.dropdown-menu {
+    --bs-dropdown-padding-y: 0;
+    --bb-region-body-color: #495057;
+    --bb-region-body-hover-bg-color: #e9ecef;
+    --bb-region-body-active-bg-color: #dee2e6;
+    --bb-region-body-hover-color: #000;
+    --bb-region-body-active-color: #000;
+    --bb-region-body-width: 400px;
+    --bb-region-body-padding: .5rem;
+    --bb-region-body-item-padding: 3px 12px;
+    --bb-region-body-gap: 5px;
+}
+
+    .dropdown-menu ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    .dropdown-menu li {
+        list-style: none;
+        transition: background-color .3s linear, color .3s linear;
+    }
+
+[data-bs-theme="dark"] .dropdown-menu {
+    --bb-region-body-color: #c0c4cc;
+    --bb-region-body-hover-color: #fff;
+    --bb-region-body-active-color: #fff;
+    --bb-region-body-hover-bg-color: #495057;
+    --bb-region-body-active-bg-color: #6c757d;
+}
+
+.bb-region-body {
+    padding: var(--bb-region-body-padding);
+    width: var(--bb-region-body-width);
+}
+
+    .bb-region-body ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--bb-region-body-gap);
+    }
+
+    .bb-region-body ul li {
+        padding: var(--bb-region-body-item-padding);
+        border-radius: var(--bs-border-radius);
+        color: var(--bb-region-body-color);
+        cursor: pointer;
+    }
+
+        .bb-region-body ul li:hover {
+            background-color: var(--bb-region-body-hover-bg-color);
+            color: var(--bb-region-body-hover-color);
+        }
+
+        .bb-region-body ul li.active {
+            background-color: var(--bb-region-body-active-bg-color);
+            color: var(--bb-region-body-active-color);
+        }