doc(DockView): add auto switch theme sample

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -31,7 +31,7 @@
     <PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.7" />
+    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.8" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />
@@ -48,7 +48,7 @@
     <PackageReference Include="BootstrapBlazor.Markdown" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.9" />
-    <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
+    <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.4" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.6" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OctIcon" Version="9.0.4" />

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor

@@ -1,5 +1,5 @@
 @inherits WebSiteModuleComponentBase
-@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js", JSObjectReference = true)]
+@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js")]
 
 <div id="@Id" class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex" @onclick:stopPropagation>
     <i class="@GetLightIconClassString"></i>

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.cs

@@ -3,8 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-using Microsoft.JSInterop;
-
 namespace BootstrapBlazor.Server.Components.Components;
 
 /// <summary>
@@ -15,10 +13,6 @@ public partial class ThemeMode
     [Inject, NotNull]
     private IIconTheme? IconTheme { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IThemeProvider? ThemeProvider { get; set; }
-
     private string? GetLightIconClassString => CssBuilder.Default("icon-light")
         .AddClass(_lightModeIcon)
         .Build();
@@ -41,17 +35,4 @@ protected override void OnInitialized()
         _darkModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderDarkModeIcon);
         _lightModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderLightModeIcon);
     }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(OnThemeChanged));
-
-    /// <summary>
-    /// The callback when theme changed
-    /// </summary>
-    /// <param name="themeName"></param>
-    /// <returns></returns>
-    [JSInvokable]
-    public ValueTask OnThemeChanged(string themeName) => ThemeProvider.SetThemeAsync(themeName);
 }

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js

@@ -1,7 +1,7 @@
 import { getTheme, switchTheme, calcCenterPosition } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
-export function init(id, invoke, method) {
+export function init(id) {
     const el = document.getElementById(id);
     if (el) {
         EventHandler.on(el, 'click', e => {
@@ -15,7 +15,6 @@ export function init(id, invoke, method) {
 
             const rect = calcCenterPosition(el);
             switchTheme(theme, rect.x, rect.y);
-            invoke.invokeMethodAsync(method, theme);
         });
     }
 }

src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs

@@ -22,10 +22,6 @@ public abstract class BaseDockView : ComponentBase
     [NotNull]
     private MockDataTableDynamicService? DataTableDynamicService { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IThemeProvider? ThemeProviderService { get; set; }
-
     /// <summary>
     /// 获得/设置 数据集合
     /// </summary>
@@ -74,22 +70,6 @@ protected override void OnInitialized()
         TreeItems.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 3, 101, 1010));
 
         DataTableDynamicContext = DataTableDynamicService.CreateContext();
-
-        ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
-    }
-
-    private Task OnThemeChanged(string themeName)
-    {
-        if (themeName == "dark")
-        {
-            Theme = DockViewTheme.Dark;
-        }
-        else
-        {
-            Theme = DockViewTheme.Light;
-        }
-        StateHasChanged();
-        return Task.CompletedTask;
     }
 
     /// <summary>
@@ -116,23 +96,23 @@ private int GenerateId()
     protected static Task<IEnumerable<TableTreeNode<TreeFoo>>> TreeNodeConverter(IEnumerable<TreeFoo> items)
     {
         // 构造树状数据结构
-        var ret = BuildTreeNodes(items, 0);
-        return Task.FromResult(ret);
+        var ret = BuildTreeNodes(items.ToList(), 0);
+        return Task.FromResult(ret.AsEnumerable());
+    }
 
-        IEnumerable<TableTreeNode<TreeFoo>> BuildTreeNodes(IEnumerable<TreeFoo> items, int parentId)
+    private static List<TableTreeNode<TreeFoo>> BuildTreeNodes(List<TreeFoo> items, int parentId)
+    {
+        var ret = new List<TableTreeNode<TreeFoo>>();
+        ret.AddRange(items.Where(i => i.ParentId == parentId).Select((foo, index) => new TableTreeNode<TreeFoo>(foo)
         {
-            var ret = new List<TableTreeNode<TreeFoo>>();
-            ret.AddRange(items.Where(i => i.ParentId == parentId).Select((foo, index) => new TableTreeNode<TreeFoo>(foo)
-            {
-                // 此处为示例，假设偶行数据都有子数据
-                HasChildren = index % 2 == 0,
-                // 如果子项集合有值 则默认展开此节点
-                IsExpand = items.Any(i => i.ParentId == foo.Id),
-                // 获得子项集合
-                Items = BuildTreeNodes(items.Where(i => i.ParentId == foo.Id), foo.Id)
-            }));
-            return ret;
-        }
+            // 此处为示例，假设偶行数据都有子数据
+            HasChildren = index % 2 == 0,
+            // 如果子项集合有值 则默认展开此节点
+            IsExpand = items.Any(i => i.ParentId == foo.Id),
+            // 获得子项集合
+            Items = BuildTreeNodes(items.Where(i => i.ParentId == foo.Id).ToList(), foo.Id)
+        }));
+        return ret;
     }
 
     /// <summary>
