Merge branch 'main' into refat-complete

ArgoZhang · ArgoZhang · commit 12bc57fc21f0 · 2024-12-30T11:25:29.000+08:00
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Inputs.razor b/src/BootstrapBlazor.Server/Components/Samples/Inputs.razor
@@ -222,4 +222,33 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["ClearableTitle"]"
+           Introduction="@Localizer["ClearableIntro"]"
+           Name="OnInput">
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <BootstrapInput Value="Model.Name" Clearable="true" ShowLabel="true" DisplayText="Clearable" />
+        </div>
+    </div>
+    <div class="row form-inline g-3 mt-0">
+        <div class="col-12 col-sm-6">
+            <BootstrapInput Value="Model.Name" Clearable="true" ShowLabel="true" DisplayText="Clearable" />
+        </div>
+    </div>
+    <div class="row g-3 mt-0">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel ShowRequiredMark DisplayText="Clearable"></BootstrapInputGroupLabel>
+                <BootstrapInput Value="@Model.Name" Clearable="true" />
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInput Value="@Model.Name" Clearable="true" />
+                <BootstrapInputGroupLabel ShowRequiredMark DisplayText="Clearable"></BootstrapInputGroupLabel>
+            </BootstrapInputGroup>
+        </div>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2780,7 +2780,9 @@
     "InputsFormatStringSetting": "Set up",
     "InputsFormatStringTips": "The <code>BootstrapInput</code> component binds <code>byte[]</code> array and formats it as an example of <code>base64</code> encoded string",
     "UseInputEvent": "Whether use oninput event when bind-value",
