maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.17 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,defineComponent,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,renderList,resolveDynamicComponent,toDisplayString,withCtx}from"vue";import{checkAvailability}from"@maz-ui/utils/helpers/checkAvailability";import '../assets/MazAnimatedText.DlMKT0fR.css';var _hoisted_1={class:`m-animated-text__last-word-inner`};var _hoisted_2={class:`m-animated-text__last-word-inner-text`};var MazAnimatedText_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazAnimatedText`,props:{text:{},lastWord:{},delay:{default:0},direction:{default:`up`},tag:{default:`span`},wordDelay:{default:75},columnGap:{default:.5},rowGap:{default:0},duration:{default:2e3},once:{type:Boolean,default:!0},gradientFrom:{default:`primary`},gradientVia:{default:`info`},gradientTo:{default:`secondary`}},setup(__props){let words=computed(()=>__props.text.split(` `));let wordCount=computed(()=>words.value.length);let isVisible=ref(!1);let isClient=ref(!1);let animatedWords=ref([]);let element=ref();let observer=null;let animationFrameId=null;function triggerWordAnimations(){let totalWords=words.value.length+ +!!__props.lastWord;animatedWords.value=Array.from({length:totalWords},()=>!1);let currentIndex=0;let animateNextWord=()=>{currentIndex<totalWords&&requestAnimationFrame(()=>{animatedWords.value[currentIndex]=!0,currentIndex++,currentIndex<totalWords&&(animationFrameId=setTimeout(animateNextWord,__props.wordDelay))})};setTimeout(animateNextWord,__props.delay)}onMounted(()=>{isClient.value=!0,observer=new IntersectionObserver(([entry])=>{entry.isIntersecting&&!isVisible.value&&(isVisible.value=!0,nextTick(()=>{triggerWordAnimations()}),__props.once&&element.value&&observer?.unobserve(element.value))}),checkAvailability(()=>element.value,element=>{observer?.observe(element)})}),onBeforeUnmount(()=>{observer?.disconnect(),animationFrameId&&clearTimeout(animationFrameId)});let gradientStyle=computed(()=>{if(__props.lastWord)return`linear-gradient(to right, ${[`hsl(var(--maz-${__props.gradientFrom}))`,...__props.gradientVia?[`hsl(var(--maz-${__props.gradientVia}))`]:[],`hsl(var(--maz-${__props.gradientTo}))`].join(`, `)})`});return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:`m-reset-css m-animated-text`,style:normalizeStyle({"--maz-gradient-style":gradientStyle.value})},[isClient.value?(openBlock(),createBlock(resolveDynamicComponent(__props.tag),mergeProps({key:0,ref_key:`element`,ref:element},_ctx.$attrs,{class:`m-animated-text__root`,style:{columnGap:`${__props.columnGap}rem`,rowGap:`${__props.rowGap}rem`}}),{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(words.value,(word,index)=>(openBlock(),createElementBlock(`span`,{key:word+index,class:`m-animated-text__word`},[createElementVNode(`span`,{class:normalizeClass([`m-animated-text__word-inner`,animatedWords.value[index]?`maz-animate-slide-${__props.direction}-blur`:`maz-invisible`]),style:normalizeStyle({animationDuration:`${__props.duration}ms`})},toDisplayString(word),7)]))),128)),__props.lastWord?(openBlock(),createElementBlock(`span`,{key:0,class:normalizeClass([`m-animated-text__last-word`,animatedWords.value[wordCount.value]?`maz-animate-slide-${__props.direction}-blur`:`maz-invisible`]),style:normalizeStyle({animationDuration:`${__props.duration}ms`})},[createElementVNode(`span`,_hoisted_1,[createElementVNode(`span`,_hoisted_2,toDisplayString(__props.lastWord),1)])],6)):createCommentVNode(``,!0)]),_:1},16,[`style`])):(openBlock(),createBlock(resolveDynamicComponent(__props.tag),mergeProps({key:1},_ctx.$attrs,{class:`maz-invisible maz-inline-flex`}),{default:withCtx(()=>[createTextVNode(toDisplayString(__props.text)+` `,1),__props.lastWord?(openBlock(),createElementBlock(Fragment,{key:0},[createTextVNode(toDisplayString(__props.lastWord),1)],64)):createCommentVNode(``,!0)]),_:1},16))],4))}}),[[`__scopeId`,`data-v-a56c3360`]]);export{MazAnimatedText_default as t};