CodeInput Add ParameterState and PasswordField Label Fix (#398)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeInput/Examples/CodeInputExample1.razor

@@ -7,9 +7,9 @@
     </MudItem>
 
     <MudItem xs="12" sm="4">
-        <MudStack Spacing="4">
+        <MudStack Spacing="2">
             <MudText>Value: @_value</MudText>
-            <MudTextField @bind-Value="@_value" Immediate="true" Label="Two Way Bind Controller" />
+            <MudTextField @bind-Value="@_value" Immediate="true" Label="Two Way Bind Controller" Variant="Variant.Outlined" />
             <MudNumericField @bind-Value="_count" Label="Count" Variant="Variant.Outlined" />
             <MudNumericField @bind-Value="_spacing" Label="Spacing" Variant="Variant.Outlined" />
             <MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
@@ -24,8 +24,8 @@
                     <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                 }
             </MudSelect>
-            <MudSwitchM3 @bind-Value="@_disabled" Label="Disabled" Color="Color.Primary" />
-            <MudSwitchM3 @bind-Value="@_readonly" Label="ReadOnly" Color="Color.Primary" />
+            <MudSwitchM3 @bind-Value="@_disabled" Label="Disabled" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="@_readonly" Label="ReadOnly" Color="Color.Secondary" />
         </MudStack>
     </MudItem>
 </MudGrid>

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/PasswordField/Examples/PasswordFieldExample1.razor

@@ -4,15 +4,15 @@
     <MudItem xs="12" sm="8" Class="d-flex align-center">
         @if (_adornmentStart)
         {
-            <MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" IconSize="_size" DisablePaste="_disablePaste">
+            <MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" Label="Password" IconSize="_size" DisablePaste="_disablePaste">
                 <AdornmentStart>
                     <MudIcon Icon="@Icons.Material.Filled.Key"/>
                 </AdornmentStart>
             </MudPasswordField>
         }
         else
         {
-            <MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" IconSize="_size" DisablePaste="_disablePaste" />
+            <MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" Label="Password" IconSize="_size" DisablePaste="_disablePaste" />
         }
     </MudItem>
 

CodeBeam.MudBlazor.Extensions/Components/CodeInput/MudCodeInput.razor.cs

@@ -1,20 +1,52 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using MudBlazor;
+using MudBlazor.State;
 using MudBlazor.Utilities;
 
 namespace MudExtensions
 {
     /// <summary>
-    /// 
+    /// Inputs which each input box can contain only one character.
     /// </summary>
     /// <typeparam name="T"></typeparam>
     public partial class MudCodeInput<T> : MudFormComponent<T, string>
     {
         /// <summary>
-        /// 
+        /// MudCodeInput constructor.
         /// </summary>
-        public MudCodeInput() : base(new DefaultConverter<T>()) { }
+        public MudCodeInput() : base(new DefaultConverter<T>())
+        {
+            using var registerScope = CreateRegisterScope();
+            _theValue = registerScope.RegisterParameter<T?>(nameof(Value))
+                .WithParameter(() => Value)
+                .WithEventCallback(() => ValueChanged)
+                .WithChangeHandler(OnValueChanged);
+            _count = registerScope.RegisterParameter<int>(nameof(Count))
+                .WithParameter(() => Count)
+                .WithChangeHandler(OnCountChanged);
+        }
+
+        private readonly ParameterState<T?> _theValue;
+        private readonly ParameterState<int> _count;
+
+        private async Task OnValueChanged()
+        {
+            await SetValueFromOutside(Value);
+        }
+
+        private void OnCountChanged()
+        {
+            if (Count < 0)
+            {
+                Count = 0;
+            }
+
+            if (12 < Count)
+            {
+                Count = 12;
+            }
+        }
 
         /// <summary>
         /// Protected classes.
@@ -30,7 +62,7 @@ public MudCodeInput() : base(new DefaultConverter<T>()) { }
         protected string? InputClassname =>
             new CssBuilder("justify-text-center")
                 .AddClass("mud-code", Variant != Variant.Text)
-                .AddClass(ClassInput)
+                .AddClass(InputClass)
                 .Build();
 
         private List<MudTextField<T>> _elementReferences = new();
@@ -40,35 +72,21 @@ public MudCodeInput() : base(new DefaultConverter<T>()) { }
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
-        public string? ClassInput { get; set; }
+        public string? InputClass { get; set; }
 
         /// <summary>
         /// Type of the input element. It should be a valid HTML5 input type.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
         public InputType InputType { get; set; } = InputType.Text;
-        
-        private T? _theValue;
 
         /// <summary>
         /// The value of the input.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
-        public T? Value
-        {
-            get => _theValue;
-            set
-            {
-                if (Converter.Set(_theValue) == Converter.Set(value))
-                {
-                    return;
-                }
-                _theValue = value;
-                SetValueFromOutside(_theValue).CatchAndLog();
-            }
-        }
+        public T? Value { get; set; }
 
         /// <summary>
         /// The event fires when value changed.
@@ -77,32 +95,12 @@ public T? Value
         [Category(CategoryTypes.FormComponent.Behavior)]
         public EventCallback<T?> ValueChanged { get; set; }
 
-        private int _count;
         /// <summary>
         /// The number of text fields.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
-        public int Count
-        {
-            get => _count;
-            set
-            {
-                if (value == _count || value < 0)
-                {
-                    return;
-                }
-
-                if (12 < value)
-                {
-                    _count = 12;
-                }
-                else
-                {
-                    _count = value;
-                }
-            }
-        }
+        public int Count { get; set; }
 
         /// <summary>
         /// Determines the spacing between each input.
@@ -245,12 +243,11 @@ public async Task SetValue()
                 result += val;
             }
 
-            Value = Converter.Get(result);
-            await ValueChanged.InvokeAsync(Value);
+            await _theValue.SetValueAsync(Converter.Get(result));
         }
 
         /// <summary>
-        /// 
+        /// Call this method to set value programmatically.
         /// </summary>
         /// <param name="value"></param>
         /// <returns></returns>
@@ -261,7 +258,7 @@ public async Task SetValueFromOutside(T? value)
             {
                 val = val.Substring(0, Count);
             }
-            Value = Converter.Get(val);
+            await _theValue.SetValueAsync(Converter.Get(val));
             for (int i = 0; i < Count; i++)
             {
                 if (i < val?.Length)
@@ -273,9 +270,6 @@ public async Task SetValueFromOutside(T? value)
                     await _elementReferences[i].SetText(null);
                 }
             }
-
-            await ValueChanged.InvokeAsync(Value);
-            StateHasChanged();
         }
 
     }

CodeBeam.MudBlazor.Extensions/Components/PasswordField/MudPasswordField.razor

@@ -26,6 +26,7 @@
                                       @attributes="UserAttributes"
                                       InputType="@_passwordInput"
                                       Lines="@Lines"
+                                      Label="@Label"
                                       Style="@Style"
                                       Variant="@Variant"
                                       TextUpdateSuppression="@TextUpdateSuppression"
@@ -76,6 +77,7 @@
                                       @attributes="UserAttributes"
                                       InputType="@_passwordInput"
                                       Lines="@Lines"
+                                      Label="@Label"
                                       Style="@Style"
                                       Variant="@Variant"
                                       TextUpdateSuppression="@TextUpdateSuppression"