From a6aff57cd44e96f39507745ef3319204b2594cf5 Mon Sep 17 00:00:00 2001
From: capdiem <capdiem@live.com>
Date: Mon, 27 Mar 2023 14:13:30 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(TextField):=20watch=20`Outli?=
 =?UTF-8?q?ned`=20and=20`Label`=20to=20update=20the=20width=20of=20label?=
 =?UTF-8?q?=20(#1138)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 fix(TextField): watch Outlined and Label to Update the width of label

* 📝 docs: use advance usage

* improve
---
 .../text-fields/Usage/AdvanceUsage.razor      | 44 +++++++++++++++++++
 .../text-fields/{ => Usage}/Usage.razor.cs    | 18 +++-----
 .../Components/TextField/MTextField.cs        | 21 ++++++++-
 3 files changed, 69 insertions(+), 14 deletions(-)
 create mode 100644 docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/AdvanceUsage.razor
 rename docs/Masa.Blazor.Docs/Examples/components/text-fields/{ => Usage}/Usage.razor.cs (65%)

diff --git a/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/AdvanceUsage.razor b/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/AdvanceUsage.razor
new file mode 100644
index 0000000000..6f8e78b13e
--- /dev/null
+++ b/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/AdvanceUsage.razor
@@ -0,0 +1,44 @@
+@namespace Masa.Blazor.Docs.Examples.components.text_fields
+
+<MTextField @bind-Value="_value"
+            Label="Label"
+            Filled="Filled"
+            Solo="Solo"
+            Outlined="Outlined"
+            PrependIcon="@PrependIcon"
+            Clearable="Clearable">
+</MTextField>
+
+@code {
+
+    [Parameter]
+    public bool Filled { get; set; }
+
+    [Parameter]
+    public bool Solo { get; set; }
+
+    [Parameter]
+    public bool Outlined { get; set; }
+
+    [Parameter]
+    public string? PrependIcon { get; set; }
+
+    [Parameter]
+    public bool Clearable
+    {
+        get => _clearable;
+        set
+        {
+            if (_clearable != value && value)
+            {
+                _value ??= "Hover to Clear me";
+            }
+
+            _clearable = value;
+        }
+    }
+
+    private string? _value;
+    private bool _clearable;
+
+}
diff --git a/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage.razor.cs b/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/Usage.razor.cs
similarity index 65%
rename from docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage.razor.cs
rename to docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/Usage.razor.cs
index 7fedd6d8bb..90d7dfd75c 100644
--- a/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage.razor.cs
+++ b/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/Usage.razor.cs
@@ -2,6 +2,8 @@
 
 public class Usage : Masa.Blazor.Docs.Components.Usage
 {
+    protected override string ComponentName => "MTextField";
+
     protected override ParameterList<bool> GenToggleParameters() => new()
     {
         { nameof(MTextField<string>.Outlined), false },
@@ -11,19 +13,11 @@ public class Usage : Masa.Blazor.Docs.Components.Usage
 
     protected override ParameterList<CheckboxParameter> GenCheckboxParameters() => new()
     {
-        { nameof(MTextField<string>.PrependIcon), new CheckboxParameter("false",false) },
-        { nameof(MTextField<string>.Clearable), new CheckboxParameter("false",true) },
+        { nameof(MTextField<string>.PrependIcon), new CheckboxParameter("mdi-text-box", false) },
+        { nameof(MTextField<string>.Clearable), new CheckboxParameter("false", true) },
     };
 
-    public Usage() : base(typeof(MTextField<string>))
-    {
-    }
-
-    protected override Dictionary<string, object>? GenAdditionalParameters()
+    public Usage() : base(typeof(AdvanceUsage))
     {
-        return new Dictionary<string, object>()
-        {
-            { nameof(MTextField<string>.Label), "Label" },
-        };
     }
-}
\ No newline at end of file
+}
diff --git a/src/Masa.Blazor/Components/TextField/MTextField.cs b/src/Masa.Blazor/Components/TextField/MTextField.cs
index e4c6e43184..706b5ded73 100644
--- a/src/Masa.Blazor/Components/TextField/MTextField.cs
+++ b/src/Masa.Blazor/Components/TextField/MTextField.cs
@@ -27,7 +27,11 @@ public partial class MTextField<TValue> : MInput<TValue>, ITextField<TValue>
         public bool FullWidth { get; set; }
 
         [Parameter]
-        public string Prefix { get; set; }
+        public string Prefix
+        {
+            get => GetValue<string>();
+            set => SetValue(value);
+        }
 
         [Parameter]
         public bool SingleLine { get; set; }
@@ -45,7 +49,11 @@ public partial class MTextField<TValue> : MInput<TValue>, ITextField<TValue>
         public bool Filled { get; set; }
 
         [Parameter]
-        public virtual bool Outlined { get; set; }
+        public virtual bool Outlined
+        {
+            get => GetValue(false);
+            set => SetValue(value);
+        }
 
         [Parameter]
         public bool Reverse { get; set; }
@@ -512,6 +520,15 @@ await JsInvokeAsync(JsInteropConstants.RegisterTextFieldOnMouseDown, InputSlotEl
             }
         }
 
+        protected override void RegisterWatchers(PropertyWatcher watcher)
+        {
+            base.RegisterWatchers(watcher);
+
+            watcher.Watch<bool>(nameof(Outlined), SetLabelWidthAsync)
+                   .Watch<string>(nameof(Label), () => NextTick(SetLabelWidthAsync))
+                   .Watch<string>(nameof(Prefix), SetPrefixWidthAsync);
+        }
+
         private async Task SetLabelWidthAsync()
         {
             if (!Outlined)