dotnetcore · ArgoZhang · Aug 4, 2024 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024
diff --git a/BootstrapBlazor.sln b/BootstrapBlazor.sln
@@ -148,6 +148,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "UniTestIconPark", "test\Uni
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.Html2Pdf.iText", "src\Extensions\Components\BootstrapBlazor.Html2Pdf.iText\BootstrapBlazor.Html2Pdf.iText.csproj", "{AF077995-AFE6-4065-9B3C-CC0B79D9D179}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.DriverJs", "src\Extensions\Components\BootstrapBlazor.DriverJs\BootstrapBlazor.DriverJs.csproj", "{B1F29F72-E0C0-41F6-A38E-A02B775C2FE7}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -340,6 +342,10 @@ Global
 		{AF077995-AFE6-4065-9B3C-CC0B79D9D179}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{AF077995-AFE6-4065-9B3C-CC0B79D9D179}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{AF077995-AFE6-4065-9B3C-CC0B79D9D179}.Release|Any CPU.Build.0 = Release|Any CPU
+		{B1F29F72-E0C0-41F6-A38E-A02B775C2FE7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{B1F29F72-E0C0-41F6-A38E-A02B775C2FE7}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{B1F29F72-E0C0-41F6-A38E-A02B775C2FE7}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{B1F29F72-E0C0-41F6-A38E-A02B775C2FE7}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -399,6 +405,7 @@ Global
 		{6BDE87D7-62D9-4650-95F5-B60225BAFA68} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
 		{D46E8593-641F-4C90-9D95-3ABF41A327FB} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
 		{AF077995-AFE6-4065-9B3C-CC0B79D9D179} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
+		{B1F29F72-E0C0-41F6-A38E-A02B775C2FE7} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0DCB0756-34FA-4FD0-AE1D-D3F08B5B3A6B}

diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -39,6 +39,7 @@
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="8.1.7" />
     <PackageReference Include="BootstrapBlazor.DockView" Version="8.0.9" />
