feat(Typed): add Typed component

src/BootstrapBlazor.Server/Components/Samples/Typeds.razor

@@ -0,0 +1,31 @@
+@page "/typed"
+@inject IStringLocalizer<Typeds> Localizer
+
+<h3>@Localizer["TypedTitle"]</h3>
+
+<h4>@Localizer["TypedIntro"]</h4>
+
+<DemoBlock Title="@Localizer["NormalTitle"]"
+           Introduction="@Localizer["NormalIntro"]"
+           Name="Normal">
+    <div class="row">
+        <div class="col-12">
+            <Typed Text="<code>BootstrapBlazor</code> is an enterprise-level UI component library"></Typed>
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["TypedOptionsTitle"]"
+           Introduction="@Localizer["TypedOptionsIntro"]"
+           Name="Options">
+    <div class="row g-3">
+        <div class="col-12">
+            <Button Text="Update" OnClick="OnUpdate"></Button>
+        </div>
+        <div class="col-12">
+            <Typed Options="_options"></Typed>
+        </div>
+    </div>
+</DemoBlock>
+
+<AttributeTable Items="@TypedAttributes" Title="@Localizer["TypedAttribute"]"></AttributeTable>

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

@@ -0,0 +1,114 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Typed 组件示例
+/// </summary>
+public partial class Typeds
+{
+    private readonly TypedOptions _options = new();
+
+    private void OnUpdate()
+    {
+        _options.Text = ["<code>BootstrapBlazor</code> is an enterprise-level UI component library", "你可以试试看 <b>Blazor</b> 框架"];
+        _options.TypeSpeed = 70;
+        _options.BackSpeed = 30;
+        _options.Loop = true;
+    }
+
+    private static AttributeItem[] TypedAttributes =>
+    [
+        new()
+        {
+            Name = nameof(TypedOptions.Text),
+            Description = "strings strings to be typed",
+            Type = "List<string>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.TypeSpeed),
+            Description = "typeSpeed type speed in milliseconds",
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.BackSpeed),
+            Description = "backSpeed backspacing speed in milliseconds",
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.BackDelay),
+            Description = "backDelay time before backspacing in milliseconds",
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.SmartBackspace),
+            Description = "smartBackspace only backspace what doesn't match the previous string default true",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.Shuffle),
+            Description = "shuffle the strings",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.Loop),
+            Description = "loop loop strings default false",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.LoopCount),
+            Description = "loopCount amount of loops default Infinity",
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = " — ",
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.ShowCursor),
+            Description = "showCursor show cursor",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.CursorChar),
+            Description = "cursorChar character for cursor",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = "|"
+        },
+        new()
+        {
+            Name = nameof(TypedOptions.ContentType),
+            Description = "contentType 'html' or 'null' for plaintext",
+            Type = "string",
+            ValueList = "html|null",
+            DefaultValue = "html"
+        }
+    ];
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -766,6 +766,11 @@ void AddData(DemoMenuItem item)
                     Url = "transition"
                 },
                 new()
+                {
+                    Text = Localizer["Typed"],
+                    Url = "typed"
+                },
+                new()
                 {
                     Text = Localizer["VideoPlayer"],
                     Url = "video-player"
@@ -1152,6 +1157,11 @@ void AddNotice(DemoMenuItem item)
                     Url = "drawer"
                 },
                 new()
+                {
+                    Text = Localizer["DriverJs"],
+                    Url = "driver-js"
+                },
+                new()
                 {
                     Text = Localizer["EditDialog"],
                     Url = "edit-dialog"
@@ -1162,11 +1172,6 @@ void AddNotice(DemoMenuItem item)
                     Url = "flip-clock"
                 },
                 new()
