vue-awesome-countdown
Version:
Countdown plug-in with high performance and high accuracy for Vue 2.5.0+ and Vue 3, with TypeScript support.
2 lines (1 loc) • 8.79 kB
JavaScript
(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.VueAwesomeCountdown={},f.Vue))})(this,function(f,t){"use strict";const k=(e,n)=>{const r=e.__vccOpts||e;for(const[a,i]of n)r[a]=i;return r},z={name:"vue-awesome-countdown",props:{startTime:{type:[String,Number,Date],default:null,validator:function(e){return new Date(e).toString()!=="Invalid Date"}},endTime:{type:[String,Number,Date],default:null,validator:function(e){return new Date(e).toString()!=="Invalid Date"}},leftTime:{type:Number,default:0},autoStart:{type:Boolean,default:!0},speed:{type:Number,default:1e3,validator:function(e){return e>=0}},tag:{type:String,default:"span"}},computed:{thousandSpeed(){return this.speed>0&&this.speed%1e3===0}},data:function(){return{state:"beforeStart",attrs:{},actualStartTime:null,actualEndTime:null,timeObj:{},countdownTimer:null,runTimes:0,usedTime:0,remainingTime:0}},watch:{speed(e,n){const r=this;if(e<0&&(e=0),e!==n){clearTimeout(r.countdownTimer);const a=Date.now(),i=Math.floor((a-r.actualStartTime)/e),o=a%e;r.runTimes=i,r.$nextTick(()=>{r.countdownTimer=setTimeout(r.doCountdown,o)})}}},created(){const e=this,n=e.startTime&&new Date(e.startTime).getTime()||0,r=n&&n-Date.now()||0;e.autoStart&&(e.state="preheat",setTimeout(()=>{e.startCountdown(!0)},r))},beforeDestroy(){this.countdownTimer&&clearTimeout(this.countdownTimer)},methods:{startCountdown(e){const n=this;n.state!=="beforeStart"&&n.state!=="stopped"&&n.state!=="paused"&&!e||(e&&Object.assign(n.$data,n.$options.data.call(n)),n.state==="stopped"&&(n.remainingTime=n.actualEndTime-Date.now()),n.actualEndTime||(n.actualEndTime=n.endTime||Date.now()+(n.remainingTime||n.leftTime)),n.state==="paused"&&(n.actualEndTime=Date.now()+n.remainingTime),n.$emit("start",n),n.state="process",n.doCountdown())},stopCountdown(){const e=this;e.state==="process"&&(clearTimeout(e.countdownTimer),e.$emit("stop",e),e.state="stopped")},pauseCountdown(){const e=this;e.state==="process"&&(clearTimeout(e.countdownTimer),e.remainingTime=e.actualEndTime-Date.now(),e.$emit("paused",e),e.state="paused")},switchCountdown(){const e=this;if(e.state==="stopped"||e.state==="beforeStart")return e.startCountdown();if(e.state==="process")return e.stopCountdown()},finishCountdown(){const e=this;e.state="finished",e.timeObj={},e.usedTime=Date.now()-e.actualStartTime,e.$emit("finish",e)},doCountdown(){const e=this;if(e.state!=="process")return;e.actualStartTime||(e.actualStartTime=Date.now());let n=new Date(e.actualEndTime).getTime()-Date.now();if(n>0){const a={};let i=n/1e3,o=n%1e3;e.thousandSpeed&&o>990&&(i=Math.ceil(i),o=0);const c={d:i/60/60/24,h:i/60/60%24,m:i/60%60,s:i%60,ms:o},d={d:parseInt(c.d,10).toString(),h:parseInt(c.h,10).toString().padStart(2,"0"),m:parseInt(c.m,10).toString().padStart(2,"0"),s:parseInt(c.s,10).toString().padStart(2,"0"),ms:c.ms.toString().padStart(3,"0")},u={d:parseInt(Math.ceil(i/60/60/24),10),h:parseInt(Math.ceil(i/60/60),10),m:parseInt(Math.ceil(i/60),10),s:parseInt(Math.ceil(i),10)};a.endTime=e.actualEndTime,a.speed=e.speed,e.usedTime=Date.now()-e.actualStartTime,a.leftTime=n,e.remainingTime=n,e.timeObj=Object.assign({},a,d,{org:c,ceil:u}),e.$emit("process",e)}else{e.finishCountdown();return}let r=e.speed+(e.actualStartTime+e.runTimes++*e.speed-Date.now());r<0&&(r=r+e.speed),n<e.speed&&(r=n),e.countdownTimer=setTimeout(e.doCountdown,r)}}};function N(e,n,r,a,i,o){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(r.tag),t.mergeProps(e.attrs,t.toHandlers(e.$listeners)),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"prev",t.normalizeProps(t.guardReactiveProps(this._self))),e.state==="beforeStart"?t.renderSlot(e.$slots,"before",t.normalizeProps(t.mergeProps({key:0},this._self))):t.createCommentVNode("",!0),e.state==="preheat"?t.renderSlot(e.$slots,"preheat",t.normalizeProps(t.mergeProps({key:1},this._self))):t.createCommentVNode("",!0),e.state==="process"||e.state==="stopped"||e.state==="paused"?t.renderSlot(e.$slots,"process",t.normalizeProps(t.mergeProps({key:2},this._self))):t.createCommentVNode("",!0),e.state==="finished"?t.renderSlot(e.$slots,"finish",t.normalizeProps(t.mergeProps({key:3},this._self))):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps(this._self)))]),_:3},16)}const E=k(z,[["render",N]]),I=t.defineComponent({__name:"vue-awesome-countdown-v3",props:{startTime:{default:void 0},endTime:{default:void 0},leftTime:{default:0},autoStart:{type:Boolean,default:!0},speed:{default:1e3},tag:{default:"span"}},emits:["start","stop","paused","finish","process"],setup(e,{expose:n,emit:r}){const a=e,i=r,o=t.ref("beforeStart"),c=t.ref({}),d=t.ref(null),u=t.ref(null),g=t.ref({endTime:null,speed:a.speed,leftTime:0,usedTime:0,remainingTime:0,d:"0",h:"00",m:"00",s:"00",ms:"000",org:{d:0,h:0,m:0,s:0,ms:0},ceil:{d:0,h:0,m:0,s:0}}),h=t.ref(null),D=t.ref(0),v=t.ref(0),T=t.ref(0),M=t.computed(()=>a.speed>0&&a.speed%1e3===0);t.watch(()=>a.speed,(s,p)=>{if(s<0&&(s=0),s!==p){S();const l=Date.now(),C=Math.floor((l-(d.value||0))/s),w=l%s;D.value=C,h.value=setTimeout(b,w)}});const S=()=>{h.value&&(clearTimeout(h.value),h.value=null)};t.onMounted(()=>{if(a.autoStart)if(o.value="preheat",a.startTime){const p=new Date(a.startTime).getTime()-Date.now();h.value=setTimeout(()=>{P(!0)},p)}else h.value=setTimeout(()=>{P(!0)},0)}),t.onUnmounted(()=>{S()});const P=s=>{o.value!=="beforeStart"&&o.value!=="stopped"&&o.value!=="paused"&&!s||(S(),s&&(o.value="beforeStart",d.value=null,u.value=null,D.value=0,v.value=0,T.value=0,g.value={...g.value,leftTime:0,remainingTime:0,d:"0",h:"00",m:"00",s:"00",ms:"000"}),o.value==="stopped"&&(T.value=(u.value||0)-Date.now()),u.value||(u.value=a.endTime?new Date(a.endTime).getTime():Date.now()+(T.value||a.leftTime)),o.value==="paused"&&(u.value=Date.now()+T.value),i("start",m),o.value="process",b())},V=()=>{o.value==="process"&&(S(),i("stop",m),o.value="stopped")},O=()=>{o.value==="process"&&(S(),T.value=(u.value||0)-Date.now(),i("paused",m),o.value="paused")},B=()=>{if(o.value==="stopped"||o.value==="beforeStart")return P();if(o.value==="process")return V()},R=()=>{S(),o.value="finished",g.value={...g.value,leftTime:0,remainingTime:0,d:"0",h:"00",m:"00",s:"00",ms:"000"},v.value=Date.now()-(d.value||0),i("finish",m)},b=()=>{if(o.value!=="process")return;d.value||(d.value=Date.now());let s=(u.value||0)-Date.now();if(s>0){let l=s/1e3,C=s%1e3;M.value&&C>990&&(l=Math.ceil(l),C=0);const w={d:l/60/60/24,h:l/60/60%24,m:l/60%60,s:l%60,ms:C},_={d:Math.floor(w.d).toString(),h:Math.floor(w.h).toString().padStart(2,"0"),m:Math.floor(w.m).toString().padStart(2,"0"),s:Math.floor(w.s).toString().padStart(2,"0"),ms:w.ms.toString().padStart(3,"0")},A={d:Math.ceil(l/60/60/24),h:Math.ceil(l/60/60),m:Math.ceil(l/60),s:Math.ceil(l)};v.value=Date.now()-(d.value||0),T.value=s,g.value={endTime:u.value,speed:a.speed,leftTime:s,usedTime:v.value,remainingTime:T.value,..._,org:w,ceil:A},i("process",m)}else{R();return}let p=a.speed+((d.value||0)+D.value++*a.speed-Date.now());p<0&&(p=p+a.speed),s<a.speed&&(p=s),h.value=setTimeout(b,p)},m={get state(){return o.value},get attrs(){return c.value},get actualStartTime(){return d.value},get actualEndTime(){return u.value},get timeObj(){return g.value},get runTimes(){return D.value},get usedTime(){return v.value},get remainingTime(){return T.value},get thousandSpeed(){return M.value},startCountdown:P,stopCountdown:V,pauseCountdown:O,switchCountdown:B};return n(m),(s,p)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),t.normalizeProps(t.guardReactiveProps(c.value)),{default:t.withCtx(()=>[t.renderSlot(s.$slots,"prev",t.normalizeProps(t.guardReactiveProps(m))),o.value==="beforeStart"?t.renderSlot(s.$slots,"before",t.normalizeProps(t.mergeProps({key:0},m))):t.createCommentVNode("",!0),o.value==="preheat"?t.renderSlot(s.$slots,"preheat",t.normalizeProps(t.mergeProps({key:1},m))):t.createCommentVNode("",!0),o.value==="process"||o.value==="stopped"||o.value==="paused"?t.renderSlot(s.$slots,"process",t.normalizeProps(t.mergeProps({key:2},m))):t.createCommentVNode("",!0),o.value==="finished"?t.renderSlot(s.$slots,"finish",t.normalizeProps(t.mergeProps({key:3},m))):t.createCommentVNode("",!0),t.renderSlot(s.$slots,"default",t.normalizeProps(t.guardReactiveProps(m)))]),_:3},16))}}),$=()=>typeof window<"u"&&window.Vue&&window.Vue.version&&window.Vue.version.startsWith("2.")?E:I,y={install:(e,n)=>{const r=n||"vac",a=$();a&&(e.component(r,a),e.component("countdown",a))}};typeof window<"u"&&window.Vue&&window.Vue.use(y);const j=$();f.VueAwesomeCountdown=j,f.default=y,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});