easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-popper.js

@@ -1,203 +1,237 @@
-var y = Object.defineProperty;
-var m = (s) => {
-  throw TypeError(s);
+import { E as f } from "../core/EaBase.ts.js";
+import { q as h, a as p, C as b } from "../core/decorator.js";
+import { E as g } from "../utils/Enum.ts.js";
+import { s as m } from "../css/ea-popper.style.js";
+import { c as _ } from "../utils/bem.ts.js";
+class v extends Event {
+  constructor(t) {
+    super("ea-show", { bubbles: !0, composed: !0 }), this.detail = t ?? {};
+  }
+}
+class w extends Event {
+  constructor(t) {
+    super("ea-shown", { bubbles: !0, composed: !0 }), this.detail = t ?? {};
+  }
+}
+class E extends Event {
+  constructor(t) {
+    super("ea-hide", { bubbles: !0, composed: !0 }), this.detail = t ?? {};
+  }
+}
+class y extends Event {
+  constructor(t) {
+    super("ea-hidden", { bubbles: !0, composed: !0 }), this.detail = t ?? {};
+  }
+}
+var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, t, i, r) => {
+  for (var n = r > 1 ? void 0 : r ? P(t, i) : t, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (n = (r ? d(t, i, n) : d(n)) || n);
+  return r && n && C(t, i, n), n;
 };
-var v = (s, t, e) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var w = (s, t, e) => v(s, typeof t != "symbol" ? t + "" : t, e), g = (s, t, e) => t.has(s) || m("Cannot " + e);
-var i = (s, t, e) => (g(s, t, "read from private field"), e ? e.call(s) : t.get(s)), l = (s, t, e) => t.has(s) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), c = (s, t, e, r) => (g(s, t, "write to private field"), r ? r.call(s, e) : t.set(s, e), e);
-import { B as C } from "./Base.js";
-import { s as x } from "../css/ea-popper.style.js";
-const b = (s, t = 0) => {
-  const e = s.getBoundingClientRect();
-  return e.top >= t && e.left >= t && e.bottom <= window.innerHeight - t && e.right <= window.innerWidth - t;
-}, B = (s, t) => {
-  const e = {
+const c = "ea-popper", l = _(c), x = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end"
+], u = (e, t = 0) => {
+  const i = e.getBoundingClientRect();
+  return i.top >= t && i.left >= t && i.bottom <= window.innerHeight - t && i.right <= window.innerWidth - t;
+}, A = (e, t) => {
+  const i = {
     left: "right",
     right: "left",
     top: "bottom",
     bottom: "top"
-  }, r = s.getBoundingClientRect(), n = {
+  }, r = e.getBoundingClientRect(), n = {
     top: r.top < 0 && t.includes("top"),
     bottom: r.bottom > window.innerHeight && t.includes("bottom"),
     left: r.left < 0 && t.includes("left"),
     right: r.right > window.innerWidth && t.includes("right")
   };
-  if (b(s)) return t;
-  for (const p in n)
-    if (n[p])
-      return t.replace(p, e[p]);
+  if (u(e)) return t;
+  for (const a in n)
+    if (n[a])
+      return t.replace(a, i[a]);
   return t;
 };
-var o, a, f, h, u, d;
-class R extends C {
+let s = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    l(this, o);
-    /** @type {HTMLElement} */
-    l(this, a);
-    /** @type {HTMLElement} */
-    l(this, f);
-    /** @type {AbortController} */
-    l(this, h);
-    /** @type {Boolean} */
-    l(this, u);
-    w(this, "state", this.properties({
-      width: {
-        type: Number,
-        default: "150",
-        observer: (e) => {
-          i(this, a).style.setProperty(
-            "--ea-popper-width",
-            `${e}px`
-          );
-        }
-      },
-      placement: {
-        type: [
-          "top",
-          "top-start",
-          "top-end",
-          "bottom",
-          "bottom-start",
-          "bottom-end",
-          "left",
-          "left-start",
-          "left-end",
-          "right",
-          "right-start",
-          "right-end"
-        ],
-        default: "top",
-        observer: (e) => {
-          i(this, o).className = this.updateContainerClasslist();
-        }
-      },
-      "show-arrow": {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          i(this, o).className = this.updateContainerClasslist();
-        }
+    super(...arguments), this._uniqueId = s._instanceCount++, this.width = 150, this.placement = "top", this.showArrow = !0, this.visible = !1, this.offset = "0 0", this.flip = !0;
+  }
+  updateContainerClasslist() {
+    const e = l(
+      {
+        [this.placement]: !0
       },
-      status: {
-        type: Boolean,
-        default: !1,
-        observer: async (e) => {
-          var r;
-          if ((r = i(this, h)) == null || r.abort(), c(this, h, new AbortController()), e) {
-            if (i(this, o).className = this.updateContainerClasslist(), i(this, d).call(this, "show"), this.flip) {
-              const n = i(this, a).getBoundingClientRect(), p = b(
-                this,
-                Math.max(n.width, n.height)
-              );
-              i(this, u) === this.placement ? this.placement = B(
-                i(this, a),
-                this.placement
-              ) : p && (this.placement = i(this, u));
-            }
-            i(this, o).offsetWidth, i(this, o).classList.add("ea-popper--is-show"), i(this, o).addEventListener(
-              "transitionend",
-              () => {
-                i(this, d).call(this, "shown");
-              },
-              { once: !0, signal: i(this, h).signal }
-            );
-          } else
-            i(this, o).classList.add("ea-popper--before-hide"), i(this, d).call(this, "hide"), i(this, o).addEventListener(
-              "transitionend",
-              () => {
-                i(this, o).className = this.updateContainerClasslist(), i(this, d).call(this, "hidden");
-              },
-              { once: !0, signal: i(this, h).signal }
-            );
-        }
+      {
+        show: this.visible,
+        "show-arrow": this.showArrow
+      }
+    );
+    return this._container && (this._container.className = e), e;
+  }
+  /** 处理显示过渡动画 */
+  _handleShowTransition() {
+    if (this._container.classList.add("is-before-show"), this.dispatchEvent(new v()), this.flip) {
+      const e = this._originalPopper.getBoundingClientRect(), t = u(
+        this,
+        Math.max(e.width, e.height)
+      );
+      this._originPlacement === this.placement ? this.placement = A(
+        this._originalPopper,
+        this.placement
+      ) : t && (this.placement = this._originPlacement);
+    }
+    this._container.offsetWidth, this._container.classList.add("is-show"), this._container.addEventListener(
+      "transitionend",
+      () => {
+        this.dispatchEvent(new w()), this.updateContainerClasslist();
       },
-      offset: {
-        type: String,
-        default: "0 0",
-        observer: (e) => {
-          try {
-            let [r, n] = e.split(" ").map((p) => Number(p.trim()));
-            if (r && typeof n > "u")
-              n = r;
-            else if (!(r && n || `${r} ${n}` == "0 0"))
-              throw new RangeError(
-                `[ea-popper] Invalid offset value: ${e}, expected format: "x(Number) y(Number)"`
-              );
-            i(this, a).style.setProperty(
-              "--ea-popper-transform-x",
-              `${r}px`
-            ), i(this, a).style.setProperty(
-              "--ea-popper-transform-y",
-              `${n}px`
-            );
-          } catch (r) {
-            console.error(r);
-          }
-        }
+      { once: !0, signal: this._visibleAbortController.signal }
+    );
+  }
+  /** 处理隐藏过渡动画 */
+  _handleHideTransition() {
+    this._container.classList.add("is-before-hide"), this.dispatchEvent(new E()), this._container.addEventListener(
+      "transitionend",
+      () => {
+        this.updateContainerClasslist(), this.dispatchEvent(new y());
       },
-      flip: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-        }
-      }
-    }));
-    l(this, d, (e, r) => {
-      this.emit(e, {
-        detail: r,
-        bubbles: !0,
-        composed: !0
-      });
-    });
-    this.stylesheet = x, this.$render();
-  }
-  static get observedAttributes() {
-    return ["width", "placement", "show-arrow", "status", "offset", "filp"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    return this.computedClasslist("ea-popper", {
-      ["--" + this.placement]: this.placement,
-      "--show-arrow": this["show-arrow"],
-      "--show": this.status
-    });
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-popper' part='container' tabindex='-1'>
-        <div class='ea-popper__reference' part='reference' tabindex='-1'>
-          <div class='ea-popper__original' part='original' tabindex='0'>
+      { once: !0, signal: this._visibleAbortController.signal }
+    );
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container" tabindex="-1">
+        <div class="${l.e("reference")}" part="reference" tabindex="-1">
+          <div class="${l.e("original")}" part="original" tabindex="-1">
             <slot></slot>
           </div>
-          <slot name='reference'></slot>
+          <slot name="reference"></slot>
         </div>
       </div>
-    `, c(this, o, this.shadowRoot.querySelector(".ea-popper")), c(this, a, this.shadowRoot.querySelector(
-      ".ea-popper__original"
-    )), c(this, f, this.shadowRoot.querySelector(
-      ".ea-popper__reference"
-    ));
+    `;
   }
   show() {
-    this.status = !0;
+    this.visible = !0;
   }
   hide() {
-    this.status = !1;
+    this.visible = !1;
   }
   toggle() {
-    this.status = !this.status;
+    this.visible = !this.visible;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.placement = this.placement, c(this, u, this.placement);
+  /** 获取 reference 插槽中的第一个已分配元素 */
+  _getReferenceTrigger() {
+    return this._referenceSlot && this._referenceSlot.assignedElements()[0] || null;
   }
-}
-o = new WeakMap(), a = new WeakMap(), f = new WeakMap(), h = new WeakMap(), u = new WeakMap(), d = new WeakMap();
-window.customElements.get("ea-popper") || window.customElements.define("ea-popper", R);
+  /** 设置 ARIA 关联属性：为 original 添加 id，为触发器添加 aria-controls */
+  _setupAria() {
+    const e = `ea-popper-${this._uniqueId}`;
+    this._originalPopper.setAttribute("id", `${e}-content`);
+    const t = this._getReferenceTrigger();
+    t && (t.setAttribute("aria-controls", `${e}-content`), t.setAttribute("aria-expanded", String(this.visible)));
+  }
+  /** 更新触发器的 aria-expanded 状态 */
+  _updateAriaExpanded() {
+    const e = this._getReferenceTrigger();
+    e && e.setAttribute("aria-expanded", String(this.visible));
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._originPlacement = this.placement, this._setupAria();
+  }
+  $beforeUnmount() {
+    var e;
+    (e = this._visibleAbortController) == null || e.abort();
+  }
+};
+s._instanceCount = 0;
+o([
+  h(l.cb())
+], s.prototype, "_container", 2);
+o([
+  h(l.ce("original"))
+], s.prototype, "_originalPopper", 2);
+o([
+  h(l.ce("reference"))
+], s.prototype, "_referenceElement", 2);
+o([
+  h('slot[name="reference"]')
+], s.prototype, "_referenceSlot", 2);
+o([
+  p({
+    type: Number,
+    default: 150,
+    observer(e) {
+      this.style.setProperty("--ea-popper-width", `${e}px`);
+    }
+  })
+], s.prototype, "width", 2);
+o([
+  p({
+    type: g(x),
+    default: "top",
+    observer() {
+      this._container && this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "placement", 2);
+o([
+  p({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this._container && this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "showArrow", 2);
+o([
+  p({
+    type: Boolean,
+    default: !1,
+    observer(e) {
+      var t;
+      (t = this._visibleAbortController) == null || t.abort(), this._visibleAbortController = new AbortController(), e ? this._handleShowTransition() : this._handleHideTransition(), this._updateAriaExpanded();
+    }
+  })
+], s.prototype, "visible", 2);
+o([
+  p({
+    type: String,
+    default: "0 0",
+    observer(e) {
+      try {
+        let [t, i] = e.split(" ").map((r) => Number(r.trim()));
+        if (t && typeof i > "u")
+          i = t;
+        else if (!(t && i || `${t} ${i}` == "0 0"))
+          throw new RangeError(
+            `[ea-popper] Invalid offset value: ${e}, expected format: "x(Number) y(Number)"`
+          );
+        this.style.setProperty("--ea-popper-transform-x", `${t}px`), this.style.setProperty("--ea-popper-transform-y", `${i}px`);
+      } catch (t) {
+        console.error(t);
+      }
+    }
+  })
+], s.prototype, "offset", 2);
+o([
+  p({
+    type: Boolean,
+    default: !0
+  })
+], s.prototype, "flip", 2);
+s = o([
+  b(c, { styles: [m] })
+], s);
 export {
-  R as EaPopper
+  s as EaPopper
 };