easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-collapse.js

@@ -0,0 +1,293 @@
+var q = Object.defineProperty;
+var S = (t) => {
+  throw TypeError(t);
+};
+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 {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, v);
+    /** @type {AbortController} */
+    o(this, n);
+    h(this, "state", this.properties({
+      accordion: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      active: {
+        props: !0,
+        type: {
+          String: () => this.accordion,
+          Array: () => !this.accordion
+        },
+        default: () => this.accordion ? "" : [],
+        observer: (e) => {
+          this.setActiveNames(e);
+        }
+      },
+      "expand-icon-position": {
+        type: ["left", "right"],
+        default: "right",
+        observer: (e) => {
+          this.querySelectorAll("ea-collapse-item").forEach((a) => {
+            a["expand-icon-position"] = e;
+          });
+        }
+      }
+    }));
+    h(this, "fnState", this.properties({
+      beforeCollapse: {
+        props: !0,
+        type: Function,
+        default: null,
+        observer: () => {
+        }
+      }
+    }));
+    /**
+     * 更新手风琴模式下的折叠状态
+     * @param {string} [activeName]
+     */
+    o(this, d, (e = this.active) => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach(
+        (l) => l.toggleAttribute("active", l.getAttribute("name") === e)
+      );
+    });
+    /**
+     * 更新普通模式下的折叠状态
+     * @param {string[]} [activeNames]
+     */
+    o(this, f, (e = this.active) => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach(
+        (l) => l.toggleAttribute(
+          "active",
+          e.includes(l.getAttribute("name"))
+        )
+      );
+    });
+    /**
+     * 折叠项点击事件处理
+     * @param {CustomEvent} e
+     */
+    o(this, g, async (e) => {
+      e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation();
+      const { name: a, el: l } = e.detail;
+      if (typeof this.beforeCollapse == "function")
+        try {
+          if (!await this.beforeCollapse({ name: a, el: l })) return;
+        } catch {
+          return;
+        }
+      if (this.accordion)
+        i(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)));
+        } 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, y, () => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach((a, l) => {
+        a.getAttribute("name") || a.setAttribute("name", l);
+      });
+    });
+    /**
+     * 设置折叠项的展开状态
+     * @param {string | string[]} newVal
+     */
+    h(this, "setActiveNames", (e) => {
+      this.accordion ? i(this, d).call(this, e) : i(this, f).call(this, e);
+    });
+    this.stylesheet = R, 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, v, 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
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = i(this, n)) == null || e.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 {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, p);
+    /** @type {HTMLElement} */
+    o(this, u);
+    /** @type {HTMLElement} */
+    o(this, m);
+    /** @type {HTMLElement} */
+    o(this, C);
+    /** @type {HTMLElement} */
+    o(this, b);
+    /** @type {AbortController} */
+    o(this, c);
+    h(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          i(this, m).textContent = e;
+        }
+      },
+      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: (e) => {
+          i(this, w).call(this, e);
+        }
+      }
+    }));
+    /**
+     * 更新折叠面板高度
+     * @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"
+      );
+    });
+    /**
+     * 折叠面板 展开/收起 事件处理
+     * @param {Event} e
+     */
+    o(this, A, (e) => {
+      e.preventDefault(), e.stopImmediatePropagation(), !this.disabled && this.emit("collapse-item-click", {
+        detail: {
+          name: this.name,
+          el: this
+        },
+        bubbles: !0,
+        cancelable: !0
+      });
+    });
+    this.stylesheet = k, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "title",
+      "name",
+      "disabled",
+      "expand-icon-position",
+      "active"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-collapse-item",
+      {
+        ["--indicator-" + this["expand-icon-position"]]: this["expand-icon-position"]
+      },
+      {
+        disabled: this.disabled
+      }
+    );
+    return i(this, p).className = e, e;
+  }
+  $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" icon="icon-angle-down" part="icon"></ea-icon>
+            </slot>
+          </span>
+        </div>
+        <div class="ea-collapse-item__content" part="content-wrap">
+          <slot></slot>
+        </div>
+      </div>
+    `, r(this, p, 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(
+      ".ea-collapse-item__title-icon"
+    )), r(this, b, this.shadowRoot.querySelector(".ea-collapse-item__content")), 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
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = i(this, c)) == null || e.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);
+export {
+  N as EaCollapse,
+  B as EaCollapseItem
+};