easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-overlay.js

@@ -1,168 +1,277 @@
-var b = Object.defineProperty;
-var v = (e) => {
-  throw TypeError(e);
+import { E as f } from "../core/EaBase.ts.js";
+import { q as d, l as c, C as y, a as n, p as b } from "../core/decorator.js";
+import { s as _ } from "../css/ea-overlay.style.js";
+import { c as v } from "../utils/bem.ts.js";
+class C extends Event {
+  constructor() {
+    super("ea-open", { bubbles: !0, composed: !0 });
+  }
+}
+class m extends Event {
+  constructor() {
+    super("ea-opened", { bubbles: !0, composed: !0 });
+  }
+}
+class E extends Event {
+  constructor() {
+    super("ea-close", { bubbles: !0, composed: !0 });
+  }
+}
+class g extends Event {
+  constructor() {
+    super("ea-closed", { bubbles: !0, composed: !0 });
+  }
+}
+var B = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, o, r, i) => {
+  for (var l = i > 1 ? void 0 : i ? w(o, r) : o, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (l = (i ? p(o, r, l) : p(l)) || l);
+  return i && l && B(o, r, l), l;
 };
-var C = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var p = (e, s, t) => C(e, typeof s != "symbol" ? s + "" : s, t), y = (e, s, t) => s.has(e) || v("Cannot " + t);
-var o = (e, s, t) => (y(e, s, "read from private field"), t ? t.call(e) : s.get(e)), r = (e, s, t) => s.has(e) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, n) => (y(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
-import { B as w } from "./Base.js";
-import { s as k } from "../css/ea-overlay.style.js";
-import { t as g } from "../utils/timeout.js";
-var a, u, c, i, l, m, f;
-class E extends w {
+const u = "ea-overlay", a = v(u);
+let t = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, a);
-    /** @type {HTMLElement} */
-    r(this, u);
-    /** @type {HTMLElement} */
-    r(this, c);
-    /** @type {AbortController} */
-    r(this, i);
-    p(this, "state", this.properties({
-      status: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          t ? (o(this, a).className = this.updateContainerClasslist(), o(this, l).call(this, "open"), requestAnimationFrame(() => {
-            o(this, a).classList.add("ea-overlay--is-show"), o(this, a).addEventListener(
-              "transitionend",
-              () => {
-                o(this, l).call(this, "opened");
-              },
-              { once: !0 }
-            );
-          })) : (o(this, a).classList.add("ea-overlay--before-close"), o(this, l).call(this, "close"), o(this, a).addEventListener(
-            "transitionend",
-            () => {
-              o(this, a).className = this.updateContainerClasslist(), o(this, l).call(this, "closed");
-            },
-            { once: !0 }
-          ));
-        }
-      },
-      modal: {
-        type: Boolean,
-        default: !0,
-        observer: (t) => {
-          o(this, a).className = this.updateContainerClasslist();
-        }
-      },
-      "before-close": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
+    super(...arguments), this._closingByBeforeClose = !1, this._inBeforeClose = !1, this._waitingBeforeClose = !1, this._appendHandled = !1, this._previousFocusElement = null, this._isRedirectingFocus = !1, this.visible = !1, this.modal = !0, this.closeOnClickModal = !0, this.closeOnPressEscape = !0, this.appendToBody = !1, this.appendTo = "body", this.zIndex = "", this.backgroundColor = "", this.contentWidth = "", this.contentMaxWidth = "", this.contentHeight = "", this.beforeClose = null;
+  }
+  updateContainerClasslist() {
+    const e = a({ open: this.visible }, { modal: this.modal });
+    return this._container && (this._container.className = e), e;
+  }
+  /** 处理组件追加到指定容器 */
+  _handleAppendTo() {
+    if (!this._appendHandled)
+      if (typeof this.appendTo == "string" && this.appendTo && this.appendTo !== "body")
+        try {
+          const e = document.querySelector(this.appendTo);
+          e && this.parentElement !== e && (this._appendHandled = !0, e.appendChild(this));
+        } catch {
+          this.parentElement !== document.body && (this._appendHandled = !0, document.body.appendChild(this));
         }
-      },
-      "close-on-click-modal": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
+      else this.appendToBody && this.parentElement !== document.body && (this._appendHandled = !0, document.body.appendChild(this));
+  }
+  /** 处理打开过渡动画 */
+  _handleOpenTransition() {
+    this.updateContainerClasslist(), this.dispatchEvent(new C()), this._previousFocusElement = document.activeElement, requestAnimationFrame(() => {
+      this._container.classList.add(a.s("show")), requestAnimationFrame(() => {
+        const e = this.$getFocusableElements("all")[0];
+        e ? e.focus() : this.focus();
+      }), this._container.addEventListener(
+        "transitionend",
+        () => {
+          this.dispatchEvent(new m());
+        },
+        { signal: this._transitionAbortController.signal, once: !0 }
+      );
+    });
+  }
+  /** 处理关闭请求，支持 beforeClose 拦截 */
+  _handleCloseRequest() {
+    if (this.beforeClose && typeof this.beforeClose == "function") {
+      this._inBeforeClose = !0, this._waitingBeforeClose = !0;
+      let e = !1;
+      this.beforeClose((o) => {
+        var i;
+        if (e) return;
+        if (e = !0, this._waitingBeforeClose = !1, o) {
+          this.visible || (this.visible = !0);
+          return;
         }
+        const r = this.visible;
+        this.visible = !1, r ? this._closingByBeforeClose = !0 : ((i = this._transitionAbortController) == null || i.abort(), this._transitionAbortController = new AbortController(), this._handleCloseTransition());
+      }), e || (this.visible = !0), this._inBeforeClose = !1;
+    } else
+      this._handleCloseTransition();
+  }
+  /** 处理关闭过渡动画 */
+  _handleCloseTransition() {
+    this._container.classList.remove(a.s("show")), this._container.classList.add(a.s("before-close")), this.dispatchEvent(new E()), this._previousFocusElement && (this._previousFocusElement.focus(), this._previousFocusElement = null), this._container.addEventListener(
+      "transitionend",
+      () => {
+        this.updateContainerClasslist(), this.dispatchEvent(new g());
       },
-      ...[
-        "z-index",
-        "background-color",
-        "content-width",
-        "content-max-width",
-        "content-height",
-        "content-left",
-        "content-top",
-        "content-translate-x",
-        "content-translate-y",
-        "content-transform"
-      ].reduce((t, n) => (t[n] = {
-        type: String,
-        default: "",
-        observer: (h) => {
-          this.style.setProperty(`--ea-overlay-${n}`, h);
-        }
-      }, t), {})
-    }));
-    p(this, "funcStates", this.properties({
-      beforeClose: {
-        rawFunction: !0,
-        props: !0,
-        type: Function,
-        default: null
-      }
-    }));
-    r(this, l, (t, n) => {
-      this.emit(t, {
-        detail: n,
-        bubbles: !0,
-        composed: !0
-      });
-    });
-    r(this, m, () => this.status = !1);
-    r(this, f, (t) => {
-      [...this.children].find(
-        (h) => h === t.target || h.contains(t.target)
-      ) || o(this, c) === t.target || o(this, c).contains(t.target) || (this.beforeClose ? this.beforeClose(() => this.status = !1) : o(this, m).call(this));
-    });
-    this.stylesheet = k, this.$render(), document.activeElement.blur(), g(() => {
-      this.focus();
-    }, 0);
-  }
-  static get observedAttributes() {
-    return [
-      "status",
-      "modal",
-      // "before-close",
-      "close-on-click-modal",
-      "z-index",
-      "background-color",
-      "content-width",
-      "content-max-width",
-      "content-height",
-      "content-left",
-      "content-top",
-      "content-translate-x",
-      "content-translate-y",
-      "content-transform"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    return this.computedClasslist("ea-overlay", {
-      "--open": this.status,
-      "--modal": !this.modal
-    });
+      { signal: this._transitionAbortController.signal, once: !0 }
+    );
+  }
+  _handleFocusin(e) {
+    if (!this.visible || this._isRedirectingFocus || e.composedPath().includes(this)) return;
+    this._isRedirectingFocus = !0;
+    const o = this.$getFocusableElements("all");
+    o.length > 0 ? o[0].focus() : this.focus(), this._isRedirectingFocus = !1;
+  }
+  /** Tab 键边界循环 */
+  _trapFocus(e) {
+    const o = this.$getFocusableElements("all");
+    if (o.length === 0) return;
+    const r = o[0], i = o[o.length - 1], l = document.activeElement;
+    e.shiftKey && l === r ? (e.preventDefault(), i == null || i.focus()) : !e.shiftKey && l === i && (e.preventDefault(), r == null || r.focus());
   }
+  /** 显示遮罩层 */
   show() {
-    this.status = !0;
+    this.visible = !0;
   }
+  /** 隐藏遮罩层 */
   hide() {
-    this.status = !1;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <div class='ea-overlay' part='container'>
-                <div class='ea-overlay__mask' part='mask'></div>
-                <div class='ea-overlay__content' part='content'>
-                    <slot></slot>
-                </div>
-            </div>
-        `, d(this, a, this.shadowRoot.querySelector(".ea-overlay")), d(this, u, this.shadowRoot.querySelector(".ea-overlay__mask")), d(this, c, this.shadowRoot.querySelector(
-      ".ea-overlay__content"
-    ));
-  }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = o(this, i)) == null || t.abort(), d(this, i, new AbortController()), this["close-on-click-modal"] && this.shadowRoot.addEventListener("click", o(this, f), {
-      signal: o(this, i).signal
-    });
+    this.visible = !1;
   }
-  $beforeUnmounted() {
-    o(this, i).abort();
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <div class="${a.e("mask")}" part="mask"></div>
+        <div class="${a.e("content")}" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
-}
-a = new WeakMap(), u = new WeakMap(), c = new WeakMap(), i = new WeakMap(), l = new WeakMap(), m = new WeakMap(), f = new WeakMap();
-window.customElements.get("ea-overlay") || window.customElements.define("ea-overlay", E);
+  _handleMaskClick(e) {
+    this.closeOnClickModal && this.hide();
+  }
+  _handleKeyDown(e) {
+    if (this.visible) {
+      if (e.key === "Tab") {
+        this._trapFocus(e);
+        return;
+      }
+      !this.closeOnPressEscape || e.key !== "Escape" || (e.stopImmediatePropagation(), e.preventDefault(), this.hide());
+    }
+  }
+  $mount() {
+    this.tabIndex = -1, this._handleAppendTo(), this.updateContainerClasslist();
+  }
+  $beforeUnmount() {
+    var e;
+    (e = this._transitionAbortController) == null || e.abort();
+  }
+};
+s([
+  d(a.cb())
+], t.prototype, "_container", 2);
+s([
+  d(a.ce("mask"))
+], t.prototype, "_overlayMask", 2);
+s([
+  d(a.ce("content"))
+], t.prototype, "_overlayContent", 2);
+s([
+  n({
+    type: Boolean,
+    default: !1,
+    observer(e) {
+      var o;
+      if (!this._inBeforeClose && !this._waitingBeforeClose) {
+        if ((o = this._transitionAbortController) == null || o.abort(), this._transitionAbortController = new AbortController(), this._closingByBeforeClose) {
+          this._closingByBeforeClose = !1, this._handleCloseTransition();
+          return;
+        }
+        e ? this._handleOpenTransition() : this._handleCloseRequest();
+      }
+    }
+  })
+], t.prototype, "visible", 2);
+s([
+  n({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "modal", 2);
+s([
+  n({
+    type: Boolean,
+    default: !0
+  })
+], t.prototype, "closeOnClickModal", 2);
+s([
+  n({
+    type: Boolean,
+    default: !0
+  })
+], t.prototype, "closeOnPressEscape", 2);
+s([
+  n({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this._appendHandled = !1, this._handleAppendTo();
+    }
+  })
+], t.prototype, "appendToBody", 2);
+s([
+  n({
+    type: String,
+    default: "body",
+    observer() {
+      this._appendHandled = !1, this._handleAppendTo();
+    }
+  })
+], t.prototype, "appendTo", 2);
+s([
+  n({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-z-index", e);
+    }
+  })
+], t.prototype, "zIndex", 2);
+s([
+  n({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-background-color", e);
+    }
+  })
+], t.prototype, "backgroundColor", 2);
+s([
+  n({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-content-width", e);
+    }
+  })
+], t.prototype, "contentWidth", 2);
+s([
+  n({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-content-max-width", e);
+    }
+  })
+], t.prototype, "contentMaxWidth", 2);
+s([
+  n({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-overlay-content-height", e);
+    }
+  })
+], t.prototype, "contentHeight", 2);
+s([
+  b({
+    type: Function,
+    default: null,
+    observer(e) {
+      e === null && (this._waitingBeforeClose = !1);
+    }
+  })
+], t.prototype, "beforeClose", 2);
+s([
+  c("focusin", "document")
+], t.prototype, "_handleFocusin", 1);
+s([
+  c("click", a.ce("mask"))
+], t.prototype, "_handleMaskClick", 1);
+s([
+  c("keydown", "document")
+], t.prototype, "_handleKeyDown", 1);
+t = s([
+  y(u, { styles: [_] })
+], t);
 export {
-  E as EaOverlay
+  t as EaOverlay
 };

package/dist/components/ea-page-header.js

@@ -1,108 +1,115 @@
-var m = Object.defineProperty;
-var b = (t) => {
-  throw TypeError(t);
+import { E as u } from "../core/EaBase.ts.js";
+import { q as p, l as _, C as v, a as d } from "../core/decorator.js";
+import { h } from "../utils/html.ts.js";
+import { s as b } from "../css/ea-page-header.style.js";
+import "./ea-icon.js";
+import { c as g } from "../utils/bem.ts.js";
+class f extends Event {
+  constructor(s = {}) {
+    super("ea-back", { bubbles: !0, composed: !0 }), this.detail = s;
+  }
+}
+var C = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (o, s, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? y(s, r) : s, c = o.length - 1, l; c >= 0; c--)
+    (l = o[c]) && (a = (i ? l(s, r, a) : l(a)) || a);
+  return i && a && C(s, r, a), a;
 };
-var u = (t, a, e) => a in t ? m(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e;
-var g = (t, a, e) => u(t, typeof a != "symbol" ? a + "" : a, e), _ = (t, a, e) => a.has(t) || b("Cannot " + e);
-var o = (t, a, e) => (_(t, a, "read from private field"), e ? e.call(t) : a.get(t)), s = (t, a, e) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, e), n = (t, a, e, i) => (_(t, a, "write to private field"), i ? i.call(t, e) : a.set(t, e), e);
-import { B as v } from "./Base.js";
-import { s as w } from "../css/ea-page-header.style.js";
-var c, l, d, h, r, p;
-class k extends v {
+const m = "ea-page-header", e = g(m);
+let t = class extends u {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    s(this, c);
-    /** @type {HTMLSlotElement} */
-    s(this, l);
-    /** @type {HTMLSlotElement} */
-    s(this, d);
-    /** @type {HTMLSlotElement} */
-    s(this, h);
-    /** @type {AbortController} */
-    s(this, r, new AbortController());
-    g(this, "state", this.properties({
-      icon: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          const i = o(this, l).querySelector("ea-icon");
-          i && i.setAttribute("name", e);
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          o(this, d).textContent = e;
-        }
-      },
-      content: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          o(this, h).textContent = e;
-        }
-      }
-    }));
-    /**
-     * 点击返回按钮时，派发 back 事件
-     */
-    s(this, p, () => {
-      this.emit("back");
-    });
-    this.stylesheet = w, this.$render();
+    super(...arguments), this.icon = "angle-left", this.heading = "", this.content = "";
+  }
+  /** 更新图标内容，icon 为空字符串时隐藏图标 */
+  _updateIcon() {
+    this.icon ? (this._iconContainer.classList.remove(e.s("hidden")), this._iconContainer.innerHTML = `<slot name="icon"><ea-icon name="${this.icon}" part="back-icon"></ea-icon></slot>`) : (this._iconContainer.classList.add(e.s("hidden")), this._iconContainer.innerHTML = '<slot name="icon"></slot>');
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "icon", "title", "content"];
+  /** 更新标题内容，为空时恢复 slot */
+  _updateHeading() {
+    this._headingContainer.innerHTML = h(this.heading) || '<slot name="title">Back</slot>';
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-page-header' part='container'>
-        <section class="ea-page-header__breadcrumb" part="breadcrumb">
+  /** 更新内容区域，为空时恢复 slot */
+  _updateContent() {
+    this._contentContainer.innerHTML = h(this.content) || '<slot name="content"></slot>';
+  }
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${e()}' part='container'>
+        <section class="${e.e("breadcrumb")}" part="breadcrumb">
           <slot name="breadcrumb"></slot>
         </section>
-        <section class="ea-page-header__wrapper" part="header-wrapper">
-          <div class="ea-page-header__back" part="back">
-            <span class="ea-page-header__icon" part="icon">
+        <section class="${e.e("wrapper")}" part="header-wrapper">
+          <div class="${e.e("back")}" part="back">
+            <span class="${e.e("icon")}" part="icon">
               <slot name="icon">
                 <ea-icon name="angle-left" part="back-icon"></ea-icon>
               </slot>
             </span>
-            <span class="ea-page-header__title" part="title">
-                <slot name="title">Back</slot>
+            <span class="${e.e("heading")}" part="title">
+              <slot name="title">Back</slot>
             </span>
           </div>
-          <ea-icon class="ea-page-header__divider" part="divider">|</ea-icon>
-          <div class="ea-page-header__content" part="content">
+          <span class="${e.e("divider")}" part="divider">|</span>
+          <div class="${e.e("content")}" part="content">
             <slot name="content"></slot>
           </div>
-          <div class="ea-page-header__extra" part="extra">
+          <div class="${e.e("extra")}" part="extra">
             <slot name="extra"></slot>
           </div>
         </section>
         <slot></slot>
       </div>
-    `, n(this, c, this.shadowRoot.querySelector(".ea-page-header__back")), n(this, l, this.shadowRoot.querySelector(
-      ".ea-page-header__icon slot[name='icon']"
-    )), n(this, d, this.shadowRoot.querySelector(
-      ".ea-page-header__title slot[name='title']"
-    )), n(this, h, this.shadowRoot.querySelector(
-      ".ea-page-header__content slot[name='content']"
-    ));
+    `;
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = o(this, r)) == null || e.abort(), n(this, r, new AbortController()), o(this, c).addEventListener("click", o(this, p), {
-      signal: o(this, r).signal
-    });
+  _handleBackClick(o) {
+    this.dispatchEvent(new f());
   }
-  $beforeUnmounted() {
-    o(this, r).abort();
+  $mount() {
+    this._updateIcon();
   }
-}
-c = new WeakMap(), l = new WeakMap(), d = new WeakMap(), h = new WeakMap(), r = new WeakMap(), p = new WeakMap();
-window.customElements.get("ea-page-header") || window.customElements.define("ea-page-header", k);
+};
+n([
+  p(e.ce("icon"))
+], t.prototype, "_iconContainer", 2);
+n([
+  p(e.ce("heading"))
+], t.prototype, "_headingContainer", 2);
+n([
+  p(e.ce("content"))
+], t.prototype, "_contentContainer", 2);
+n([
+  d({
+    type: String,
+    default: "angle-left",
+    observer() {
+      this._updateIcon();
+    }
+  })
+], t.prototype, "icon", 2);
+n([
+  d({
+    type: String,
+    default: "",
+    observer() {
+      this._updateHeading();
+    }
+  })
+], t.prototype, "heading", 2);
+n([
+  d({
+    type: String,
+    default: "",
+    observer() {
+      this._updateContent();
+    }
+  })
+], t.prototype, "content", 2);
+n([
+  _("click", e.ce("back"))
+], t.prototype, "_handleBackClick", 1);
+t = n([
+  v(m, { styles: [b] })
+], t);
 export {
-  k as EaPageHeader
+  t as EaPageHeader
 };