refactor(Input): style to fit the input-group mode (#4993)

* refactor(Input): style to fit the input-group mode

Co-Authored-By: A5196060 <[email protected]>

* refactor: 调整右侧间隙

* chore: bump version 9.2.0

* doc: 增加 Clearable 文档

---------

Co-authored-by: A5196060 <[email protected]>

Author: ArgoZhang

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()" />

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",

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 组件",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.0-beta01</Version>
+    <Version>9.2.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -14,7 +14,7 @@
             color: var(--bb-border-hover-color);
             cursor: pointer;
             position: absolute;
-            right: 11px;
+            right: 10px;
             display: none;
         }
 

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 {