easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-collapse.js

@@ -1,22 +1,22 @@
-var q = Object.defineProperty;
-var S = (t) => {
-  throw TypeError(t);
+var k = Object.defineProperty;
+var x = (s) => {
+  throw TypeError(s);
 };
-var $ = (t, s, e) => s in t ? q(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var h = (t, s, e) => $(t, typeof s != "symbol" ? s + "" : s, e), E = (t, s, e) => s.has(t) || S("Cannot " + e);
-var i = (t, s, e) => (E(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? S("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), r = (t, s, e, a) => (E(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { B as x } from "./Base.js";
-import { s as R } from "../css/ea-collapse.style.js";
-import { s as k } from "../css/ea-collapse-item.style.js";
-var v, n, d, f, g, y;
-class N extends x {
+var N = (s, i, t) => i in s ? k(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var p = (s, i, t) => N(s, typeof i != "symbol" ? i + "" : i, t), R = (s, i, t) => i.has(s) || x("Cannot " + t);
+var e = (s, i, t) => (R(s, i, "read from private field"), t ? t.call(s) : i.get(s)), o = (s, i, t) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), r = (s, i, t, a) => (R(s, i, "write to private field"), a ? a.call(s, t) : i.set(s, t), t);
+import { B as $ } from "./Base.js";
+import { s as B } from "../css/ea-collapse.style.js";
+import { s as L } from "../css/ea-collapse-item.style.js";
+var g, c, d, y, C, w;
+class P extends $ {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    o(this, v);
+    o(this, g);
     /** @type {AbortController} */
-    o(this, n);
-    h(this, "state", this.properties({
+    o(this, c);
+    p(this, "state", this.properties({
       accordion: {
         type: Boolean,
         default: !1,
@@ -30,23 +30,24 @@ class N extends x {
           Array: () => !this.accordion
         },
         default: () => this.accordion ? "" : [],
-        observer: (e) => {
-          this.setActiveNames(e);
+        observer: (t) => {
+          this.setActiveNames(t);
         }
       },
       "expand-icon-position": {
         type: ["left", "right"],
         default: "right",
-        observer: (e) => {
+        observer: (t) => {
           this.querySelectorAll("ea-collapse-item").forEach((a) => {
-            a["expand-icon-position"] = e;
+            a["expand-icon-position"] = t;
           });
         }
       }
     }));
-    h(this, "fnState", this.properties({
+    p(this, "fnState", this.properties({
       beforeCollapse: {
         props: !0,
+        rawFunction: !0,
         type: Function,
         default: null,
         observer: () => {
@@ -57,20 +58,20 @@ class N extends x {
      * 更新手风琴模式下的折叠状态
      * @param {string} [activeName]
      */
-    o(this, d, (e = this.active) => {
+    o(this, d, (t = this.active) => {
       [...this.querySelectorAll("ea-collapse-item")].forEach(
-        (l) => l.toggleAttribute("active", l.getAttribute("name") === e)
+        (l) => l.toggleAttribute("active", l.getAttribute("name") === t)
       );
     });
     /**
      * 更新普通模式下的折叠状态
      * @param {string[]} [activeNames]
      */
-    o(this, f, (e = this.active) => {
+    o(this, y, (t = this.active) => {
       [...this.querySelectorAll("ea-collapse-item")].forEach(
         (l) => l.toggleAttribute(
           "active",
-          e.includes(l.getAttribute("name"))
+          t.includes(l.getAttribute("name"))
         )
       );
     });
@@ -78,9 +79,9 @@ class N extends x {
      * 折叠项点击事件处理
      * @param {CustomEvent} e
      */
-    o(this, g, async (e) => {
-      e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation();
-      const { name: a, el: l } = e.detail;
+    o(this, C, async (t) => {
+      t.preventDefault(), t.stopImmediatePropagation(), t.stopPropagation();
+      const { name: a, el: l } = t.detail;
       if (typeof this.beforeCollapse == "function")
         try {
           if (!await this.beforeCollapse({ name: a, el: l })) return;
@@ -88,10 +89,10 @@ class N extends x {
           return;
         }
       if (this.accordion)
-        i(this, d).call(this, a), this.active = a;
+        e(this, d).call(this, a), this.active = a;
       else
         try {
-          this.active.includes(a) ? (this.active = this.active.filter((_) => _ !== a), l.toggleAttribute("active", !1)) : (this.active = [...this.active, a], l.toggleAttribute("active", this.active.includes(a)));
+          this.active.includes(a) ? (this.active = this.active.filter((q) => q !== a), l.toggleAttribute("active", !1)) : (this.active = [...this.active, a], l.toggleAttribute("active", this.active.includes(a)));
         } catch {
           console.error(
             `${this.tagName}: When 'accordion' is false, 'active' should be an Array type.`,
@@ -110,7 +111,7 @@ class N extends x {
     /**
      * 初始化折叠项的唯一标识及折叠状态
      */
-    o(this, y, () => {
+    o(this, w, () => {
       [...this.querySelectorAll("ea-collapse-item")].forEach((a, l) => {
         a.getAttribute("name") || a.setAttribute("name", l);
       });
@@ -119,10 +120,10 @@ class N extends x {
      * 设置折叠项的展开状态
      * @param {string | string[]} newVal
      */
-    h(this, "setActiveNames", (e) => {
-      this.accordion ? i(this, d).call(this, e) : i(this, f).call(this, e);
+    p(this, "setActiveNames", (t) => {
+      this.accordion ? e(this, d).call(this, t) : e(this, y).call(this, t);
     });
-    this.stylesheet = R, this.$render();
+    this.stylesheet = B, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "accordion", "expand-icon-position"];
@@ -132,43 +133,47 @@ class N extends x {
       <div class='ea-collapse' part='container'>
         <slot></slot>
       </div>
-    `, r(this, v, this.shadowRoot.querySelector(".ea-collapse"));
+    `, r(this, g, this.shadowRoot.querySelector(".ea-collapse"));
   }
   connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = i(this, n)) == null || e.abort(), r(this, n, new AbortController()), i(this, y).call(this), this.addEventListener("collapse-item-click", i(this, g), {
-      signal: i(this, n).signal
+    var t;
+    super.connectedCallback(), (t = e(this, c)) == null || t.abort(), r(this, c, new AbortController()), e(this, w).call(this), this.addEventListener("collapse-item-click", e(this, C), {
+      signal: e(this, c).signal
     });
   }
   $beforeUnmounted() {
-    var e;
-    (e = i(this, n)) == null || e.abort();
+    var t;
+    (t = e(this, c)) == null || t.abort();
   }
 }
-v = new WeakMap(), n = new WeakMap(), d = new WeakMap(), f = new WeakMap(), g = new WeakMap(), y = new WeakMap();
-window.customElements.get("ea-collapse") || window.customElements.define("ea-collapse", N);
-var p, u, m, C, b, c, w, A;
-class B extends x {
+g = new WeakMap(), c = new WeakMap(), d = new WeakMap(), y = new WeakMap(), C = new WeakMap(), w = new WeakMap();
+window.customElements.get("ea-collapse") || window.customElements.define("ea-collapse", P);
+var h, u, A, m, S, b, v, n, f, _, E;
+class H extends $ {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    o(this, p);
+    o(this, h);
     /** @type {HTMLElement} */
     o(this, u);
     /** @type {HTMLElement} */
+    o(this, A);
+    /** @type {HTMLSlotElement} */
     o(this, m);
     /** @type {HTMLElement} */
-    o(this, C);
+    o(this, S);
     /** @type {HTMLElement} */
     o(this, b);
+    /** @type {HTMLSlotElement} */
+    o(this, v);
     /** @type {AbortController} */
-    o(this, c);
-    h(this, "state", this.properties({
+    o(this, n);
+    p(this, "state", this.properties({
       title: {
         type: String,
         default: "",
-        observer: (e) => {
-          i(this, m).textContent = e;
+        observer: (t) => {
+          e(this, m).textContent = t;
         }
       },
       name: {
@@ -194,8 +199,8 @@ class B extends x {
       active: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          i(this, w).call(this, e);
+        observer: (t) => {
+          e(this, f).call(this, t);
         }
       }
     }));
@@ -203,18 +208,20 @@ class B extends x {
      * 更新折叠面板高度
      * @param {boolean} isActive
      */
-    o(this, w, (e = this.active) => {
-      i(this, p).style.setProperty(
-        "--ea-collapse-item-content-height",
-        e ? `${i(this, b).scrollHeight}px` : "0"
-      );
+    o(this, f, (t = this.active) => {
+      queueMicrotask(() => {
+        e(this, h).style.setProperty(
+          "--ea-collapse-item-content-height",
+          t ? `${e(this, b).scrollHeight}px` : "0"
+        );
+      });
     });
     /**
      * 折叠面板 展开/收起 事件处理
      * @param {Event} e
      */
-    o(this, A, (e) => {
-      e.preventDefault(), e.stopImmediatePropagation(), !this.disabled && this.emit("collapse-item-click", {
+    o(this, _, (t) => {
+      t.preventDefault(), t.stopImmediatePropagation(), !this.disabled && this.emit("collapse-item-click", {
         detail: {
           name: this.name,
           el: this
@@ -223,7 +230,16 @@ class B extends x {
         cancelable: !0
       });
     });
-    this.stylesheet = k, this.$render();
+    /**
+     * 插槽变化事件处理
+     */
+    o(this, E, () => {
+      e(this, h).style.setProperty(
+        "--ea-collapse-item-content-height",
+        "auto"
+      ), e(this, f).call(this);
+    });
+    this.stylesheet = L, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -240,7 +256,7 @@ class B extends x {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
+    const t = this.computedClasslist(
       "ea-collapse-item",
       {
         ["--indicator-" + this["expand-icon-position"]]: this["expand-icon-position"]
@@ -249,7 +265,7 @@ class B extends x {
         disabled: this.disabled
       }
     );
-    return i(this, p).className = e, e;
+    return e(this, h).className = t, t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -260,7 +276,7 @@ class B extends x {
           </span>
           <span class="ea-collapse-item__indicator" part="indicator">
             <slot name="icon">
-              <ea-icon class="default-expand-icon" icon="icon-angle-down" part="icon"></ea-icon>
+              <ea-icon class="default-expand-icon" name="angle-down" part="icon"></ea-icon>
             </slot>
           </span>
         </div>
@@ -268,26 +284,30 @@ class B extends x {
           <slot></slot>
         </div>
       </div>
-    `, r(this, p, this.shadowRoot.querySelector(".ea-collapse-item")), r(this, u, this.shadowRoot.querySelector(
+    `, r(this, h, this.shadowRoot.querySelector(".ea-collapse-item")), r(this, u, this.shadowRoot.querySelector(
       ".ea-collapse-item__title-wrap"
-    )), r(this, m, this.shadowRoot.querySelector(".ea-collapse-item__title")), r(this, C, this.shadowRoot.querySelector(
+    )), r(this, A, this.shadowRoot.querySelector(".ea-collapse-item__title")), r(this, m, this.shadowRoot.querySelector(
+      ".ea-collapse-item__title slot"
+    )), r(this, S, this.shadowRoot.querySelector(
       ".ea-collapse-item__title-icon"
-    )), r(this, b, this.shadowRoot.querySelector(".ea-collapse-item__content")), this.updateContainerClasslist();
+    )), r(this, b, this.shadowRoot.querySelector(".ea-collapse-item__content")), r(this, v, this.shadowRoot.querySelector("slot:not([name])")), this.updateContainerClasslist();
   }
   connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = i(this, c)) == null || e.abort(), r(this, c, new AbortController()), i(this, u).addEventListener("click", i(this, A), {
-      signal: i(this, c).signal
+    var t;
+    super.connectedCallback(), (t = e(this, n)) == null || t.abort(), r(this, n, new AbortController()), e(this, u).addEventListener("click", e(this, _), {
+      signal: e(this, n).signal
+    }), e(this, v).addEventListener("slotchange", e(this, E), {
+      signal: e(this, n).signal
     });
   }
   $beforeUnmounted() {
-    var e;
-    (e = i(this, c)) == null || e.abort();
+    var t;
+    (t = e(this, n)) == null || t.abort();
   }
 }
-p = new WeakMap(), u = new WeakMap(), m = new WeakMap(), C = new WeakMap(), b = new WeakMap(), c = new WeakMap(), w = new WeakMap(), A = new WeakMap();
-window.customElements.get("ea-collapse-item") || window.customElements.define("ea-collapse-item", B);
+h = new WeakMap(), u = new WeakMap(), A = new WeakMap(), m = new WeakMap(), S = new WeakMap(), b = new WeakMap(), v = new WeakMap(), n = new WeakMap(), f = new WeakMap(), _ = new WeakMap(), E = new WeakMap();
+window.customElements.get("ea-collapse-item") || window.customElements.define("ea-collapse-item", H);
 export {
-  N as EaCollapse,
-  B as EaCollapseItem
+  P as EaCollapse,
+  H as EaCollapseItem
 };