maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 2.56 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{createElementBlock,createElementVNode,createTextVNode,defineComponent,onBeforeUnmount,onMounted,openBlock,ref,renderSlot,toDisplayString,watch}from"vue";import{isClient}from"@maz-ui/utils/helpers/isClient";import '../assets/MazAnimatedCounter.BKRZiS30.css';var _hoisted_1={class:`maz-sr-only`};var MazAnimatedCounter_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazAnimatedCounter`,props:{count:{},duration:{default:1e3},prefix:{},suffix:{},delay:{default:100},once:{type:Boolean,default:!0}},setup(__props){let currentCount=ref(0);let elementRef=ref(null);function getRequestAnimationFrame(){return!isClient()||!globalThis.requestAnimationFrame?callback=>(setTimeout(callback,1e3/60),0):globalThis.requestAnimationFrame.bind(globalThis)}function animate(start,end,duration,delay){let requestAnim=getRequestAnimationFrame();currentCount.value=start,isClient()&&setTimeout(()=>{let startTime=performance.now();let updateCount=(currentTime=performance.now())=>{let elapsed=currentTime-startTime;let progress=Math.min(elapsed/duration,1);currentCount.value=Math.round(start+(end-start)*(t=>t*(2-t))(progress)),progress<1&&requestAnim(updateCount)};requestAnim(updateCount)},delay)}function startAnimation(start,end){animate(start,end,__props.duration,__props.delay)}let observer=null;return onMounted(()=>{__props.once||(observer=new IntersectionObserver(([entry])=>{entry.isIntersecting&&(startAnimation(0,__props.count),__props.once&&observer?.unobserve(entry.target))}),elementRef.value&&observer.observe(elementRef.value))}),onBeforeUnmount(()=>observer?.disconnect()),watch(()=>__props.count,(newCount,oldCount)=>{newCount!==oldCount&&startAnimation(oldCount??0,newCount)},{immediate:!0}),(_ctx,_cache)=>(openBlock(),createElementBlock(`span`,{ref_key:`elementRef`,ref:elementRef,class:`m-animated-counter m-reset-css`},[createElementVNode(`span`,_hoisted_1,[renderSlot(_ctx.$slots,`prefix`,{},()=>[createTextVNode(toDisplayString(__props.prefix),1)],!0),createTextVNode(toDisplayString(__props.count),1),renderSlot(_ctx.$slots,`suffix`,{},()=>[createTextVNode(toDisplayString(__props.suffix),1)],!0)]),renderSlot(_ctx.$slots,`prefix`,{},()=>[createTextVNode(toDisplayString(__props.prefix),1)],!0),createTextVNode(toDisplayString(currentCount.value),1),renderSlot(_ctx.$slots,`suffix`,{},()=>[createTextVNode(toDisplayString(__props.suffix),1)],!0)],512))}}),[[`__scopeId`,`data-v-fb4175f1`]]);export{MazAnimatedCounter_default as t};