refactor(TreeView): redesign UI for ShowSearch function (#5369)

* refactor: 更改滚动条位置

* refactor: 更改布局

* doc: 更新示例代码

* refactor: 移除背景色设置

* chore: bump version 9.3.1-beta17

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor

@@ -184,12 +184,20 @@
 
 <DemoBlock Title="@Localizer["TreeViewVirtualizeTitle"]"
            Introduction="@Localizer["TreeViewVirtualizeIntro"]"
-           Name="DefaultExpand">
-    <section ignore>
-        @((MarkupString)Localizer["TreeViewVirtualizeDescription"].Value)
+           Name="IsVirtualize">
+    <section ignore class="row g-3">
+        <div class="col-12">
+            @((MarkupString)Localizer["TreeViewVirtualizeDescription"].Value)
+        </div>
+        <div class="col-12">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="ShowSearch"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="_showSearch"></Switch>
+            </BootstrapInputGroup>
+        </div>
     </section>
     <div style="height: 400px">
-        <TreeView Items="@VirtualizeItems" ShowCheckbox="true" IsVirtualize="true"
+        <TreeView Items="@VirtualizeItems" ShowCheckbox="true" ShowSearch="_showSearch" IsVirtualize="true"
                   AutoCheckChildren="true" AutoCheckParent="true"
                   OnExpandNodeAsync="OnExpandVirtualNodeAsync"></TreeView>
     </div>

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor.cs

@@ -74,6 +74,8 @@ public sealed partial class TreeViews
 
     private Foo Model => Foo.Generate(LocalizerFoo);
 
+    private bool _showSearch;
+
     private string? _selectedValue;
 
     private Task OnTreeItemClick(TreeViewItem<TreeFoo> item)

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/TreeView/TreeView.razor

@@ -39,12 +39,14 @@ else
             }
             else
             {
-                @SearchTemplate
+                <div class="tree-search">
+                    @SearchTemplate
+                </div>
             }
         }
         @if (IsVirtualize)
         {
-            <div class="tree-root is-virtual" tabindex="0">
+            <div class="tree-root scroll is-virtual" tabindex="0">
                 <Virtualize ItemSize="RowHeight" OverscanCount="10" Items="@Rows">
                     <ItemContent>
                         @RenderTreeRow(context)
@@ -54,7 +56,7 @@ else
         }
         else
         {
-            <div class="tree-root" tabindex="0">
+            <div class="tree-root scroll" tabindex="0">
                 @foreach (var item in Rows)
                 {
                     @RenderTreeRow(item)

src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs

@@ -17,7 +17,7 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     /// <summary>
     /// 获得 按钮样式集合
     /// </summary>
-    private string? ClassString => CssBuilder.Default("tree-view scroll")
+    private string? ClassString => CssBuilder.Default("tree-view")
         .AddClass("is-fixed-search", ShowSearch && IsFixedSearch)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();

src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss

@@ -16,23 +16,20 @@
     --bb-tree-item-bg-radius: var(--bs-border-radius);
     position: relative;
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     .tree-search {
-        padding: var(--bb-tree-padding);
         padding-bottom: .5rem;
-        background-color: var(--bs-body-bg);
-    }
-
-    &.is-fixed-search .tree-search {
-        position: sticky;
-        top: 0;
-        z-index: 5;
     }
 
     .tree-root {
         padding: var(--bb-tree-padding);
         margin: var(--bb-tree-margin);
         position: relative;
+        flex: 1;
+        min-height: 0;
+        height: 1%;
     }
 
     .tree-content {

test/UnitTest/Components/TreeViewTest.cs

@@ -590,7 +590,7 @@ public async Task IsVirtualize_Ok()
             pb.Add(a => a.IsVirtualize, false);
             pb.Add(a => a.Items, items);
         });
-        cut.Contains("tree-root");
+        cut.Contains("tree-root scroll");
 
         cut.SetParametersAndRender(pb =>
         {
@@ -611,7 +611,7 @@ public async Task IsVirtualize_Ok()
                 return [node1, node2];
             });
         });
-        cut.Contains("tree-root is-virtual");
+        cut.Contains("tree-root scroll is-virtual");
 
         // 触发第一个节点展开
         await cut.InvokeAsync(() => cut.Find(".node-icon.visible").Click());