feat(Split): add SetLeftWidth method (#4818)

* feat: 增加 SetLeftWidth 方法

* chore: 增加脚本支持

* doc: 更新文档

* doc: 增加本地化

* test: 增加单元测试

* chore: bump version 9.1.3-beta04

Author: ArgoZhang

src/BootstrapBlazor.Shared/Components/Samples/Splits.razor

@@ -122,4 +122,24 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["SplitSetLeftTitle"]"
+           Introduction="@Localizer["SplitSetLeftIntro"]"
+           Name="SetLeft">
+    <section ignore>
+        <Button Text="25%" OnClickWithoutRender="@(async () => await OnSetLeft("25%"))"></Button>
+        <Button Text="50%" OnClickWithoutRender="@(async () => await OnSetLeft("50%"))"></Button>
+        <Button Text="100%" OnClickWithoutRender="@(async () => await OnSetLeft("100%"))"></Button>
+    </section>
+    <div class="border split-demo split-demo-horizontal">
+        <Split Basis="40%" IsCollapsible="true" @ref="Split1">
+            <FirstPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
+            </FirstPaneTemplate>
+            <SecondPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
+            </SecondPaneTemplate>
+        </Split>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Components/Samples/Splits.razor.cs

@@ -52,6 +52,10 @@ private Task OnResizedAsync(SplitterResizedEventArgs args)
         return Task.CompletedTask;
     }
 
+    private Split Split1 = default!;
+
+    private Task OnSetLeft(string leftWidth) => Split1.SetLeftWidth(leftWidth);
+
     /// <summary>
     /// 获得属性方法
     /// </summary>

src/BootstrapBlazor.Shared/Components/Samples/Splittings.razor

@@ -39,13 +39,13 @@
            Introduction="@Localizer["SplittingColumnsIntro"]"
            Name="Columns">
     <div class="splitting-demo">
-        <p>
+        <section ignore>
             <BootstrapInputGroup>
                 <BootstrapInputGroupLabel DisplayText="@Localizer["SplittingColumnsText"]" />
                 <Slider @bind-Value="@_columns" Min="10" Max="50" />
                 <BootstrapInputNumber @bind-Value="@_columns" Min="10" Max="50"></BootstrapInputNumber>
             </BootstrapInputGroup>
-        </p>
+        </section>
         <Splitting Columns="@_columns" Text="@Localizer["SplittingText"]"></Splitting>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Shared/Locales/en-US.json

@@ -1742,7 +1742,9 @@
     "SplitsCollapsibleTrue": "Collapse button shown",
     "SplitsCollapsibleFalse": "Collapse button hidden",
     "SplitsFirstPaneMinimumSize": "The minimum size of the first pane supports any unit such as 10px 20% 5em 1rem. If no unit is provided, it defaults to px.",
-    "SplitsSecondPaneMinimumSize": "The minimum size of the second pane supports any unit such as 10px 20% 5em 1rem. If no unit is provided, it defaults to px."
+    "SplitsSecondPaneMinimumSize": "The minimum size of the second pane supports any unit such as 10px 20% 5em 1rem. If no unit is provided, it defaults to px.",
+    "SplitSetLeftTitle": "Code to set panel width",
+    "SplitSetLeftIntro": "Use the component instance method <code>SetLeftWidth</code> to set the width of the left/top panel, and the width of the right/bottom panel will be adaptive"
   },
   "BootstrapBlazor.Shared.Components.Samples.Dropdowns": {
     "Title": "Dropdown",

src/BootstrapBlazor.Shared/Locales/zh-CN.json

@@ -1742,7 +1742,9 @@
     "SplitsCollapsibleTrue": "显示调整按钮",
     "SplitsCollapsibleFalse": "隐藏调整按钮",
     "SplitsFirstPaneMinimumSize": "第一个窗格最小尺寸支持任意单位如 10px 20% 5em 1rem 未提供单位时默认为 px",
-    "SplitsSecondPaneMinimumSize": "第二个窗格最小尺寸支持任意单位如 10px 20% 5em 1rem 未提供单位时默认为 px"
+    "SplitsSecondPaneMinimumSize": "第二个窗格最小尺寸支持任意单位如 10px 20% 5em 1rem 未提供单位时默认为 px",
+    "SplitSetLeftTitle": "代码设置面板宽度",
+    "SplitSetLeftIntro": "通过组件实例方法 <code>SetLeftWidth</code> 设置左侧/上侧面板宽度，右侧/下侧面板宽度自适应"
   },
   "BootstrapBlazor.Shared.Components.Samples.Dropdowns": {
     "Title": "Dropdown 下拉菜单",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.3-beta03</Version>
+    <Version>9.1.3-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Split/Split.razor.cs

@@ -124,6 +124,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         IsKeepOriginalSize
     });
 
+    /// <summary>
+    /// 设置左侧窗格宽度
+    /// </summary>
+    /// <param name="leftWidth">可以是百分比或者其他单位</param>
+    /// <returns></returns>
+    public Task SetLeftWidth(string leftWidth) => InvokeVoidAsync("setLeft", Id, leftWidth);
+
     /// <summary>
     /// 窗格折叠时回调方法 由 JavaScript 调用   
     /// </summary>

src/BootstrapBlazor/Components/Split/Split.razor.js

@@ -170,6 +170,13 @@ const getMax = split => {
     return ret;
 }
 
+export function setLeft(id, leftBasis) {
+    const split = Data.get(id)
+    if (split) {
+        split.splitLeft.style.setProperty('flex-basis', leftBasis);
+    }
+}
+
 const setLeftBasis = (split, triggerLeft) => {
     const { option, splitLeft, invoke, method } = split;
     let leftBasis = splitLeft.style.flexBasis;

test/UnitTest/Components/SplitTest.cs

@@ -109,6 +109,17 @@ public async Task OnResizedAsync_Ok()
         Assert.False(state.IsCollapsed);
     }
 
+    [Fact]
+    public async Task SetLeft_Ok()
+    {
+        var cut = Context.RenderComponent<Split>(pb =>
+        {
+            pb.Add(b => b.FirstPaneTemplate, RenderSplitView("I am Pane1"));
+            pb.Add(b => b.SecondPaneTemplate, RenderSplitView("I am Pane2"));
+        });
+        await cut.InvokeAsync(() => cut.Instance.SetLeftWidth("25%"));
+    }
+
     static RenderFragment RenderSplitView(string name = "I am Pane1") => builder =>
     {
         builder.OpenElement(1, "div");