feat: 增加禁用只读功能

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -4,21 +4,14 @@
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
     @for (var index = 0; index < Digits; index++)
     {
-        if (index < _values.Length)
+        if (IsReadonly || IsDisabled)
         {
-            @if (IsReadonly || IsDisabled)
-            {
-                <span class="@ItemClassString">@_values[index]</span>
-            }
-            else
-            {
-                <span class="@ItemClassString">
-                    @{
-                        var charIndex = index;
-                    }
-                    <input type="@TypeString" @bind="@_values[charIndex]" />
-                </span>
-            }
+            <span class="@ItemClassString">@GetValueString(index)</span>
+        }
+        else
+        {
+            var charIndex = index;
+            <input type="@TypeString" maxlength="1" inputmode="@TypeModeString" class="@ItemClassString" value="@GetValueString(index)" @onchange="e => OnChanged(e, charIndex)" />
         }
     }
 </div>

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

@@ -33,6 +33,7 @@ public partial class OtpInput
         .Build();
 
     private string? ItemClassString => CssBuilder.Default("bb-opt-item")
+        .AddClass("input-number-fix", Type == OtpInputType.Number)
         .AddClass("disabled", IsDisabled)
         .AddClass(ValidCss)
         .Build();
@@ -44,6 +45,12 @@ public partial class OtpInput
         _ => "text"
     };
 
+    private string? TypeModeString => Type switch
+    {
+        OtpInputType.Number => "numeric",
+        _ => "text"
+    };
+
     private char[] _values = [];
 
     /// <summary>
@@ -55,4 +62,26 @@ protected override void OnParametersSet()
 
         _values = Value?.ToCharArray() ?? [];
     }
+
+    private char? GetValueString(int index)
+    {
+        char? c = _values.ElementAtOrDefault(index);
+        if (c == 0)
+        {
+            c = null;
+        }
+        return c;
+    }
+
+    private void OnChanged(ChangeEventArgs e, int index)
+    {
+        if (index < _values.Length)
+        {
+            var v = e.Value?.ToString();
+            if (!string.IsNullOrEmpty(v))
+            {
+                _values[index] = v[0];
+            }
+        }
+    }
 }

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

@@ -1,22 +1,32 @@
-.bb-opt-item {
-    --bb-opt-item-padding: #{$bb-opt-item-padding};
-    --bb-opt-item-margin: #{$bb-opt-item-margin};
-    --bb-opt-font-size: #{$bb-opt-font-size};
-    --bb-opt-border-width: #{$bb-opt-border-width};
-    display: inline-block;
-    border: var(--bb-opt-border-width) solid var(--bs-border-color);
-    font-size: var(--bb-opt-font-size);
-    padding: var(--bb-opt-item-padding);
-    border-radius: var(--bs-border-radius);
+.bb-opt-input {
+    white-space: nowrap;
+    overflow: hidden;
 
-    &:not(:last-child) {
-        margin-right: var(--bb-opt-item-margin);
-    }
+    .bb-opt-item {
+        --bb-opt-item-width: 66px;
+        --bb-opt-item-padding: #{$bb-opt-item-padding};
+        --bb-opt-item-margin: #{$bb-opt-item-margin};
+        --bb-opt-font-size: #{$bb-opt-font-size};
+        --bb-opt-border-width: #{$bb-opt-border-width};
+        display: inline-block;
+        border: var(--bb-opt-border-width) solid var(--bs-border-color);
+        font-size: var(--bb-opt-font-size);
+        padding: var(--bb-opt-item-padding);
+        border-radius: var(--bs-border-radius);
+        width: var(--bb-opt-item-width);
+        height: var(--bb-opt-item-width);
 
-    &.disabled {
-        cursor: not-allowed;
-    }
+        &:not(:last-child) {
+            margin-right: var(--bb-opt-item-margin);
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+        }
 
-    > input {
+        &[type] {
+            padding: 0;
+            text-align: center;
+        }
     }
 }

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -315,7 +315,7 @@ $bb-viewer-border-radius: 50%;
 $bb-ip-cell-max-width: 30px;
 
 // OptInput
-$bb-opt-item-padding: 0 .5rem;
+$bb-opt-item-padding: 0 .5em;
 $bb-opt-item-margin: .5rem;
 $bb-opt-font-size: 3em;
 $bb-opt-border-width: 1px;