-                {
-                    Text = Localizer["DriverJs"],
-                    Url = "driver-js"
-                },
-                new()
                 {
                     Text = Localizer["Light"],
                     Url = "light"

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

@@ -4810,7 +4810,8 @@
     "SmilesDrawer": "SmilesDrawer",
     "Affix": "Affix",
     "Watermark": "Watermark",
-    "OctIcon": "OctIcons"
+    "OctIcon": "Oct Icons",
+    "Typed": "Typed"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6941,5 +6942,13 @@
     "CacheListDelete": "Delete",
     "CacheListDeleteAll": "Clear",
     "CacheListCount": "Total {0} Entry"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Typeds": {
+    "TypedTitle": "Typed",
+    "TypedIntro": "Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.",
+    "NormalTitle": "Text",
+    "NormalIntro": "Set the text to be displayed by setting the <code>Text</code> parameter",
+    "TypedOptionsTitle": "TypedOptions",
+    "TypedOptionsIntro": "Customize typing speed, delay, and other settings by setting the properties of the <code>TypedOptions</code> parameter"
   }
 }

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

@@ -4810,7 +4810,8 @@
     "SmilesDrawer": "分子式组件 SmilesDrawer",
     "Affix": "固钉组件 Affix",
     "Watermark": "水印组件 Watermark",
-    "OctIcon": "OctIcons"
+    "OctIcon": "Oct Icons",
+    "Typed": "打字机效果 Typed"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6941,5 +6942,13 @@
     "CacheListDelete": "删除",
     "CacheListDeleteAll": "清除全部",
     "CacheListCount": "共 {0} 个键值"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Typeds": {
+    "TypedTitle": "Typed 打字机效果",
+    "TypedIntro": "输入任意字符串，它会按照你设置的速度输入，输入的内容会退格，然后根据你设置的字符串数量开始一个新句子。",
+    "NormalTitle": "Text",
+    "NormalIntro": "通过设置 <code>Text</code> 参数设置要显示的文本",
+    "TypedOptionsTitle": "TypedOptions",
+    "TypedOptionsIntro": "通过设置 <code>TypedOptions</code> 参数的属性自定义打字速度、延时等设定"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -224,7 +224,8 @@
     "rdkit": "Rdkits",
     "smiles-drawer": "SmilesDrawers",
     "affix": "Affixs",
-    "watermark": "Watermarks"
+    "watermark": "Watermarks",
+    "typed": "Typeds"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/Typed/Typed.razor

@@ -0,0 +1,5 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
+
+<span @attributes="AdditionalAttributes" id="@Id"></span>

src/BootstrapBlazor/Components/Typed/Typed.razor.cs

@@ -0,0 +1,105 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// TypedJs 组件类
+/// </summary>
+public partial class Typed
+{
+    /// <summary>
+    /// 获得/设置 组件显示文字 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public string? Text { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件配置 <see cref="TypedOptions"/> 实例 默认 null
+    /// </summary>
+    [Parameter]
+    public TypedOptions? Options { get; set; }
+
+    /// <summary>
+    /// 获得/设置 打字结束回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnCompleteAsync { get; set; }
+
+    private string? _lastOptions;
+
+    private string? _text;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _lastOptions = Options?.ToString();
+            _text = Text;
+        }
+        else if (UpdateParameters())
+        {
+            await InvokeVoidAsync("update", Id, Text, Options);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Text, Options, new
+    {
+        TriggerComplete = nameof(TriggerComplete)
+    });
+
+    /// <summary>
+    /// 打字结束方法 由 Javascript 触发
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerComplete()
+    {
+        if (OnCompleteAsync != null)
+        {
+            await OnCompleteAsync();
+        }
+    }
+
+    private bool UpdateParameters()
+    {
+        if (Text != _text)
+        {
+            _text = Text;
+            return true;
+        }
+
+        var optionString = GetOptionsString();
+        if (string.Equals(optionString, _lastOptions, StringComparison.Ordinal))
+        {
+            return false;
+        }
+
+        _lastOptions = optionString;
+        return true;
+    }
+
+    private string? GetOptionsString()
+    {
+        if (Options == null)
+        {
+            return null;
+        }
+
+        var textString = Options.Text == null ? "" : string.Join(",", Options.Text);
+        return $"{Options} {textString}";
+    }
+}