easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-collapse.js

@@ -0,0 +1,313 @@
+var k = Object.defineProperty;
+var x = (s) => {
+  throw TypeError(s);
+};
+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, g);
+    /** @type {AbortController} */
+    o(this, c);
+    p(this, "state", this.properties({
+      accordion: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      active: {
+        props: !0,
+        type: {
+          String: () => this.accordion,
+          Array: () => !this.accordion
+        },
+        default: () => this.accordion ? "" : [],
+        observer: (t) => {
+          this.setActiveNames(t);
+        }
+      },
+      "expand-icon-position": {
+        type: ["left", "right"],
+        default: "right",
+        observer: (t) => {
+          this.querySelectorAll("ea-collapse-item").forEach((a) => {
+            a["expand-icon-position"] = t;
+          });
+        }
+      }
+    }));
+    p(this, "fnState", this.properties({
+      beforeCollapse: {
+        props: !0,
+        rawFunction: !0,
+        type: Function,
+        default: null,
+        observer: () => {
+        }
+      }
+    }));
+    /**
+     * 更新手风琴模式下的折叠状态
+     * @param {string} [activeName]
+     */
+    o(this, d, (t = this.active) => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach(
+        (l) => l.toggleAttribute("active", l.getAttribute("name") === t)
+      );
+    });
+    /**
+     * 更新普通模式下的折叠状态
+     * @param {string[]} [activeNames]
+     */
+    o(this, y, (t = this.active) => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach(
+        (l) => l.toggleAttribute(
+          "active",
+          t.includes(l.getAttribute("name"))
+        )
+      );
+    });
+    /**
+     * 折叠项点击事件处理
+     * @param {CustomEvent} e
+     */
+    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;
+        } catch {
+          return;
+        }
+      if (this.accordion)
+        e(this, d).call(this, a), this.active = a;
+      else
+        try {
+          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.`,
+            this
+          );
+        }
+      this.emit("change", {
+        detail: {
+          name: a,
+          target: l,
+          active: this.active
+        },
+        bubbles: !0
+      });
+    });
+    /**
+     * 初始化折叠项的唯一标识及折叠状态
+     */
+    o(this, w, () => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach((a, l) => {
+        a.getAttribute("name") || a.setAttribute("name", l);
+      });
+    });
+    /**
+     * 设置折叠项的展开状态
+     * @param {string | string[]} newVal
+     */
+    p(this, "setActiveNames", (t) => {
+      this.accordion ? e(this, d).call(this, t) : e(this, y).call(this, t);
+    });
+    this.stylesheet = B, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "accordion", "expand-icon-position"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-collapse' part='container'>
+        <slot></slot>
+      </div>
+    `, r(this, g, this.shadowRoot.querySelector(".ea-collapse"));
+  }
+  connectedCallback() {
+    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 t;
+    (t = e(this, c)) == null || t.abort();
+  }
+}
+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, h);
+    /** @type {HTMLElement} */
+    o(this, u);
+    /** @type {HTMLElement} */
+    o(this, A);
+    /** @type {HTMLSlotElement} */
+    o(this, m);
+    /** @type {HTMLElement} */
+    o(this, S);
+    /** @type {HTMLElement} */
+    o(this, b);
+    /** @type {HTMLSlotElement} */
+    o(this, v);
+    /** @type {AbortController} */
+    o(this, n);
+    p(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, m).textContent = t;
+        }
+      },
+      name: {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      "expand-icon-position": {
+        type: ["left", "right"],
+        default: "right",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      active: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          e(this, f).call(this, t);
+        }
+      }
+    }));
+    /**
+     * 更新折叠面板高度
+     * @param {boolean} isActive
+     */
+    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, _, (t) => {
+      t.preventDefault(), t.stopImmediatePropagation(), !this.disabled && this.emit("collapse-item-click", {
+        detail: {
+          name: this.name,
+          el: this
+        },
+        bubbles: !0,
+        cancelable: !0
+      });
+    });
+    /**
+     * 插槽变化事件处理
+     */
+    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 [
+      ...super.observedAttributes,
+      "title",
+      "name",
+      "disabled",
+      "expand-icon-position",
+      "active"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-collapse-item",
+      {
+        ["--indicator-" + this["expand-icon-position"]]: this["expand-icon-position"]
+      },
+      {
+        disabled: this.disabled
+      }
+    );
+    return e(this, h).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-collapse-item' part='container'>
+        <div class="ea-collapse-item__title-wrap" part="title-wrap">
+          <span class="ea-collapse-item__title" part="title">
+            <slot name="title"></slot>
+          </span>
+          <span class="ea-collapse-item__indicator" part="indicator">
+            <slot name="icon">
+              <ea-icon class="default-expand-icon" name="angle-down" part="icon"></ea-icon>
+            </slot>
+          </span>
+        </div>
+        <div class="ea-collapse-item__content" part="content-wrap">
+          <slot></slot>
+        </div>
+      </div>
+    `, r(this, h, this.shadowRoot.querySelector(".ea-collapse-item")), r(this, u, this.shadowRoot.querySelector(
+      ".ea-collapse-item__title-wrap"
+    )), 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")), r(this, v, this.shadowRoot.querySelector("slot:not([name])")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    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 t;
+    (t = e(this, n)) == null || t.abort();
+  }
+}
+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 {
+  P as EaCollapse,
+  H as EaCollapseItem
+};