easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-countdown.js

@@ -1,142 +1,155 @@
-var I = Object.defineProperty;
-var H = (t) => {
-  throw TypeError(t);
-};
-var N = (t, s, e) => s in t ? I(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var T = (t, s, e) => N(t, typeof s != "symbol" ? s + "" : s, e), _ = (t, s, e) => s.has(t) || H("Cannot " + e);
-var n = (t, s, e) => (_(t, s, "read from private field"), e ? e.call(t) : s.get(t)), f = (t, s, e) => s.has(t) ? H("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), o = (t, s, e, a) => (_(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { EaStatistic as O } from "./ea-statistic.js";
-import { d as Y } from "./ea-calendar2.js";
-import { t as A } from "../utils/timeout.js";
-import { p as k } from "../utils/parseTime.js";
-class U extends Event {
-  constructor(s) {
-    super("ea-finish", {
-      bubbles: !0,
-      composed: !0
-    }), this.detail = s;
+import { E } from "../core/EaBase.ts.js";
+import { q as y, C as M, a as c, p as D } from "../core/decorator.js";
+import { d as g } from "./ea-calendar2.js";
+import { t as x } from "../utils/timeout.ts.js";
+import { p as w } from "../utils/parseTime.ts.js";
+import { s as S } from "../css/ea-countdown.style.js";
+import { c as H } from "../utils/bem.ts.js";
+class $ extends Event {
+  constructor(t) {
+    super("ea-change", { bubbles: !0, composed: !0 }), this.detail = t;
+  }
+}
+class O extends Event {
+  constructor(t) {
+    super("ea-finish", { bubbles: !0, composed: !0 }), this.detail = t;
   }
 }
-var y, b, v, S, M, d, c, w, g;
-class $ extends O {
+var V = Object.defineProperty, I = Object.getOwnPropertyDescriptor, d = (a, t, i, e) => {
+  for (var n = e > 1 ? void 0 : e ? I(t, i) : t, r = a.length - 1, l; r >= 0; r--)
+    (l = a[r]) && (n = (e ? l(t, i, n) : l(n)) || n);
+  return e && n && V(t, i, n), n;
+};
+const T = "ea-countdown", u = H(T);
+let o = class extends E {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    f(this, y);
-    /** @type {HTMLElement} */
-    f(this, b);
-    /** @type {HTMLElement} */
-    f(this, v);
-    /** @type {HTMLElement} */
-    f(this, S);
-    /** @type {HTMLElement} */
-    f(this, M);
-    f(this, d, null);
-    f(this, c, null);
-    f(this, w, {
-      displayValue: ""
-    });
-    T(this, "state", this.properties({
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          n(this, d) && (clearInterval(n(this, d)), o(this, d, null)), n(this, c) && (clearTimeout(n(this, c)), o(this, c, null));
-          const a = k(e) || e, r = () => {
-            const { diff: h, currentTime: l, displayValue: m } = n(this, g).call(this, a, this.format);
-            n(this, v).textContent = m, this.emit("change", { detail: { value: l, displayValue: m } }), (h <= 0 || !h) && (n(this, c) && (clearTimeout(n(this, c)), o(this, c, null)), n(this, d) && (clearInterval(n(this, d)), o(this, d, null)), this.dispatchEvent(
-              new U({ value: l, displayValue: m })
-            ));
-          };
-          r();
-          const i = Number(this["refresh-interval"]) || 1e3, p = Date.now();
-          let u = i - p % i;
-          u === 0 && (u = i), o(this, c, A(() => {
-            o(this, c, null), r(), o(this, d, setInterval(r, i));
-          }, u));
-        }
-      },
-      format: {
-        type: String,
-        default: "HH:mm:ss",
-        observer: (e) => {
-        }
-      },
-      "refresh-interval": {
-        type: Number,
-        default: 1e3,
-        /**  @param {Number} newVal */
-        observer: (e) => {
-        }
-      }
-    }));
-    /**
-     * 获取时间差
-     * @param {dayjs} date
-     * @param {string} format
-     * @return {{currentTime: number, diff: number, displayValue: string}}
-     */
-    f(this, g, (e, a) => {
-      const r = Y(), i = Y(e), p = i.valueOf() - r.valueOf(), u = (q, R = 2) => `${q}`.padStart(R, "0");
-      if (p <= 0 || i.isBefore(r) || !p)
+    super(...arguments), this._timer = null, this._alignTimeout = null, this.value = "", this.format = "HH:mm:ss", this.refreshInterval = 1e3, this.heading = "", this.displayValue = "", this._getDiffTime = (a, t) => {
+      const i = g(), e = g(a), n = e.valueOf() - i.valueOf(), r = (b, C = 2) => `${b}`.padStart(C, "0");
+      if (n <= 0 || e.isBefore(i) || !n)
         return {
-          currentTime: r.valueOf(),
-          diff: p,
+          currentTime: i.valueOf(),
+          diff: n,
           displayValue: "00:00:00"
         };
-      let h = i.diff(r, "year"), l = r.add(h, "year");
-      l.isAfter(i) && (h -= 1, l = r.add(h, "year"));
-      let m = i.diff(l, "month");
-      l = l.add(m, "month");
-      let D = i.diff(l, "day");
-      l = l.add(D, "day");
-      let V = i.diff(l, "hour");
-      l = l.add(V, "hour");
-      let x = i.diff(l, "minute");
-      l = l.add(x, "minute");
-      let C = i.diff(l, "second");
-      l = l.add(C, "second");
-      let E = i.diff(l, "millisecond");
-      return !a.includes("YY") && a.includes("MM") && (m = Math.floor(i.diff(r, "month", !0))), !a.includes("MM") && a.includes("DD") && (D = Math.floor(i.diff(r, "day", !0))), !a.includes("DD") && a.includes("HH") && (V = Math.floor(i.diff(r, "hour", !0))), !a.includes("HH") && a.includes("mm") && (x = Math.floor(i.diff(r, "minute", !0))), !a.includes("mm") && a.includes("ss") && (C = Math.floor(i.diff(r, "second", !0))), !a.includes("ss") && a.includes("SSS") && (E = Math.floor(i.diff(r, "millisecond", !0))), {
-        currentTime: r.valueOf(),
-        diff: p,
-        displayValue: a.replace("YYYY", u(h)).replace("MM", u(m)).replace("DD", u(D)).replace("HH", u(V)).replace("mm", u(x)).replace("ss", u(C)).replace("SSS", u(E, 3)).replace(/\[|\]/g, "")
+      let l = e.diff(i, "year"), s = i.add(l, "year");
+      s.isAfter(e) && (l -= 1, s = i.add(l, "year"));
+      let f = e.diff(s, "month");
+      s = s.add(f, "month");
+      let h = e.diff(s, "day");
+      s = s.add(h, "day");
+      let m = e.diff(s, "hour");
+      s = s.add(m, "hour");
+      let p = e.diff(s, "minute");
+      s = s.add(p, "minute");
+      let _ = e.diff(s, "second");
+      s = s.add(_, "second");
+      let v = e.diff(s, "millisecond");
+      return !t.includes("YY") && t.includes("MM") && (f = Math.floor(e.diff(i, "month", !0))), !t.includes("MM") && t.includes("DD") && (h = Math.floor(e.diff(i, "day", !0))), !t.includes("DD") && t.includes("HH") && (m = Math.floor(e.diff(i, "hour", !0))), !t.includes("HH") && t.includes("mm") && (p = Math.floor(e.diff(i, "minute", !0))), !t.includes("mm") && t.includes("ss") && (_ = Math.floor(e.diff(i, "second", !0))), !t.includes("ss") && t.includes("SSS") && (v = Math.floor(e.diff(i, "millisecond", !0))), {
+        currentTime: i.valueOf(),
+        diff: n,
+        displayValue: t.replace("YYYY", r(l)).replace("MM", r(f)).replace("DD", r(h)).replace("HH", r(m)).replace("mm", r(p)).replace("ss", r(_)).replace("SSS", r(v, 3)).replace(/\[|\]/g, "")
       };
-    });
-    o(this, y, this.shadowRoot.querySelector(".ea-statistic")), o(this, b, this.shadowRoot.querySelector(".ea-statistic__number slot")), o(this, v, this.shadowRoot.querySelector(".ea-statistic__number")), o(this, S, this.shadowRoot.querySelector(".ea-statistic__prefix slot")), o(this, M, this.shadowRoot.querySelector(".ea-statistic__suffix slot"));
-  }
-  // ------- displayValue -------
-  // #region
-  get displayValue() {
-    return n(this, w).displayValue;
+    };
   }
-  set displayValue(e) {
-    n(this, w).displayValue = e;
+  /** 处理 value 属性变化，清理旧定时器并启动新倒计时 */
+  _handleValueChange(a) {
+    this._timer && (clearInterval(this._timer), this._timer = null), this._alignTimeout && (clearTimeout(this._alignTimeout), this._alignTimeout = null);
+    const t = w(a) || a, i = () => {
+      const { diff: l, currentTime: s, displayValue: f } = this._getDiffTime(
+        t,
+        this.format
+      );
+      this._number.textContent = f, this.displayValue = f, this.dispatchEvent(
+        new $({ value: s, displayValue: f })
+      ), (l <= 0 || !l) && (this._alignTimeout && (clearTimeout(this._alignTimeout), this._alignTimeout = null), this._timer && (clearInterval(this._timer), this._timer = null), this.dispatchEvent(
+        new O({ value: s, displayValue: f })
+      ));
+    };
+    i();
+    const e = Number(this.refreshInterval) || 1e3, n = Date.now();
+    let r = e - n % e;
+    r === 0 && (r = e), this._alignTimeout = x(() => {
+      this._alignTimeout = null, i(), this._timer = setInterval(i, e);
+    }, r);
   }
-  // #endregion
-  // ------- end -------
-  static get observedAttributes() {
-    return [...super.observedAttributes, "value", "format", "refresh-interval"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist("ea-countdown", {
-      // ['--' + this.type]: this.type,
-    });
-    return n(this, y).className = e, e;
+    const a = u();
+    return this._container.className = a, a;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  html() {
+    return `
+      <div class='${u()}' part='container'>
+        <header class='${u.e("header")}' part='title'>
+          <slot name='title'></slot>
+        </header>
+        <main class='${u.e("content")}' part='content'>
+          <span class='${u.e("prefix")}' part='prefix'>
+            <slot name='prefix'></slot>
+          </span>
+          <span class='${u.e("number")}' part='number' aria-live="polite" aria-atomic="true">
+            <slot></slot>
+          </span>
+          <span class='${u.e("suffix")}' part='suffix'>
+            <slot name='suffix'></slot>
+          </span>
+        </main>
+      </div>
+    `;
   }
-  $beforeUnmounted() {
-    clearInterval(n(this, d));
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-y = new WeakMap(), b = new WeakMap(), v = new WeakMap(), S = new WeakMap(), M = new WeakMap(), d = new WeakMap(), c = new WeakMap(), w = new WeakMap(), g = new WeakMap();
-window.customElements.get("ea-countdown") || window.customElements.define("ea-countdown", $);
+  $beforeUnmount() {
+    this._timer && (clearInterval(this._timer), this._timer = null), this._alignTimeout && (clearTimeout(this._alignTimeout), this._alignTimeout = null);
+  }
+};
+d([
+  y(u.cb())
+], o.prototype, "_container", 2);
+d([
+  y(u.ce("header"))
+], o.prototype, "_header", 2);
+d([
+  y(u.ce("number"))
+], o.prototype, "_number", 2);
+d([
+  c({
+    type: String,
+    default: "",
+    observer(a) {
+      this._handleValueChange(a);
+    }
+  })
+], o.prototype, "value", 2);
+d([
+  c({
+    type: String,
+    default: "HH:mm:ss"
+  })
+], o.prototype, "format", 2);
+d([
+  c({
+    type: Number,
+    default: 1e3
+  })
+], o.prototype, "refreshInterval", 2);
+d([
+  c({
+    type: String,
+    default: "",
+    observer(a) {
+      this._header.textContent = a;
+    }
+  })
+], o.prototype, "heading", 2);
+d([
+  D({ type: String, default: "" })
+], o.prototype, "displayValue", 2);
+o = d([
+  M(T, { styles: [S] })
+], o);
+const U = o;
 export {
-  $ as EaCountdown
+  o as EaCountdown,
+  U as default
 };