vue3-typed-ts/dist/index.umd.cjs

A Typed.js wrapped library for Vue3 with type support

(function(d,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],u):(d=typeof globalThis<"u"?globalThis:d||self,u(d.Vue3TypedJs={},d.Vue))})(this,function(d,u){"use strict";function c(){return c=Object.assign?Object.assign.bind():function(n){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n},c.apply(this,arguments)}var b={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,smartBackspace:!0,shuffle:!1,backDelay:700,fadeOut:!1,fadeOutClass:"typed-fade-out",fadeOutDelay:500,loop:!1,loopCount:1/0,showCursor:!0,cursorChar:"|",autoInsertCss:!0,attr:null,bindInputFocusEvents:!1,contentType:"html",onBegin:function(n){},onComplete:function(n){},preStringTyped:function(n,i){},onStringTyped:function(n,i){},onLastStringBackspaced:function(n){},onTypingPaused:function(n,i){},onTypingResumed:function(n,i){},onReset:function(n){},onStop:function(n,i){},onStart:function(n,i){},onDestroy:function(n){}},C=new(function(){function n(){}var i=n.prototype;return i.load=function(t,e,s){if(t.el=typeof s=="string"?document.querySelector(s):s,t.options=c({},b,e),t.isInput=t.el.tagName.toLowerCase()==="input",t.attr=t.options.attr,t.bindInputFocusEvents=t.options.bindInputFocusEvents,t.showCursor=!t.isInput&&t.options.showCursor,t.cursorChar=t.options.cursorChar,t.cursorBlinking=!0,t.elContent=t.attr?t.el.getAttribute(t.attr):t.el.textContent,t.contentType=t.options.contentType,t.typeSpeed=t.options.typeSpeed,t.startDelay=t.options.startDelay,t.backSpeed=t.options.backSpeed,t.smartBackspace=t.options.smartBackspace,t.backDelay=t.options.backDelay,t.fadeOut=t.options.fadeOut,t.fadeOutClass=t.options.fadeOutClass,t.fadeOutDelay=t.options.fadeOutDelay,t.isPaused=!1,t.strings=t.options.strings.map(function(a){return a.trim()}),t.stringsElement=typeof t.options.stringsElement=="string"?document.querySelector(t.options.stringsElement):t.options.stringsElement,t.stringsElement){t.strings=[],t.stringsElement.style.cssText="clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;";var o=Array.prototype.slice.apply(t.stringsElement.children),r=o.length;if(r)for(var l=0;l<r;l+=1)t.strings.push(o[l].innerHTML.trim())}for(var p in t.strPos=0,t.currentElContent=this.getCurrentElContent(t),t.currentElContent&&t.currentElContent.length>0&&(t.strPos=t.currentElContent.length-1,t.strings.unshift(t.currentElContent)),t.sequence=[],t.strings)t.sequence[p]=p;t.arrayPos=0,t.stopNum=0,t.loop=t.options.loop,t.loopCount=t.options.loopCount,t.curLoop=0,t.shuffle=t.options.shuffle,t.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},t.typingComplete=!1,t.autoInsertCss=t.options.autoInsertCss,t.autoInsertCss&&(this.appendCursorAnimationCss(t),this.appendFadeOutAnimationCss(t))},i.getCurrentElContent=function(t){return t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:t.contentType==="html"?t.el.innerHTML:t.el.textContent},i.appendCursorAnimationCss=function(t){var e="data-typed-js-cursor-css";if(t.showCursor&&!document.querySelector("["+e+"]")){var s=document.createElement("style");s.setAttribute(e,"true"),s.innerHTML=`
        .typed-cursor{
          opacity: 1;
        }
        .typed-cursor.typed-cursor--blink{
          animation: typedjsBlink 0.7s infinite;
          -webkit-animation: typedjsBlink 0.7s infinite;
                  animation: typedjsBlink 0.7s infinite;
        }
        @keyframes typedjsBlink{
          50% { opacity: 0.0; }
        }
        @-webkit-keyframes typedjsBlink{
          0% { opacity: 1; }
          50% { opacity: 0.0; }
          100% { opacity: 1; }
        }
      `,document.body.appendChild(s)}},i.appendFadeOutAnimationCss=function(t){var e="data-typed-fadeout-js-css";if(t.fadeOut&&!document.querySelector("["+e+"]")){var s=document.createElement("style");s.setAttribute(e,"true"),s.innerHTML=`
        .typed-fade-out{
          opacity: 0;
          transition: opacity .25s;
        }
        .typed-cursor.typed-cursor--blink.typed-fade-out{
          -webkit-animation: 0;
          animation: 0;
        }
      `,document.body.appendChild(s)}},n}()),y=new(function(){function n(){}var i=n.prototype;return i.typeHtmlChars=function(t,e,s){if(s.contentType!=="html")return e;var o=t.substring(e).charAt(0);if(o==="<"||o==="&"){var r;for(r=o==="<"?">":";";t.substring(e+1).charAt(0)!==r&&!(1+ ++e>t.length););e++}return e},i.backSpaceHtmlChars=function(t,e,s){if(s.contentType!=="html")return e;var o=t.substring(e).charAt(0);if(o===">"||o===";"){var r;for(r=o===">"?"<":"&";t.substring(e-1).charAt(0)!==r&&!(--e<0););e--}return e},n}()),g=function(){function n(t,e){C.load(this,e,t),this.begin()}var i=n.prototype;return i.toggle=function(){this.pause.status?this.start():this.stop()},i.stop=function(){this.typingComplete||this.pause.status||(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))},i.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))},i.destroy=function(){this.reset(!1),this.options.onDestroy(this)},i.reset=function(t){t===void 0&&(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())},i.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(){t.strPos===0?t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos):t.backspace(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)},i.typewrite=function(t,e){var s=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var o=this.humanizer(this.typeSpeed),r=1;this.pause.status!==!0?this.timeout=setTimeout(function(){e=y.typeHtmlChars(t,e,s);var l=0,p=t.substring(e);if(p.charAt(0)==="^"&&/^\^\d+/.test(p)){var a=1;a+=(p=/\d+/.exec(p)[0]).length,l=parseInt(p),s.temporaryPause=!0,s.options.onTypingPaused(s.arrayPos,s),t=t.substring(0,e)+t.substring(e+a),s.toggleBlinking(!0)}if(p.charAt(0)==="`"){for(;t.substring(e+r).charAt(0)!=="`"&&(r++,!(e+r>t.length)););var h=t.substring(0,e),f=t.substring(h.length+1,e+r),P=t.substring(e+r+1);t=h+f+P,r--}s.timeout=setTimeout(function(){s.toggleBlinking(!1),e>=t.length?s.doneTyping(t,e):s.keepTyping(t,e,r),s.temporaryPause&&(s.temporaryPause=!1,s.options.onTypingResumed(s.arrayPos,s))},l)},o):this.setPauseStatus(t,e,!0)},i.keepTyping=function(t,e,s){e===0&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this));var o=t.substring(0,e+=s);this.replaceText(o),this.typewrite(t,e)},i.doneTyping=function(t,e){var s=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),this.loop===!1||this.curLoop===this.loopCount)||(this.timeout=setTimeout(function(){s.backspace(t,e)},this.backDelay))},i.backspace=function(t,e){var s=this;if(this.pause.status!==!0){if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var o=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){e=y.backSpaceHtmlChars(t,e,s);var r=t.substring(0,e);if(s.replaceText(r),s.smartBackspace){var l=s.strings[s.arrayPos+1];s.stopNum=l&&r===l.substring(0,e)?e:0}e>s.stopNum?(e--,s.backspace(t,e)):e<=s.stopNum&&(s.arrayPos++,s.arrayPos===s.strings.length?(s.arrayPos=0,s.options.onLastStringBackspaced(),s.shuffleStringsIfNeeded(),s.begin()):s.typewrite(s.strings[s.sequence[s.arrayPos]],e))},o)}else this.setPauseStatus(t,e,!1)},i.complete=function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0},i.setPauseStatus=function(t,e,s){this.pause.typewrite=s,this.pause.curString=t,this.pause.curStrPos=e},i.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")))},i.humanizer=function(t){return Math.round(Math.random()*t/2)+t},i.shuffleStringsIfNeeded=function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))},i.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)},i.replaceText=function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:this.contentType==="html"?this.el.innerHTML=t:this.el.textContent=t},i.bindFocusEvents=function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(e){t.stop()}),this.el.addEventListener("blur",function(e){t.el.value&&t.el.value.length!==0||t.start()}))},i.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)))},n}();const S={strings:{type:Array,required:!1,default:function(){return["Hello World!"]}},stringsElement:{type:String,required:!1,default:null},typeSpeed:{type:Number,required:!1,default:50},startDelay:{type:Number,required:!1,default:0},backSpeed:{type:Number,required:!1,default:0},smartBackspace:{type:Boolean,required:!1,default:!0},shuffle:{type:Boolean,required:!1,default:!1},backDelay:{type:Number,required:!1,default:700},fadeOut:{type:Boolean,required:!1,default:!1},fadeOutClass:{type:String,required:!1,default:"typed-fade-out"},fadeOutDelay:{type:Number,required:!1,default:500},loop:{type:Boolean,required:!1,default:!1},loopCount:{type:Number,required:!1,default:1/0},showCursor:{type:Boolean,required:!1,default:!0},cursorChar:{type:String,required:!1,default:"|"},autoInsertCss:{type:Boolean,required:!1,default:!0},attr:{type:String,required:!1,default:null},bindInputFocusEvents:{type:Boolean,required:!1,default:!1},contentType:{type:String,required:!1,default:"html"}},v=(n,i)=>{let t=Object.assign({},i);return t.onComplete=(...e)=>{n==null||n.$emit("onComplete",...e)},t.preStringTyped=(...e)=>{n==null||n.$emit("preStringTyped",...e)},t.onStringTyped=(...e)=>{n==null||n.$emit("onStringTyped",...e)},t.onLastStringBackspaced=(...e)=>{n==null||n.$emit("onLastStringBackspaced",...e)},t.onTypingPaused=(...e)=>{n==null||n.$emit("onTypingPaused",...e)},t.onTypingResumed=(...e)=>{n==null||n.$emit("onTypingResumed",...e)},t.onReset=(...e)=>{n==null||n.$emit("onReset",...e)},t.onStop=(...e)=>{n==null||n.$emit("onStop",...e)},t.onStart=(...e)=>{n==null||n.$emit("onStart",...e)},t.onDestroy=(...e)=>{n==null||n.$emit("onDestroy",...e)},t},m=((n,i)=>{const t=n.__vccOpts||n;for(const[e,s]of i)t[e]=s;return t})(u.defineComponent({__name:"index",props:S,setup(n){const{proxy:i}=u.getCurrentInstance(),t=u.useSlots(),e=t.default?t.default():[],s=n,o=u.ref(null),r=u.ref(null),l=a=>{throw new TypeError(a)},p=()=>{var h;const a=(h=r.value)==null?void 0:h.querySelector(".typing");if(e.length>1)l("Just one child element allowed inside VueTypedJs component.");else if(e.length===1){const f=v(i,s);o.value=new g(a,f)}};return u.onMounted(()=>{p()}),u.watch(()=>JSON.stringify(s),()=>{var a;(a=o.value)==null||a.destroy(),p()}),u.onUnmounted(()=>{var a;(a=o.value)==null||a.destroy()}),(a,h)=>(u.openBlock(),u.createElementBlock("div",{class:"typed-element",ref_key:"typedElement",ref:r},[u.renderSlot(a.$slots,"default",{},void 0,!0)],512))}}),[["__scopeId","data-v-7d54af00"]]),k=[m],T={install:n=>{k.forEach(i=>{n.use(i)})}};d.Typed=g,d.VueTypedJs=m,d.default=T,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});