easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-container.js

@@ -1,93 +1,121 @@
-var u = Object.defineProperty;
-var h = (t) => {
+var b = Object.defineProperty;
+var f = (t) => {
   throw TypeError(t);
 };
-var p = (t, s, e) => s in t ? u(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var r = (t, s, e) => p(t, typeof s != "symbol" ? s + "" : s, e), m = (t, s, e) => s.has(t) || h("Cannot " + e);
-var i = (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), n = (t, s, e, a) => (m(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { B as o } from "./Base.js";
-import { s as f } from "../css/ea-container.style.js";
-import { s as w } from "../css/ea-header.style.js";
-import { s as y } from "../css/ea-main.style.js";
-import { s as b } from "../css/ea-footer.style.js";
-import { s as g } from "../css/ea-aside.style.js";
-var c;
-class E extends o {
+var g = (t, s, e) => s in t ? b(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var n = (t, s, e) => g(t, typeof s != "symbol" ? s + "" : s, e), y = (t, s, e) => s.has(t) || f("Cannot " + e);
+var r = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), a = (t, s, e, d) => (y(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
+import { B as c } from "./Base.js";
+import { s as w } from "../css/ea-container.style.js";
+import { s as C } from "../css/ea-header.style.js";
+import { s as E } from "../css/ea-main.style.js";
+import { s as $ } from "../css/ea-footer.style.js";
+import { s as v } from "../css/ea-aside.style.js";
+var h, l, i, u;
+class S extends c {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, c);
-    /** 
+    o(this, h);
+    /** @type {SlotElement} */
+    o(this, l);
+    /** @type {AbortController} */
+    o(this, i);
+    /**
      * @typedef {Object} State
      * @property {string} direction 排列方向
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       direction: {
         type: ["horizontal", "vertical"],
         default: "horizontal",
-        observer: (e) => {
-          this.style.setProperty("--ea-container-direction", e === "vertical" ? "column" : "row");
+        observer: () => {
+          this.updateContainerClasslist();
         }
       }
     }));
-    this.stylesheet = f, this.$render();
+    /**
+     * 处理槽位变化事件
+     */
+    o(this, u, () => {
+      const e = [...this.querySelectorAll("& > *")].map(
+        (d) => d.tagName.toLowerCase()
+      );
+      this.hasAttribute("direction") || (e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal");
+    });
+    this.stylesheet = w, this.$render();
   }
   static get observedAttributes() {
-    return ["direction"];
+    return [...super.observedAttributes, "direction"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist("ea-container", {
+      [`--${this.direction}`]: this.direction
+    });
+    return r(this, h).className = e, e;
   }
   $render() {
     this.shadowRoot.innerHTML = `
-            <div class="ea-container" part="container">
-                <slot></slot>
-            </div>
-        `, n(this, c, this.shadowRoot.querySelector(".ea-container"));
+        <div class="ea-container" part="container">
+            <slot></slot>
+        </div>
+    `, a(this, h, this.shadowRoot.querySelector(".ea-container")), a(this, l, this.shadowRoot.querySelector("slot"));
   }
   connectedCallback() {
-    super.connectedCallback();
-    const e = [...this.children].map((a) => a.tagName.toLowerCase());
-    e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal";
+    var e;
+    super.connectedCallback(), (e = r(this, i)) == null || e.abort(), a(this, i, new AbortController()), r(this, l).addEventListener("slotchange", r(this, u), {
+      signal: r(this, i).signal
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = r(this, i)) == null || e.abort();
   }
 }
-c = new WeakMap();
-customElements.get("ea-container") || customElements.define("ea-container", E);
-class $ extends o {
+h = new WeakMap(), l = new WeakMap(), i = new WeakMap(), u = new WeakMap();
+customElements.get("ea-container") || customElements.define("ea-container", S);
+class k extends c {
   constructor() {
     super();
-    /** 
+    /**
      * @typedef {Object} State
      * @property {string} height
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       height: {
         type: String,
         default: "60px",
         observer: (e) => {
-          this.style.setProperty("--ea-header-height", 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");
         }
       }
     }));
-    this.stylesheet = w, this.$render();
+    this.stylesheet = C, this.$render();
   }
   static get observedAttributes() {
     return ["height"];
   }
   $render() {
     this.shadowRoot.innerHTML = `
-            <header class="ea-header" part="container">
-                <slot></slot>
-            </header>
-        `;
+      <header class="ea-header" part="container">
+        <slot></slot>
+      </header>
+    `;
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-window.customElements.get("ea-header") || window.customElements.define("ea-header", $);
-class v extends o {
+window.customElements.get("ea-header") || window.customElements.define("ea-header", k);
+class x extends c {
   constructor() {
-    super(), this.stylesheet = y, this.$render();
+    super(), this.stylesheet = E, this.$render();
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -100,27 +128,28 @@ class v extends o {
     super.connectedCallback();
   }
 }
-window.customElements.get("ea-main") || window.customElements.define("ea-main", v);
-var d;
-class C extends o {
+window.customElements.get("ea-main") || window.customElements.define("ea-main", x);
+var p;
+class A extends c {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, d);
-    /** 
+    o(this, p);
+    /**
      * @typedef {Object} State
+     * @property {string} height
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       height: {
         type: String,
         default: "60px",
         observer: (e) => {
-          this.style.setProperty("--ea-footer-height", 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");
         }
       }
     }));
-    this.stylesheet = b, this.$render();
+    this.stylesheet = $, this.$render();
   }
   static get observedAttributes() {
     return ["height"];
@@ -130,25 +159,25 @@ class C extends o {
             <footer class="ea-footer" part="container">
                 <slot></slot>
             </footer>
-        `, n(this, d, this.shadowRoot.querySelector(".ea-footer"));
+        `, a(this, p, this.shadowRoot.querySelector(".ea-footer"));
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-d = new WeakMap();
-window.customElements.get("ea-footer") || window.customElements.define("ea-footer", C);
-var l;
-class k extends o {
+p = new WeakMap();
+window.customElements.get("ea-footer") || window.customElements.define("ea-footer", A);
+var m;
+class R extends c {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, l);
-    /** 
+    o(this, m);
+    /**
      * @typedef {Object} State
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       width: {
         type: String,
         default: "300px",
@@ -157,7 +186,7 @@ class k extends o {
         }
       }
     }));
-    this.stylesheet = g, this.$render();
+    this.stylesheet = v, this.$render();
   }
   static get observedAttributes() {
     return ["width"];
@@ -167,11 +196,11 @@ class k extends o {
             <aside class="ea-aside" part="container">
                 <slot></slot>
             </aside>
-        `, n(this, l, this.shadowRoot.querySelector(".ea-aside"));
+        `, a(this, m, this.shadowRoot.querySelector(".ea-aside"));
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-l = new WeakMap();
-window.customElements.get("ea-aside") || window.customElements.define("ea-aside", k);
+m = new WeakMap();
+window.customElements.get("ea-aside") || window.customElements.define("ea-aside", R);

package/dist/components/ea-countdown.js

@@ -1,48 +1,59 @@
 var I = Object.defineProperty;
-var x = (t) => {
+var H = (t) => {
   throw TypeError(t);
 };
-var O = (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) => O(t, typeof s != "symbol" ? s + "" : s, e), Y = (t, s, e) => s.has(t) || x("Cannot " + e);
-var n = (t, s, e) => (Y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), f = (t, s, e) => s.has(t) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), d = (t, s, e, l) => (Y(t, s, "write to private field"), l ? l.call(t, e) : s.set(t, e), e);
+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 { d as q } from "./ea-calendar2.js";
-import { E as k, a as N } from "./ea-statistic2.js";
-var v, w, p, b, S, u, o, y, M;
-class U extends k {
+import { p as k } from "../utils/parseTime.js";
+class U extends Event {
+  constructor(s) {
+    super("ea-finish", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = s;
+  }
+}
+var y, b, v, S, M, d, c, w, g;
+class $ extends O {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    f(this, v);
-    /** @type {HTMLElement} */
-    f(this, w);
-    /** @type {HTMLElement} */
-    f(this, p);
+    f(this, y);
     /** @type {HTMLElement} */
     f(this, b);
     /** @type {HTMLElement} */
+    f(this, v);
+    /** @type {HTMLElement} */
     f(this, S);
-    f(this, u, null);
-    f(this, o, null);
-    f(this, y, {
+    /** @type {HTMLElement} */
+    f(this, M);
+    f(this, d, null);
+    f(this, c, null);
+    f(this, w, {
       displayValue: ""
     });
     T(this, "state", this.properties({
       value: {
-        type: Date,
+        type: String,
         default: "",
         observer: (e) => {
-          n(this, u) && (clearInterval(n(this, u)), d(this, u, null)), n(this, o) && (clearTimeout(n(this, o)), d(this, o, null));
-          const l = () => {
-            const { diff: c, currentTime: m, displayValue: i } = n(this, M).call(this, e, this.format);
-            n(this, p).textContent = i, this.emit("change", { detail: { value: m, displayValue: i } }), (c <= 0 || !c) && (n(this, o) && (clearTimeout(n(this, o)), d(this, o, null)), n(this, u) && (clearInterval(n(this, u)), d(this, u, null)), this.dispatchEvent(
-              new N({ value: m, displayValue: i })
+          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 })
             ));
-          }, a = Number(this["refresh-interval"]) || 1e3, r = Date.now();
-          let h = a - r % a;
-          h === 0 && (h = a), l(), d(this, o, A(() => {
-            d(this, o, null), l(), d(this, u, setInterval(l, a));
-          }, h));
+          };
+          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: {
@@ -65,57 +76,67 @@ class U extends k {
      * @param {string} format
      * @return {{currentTime: number, diff: number, displayValue: string}}
      */
-    f(this, M, (e, l) => {
-      const a = q(), r = q(e), h = r.valueOf() - a.valueOf(), c = (C, R = 2) => `${C}`.padStart(R, "0");
-      if (h <= 0 || r.isBefore(a) || !h)
+    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)
         return {
-          currentTime: a.valueOf(),
-          diff: h,
+          currentTime: r.valueOf(),
+          diff: p,
           displayValue: "00:00:00"
         };
-      let m = r.diff(a, "year"), i = a.add(m, "year");
-      i.isAfter(r) && (m -= 1, i = a.add(m, "year"));
-      let V = r.diff(i, "month");
-      i = i.add(V, "month");
-      let D = r.diff(i, "day");
-      i = i.add(D, "day");
-      let g = r.diff(i, "hour");
-      i = i.add(g, "hour");
-      let E = r.diff(i, "minute");
-      i = i.add(E, "minute");
-      let H = r.diff(i, "second");
-      i = i.add(H, "second");
-      let _ = r.diff(i, "millisecond");
-      return !l.includes("YY") && l.includes("MM") && (V = Math.floor(r.diff(a, "month", !0))), !l.includes("MM") && l.includes("DD") && (D = Math.floor(r.diff(a, "day", !0))), !l.includes("DD") && l.includes("HH") && (g = Math.floor(r.diff(a, "hour", !0))), !l.includes("HH") && l.includes("mm") && (E = Math.floor(r.diff(a, "minute", !0))), !l.includes("mm") && l.includes("ss") && (H = Math.floor(r.diff(a, "second", !0))), !l.includes("ss") && l.includes("SSS") && (_ = Math.floor(r.diff(a, "millisecond", !0))), {
-        currentTime: a.valueOf(),
-        diff: h,
-        displayValue: l.replace("YYYY", c(m)).replace("MM", c(V)).replace("DD", c(D)).replace("HH", c(g)).replace("mm", c(E)).replace("ss", c(H)).replace("SSS", c(_, 3)).replace(/\[|\]/g, "")
+      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, "")
       };
     });
-    d(this, v, this.shadowRoot.querySelector(".ea-statistic")), d(this, w, this.shadowRoot.querySelector(".ea-statistic__number")), d(this, p, this.shadowRoot.querySelector(".ea-statistic__number")), d(this, b, this.shadowRoot.querySelector(".ea-statistic__prefix")), d(this, S, this.shadowRoot.querySelector(".ea-statistic__suffix"));
+    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, y).displayValue;
+    return n(this, w).displayValue;
   }
   set displayValue(e) {
-    n(this, y).displayValue = e;
+    n(this, w).displayValue = e;
   }
   // #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;
+  }
   connectedCallback() {
     super.connectedCallback();
   }
   $beforeUnmounted() {
-    clearInterval(n(this, u));
+    clearInterval(n(this, d));
   }
 }
-v = new WeakMap(), w = new WeakMap(), p = new WeakMap(), b = new WeakMap(), S = new WeakMap(), u = new WeakMap(), o = new WeakMap(), y = new WeakMap(), M = new WeakMap();
-window.customElements.get("ea-countdown") || window.customElements.define("ea-countdown", U);
+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", $);
 export {
-  U as EaCountdown
+  $ as EaCountdown
 };

package/dist/components/ea-date-picker.js

@@ -542,7 +542,7 @@ class Yt extends ft {
     this.shadowRoot.innerHTML = this.html(`
       <div class='${e.b()}' part='container'>
         <div class='${e.e("input-wrap")}' part='input-wrap'>
-          <ea-input class="${e.e("input")}" part='input' prefix-icon="icon-calendar-times-o" readonly></ea-input>
+          <ea-input class="${e.e("input")}" part='input' prefix-icon="calendar-xmark" readonly></ea-input>
         </div>
         <div class='${e.e("dropdown-wrap")}' part='dropdown-wrap'>
           <div class='${e.e("calendar-wrapper")}'>