+    <PackageReference Include="BootstrapBlazor.DriverJs" Version="8.0.0-beta01" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="8.0.3" />
     <PackageReference Include="BootstrapBlazor.FontAwesome" Version="8.0.5" />
     <PackageReference Include="BootstrapBlazor.Gantt" Version="8.0.1" />

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DriverDotnetJs.razor b/src/BootstrapBlazor.Server/Components/Samples/DriverDotnetJs.razor
@@ -0,0 +1,200 @@
+@page "/driver-js"
+@inject IStringLocalizer<DriverDotnetJs> Localizer
+
+<h3>@Localizer["DriverJsTitle"]</h3>
+
+<h4>@Localizer["DriverJsSubtitle"]</h4>
+
+<DemoBlock Title="@Localizer["DriverJsNormalTitle"]"
+           Introduction="@Localizer["DriverJsNormalIntro"]"
+           Name="Normal">
+    <section ignore class="bb-guid1">
+        <p>@((MarkupString)Localizer["DriverJsNormalDesc"].Value)</p>
+        <div class="row g-2">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInput TValue="string"></BootstrapInput>
+                    <Button Icon="fa-solid fa-magnifying-glass"></Button>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12">
+                <Button OnClickWithoutRender="OnStart" Text="Start" class="btn-guide"></Button>
+            </div>
+        </div>
+    </section>
+
+    <DriverJs @ref="_guide" Config="_config">
+        <DriverJsStep Selector=".bb-title" Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText2"]"></DriverJsStep>
+        <DriverJsStep Selector=".demo-block:has(.bb-guid1)" Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText3"]"></DriverJsStep>
+        <DriverJsStep Selector=".bb-guid1" Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText4"]"></DriverJsStep>
+        <DriverJsStep Selector=".bb-guid1 .btn-guide" Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText5"]"></DriverJsStep>
+    </DriverJs>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["DriverJsPopoverTitle"]"
+           Introduction="@Localizer["DriverJsPopoverIntro"]"
+           Name="Popover">
+    <section ignore class="bb-guid2">
+        <p>@((MarkupString)Localizer["DriverJsPopoverDesc"].Value)</p>
+        <div class="row g-2">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInput TValue="string"></BootstrapInput>
+                    <Button Icon="fa-solid fa-magnifying-glass"></Button>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12">
+                <Button OnClickWithoutRender="OnStartPopover" Text="Start" class="btn-guide"></Button>
+            </div>
+        </div>
+    </section>
+    <DriverJs @ref="_guidePopover" Config="_configPopover">
+        <DriverJsStep Selector=".bb-title">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText2"]" Side="bottom" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".demo-block:has(.bb-guid2)">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText3"]" Side="left" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".bb-guid2">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText4"]" Side="top" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".bb-guid2 .btn-guide">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText5"]" Side="top" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+    </DriverJs>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["DriverJsPopoverStyleTitle"]"
+           Introduction="@Localizer["DriverJsPopoverStyleIntro"]"
+           Name="PopoverStyle">
+    <section ignore class="bb-guid3">
+        <HeadContent>
+            <style>
+                .driver-popover.driverjs-theme {
+                    --dj-primary-bg: var(--bb-primary-color);
+                    --dj-primary-color: #ddd;
+                    background-color: var(--dj-primary-bg);
+                    color: var(--dj-primary-color);
+                }
+
+                    .driver-popover.driverjs-theme .driver-popover-title {
+                        font-size: 20px;
+                    }
+
+                    .driver-popover.driverjs-theme .driver-popover-title,
+                    .driver-popover.driverjs-theme .driver-popover-description,
+                    .driver-popover.driverjs-theme .driver-popover-progress-text {
+                        color: var(--dj-primary-color);
+                    }
+
+                    .driver-popover.driverjs-theme button {
+                        flex: 1;
+                        text-align: center;
+                        background-color: var(--bs-primary);
+                        color: #fff;
+                        border: 1px solid var(--dj-primary-color);
+                        text-shadow: none;
+                        font-size: 14px;
+                        padding: 5px 8px;
+                        border-radius: var(--bs-border-radius);
+                    }
+
+                        .driver-popover.driverjs-theme button:hover {
+                            background-color: #0095e8;
+                            color: #fff;
+                        }
+
+                    .driver-popover.driverjs-theme .driver-popover-navigation-btns {
+                        justify-content: space-between;
+                        gap: 3px;
+                    }
+
+                    .driver-popover.driverjs-theme .driver-popover-close-btn {
+                        color: #ddd;
+                        background-color: unset;
+                        border: none;
+                        font-size: 24px;
+                    }
+
+                        .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+                            color: var(--dj-primary-color);
+                        }
+
+                    .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+                        border-left-color: var(--dj-primary-bg);
+                    }
+
+                    .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+                        border-right-color: var(--dj-primary-bg);
+                    }
+
+                    .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+                        border-top-color: var(--dj-primary-bg);
+                    }
+
+                    .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+                        border-bottom-color: var(--dj-primary-bg);
+                    }
+            </style>
+        </HeadContent>
+        <div class="row g-2">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInput TValue="string"></BootstrapInput>
+                    <Button Icon="fa-solid fa-magnifying-glass"></Button>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12">
+                <Button OnClickWithoutRender="OnStartPopoverStyle" Text="Start" class="btn-guide"></Button>
+            </div>
+        </div>
+    </section>
+    <DriverJs @ref="_guidePopoverStyle" Config="_configPopoverStyle">
+        <DriverJsStep Selector=".bb-title">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText2"]" Side="bottom" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".demo-block:has(.bb-guid3)">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText3"]" Side="left" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".bb-guid3">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText4"]" Side="top" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".bb-guid3 .btn-guide">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText5"]" Side="top" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+    </DriverJs>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["DriverJsDestroyTitle"]"
+           Introduction="@Localizer["DriverJsDestroyIntro"]"
+           Name="Popover">
+    <section ignore class="bb-guid4">
+        <p>@((MarkupString)Localizer["DriverJsDestroyDesc"].Value)</p>
+        <div class="row g-2">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInput TValue="string"></BootstrapInput>
+                    <Button Icon="fa-solid fa-magnifying-glass"></Button>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12">
+                <Button OnClickWithoutRender="OnStartDestroy" Text="Start" class="btn-guide"></Button>
+            </div>
+        </div>
+    </section>
+    <DriverJs @ref="_guideDestroy" Config="_config" OnBeforeDestroyAsync="OnBeforeDestroyAsync" OnDestroyedAsync="OnDestroyedAsync">
+        <DriverJsStep Selector=".bb-title">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText2"]" Side="bottom" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".demo-block:has(.bb-guid4)">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText3"]" Side="left" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".bb-guid4">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText4"]" Side="top" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+        <DriverJsStep Selector=".bb-guid4 .btn-guide">
+            <DriverJsPopover Title="@Localizer["DriverJsPopoverTitleText"]" Description="@Localizer["DriverJsPopoverContentText5"]" Side="top" Align="center"></DriverJsPopover>
+        </DriverJsStep>
+    </DriverJs>
+    <ConsoleLogger @ref="_logger"></ConsoleLogger>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DriverDotnetJs.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DriverDotnetJs.razor.cs
@@ -0,0 +1,79 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// FocusGuide 组件示例代码
+/// </summary>
+public partial class DriverDotnetJs
+{
+    private DriverJs _guide = default!;
+    private DriverJs _guidePopover = default!;
+    private DriverJs _guidePopoverStyle = default!;
+    private DriverJs _guideDestroy = default!;
+    private DriverJsConfig _config = default!;
+    private DriverJsConfig _configPopover = default!;
+    private DriverJsConfig _configPopoverStyle = default!;
+    private ConsoleLogger _logger = default!;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _config = new()
+        {
+            ShowProgress = true
+        };
+        _configPopover = new()
+        {
+            ShowProgress = true
+        };
+        _configPopoverStyle = new()
+        {
+            PopoverClass = "driverjs-theme"
+        };
+    }
+
+    private async Task OnStart()
+    {
+        await _guide.Start();
+    }
+
+    private async Task OnStartPopover()
+    {
+        await _guidePopover.Start();
+    }
+
+    private async Task OnStartPopoverStyle()
+    {
+        await _guidePopoverStyle.Start();
+    }
+
+    private async Task OnStartDestroy()
+    {
+        await _guideDestroy.Start();
+    }
+
+    private Task<string?> OnBeforeDestroyAsync(DriverJsConfig config, int index)
+    {
+        _logger.Log($"Trigger OnBeforeDestroyAsync step index {index}");
+
+        string? content = null;
+        if (config.Steps.Count != index + 1)
+        {
+            content = $"Are you sure to destory the tour at step {index + 1}?";
+        }
+        return Task.FromResult(content);
+    }
+
+    private Task OnDestroyedAsync()
+    {
+        _logger.Log("Trigger OnDestroyedAsync");
+        return Task.CompletedTask;
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FocusGuides.razor b/src/BootstrapBlazor.Server/Components/Samples/FocusGuides.razor