feat(LayoutSpitBar): rename LayoutSplitBar component name

src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor

@@ -10,7 +10,7 @@
             <span class="sidebar-text">Bootstrap Blazor</span>
         </div>
         <NavMenu />
-        <LayoutSplitebar Min="250" Max="380" ContainerSelector=".section"></LayoutSplitebar>
+        <LayoutSplitBar Min="250" Max="380" ContainerSelector=".section"></LayoutSplitBar>
     </aside>
 
     <section class="main">

src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor

@@ -9,7 +9,7 @@
         </div>
         <TutorialsNavMenu></TutorialsNavMenu>
         <Wwads IsVertical="true"></Wwads>
-        <LayoutSplitebar Min="220" Max="330" ContainerSelector=".section"></LayoutSplitebar>
+        <LayoutSplitBar Min="220" Max="330" ContainerSelector=".section"></LayoutSplitBar>
     </aside>
 
     <section class="main">

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

@@ -141,8 +141,8 @@ private AttributeItem[] GetAttributes() =>
         },
         new()
         {
-            Name = "ShowSplitebar",
-            Description =  Localizer["Layouts_ShowSplitebar_Description"],
+            Name = "ShowSplitBar",
+            Description =  Localizer["Layouts_ShowSplitBar_Description"],
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"

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

@@ -1424,7 +1424,7 @@
     "Layouts_IsFixedFooter_Description": "Whether to fix the Footer component",
     "Layouts_IsFixedHeader_Description": "Whether to fix the Header component",
     "Layouts_ShowCollapseBar_Description": "Whether to show contraction and expansion Bar",
-    "Layouts_ShowSplitebar_Description": "Whether to display the left and right split bar",
+    "Layouts_ShowSplitBar_Description": "Whether to display the left and right split bar",
     "Layouts_SidebarMinWidth_Description": "Minimum sidebar width",
     "Layouts_SidebarMaxWidth_Description": "Maximum sidebar width",
     "Layouts_ShowFooter_Description": "Whether to show Footer template",

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

@@ -1424,7 +1424,7 @@
     "Layouts_IsFixedFooter_Description": "是否固定 Footer 组件",
     "Layouts_IsFixedHeader_Description": "是否固定 Header 组件",
     "Layouts_ShowCollapseBar_Description": "是否显示收缩展开 Bar",
-    "Layouts_ShowSplitebar_Description": "是否显示左右分割栏",
+    "Layouts_ShowSplitBar_Description": "是否显示左右分割栏",
     "Layouts_SidebarMinWidth_Description": "侧边栏最小宽度",
     "Layouts_SidebarMaxWidth_Description": "侧边栏最大宽度",
     "Layouts_ShowFooter_Description": "是否显示 Footer 模板",

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -94,9 +94,9 @@
         {
             @Side
         }
-        @if (ShowSplitebar)
+        @if (ShowSplitBar)
         {
-            <LayoutSplitebar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitebar>
+            <LayoutSplitBar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitBar>
         }
         @if (Menus != null)
         {

src/BootstrapBlazor/Components/Layout/Layout.razor.cs

@@ -130,6 +130,15 @@ public partial class Layout : IHandlerException, ITabHeader
     /// 仅在 左右布局时有效
     /// </summary>
     [Parameter]
+    public bool ShowSplitBar { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否显示分割栏 默认 false 不显示
+    /// 仅在 左右布局时有效
+    /// </summary>
+    [Parameter]
+    [ExcludeFromCodeCoverage]
+    [Obsolete("已弃用，请使用 ShowSplitBar 单词拼写错误；Deprecated, please use ShowSplitBar The word is misspelled")]
     public bool ShowSplitebar { get; set; }
 
     /// <summary>
@@ -491,7 +500,7 @@ protected override async Task OnInitializedAsync()
             // wasm 模式下 开启权限必须提供 AdditionalAssemblies 参数
             AdditionalAssemblies ??= [Assembly.GetEntryAssembly()!];
 
-            var uri= Navigation.ToAbsoluteUri(Navigation.Uri);
+            var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
             var context = RouteTableFactory.Create(AdditionalAssemblies, uri.LocalPath);
             if (context.Handler != null)
             {

src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor

@@ -1,8 +1,8 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader("Layout/LayoutSplitebar.razor.js")]
+@attribute [BootstrapModuleAutoLoader("Layout/LayoutSplitBar.razor.js")]
 
-<div id="@Id" class="layout-splitebar"
+<div id="@Id" class="layout-split-bar"
      data-bb-min="@_minWidthString" data-bb-max="@_maxWidthString" data-bb-selector="@ContainerSelector">
-    <div class="layout-splitebar-body"></div>
+    <div class="layout-split-bar-body"></div>
 </div>

src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// LayoutSidebar 组件
 /// </summary>
-public partial class LayoutSplitebar
+public partial class LayoutSplitBar
 {
     /// <summary>
     /// 获得/设置 容器选择器 默认 null 未设置

src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.js

@@ -11,11 +11,11 @@ export function init(id) {
     const selector = el.getAttribute("data-bb-selector") ?? ".layout";
     const section = document.querySelector(selector);
     if (section === null) {
-        log.warning(`LayoutSplitebar: selector ${selector} not found`);
+        log.warning(`LayoutSplitBar: selector ${selector} not found`);
         return;
     }
 
-    const bar = el.querySelector(".layout-splitebar-body");
+    const bar = el.querySelector(".layout-split-bar-body");
     let originX = 0;
     let width = 0;
     Drag.drag(bar,
@@ -50,7 +50,7 @@ export function init(id) {
 export function dispose(id) {
     const el = document.getElementById(id);
     if (el) {
-        const bar = el.querySelector(".layout-splitebar-body");
+        const bar = el.querySelector(".layout-split-bar-body");
         if (bar) {
             Drag.dispose(bar);
         }

src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.scss

@@ -1,4 +1,4 @@
-.layout-splitebar {
+.layout-split-bar {
     width: 1px;
     position: absolute;
     top: 0;
@@ -7,9 +7,9 @@
     background-color: var(--bs-border-color);
     display: none;
 
-    .layout-splitebar-body {
-        --bb-splitebar-body-hover-bg: #{$bb-splitebar-body-hover-bg};
-        --bb-splitebar-body-drag-hover-bg: #{$bb-splitebar-body-drag-hover-bg};
+    .layout-split-bar-body {
+        --bb-split-bar-body-hover-bg: #{$bb-split-bar-body-hover-bg};
+        --bb-split-bar-body-drag-hover-bg: #{$bb-split-bar-body-drag-hover-bg};
         position: absolute;
         inset: 0px -2px;
         cursor: col-resize;
@@ -18,27 +18,27 @@
         transition: background .3s linear;
 
         &:hover {
-            background-color: var(--bb-splitebar-body-hover-bg);
+            background-color: var(--bb-split-bar-body-hover-bg);
         }
     }
 }
 
 .drag {
-    .layout-splitebar {
-        .layout-splitebar-body:hover {
-            background-color: var(--bb-splitebar-body-drag-hover-bg);
+    .layout-split-bar {
+        .layout-split-bar-body:hover {
+            background-color: var(--bb-split-bar-body-drag-hover-bg);
         }
     }
 }
 
 .is-collapsed {
-    .layout-splitebar-body {
+    .layout-split-bar-body {
         display: none;
     }
 }
 
 @media(min-width: 768px) {
-    .layout-splitebar {
+    .layout-split-bar {
         display: block;
     }
 }

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -60,7 +60,7 @@
 @import "../../Components/Input/OtpInput.razor.scss";
 @import "../../Components/IpAddress/IpAddress.razor.scss";
 @import "../../Components/Layout/Layout.razor.scss";
-@import "../../Components/Layout/LayoutSplitebar.razor.scss";
+@import "../../Components/Layout/LayoutSplitBar.razor.scss";
 @import "../../Components/Light/Light.razor.scss";
 @import "../../Components/ListGroup/ListGroup.razor.scss";
 @import "../../Components/ListView/ListView.razor.scss";

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -347,9 +347,9 @@ $bb-layout-menu-item-hover-bg: #409eff;
 $bb-layout-logo-border-color: #d5d5d5;
 $bb-layout-logo-bg: #0e77e3;
 
-// LayoutSplitebar
-$bb-splitebar-body-hover-bg: rgba(175, 184, 193, 0.2);
-$bb-splitebar-body-drag-hover-bg: rgb(9, 105, 218);
+// LayoutSplitBar
+$bb-split-bar-body-hover-bg: rgba(175, 184, 193, 0.2);
+$bb-split-bar-body-drag-hover-bg: rgb(9, 105, 218);
 
 // Light
 $bb-light-bg: radial-gradient(circle, #fff, #aaa, #333);

test/UnitTest/Components/LayoutSplitebarTest.cs

@@ -5,12 +5,12 @@
 
 namespace UnitTest.Components;
 
-public class LayoutSplitebarTest : BootstrapBlazorTestBase
+public class LayoutSplitBarTest : BootstrapBlazorTestBase
 {
     [Fact]
-    public void LayoutSplitebar_Ok()
+    public void LayoutSplitBar_Ok()
     {
-        var cut = Context.RenderComponent<LayoutSplitebar>(pb =>
+        var cut = Context.RenderComponent<LayoutSplitBar>(pb =>
         {
             pb.Add(a => a.ContainerSelector, ".layout");
         });

test/UnitTest/Components/LayoutTest.cs

@@ -344,22 +344,22 @@ public void UseTabSet_Layout()
     }
 
     [Fact]
-    public void ShowLayouSidebar_Ok()
+    public void ShowLayoutSidebar_Ok()
     {
         var cut = Context.RenderComponent<Layout>(pb =>
         {
             pb.Add(a => a.UseTabSet, true);
             pb.Add(a => a.AdditionalAssemblies, new Assembly[] { GetType().Assembly });
             pb.Add(a => a.IsFullSide, true);
-            pb.Add(a => a.ShowSplitebar, true);
+            pb.Add(a => a.ShowSplitBar, true);
             pb.Add(a => a.SidebarMinWidth, 100);
             pb.Add(a => a.SidebarMaxWidth, 300);
             pb.Add(a => a.Side, new RenderFragment(builder =>
             {
                 builder.AddContent(0, "test");
             }));
         });
-        cut.Contains("layout-splitebar");
+        cut.Contains("layout-split-bar");
         cut.Contains("data-bb-min=\"100\"");
         cut.Contains("data-bb-max=\"300\"");
     }