vue-typewriter-effect/dist/vue-typewriter-effect.umd.cjs

Vue 3 wrapper for typewriter-effect

(function(N,j){typeof exports=="object"&&typeof module<"u"?module.exports=j(require("vue")):typeof define=="function"&&define.amd?define(["vue"],j):(N=typeof globalThis<"u"?globalThis:N||self,N.VueTypeWriter=j(N.Vue))})(this,function(N){"use strict";var j=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function re(f){return f&&f.__esModule&&Object.prototype.hasOwnProperty.call(f,"default")?f.default:f}var U={},oe={get exports(){return U},set exports(f){U=f}};(function(f,se){(function(J,Q){f.exports=Q()})(typeof self<"u"?self:j,()=>(()=>{var J={75:function(s){(function(){var c,d,C,v,A,h;typeof performance<"u"&&performance!==null&&performance.now?s.exports=function(){return performance.now()}:typeof process<"u"&&process!==null&&process.hrtime?(s.exports=function(){return(c()-A)/1e6},d=process.hrtime,v=(c=function(){var y;return 1e9*(y=d())[0]+y[1]})(),h=1e9*process.uptime(),A=v-h):Date.now?(s.exports=function(){return Date.now()-C},C=Date.now()):(s.exports=function(){return new Date().getTime()-C},C=new Date().getTime())}).call(this)},4087:(s,c,d)=>{for(var C=d(75),v=typeof window>"u"?d.g:window,A=["moz","webkit"],h="AnimationFrame",y=v["request"+h],w=v["cancel"+h]||v["cancelRequest"+h],_=0;!y&&_<A.length;_++)y=v[A[_]+"Request"+h],w=v[A[_]+"Cancel"+h]||v[A[_]+"CancelRequest"+h];if(!y||!w){var D=0,k=0,E=[];y=function(g){if(E.length===0){var S=C(),F=Math.max(0,16.666666666666668-(S-D));D=F+S,setTimeout(function(){var x=E.slice(0);E.length=0;for(var O=0;O<x.length;O++)if(!x[O].cancelled)try{x[O].callback(D)}catch(P){setTimeout(function(){throw P},0)}},Math.round(F))}return E.push({handle:++k,callback:g,cancelled:!1}),k},w=function(g){for(var S=0;S<E.length;S++)E[S].handle===g&&(E[S].cancelled=!0)}}s.exports=function(g){return y.call(v,g)},s.exports.cancel=function(){w.apply(v,arguments)},s.exports.polyfill=function(g){g||(g=v),g.requestAnimationFrame=y,g.cancelAnimationFrame=w}}},Q={};function b(s){var c=Q[s];if(c!==void 0)return c.exports;var d=Q[s]={exports:{}};return J[s].call(d.exports,d,d.exports,b),d.exports}b.n=s=>{var c=s&&s.__esModule?()=>s.default:()=>s;return b.d(c,{a:c}),c},b.d=(s,c)=>{for(var d in c)b.o(c,d)&&!b.o(s,d)&&Object.defineProperty(s,d,{enumerable:!0,get:c[d]})},b.g=function(){if(typeof globalThis=="object")return globalThis;try{return this||new Function("return this")()}catch{if(typeof window=="object")return window}}(),b.o=(s,c)=>Object.prototype.hasOwnProperty.call(s,c);var $={};return(()=>{b.d($,{default:()=>ue});var s=b(4087),c=b.n(s);const d=function(o){return new RegExp(/<[a-z][\s\S]*>/i).test(o)},C=function(o){var n=document.createElement("div");return n.innerHTML=o,n.childNodes},v=function(o,n){return Math.floor(Math.random()*(n-o+1))+o};var A="TYPE_CHARACTER",h="REMOVE_CHARACTER",y="REMOVE_ALL",w="REMOVE_LAST_VISIBLE_NODE",_="PAUSE_FOR",D="CALL_FUNCTION",k="ADD_HTML_TAG_ELEMENT",E="CHANGE_DELETE_SPEED",g="CHANGE_DELAY",S="CHANGE_CURSOR",F="PASTE_STRING",x="HTML_TAG";function O(o,n){var a=Object.keys(o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(o);n&&(r=r.filter(function(M){return Object.getOwnPropertyDescriptor(o,M).enumerable})),a.push.apply(a,r)}return a}function P(o){for(var n=1;n<arguments.length;n++){var a=arguments[n]!=null?arguments[n]:{};n%2?O(Object(a),!0).forEach(function(r){l(o,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(a)):O(Object(a)).forEach(function(r){Object.defineProperty(o,r,Object.getOwnPropertyDescriptor(a,r))})}return o}function L(o){return function(n){if(Array.isArray(n))return W(n)}(o)||function(n){if(typeof Symbol<"u"&&n[Symbol.iterator]!=null||n["@@iterator"]!=null)return Array.from(n)}(o)||function(n,a){if(n){if(typeof n=="string")return W(n,a);var r=Object.prototype.toString.call(n).slice(8,-1);return r==="Object"&&n.constructor&&(r=n.constructor.name),r==="Map"||r==="Set"?Array.from(n):r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?W(n,a):void 0}}(o)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function W(o,n){(n==null||n>o.length)&&(n=o.length);for(var a=0,r=new Array(n);a<n;a++)r[a]=o[a];return r}function ie(o,n){for(var a=0;a<n.length;a++){var r=n[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(o,r.key,r)}}function l(o,n,a){return n in o?Object.defineProperty(o,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):o[n]=a,o}const ue=function(){function o(r,M){var e=this;if(function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}(this,o),l(this,"state",{cursorAnimation:null,lastFrameTime:null,pauseUntil:null,eventQueue:[],eventLoop:null,eventLoopPaused:!1,reverseCalledEvents:[],calledEvents:[],visibleNodes:[],initialOptions:null,elements:{container:null,wrapper:document.createElement("span"),cursor:document.createElement("span")}}),l(this,"options",{strings:null,cursor:"|",delay:"natural",pauseFor:1500,deleteSpeed:"natural",loop:!1,autoStart:!1,devMode:!1,skipAddStyles:!1,wrapperClassName:"Typewriter__wrapper",cursorClassName:"Typewriter__cursor",stringSplitter:null,onCreateTextNode:null,onRemoveNode:null}),l(this,"setupWrapperElement",function(){e.state.elements.container&&(e.state.elements.wrapper.className=e.options.wrapperClassName,e.state.elements.cursor.className=e.options.cursorClassName,e.state.elements.cursor.innerHTML=e.options.cursor,e.state.elements.container.innerHTML="",e.state.elements.container.appendChild(e.state.elements.wrapper),e.state.elements.container.appendChild(e.state.elements.cursor))}),l(this,"start",function(){return e.state.eventLoopPaused=!1,e.runEventLoop(),e}),l(this,"pause",function(){return e.state.eventLoopPaused=!0,e}),l(this,"stop",function(){return e.state.eventLoop&&((0,s.cancel)(e.state.eventLoop),e.state.eventLoop=null),e}),l(this,"pauseFor",function(t){return e.addEventToQueue(_,{ms:t}),e}),l(this,"typeOutAllStrings",function(){return typeof e.options.strings=="string"?(e.typeString(e.options.strings).pauseFor(e.options.pauseFor),e):(e.options.strings.forEach(function(t){e.typeString(t).pauseFor(e.options.pauseFor).deleteAll(e.options.deleteSpeed)}),e)}),l(this,"typeString",function(t){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:null;if(d(t))return e.typeOutHTMLString(t,i);if(t){var m=e.options||{},p=m.stringSplitter,u=typeof p=="function"?p(t):t.split("");e.typeCharacters(u,i)}return e}),l(this,"pasteString",function(t){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:null;return d(t)?e.typeOutHTMLString(t,i,!0):(t&&e.addEventToQueue(F,{character:t,node:i}),e)}),l(this,"typeOutHTMLString",function(t){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:null,m=arguments.length>2?arguments[2]:void 0,p=C(t);if(p.length>0)for(var u=0;u<p.length;u++){var T=p[u],R=T.innerHTML;T&&T.nodeType!==3?(T.innerHTML="",e.addEventToQueue(k,{node:T,parentNode:i}),m?e.pasteString(R,T):e.typeString(R,T)):T.textContent&&(m?e.pasteString(T.textContent,i):e.typeString(T.textContent,i))}return e}),l(this,"deleteAll",function(){var t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"natural";return e.addEventToQueue(y,{speed:t}),e}),l(this,"changeDeleteSpeed",function(t){if(!t)throw new Error("Must provide new delete speed");return e.addEventToQueue(E,{speed:t}),e}),l(this,"changeDelay",function(t){if(!t)throw new Error("Must provide new delay");return e.addEventToQueue(g,{delay:t}),e}),l(this,"changeCursor",function(t){if(!t)throw new Error("Must provide new cursor");return e.addEventToQueue(S,{cursor:t}),e}),l(this,"deleteChars",function(t){if(!t)throw new Error("Must provide amount of characters to delete");for(var i=0;i<t;i++)e.addEventToQueue(h);return e}),l(this,"callFunction",function(t,i){if(!t||typeof t!="function")throw new Error("Callbak must be a function");return e.addEventToQueue(D,{cb:t,thisArg:i}),e}),l(this,"typeCharacters",function(t){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:null;if(!t||!Array.isArray(t))throw new Error("Characters must be an array");return t.forEach(function(m){e.addEventToQueue(A,{character:m,node:i})}),e}),l(this,"removeCharacters",function(t){if(!t||!Array.isArray(t))throw new Error("Characters must be an array");return t.forEach(function(){e.addEventToQueue(h)}),e}),l(this,"addEventToQueue",function(t,i){var m=arguments.length>2&&arguments[2]!==void 0&&arguments[2];return e.addEventToStateProperty(t,i,m,"eventQueue")}),l(this,"addReverseCalledEvent",function(t,i){var m=arguments.length>2&&arguments[2]!==void 0&&arguments[2],p=e.options.loop;return p?e.addEventToStateProperty(t,i,m,"reverseCalledEvents"):e}),l(this,"addEventToStateProperty",function(t,i){var m=arguments.length>2&&arguments[2]!==void 0&&arguments[2],p=arguments.length>3?arguments[3]:void 0,u={eventName:t,eventArgs:i||{}};return e.state[p]=m?[u].concat(L(e.state[p])):[].concat(L(e.state[p]),[u]),e}),l(this,"runEventLoop",function(){e.state.lastFrameTime||(e.state.lastFrameTime=Date.now());var t=Date.now(),i=t-e.state.lastFrameTime;if(!e.state.eventQueue.length){if(!e.options.loop)return;e.state.eventQueue=L(e.state.calledEvents),e.state.calledEvents=[],e.options=P({},e.state.initialOptions)}if(e.state.eventLoop=c()(e.runEventLoop),!e.state.eventLoopPaused){if(e.state.pauseUntil){if(t<e.state.pauseUntil)return;e.state.pauseUntil=null}var m,p=L(e.state.eventQueue),u=p.shift();if(!(i<=(m=u.eventName===w||u.eventName===h?e.options.deleteSpeed==="natural"?v(40,80):e.options.deleteSpeed:e.options.delay==="natural"?v(120,160):e.options.delay))){var T=u.eventName,R=u.eventArgs;switch(e.logInDevMode({currentEvent:u,state:e.state,delay:m}),T){case F:case A:var V=R.character,K=R.node,Z=document.createTextNode(V),H=Z;e.options.onCreateTextNode&&typeof e.options.onCreateTextNode=="function"&&(H=e.options.onCreateTextNode(V,Z)),H&&(K?K.appendChild(H):e.state.elements.wrapper.appendChild(H)),e.state.visibleNodes=[].concat(L(e.state.visibleNodes),[{type:"TEXT_NODE",character:V,node:H}]);break;case h:p.unshift({eventName:w,eventArgs:{removingCharacterNode:!0}});break;case _:var le=u.eventArgs.ms;e.state.pauseUntil=Date.now()+parseInt(le);break;case D:var ee=u.eventArgs,pe=ee.cb,ce=ee.thisArg;pe.call(ce,{elements:e.state.elements});break;case k:var te=u.eventArgs,Y=te.node,B=te.parentNode;B?B.appendChild(Y):e.state.elements.wrapper.appendChild(Y),e.state.visibleNodes=[].concat(L(e.state.visibleNodes),[{type:x,node:Y,parentNode:B||e.state.elements.wrapper}]);break;case y:var de=e.state.visibleNodes,G=R.speed,I=[];G&&I.push({eventName:E,eventArgs:{speed:G,temp:!0}});for(var ne=0,fe=de.length;ne<fe;ne++)I.push({eventName:w,eventArgs:{removingCharacterNode:!1}});G&&I.push({eventName:E,eventArgs:{speed:e.options.deleteSpeed,temp:!0}}),p.unshift.apply(p,I);break;case w:var ve=u.eventArgs.removingCharacterNode;if(e.state.visibleNodes.length){var z=e.state.visibleNodes.pop(),me=z.type,q=z.node,he=z.character;e.options.onRemoveNode&&typeof e.options.onRemoveNode=="function"&&e.options.onRemoveNode({node:q,character:he}),q&&q.parentNode.removeChild(q),me===x&&ve&&p.unshift({eventName:w,eventArgs:{}})}break;case E:e.options.deleteSpeed=u.eventArgs.speed;break;case g:e.options.delay=u.eventArgs.delay;break;case S:e.options.cursor=u.eventArgs.cursor,e.state.elements.cursor.innerHTML=u.eventArgs.cursor}e.options.loop&&(u.eventName===w||u.eventArgs&&u.eventArgs.temp||(e.state.calledEvents=[].concat(L(e.state.calledEvents),[u]))),e.state.eventQueue=p,e.state.lastFrameTime=t}}}),r)if(typeof r=="string"){var X=document.querySelector(r);if(!X)throw new Error("Could not find container element");this.state.elements.container=X}else this.state.elements.container=r;M&&(this.options=P(P({},this.options),M)),this.state.initialOptions=P({},this.options),this.init()}var n,a;return n=o,(a=[{key:"init",value:function(){var r,M;this.setupWrapperElement(),this.addEventToQueue(S,{cursor:this.options.cursor},!0),this.addEventToQueue(y,null,!0),!window||window.___TYPEWRITER_JS_STYLES_ADDED___||this.options.skipAddStyles||(r=".Typewriter__cursor{-webkit-animation:Typewriter-cursor 1s infinite;animation:Typewriter-cursor 1s infinite;margin-left:1px}@-webkit-keyframes Typewriter-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes Typewriter-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}",(M=document.createElement("style")).appendChild(document.createTextNode(r)),document.head.appendChild(M),window.___TYPEWRITER_JS_STYLES_ADDED___=!0),this.options.autoStart===!0&&this.options.strings&&this.typeOutAllStrings().start()}},{key:"logInDevMode",value:function(r){this.options.devMode&&console.log(r)}}])&&ie(n.prototype,a),Object.defineProperty(n,"prototype",{writable:!1}),o}()})(),$.default})())})(oe);const ae=re(U);return N.defineComponent({name:"TypeWriter",props:{element:{type:String,default:"span"},strings:{type:Array,default:()=>["Hello","World"]},cursor:{type:String,default:"|"},delay:{type:[Number,String],default:"natural"},deleteSpeed:{type:[Number,String],default:"natural"},loop:{type:Boolean,default:!0},autoStart:{type:Boolean,default:!0},pauseFor:{type:Number,default:1500},devMode:{type:Boolean,default:!1},skipAddStyles:{type:Boolean,default:!1},wrapperClassName:{type:String,default:"Typewriter__wrapper"},cursorClassName:{type:String,default:"Typewriter__cursor"},stringSplitter:{type:Function,default:f=>f.split("")},onCreateTextNode:{type:Function,default:null},onRemoveNode:{type:Function,default:null}},setup(f){return N.onMounted(()=>{new ae("#typewriter",{...f}).start()}),()=>N.h(f.element,{id:"typewriter"},`${f.strings[0]}`)}})});