Merge branch 'main' into refactor-city

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Pages/Introduction.razor

@@ -6,14 +6,14 @@
 
 <p>@Localizer["SubTitle"]</p>
 
-<h3>@Localizer["UpdateTitle"]</h3>
+<p class="code-label">@Localizer["UpdateTitle"]</p>
 
 <p>
     @((MarkupString)Localizer["UpdateLog"].Value)
     <a href="@WebsiteOption.Value.WikiUrl" target="_blank">@Localizer["UpdateLogLink"]</a>
 </p>
 
-<h3>@Localizer["LearnTitle"]</h3>
+<p class="code-label">@Localizer["LearnTitle"]</p>
 
 <ul class="ul-demo">
     <li><a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174" target="_blank">@Localizer["LearnLi1"]</a></li>
@@ -41,19 +41,19 @@
     </li>
 </ul>
 
-<h3>@Localizer["ProjectsShow"]</h3>
+<p class="code-label">@Localizer["ProjectsShow"]</p>
 
 <p>@((MarkupString)Localizer["P5", LocalizerRules].Value)</p>
 
 <p>@Localizer["ShowWebSiteTitle1"]：<a href="@($"{WebsiteOption.Value.AdminUrl}/Pages")" target="_blank">@WebsiteOption.Value.AdminUrl</a></p>
 
 <p>@Localizer["ShowWebSiteTitle2"]：<a href="@($"{WebsiteOption.Value.AdminProUrl}")" target="_blank" class="text-success">@WebsiteOption.Value.AdminProUrl</a></p>
 
-<h4>@Localizer["GetStarted"]</h4>
+<p class="code-label">@Localizer["GetStarted"]</p>
 
 <p><a href="https://v5.bootcss.com/docs/getting-started/introduction/" target="_blank">Bootstrap @Localizer["QuickStart"]</a></p>
 
-<h4>@Localizer["Features"]</h4>
+<p class="code-label">@Localizer["Features"]</p>
 
 <p>@((MarkupString)Localizer["P6"].Value)</p>
 
@@ -67,6 +67,13 @@
     <li>@Localizer["AdvantageLi5"]</li>
 </ul>
 
+<p class="code-label">视频资料</p>
+
+<ul class="ul-demo">
+	<li>鞠佬力作 <code>BootstrapBlazor</code> 从零开始教程 <a href="https://space.bilibili.com/2060594/lists/1989479">[传送门]</a>（少奋斗三十年）</li>
+	<li>官网视频 <code>BootstrapBlazor</code> 组件讲解 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a>（少奋斗十年）</li>
+</ul>
+
 <p class="code-label">@Localizer["Community"]</p>
 
 <QQGroup />

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

@@ -37,7 +37,7 @@
     <section ignore>@((MarkupString)Localizer["ShowLabelDescription"].Value)</section>
     <Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
     <ValidateForm Model="@Model">
-        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
+        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" IsClearable="true" />
     </ValidateForm>
     <Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
     <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />

src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor

@@ -6,6 +6,14 @@
 <h3>@Localizer["TableBaseTitle"] - @NavMenuLocalizer["TableBase"]</h3>
 <h4>@Localizer["TableBaseDescription"]</h4>
 
+<Tips Color="Color.Success">
+	<p>表格功能比较多，参数也非常多，示例更多，各个功能详细用法建议查看下方视频讲解 <b>鞠佬</b> 有专门的视频讲解</p>
+	<ul class="ul-demo">
+		<li>鞠佬 BootstrapBlazor Table 系列 <a href="https://space.bilibili.com/2060594/lists/4298264?type=season">[传送门]</a></li>
+		<li>官网 组件讲解合集 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a></li>
+	</ul>
+</Tips>
+
 <Tips>
     <p>@((MarkupString)Localizer["TableBaseExplain1"].Value)</p>
     <p>@((MarkupString)Localizer["TableBaseExplain2"].Value)</p>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs

@@ -192,6 +192,19 @@ private async Task OnClickItem(string val)
 
     private List<string> Rows => _filterItems ?? [.. Items];
 
+    /// <summary>
+    /// 点击清空按钮时调用此方法 由 Javascript 触发
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerClear()
+    {
+        await TriggerFilter("");
+
+        _clientValue = null;
+        CurrentValueAsString = string.Empty;
+    }
+
     /// <summary>
     /// TriggerFilter method
     /// </summary>
@@ -228,12 +241,10 @@ public async Task TriggerFilter(string val)
     /// <param name="v"></param>
     /// <returns></returns>
     [JSInvokable]
-    public Task TriggerChange(string v)
+    public void TriggerChange(string v)
     {
         _clientValue = v;
         CurrentValueAsString = v;
-
-        return Task.CompletedTask;
     }
 
     private List<string> GetFilterItemsByValue(string val)

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js

@@ -143,7 +143,7 @@ export function init(id, invoke, value, changedEventCallback) {
 
     EventHandler.on(el, 'click', '.clear-icon', e => {
         input.value = '';
-        invoke.invokeMethodAsync('TriggerFilter', '');
+        invoke.invokeMethodAsync('TriggerClear');
     });
 }
 

test/UnitTest/Components/AutoCompleteTest.cs

@@ -196,6 +196,27 @@ public async Task IgnoreCase_Ok()
         Assert.Equal(2, menus.Count);
     }
 
+    [Fact]
+    public async Task TriggerClear_Ok()
+    {
+        var val = "task1";
+        var items = new List<string>() { "task1", "Task2" };
+        var cut = Context.RenderComponent<AutoComplete>(builder =>
+        {
+            builder.Add(a => a.Items, items);
+            builder.Add(a => a.IgnoreCase, false);
+            builder.Add(a => a.Value, val);
+            builder.Add(a => a.IsClearable, true);
+            builder.Add(a => a.ValueChanged, EventCallback.Factory.Create<string?>(this, v =>
+            {
+                val = v;
+            }));
+        });
+
+        await cut.InvokeAsync(cut.Instance.TriggerClear);
+        Assert.Empty(val);
+    }
+
     [Fact]
     public async Task DisplayCount_Ok()
     {