@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/CountDown.js

@@ -1,64 +1,246 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, computed as t, onBeforeMount as n, watch as r, toRefs as a, openBlock as i, createElementBlock as o, normalizeClass as s, renderSlot as m } from "vue";
-import { c as l } from "./component.js";
-import { _ as u } from "./plugin-vue_export-helper.js";
+import { reactive, computed, onBeforeMount, watch, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const d = (e2, t2 = 2) => {
-  for (e2 += ""; e2.length < t2; )
-    e2 = "0" + e2;
-  return e2.toString();
-}, c = (e2) => {
-  if (!e2)
+const padZero = (num, length = 2) => {
+  num += "";
+  while (num.length < length) {
+    num = "0" + num;
+  }
+  return num.toString();
+};
+const getTimeStamp = (timeStr) => {
+  if (!timeStr)
     return Date.now();
-  let t2 = e2;
-  return t2 = t2 > 0 ? +t2 : t2.toString().replace(/\-/g, "/"), new Date(t2).getTime();
-}, { componentName: p, create: T, translate: f } = l("countdown"), S = T({ props: { modelValue: { type: Object, default: () => ({}) }, paused: { default: false, type: Boolean }, startTime: { type: [Number, String], validator: (e2) => new Date(e2).toString().toLowerCase() !== "invalid date" }, endTime: { type: [Number, String], validator: (e2) => new Date(e2).toString().toLowerCase() !== "invalid date" }, millisecond: { default: false, type: Boolean }, format: { type: String, default: "HH:mm:ss" }, autoStart: { type: Boolean, default: true }, time: { type: [Number, String], default: 0 } }, emits: ["input", "on-end", "on-restart", "on-paused", "update:modelValue"], setup(i2, { emit: o2, slots: s2 }) {
-  const m2 = e({ restTime: 0, timer: null, counting: !i2.paused && i2.autoStart, handleEndTime: Date.now(), diffTime: 0 }), l2 = t(() => ({ [p]: true })), u2 = t(() => g2(m2.restTime)), T2 = () => {
-    m2.handleEndTime = i2.endTime, m2.diffTime = Date.now() - c(i2.startTime), m2.counting || (m2.counting = true), S2();
-  }, S2 = () => {
-    window !== void 0 && (m2.timer = requestAnimationFrame(() => {
-      if (m2.counting) {
-        const e2 = Date.now() - m2.diffTime, t2 = Math.max(m2.handleEndTime - e2, 0);
-        m2.restTime = t2, t2 || (m2.counting = false, w(), o2("on-end")), t2 > 0 && S2();
+  let t = timeStr;
+  t = t > 0 ? +t : t.toString().replace(/\-/g, "/");
+  return new Date(t).getTime();
+};
+const { componentName, create, translate } = createComponent("countdown");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {};
       }
-    }));
-  }, g2 = (e2, t2) => {
-    const n2 = e2;
-    let r2 = { d: 0, h: 0, m: 0, s: 0, ms: 0 };
-    const a2 = 1e3, i3 = 6e4, o3 = 36e5, s3 = 24 * o3;
-    return n2 > 0 && (r2.d = n2 >= a2 ? Math.floor(n2 / s3) : 0, r2.h = Math.floor(n2 % s3 / o3), r2.m = Math.floor(n2 % o3 / i3), r2.s = Math.floor(n2 % i3 / a2), r2.ms = Math.floor(n2 % a2)), t2 == "custom" ? r2 : h2({ ...r2 });
-  }, h2 = (e2) => {
-    let { d: t2, h: n2, m: r2, s: a2, ms: o3 } = e2, s3 = i2.format;
-    if (s3.includes("DD") ? s3 = s3.replace("DD", d(t2)) : n2 += 24 * Number(t2), s3.includes("HH") ? s3 = s3.replace("HH", d(n2)) : r2 += 60 * Number(n2), s3.includes("mm") ? s3 = s3.replace("mm", d(r2)) : a2 += 60 * Number(r2), s3.includes("ss") ? s3 = s3.replace("ss", d(a2)) : o3 += 1e3 * Number(a2), s3.includes("S")) {
-      const e3 = d(o3, 3).toString();
-      s3.includes("SSS") ? s3 = s3.replace("SSS", e3) : s3.includes("SS") ? s3 = s3.replace("SS", e3.slice(0, 2)) : s3.includes("S") && (s3 = s3.replace("SS", e3.slice(0, 1)));
+    },
+    paused: {
+      default: false,
+      type: Boolean
+    },
+    startTime: {
+      type: [Number, String],
+      validator(v) {
+        const dateStr = new Date(v).toString().toLowerCase();
+        return dateStr !== "invalid date";
+      }
+    },
+    endTime: {
+      type: [Number, String],
+      validator(v) {
+        const dateStr = new Date(v).toString().toLowerCase();
+        return dateStr !== "invalid date";
+      }
+    },
+    millisecond: {
+      default: false,
+      type: Boolean
+    },
+    format: {
+      type: String,
+      default: "HH:mm:ss"
+    },
+    autoStart: {
+      type: Boolean,
+      default: true
+    },
+    time: {
+      type: [Number, String],
+      default: 0
     }
-    return s3;
-  }, w = () => {
-    cancelAnimationFrame(m2.timer), m2.counting = false, o2("on-paused", m2.restTime);
-  };
-  return n(() => {
-    i2.autoStart ? T2() : m2.restTime = i2.time;
-  }), r(() => m2.restTime, (e2) => {
-    let t2 = g2(e2, "custom");
-    o2("update:modelValue", t2), o2("input", t2);
-  }), r(() => i2.paused, (e2, t2) => {
-    t2 ? (m2.counting || (m2.counting = true, m2.handleEndTime = Date.now() + Number(m2.restTime), S2()), o2("on-restart", m2.restTime)) : m2.counting && w();
-  }), r(() => i2.endTime, (e2) => {
-    T2();
-  }), r(() => i2.startTime, (e2) => {
-    T2();
-  }), { ...a(i2), slots: s2, classes: l2, getTimeStamp: c, start: () => {
-    m2.counting || i2.autoStart || (m2.counting = true, m2.handleEndTime = Date.now() + Number(m2.restTime), S2(), o2("on-restart", m2.restTime));
-  }, pause: w, renderTime: u2, translate: f, reset: () => {
-    i2.autoStart || (w(), m2.restTime = i2.time);
-  } };
-} }), g = ["innerHTML"];
-var h = u(S, [["render", function(e2, t2, n2, r2, a2, l2) {
-  return i(), o("view", { class: s(e2.classes) }, [e2.slots.default ? m(e2.$slots, "default", { key: 0 }) : (i(), o("view", { key: 1, class: "nut-cd-block", innerHTML: e2.renderTime }, null, 8, g))], 2);
-}]]);
-export { h as default };
+  },
+  emits: ["input", "on-end", "on-restart", "on-paused", "update:modelValue"],
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      restTime: 0,
+      timer: null,
+      counting: !props.paused && props.autoStart,
+      handleEndTime: Date.now(),
+      diffTime: 0
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const renderTime = computed(() => {
+      return formatRemainTime(state.restTime);
+    });
+    const initTime = () => {
+      state.handleEndTime = props.endTime;
+      state.diffTime = Date.now() - getTimeStamp(props.startTime);
+      if (!state.counting)
+        state.counting = true;
+      tick();
+    };
+    const tick = () => {
+      if (window !== void 0) {
+        state.timer = requestAnimationFrame(() => {
+          if (state.counting) {
+            const currentTime = Date.now() - state.diffTime;
+            const remainTime = Math.max(state.handleEndTime - currentTime, 0);
+            state.restTime = remainTime;
+            if (!remainTime) {
+              state.counting = false;
+              pause();
+              emit("on-end");
+            }
+            if (remainTime > 0) {
+              tick();
+            }
+          }
+        });
+      }
+    };
+    const formatRemainTime = (t, type) => {
+      const ts = t;
+      let rest = {
+        d: 0,
+        h: 0,
+        m: 0,
+        s: 0,
+        ms: 0
+      };
+      const SECOND = 1e3;
+      const MINUTE = 60 * SECOND;
+      const HOUR = 60 * MINUTE;
+      const DAY = 24 * HOUR;
+      if (ts > 0) {
+        rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0;
+        rest.h = Math.floor(ts % DAY / HOUR);
+        rest.m = Math.floor(ts % HOUR / MINUTE);
+        rest.s = Math.floor(ts % MINUTE / SECOND);
+        rest.ms = Math.floor(ts % SECOND);
+      }
+      return type == "custom" ? rest : parseFormat({ ...rest });
+    };
+    const parseFormat = (time) => {
+      let { d, h, m, s, ms } = time;
+      let format = props.format;
+      if (format.includes("DD")) {
+        format = format.replace("DD", padZero(d));
+      } else {
+        h += Number(d) * 24;
+      }
+      if (format.includes("HH")) {
+        format = format.replace("HH", padZero(h));
+      } else {
+        m += Number(h) * 60;
+      }
+      if (format.includes("mm")) {
+        format = format.replace("mm", padZero(m));
+      } else {
+        s += Number(m) * 60;
+      }
+      if (format.includes("ss")) {
+        format = format.replace("ss", padZero(s));
+      } else {
+        ms += Number(s) * 1e3;
+      }
+      if (format.includes("S")) {
+        const msC = padZero(ms, 3).toString();
+        if (format.includes("SSS")) {
+          format = format.replace("SSS", msC);
+        } else if (format.includes("SS")) {
+          format = format.replace("SS", msC.slice(0, 2));
+        } else if (format.includes("S")) {
+          format = format.replace("SS", msC.slice(0, 1));
+        }
+      }
+      return format;
+    };
+    const start = () => {
+      if (!state.counting && !props.autoStart) {
+        state.counting = true;
+        state.handleEndTime = Date.now() + Number(state.restTime);
+        tick();
+        emit("on-restart", state.restTime);
+      }
+    };
+    const pause = () => {
+      cancelAnimationFrame(state.timer);
+      state.counting = false;
+      emit("on-paused", state.restTime);
+    };
+    const reset = () => {
+      if (!props.autoStart) {
+        pause();
+        state.restTime = props.time;
+      }
+    };
+    onBeforeMount(() => {
+      if (props.autoStart) {
+        initTime();
+      } else {
+        state.restTime = props.time;
+      }
+    });
+    watch(() => state.restTime, (value) => {
+      let tranTime = formatRemainTime(value, "custom");
+      emit("update:modelValue", tranTime);
+      emit("input", tranTime);
+    });
+    watch(() => props.paused, (v, ov) => {
+      if (!ov) {
+        if (state.counting) {
+          pause();
+        }
+      } else {
+        if (!state.counting) {
+          state.counting = true;
+          state.handleEndTime = Date.now() + Number(state.restTime);
+          tick();
+        }
+        emit("on-restart", state.restTime);
+      }
+    });
+    watch(() => props.endTime, (value) => {
+      initTime();
+    });
+    watch(() => props.startTime, (value) => {
+      initTime();
+    });
+    return {
+      ...toRefs(props),
+      slots,
+      classes,
+      getTimeStamp,
+      start,
+      pause,
+      renderTime,
+      translate,
+      reset
+    };
+  }
+});
+const _hoisted_1 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    _ctx.slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: "nut-cd-block",
+      innerHTML: _ctx.renderTime
+    }, null, 8, _hoisted_1))
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };