easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-dialog.js

@@ -1,249 +1,234 @@
-var _ = Object.defineProperty;
-var v = (t) => {
-  throw TypeError(t);
+import { EaOverlay as f } from "./ea-overlay.js";
+import { q as p, a as r, l as c, C as b } from "../core/decorator.js";
+import { c as _ } from "../utils/bem.ts.js";
+import { s as m } from "../css/ea-dialog.style.js";
+import "./ea-icon.js";
+var g = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (e, a, i, n) => {
+  for (var l = n > 1 ? void 0 : n ? C(a, i) : a, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (l = (n ? h(a, i, l) : h(l)) || l);
+  return n && l && g(a, i, l), l;
 };
-var S = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var u = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || v("Cannot " + e);
-var o = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), a = (t, s, e) => s.has(t) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), l = (t, s, e, d) => (w(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
-import { EaOverlay as E } from "./ea-overlay.js";
-import { s as B } from "../css/ea-dialog.style.js";
-import { t as C } from "../utils/timeout.js";
-var n, h, c, p, r, i, b, f, g;
-class k extends E {
+const y = "ea-dialog", s = _(y);
+let t = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, n);
-    /** @type {HTMLElement} */
-    a(this, h);
-    /** @type {HTMLElement} */
-    a(this, c);
-    /** @type {HTMLElement} */
-    a(this, p);
-    /** @type {HTMLElement} */
-    a(this, r);
-    /** @type {AbortController} */
-    a(this, i);
-    u(this, "state", this.properties({
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          if (!e && this["before-close"] && this.status !== this.visible)
-            return o(this, f).call(this);
-          e ? C(() => {
-            this.focus();
-          }, 0) : C(() => {
-            this.blur();
-          }, 0), this.status = e;
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          o(this, p) && (o(this, p).textContent = e);
-        }
-      },
-      width: {
-        type: String,
-        default: "50%",
-        observer: (e) => {
-          this.style.setProperty("--ea-overlay-content-width", e);
-        }
-      },
-      top: {
-        type: String,
-        default: "50%",
-        observer: (e) => {
-          this.style.setProperty("--ea-overlay-content-top", e);
-        }
-      },
-      center: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          o(this, n).className = this.updateContainerClasslist();
-        }
-      },
-      fullscreen: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          o(this, n).className = this.updateContainerClasslist();
-        }
-      },
-      "append-to-body": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      "append-to": {
-        type: String,
-        default: "body",
-        observer: () => {
-        }
-      },
-      "show-close": {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          o(this, r).style.display = e ? "block" : "none";
-        }
-      },
-      "modal-penetrable": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      draggable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          o(this, n).className = this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 通过 append-to 属性，将组件插入到指定元素中
-     */
-    a(this, b, () => {
-      this.getAttrString("append-to") && this["append-to"] ? document.querySelector(this["append-to"]).appendChild(this) : this["append-to-body"] && document.body.appendChild(this);
-    });
-    /**
-     * 重置 dialog 位置
-     */
-    u(this, "resetPosition", () => {
-      o(this, h).style.left = "var(--ea-overlay-content-left)", o(this, h).style.top = "var(--ea-overlay-content-top)";
-    });
-    /**
-     * 打开 dialog
-     */
-    u(this, "show", () => {
-      this.visible = !0;
-    });
-    /**
-     * 关闭 dialog
-     */
-    u(this, "hide", () => {
-      this.visible = !1;
-    });
-    /**
-     * 触发 before-close 事件
-     */
-    a(this, f, () => {
-      this["before-close"] ? this.emit("before-close", {
-        detail: {
-          done: () => this.status = !1
-        }
-      }) : this.status = !1;
-    });
-    a(this, g, (e) => {
-      if (!o(this, c).contains(e.target) || o(this, c) !== e.target)
-        return;
-      const d = new AbortController(), m = this.shadowRoot.querySelector(
-        ".ea-overlay__content"
-      );
-      window.addEventListener(
-        "mousemove",
-        (y) => {
-          m.style.left = y.clientX + "px", m.style.top = y.clientY + "px";
-        },
-        {
-          signal: d.signal
-        }
-      ), window.addEventListener(
-        "mouseup",
-        () => {
-          d.abort();
-        },
-        { signal: d.signal }
-      );
-    });
-    const e = this.shadowRoot.querySelector(".ea-overlay__content");
-    e.innerHTML = `
-      <div class='ea-dialog-main' part='container'>
-        <header class='ea-dialog-main__header' part='header'>
+    super(...arguments), this.heading = "", this.width = "50%", this.top = "50%", this.center = !1, this.fullscreen = !1, this.appendToBody = !1, this.showClose = !0, this.modalPentrable = !1, this.movable = !1, this.alertdialog = !1, this.description = "";
+  }
+  // ==================== 方法 ====================
+  html() {
+    const e = document.createElement("template");
+    e.innerHTML = super.html();
+    const a = e.content.querySelector(".ea-overlay__content");
+    return a.innerHTML = `
+      <div class='${s()}' part='container'>
+        <header class='${s.e("header")}' part='header'>
           <slot name="header">
