feat: 增加 Clearable 属性

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/BootstrapInput.razor

@@ -7,4 +7,22 @@
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 
-<input @attributes="@AdditionalAttributes" type="@Type" placeholder="@PlaceHolder" id="@Id" readonly="@ReadonlyString" class="@ClassName" disabled="@Disabled" @bind-value="CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" @ref="FocusElement" />
+@if (Clearable)
+{
+    <div class="bb-clearable-input">
+        @RenderInput
+        <i class="@ClearableIconString" @onclick="OnClickClear"></i>
+    </div>
+}
+else
+{
+    @RenderInput
+}
+
+@code {
+    RenderFragment RenderInput =>
+    @<input @attributes="@AdditionalAttributes" type="@Type" id="@Id" class="@ClassName"
+            readonly="@ReadonlyString" disabled="@Disabled"
+            placeholder="@PlaceHolder"
+            @bind-value="CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" @ref="FocusElement" />;
+}

src/BootstrapBlazor/Components/Input/BootstrapInput.razor.cs

@@ -22,8 +22,47 @@ public partial class BootstrapInput<TValue>
     [Parameter]
     public bool AutoSetDefaultWhenNull { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示清空小按钮 默认 false
+    /// </summary>
+    [Parameter]
+    public bool Clearable { get; set; }
+
+    /// <summary>
+    /// 获得/设置 清空文本框时回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<TValue, Task>? OnClear { get; set; }
+
+    /// <summary>
+    /// 获得/设置 清空小按钮图标 默认 null
+    /// </summary>
+    [Parameter]
+    public string? ClearableIcon { get; set; }
+
+    /// <summary>
+    /// 图标主题服务
+    /// </summary>
+    [Inject]
+    [NotNull]
+    private IIconTheme? IconTheme { get; set; }
+
     private string? ReadonlyString => Readonly ? "true" : null;
 
+    private string? ClearableIconString => CssBuilder.Default("form-control-clear-icon")
+        .AddClass(ClearableIcon)
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        ClearableIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputClearIcon);
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -47,4 +86,13 @@ protected override bool TryParseValueFromString(string value, [MaybeNullWhen(fal
         }
         return ret;
     }
+
+    private async Task OnClickClear()
+    {
+        if (OnClear != null)
+        {
+            await OnClear(Value);
+        }
+        CurrentValueAsString = "";
+    }
 }

src/BootstrapBlazor/Components/Input/BootstrapInput.razor.scss

@@ -0,0 +1,29 @@
+.bb-clearable-input {
+    display: inline-flex;
+    align-items: center;
+    flex-grow: 1;
+    width: 100%;
+    position: relative;
+
+    > input {
+        width: 100%;
+        flex-grow: 1;
+        padding-right: 2rem;
+
+        + .form-control-clear-icon {
+            color: var(--bb-border-hover-color);
+            cursor: pointer;
+            position: absolute;
+            right: 11px;
+            display: none;
+        }
+
+        &:focus + .form-control-clear-icon {
+            display: block;
+        }
+    }
+
+    &:hover .form-control-clear-icon {
+        display: block;
+    }
+}

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -51,6 +51,7 @@
 @import "../../Components/IFrame/IFrame.razor.scss";
 @import "../../Components/ImagePreviewer/ImagePreviewer.razor.scss";
 @import "../../Components/ImageViewer/ImageViewer.razor.scss";
+@import "../../Components/Input/BootstrapInput.razor.scss";
 @import "../../Components/Input/BootstrapInputGroup.razor.scss";
 @import "../../Components/Input/FloatingLabel.razor.scss";
 @import "../../Components/IpAddress/IpAddress.razor.scss";