feat(SelectRegion): add SelectRegion component

BootstrapBlazor.Extensions.slnx

@@ -61,6 +61,7 @@
     <Project Path="src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj" />
     <Project Path="src/components/BootstrapBlazor.Player/BootstrapBlazor.Player.csproj" />
     <Project Path="src/components/BootstrapBlazor.RDKit/BootstrapBlazor.RDKit.csproj" />
+    <Project Path="src/components/BootstrapBlazor.Region/BootstrapBlazor.Region.csproj" Id="f4e0b11d-f630-4e34-9dca-e9c6b6b60cee" />
     <Project Path="src/components/BootstrapBlazor.SignaturePad/BootstrapBlazor.SignaturePad.csproj" />
     <Project Path="src/components/BootstrapBlazor.SmilesDrawer/BootstrapBlazor.SmilesDrawer.csproj" />
     <Project Path="src/components/BootstrapBlazor.Sortable/BootstrapBlazor.Sortable.csproj" />
@@ -106,6 +107,7 @@
     <Project Path="test/UnitTestHoliday/UnitTestHoliday.csproj" />
     <Project Path="test/UnitTestOpcDa/UnitTestOpcDa.csproj" />
     <Project Path="test/UnitTestOpcUa/UnitTestOpcUa.csproj" />
+    <Project Path="test/UnitTestRegion/UnitTestRegion.csproj" Id="37e8696e-3ae5-468f-b6d9-0a8eb4e81876" />
     <Project Path="test/UnitTestSvgIcon/UnitTestSvgIcon.csproj" />
   </Folder>
 </Solution>

src/components/BootstrapBlazor.Region/BootstrapBlazor.Region.csproj

@@ -0,0 +1,28 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>9.0.0</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Province City Region</PackageTags>
+    <Description>Bootstrap UI components extensions of Region Select</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Content Remove="Data\**\*.json" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Include="Data\**\*.json" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="9.11.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Using Include="Microsoft.JSInterop" />
+  </ItemGroup>
+
+</Project>

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

@@ -0,0 +1,31 @@
+// 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>
+/// Region 视图模式
+/// </summary>
+internal enum RegionViewMode
+{
+    /// <summary>
+    /// 省模式
+    /// </summary>
+    Province = 0,
+
+    /// <summary>
+    /// 城市模式
+    /// </summary>
+    City = 1,
+
+    /// <summary>
+    /// 区县模式
+    /// </summary>
+    County = 2,
+
+    /// <summary>
+    /// 乡镇街道模式
+    /// </summary>
+    Detail = 3
+}

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

@@ -0,0 +1,106 @@
+@namespace BootstrapBlazor.Components
+@inherits PopoverSelectBase<string>
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js", JSObjectReference = true)]
+
+@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">
+        <div class="bb-region-header">
+            <ul>
+                <li class="@GetHeaderActiveClass(RegionViewMode.Province)" @onclick="@OnSwitchProvinceView">省/直辖市</li>
+                <li class="@GetHeaderActiveClass(RegionViewMode.City)" @onclick="@OnSwitchCityView">市</li>
+                <li class="@GetHeaderActiveClass(RegionViewMode.County)" @onclick="@OnSwitchCountyView">区/县</li>
+                <li class="@GetHeaderActiveClass(RegionViewMode.Detail)" @onclick="@OnSwitchDetailView">乡/镇/街道</li>
+            </ul>
+        </div>
+        <div class="bb-region-body">
+            <div class="@GetBodyActiveClass(RegionViewMode.Province)">
+                @RenderProvinces()
+            </div>
+            <div class="@GetBodyActiveClass(RegionViewMode.City)">
+                @RenderCities()
+            </div>
+            <div class="@GetBodyActiveClass(RegionViewMode.County)">
+                @RenderCounties()
+            </div>
+            <div class="@GetBodyActiveClass(RegionViewMode.Detail)">
+                @RenderDetails()
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    RenderFragment RenderProvinces() =>
+    @<ul>
+        @foreach(var item in GetProvinces())
+        {
+            <li class="@GetProvinceActiveClass(item)" @onclick="() => OnClickProvince(item)">@item</li>
+        }
+    </ul>;
+
+    RenderFragment RenderCities() =>
+    @<ul class="bb-region-province">
+        @{
+            var items = GetCities();
+        }
+        @if (items.Count == 0)
+        {
+            <li>无匹配项目</li>
+        }
+        else
+        {
+            foreach(var item in items)
+            {
+                <li class="@GetCityActiveClass(item)" @onclick="() => OnClickCity(item)">@item</li>
+            }
+        }
+    </ul>;
+
+    RenderFragment RenderCounties() =>
+    @<ul class="bb-region-province">
+        @{
+            var items = GetCounties();
+        }
+        @if (items.Count == 0)
+        {
+            <li>无匹配项目</li>
+        }
+        else
+        {
+            @foreach(var item in items)
+            {
+                <li class="@GetCountyActiveClass(item)" @onclick="() => OnClickCounty(item)">@item.Name</li>
+            }
+        }
+    </ul>;
+
+    RenderFragment RenderDetails() =>
+    @<ul class="bb-region-province">
+        @{
+            var items = GetDetails();
+        }
+        @if (items.Count == 0)
+        {
+            <li>无匹配项目</li>
+        }
+        else
+        {
+            @foreach(var item in items)
+            {
+                <li class="@GetDetailActiveClass(item)" @onclick="() => OnClickDetail(item)">@item</li>
+            }
+        }
+    </ul>;
+}