-            <span class='ea-dialog-main__title' part='title'></span>
-            <ea-icon class='ea-dialog-main__close-icon' name='xmark' part='close-icon'></ea-icon>          
+            <span class='${s.e("heading")}' part='heading'></span>
+            <ea-icon class='${s.e("close-icon")}' name='xmark' part='close-icon' tabindex='0' role='button' aria-label='Close'></ea-icon>
           </slot>
         </header>
-        <main class='ea-dialog-main__content' part='content'>
-            <slot></slot>
+        <main class='${s.e("content")}' part='content'>
+          <slot></slot>
         </main>
-        <footer class='ea-dialog-main__footer' part='footer'>
-            <slot name='footer'></slot>
+        <footer class='${s.e("footer")}' part='footer'>
+          <slot name='footer'></slot>
         </footer>
       </div>
-    `, l(this, n, this.shadowRoot.querySelector(".ea-overlay")), l(this, h, e), l(this, c, this.shadowRoot.querySelector(".ea-dialog-main__header")), l(this, p, this.shadowRoot.querySelector(".ea-dialog-main__title")), l(this, r, this.shadowRoot.querySelector(
-      ".ea-dialog-main__close-icon"
-    )), o(this, b).call(this);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "visible",
-      "title",
-      "width",
-      "fullscreen",
-      "top",
-      "modal",
-      "center",
-      "append-to-body",
-      "append-to",
-      //   "lock-scroll",
-      //   "open-delay",
-      //   "close-delay",
-      "close-on-click-modal",
-      "close-on-press-escape",
-      "show-close",
-      "close-icon",
-      "before-close",
-      //   "destroy-on-close",
-      "z-index",
-      "modal-penetrable",
-      "draggable"
-    ];
+    `, e.innerHTML;
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 更新容器类名
    */
   updateContainerClasslist() {
-    return `${super.updateContainerClasslist()} ${this.computedClasslist(
-      "ea-dialog",
+    const e = s(
       {
-        "--center": this.center,
-        "--draggable": this.draggable,
-        "--fullscreen": this.fullscreen
+        center: this.center,
+        draggable: this.movable,
+        fullscreen: this.fullscreen
       },
       {
-        dialog: !0,
-        "modal-penetrable": this["modal-penetrable"] && !this.modal
+        "modal-penetrable": this.modalPentrable,
+        "close-hidden": !this.showClose
       }
-    )}`;
+    ), i = `${super.updateContainerClasslist()} ${e}`.trim();
+    return this._container && (this._container.className = i), i;
+  }
+  /**
+   * 重置对话框位置
+   */
+  resetPosition() {
+    this._overlayContent.style.left = "", this._overlayContent.style.top = "", this.style.removeProperty("--ea-overlay-content-left"), this.style.removeProperty("--ea-overlay-content-top");
   }
