vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
153 lines (152 loc) • 5.19 kB
JavaScript
import { defineComponent as z, ref as k, computed as w, watch as T, onMounted as I, createElementBlock as o, openBlock as s, createCommentVNode as f, createElementVNode as P, normalizeStyle as F, renderSlot as S, createTextVNode as y, toDisplayString as c, Fragment as A } from "vue";
import { useSlotsExist as Z } from "../utils/index.js";
const j = { class: "m-countdown" }, G = { class: "countdown-time" }, J = {
key: 0,
class: "time-prefix"
}, K = {
key: 0,
class: "time-suffix"
}, Q = /* @__PURE__ */ z({
__name: "Countdown",
props: {
title: { default: void 0 },
titleStyle: { default: () => ({}) },
prefix: { default: void 0 },
suffix: { default: void 0 },
finish: { default: void 0 },
future: { type: Boolean, default: !0 },
format: { default: "HH:mm:ss" },
value: { default: 0 },
valueStyle: { default: () => ({}) },
active: { type: Boolean, default: !0 }
},
emits: ["finish"],
setup(B, { expose: E, emit: N }) {
const a = B, i = k(0), l = k(0), u = k(null), $ = N, M = Z(["title", "prefix", "suffix"]), q = w(() => M.title || a.title), H = w(() => M.prefix || a.prefix), Y = w(() => M.suffix || a.suffix), n = w(() => ({
showMillisecond: a.format.includes("SSS"),
showYear: a.format.includes("Y"),
showMonth: a.format.includes("M"),
showDay: a.format.includes("D"),
showHour: a.format.includes("H"),
showMinute: a.format.includes("m"),
showSecond: a.format.includes("s")
}));
T(
() => a.active,
(e) => {
a.future || (e ? (i.value = l.value + Date.now(), u.value = requestAnimationFrame(g)) : (u.value && cancelAnimationFrame(u.value), u.value = null));
}
), T(
() => [a.value, a.future],
() => {
D();
},
{
deep: !0
}
), I(() => {
D();
});
function D() {
Number.isFinite(a.value) ? (a.future ? a.value > Date.now() ? i.value = a.value : x() : a.value > 0 ? i.value = a.value + Date.now() : x(), l.value = i.value - Date.now(), (a.future || !a.future && a.active) && (u.value && cancelAnimationFrame(u.value), u.value = requestAnimationFrame(g))) : l.value = 0;
}
function x() {
l.value = 0, $("finish");
}
function g() {
i.value > Date.now() ? (l.value = i.value - Date.now(), u.value = requestAnimationFrame(g)) : x();
}
function r(e, t = 2) {
return String(e).padStart(t, "0");
}
function V(e) {
let t = a.format;
if (n.value.showMillisecond) {
var b = e % 1e3;
t = t.replace("SSS", r(b, 3));
}
if (e = Math.floor(e / 1e3), n.value.showYear) {
var v = Math.floor(e / 31104e3);
t = t.includes("YY") ? t.replace("YY", r(v)) : t.replace("Y", String(v));
} else
var v = 0;
if (n.value.showMonth) {
e = e - v * 60 * 60 * 24 * 30 * 12;
var d = Math.floor(e / (60 * 60 * 24 * 30));
t = t.includes("MM") ? t.replace("MM", r(d)) : t.replace("M", String(d));
} else
var d = 0;
if (n.value.showDay) {
e = e - d * 60 * 60 * 24 * 30;
var p = Math.floor(e / (60 * 60 * 24));
t = t.includes("DD") ? t.replace("DD", r(p)) : t.replace("D", String(p));
} else
var p = 0;
if (n.value.showHour) {
e = e - p * 60 * 60 * 24;
var h = Math.floor(e / (60 * 60));
t = t.includes("HH") ? t.replace("HH", r(h)) : t.replace("H", String(h));
} else
var h = 0;
if (n.value.showMinute) {
e = e - h * 60 * 60;
var m = Math.floor(e / 60);
t = t.includes("mm") ? t.replace("mm", r(m)) : t.replace("m", String(m));
} else
var m = 0;
if (n.value.showSecond) {
var C = e - m * 60;
t = t.includes("ss") ? t.replace("ss", r(C)) : t.replace("s", String(C));
}
return t;
}
function _() {
D();
}
return E({
reset: _
}), (e, t) => (s(), o("div", j, [
q.value ? (s(), o("div", {
key: 0,
class: "countdown-title",
style: F(e.titleStyle)
}, [
S(e.$slots, "title", {}, () => [
y(c(a.title), 1)
], !0)
], 4)) : f("", !0),
P("div", G, [
H.value ? (s(), o(A, { key: 0 }, [
H.value || l.value > 0 ? (s(), o("span", J, [
S(e.$slots, "prefix", {}, () => [
y(c(e.prefix), 1)
], !0)
])) : f("", !0)
], 64)) : f("", !0),
e.finish && l.value === 0 ? (s(), o("span", {
key: 1,
class: "time-value",
style: F(e.valueStyle)
}, [
S(e.$slots, "finish", {}, () => [
y(c(e.finish), 1)
], !0)
], 4)) : (s(), o("span", {
key: 2,
class: "time-value",
style: F(e.valueStyle)
}, c(V(l.value)), 5)),
Y.value ? (s(), o(A, { key: 3 }, [
Y.value || l.value > 0 ? (s(), o("span", K, [
S(e.$slots, "suffix", {}, () => [
y(c(e.suffix), 1)
], !0)
])) : f("", !0)
], 64)) : f("", !0)
])
]));
}
});
export {
Q as default
};