easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-container.js

@@ -0,0 +1,214 @@
+import { E as p } from "../core/EaBase.ts.js";
+import { q as S, a as i, C as h, l as x } from "../core/decorator.js";
+import { E as D } from "../utils/Enum.ts.js";
+import { s as j } from "../css/ea-container.style.js";
+import { c } from "../utils/bem.ts.js";
+import { s as N } from "../css/ea-header.style.js";
+import { s as w } from "../css/ea-main.style.js";
+import { s as M } from "../css/ea-footer.style.js";
+import { s as T } from "../css/ea-aside.style.js";
+var G = Object.defineProperty, z = Object.getOwnPropertyDescriptor, y = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? z(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && G(r, a, t), t;
+};
+const g = "ea-container", $ = c(g), q = ["horizontal", "vertical"];
+let n = class extends p {
+  constructor() {
+    super(...arguments), this.direction = "horizontal";
+  }
+  updateContainerClasslist() {
+    const e = $({ [this.direction]: !0 });
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+  _handleSlotChange() {
+    if (this.hasAttribute("direction")) return;
+    const e = [...this.querySelectorAll("& > *")].map(
+      (r) => r.tagName.toLowerCase()
+    );
+    e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal";
+  }
+  $mount() {
+    this.updateContainerClasslist();
+  }
+};
+y([
+  S($.cb())
+], n.prototype, "_container", 2);
+y([
+  i({
+    type: D(q),
+    default: "horizontal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "direction", 2);
+y([
+  x("slotchange", "slot")
+], n.prototype, "_handleSlotChange", 1);
+n = y([
+  h(g, { styles: [j] })
+], n);
+var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, d = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? I(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && B(r, a, t), t;
+};
+const P = "ea-header", F = c(P);
+let u = class extends p {
+  constructor() {
+    super(...arguments), this.label = "", this.height = "60px";
+  }
+  html() {
+    return `
+      <header class="${F()}" part="container">
+        <slot></slot>
+      </header>
+    `;
+  }
+};
+d([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-header",
+      map: (e) => e || null
+    }
+  })
+], u.prototype, "label", 2);
+d([
+  i({
+    type: String,
+    default: "60px",
+    observer(e) {
+      e && CSS.supports("height", e) ? this.style.setProperty("--ea-header-height", e) : e ? this.style.setProperty("--ea-header-height", "60px") : this.style.setProperty("--ea-header-height", "auto");
+    }
+  })
+], u.prototype, "height", 2);
+u = d([
+  h(P, { styles: [N] })
+], u);
+var H = Object.defineProperty, L = Object.getOwnPropertyDescriptor, C = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? L(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && H(r, a, t), t;
+};
+const O = "ea-main", R = c(O);
+let _ = class extends p {
+  constructor() {
+    super(...arguments), this.label = "";
+  }
+  html() {
+    return `
+      <main class="${R()}" part="container">
+        <slot></slot>
+      </main>
+    `;
+  }
+};
+C([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-main",
+      map: (e) => e || null
+    }
+  })
+], _.prototype, "label", 2);
+_ = C([
+  h(O, { styles: [w] })
+], _);
+var Y = Object.defineProperty, J = Object.getOwnPropertyDescriptor, v = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? J(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && Y(r, a, t), t;
+};
+const E = "ea-footer", K = c(E);
+let f = class extends p {
+  constructor() {
+    super(...arguments), this.label = "", this.height = "60px";
+  }
+  html() {
+    return `
+      <footer class="${K()}" part="container">
+        <slot></slot>
+      </footer>
+    `;
+  }
+};
+v([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-footer",
+      map: (e) => e || null
+    }
+  })
+], f.prototype, "label", 2);
+v([
+  i({
+    type: String,
+    default: "60px",
+    observer(e) {
+      e && CSS.supports("height", e) ? this.style.setProperty("--ea-footer-height", e) : e ? this.style.setProperty("--ea-footer-height", "60px") : this.style.setProperty("--ea-footer-height", "auto");
+    }
+  })
+], f.prototype, "height", 2);
+f = v([
+  h(E, { styles: [M] })
+], f);
+var Q = Object.defineProperty, U = Object.getOwnPropertyDescriptor, b = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? U(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && Q(r, a, t), t;
+};
+const A = "ea-aside", W = c(A);
+let m = class extends p {
+  constructor() {
+    super(...arguments), this.label = "", this.width = "300px";
+  }
+  html() {
+    return `
+      <aside class="${W()}" part="container">
+        <slot></slot>
+      </aside>
+    `;
+  }
+};
+b([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-aside",
+      map: (e) => e || null
+    }
+  })
+], m.prototype, "label", 2);
+b([
+  i({
+    type: String,
+    default: "300px",
+    observer(e) {
+      this.style.setProperty("--ea-aside-width", e);
+    }
+  })
+], m.prototype, "width", 2);
+m = b([
+  h(A, { styles: [T] })
+], m);

package/dist/components/ea-countdown.js

@@ -0,0 +1,155 @@
+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 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(...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: i.valueOf(),
+          diff: n,
+          displayValue: "00:00:00"
+        };
+      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, "")
+      };
+    };
+  }
+  /** 处理 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);
+  }
+  updateContainerClasslist() {
+    const a = u();
+    return this._container.className = a, a;
+  }
+  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>
+    `;
+  }
+  $mount() {
+    this.updateContainerClasslist();
+  }
+  $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 {
+  o as EaCountdown,
+  U as default
+};