refactor(LayoutSplitebar): add min/max default value (#5448)

* style: 增加动画效果

* refactor: 更新代码

* chore: bump version 9.3.1-beta35

* feat: 支持默认值

* refactor: 支持主题样式

* refactor: 支持 Layout 收缩状态

* refactor: 增加异常保护逻辑

Author: ArgoZhang

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -2,9 +2,9 @@
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
-<CascadingValue Value="this" IsFixed="true">
-    @if (_init)
-    {
+@if (_init)
+{
+    <CascadingValue Value="this" IsFixed="true">
         @if (IsAuthenticated)
         {
             <section @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString">
@@ -60,8 +60,8 @@
         {
             @RenderMain
         }
-    }
-</CascadingValue>
+    </CascadingValue>
+}
 
 @code {
     RenderFragment<bool> RenderHeader => collapse =>

src/BootstrapBlazor/Components/Layout/Layout.razor.scss

@@ -84,7 +84,6 @@
     }
 
     .has-sidebar {
-        /*left-right*/
         position: relative;
         flex: 1;
 
@@ -267,14 +266,17 @@
             position: relative;
             width: var(--bb-layout-sidebar-width);
             transform: translateX(0);
-            transition: width .3s linear;
             flex-shrink: 0;
 
             .layout-menu {
                 border-right: 1px solid var(--bs-border-color);
             }
         }
 
+        &:not(.drag) .layout-side {
+            transition: width .3s linear;
+        }
+
         &.has-sidebar {
             .layout-side {
                 &.is-fixed-header {

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

@@ -6,29 +6,38 @@ export function init(id) {
         return;
     }
 
-    const min = parseFloat(el.getAttribute("data-bb-min") ?? "0");
-    const max = parseFloat(el.getAttribute("data-bb-max") ?? "0");
+    const min = parseFloat(el.getAttribute("data-bb-min") ?? "-1");
+    const max = parseFloat(el.getAttribute("data-bb-max") ?? "-1");
     const selector = el.getAttribute("data-bb-selector") ?? ".layout";
     const section = document.querySelector(selector);
+    if (section === null) {
+        log.warning(`LayoutSplitebar: selector ${selector} not found`);
+        return;
+    }
+
     const bar = el.querySelector(".layout-splitebar-body");
     let originX = 0;
     let width = 0;
     Drag.drag(bar,
         e => {
-            bar.classList.add('drag')
+            section.classList.add('drag')
             width = parseInt(getComputedStyle(section).getPropertyValue('--bb-layout-sidebar-width'))
             originX = e.clientX || e.touches[0].clientX
         },
         e => {
             const eventX = e.clientX || (e.touches.length > 0 && e.touches[0].clientX)
             const moveX = eventX - originX
             const newWidth = width + moveX
-            if (newWidth >= min && newWidth <= max) {
-                section.style.setProperty('--bb-layout-sidebar-width', `${newWidth}px`)
+            if (min > -1 && newWidth < min) {
+                newWidth = min
+            }
+            if (max > -1 && newWidth > max) {
+                newWidth = max
             }
+            section.style.setProperty('--bb-layout-sidebar-width', `${newWidth}px`)
         },
         e => {
-            bar.classList.remove('drag')
+            section.classList.remove('drag')
         }
     )
 }

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

@@ -8,23 +8,35 @@
     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};
         position: absolute;
         inset: 0px -2px;
         cursor: col-resize;
         background-color: transparent;
         border-radius: 4px;
+        transition: background .3s linear;
 
         &:hover {
-            background-color: var(--bb-sidebar-body-hover-bg);
+            background-color: var(--bb-splitebar-body-hover-bg);
         }
+    }
+}
 
-        &.drag,
-        &.drag:hover {
-            background-color: var(--bb-sidebar-body-drag-hover-bg);
+.drag {
+    .layout-splitebar {
+        .layout-splitebar-body:hover {
+            background-color: var(--bb-splitebar-body-drag-hover-bg);
         }
     }
 }
 
+.is-collapsed {
+    .layout-splitebar-body {
+        display: none;
+    }
+}
+
 @media(min-width: 768px) {
     .layout-splitebar {
         display: block;

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

@@ -346,6 +346,10 @@ $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);
+
 // Light
 $bb-light-bg: radial-gradient(circle, #fff, #aaa, #333);
 $bb-light-danger-start-color: #e17777;