@number-flow/vue
Version:
A component to transition and format numbers.
2 lines (1 loc) • 3.32 kB
JavaScript
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("number-flow/lite"),require("number-flow/plugins"),require("esm-env")):typeof define=="function"&&define.amd?define(["exports","vue","number-flow/lite","number-flow/plugins","esm-env"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t["number-flow-vue"]={},t.Vue,t.NumberFlowLite,t.plugins,t.Env))})(this,function(t,e,n,p,h){"use strict";const g=Symbol(),T=e.defineComponent({__name:"NumberFlowGroup",setup(i){const f=new Set;let d=!1;const r=(o,l)=>{f.add(o),e.watch(l,async()=>{d||(d=!0,f.forEach(async a=>{var u;!a.value||!a.value.created||(a.value.willUpdate(),await e.nextTick(),(u=a.value)==null||u.didUpdate())}),await e.nextTick(),d=!1)}),e.onUnmounted(()=>{f.delete(o)})};return e.provide(g,r),(o,l)=>e.renderSlot(o.$slots,"default")}}),y=["batched","trend","plugins","animated","transformTiming","spinTiming","opacityTiming","respectMotionPreference","data-will-change","digits","innerHTML","data"],P=e.defineComponent({inheritAttrs:!1,__name:"index",props:{transformTiming:{default:()=>n.defaultProps.transformTiming},spinTiming:{default:()=>n.defaultProps.spinTiming},opacityTiming:{default:()=>n.defaultProps.opacityTiming},animated:{type:Boolean,default:()=>n.defaultProps.animated},respectMotionPreference:{type:Boolean,default:()=>n.defaultProps.respectMotionPreference},trend:{type:[Number,Function],default:()=>n.defaultProps.trend},plugins:{default:()=>n.defaultProps.plugins},digits:{default:()=>n.defaultProps.digits},locales:{},format:{},value:{},prefix:{},suffix:{},willChange:{type:Boolean,default:!1}},emits:["animationsstart","animationsfinish"],setup(i,{expose:f,emit:d}){const r=e.ref();f({el:r});const o=d,l=e.computed(()=>new Intl.NumberFormat(i.locales,i.format)),a=e.computed(()=>n.formatToData(i.value,l.value,i.prefix,i.suffix)),u=h.BROWSER?void 0:n.renderInnerHTML(a.value),m=e.inject(g,void 0);return m==null||m(r,a),(s,c)=>(e.openBlock(),e.createElementBlock("number-flow-vue",e.mergeProps({ref_key:"el",ref:r},s.$attrs,{batched:!!e.unref(m),trend:s.trend,plugins:s.plugins,animated:s.animated,transformTiming:s.transformTiming,spinTiming:s.spinTiming,opacityTiming:s.opacityTiming,respectMotionPreference:s.respectMotionPreference,"data-will-change":s.willChange?"":void 0,digits:s.digits,innerHTML:e.unref(u),"data-allow-mismatch":"",onAnimationsstart:c[0]||(c[0]=v=>o("animationsstart")),onAnimationsfinish:c[1]||(c[1]=v=>o("animationsfinish")),data:a.value}),null,16,y))}});n.define("number-flow-vue",n);function M({respectMotionPreference:i=!0}={}){const f=e.ref(!1),d=e.ref(!1);return e.onMounted(()=>{var r;f.value=n.canAnimate,d.value=((r=n.prefersReducedMotion)==null?void 0:r.matches)??!1}),e.watchEffect(r=>{var l;if(!e.toValue(i))return;const o=({matches:a})=>{d.value=a};(l=n.prefersReducedMotion)==null||l.addEventListener("change",o),r(()=>{var a;(a=n.prefersReducedMotion)==null||a.removeEventListener("change",o)})}),e.computed(()=>f.value&&(!e.toValue(i)||!d.value))}t.NumberFlowElement=n,t.NumberFlowGroup=T,t.default=P,t.useCanAnimate=M,Object.keys(p).forEach(i=>{i!=="default"&&!Object.prototype.hasOwnProperty.call(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:()=>p[i]})}),Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});