vue-countup-v3 - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+# [1.3.0](https://github.com/jizai1125/vue-countup-v3/compare/v1.2.0...v1.3.0) (2023-06-21)
+
+
+
 # [1.2.0](https://github.com/jizai1125/vue-countup-v3/compare/v1.1.0...v1.2.0) (2023-05-25)
@@ -2,0 +6,0 @@

dist/vue-countup-v3.es.js

@@ -20,3 +20,3 @@ var __defProp = Object.defineProperty;
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, renderSlot, createElementVNode } from "vue";
+import { ref, defineComponent, watch, onMounted, onUnmounted, openBlock, createElementBlock, renderSlot, createElementVNode } from "vue";
 var t = function() {
@@ -109,2 +109,21 @@ return t = Object.assign || function(t2) {
 }();
+function useRaf(cb, delaySeconds = 1) {
+  const rafId = ref(-1);
+  let startTime;
+  function count(timestamp) {
+    if (!startTime)
+      startTime = timestamp;
+    const diff = timestamp - startTime;
+    if (diff < delaySeconds * 1e3) {
+      rafId.value = requestAnimationFrame(count);
+    } else {
+      cb();
+    }
+  }
+  rafId.value = requestAnimationFrame(count);
+  function cancel() {
+    window.cancelAnimationFrame(rafId.value);
+  }
+  return { cancel };
+}
 const _hoisted_1 = { class: "countup-wrap" };
@@ -130,5 +149,12 @@ const __default__ = {
     let countUp = ref();
-    const initCountUp = () => {
-      if (!elRef.value)
+    let loopCount = 0;
+    const finished = ref(false);
+    let rafCtx;
+    function initCountUp() {
+      if (!elRef.value) {
+        console.warn("[vue-countup-v3]", `elRef can't found`);
         return;
+      }
+      loopCount = 0;
+      finished.value = false;
       const startVal = Number(props.startVal);
@@ -143,28 +169,21 @@ const endVal = Number(props.endVal);
       if (countUp.value.error) {
-        console.error(countUp.value.error);
+        console.error("[vue-countup-v3]", countUp.value.error);
         return;
       }
       emits("init", countUp.value);
-    };
-    const startAnim = (cb) => {
+    }
+    function startAnimation() {
       var _a;
-      (_a = countUp.value) == null ? void 0 : _a.start(cb);
-    };
-    watch(() => props.endVal, (value) => {
-      var _a;
-      if (props.autoplay) {
-        (_a = countUp.value) == null ? void 0 : _a.update(value);
+      if (!countUp.value) {
+        initCountUp();
       }
-    });
-    const finished = ref(false);
-    let loopCount = 0;
-    const loopAnim = () => {
+      (_a = countUp.value) == null ? void 0 : _a.start(_loop);
       loopCount++;
-      startAnim(() => {
+      function _loop() {
         const isTruely = typeof props.loop === "boolean" && props.loop;
         if (isTruely || props.loop > loopCount) {
-          delay(() => {
-            var _a;
-            (_a = countUp.value) == null ? void 0 : _a.reset();
-            loopAnim();
+          rafCtx = useRaf(() => {
+            var _a2;
+            (_a2 = countUp.value) == null ? void 0 : _a2.reset();
+            startAnimation();
           }, props.delay);
@@ -174,4 +193,14 @@ } else {
         }
-      });
-    };
+      }
+    }
+    function restart() {
+      rafCtx == null ? void 0 : rafCtx.cancel();
+      initCountUp();
+      startAnimation();
+    }
+    watch([() => props.startVal, () => props.endVal], () => {
+      if (props.autoplay) {
+        restart();
+      }
+    });
     watch(finished, (flag) => {
@@ -185,3 +214,3 @@ if (flag) {
       if (props.autoplay) {
-        loopAnim();
+        startAnimation();
       }
@@ -191,24 +220,5 @@ });
       var _a;
-      cancelAnimationFrame(dalayRafId);
+      rafCtx == null ? void 0 : rafCtx.cancel();
       (_a = countUp.value) == null ? void 0 : _a.reset();
     });
-    let dalayRafId;
-    const delay = (cb, seconds = 1) => {
-      let startTime;
-      function count(timestamp) {
-        if (!startTime)
-          startTime = timestamp;
-        const diff = timestamp - startTime;
-        if (diff < seconds * 1e3) {
-          dalayRafId = requestAnimationFrame(count);
-        } else {
-          cb();
-        }
-      }
-      dalayRafId = requestAnimationFrame(count);
-    };
-    const restart = () => {
-      initCountUp();
-      startAnim();
-    };
     expose({
@@ -215,0 +225,0 @@ init: initCountUp,

dist/vue-countup-v3.iife.js

@@ -1,1 +0,1 @@
-var D=Object.defineProperty,T=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var S=(i,r,d)=>r in i?D(i,r,{enumerable:!0,configurable:!0,writable:!0,value:d}):i[r]=d,E=(i,r)=>{for(var d in r||(r={}))_.call(r,d)&&S(i,d,r[d]);if(A)for(var d of A(r))P.call(r,d)&&S(i,d,r[d]);return i},b=(i,r)=>T(i,x(r));var VueCountUp=function(i){"use strict";var r=function(){return r=Object.assign||function(l){for(var n,o=1,e=arguments.length;o<e;o++)for(var t in n=arguments[o])Object.prototype.hasOwnProperty.call(n,t)&&(l[t]=n[t]);return l},r.apply(this,arguments)},d=function(){function l(n,o,e){var t=this;this.endVal=o,this.options=e,this.version="2.6.2",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,useIndianSeparators:!1,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200,scrollSpyOnce:!1},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.once=!1,this.count=function(a){t.startTime||(t.startTime=a);var h=a-t.startTime;t.remaining=t.duration-h,t.useEasing?t.countDown?t.frameVal=t.startVal-t.easingFn(h,0,t.startVal-t.endVal,t.duration):t.frameVal=t.easingFn(h,t.startVal,t.endVal-t.startVal,t.duration):t.frameVal=t.startVal+(t.endVal-t.startVal)*(h/t.duration);var p=t.countDown?t.frameVal<t.endVal:t.frameVal>t.endVal;t.frameVal=p?t.endVal:t.frameVal,t.frameVal=Number(t.frameVal.toFixed(t.options.decimalPlaces)),t.printValue(t.frameVal),h<t.duration?t.rAF=requestAnimationFrame(t.count):t.finalEndVal!==null?t.update(t.finalEndVal):t.options.onCompleteCallback&&t.options.onCompleteCallback()},this.formatNumber=function(a){var h,p,c,f,g=a<0?"-":"";h=Math.abs(a).toFixed(t.options.decimalPlaces);var V=(h+="").split(".");if(p=V[0],c=V.length>1?t.options.decimal+V[1]:"",t.options.useGrouping){f="";for(var y=3,w=0,s=0,u=p.length;s<u;++s)t.options.useIndianSeparators&&s===4&&(y=2,w=1),s!==0&&w%y==0&&(f=t.options.separator+f),w++,f=p[u-s-1]+f;p=f}return t.options.numerals&&t.options.numerals.length&&(p=p.replace(/[0-9]/g,function(m){return t.options.numerals[+m]}),c=c.replace(/[0-9]/g,function(m){return t.options.numerals[+m]})),g+t.options.prefix+p+c+t.options.suffix},this.easeOutExpo=function(a,h,p,c){return p*(1-Math.pow(2,-10*a/c))*1024/1023+h},this.options=r(r({},this.defaults),e),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(o),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,this.options.separator===""&&(this.options.useGrouping=!1),this.el=typeof n=="string"?document.getElementById(n):n,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",typeof window!="undefined"&&this.options.enableScrollSpy&&(this.error?console.error(this.error,n):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return t.handleScroll(t)}),window.onscroll=function(){window.onScrollFns.forEach(function(a){return a()})},this.handleScroll(this)))}return l.prototype.handleScroll=function(n){if(n&&window&&!n.once){var o=window.innerHeight+window.scrollY,e=n.el.getBoundingClientRect(),t=e.top+window.pageYOffset,a=e.top+e.height+window.pageYOffset;a<o&&a>window.scrollY&&n.paused?(n.paused=!1,setTimeout(function(){return n.start()},n.options.scrollSpyDelay),n.options.scrollSpyOnce&&(n.once=!0)):(window.scrollY>a||t>o)&&!n.paused&&n.reset()}},l.prototype.determineDirectionAndSmartEasing=function(){var n=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>n;var o=n-this.startVal;if(Math.abs(o)>this.options.smartEasingThreshold&&this.options.useEasing){this.finalEndVal=n;var e=this.countDown?1:-1;this.endVal=n+e*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=n,this.finalEndVal=null;this.finalEndVal!==null?this.useEasing=!1:this.useEasing=this.options.useEasing},l.prototype.start=function(n){this.error||(n&&(this.options.onCompleteCallback=n),this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},l.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},l.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},l.prototype.update=function(n){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(n),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal==null&&this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},l.prototype.printValue=function(n){var o;if(this.el){var e=this.formattingFn(n);!((o=this.options.plugin)===null||o===void 0)&&o.render?this.options.plugin.render(this.el,e):this.el.tagName==="INPUT"?this.el.value=e:this.el.tagName==="text"||this.el.tagName==="tspan"?this.el.textContent=e:this.el.innerHTML=e}},l.prototype.ensureNumber=function(n){return typeof n=="number"&&!isNaN(n)},l.prototype.validateValue=function(n){var o=Number(n);return this.ensureNumber(o)?o:(this.error="[CountUp] invalid start or end value: ".concat(n),null)},l.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},l}();const N={class:"countup-wrap"},C={name:"CountUp"};return i.defineComponent(b(E({},C),{props:{endVal:null,startVal:{default:0},duration:{default:2.5},decimalPlaces:{default:0},autoplay:{type:Boolean,default:!0},loop:{type:[Boolean,Number],default:!1},delay:{default:0},options:{default:void 0}},emits:["init","finished"],setup(l,{expose:n,emit:o}){const e=l;let t=i.ref(),a=i.ref();const h=()=>{if(!t.value)return;const s=Number(e.startVal),u=Number(e.endVal),m=Number(e.duration);if(a.value=new d(t.value,u,E({startVal:s,duration:m,decimalPlaces:e.decimalPlaces},e.options)),a.value.error){console.error(a.value.error);return}o("init",a.value)},p=s=>{var u;(u=a.value)==null||u.start(s)};i.watch(()=>e.endVal,s=>{var u;e.autoplay&&((u=a.value)==null||u.update(s))});const c=i.ref(!1);let f=0;const g=()=>{f++,p(()=>{typeof e.loop=="boolean"&&e.loop||e.loop>f?y(()=>{var u;(u=a.value)==null||u.reset(),g()},e.delay):c.value=!0})};i.watch(c,s=>{s&&o("finished")}),i.onMounted(()=>{h(),e.autoplay&&g()}),i.onUnmounted(()=>{var s;cancelAnimationFrame(V),(s=a.value)==null||s.reset()});let V;const y=(s,u=1)=>{let m;function F(v){m||(m=v),v-m<u*1e3?V=requestAnimationFrame(F):s()}V=requestAnimationFrame(F)};return n({init:h,restart:()=>{h(),p()}}),(s,u)=>(i.openBlock(),i.createElementBlock("div",N,[i.renderSlot(s.$slots,"prefix"),i.createElementVNode("span",{ref_key:"elRef",ref:t},null,512),i.renderSlot(s.$slots,"suffix")]))}}))}(Vue);
+var D=Object.defineProperty,T=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var F=(a,r,c)=>r in a?D(a,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[r]=c,y=(a,r)=>{for(var c in r||(r={}))_.call(r,c)&&F(a,c,r[c]);if(E)for(var c of E(r))P.call(r,c)&&F(a,c,r[c]);return a},A=(a,r)=>T(a,C(r));var VueCountUp=function(a){"use strict";var r=function(){return r=Object.assign||function(o){for(var n,i=1,e=arguments.length;i<e;i++)for(var t in n=arguments[i])Object.prototype.hasOwnProperty.call(n,t)&&(o[t]=n[t]);return o},r.apply(this,arguments)},c=function(){function o(n,i,e){var t=this;this.endVal=i,this.options=e,this.version="2.6.2",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,useIndianSeparators:!1,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200,scrollSpyOnce:!1},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.once=!1,this.count=function(s){t.startTime||(t.startTime=s);var l=s-t.startTime;t.remaining=t.duration-l,t.useEasing?t.countDown?t.frameVal=t.startVal-t.easingFn(l,0,t.startVal-t.endVal,t.duration):t.frameVal=t.easingFn(l,t.startVal,t.endVal-t.startVal,t.duration):t.frameVal=t.startVal+(t.endVal-t.startVal)*(l/t.duration);var u=t.countDown?t.frameVal<t.endVal:t.frameVal>t.endVal;t.frameVal=u?t.endVal:t.frameVal,t.frameVal=Number(t.frameVal.toFixed(t.options.decimalPlaces)),t.printValue(t.frameVal),l<t.duration?t.rAF=requestAnimationFrame(t.count):t.finalEndVal!==null?t.update(t.finalEndVal):t.options.onCompleteCallback&&t.options.onCompleteCallback()},this.formatNumber=function(s){var l,u,h,d,g=s<0?"-":"";l=Math.abs(s).toFixed(t.options.decimalPlaces);var V=(l+="").split(".");if(u=V[0],h=V.length>1?t.options.decimal+V[1]:"",t.options.useGrouping){d="";for(var p=3,f=0,m=0,w=u.length;m<w;++m)t.options.useIndianSeparators&&m===4&&(p=2,f=1),m!==0&&f%p==0&&(d=t.options.separator+d),f++,d=u[w-m-1]+d;u=d}return t.options.numerals&&t.options.numerals.length&&(u=u.replace(/[0-9]/g,function(v){return t.options.numerals[+v]}),h=h.replace(/[0-9]/g,function(v){return t.options.numerals[+v]})),g+t.options.prefix+u+h+t.options.suffix},this.easeOutExpo=function(s,l,u,h){return u*(1-Math.pow(2,-10*s/h))*1024/1023+l},this.options=r(r({},this.defaults),e),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,this.options.separator===""&&(this.options.useGrouping=!1),this.el=typeof n=="string"?document.getElementById(n):n,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",typeof window!="undefined"&&this.options.enableScrollSpy&&(this.error?console.error(this.error,n):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return t.handleScroll(t)}),window.onscroll=function(){window.onScrollFns.forEach(function(s){return s()})},this.handleScroll(this)))}return o.prototype.handleScroll=function(n){if(n&&window&&!n.once){var i=window.innerHeight+window.scrollY,e=n.el.getBoundingClientRect(),t=e.top+window.pageYOffset,s=e.top+e.height+window.pageYOffset;s<i&&s>window.scrollY&&n.paused?(n.paused=!1,setTimeout(function(){return n.start()},n.options.scrollSpyDelay),n.options.scrollSpyOnce&&(n.once=!0)):(window.scrollY>s||t>i)&&!n.paused&&n.reset()}},o.prototype.determineDirectionAndSmartEasing=function(){var n=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>n;var i=n-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold&&this.options.useEasing){this.finalEndVal=n;var e=this.countDown?1:-1;this.endVal=n+e*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=n,this.finalEndVal=null;this.finalEndVal!==null?this.useEasing=!1:this.useEasing=this.options.useEasing},o.prototype.start=function(n){this.error||(n&&(this.options.onCompleteCallback=n),this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},o.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},o.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},o.prototype.update=function(n){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(n),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal==null&&this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},o.prototype.printValue=function(n){var i;if(this.el){var e=this.formattingFn(n);!((i=this.options.plugin)===null||i===void 0)&&i.render?this.options.plugin.render(this.el,e):this.el.tagName==="INPUT"?this.el.value=e:this.el.tagName==="text"||this.el.tagName==="tspan"?this.el.textContent=e:this.el.innerHTML=e}},o.prototype.ensureNumber=function(n){return typeof n=="number"&&!isNaN(n)},o.prototype.validateValue=function(n){var i=Number(n);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: ".concat(n),null)},o.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},o}();function S(o,n=1){const i=a.ref(-1);let e;function t(l){e||(e=l),l-e<n*1e3?i.value=requestAnimationFrame(t):o()}i.value=requestAnimationFrame(t);function s(){window.cancelAnimationFrame(i.value)}return{cancel:s}}const b={class:"countup-wrap"},N={name:"CountUp"};return a.defineComponent(A(y({},N),{props:{endVal:null,startVal:{default:0},duration:{default:2.5},decimalPlaces:{default:0},autoplay:{type:Boolean,default:!0},loop:{type:[Boolean,Number],default:!1},delay:{default:0},options:{default:void 0}},emits:["init","finished"],setup(o,{expose:n,emit:i}){const e=o;let t=a.ref(),s=a.ref(),l=0;const u=a.ref(!1);let h;function d(){if(!t.value){console.warn("[vue-countup-v3]","elRef can't found");return}l=0,u.value=!1;const p=Number(e.startVal),f=Number(e.endVal),m=Number(e.duration);if(s.value=new c(t.value,f,y({startVal:p,duration:m,decimalPlaces:e.decimalPlaces},e.options)),s.value.error){console.error("[vue-countup-v3]",s.value.error);return}i("init",s.value)}function g(){var f;s.value||d(),(f=s.value)==null||f.start(p),l++;function p(){typeof e.loop=="boolean"&&e.loop||e.loop>l?h=S(()=>{var w;(w=s.value)==null||w.reset(),g()},e.delay):u.value=!0}}function V(){h==null||h.cancel(),d(),g()}return a.watch([()=>e.startVal,()=>e.endVal],()=>{e.autoplay&&V()}),a.watch(u,p=>{p&&i("finished")}),a.onMounted(()=>{d(),e.autoplay&&g()}),a.onUnmounted(()=>{var p;h==null||h.cancel(),(p=s.value)==null||p.reset()}),n({init:d,restart:V}),(p,f)=>(a.openBlock(),a.createElementBlock("div",b,[a.renderSlot(p.$slots,"prefix"),a.createElementVNode("span",{ref_key:"elRef",ref:t},null,512),a.renderSlot(p.$slots,"suffix")]))}}))}(Vue);

dist/vue-countup-v3.umd.js

@@ -1,1 +0,1 @@
-var C=Object.defineProperty,D=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var S=(n,o,d)=>o in n?C(n,o,{enumerable:!0,configurable:!0,writable:!0,value:d}):n[o]=d,E=(n,o)=>{for(var d in o||(o={}))_.call(o,d)&&S(n,d,o[d]);if(A)for(var d of A(o))P.call(o,d)&&S(n,d,o[d]);return n},b=(n,o)=>D(n,x(o));(function(n,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(n=typeof globalThis!="undefined"?globalThis:n||self,n.VueCountUp=o(n.Vue))})(this,function(n){"use strict";var o=function(){return o=Object.assign||function(l){for(var e,r=1,i=arguments.length;r<i;r++)for(var t in e=arguments[r])Object.prototype.hasOwnProperty.call(e,t)&&(l[t]=e[t]);return l},o.apply(this,arguments)},d=function(){function l(e,r,i){var t=this;this.endVal=r,this.options=i,this.version="2.6.2",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,useIndianSeparators:!1,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200,scrollSpyOnce:!1},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.once=!1,this.count=function(a){t.startTime||(t.startTime=a);var h=a-t.startTime;t.remaining=t.duration-h,t.useEasing?t.countDown?t.frameVal=t.startVal-t.easingFn(h,0,t.startVal-t.endVal,t.duration):t.frameVal=t.easingFn(h,t.startVal,t.endVal-t.startVal,t.duration):t.frameVal=t.startVal+(t.endVal-t.startVal)*(h/t.duration);var p=t.countDown?t.frameVal<t.endVal:t.frameVal>t.endVal;t.frameVal=p?t.endVal:t.frameVal,t.frameVal=Number(t.frameVal.toFixed(t.options.decimalPlaces)),t.printValue(t.frameVal),h<t.duration?t.rAF=requestAnimationFrame(t.count):t.finalEndVal!==null?t.update(t.finalEndVal):t.options.onCompleteCallback&&t.options.onCompleteCallback()},this.formatNumber=function(a){var h,p,f,c,g=a<0?"-":"";h=Math.abs(a).toFixed(t.options.decimalPlaces);var V=(h+="").split(".");if(p=V[0],f=V.length>1?t.options.decimal+V[1]:"",t.options.useGrouping){c="";for(var y=3,w=0,s=0,u=p.length;s<u;++s)t.options.useIndianSeparators&&s===4&&(y=2,w=1),s!==0&&w%y==0&&(c=t.options.separator+c),w++,c=p[u-s-1]+c;p=c}return t.options.numerals&&t.options.numerals.length&&(p=p.replace(/[0-9]/g,function(m){return t.options.numerals[+m]}),f=f.replace(/[0-9]/g,function(m){return t.options.numerals[+m]})),g+t.options.prefix+p+f+t.options.suffix},this.easeOutExpo=function(a,h,p,f){return p*(1-Math.pow(2,-10*a/f))*1024/1023+h},this.options=o(o({},this.defaults),i),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(r),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,this.options.separator===""&&(this.options.useGrouping=!1),this.el=typeof e=="string"?document.getElementById(e):e,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",typeof window!="undefined"&&this.options.enableScrollSpy&&(this.error?console.error(this.error,e):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return t.handleScroll(t)}),window.onscroll=function(){window.onScrollFns.forEach(function(a){return a()})},this.handleScroll(this)))}return l.prototype.handleScroll=function(e){if(e&&window&&!e.once){var r=window.innerHeight+window.scrollY,i=e.el.getBoundingClientRect(),t=i.top+window.pageYOffset,a=i.top+i.height+window.pageYOffset;a<r&&a>window.scrollY&&e.paused?(e.paused=!1,setTimeout(function(){return e.start()},e.options.scrollSpyDelay),e.options.scrollSpyOnce&&(e.once=!0)):(window.scrollY>a||t>r)&&!e.paused&&e.reset()}},l.prototype.determineDirectionAndSmartEasing=function(){var e=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>e;var r=e-this.startVal;if(Math.abs(r)>this.options.smartEasingThreshold&&this.options.useEasing){this.finalEndVal=e;var i=this.countDown?1:-1;this.endVal=e+i*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=e,this.finalEndVal=null;this.finalEndVal!==null?this.useEasing=!1:this.useEasing=this.options.useEasing},l.prototype.start=function(e){this.error||(e&&(this.options.onCompleteCallback=e),this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},l.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},l.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},l.prototype.update=function(e){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(e),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal==null&&this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},l.prototype.printValue=function(e){var r;if(this.el){var i=this.formattingFn(e);!((r=this.options.plugin)===null||r===void 0)&&r.render?this.options.plugin.render(this.el,i):this.el.tagName==="INPUT"?this.el.value=i:this.el.tagName==="text"||this.el.tagName==="tspan"?this.el.textContent=i:this.el.innerHTML=i}},l.prototype.ensureNumber=function(e){return typeof e=="number"&&!isNaN(e)},l.prototype.validateValue=function(e){var r=Number(e);return this.ensureNumber(r)?r:(this.error="[CountUp] invalid start or end value: ".concat(e),null)},l.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},l}();const N={class:"countup-wrap"},T={name:"CountUp"};return n.defineComponent(b(E({},T),{props:{endVal:null,startVal:{default:0},duration:{default:2.5},decimalPlaces:{default:0},autoplay:{type:Boolean,default:!0},loop:{type:[Boolean,Number],default:!1},delay:{default:0},options:{default:void 0}},emits:["init","finished"],setup(l,{expose:e,emit:r}){const i=l;let t=n.ref(),a=n.ref();const h=()=>{if(!t.value)return;const s=Number(i.startVal),u=Number(i.endVal),m=Number(i.duration);if(a.value=new d(t.value,u,E({startVal:s,duration:m,decimalPlaces:i.decimalPlaces},i.options)),a.value.error){console.error(a.value.error);return}r("init",a.value)},p=s=>{var u;(u=a.value)==null||u.start(s)};n.watch(()=>i.endVal,s=>{var u;i.autoplay&&((u=a.value)==null||u.update(s))});const f=n.ref(!1);let c=0;const g=()=>{c++,p(()=>{typeof i.loop=="boolean"&&i.loop||i.loop>c?y(()=>{var u;(u=a.value)==null||u.reset(),g()},i.delay):f.value=!0})};n.watch(f,s=>{s&&r("finished")}),n.onMounted(()=>{h(),i.autoplay&&g()}),n.onUnmounted(()=>{var s;cancelAnimationFrame(V),(s=a.value)==null||s.reset()});let V;const y=(s,u=1)=>{let m;function F(v){m||(m=v),v-m<u*1e3?V=requestAnimationFrame(F):s()}V=requestAnimationFrame(F)};return e({init:h,restart:()=>{h(),p()}}),(s,u)=>(n.openBlock(),n.createElementBlock("div",N,[n.renderSlot(s.$slots,"prefix"),n.createElementVNode("span",{ref_key:"elRef",ref:t},null,512),n.renderSlot(s.$slots,"suffix")]))}}))});
+var T=Object.defineProperty,D=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var F=(i,o,d)=>o in i?T(i,o,{enumerable:!0,configurable:!0,writable:!0,value:d}):i[o]=d,v=(i,o)=>{for(var d in o||(o={}))_.call(o,d)&&F(i,d,o[d]);if(E)for(var d of E(o))x.call(o,d)&&F(i,d,o[d]);return i},A=(i,o)=>D(i,C(o));(function(i,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(i=typeof globalThis!="undefined"?globalThis:i||self,i.VueCountUp=o(i.Vue))})(this,function(i){"use strict";var o=function(){return o=Object.assign||function(r){for(var e,a=1,n=arguments.length;a<n;a++)for(var t in e=arguments[a])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},o.apply(this,arguments)},d=function(){function r(e,a,n){var t=this;this.endVal=a,this.options=n,this.version="2.6.2",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,useIndianSeparators:!1,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200,scrollSpyOnce:!1},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.once=!1,this.count=function(s){t.startTime||(t.startTime=s);var l=s-t.startTime;t.remaining=t.duration-l,t.useEasing?t.countDown?t.frameVal=t.startVal-t.easingFn(l,0,t.startVal-t.endVal,t.duration):t.frameVal=t.easingFn(l,t.startVal,t.endVal-t.startVal,t.duration):t.frameVal=t.startVal+(t.endVal-t.startVal)*(l/t.duration);var u=t.countDown?t.frameVal<t.endVal:t.frameVal>t.endVal;t.frameVal=u?t.endVal:t.frameVal,t.frameVal=Number(t.frameVal.toFixed(t.options.decimalPlaces)),t.printValue(t.frameVal),l<t.duration?t.rAF=requestAnimationFrame(t.count):t.finalEndVal!==null?t.update(t.finalEndVal):t.options.onCompleteCallback&&t.options.onCompleteCallback()},this.formatNumber=function(s){var l,u,h,c,g=s<0?"-":"";l=Math.abs(s).toFixed(t.options.decimalPlaces);var V=(l+="").split(".");if(u=V[0],h=V.length>1?t.options.decimal+V[1]:"",t.options.useGrouping){c="";for(var p=3,f=0,m=0,w=u.length;m<w;++m)t.options.useIndianSeparators&&m===4&&(p=2,f=1),m!==0&&f%p==0&&(c=t.options.separator+c),f++,c=u[w-m-1]+c;u=c}return t.options.numerals&&t.options.numerals.length&&(u=u.replace(/[0-9]/g,function(y){return t.options.numerals[+y]}),h=h.replace(/[0-9]/g,function(y){return t.options.numerals[+y]})),g+t.options.prefix+u+h+t.options.suffix},this.easeOutExpo=function(s,l,u,h){return u*(1-Math.pow(2,-10*s/h))*1024/1023+l},this.options=o(o({},this.defaults),n),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(a),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,this.options.separator===""&&(this.options.useGrouping=!1),this.el=typeof e=="string"?document.getElementById(e):e,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",typeof window!="undefined"&&this.options.enableScrollSpy&&(this.error?console.error(this.error,e):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return t.handleScroll(t)}),window.onscroll=function(){window.onScrollFns.forEach(function(s){return s()})},this.handleScroll(this)))}return r.prototype.handleScroll=function(e){if(e&&window&&!e.once){var a=window.innerHeight+window.scrollY,n=e.el.getBoundingClientRect(),t=n.top+window.pageYOffset,s=n.top+n.height+window.pageYOffset;s<a&&s>window.scrollY&&e.paused?(e.paused=!1,setTimeout(function(){return e.start()},e.options.scrollSpyDelay),e.options.scrollSpyOnce&&(e.once=!0)):(window.scrollY>s||t>a)&&!e.paused&&e.reset()}},r.prototype.determineDirectionAndSmartEasing=function(){var e=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>e;var a=e-this.startVal;if(Math.abs(a)>this.options.smartEasingThreshold&&this.options.useEasing){this.finalEndVal=e;var n=this.countDown?1:-1;this.endVal=e+n*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=e,this.finalEndVal=null;this.finalEndVal!==null?this.useEasing=!1:this.useEasing=this.options.useEasing},r.prototype.start=function(e){this.error||(e&&(this.options.onCompleteCallback=e),this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},r.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},r.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},r.prototype.update=function(e){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(e),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal==null&&this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},r.prototype.printValue=function(e){var a;if(this.el){var n=this.formattingFn(e);!((a=this.options.plugin)===null||a===void 0)&&a.render?this.options.plugin.render(this.el,n):this.el.tagName==="INPUT"?this.el.value=n:this.el.tagName==="text"||this.el.tagName==="tspan"?this.el.textContent=n:this.el.innerHTML=n}},r.prototype.ensureNumber=function(e){return typeof e=="number"&&!isNaN(e)},r.prototype.validateValue=function(e){var a=Number(e);return this.ensureNumber(a)?a:(this.error="[CountUp] invalid start or end value: ".concat(e),null)},r.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},r}();function S(r,e=1){const a=i.ref(-1);let n;function t(l){n||(n=l),l-n<e*1e3?a.value=requestAnimationFrame(t):r()}a.value=requestAnimationFrame(t);function s(){window.cancelAnimationFrame(a.value)}return{cancel:s}}const b={class:"countup-wrap"},N={name:"CountUp"};return i.defineComponent(A(v({},N),{props:{endVal:null,startVal:{default:0},duration:{default:2.5},decimalPlaces:{default:0},autoplay:{type:Boolean,default:!0},loop:{type:[Boolean,Number],default:!1},delay:{default:0},options:{default:void 0}},emits:["init","finished"],setup(r,{expose:e,emit:a}){const n=r;let t=i.ref(),s=i.ref(),l=0;const u=i.ref(!1);let h;function c(){if(!t.value){console.warn("[vue-countup-v3]","elRef can't found");return}l=0,u.value=!1;const p=Number(n.startVal),f=Number(n.endVal),m=Number(n.duration);if(s.value=new d(t.value,f,v({startVal:p,duration:m,decimalPlaces:n.decimalPlaces},n.options)),s.value.error){console.error("[vue-countup-v3]",s.value.error);return}a("init",s.value)}function g(){var f;s.value||c(),(f=s.value)==null||f.start(p),l++;function p(){typeof n.loop=="boolean"&&n.loop||n.loop>l?h=S(()=>{var w;(w=s.value)==null||w.reset(),g()},n.delay):u.value=!0}}function V(){h==null||h.cancel(),c(),g()}return i.watch([()=>n.startVal,()=>n.endVal],()=>{n.autoplay&&V()}),i.watch(u,p=>{p&&a("finished")}),i.onMounted(()=>{c(),n.autoplay&&g()}),i.onUnmounted(()=>{var p;h==null||h.cancel(),(p=s.value)==null||p.reset()}),e({init:c,restart:V}),(p,f)=>(i.openBlock(),i.createElementBlock("div",b,[i.renderSlot(p.$slots,"prefix"),i.createElementVNode("span",{ref_key:"elRef",ref:t},null,512),i.renderSlot(p.$slots,"suffix")]))}}))});

package.json

 {
   "name": "vue-countup-v3",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Vue 3 component wrap for countUp.js，and expand some features.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -116,5 +116,29 @@ # vue-countup-v3 [![npm](https://img.shields.io/npm/v/vue-countup-v3?color=green)](https://www.npmjs.com/package/vue-countup-v3) ![](https://img.shields.io/bundlephobia/min/vue-countup-v3)
 ```
+</details>
 
+<details>
+<summary><strong>在 Nuxt 中使用（usage in Nuxt）</strong></summary>
+需在 nuxt.config.ts 中添加配置
+
+```ts
+// nuxt.config.ts
+import { defineNuxtConfig } from 'nuxt3';
+
+export default defineNuxtConfig({
+  build: {
+    transpile: ['vue-countup-v3'],
+  },
+});
+```
 </details>
 
+<details>
+<summary><strong>在 Astro 中使用（usage in Astro)</strong></summary>
+需要在组件上加个指令 client:only
+
+```vue
+<CountUp client:load client:only end-val={2000} />
+```
+</details>
+
 ## 属性（Properties）
@@ -121,0 +145,0 @@

No alert changes

Improved metrics

Total package byte prevSize

42089

3.44%

Number of package files

8

14.29%

Lines of code

404

4.12%

Number of lines in readme file

244

10.91%

No dependency changes