easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-collapse.js

@@ -1,313 +1,354 @@
-var k = Object.defineProperty;
-var x = (s) => {
-  throw TypeError(s);
+import { E as _ } from "../core/EaBase.ts.js";
+import { q as u, a as d, C as b, p as f, l as m } from "../core/decorator.js";
+import { E as v } from "../utils/Enum.ts.js";
+import { s as w } from "../css/ea-collapse.style.js";
+import { c as y } from "../utils/bem.ts.js";
+import { s as $ } from "../css/ea-collapse-item.style.js";
+import "./ea-icon.js";
+class E extends Event {
+  constructor(t) {
+    super("ea-change", { bubbles: !0, composed: !0 }), this.detail = t;
+  }
+}
+var S = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? x(t, s) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (a = (i ? c(t, s, a) : c(a)) || a);
+  return i && a && S(t, s, a), a;
 };
-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 $ {
+const g = "ea-collapse", A = y(g);
+let p = class 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();
+    super(...arguments), this.accordion = !1, this.active = [], this.expandIconPosition = "right", this.beforeCollapse = null, this._isSettingActiveNames = !1;
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "accordion", "expand-icon-position"];
+  /** 更新手风琴模式下的折叠状态 */
+  _updateAccordionCollapse(e = this.active) {
+    [
+      ...this.querySelectorAll("ea-collapse-item")
+    ].forEach(
+      (s) => s.toggleAttribute("active", s.getAttribute("name") === e)
+    );
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-collapse' part='container'>
-        <slot></slot>
-      </div>
-    `, r(this, g, this.shadowRoot.querySelector(".ea-collapse"));
+  /** 更新普通模式下的折叠状态 */
+  _updateNormalCollapse(e = this.active) {
+    [
+      ...this.querySelectorAll("ea-collapse-item")
+    ].forEach(
+      (s) => s.toggleAttribute(
+        "active",
+        e.includes(s.getAttribute("name") || "")
+      )
+    );
   }
-  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
+  /** 设置折叠项的展开状态 */
+  setActiveNames(e) {
+    this._isSettingActiveNames = !0, this.active = e, this._isSettingActiveNames = !1, this.accordion ? this._updateAccordionCollapse(e) : this._updateNormalCollapse(e);
+  }
+  /** 初始化折叠项的唯一标识及折叠状态 */
+  _initCollapseStatus() {
+    [
+      ...this.querySelectorAll("ea-collapse-item")
+    ].forEach((t, s) => {
+      t.getAttribute("name") || t.setAttribute("name", String(s));
     });
   }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, c)) == null || t.abort();
+  html() {
+    return `
+      <div class="${A()}" part="container">
+        <slot></slot>
+      </div>
+    `;
   }
-}
-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);
-        }
+  async _handleCollapseItemClick(e) {
+    e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation();
+    const { name: t, target: s } = e.detail;
+    if (typeof this.beforeCollapse == "function")
+      try {
+        if (!await this.beforeCollapse({ name: t, target: s })) return;
+      } catch {
+        return;
       }
-    }));
-    /**
-     * 更新折叠面板高度
-     * @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"
+    if (this.accordion)
+      this.active === t ? this.setActiveNames("") : this.setActiveNames(t);
+    else
+      try {
+        const i = this.active;
+        i.includes(t) ? this.setActiveNames(i.filter((a) => a !== t)) : this.setActiveNames([...i, t]);
+      } catch {
+        console.error(
+          `${this.tagName}: When 'accordion' is false, 'active' should be an Array type.`,
+          this
         );
-      });
-    });
-    /**
-     * 折叠面板 展开/收起 事件处理
-     * @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();
+      }
+    this.dispatchEvent(
+      new E({
+        name: t,
+        target: s,
+        active: this.active
+      })
+    );
+  }
+  /** 获取所有非禁用的折叠面板项 */
+  _getEnabledItems() {
+    return Array.from(this.querySelectorAll("ea-collapse-item")).filter(
+      (e) => !e.hasAttribute("disabled")
+    );
+  }
+  _handleKeydown(e) {
+    var c;
+    const t = e.target, s = (c = t.closest) == null ? void 0 : c.call(t, "ea-collapse-item");
+    if (!s || s.hasAttribute("disabled")) return;
+    const i = this._getEnabledItems();
+    if (i.length === 0) return;
+    const a = i.indexOf(s);
+    if (a < 0) return;
+    let n = a;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), n = a < i.length - 1 ? a + 1 : 0;
+        break;
+      case "ArrowUp":
+        e.preventDefault(), n = a > 0 ? a - 1 : i.length - 1;
+        break;
+      case "Home":
+        e.preventDefault(), n = 0;
+        break;
+      case "End":
+        e.preventDefault(), n = i.length - 1;
+        break;
+      default:
+        return;
+    }
+    n !== a && i[n].focus();
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "title",
-      "name",
-      "disabled",
-      "expand-icon-position",
-      "active"
-    ];
+  $mount() {
+    this._initCollapseStatus();
+  }
+};
+h([
+  u(A.cb())
+], p.prototype, "_container", 2);
+h([
+  d({
+    type: Boolean,
+    default: !1
+  })
+], p.prototype, "accordion", 2);
+h([
+  f({
+    type: Array,
+    default: [],
+    observer(e) {
+      this._isSettingActiveNames || this.setActiveNames(e);
+    }
+  })
+], p.prototype, "active", 2);
+h([
+  d({
+    type: v(["left", "right"]),
+    default: "right",
+    observer(e) {
+      this.querySelectorAll("ea-collapse-item").forEach((t) => {
+        t.expandIconPosition = e;
+      });
+    }
+  })
+], p.prototype, "expandIconPosition", 2);
+h([
+  f({
+    type: Function,
+    default: null
+  })
+], p.prototype, "beforeCollapse", 2);
+h([
+  m("ea-collapse-item-click")
+], p.prototype, "_handleCollapseItemClick", 1);
+h([
+  m("keydown")
+], p.prototype, "_handleKeydown", 1);
+p = h([
+  b(g, { styles: [w] })
+], p);
+var I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, t, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? P(t, s) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (a = (i ? c(t, s, a) : c(a)) || a);
+  return i && a && I(t, s, a), a;
+};
+const C = "ea-collapse-item", l = y(C);
+let r = class extends _ {
+  constructor() {
+    super(...arguments), this._uniqueId = r._instanceCount++, this.header = "", this.name = "", this.expandIconPosition = "right", this.disabled = !1, this.active = !1, this._contentActive = !1;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-collapse-item",
+    const e = l(
       {
-        ["--indicator-" + this["expand-icon-position"]]: this["expand-icon-position"]
+        [`indicator-${this.expandIconPosition}`]: this.expandIconPosition !== "right"
       },
       {
         disabled: this.disabled
       }
     );
-    return e(this, h).className = t, t;
+    return this._container && (this._container.className = e), e;
+  }
+  /** 更新折叠面板高度 */
+  _updateCollapseHeight(e = this.active) {
+    queueMicrotask(() => {
+      this._container && this._container.style.setProperty(
+        "--ea-collapse-item-content-height",
+        e ? `${this._content.scrollHeight}px` : "0"
+      );
+    });
   }
-  $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>
+  /** 同步内容区域的激活状态 */
+  _updateContentInert(e = this.active) {
+    this._contentActive = e;
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <div class="${l.e("header-wrap")}" part="header-wrap" role="button" tabindex="0">
+          <span class="${l.e("header")}" part="header">
+            <slot name="header"></slot>
           </span>
-          <span class="ea-collapse-item__indicator" part="indicator">
+          <span class="${l.e("indicator")}" part="indicator" inert>
             <slot name="icon">
-              <ea-icon class="default-expand-icon" name="angle-down" part="icon"></ea-icon>
+              <ea-icon class="${l.e("expand-icon")}" name="angle-down" part="icon"></ea-icon>
             </slot>
           </span>
         </div>
-        <div class="ea-collapse-item__content" part="content-wrap">
+        <div class="${l.e("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
+  _handleClick(e) {
+    e.preventDefault(), e.stopImmediatePropagation(), !this.disabled && this.emit("ea-collapse-item-click", {
+      detail: {
+        name: this.name,
+        target: this
+      },
+      bubbles: !0,
+      cancelable: !0
     });
   }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, n)) == null || t.abort();
+  _handleKeydown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.emit("ea-collapse-item-click", {
+      detail: {
+        name: this.name,
+        target: this
+      },
+      bubbles: !0,
+      cancelable: !0
+    }));
   }
-}
-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);
+  _handleSlotChange() {
+    this._container && (this._container.style.setProperty(
+      "--ea-collapse-item-content-height",
+      "auto"
+    ), this._updateCollapseHeight());
+  }
+  /** 设置 ARIA 关联属性 */
+  _setupAria() {
+    const e = `ea-collapse-item-${this._uniqueId}`;
+    this._headerWrap.setAttribute("id", `${e}-header`), this._headerWrap.setAttribute("aria-controls", `${e}-panel`), this._content.setAttribute("id", `${e}-panel`), this._content.setAttribute("role", "region"), this._content.setAttribute("aria-labelledby", `${e}-header`), this.disabled && this._headerWrap.setAttribute("tabindex", "-1");
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._setupAria(), this._updateContentInert(), this.active && this._updateCollapseHeight(!0);
+  }
+};
+r._instanceCount = 0;
+o([
+  u(l.cb())
+], r.prototype, "_container", 2);
+o([
+  u(l.ce("header-wrap"))
+], r.prototype, "_headerWrap", 2);
+o([
+  u(`${l.ce("header")} slot`)
+], r.prototype, "_headerSlot", 2);
+o([
+  u(l.ce("content"))
+], r.prototype, "_content", 2);
+o([
+  u("slot:not([name])")
+], r.prototype, "_defaultSlot", 2);
+o([
+  d({
+    type: String,
+    default: "",
+    observer(e) {
+      this._headerSlot && (this._headerSlot.textContent = e);
+    }
+  })
+], r.prototype, "header", 2);
+o([
+  d({
+    type: String,
+    default: ""
+  })
+], r.prototype, "name", 2);
+o([
+  d({
+    type: v(["left", "right"]),
+    default: "right",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "expandIconPosition", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      target: ".ea-collapse-item__header-wrap",
+      map: (e) => String(e)
+    },
+    observer() {
+      this.updateContainerClasslist(), this._headerWrap && this._headerWrap.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  })
+], r.prototype, "disabled", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-expanded",
+      target: ".ea-collapse-item__header-wrap",
+      map: (e) => String(e)
+    },
+    observer(e) {
+      this._updateCollapseHeight(e);
+    }
+  })
+], r.prototype, "active", 2);
+o([
+  f({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-collapse-item__content",
+      map: (e) => e ? null : ""
+    }
+  })
+], r.prototype, "_contentActive", 2);
+o([
+  m("click", l.ce("header-wrap"))
+], r.prototype, "_handleClick", 1);
+o([
+  m("keydown", l.ce("header-wrap"))
+], r.prototype, "_handleKeydown", 1);
+o([
+  m("slotchange", "slot:not([name])")
+], r.prototype, "_handleSlotChange", 1);
+r = o([
+  b(C, { styles: [$] })
+], r);
 export {
-  P as EaCollapse,
-  H as EaCollapseItem
+  p as EaCollapse,
+  r as EaCollapseItem
 };