@@ -162,7 +142,7 @@ public class TreeFoo : Foo
         /// GenerateFoos
         /// </summary>
         /// <returns></returns>
-        public static List<TreeFoo> GenerateFoos(IStringLocalizer<Foo> localizer, int count = 80, int parentId = 0, int id = 0) => Enumerable.Range(1, count).Select(i => new TreeFoo()
+        public static List<TreeFoo> GenerateFoos(IStringLocalizer<Foo> localizer, int count = 80, int parentId = 0, int id = 0) => [.. Enumerable.Range(1, count).Select(i => new TreeFoo()
         {
             Id = id + i,
             ParentId = parentId,
@@ -172,6 +152,6 @@ public class TreeFoo : Foo
             Count = Random.Shared.Next(1, 100),
             Complete = Random.Shared.Next(1, 100) > 50,
             Education = Random.Shared.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middle
-        }).ToList();
+        })];
     }
 }

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewCol.razor

@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewColIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutColumn" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutColumn" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" Height="33">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewComplex.razor

@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewComplexIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutComplex" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutComplex" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewContent Type="DockViewContentType.Column">
             <DockViewComponent Key="tab1" Title="标签一">

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewGroup.razor

@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewGroupIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutGroup" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutGroup" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewContent Type="DockViewContentType.Group">
             <DockViewComponent Key="tab1" Title="标签一">

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor

@@ -12,7 +12,7 @@
     <Button OnClickWithoutRender="Reset" Text="复位"></Button>
 </GroupBox>
 
-<DockViewV2 @ref="DockView" Name="DockViewLayout" Theme="@Theme" LayoutConfig="@LayoutConfig" class="dock-layout-demo">
+<DockViewV2 @ref="DockView" Name="DockViewLayout" LayoutConfig="@LayoutConfig" class="dock-layout-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLock.razor

@@ -7,7 +7,7 @@
 
 <Button OnClick="OnToggleLock" Text="@LockText"></Button>
 
-<DockViewV2 Name="DockViewLock" Theme="@Theme" OnLockChangedCallbackAsync="OnLockChangedCallbackAsync" IsLock="IsLock" class="dock-lock-demo">
+<DockViewV2 Name="DockViewLock" OnLockChangedCallbackAsync="OnLockChangedCallbackAsync" IsLock="IsLock" class="dock-lock-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewComponent Key="tab1" Title="标签一" Width="18">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor

@@ -7,7 +7,7 @@
 
 <Select @bind-Value="@Theme"></Select>
 
-<DockViewV2 Name="DockViewNest" Theme="Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewNest" Theme="_theme" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewComponent Key="tab1" Title="标签一">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor.cs

@@ -13,4 +13,6 @@ public partial class DockViewNest
     [Inject]
     [NotNull]
     private IStringLocalizer<DockViewNest>? Localizer { get; set; }
+
+    private DockViewTheme _theme;
 }

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewRow.razor

@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewRowIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutRow" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutRow" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewComponent Key="tab1" Title="标签一" ShowClose="false" Width="14">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewTitle.razor

@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewTitleIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutColumn" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutColumn" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" ShowTitleBar="true" OnClickTitleBarCallback="OnClickTitleBarCallback" Height="33">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewVisible.razor

@@ -7,7 +7,7 @@
 
 <Button OnClick="OnToggleVisible" Text="切换标签一"></Button>
 
-<DockViewV2 Name="DockViewVisible" Theme="@Theme" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync" class="dockview-demo">
+<DockViewV2 Name="DockViewVisible" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" Visible="Visible">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.cs

@@ -143,6 +143,7 @@ public async Task OnThemeChanged(ThemeValue name)
         {
             await OnThemeChangedAsync(name);
         }
-        await ThemeProviderService.SetThemeAsync(name.ToDescriptionString());
+
+        ThemeProviderService.TriggerThemeChanged(name.ToDescriptionString());
     }
 }