-    "IsTrim": "automatically trim white space when entering content"
+    "IsTrim": "automatically trim white space when entering content",
+    "ClearableTitle": "Clearable",
+    "ClearableIntro": "By setting the <code>Clearable=\"true\"</code> parameter, a small <b>Clear</b> button will be displayed when the component gains focus or when the mouse hovers over it."
   },
   "BootstrapBlazor.Server.Components.Samples.InputNumbers": {
     "InputNumbersTitle": "InputNumber",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2780,7 +2780,9 @@
     "InputsFormatStringSetting": "设置",
     "InputsFormatStringTips": "<code>BootstrapInput</code> 组件绑定 <code>byte[]</code> 数组，格式化成 <code>base64</code> 编码字符串示例",
     "UseInputEvent": "是否在文本框输入值时触发",
-    "IsTrim": "是否自动去除空格"
+    "IsTrim": "是否自动去除空格",
+    "ClearableTitle": "清除",
+    "ClearableIntro": "通过设置 <code>Clearable=\"true\"</code> 参数，使组件获得焦点或者鼠标悬浮时显示一个 <b>清除</b> 小按钮"
   },
   "BootstrapBlazor.Server.Components.Samples.InputNumbers": {
     "InputNumbersTitle": "InputNumber 组件",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.0-beta03</Version>
+    <Version>9.2.0-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
@@ -7,4 +7,25 @@
     <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
+        @if (!IsDisabled && !Readonly)
+        {
+            <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" />;
+}
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.cs b/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 = "";
+    }
 }
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
@@ -11,7 +11,7 @@ export function handleKeyUp(id, invoke, enter, enterCallbackMethod, esc, escCall
     const el = document.getElementById(id)
     if (el) {
         EventHandler.on(el, 'keyup', e => {
-            if (enter && e.key === 'Enter') {
+            if (enter && (e.key === 'Enter' || e.key === 'NumpadEnter')) {
                 invoke.invokeMethodAsync(enterCallbackMethod, el.value)
             }
             else if (esc && e.key === 'Escape') {
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.scss b/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: 10px;
+            display: none;
+        }
+
+        &:focus + .form-control-clear-icon {
+            display: block;
+        }
+    }
+
+    &:hover .form-control-clear-icon {
+        display: block;
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss b/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss
@@ -2,6 +2,7 @@
     > .datetime-picker,
     > .select,
     > .switch,
+    > .bb-clearable-input,
     > .auto-complete {
         width: 1%;
         flex: 1 1 auto;
@@ -39,6 +40,20 @@
             }
         }
     }
+
+    > .bb-clearable-input:not(:first-child) {
+        > input {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    > .bb-clearable-input:not(:last-child) {
+        > input {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
 }
 
 .input-group-xs {
diff --git a/src/BootstrapBlazor/Components/Modal/ModalDialog.razor.js b/src/BootstrapBlazor/Components/Modal/ModalDialog.razor.js
@@ -134,11 +134,17 @@ export function init(id) {
 }
 
 const update = el => {
-    const width = el.offsetWidth / 2;
+
     const height = el.offsetHeight / 2;
+    const marginTop = parseFloat(getComputedStyle(el).marginTop);
+    const viewBoxHeight = window.innerHeight / 2;
+    if (viewBoxHeight - height - marginTop > 0) {
+        el.style.setProperty("margin-top", `calc(50vh - ${height}px)`);
+    }
 
+    const width = el.offsetWidth / 2;
     el.style.setProperty("margin-left", `calc(50vw - ${width}px)`);
-    el.style.setProperty("margin-top", `calc(50vh - ${height}px)`);
+
     el.classList.remove('is-draggable-center');
 }
 
diff --git a/src/BootstrapBlazor/Enums/ComponentIcons.cs b/src/BootstrapBlazor/Enums/ComponentIcons.cs
@@ -818,5 +818,10 @@ public enum ComponentIcons
     /// <summary>
     /// ThemeProvider 组件 明亮模式图标
     /// </summary>
-    ThemeProviderActiveModeIcon
+    ThemeProviderActiveModeIcon,
+
+    /// <summary>
+    /// Input 组件 ClearIcon 图标
+    /// </summary>
+    InputClearIcon
 }
diff --git a/src/BootstrapBlazor/Options/IconThemeOptions.cs b/src/BootstrapBlazor/Options/IconThemeOptions.cs
@@ -106,6 +106,8 @@ public IconThemeOptions()
 
         { ComponentIcons.ImageViewerFileIcon, "fa-regular fa-file-image" },
 
+        { ComponentIcons.InputClearIcon, "fa-regular fa-circle-xmark" },
+
         { ComponentIcons.InputNumberMinusIcon, "fa-solid fa-circle-minus" },
         { ComponentIcons.InputNumberPlusIcon, "fa-solid fa-circle-plus" },
 
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/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";
diff --git a/test/UnitTest/Components/InputTest.cs b/test/UnitTest/Components/InputTest.cs
@@ -69,6 +69,42 @@ public void Readonly_Ok()
         cut.Contains("readonly=\"true\"");
     }
 
+    [Fact]
+    public void Clearable_Ok()
+    {
+        var cut = Context.RenderComponent<BootstrapInput<string>>(builder => builder.Add(a => a.Clearable, false));
+        cut.DoesNotContain("bb-clearable-input");
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.Clearable, true));
+        cut.Contains("bb-clearable-input");
+        cut.Contains("form-control-clear-icon");
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.Readonly, true));
+        cut.DoesNotContain("form-control-clear-icon");
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.Readonly, false));
+        cut.SetParametersAndRender(pb => pb.Add(a => a.IsDisabled, true));
+        cut.DoesNotContain("form-control-clear-icon");
+    }
+
+    [Fact]
+    public async Task OnClear_Ok()
+    {
+        var clicked = false;
+        var cut = Context.RenderComponent<BootstrapInput<string>>(builder =>
+        {
+            builder.Add(a => a.Clearable, true);
+            builder.Add(a => a.OnClear, v =>
+            {
+                clicked = true;
+                return Task.CompletedTask;
+            });
+        });
+        var icon = cut.Find(".form-control-clear-icon");
+        await cut.InvokeAsync(() => icon.Click());
+        Assert.True(clicked);
+    }
+
     [Fact]
     public async Task OnInput_Ok()
     {

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export function handleKeyUp(id, invoke, enter, enterCallbackMethod, esc, escCall`
`11`	`11`	`const el = document.getElementById(id)`
`12`	`12`	`if (el) {`
`13`	`13`	`EventHandler.on(el, 'keyup', e => {`
`14`		`- if (enter && e.key === 'Enter') {`
	`14`	`+ if (enter && (e.key === 'Enter' \|\| e.key === 'NumpadEnter')) {`
`15`	`15`	`invoke.invokeMethodAsync(enterCallbackMethod, el.value)`
`16`	`16`	`}`
`17`	`17`	`else if (esc && e.key === 'Escape') {`