@chenfengyuan/vue-countdown/dist/vue-countdown.min.js

Countdown component for Vue 3.

/*! vue-countdown v2.1.3 | (c) 2018-present Chen Fengyuan | MIT */
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("vue")):"function"==typeof define&&define.amd?define(["vue"],s):(t="undefined"!=typeof globalThis?globalThis:t||self).VueCountdown=s(t.Vue)}(this,(function(t){"use strict";const s=1e3,i=6e4,e=36e5,o=864e5,n="abort",a="progress",l="start",h="visibilitychange";return t.defineComponent({name:"VueCountdown",props:{autoStart:{type:Boolean,default:!0},emitEvents:{type:Boolean,default:!0},interval:{type:Number,default:1e3,validator:t=>t>=0},now:{type:Function,default:()=>Date.now()},tag:{type:String,default:"span"},time:{type:Number,default:0,validator:t=>t>=0},transform:{type:Function,default:t=>t}},emits:[n,"end",a,l],data:()=>({counting:!1,endTime:0,totalMilliseconds:0,requestId:0,autoPauseOnHide:!1}),computed:{days(){return Math.floor(this.totalMilliseconds/o)},hours(){return Math.floor(this.totalMilliseconds%o/e)},minutes(){return Math.floor(this.totalMilliseconds%e/i)},seconds(){return Math.floor(this.totalMilliseconds%i/s)},milliseconds(){return Math.floor(this.totalMilliseconds%s)},totalDays(){return this.days},totalHours(){return Math.floor(this.totalMilliseconds/e)},totalMinutes(){return Math.floor(this.totalMilliseconds/i)},totalSeconds(){return Math.floor(this.totalMilliseconds/s)}},watch:{$props:{deep:!0,immediate:!0,handler(){this.totalMilliseconds=this.time,this.endTime=this.now()+this.time,this.autoStart&&this.start()}}},mounted(){document.addEventListener(h,this.handleVisibilityChange)},beforeUnmount(){document.removeEventListener(h,this.handleVisibilityChange),this.pause()},methods:{start(){this.counting||(this.counting=!0,this.autoStart||(this.totalMilliseconds=this.time,this.endTime=this.now()+this.time),this.emitEvents&&this.$emit(l),"visible"===document.visibilityState&&this.continue())},continue(){if(!this.counting)return;const t=Math.min(this.totalMilliseconds,this.interval);if(t>0){let s,i;const e=o=>{s||(s=o),i||(i=o);const n=o-s;n>=t||n+(o-i)/2>=t?this.progress():this.requestId=requestAnimationFrame(e),i=o};this.requestId=requestAnimationFrame(e)}else this.end()},pause(){cancelAnimationFrame(this.requestId),this.requestId=0},progress(){this.counting&&(this.update(),this.emitEvents&&this.totalMilliseconds>0&&this.$emit(a,{days:this.days,hours:this.hours,minutes:this.minutes,seconds:this.seconds,milliseconds:this.milliseconds,totalDays:this.totalDays,totalHours:this.totalHours,totalMinutes:this.totalMinutes,totalSeconds:this.totalSeconds,totalMilliseconds:this.totalMilliseconds}),this.continue())},abort(){this.counting&&(this.pause(),this.counting=!1,this.emitEvents&&this.$emit(n))},end(){this.counting&&(this.pause(),this.totalMilliseconds=0,this.counting=!1,this.emitEvents&&this.$emit("end"))},update(){this.counting&&(this.totalMilliseconds=Math.max(0,this.endTime-this.now()))},restart(){this.pause(),this.totalMilliseconds=this.time,this.endTime=this.now()+this.time,this.counting=!1,this.start()},handleVisibilityChange(){switch(document.visibilityState){case"visible":0===this.requestId&&this.autoPauseOnHide&&(this.update(),this.continue()),this.autoPauseOnHide=!1;break;case"hidden":this.requestId>0&&(this.autoPauseOnHide=!0,this.pause())}}},render(){return t.h(this.tag,this.$slots.default?[this.$slots.default(this.transform({days:this.days,hours:this.hours,minutes:this.minutes,seconds:this.seconds,milliseconds:this.milliseconds,totalDays:this.totalDays,totalHours:this.totalHours,totalMinutes:this.totalMinutes,totalSeconds:this.totalSeconds,totalMilliseconds:this.totalMilliseconds}))]:void 0)}})}));