vue-amazing-ui/es/countdown/Countdown.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as z, ref as F, computed as y, watch as A, onMounted as I, createElementBlock as n, openBlock as s, createCommentVNode as w, createElementVNode as P, normalizeStyle as Y, renderSlot as M, createTextVNode as D, toDisplayString as p, Fragment as B } from "vue";
import { useSlotsExist as Z } from "../utils/index.js";
const j = { class: "countdown-wrap" }, 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(u, { expose: E, emit: N }) {
    const l = u, f = F(0), a = F(0), o = F(null), $ = N, x = Z(["title", "prefix", "suffix"]), q = y(() => x.title || l.title), C = y(() => x.prefix || l.prefix), T = y(() => x.suffix || l.suffix), i = y(() => ({
      showMillisecond: l.format.includes("SSS"),
      showYear: l.format.includes("Y"),
      showMonth: l.format.includes("M"),
      showDay: l.format.includes("D"),
      showHour: l.format.includes("H"),
      showMinute: l.format.includes("m"),
      showSecond: l.format.includes("s")
    }));
    A(
      () => l.active,
      (t) => {
        l.future || (t ? (f.value = a.value + Date.now(), o.value = requestAnimationFrame(k)) : (o.value && cancelAnimationFrame(o.value), o.value = null));
      }
    ), A(
      () => [l.value, l.future],
      () => {
        H();
      },
      {
        deep: !0
      }
    ), I(() => {
      H();
    });
    function H() {
      Number.isFinite(l.value) ? (l.future ? l.value > Date.now() ? f.value = l.value : g() : l.value > 0 ? f.value = l.value + Date.now() : g(), a.value = f.value - Date.now(), (l.future || !l.future && l.active) && (o.value && cancelAnimationFrame(o.value), o.value = requestAnimationFrame(k))) : a.value = 0;
    }
    function g() {
      a.value = 0, $("finish");
    }
    function k() {
      f.value > Date.now() ? (a.value = f.value - Date.now(), o.value = requestAnimationFrame(k)) : g();
    }
    function r(t, e = 2) {
      return String(t).padStart(e, "0");
    }
    function V(t) {
      let e = l.format;
      if (i.value.showMillisecond) {
        const S = t % 1e3;
        e = e.replace("SSS", r(S, 3));
      }
      t = Math.floor(t / 1e3);
      let c;
      i.value.showYear ? (c = Math.floor(t / (3600 * 24 * 30 * 12)), e = e.includes("YY") ? e.replace("YY", r(c)) : e.replace("Y", String(c))) : c = 0;
      let v;
      i.value.showMonth ? (t = t - c * 60 * 60 * 24 * 30 * 12, v = Math.floor(t / (3600 * 24 * 30)), e = e.includes("MM") ? e.replace("MM", r(v)) : e.replace("M", String(v))) : v = 0;
      let d;
      i.value.showDay ? (t = t - v * 60 * 60 * 24 * 30, d = Math.floor(t / (3600 * 24)), e = e.includes("DD") ? e.replace("DD", r(d)) : e.replace("D", String(d))) : d = 0;
      let m;
      i.value.showHour ? (t = t - d * 60 * 60 * 24, m = Math.floor(t / 3600), e = e.includes("HH") ? e.replace("HH", r(m)) : e.replace("H", String(m))) : m = 0;
      let h;
      if (i.value.showMinute ? (t = t - m * 60 * 60, h = Math.floor(t / 60), e = e.includes("mm") ? e.replace("mm", r(h)) : e.replace("m", String(h))) : h = 0, i.value.showSecond) {
        const S = t - h * 60;
        e = e.includes("ss") ? e.replace("ss", r(S)) : e.replace("s", String(S));
      }
      return e;
    }
    function b() {
      H();
    }
    return E({
      reset: b
    }), (t, e) => (s(), n("div", j, [
      q.value ? (s(), n("div", {
        key: 0,
        class: "countdown-title",
        style: Y(u.titleStyle)
      }, [
        M(t.$slots, "title", {}, () => [
          D(p(l.title), 1)
        ], !0)
      ], 4)) : w("", !0),
      P("div", G, [
        C.value ? (s(), n(B, { key: 0 }, [
          C.value || a.value > 0 ? (s(), n("span", J, [
            M(t.$slots, "prefix", {}, () => [
              D(p(u.prefix), 1)
            ], !0)
          ])) : w("", !0)
        ], 64)) : w("", !0),
        u.finish && a.value === 0 ? (s(), n("span", {
          key: 1,
          class: "time-value",
          style: Y(u.valueStyle)
        }, [
          M(t.$slots, "finish", {}, () => [
            D(p(u.finish), 1)
          ], !0)
        ], 4)) : (s(), n("span", {
          key: 2,
          class: "time-value",
          style: Y(u.valueStyle)
        }, p(V(a.value)), 5)),
        T.value ? (s(), n(B, { key: 3 }, [
          T.value || a.value > 0 ? (s(), n("span", K, [
            M(t.$slots, "suffix", {}, () => [
              D(p(u.suffix), 1)
            ], !0)
          ])) : w("", !0)
        ], 64)) : w("", !0)
      ])
    ]));
  }
});
export {
  Q as default
};