diff --git a/src/BootstrapBlazor.Server/Components/Samples/Typeds.razor b/src/BootstrapBlazor.Server/Components/Samples/Typeds.razor new file mode 100644 index 00000000000..50d9cf24851 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Typeds.razor @@ -0,0 +1,31 @@ +@page "/typed" +@inject IStringLocalizer Localizer + +

@Localizer["TypedTitle"]

+ +

@Localizer["TypedIntro"]

+ + +
+
+ +
+
+ + + +
+
+ +
+
+ +
+
+ + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/Typeds.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Typeds.razor.cs new file mode 100644 index 00000000000..a7e5ff3cbf0 --- /dev/null +++ b/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(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples; + +/// +/// Typed 组件示例 +/// +public partial class Typeds +{ + private readonly TypedOptions _options = new(); + + private void OnUpdate() + { + _options.Text = ["BootstrapBlazor is an enterprise-level UI component library", "你可以试试看 Blazor 框架"]; + _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", + 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" + } + ]; +} diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs index dbe703c16ee..130e88b5ca5 100644 --- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs +++ b/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" diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index f9025b8a899..3e1db2f5b24 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/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 Text parameter", + "TypedOptionsTitle": "TypedOptions", + "TypedOptionsIntro": "Customize typing speed, delay, and other settings by setting the properties of the TypedOptions parameter" } } diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index ad47873db8b..c25bf1aedce 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/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": "通过设置 Text 参数设置要显示的文本", + "TypedOptionsTitle": "TypedOptions", + "TypedOptionsIntro": "通过设置 TypedOptions 参数的属性自定义打字速度、延时等设定" } } diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json index 16be555f488..1ccd4be4a4c 100644 --- a/src/BootstrapBlazor.Server/docs.json +++ b/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", diff --git a/src/BootstrapBlazor/Components/Typed/Typed.razor b/src/BootstrapBlazor/Components/Typed/Typed.razor new file mode 100644 index 00000000000..4d32100be4d --- /dev/null +++ b/src/BootstrapBlazor/Components/Typed/Typed.razor @@ -0,0 +1,5 @@ +@namespace BootstrapBlazor.Components +@inherits BootstrapModuleComponentBase +@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)] + + diff --git a/src/BootstrapBlazor/Components/Typed/Typed.razor.cs b/src/BootstrapBlazor/Components/Typed/Typed.razor.cs new file mode 100644 index 00000000000..9d5575436db --- /dev/null +++ b/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(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// TypedJs 组件类 +/// +public partial class Typed +{ + /// + /// 获得/设置 组件显示文字 默认 null 未设置 + /// + [Parameter] + public string? Text { get; set; } + + /// + /// 获得/设置 组件配置 实例 默认 null + /// + [Parameter] + public TypedOptions? Options { get; set; } + + /// + /// 获得/设置 打字结束回调方法 默认 null + /// + [Parameter] + public Func? OnCompleteAsync { get; set; } + + private string? _lastOptions; + + private string? _text; + + /// + /// + /// + /// + /// + 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); + } + } + + /// + /// + /// + /// + protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Text, Options, new + { + TriggerComplete = nameof(TriggerComplete) + }); + + /// + /// 打字结束方法 由 Javascript 触发 + /// + /// + [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}"; + } +} diff --git a/src/BootstrapBlazor/Components/Typed/Typed.razor.js b/src/BootstrapBlazor/Components/Typed/Typed.razor.js new file mode 100644 index 00000000000..77bdab9eb44 --- /dev/null +++ b/src/BootstrapBlazor/Components/Typed/Typed.razor.js @@ -0,0 +1,47 @@ +import Data from "../../modules/data.js" +import Typed from '../../lib/typedjs/typed.module.js' + +const getOptions = (text, invoke, options, callbacks) => { + options ??= {}; + + if (text) { + options.strings = [text]; + } + if (options.strings === void 0) { + options.strings = [""]; + } + options.onComplete = function () { + if (options.loop) { + return; + } + invoke.invokeMethodAsync(callbacks.triggerComplete); + } + return options; +} + +export function init(id, invoke, text, options, callbacks) { + const el = document.getElementById(id); + const typed = new Typed(el, getOptions(text, invoke, options, callbacks)); + Data.set(id, { el, invoke, callbacks, typed }); +} + +export function update(id, text, options) { + const typedJs = Data.get(id); + + if (typedJs) { + const { el, invoke, callbacks, typed } = typedJs; + typed.destroy(); + + typedJs.typed = new Typed(el, getOptions(text, invoke, options, callbacks)); + } +} + +export function dispose(id) { + const typedJs = Data.get(id); + Data.remove(id); + + if (typedJs) { + const { typed } = typedJs; + typed.destroy(); + } +} diff --git a/src/BootstrapBlazor/Components/Typed/TypedOptions.cs b/src/BootstrapBlazor/Components/Typed/TypedOptions.cs new file mode 100644 index 00000000000..3288de8b55d --- /dev/null +++ b/src/BootstrapBlazor/Components/Typed/TypedOptions.cs @@ -0,0 +1,91 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +using System.Text.Json.Serialization; + +namespace BootstrapBlazor.Components; + +/// +/// TypedJs 组件配置类 +/// +public record TypedOptions +{ + /// + /// 获得/设置 要打字的字符串数组 + /// + [JsonPropertyName("strings")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? Text { get; set; } + + /// + /// 获得/设置 打字速度 默认 null 未设置 单位毫秒 + /// + [JsonPropertyName("typeSpeed")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? TypeSpeed { get; set; } + + /// + /// 获得/设置 退格速度 默认 null 未设置 单位毫秒 + /// + [JsonPropertyName("backSpeed")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? BackSpeed { get; set; } + + /// + /// 获得/设置 smartBackspace only backspace what doesn't match the previous string default true + /// + [JsonPropertyName("smartBackspace")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? SmartBackspace { get; set; } + + /// + /// 获得/设置 shuffle the strings default false + /// + [JsonPropertyName("shuffle")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? Shuffle { get; set; } + + /// + /// 获得/设置 backDelay time before backspacing in milliseconds default 700 + /// + [JsonPropertyName("backDelay")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? BackDelay { get; set; } + + /// + /// 获得/设置 loop loop strings default false + /// + [JsonPropertyName("loop")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? Loop { get; set; } + + /// + /// 获得/设置 loopCount amount of loops default Infinity + /// + [JsonPropertyName("loopCount")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? LoopCount { get; set; } + + /// + /// 获得/设置 showCursor show cursor default true + /// + [JsonPropertyName("showCursor")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? ShowCursor { get; set; } + + /// + /// 获得/设置 cursorChar character for cursor default | + /// + [JsonPropertyName("cursorChar")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? CursorChar { get; set; } + + /// + /// 获得/设置 contentType 'html' or 'null' for plaintext default html + /// + [JsonPropertyName("contentType")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? ContentType { get; set; } +} diff --git a/src/BootstrapBlazor/wwwroot/lib/typedjs/typed.module.js b/src/BootstrapBlazor/wwwroot/lib/typedjs/typed.module.js new file mode 100644 index 00000000000..0246dae6b50 --- /dev/null +++ b/src/BootstrapBlazor/wwwroot/lib/typedjs/typed.module.js @@ -0,0 +1,2 @@ +function t(){return t=Object.assign?Object.assign.bind():function(t){for(var s=1;s0&&(e.strPos=e.currentElContent.length-1,e.strings.unshift(e.currentElContent)),e.sequence=[],e.strings)e.sequence[u]=u;e.arrayPos=0,e.stopNum=0,e.loop=e.options.loop,e.loopCount=e.options.loopCount,e.curLoop=0,e.shuffle=e.options.shuffle,e.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},e.typingComplete=!1,e.autoInsertCss=e.options.autoInsertCss,e.autoInsertCss&&(this.appendCursorAnimationCss(e),this.appendFadeOutAnimationCss(e))},n.getCurrentElContent=function(t){return t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:"html"===t.contentType?t.el.innerHTML:t.el.textContent},n.appendCursorAnimationCss=function(t){var s="data-typed-js-cursor-css";if(t.showCursor&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n ",document.body.appendChild(e)}},n.appendFadeOutAnimationCss=function(t){var s="data-typed-fadeout-js-css";if(t.fadeOut&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n ",document.body.appendChild(e)}},e}()),n=new(/*#__PURE__*/function(){function t(){}var s=t.prototype;return s.typeHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if("<"===n||"&"===n){var i;for(i="<"===n?">":";";t.substring(s+1).charAt(0)!==i&&!(1+ ++s>t.length););s++}return s},s.backSpaceHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if(">"===n||";"===n){var i;for(i=">"===n?"<":"&";t.substring(s-1).charAt(0)!==i&&!(--s<0););s--}return s},t}()),i=/*#__PURE__*/function(){function t(t,s){e.load(this,s,t),this.begin()}var s=t.prototype;return s.toggle=function(){this.pause.status?this.start():this.stop()},s.stop=function(){this.typingComplete||this.pause.status||(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))},s.start=function(){this.typingComplete||this.pause.status&&(this.pause.status=!1,this.pause.typewrite?this.typewrite(this.pause.curString,this.pause.curStrPos):this.backspace(this.pause.curString,this.pause.curStrPos),this.options.onStart(this.arrayPos,this))},s.destroy=function(){this.reset(!1),this.options.onDestroy(this)},s.reset=function(t){void 0===t&&(t=!0),clearInterval(this.timeout),this.replaceText(""),this.cursor&&this.cursor.parentNode&&(this.cursor.parentNode.removeChild(this.cursor),this.cursor=null),this.strPos=0,this.arrayPos=0,this.curLoop=0,t&&(this.insertCursor(),this.options.onReset(this),this.begin())},s.begin=function(){var t=this;this.options.onBegin(this),this.typingComplete=!1,this.shuffleStringsIfNeeded(this),this.insertCursor(),this.bindInputFocusEvents&&this.bindFocusEvents(),this.timeout=setTimeout(function(){0===t.strPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos):t.backspace(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)},s.typewrite=function(t,s){var e=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var i=this.humanizer(this.typeSpeed),r=1;!0!==this.pause.status?this.timeout=setTimeout(function(){s=n.typeHtmlChars(t,s,e);var i=0,o=t.substring(s);if("^"===o.charAt(0)&&/^\^\d+/.test(o)){var a=1;a+=(o=/\d+/.exec(o)[0]).length,i=parseInt(o),e.temporaryPause=!0,e.options.onTypingPaused(e.arrayPos,e),t=t.substring(0,s)+t.substring(s+a),e.toggleBlinking(!0)}if("`"===o.charAt(0)){for(;"`"!==t.substring(s+r).charAt(0)&&(r++,!(s+r>t.length)););var u=t.substring(0,s),p=t.substring(u.length+1,s+r),c=t.substring(s+r+1);t=u+p+c,r--}e.timeout=setTimeout(function(){e.toggleBlinking(!1),s>=t.length?e.doneTyping(t,s):e.keepTyping(t,s,r),e.temporaryPause&&(e.temporaryPause=!1,e.options.onTypingResumed(e.arrayPos,e))},i)},i):this.setPauseStatus(t,s,!0)},s.keepTyping=function(t,s,e){0===s&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this));var n=t.substring(0,s+=e);this.replaceText(n),this.typewrite(t,s)},s.doneTyping=function(t,s){var e=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),!1===this.loop||this.curLoop===this.loopCount)||(this.timeout=setTimeout(function(){e.backspace(t,s)},this.backDelay))},s.backspace=function(t,s){var e=this;if(!0!==this.pause.status){if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var i=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){s=n.backSpaceHtmlChars(t,s,e);var i=t.substring(0,s);if(e.replaceText(i),e.smartBackspace){var r=e.strings[e.arrayPos+1];e.stopNum=r&&i===r.substring(0,s)?s:0}s>e.stopNum?(s--,e.backspace(t,s)):s<=e.stopNum&&(e.arrayPos++,e.arrayPos===e.strings.length?(e.arrayPos=0,e.options.onLastStringBackspaced(),e.shuffleStringsIfNeeded(),e.begin()):e.typewrite(e.strings[e.sequence[e.arrayPos]],s))},i)}else this.setPauseStatus(t,s,!1)},s.complete=function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0},s.setPauseStatus=function(t,s,e){this.pause.typewrite=e,this.pause.curString=t,this.pause.curStrPos=s},s.toggleBlinking=function(t){this.cursor&&(this.pause.status||this.cursorBlinking!==t&&(this.cursorBlinking=t,t?this.cursor.classList.add("typed-cursor--blink"):this.cursor.classList.remove("typed-cursor--blink")))},s.humanizer=function(t){return Math.round(Math.random()*t/2)+t},s.shuffleStringsIfNeeded=function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))},s.initFadeOut=function(){var t=this;return this.el.className+=" "+this.fadeOutClass,this.cursor&&(this.cursor.className+=" "+this.fadeOutClass),setTimeout(function(){t.arrayPos++,t.replaceText(""),t.strings.length>t.arrayPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],0):(t.typewrite(t.strings[0],0),t.arrayPos=0)},this.fadeOutDelay)},s.replaceText=function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:"html"===this.contentType?this.el.innerHTML=t:this.el.textContent=t},s.bindFocusEvents=function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(s){t.stop()}),this.el.addEventListener("blur",function(s){t.el.value&&0!==t.el.value.length||t.start()}))},s.insertCursor=function(){this.showCursor&&(this.cursor||(this.cursor=document.createElement("span"),this.cursor.className="typed-cursor",this.cursor.setAttribute("aria-hidden",!0),this.cursor.innerHTML=this.cursorChar,this.el.parentNode&&this.el.parentNode.insertBefore(this.cursor,this.el.nextSibling)))},t}();export{i as default}; +//# sourceMappingURL=typed.module.js.map diff --git a/test/UnitTest/Components/TypedTest.cs b/test/UnitTest/Components/TypedTest.cs new file mode 100644 index 00000000000..155597c9c08 --- /dev/null +++ b/test/UnitTest/Components/TypedTest.cs @@ -0,0 +1,109 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +namespace UnitTest.Components; + +public class TypedTest : BootstrapBlazorTestBase +{ + [Fact] + public void Text_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.Text, "Test"); + }); + cut.MarkupMatches(""); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.Text, "Test1"); + }); + } + + [Fact] + public void Options_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.Options, new TypedOptions() { Text = ["test1", "test2"], TypeSpeed = 70 }); + }); + cut.MarkupMatches(""); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.Options, new TypedOptions() { Text = null, TypeSpeed = 70 }); + }); + cut.MarkupMatches(""); + + cut.SetParametersAndRender(); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.Options, new TypedOptions() { Text = ["test1", "test2", "test3"], TypeSpeed = 70 }); + }); + cut.MarkupMatches(""); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.Options, null); + }); + } + + [Fact] + public async Task TriggerComplete_Ok() + { + var triggered = false; + Task onCompleteCallback() + { + triggered = true; + return Task.CompletedTask; + } + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.Options, new TypedOptions() { Text = ["test1", "test2"], TypeSpeed = 70 }); + pb.Add(a => a.OnCompleteAsync, onCompleteCallback); + }); + cut.MarkupMatches(""); + + await cut.InvokeAsync(() => cut.Instance.TriggerComplete()); + Assert.True(triggered); + } + + [Fact] + public void TypedOptions_Ok() + { + // Arrange + var options = new TypedOptions() + { + Text = ["test1", "test2"], + TypeSpeed = 70, + BackSpeed = 50, + BackDelay = 200, + Loop = true, + LoopCount = 2, + ShowCursor = true, + CursorChar = "|", + ContentType = "html", + Shuffle = false, + SmartBackspace = true + }; + + // Assert + Assert.NotNull(options.Text); + Assert.Equal(2, options.Text.Count); + Assert.Equal("test1", options.Text[0]); + Assert.Equal("test2", options.Text[1]); + Assert.Equal(70, options.TypeSpeed); + Assert.Equal(50, options.BackSpeed); + Assert.Equal(200, options.BackDelay); + Assert.True(options.Loop); + Assert.Equal(2, options.LoopCount); + Assert.True(options.ShowCursor); + Assert.False(options.Shuffle); + Assert.True(options.SmartBackspace); + Assert.Equal("|", options.CursorChar); + Assert.Equal("html", options.ContentType); + } +}