🆕 feat(DataFilter): Add OnReset and ExpandFirst parameters (#2037)

* 🆕 feat(DataFilter): Add OnReset and ExpandFirst parameters

* update

docs/Masa.Blazor.Docs/Examples/labs/inputs-filter/DataFilter.razor

@@ -1,7 +1,7 @@
 @using Masa.Blazor.Presets
 @using System.Text.Json
 
-<PDataFilter OnSearch="FetchDataAsync">
+<PDataFilter OnSearch="FetchDataAsync" Class="mb-2">
     <ActionsContent>
         <MButton Color="primary">
             <MIcon Left>mdi-plus</MIcon>

docs/Masa.Blazor.Docs/wwwroot/pages/labs/inputs-filter/zh-CN.md

@@ -6,7 +6,7 @@ related:
   - /blazor/labs/date-digital-clock-pickers
 ---
 
-## 使用
+## 使用 {#usage}
 
 支持以下表单组件：
 
@@ -22,7 +22,7 @@ related:
 
 <masa-example file="Examples.labs.inputs_filter.Usage"></masa-example>
 
-## 数据筛选器
+## 数据筛选器 {#data-filter}
 
 **PDataFilter** 组件内置了 **MInputsFilter** 组件，其中包含内置的重置、搜索和展开/折叠操作。
 

src/Masa.Blazor/Components/DataFilter/PDataFilter.razor

@@ -11,7 +11,7 @@
                    OnFieldChanged="@OnFieldChanged"
                    @ref="_inputsFilter">
         <div class="@_block.Element("high-frequency")">
-            <div class="@GetClass(_block.Element("high-frequency-inputs").Name, _expanded ? "hidden" : null)">
+            <div class="@GetClass(_block.Element("high-frequency-inputs").Name, ComputedExpanded ? "hidden" : null)">
                 @HighFrequencyContent
             </div>
             <MSpacer/>
@@ -22,7 +22,7 @@
 
                     @if (!HideResetButton && !HideSearchButton)
                     {
-                        <MDivider Vertical Class="ml-4 mr-2"/>
+                        <MDivider Vertical Class="mx-2"/>
                     }
                 }
 
@@ -62,7 +62,7 @@
             </div>
         </div>
 
-        @if (LowFrequencyContent != null && _isBooted)
+        @if (LowFrequencyContent != null && IsBooted)
         {
             var style = StyleBuilder.Create()
                 .AddIf("display", "none", !_expanded && _firstRender)
@@ -71,7 +71,7 @@
                 .AddHeight(_height)
                 .Build();
 
-            <div class="@GetClass(_block.Element("low-frequency").Name, _expanded ? "expanded" : null)"
+            <div class="@GetClass(_block.Element("low-frequency").Name, ComputedExpanded ? "expanded" : null)"
                  style="@style"
                  @ref="_lowFrequencyRef">
                 @LowFrequencyContent

src/Masa.Blazor/Components/DataFilter/PDataFilter.razor.cs

@@ -20,6 +20,19 @@ public partial class PDataFilter : MasaComponentBase
 
     [Parameter] public EventCallback OnSearch { get; set; }
 
+    /// <summary>
+    /// Reset all the input fields and trigger the <see cref="OnSearch"/> event
+    /// if this event is not set. 
+    /// </summary>
+    [Parameter]
+    public EventCallback OnReset { get; set; }
+
+    /// <summary>
+    /// Expand the low frequency content when the component is initialized.
+    /// </summary>
+    [Parameter]
+    public bool ExpandFirst { get; set; }
+
     private bool _expanded;
     private bool _searching;
     private bool _resetting;
@@ -33,16 +46,39 @@ public partial class PDataFilter : MasaComponentBase
     private IJSObjectReference? _jsModule;
     private bool _isBooted;
 
+    private bool ComputedExpanded
+    {
+        get
+        {
+            if (_firstRender && ExpandFirst)
+            {
+                return true;
+            }
+
+            return _expanded;
+        }
+    }
+
+    private bool IsBooted => ExpandFirst || _isBooted;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
         if (firstRender)
         {
             _firstRender = false;
+
+            if (ExpandFirst)
+            {
+                _expanded = true;
+                var scrollHeight = await GetProp<double>("scrollHeight");
+                _height = scrollHeight == 0 ? "auto" : scrollHeight;
+                StateHasChanged();
+            }
         }
     }
-    
+
     private static Block _block = new("m-data-filter");
 
     protected override IEnumerable<string> BuildComponentClass()
@@ -65,8 +101,6 @@ private async Task ShowLowFrequency()
             StateHasChanged();
 
             _height = scrollHeight == 0 ? "auto" : scrollHeight;
-
-            StateHasChanged();
         }
         else
         {
@@ -87,9 +121,9 @@ private async Task ShowLowFrequency()
                     Logger.Log(LogLevel.Warning, "Failed to get LowFrequency's element reference");
                 }
             });
-
-            StateHasChanged();
         }
+
+        StateHasChanged();
     }
 
     private async Task OnTransition(TransitionEventArgs e)
@@ -151,7 +185,14 @@ private async Task HandleOnClear()
 
         try
         {
-            await OnSearch.InvokeAsync();
+            if (OnReset.HasDelegate)
+            {
+                await OnReset.InvokeAsync();
+            }
+            else
+            {
+                await OnSearch.InvokeAsync();
+            }
         }
         finally
         {
@@ -176,4 +217,4 @@ private class TransitionEventArgs
     {
         public string PropertyName { get; set; } = null!;
     }
-}
+}

src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css

@@ -1411,7 +1411,6 @@ input[type=number] {
     display: flex;
     align-items: center;
     min-height: 40px;
-    margin-bottom: 8px;
 }
 
 .m-data-filter__high-frequency-inputs {
@@ -1424,7 +1423,7 @@ input[type=number] {
 
 .m-data-filter__high-frequency-inputs.hidden {
     opacity: 0;
-    top: 40px;
+    top: 44px;
 }
 
 .m-data-filter__high-frequency-actions {
@@ -1436,8 +1435,13 @@ input[type=number] {
     transition: all 0.3s ease;
 }
 
-.m-data-filter__low-frequency.expanded {
-    margin-bottom: 8px;
+.m-data-filter__low-frequency > .row {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.m-data-filter__low-frequency > * {
+    padding-top: 4px;
 }
 
 /* Watermark */