easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-drawer.js

@@ -1,216 +1,171 @@
-var g = Object.defineProperty;
-var _ = (s) => {
-  throw TypeError(s);
+import { EaOverlay as m } from "./ea-overlay.js";
+import { q as p, a as n, p as y, l as c, C as _ } from "../core/decorator.js";
+import { c as u } from "../utils/bem.ts.js";
+import { E as C } from "../utils/Enum.ts.js";
+import { s as f } from "../css/ea-drawer.style.js";
+import "./ea-icon.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, s, o, l) => {
+  for (var a = l > 1 ? void 0 : l ? v(s, o) : s, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (a = (l ? h(s, o, a) : h(a)) || a);
+  return l && a && g(s, o, a), a;
 };
-var S = (s, o, e) => o in s ? g(s, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[o] = e;
-var C = (s, o, e) => S(s, typeof o != "symbol" ? o + "" : o, e), E = (s, o, e) => o.has(s) || _("Cannot " + e);
-var t = (s, o, e) => (E(s, o, "read from private field"), e ? e.call(s) : o.get(s)), a = (s, o, e) => o.has(s) ? _("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, e), l = (s, o, e, i) => (E(s, o, "write to private field"), i ? i.call(s, e) : o.set(s, e), e);
-import { EaOverlay as k } from "./ea-overlay.js";
-import { s as A } from "../css/ea-drawer.style.js";
-import { E as q } from "../utils/Utils.js";
-import { t as R } from "../utils/timeout.js";
-var p, c, u, f, n, w, b, h, r, m, d, y;
-class B extends k {
+const b = "ea-drawer", A = u(b), i = u("ea-drawer-main"), w = ["rtl", "ltr", "ttb", "btt"];
+let t = class extends m {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, p);
-    /** @type {HTMLElement} */
-    a(this, c);
-    /** @type {HTMLElement} */
-    a(this, u);
-    /** @type {HTMLElement} */
-    a(this, f);
-    /** @type {HTMLElement} */
-    a(this, n);
-    /** @type {HTMLElement} */
-    a(this, w);
-    /** @type {HTMLElement} */
-    a(this, b);
-    /** @type {AbortController} */
-    a(this, h);
-    a(this, r, {
-      /** @type {AbortController | null} */
-      showClose: null,
-      /** @type {AbortController | null} */
-      closeOnPressEscape: null
-    });
-    C(this, "state", this.properties({
-      direction: {
-        type: ["rtl", "ltr", "ttb", "btt"],
-        default: "rtl"
-      },
-      visible: {
-        type: Boolean,
-        default: !1,
-        repeatable: !0,
-        observer: (e) => {
-          if (!e && this.beforeClose && this.status !== this.visible) {
-            this.visible = !e, t(this, d).call(this);
-            return;
-          }
-          e && R(() => this.focus(), 0), (e || !this.beforeClose) && (this.status = e);
-        }
-      },
-      "with-header": {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          t(this, u).style.display = e ? "flex" : "none";
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          this["with-header"] && (t(this, f).textContent = e);
-        }
-      },
-      showClose: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          var i;
-          (i = t(this, r).showClose) == null || i.abort(), t(this, r).showClose = null, this["with-header"] && (t(this, n).style.display = e ? "block" : "none"), e && (t(this, r).showClose = new AbortController(), t(this, n).addEventListener("click", t(this, d), {
-            signal: t(this, r).showClose.signal
-          }));
-        }
-      },
-      size: {
-        type: String,
-        default: "30%",
-        observer: (e) => {
-          this.style.setProperty("--ea-drawer-size", e);
-        }
-      },
-      "append-to-body": {
-        type: Boolean,
-        default: !1
-      },
-      "close-on-press-escape": {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          var i;
-          (i = t(this, r).closeOnPressEscape) == null || i.abort(), t(this, r).closeOnPressEscape = null, e && (t(this, r).closeOnPressEscape = new AbortController(), document.addEventListener("keydown", t(this, y), {
-            signal: t(this, r).closeOnPressEscape.signal
-          }));
-        }
-      }
-    }));
-    C(this, "funcStates", this.properties({
-      beforeClose: {
-        rawFunction: !0,
-        props: !0,
-        type: Function,
-        default: null
-      }
-    }));
-    /**
-     * 初始化抽屉 DOM 结构
-     * @param {HTMLElement} container - 抽屉内容容器
-     */
-    a(this, m, (e) => {
-      e.innerHTML = `
-      <div class="ea-drawer-main" part="container">
-        <header class="ea-drawer-main__header" part="header">
-          <span class="ea-drawer-main__title" part="title">
-            <slot name="title"></slot>
-          </span>
-          <ea-icon class="ea-drawer-main__close-icon" name="xmark" part="close-icon"></ea-icon>
+    super(...arguments), this.direction = "rtl", this.withHeader = !0, this.heading = "", this.showClose = !0, this.size = "30%", this.beforeClose = null, this.description = "";
+  }
+  html() {
+    const e = document.createElement("template");
+    e.innerHTML = super.html();
+    const s = e.content.querySelector(".ea-overlay__content");
+    return s.innerHTML = `
+      <div class='${i()}' part='container'>
+        <header class='${i.e("header")}' part='header'>
+          <slot name="title">
+            <span class='${i.e("heading")}' part='heading'></span>
+            <ea-icon class='${i.e("close-icon")}' name='xmark' part='close-icon' tabindex='0' role='button' aria-label='Close'></ea-icon>
+          </slot>
         </header>
-        <main class="ea-drawer-main__content" part="content">
+        <main class='${i.e("content")}' part='content'>
           <slot></slot>
         </main>
-        <footer class="ea-drawer-main__footer" part="footer">
-          <slot name="footer"></slot>
+        <footer class='${i.e("footer")}' part='footer'>
+          <slot name='footer'></slot>
         </footer>
       </div>
-    `, l(this, p, this.shadowRoot.querySelector(".ea-overlay")), l(this, c, this.shadowRoot.querySelector(".ea-drawer-main")), l(this, u, this.shadowRoot.querySelector(".ea-drawer-main__header")), l(this, f, this.shadowRoot.querySelector(".ea-drawer-main__title")), l(this, n, this.shadowRoot.querySelector(
-        ".ea-drawer-main__close-icon"
-      )), l(this, w, this.shadowRoot.querySelector(".ea-drawer-main__content")), l(this, b, this.shadowRoot.querySelector(".ea-drawer-main__footer"));
-    });
-    /**
-     * 处理抽屉关闭前的回调
-     */
-    a(this, d, () => {
-      this.beforeClose ? this.beforeClose(() => {
-        this.status = !1, this.visible = !1;
-      }) : (this.status = !1, this.visible = !1);
-    });
-    /**
-     * 处理键盘事件
-     * @param {KeyboardEvent} e - 键盘事件对象
-     */
-    a(this, y, (e) => {
-      e.key === "Escape" && this.visible && t(this, d).call(this);
-    });
-    this["append-to-body"] && document.body.appendChild(this);
-    const e = this.shadowRoot.querySelector(
-      ".ea-overlay__content"
-    );
-    t(this, m).call(this, e);
-  }
-  static get observedAttributes() {
-    return q.Array.toLowerCamelCase([
-      ...super.observedAttributes,
-      "direction",
-      "visible",
-      "append-to-body",
-      "append-to",
-      "close-on-click-modal",
-      "close-on-press-escape",
-      "modal",
-      "show-close",
-      "size",
-      "title",
-      "with-header",
-      "z-index",
-      "header-aria-level"
-    ]);
+    `, e.innerHTML;
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 更新容器类名
    */
   updateContainerClasslist() {
-    const e = `${super.updateContainerClasslist()} ${this.computedClasslist(
-      "ea-drawer",
+    const e = A(
+      { [this.direction]: !0 },
       {
-        ["--" + this.direction]: this.direction
-      },
-      {
-        drawer: !0
+        "close-hidden": !this.showClose,
+        "header-hidden": !this.withHeader
       }
-    )}`;
-    return t(this, p).className = e, e;
+    ), o = `${super.updateContainerClasslist()} ${e}`.trim();
+    return this._container && (this._container.className = o), o;
   }
-  connectedCallback() {
-    var e, i;
-    (e = t(this, h)) == null || e.abort(), l(this, h, new AbortController()), t(this, c).ariaModal = !0, t(this, c).role = "dialog", this["close-on-click-modal"] = this.getAttrBoolean(
-      "close-on-click-modal",
-      !0
-    ), this.addEventListener(
-      "closed",
-      () => {
-        this.visible = !1;
-      },
-      {
-        signal: t(this, h).signal
-      }
-    ), this["show-close"] && ((i = t(this, r).showClose) == null || i.abort(), t(this, r).showClose = new AbortController(), t(this, n).addEventListener("click", t(this, d), {
-      signal: t(this, r).showClose.signal
-    })), super.connectedCallback(), this.assignedStyle(A);
+  _handleCloseIconClick() {
+    this.showClose && this.hide();
   }
-  $beforeUnmounted() {
-    var e, i;
-    (e = t(this, h)) == null || e.abort();
-    for (const v in t(this, r))
-      (i = t(this, r)[v]) == null || i.abort(), t(this, r)[v] = null;
+  _handleClosed(e) {
+    e.target === this && this.hide();
   }
-}
-p = new WeakMap(), c = new WeakMap(), u = new WeakMap(), f = new WeakMap(), n = new WeakMap(), w = new WeakMap(), b = new WeakMap(), h = new WeakMap(), r = new WeakMap(), m = new WeakMap(), d = new WeakMap(), y = new WeakMap();
-window.customElements.get("ea-drawer") || window.customElements.define("ea-drawer", B);
+  // ==================== a11y 方法 ====================
+  /** 更新 aria-labelledby 指向标题元素 */
+  _updateAriaLabelledBy() {
+    this._heading && this.heading ? (this._heading.id || (this._heading.id = `ea-drawer-heading-${t._idCounter++}`), this.setAttribute("aria-labelledby", this._heading.id)) : this.heading ? (this.setAttribute("aria-label", this.heading), this.removeAttribute("aria-labelledby")) : (this.removeAttribute("aria-label"), this.removeAttribute("aria-labelledby"));
+  }
+  /** 更新 aria-describedby 指向描述内容 */
+  _updateAriaDescribedBy() {
+    this.description && this._content ? (this._content.id || (this._content.id = `ea-drawer-desc-${t._idCounter++}`), this.setAttribute("aria-describedby", this._content.id)) : this.removeAttribute("aria-describedby");
+  }
+  // ==================== 生命周期 ====================
+  $mount() {
+    var e;
+    (e = super.$mount) == null || e.call(this);
+    try {
+      this.setAttribute("role", "dialog");
+    } catch {
+      this.role = "dialog";
+    }
+    this.setAttribute("aria-modal", "true"), this.updateContainerClasslist();
+  }
+  $mounted() {
+    this._updateAriaLabelledBy(), this._updateAriaDescribedBy();
+  }
+  $beforeUnmount() {
+    var e;
+    (e = super.$beforeUnmount) == null || e.call(this);
+  }
+};
+t._idCounter = 0;
+r([
+  p(i.ce("header"))
+], t.prototype, "_header", 2);
+r([
+  p(i.ce("heading"))
+], t.prototype, "_heading", 2);
+r([
+  p(i.ce("content"))
+], t.prototype, "_content", 2);
+r([
+  n({
+    type: C(w),
+    default: "rtl",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "direction", 2);
+r([
+  n({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "withHeader", 2);
+r([
+  n({
+    type: String,
+    default: "",
+    observer(e) {
+      this._heading && (this._heading.textContent = e), this._updateAriaLabelledBy();
+    }
+  })
+], t.prototype, "heading", 2);
+r([
+  n({
+    type: Boolean,
+    default: !0,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-drawer-main__close-icon",
+      map: (e) => e ? null : ""
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "showClose", 2);
+r([
+  n({
+    type: String,
+    default: "30%",
+    observer(e) {
+      this.style.setProperty("--ea-drawer-size", e);
+    }
+  })
+], t.prototype, "size", 2);
+r([
+  y({
+    type: Function,
+    default: null
+  })
+], t.prototype, "beforeClose", 2);
+r([
+  n({
+    type: String,
+    default: "",
+    observer() {
+      this._updateAriaDescribedBy();
+    }
+  })
+], t.prototype, "description", 2);
+r([
+  c("click", i.ce("close-icon"))
+], t.prototype, "_handleCloseIconClick", 1);
+r([
+  c("ea-closed")
+], t.prototype, "_handleClosed", 1);
+t = r([
+  _(b, { styles: [f] })
+], t);
 export {
-  B as EaDrawer
+  t as EaDrawer
 };