easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-descriptions.js

@@ -1,74 +1,89 @@
-var z = Object.defineProperty;
-var x = (l) => {
-  throw TypeError(l);
+var O = Object.defineProperty;
+var T = (s) => {
+  throw TypeError(s);
 };
-var A = (l, s, t) => s in l ? z(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
-var S = (l, s, t) => A(l, typeof s != "symbol" ? s + "" : s, t), R = (l, s, t) => s.has(l) || x("Cannot " + t);
-var d = (l, s, t) => (R(l, s, "read from private field"), t ? t.call(l) : s.get(l)), c = (l, s, t) => s.has(l) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(l) : s.set(l, t), b = (l, s, t, e) => (R(l, s, "write to private field"), e ? e.call(l, t) : s.set(l, t), t);
-import { B as q } from "./Base.js";
-import { s as L } from "../css/ea-descriptions-item.style.js";
-import { s as N } from "../css/ea-descriptions.style.js";
-import { E as i } from "../utils/Utils.js";
-class k extends q {
+var P = (s, l, t) => l in s ? O(s, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[l] = t;
+var M = (s, l, t) => P(s, typeof l != "symbol" ? l + "" : l, t), N = (s, l, t) => l.has(s) || T("Cannot " + t);
+var i = (s, l, t) => (N(s, l, "read from private field"), t ? t.call(s) : l.get(s)), r = (s, l, t) => l.has(s) ? T("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(s) : l.set(s, t), h = (s, l, t, e) => (N(s, l, "write to private field"), e ? e.call(s, t) : l.set(s, t), t), o = (s, l, t) => (N(s, l, "access private method"), t);
+import { B } from "./Base.js";
+import { s as U } from "../css/ea-descriptions-item.style.js";
+import { s as V } from "../css/ea-descriptions.style.js";
+import { E as b } from "../utils/Utils.js";
+var C, g, c, u, I;
+class F extends B {
   constructor() {
     super();
-    S(this, "state", this.properties({
+    r(this, c);
+    /** @type {HTMLSpanElement | null} */
+    r(this, C);
+    /** @type {MutationObserver | null} */
+    r(this, g, null);
+    M(this, "state", this.properties({
       label: {
         type: String,
         default: "",
         observer: () => {
+          i(this, C).textContent = this.label, o(this, c, u).call(this);
         }
       },
       colspan: {
         type: Number,
         default: 1,
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       rowspan: {
         type: Number,
         default: 1,
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       align: {
         type: ["left", "center", "right"],
         default: "",
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       "label-align": {
         type: ["left", "center", "right"],
         default: "",
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       width: {
         type: String,
         default: "",
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       "label-width": {
         type: String,
         default: "",
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       "label-part": {
         type: String,
         default: "",
         observer: () => {
+          o(this, c, u).call(this);
         }
       },
       "content-part": {
         type: String,
         default: "",
         observer: () => {
+          o(this, c, u).call(this);
         }
       }
     }));
-    this.stylesheet = L, this.$render();
+    this.stylesheet = U, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -87,44 +102,67 @@ class k extends q {
   $render() {
     this.shadowRoot.innerHTML = `
       <div class='ea-descriptions-item' part='container'>
-        <slot></slot>
+        <span class='ea-descriptions-item__label' part='label'>${this.label}</span>
+        <span class='ea-descriptions-item__content' part='content'>
+          <slot></slot>
+        </span>
       </div>
-    `;
+    `, h(this, C, this.shadowRoot.querySelector(".ea-descriptions-item__label"));
   }
   connectedCallback() {
-    super.connectedCallback(), this.emit("ea-descriptions-item-ready", {
-      bubbles: !0,
-      composed: !0
-    });
+    super.connectedCallback(), o(this, c, I).call(this);
+  }
+  $beforeUnmounted() {
+    i(this, g) && (i(this, g).disconnect(), h(this, g, null));
   }
 }
-window.customElements.get("ea-descriptions-item") || window.customElements.define("ea-descriptions-item", k);
-var w, f, y, E, _, v, $, C;
-class H extends q {
+C = new WeakMap(), g = new WeakMap(), c = new WeakSet(), u = function() {
+  this.emit("ea-descriptions-item-change", {
+    bubbles: !0,
+    composed: !0
+  });
+}, I = function() {
+  h(this, g, new MutationObserver(() => {
+    o(this, c, u).call(this);
+  })), i(this, g).observe(this, {
+    childList: !0,
+    subtree: !0,
+    characterData: !0
+  });
+};
+window.customElements.get("ea-descriptions-item") || window.customElements.define("ea-descriptions-item", F);
+var S, m, j, q, x, R, w, L, z, A, H, D, f, E;
+class G extends B {
   constructor() {
     super();
+    r(this, f);
     /** @type {HTMLElement} */
-    c(this, w);
+    r(this, S);
     /** @type {HTMLElement} */
-    c(this, f);
+    r(this, m);
     /** @type {HTMLElement} */
-    c(this, y);
+    r(this, j);
     /** @type {HTMLElement} */
-    c(this, E);
+    r(this, q);
     /** @type {HTMLElement} */
-    c(this, _);
-    S(this, "state", this.properties({
+    r(this, x);
+    /** @type {HTMLSlotElement} */
+    r(this, R);
+    /** @type {AbortController | null} */
+    r(this, w);
+    M(this, "state", this.properties({
       column: {
         type: Number,
         default: 3,
         observer: () => {
+          o(this, f, E).call(this);
         }
       },
       title: {
         type: String,
         default: "",
         observer: (t) => {
-          d(this, y).textContent = t;
+          i(this, j).textContent = t;
         }
       },
       border: {
@@ -138,6 +176,7 @@ class H extends q {
         type: ["horizontal", "vertical"],
         default: "horizontal",
         observer: () => {
+          o(this, f, E).call(this);
         }
       },
       size: {
@@ -161,11 +200,11 @@ class H extends q {
      * @param {number} column 列数
      * @return {Array<Array<Object>>} 分割后的二维数组
      */
-    c(this, v, (t, e) => {
+    r(this, L, (t, e) => {
       const a = [];
       return t.forEach((n) => {
-        var j;
-        const r = a.length, u = e % ((j = a[r]) == null ? void 0 : j.length) || 0, p = {
+        var k;
+        const d = a.length, v = e % ((k = a[d]) == null ? void 0 : k.length) || 0, _ = {
           label: n.label,
           content: n.innerHTML,
           colspan: n.colspan,
@@ -177,33 +216,33 @@ class H extends q {
           "label-part": n["label-part"],
           "content-part": n["content-part"]
         };
-        for (let o = r; o < r + p.rowspan; o++) {
-          a[o] || (a[o] = []), p.rowspan > 1 && o !== r && (a[o][u] = {
+        for (let p = d; p < d + _.rowspan; p++) {
+          a[p] || (a[p] = []), _.rowspan > 1 && p !== d && (a[p][v] = {
             colspan: 1,
             rowspan: 1,
             placeholder: !0
           });
-          for (let h = u; h < u + p.colspan; h++)
-            p.colspan > 1 && h !== u && (a[o][h] = {
+          for (let y = v; y < v + _.colspan; y++)
+            _.colspan > 1 && y !== v && (a[p][y] = {
               colspan: 1,
               rowspan: 1,
               placeholder: !0
             });
         }
-        let g = a.findIndex((o) => o.length < e);
-        g = g === -1 ? r : g, a[r].reduce((o, h) => o + h.colspan, 0) + p.colspan <= e ? a[g].push(p) : a[g][u] = p;
-      }), a.map((n) => n.filter((r) => !r.placeholder)).filter((n) => n.length);
+        let $ = a.findIndex((p) => p.length < e);
+        $ = $ === -1 ? d : $, a[d].reduce((p, y) => p + y.colspan, 0) + _.colspan <= e ? a[$].push(_) : a[$][v] = _;
+      }), a.map((n) => n.filter((d) => !d.placeholder)).filter((n) => n.length);
     });
     /**
      * 获取 Descriptions 组件的样式类型
      * @return {string} 变体名称
      */
-    c(this, $, () => this.direction === "vertical" ? "vertical" : this.border ? "border" : "normal");
+    r(this, z, () => this.direction === "vertical" ? "vertical" : this.border ? "border" : "normal");
     /**
      * Descriptions 组件的样式类型渲染器
      */
-    c(this, C, {
-      normal: (t) => i.EaElement.h(
+    r(this, A, {
+      normal: (t) => b.EaElement.h(
         "tr",
         "ea-descriptions__tr",
         {
@@ -213,19 +252,19 @@ class H extends q {
           ].join(" ")
         },
         t.map(
-          (e, a) => i.EaElement.h(
+          (e, a) => b.EaElement.h(
             "td",
             "ea-descriptions__td",
             {
               part: "col-cell",
               [e.rowspan > 1 ? "rowspan" : ""]: e.rowspan,
-              [e.colspan > 1 || a === t.length - 1 && t.length < this.column ? "colspan" : ""]: a === t.length - 1 && t.length < this.column && t.reduce((n, r) => n + r.colspan, 0) < this.column ? this.column - t.reduce((n, r) => n + r.colspan, 0) + (a < 1 ? 1 : a) : e.colspan,
+              [e.colspan > 1 || a === t.length - 1 && t.length < this.column ? "colspan" : ""]: a === t.length - 1 && t.length < this.column && t.reduce((n, d) => n + d.colspan, 0) < this.column ? this.column - t.reduce((n, d) => n + d.colspan, 0) + (a < 1 ? 1 : a) : e.colspan,
               style: [
                 e.width ? `--ea-descriptions-item-width: ${e.width}` : ""
               ]
             },
             [
-              i.EaElement.h(
+              b.EaElement.h(
                 "span",
                 "ea-descriptions__label",
                 {
@@ -238,7 +277,7 @@ class H extends q {
                 },
                 e.label
               ),
-              i.EaElement.h(
+              b.EaElement.h(
                 "span",
                 "ea-descriptions__content",
                 {
@@ -254,7 +293,7 @@ class H extends q {
           )
         )
       ),
-      border: (t) => i.EaElement.h(
+      border: (t) => b.EaElement.h(
         "tr",
         "ea-descriptions__tr",
         {
@@ -262,7 +301,7 @@ class H extends q {
         },
         t.map(
           (e, a) => [
-            i.EaElement.h(
+            b.EaElement.h(
               "td",
               "ea-descriptions__label",
               {
@@ -279,7 +318,7 @@ class H extends q {
               },
               e.label
             ),
-            i.EaElement.h(
+            b.EaElement.h(
               "td",
               "ea-descriptions__content",
               {
@@ -298,14 +337,14 @@ class H extends q {
         )
       ),
       vertical: (t) => [
-        i.EaElement.h(
+        b.EaElement.h(
           "tr",
           "ea-descriptions__tr",
           {
             part: "row row-label"
           },
           t.map(
-            (e, a) => i.EaElement.h(
+            (e, a) => b.EaElement.h(
               "th",
               "ea-descriptions__label ea-descriptions__th",
               {
@@ -324,14 +363,14 @@ class H extends q {
             )
           )
         ),
-        i.EaElement.h(
+        b.EaElement.h(
           "tr",
           "ea-descriptions__tr",
           {
             part: "row row-content"
           },
           t.map(
-            (e, a) => i.EaElement.h(
+            (e, a) => b.EaElement.h(
               "td",
               "ea-descriptions__content ea-descriptions__td",
               {
@@ -350,7 +389,20 @@ class H extends q {
         )
       ].join("")
     });
-    this.stylesheet = N, this.$render();
+    /**
+     * 监听默认插槽变化
+     */
+    r(this, H, () => {
+      o(this, f, E).call(this);
+    });
+    /**
+     * 监听子元素变化
+     * @param {Event} e
+     */
+    r(this, D, (t) => {
+      t.stopImmediatePropagation(), o(this, f, E).call(this);
+    });
+    this.stylesheet = V, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -372,10 +424,11 @@ class H extends q {
       "--border": this.border,
       ["--" + this.size]: this.size
     });
-    return d(this, w).className = t, t;
+    return i(this, S).className = t, t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
+      <slot id='defaultSlot' part='default-slot'></slot>
       <table class='ea-descriptions' part='container'>
         <caption class='ea-descriptions__caption' part='caption'>
           <section class='ea-descriptions__title' part='title'>
@@ -388,24 +441,34 @@ class H extends q {
         <tbody class='ea-descriptions__body' part='body'>
         </tbody>
       </table>
-    `, b(this, w, this.shadowRoot.querySelector(".ea-descriptions")), b(this, f, this.shadowRoot.querySelector(".ea-descriptions__caption")), b(this, y, this.shadowRoot.querySelector(".ea-descriptions__title")), b(this, E, this.shadowRoot.querySelector(".ea-descriptions__extra")), b(this, _, this.shadowRoot.querySelector(".ea-descriptions__body"));
+    `, h(this, S, this.shadowRoot.querySelector(".ea-descriptions")), h(this, m, this.shadowRoot.querySelector(".ea-descriptions__caption")), h(this, j, this.shadowRoot.querySelector(
+      ".ea-descriptions__title slot[name='title']"
+    )), h(this, q, this.shadowRoot.querySelector(".ea-descriptions__extra")), h(this, x, this.shadowRoot.querySelector(".ea-descriptions__body")), h(this, R, this.shadowRoot.querySelector("#defaultSlot"));
   }
   async connectedCallback() {
-    super.connectedCallback();
-    const t = [...this.querySelectorAll("ea-descriptions-item")];
-    await Promise.all([
-      t.map(
-        (e) => i.EaElement.addAsyncEventListener(
-          e,
-          "ea-descriptions-item-ready"
-        )
-      )
-    ]), d(this, _).innerHTML = d(this, v).call(this, t, this.column).map(d(this, C)[d(this, $).call(this)]).join("");
+    var t;
+    super.connectedCallback(), await customElements.whenDefined("ea-descriptions-item"), (t = i(this, w)) == null || t.abort(), h(this, w, new AbortController()), o(this, f, E).call(this), this.addEventListener(
+      "ea-descriptions-item-change",
+      i(this, D),
+      { signal: i(this, w).signal }
+    ), i(this, R).addEventListener("slotchange", i(this, H), {
+      signal: i(this, w).signal
+    });
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = i(this, w)) == null || t.abort();
   }
 }
-w = new WeakMap(), f = new WeakMap(), y = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), v = new WeakMap(), $ = new WeakMap(), C = new WeakMap();
-window.customElements.get("ea-descriptions") || window.customElements.define("ea-descriptions", H);
+S = new WeakMap(), m = new WeakMap(), j = new WeakMap(), q = new WeakMap(), x = new WeakMap(), R = new WeakMap(), w = new WeakMap(), L = new WeakMap(), z = new WeakMap(), A = new WeakMap(), H = new WeakMap(), D = new WeakMap(), f = new WeakSet(), /**
+ * 渲染默认插槽内容
+ */
+E = function() {
+  const t = [...this.querySelectorAll("ea-descriptions-item")];
+  i(this, x).innerHTML = i(this, L).call(this, t, this.column).map(i(this, A)[i(this, z).call(this)]).join("");
+};
+window.customElements.get("ea-descriptions") || window.customElements.define("ea-descriptions", G);
 export {
-  H as EaDescriptions,
-  k as EaDescriptionsItem
+  G as EaDescriptions,
+  F as EaDescriptionsItem
 };

package/dist/components/ea-dialog.js

@@ -9,7 +9,7 @@ import { EaOverlay as E } from "./ea-overlay.js";
 import { s as B } from "../css/ea-dialog.style.js";
 import { t as C } from "../utils/timeout.js";
 var n, h, c, p, r, i, b, f, g;
-class A extends E {
+class k extends E {
   constructor() {
     super();
     /** @type {HTMLElement} */
@@ -168,7 +168,7 @@ class A extends E {
         <header class='ea-dialog-main__header' part='header'>
           <slot name="header">
             <span class='ea-dialog-main__title' part='title'></span>
-            <ea-icon class='ea-dialog-main__close-icon' icon='icon-cancel' part='close-icon'></ea-icon>          
+            <ea-icon class='ea-dialog-main__close-icon' name='xmark' part='close-icon'></ea-icon>          
           </slot>
         </header>
         <main class='ea-dialog-main__content' part='content'>
@@ -243,7 +243,7 @@ class A extends E {
   }
 }
 n = new WeakMap(), h = new WeakMap(), c = new WeakMap(), p = new WeakMap(), r = new WeakMap(), i = new WeakMap(), b = new WeakMap(), f = new WeakMap(), g = new WeakMap();
-window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", A);
+window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", k);
 export {
-  A as EaDialog
+  k as EaDialog
 };