feat(SelectCity): add ShowSearch parameter (#6933)

* feat: 增加 shownCallback 回调

* chore: 更新解决方案

* doc: 更新源代码片段

* doc: 增加示例

* doc: 更新多语言

* chore: bump version 9.0.4

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -66,7 +66,7 @@
     <PackageReference Include="BootstrapBlazor.PdfViewer" Version="9.0.6" />
     <PackageReference Include="BootstrapBlazor.Player" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.RDKit" Version="9.0.2" />
-    <PackageReference Include="BootstrapBlazor.Region" Version="9.0.3" />
+    <PackageReference Include="BootstrapBlazor.Region" Version="9.0.4" />
     <PackageReference Include="BootstrapBlazor.SignaturePad" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.SmilesDrawer" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.Sortable" Version="9.0.3" />

src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor

@@ -31,7 +31,7 @@
 <DemoBlock Title="@Localizer["OtpInputsNormalTitle"]"
            Introduction="@Localizer["OtpInputsNormalIntro"]"
            Name="Normal">
-    <div class="row g-3 mb-3">
+    <section ignore class="row g-3 mb-3">
         <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
                 <BootstrapInputGroupLabel DisplayText="Type"></BootstrapInputGroupLabel>
@@ -56,7 +56,7 @@
                 <Switch @bind-Value="@_disabled"></Switch>
             </BootstrapInputGroup>
         </div>
-    </div>
+    </section>
     <OtpInput Value="@_value" Type="_otpInputType" PlaceHolder="@_placeHolder" IsReadonly="_readonly" IsDisabled="_disabled"></OtpInput>
 </DemoBlock>
 

src/BootstrapBlazor.Server/Components/Samples/SelectCities.razor

@@ -10,11 +10,31 @@
 <DemoBlock Title="@Localizer["CityNormalTitle"]"
            Introduction="@Localizer["CityNormalIntro"]"
            Name="Normal">
-    <SelectCity Value="@_value"></SelectCity>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["CityMultipleTitle"]"
-           Introduction="@Localizer["CityMultipleIntro"]"
-           Name="IsMultiple">
-    <SelectCity IsMultiple="true" Value="@_multipleValues"></SelectCity>
+               <div class="row g-3 mb-3">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="ShowSearch"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="_showSearch"></Switch>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="AutoClose"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="_autoClose"></Switch>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="IsMultiple"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="@_isMultiple"></Switch>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="@_isDisabled"></Switch>
+            </BootstrapInputGroup>
+        </div>
+    </div>
+    <SelectCity Value="@_value" ShowSearch="_showSearch" IsMultiple="_isMultiple" IsDisabled="_isDisabled" AutoClose="_autoClose"></SelectCity>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/SelectCities.razor.cs

@@ -12,5 +12,11 @@ public partial class SelectCities
 {
     private string? _value = null;
 
-    private string? _multipleValues = null;
+    private bool _showSearch = true;
+
+    private bool _isMultiple = false;
+
+    private bool _isDisabled = false;
+
+    private bool _autoClose = true;
 }

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -7234,9 +7234,7 @@
     "CityTitle": "City Selector",
     "CityDescription": "Provides a city selector classified by province",
     "CityNormalTitle": "Basic usage",
-    "CityNormalIntro": "Select a city from the drop-down box",
-    "CityMultipleTitle": "Multiple",
-    "CityMultipleIntro": "Enable multiple selection mode by setting <code>IsMultiple</code> , and all cities will be automatically selected when clicking a province in the pop-up window."
+    "CityNormalIntro": "Select a city from the drop-down box"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectProvinces": {
     "ProvinceTitle": "Province Selector",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -7234,9 +7234,7 @@
     "CityTitle": "SelectCity 城市选择器",
     "CityDescription": "提供以省分类的城市选择器",
     "CityNormalTitle": "基本用法",
-    "CityNormalIntro": "通过下拉框的形式选择城市",
-    "CityMultipleTitle": "多选",
-    "CityMultipleIntro": "通过设置 <code>IsMultiple</code> 开启多选模式，点击弹窗中省份时自动选中所有城市"
+    "CityNormalIntro": "通过下拉框的形式选择城市"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectProvinces": {
     "ProvinceTitle": "SelectProvince 省选择器",

src/BootstrapBlazor/wwwroot/modules/base-popover.js

@@ -15,7 +15,8 @@ const Popover = {
                     return isDisabled(el) || isDisabled(el.parentNode) || isDisabled(el.querySelector('.form-control'))
                 },
                 initCallback: null,
-                hideCallback: null
+                hideCallback: null,
+                shownCallback: null
             },
             ...(config || {})
         }
@@ -105,7 +106,11 @@ const Popover = {
                         popover.hasDisplayNone = true;
                         content.classList.remove("d-none")
                     }
-                    body.append(content)
+                    body.append(content);
+
+                    if (popover.shownCallback != null) {
+                        popover.shownCallback();
+                    }
                 }
             }