-  connectedCallback() {
-    l(this, i, new AbortController()), this["close-on-click-modal"] = this.getAttrBoolean(
-      "close-on-click-modal",
-      !0
-    ), this.setAttribute("role", "dialog"), super.connectedCallback(), this.assignedStyle(B), this.addEventListener("closed", this.hide, {
-      signal: o(this, i).signal
-    }), this["show-close"] && o(this, r) && o(this, r).addEventListener("click", o(this, f), {
-      signal: o(this, i).signal
-    }), this.draggable && !this.fullscreen && this.shadowRoot.addEventListener("mousedown", o(this, g), {
-      signal: o(this, i).signal
+  _handleDragStart(e) {
+    if (!this.movable || this.fullscreen || !this._header.contains(e.target) || this._closeIcon.contains(e.target)) return;
+    const a = new AbortController(), i = this._overlayContent.getBoundingClientRect(), n = e.clientX - i.left, l = e.clientY - i.top, d = (u) => {
+      this._overlayContent.style.left = u.clientX - n + "px", this._overlayContent.style.top = u.clientY - l + "px";
+    }, h = () => {
+      a.abort();
+    };
+    window.addEventListener("mousemove", d, {
+      signal: a.signal
+    }), window.addEventListener("mouseup", h, {
+      signal: a.signal
     });
   }
-  $beforeUnmounted() {
-    o(this, i).abort();
+  _handleCloseIconClick() {
+    this.showClose && (this.visible = !1);
   }
-}
-n = new WeakMap(), h = new WeakMap(), c = new WeakMap(), p = new WeakMap(), r = new WeakMap(), i = new WeakMap(), b = new WeakMap(), f = new WeakMap(), g = new WeakMap();
-window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", k);
+  // ==================== 生命周期 ====================
+  /** 根据 alertdialog 属性更新 role */
+  _updateRole() {
+    const e = this.alertdialog ? "alertdialog" : "dialog";
+    try {
+      this.setAttribute("role", e);
+    } catch {
+      this.role = e;
+    }
+  }
+  /** 更新 aria-labelledby 指向标题元素 */
+  _updateAriaLabelledBy() {
+    this._heading && this.heading ? (this._heading.id || (this._heading.id = `ea-dialog-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-dialog-desc-${t._idCounter++}`), this.setAttribute("aria-describedby", this._content.id)) : this.removeAttribute("aria-describedby");
+  }
+  $mount() {
+    var e;
+    (e = super.$mount) == null || e.call(this), this._updateRole(), this.setAttribute("aria-modal", "true"), this.updateContainerClasslist();
+  }
+  $mounted() {
+    this._updateAriaLabelledBy(), this._updateAriaDescribedBy();
+  }
+  _handleClosed(e) {
+    e.target === this && this.hide();
+  }
+};
+t._idCounter = 0;
+o([
+  p(s.ce("header"))
+], t.prototype, "_header", 2);
+o([
+  p(s.ce("heading"))
+], t.prototype, "_heading", 2);
+o([
+  p(s.ce("close-icon"))
+], t.prototype, "_closeIcon", 2);
+o([
+  p(s.ce("content"))
+], t.prototype, "_content", 2);
+o([
+  r({
+    type: String,
+    default: "",
+    observer(e) {
+      this._heading && (this._heading.textContent = e), this._updateAriaLabelledBy();
+    }
+  })
+], t.prototype, "heading", 2);
+o([
+  r({
+    type: String,
+    default: "50%",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-content-width", e);
+    }
+  })
+], t.prototype, "width", 2);
+o([
+  r({
+    type: String,
+    default: "50%",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-content-top", e);
+    }
+  })
+], t.prototype, "top", 2);
+o([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "center", 2);
+o([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "fullscreen", 2);
+o([
+  r({
+    type: Boolean,
+    default: !1
+  })
+], t.prototype, "appendToBody", 2);
+o([
+  r({
+    type: Boolean,
+    default: !0,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-dialog__close-icon",
+      map: (e) => e ? null : ""
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "showClose", 2);
+o([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "modalPentrable", 2);
+o([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "movable", 2);
+o([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this._updateRole();
+    }
+  })
+], t.prototype, "alertdialog", 2);
+o([
+  r({
+    type: String,
+    default: "",
+    observer() {
+      this._updateAriaDescribedBy();
+    }
+  })
+], t.prototype, "description", 2);
+o([
+  c("mousedown", s.ce("header"))
+], t.prototype, "_handleDragStart", 1);
+o([
+  c("click", s.ce("close-icon"))
+], t.prototype, "_handleCloseIconClick", 1);
+o([
+  c("ea-closed")
+], t.prototype, "_handleClosed", 1);
+t = o([
+  b(y, { styles: [m] })
+], t);
 export {
-  k as EaDialog
+  t as EaDialog
 };