vue-typical/dist/vue-typical.es.js

Vue Animated typing in ~400 bytes 🐡 of JavaScript.

import{defineComponent as t,h as e,ref as n,onMounted as o}from"vue";async function a(t,...e){for(const n of e)switch(typeof n){case"string":await r(t,n);break;case"number":await i(n);break;case"function":await n(t,...e);break;default:await n}}async function r(t,e){const n=function(t,[...e]){return[...t,NaN].findIndex(((t,n)=>e[n]!==t))}(t.textContent,e);await async function(t,e,n=60){for(const o of function*(t){for(const e of t)yield t=>requestAnimationFrame((()=>t.textContent=e))}(e))o(t),await i(n+n*(Math.random()-.5))}(t,[...s(t.textContent,n),...f(e,n)])}async function i(t){await new Promise((e=>setTimeout(e,t)))}function*f([...t],e=0,n=t.length){for(;e<n;)yield t.slice(0,++e).join("")}function*s([...t],e=0,n=t.length){for(;n>e;)yield t.slice(0,--n).join("")}const c=a;var u=t({name:"Typical",props:{steps:{type:Array,required:!0},wrapper:{type:String,default:"div"},loop:{type:Number,default:1}},render(){return e(this.wrapper,{ref:"myRef"})},setup:({steps:t,loop:e})=>{const r=n(null);return o((()=>{const n=r.value;e===1/0?a(n,...t,c):"number"==typeof e&&e>0?a(n,...Array(e).fill(t).flat()):a(n,...t)})),{myRef:r}}});export default u;export{u as VTypical};