easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-dropdown.js

@@ -1,228 +1,302 @@
-var C = Object.defineProperty;
-var g = (t) => {
-  throw TypeError(t);
+import { EaPopper as E } from "./ea-popper.js";
+import { a as h, C as f, l as c, q as C } from "../core/decorator.js";
+import { E as _ } from "../utils/Enum.ts.js";
+import { s as T } from "../css/ea-dropdown.style.js";
+import { E as b } from "../core/EaBase.ts.js";
+import { s as D } from "../css/ea-dropdown-item.style.js";
+import { c as y } from "../utils/bem.ts.js";
+import { s as k } from "../css/ea-dropdown-menu.style.js";
+var $ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, u = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? x(t, s) : t, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (i = (r ? n(t, s, i) : n(i)) || i);
+  return r && i && $(t, s, i), i;
 };
-var E = (t, s, e) => s in t ? C(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var v = (t, s, e) => E(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || g("Cannot " + e);
-var i = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? g("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, a) => (w(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { EaPopper as k } from "./ea-popper.js";
-import { s as A } from "../css/ea-dropdown.style.js";
-import { B as f } from "./Base.js";
-import { s as y } from "../css/ea-dropdown-item.style.js";
-import { s as L } from "../css/ea-dropdown-menu.style.js";
-var d, n, l, m;
-class x extends k {
+const H = "ea-dropdown", O = ["click", "hover", "contextmenu"], P = ["small", "default", "large"];
+let a = class extends E {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, d);
-    /** @type {AbortController} */
-    o(this, n, new AbortController());
-    o(this, l, {
-      hasPlacement: !0
-    });
-    v(this, "state", this.properties({
-      trigger: {
-        type: ["click", "hover", "contextmenu"],
-        default: "hover",
-        observer: () => {
-        }
-      },
-      "hide-on-click": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      size: {
-        type: ["small", "default", "large"],
-        default: "",
-        observer: () => {
-        }
-      }
-    }));
-    /**
-     * 触发事件
-     */
-    o(this, m, {
+    super(...arguments), this._hoverHideTimer = null, this.trigger = "hover", this.hideOnClick = !0, this.size = "", this._triggerEventStrategies = {
       hover: () => {
-        let e = new AbortController();
         this.addEventListener(
-          "mouseover",
+          "mouseenter",
           () => {
-            e == null || e.abort(), e = new AbortController(), this.show(), this.addEventListener(
-              "mouseout",
-              () => {
-                this.hide();
-              },
-              { signal: e.signal, once: !0 }
-            ), this.status || e.abort();
+            this._clearHoverHideTimer(), this.show();
+          },
+          { signal: this._triggerAbortController.signal }
+        ), this.addEventListener(
+          "mouseleave",
+          () => {
+            this._scheduleHoverHide();
           },
-          { signal: i(this, n).signal }
+          { signal: this._triggerAbortController.signal }
         );
       },
       click: () => {
-        i(this, d).addEventListener(
+        this._referenceSlot.addEventListener(
           "click",
-          () => {
-            this.toggle();
+          (e) => {
+            e.detail !== 0 && this.toggle();
           },
-          { signal: i(this, n).signal }
+          { signal: this._triggerAbortController.signal }
         );
       },
       contextmenu: () => {
-        let e = new AbortController();
-        const a = (b) => {
-          this.contains(b.target) || (e.abort(), this.hide());
-        }, p = (b) => {
-          b.preventDefault(), e == null || e.abort(), e = new AbortController(), this.toggle(), window.addEventListener("click", a, {
-            signal: e.signal,
-            once: !0
-          }), this.status || e.abort();
-        };
-        this.addEventListener("contextmenu", p, {
-          signal: i(this, n).signal
-        });
+        this.addEventListener(
+          "contextmenu",
+          (e) => {
+            var t;
+            e.preventDefault(), (t = this._contextmenuAbortController) == null || t.abort(), this._contextmenuAbortController = new AbortController(), this.toggle(), this.visible && window.addEventListener(
+              "click",
+              (s) => {
+                this.contains(s.target) || this.hide();
+              },
+              { signal: this._contextmenuAbortController.signal, once: !0 }
+            );
+          },
+          { signal: this._triggerAbortController.signal }
+        );
       }
-    });
-    h(this, d, this.shadowRoot.querySelector('slot[name="reference"]')), this.getAttrString("placement") || (i(this, l).hasPlacement = !1);
+    };
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "trigger", "hide-on-click", "size"];
+  /** 清除 hover 隐藏定时器 */
+  _clearHoverHideTimer() {
+    this._hoverHideTimer !== null && (clearTimeout(this._hoverHideTimer), this._hoverHideTimer = null);
   }
-  connectedCallback() {
-    super.connectedCallback(), this.assignedStyle(A), i(this, l).hasPlacement || (this.placement = "bottom"), i(this, m)[this.trigger](), this.addEventListener(
-      "ea-dropdown-item-click",
-      (e) => {
-        e.stopPropagation(), this["hide-on-click"] && this.hide();
-      },
-      { signal: i(this, n).signal }
-    );
+  /** 设置 ARIA 关联属性，添加 aria-haspopup，使非交互式触发元素可聚焦 */
+  _setupAria() {
+    super._setupAria();
+    const e = this._getReferenceTrigger();
+    e && (e.setAttribute("aria-haspopup", "menu"), this._isNativelyFocusable(e) || (e.setAttribute("tabindex", "0"), e.setAttribute("role", "button")));
   }
-  $beforeUnmounted() {
-    i(this, n).abort();
+  /** 检查元素是否原生可聚焦 */
+  _isNativelyFocusable(e) {
+    return !!(["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(e.tagName) || e.tabIndex >= 0);
   }
-}
-d = new WeakMap(), n = new WeakMap(), l = new WeakMap(), m = new WeakMap();
-window.customElements.get("ea-dropdown") || window.customElements.define("ea-dropdown", x);
-var c, r, u;
-class $ extends f {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, c);
-    /** @type {AbortController} */
-    o(this, r, new AbortController());
-    v(this, "state", this.properties({
-      divided: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.toggleAttribute("aria-disabled", e), this.updateContainerClasslist();
-        }
-      },
-      command: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
+  /** 延迟隐藏下拉菜单 */
+  _scheduleHoverHide() {
+    this._hoverHideTimer = setTimeout(() => {
+      this.hide(), this._hoverHideTimer = null;
+    }, 150);
+  }
+  /** 设置触发事件监听器 */
+  _setupTrigger() {
+    var e;
+    (e = this._triggerAbortController) == null || e.abort(), this._triggerAbortController = new AbortController(), this._triggerEventStrategies[this.trigger]();
+  }
+  /** 获取所有非禁用的下拉菜单项 */
+  _getDropdownItems() {
+    return [
+      ...this.querySelectorAll("ea-dropdown-item:not([disabled])")
+    ];
+  }
+  _handleKeydown(e) {
+    var n;
+    const t = e.target, s = this._getReferenceTrigger(), r = this._getDropdownItems(), i = s && (t === s || s.contains(t)), o = (n = t.closest) == null ? void 0 : n.call(t, "ea-dropdown-item");
+    if (e.key === "Escape" && this.visible) {
+      e.preventDefault(), this.hide(), s == null || s.focus();
+      return;
+    }
+    if (i) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault(), this.toggle();
+        return;
       }
-    }));
-    /**
-     * 点击事件
-     * @param {Event} e
-     */
-    o(this, u, (e) => {
-      if (this.hasAttribute("disabled")) {
-        e.stopImmediatePropagation(), e.preventDefault();
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        e.preventDefault(), this.visible || this.show(), r.length > 0 && requestAnimationFrame(() => r[0].focus());
         return;
       }
-      const a = () => {
-        this.emit("ea-dropdown-item-click", {
-          bubbles: !0
-        });
-      }, p = () => {
-        this.emit("command", {
-          detail: {
-            command: this.command
-          },
-          bubbles: !0
-        });
-      };
-      a(), this.command && p();
+      if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.preventDefault(), this.visible || this.show(), r.length > 0 && requestAnimationFrame(() => r[r.length - 1].focus());
+        return;
+      }
+      return;
+    }
+    if (o && this.visible) {
+      const m = r.indexOf(o);
+      if (e.key === "Tab") {
+        this.hide();
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        e.preventDefault();
+        const v = m + 1;
+        v < r.length && r[v].focus();
+        return;
+      }
+      if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.preventDefault(), m > 0 ? r[m - 1].focus() : s == null || s.focus();
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault(), r.length > 0 && r[0].focus();
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault(), r.length > 0 && r[r.length - 1].focus();
+        return;
+      }
+    }
+  }
+  _handleFocusout() {
+    this.visible && requestAnimationFrame(() => {
+      if (!this.visible) return;
+      const e = document.activeElement;
+      e && this.contains(e) || this.hide();
     });
-    this.stylesheet = y, this.$render();
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "disabled", "divided", "command"];
+  _handleDropdownItemClick(e) {
+    e.stopPropagation(), this.hideOnClick && this.hide();
+  }
+  $mount() {
+    this.getAttribute("placement") || (this.placement = "bottom"), super.$mount(), this._setupTrigger();
+  }
+  $beforeUnmount() {
+    var e, t;
+    super.$beforeUnmount(), (e = this._triggerAbortController) == null || e.abort(), (t = this._contextmenuAbortController) == null || t.abort(), this._clearHoverHideTimer();
+  }
+};
+u([
+  h({
+    type: _(O),
+    default: "hover",
+    observer() {
+      this._setupTrigger();
+    }
+  })
+], a.prototype, "trigger", 2);
+u([
+  h({
+    type: Boolean,
+    default: !0
+  })
+], a.prototype, "hideOnClick", 2);
+u([
+  h({
+    type: _(P),
+    default: ""
+  })
+], a.prototype, "size", 2);
+u([
+  c("keydown")
+], a.prototype, "_handleKeydown", 1);
+u([
+  c("focusout")
+], a.prototype, "_handleFocusout", 1);
+u([
+  c("ea-dropdown-item-click")
+], a.prototype, "_handleDropdownItemClick", 1);
+a = u([
+  f(H, { styles: [T] })
+], a);
+class I extends Event {
+  constructor(t) {
+    super("ea-command", { bubbles: !0, composed: !0 }), this.detail = t;
+  }
+}
+var N = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? S(t, s) : t, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (i = (r ? n(t, s, i) : n(i)) || i);
+  return r && i && N(t, s, i), i;
+};
+const w = "ea-dropdown-item", p = y(w);
+let l = class extends b {
+  constructor() {
+    super(...arguments), this.divided = !1, this.disabled = !1, this.command = "";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-dropdown-item",
-      {
-        "--disabled": this.disabled
-      },
-      {
-        divided: this.divided
-      }
+    const e = p(
+      { disabled: this.disabled },
+      { divided: this.divided }
     );
-    return i(this, c).className = e, e;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-dropdown-item' part='container'>
-        <div class='ea-dropdown-item__divider' part='divider'></div>
-        <div class='ea-dropdown-item__content' part='content'>
-            <slot></slot>
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <div class="${p.e("divider")}" part="divider"></div>
+        <div class="${p.e("content")}" part="content">
+          <slot></slot>
         </div>
       </div>
-    `, h(this, c, this.shadowRoot.querySelector(".ea-dropdown-item")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = i(this, r)) == null || e.abort(), h(this, r, new AbortController()), this.addEventListener("click", i(this, u), {
-      signal: i(this, r).signal
-    });
+  _handleClick(e) {
+    if (this.disabled) {
+      e.stopImmediatePropagation(), e.preventDefault();
+      return;
+    }
+    this.emit("ea-dropdown-item-click"), this.command && this.dispatchEvent(new I({ command: this.command }));
   }
-  $beforeUnmounted() {
-    var e;
-    (e = i(this, r)) == null || e.abort();
+  _handleKeydown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
   }
-}
-c = new WeakMap(), r = new WeakMap(), u = new WeakMap();
-window.customElements.get("ea-dropdown-item") || window.customElements.define("ea-dropdown-item", $);
-class P extends f {
-  static get observedAttributes() {
-    return [...super.observedAttributes];
-  }
-  constructor() {
-    super(), this.stylesheet = L, this.$render();
+  $mount() {
+    this.tabIndex = 0, this.setAttribute("role", "menuitem"), this.updateContainerClasslist();
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-dropdown-menu' part='container'>
+};
+d([
+  C(p.cb())
+], l.prototype, "_container", 2);
+d([
+  h({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], l.prototype, "divided", 2);
+d([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (e) => String(e)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], l.prototype, "disabled", 2);
+d([
+  h({
+    type: String,
+    default: ""
+  })
+], l.prototype, "command", 2);
+d([
+  c("click")
+], l.prototype, "_handleClick", 1);
+d([
+  c("keydown")
+], l.prototype, "_handleKeydown", 1);
+l = d([
+  f(w, { styles: [D] })
+], l);
+var L = Object.getOwnPropertyDescriptor, F = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? L(t, s) : t, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (i = n(i) || i);
+  return i;
+};
+const A = "ea-dropdown-menu", R = y(A);
+let g = class extends b {
+  html() {
+    return `
+      <div class="${R()}" part="container">
         <slot></slot>
       </div>
     `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.setAttribute("role", "menu"), this.setAttribute("aria-label", "Menu");
   }
-}
-window.customElements.get("ea-dropdown-menu") || window.customElements.define("ea-dropdown-menu", P);
+};
+g = F([
+  f(A, { styles: [k] })
+], g);
 export {
-  x as EaDropdown,
-  $ as EaDropdownItem,
-  P as EaDropdownMenu
+  a as EaDropdown,
+  I as EaDropdownCommandEvent,
+  l as EaDropdownItem,
+  g as EaDropdownMenu
 };

package/dist/components/ea-empty.js

@@ -1,93 +1,103 @@
-var u = Object.defineProperty;
-var d = (t) => {
-  throw TypeError(t);
-};
-var g = (t, s, e) => s in t ? u(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var c = (t, s, e) => g(t, typeof s != "symbol" ? s + "" : s, e), h = (t, s, e) => s.has(t) || d("Cannot " + e);
-var a = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), r = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), p = (t, s, e, m) => (h(t, s, "write to private field"), m ? m.call(t, e) : s.set(t, e), e);
-import { B as v } from "./Base.js";
-import { s as _ } from "../css/ea-empty.style.js";
-const y = `
+import { E as h } from "../core/EaBase.ts.js";
+import { q as d, C as g, a as m } from "../core/decorator.js";
+import { s as f } from "../css/ea-empty.style.js";
+import { c as v } from "../utils/bem.ts.js";
+const c = `
 <svg viewBox="25 30 50 50" xmlns="http://www.w3.org/2000/svg">
     <path d="M30 50v21.5a2 2 0 0 0 1 1h39a2 2 0 0 0 1-1V50H61a10 10 0 0 1-20 0h-6.5z" class="front" part="default-image-front" />
     <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" class="border" part="default-image-border" />
 </svg>
 `;
-var l, i, o, n;
-class f extends v {
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, e, p, r) => {
+  for (var a = r > 1 ? void 0 : r ? _(e, p) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (a = (r ? l(e, p, a) : l(a)) || a);
+  return r && a && y(e, p, a), a;
+};
+const u = "ea-empty", s = v(u);
+let i = class extends h {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, l);
-    /** @type {HTMLElement} */
-    r(this, i);
-    /** @type {HTMLElement} */
-    r(this, o);
-    /** @type {HTMLElement} */
-    r(this, n);
-    c(this, "state", this.properties({
-      image: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          e ? a(this, i).innerHTML = this.html(`
-            <img class="ea-empty__image" src="${e}" alt="empty image" part="image" />
-          `) : a(this, i).innerHTML = this.html(`
-            <section class="ea-empty__default">${y}</section>
-          `);
-        }
-      },
-      "image-size": {
-        type: String,
-        default: "",
-        observer: (e) => {
-          if (!CSS.supports("--ea-empty-size", e))
-            return console.warn(
-              `[ea-empty] The size value ${e} is not supported.`
-            );
-          this.style.setProperty("--ea-empty-size", e);
-        }
-      },
-      description: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          e ? a(this, o).textContent = e : a(this, o).innerText = "No Data";
-        }
-      }
-    }));
-    this.stylesheet = _, this.$render();
+    super(...arguments), this.image = "", this.imageSize = "", this.description = "";
+  }
+  /** 更新图片区域内容 */
+  _updateImage(t) {
+    if (!t) {
+      this._imageSlot.innerHTML = `<section class="${s.e("default")}">${c}</section>`;
+      return;
+    }
+    const e = document.createElement("img");
+    e.className = s.e("image"), e.src = t, e.alt = "empty image", e.setAttribute("part", "image"), this._imageSlot.innerHTML = "", this._imageSlot.appendChild(e);
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "image", "image-size", "description"];
+  /** 更新描述文字内容 */
+  _updateDescription(t) {
+    this._descriptionSlot.textContent = t || "No Data";
   }
-  $render() {
-    this.shadowRoot.innerHTML = this.html(`
-      <div class='ea-empty' part='container'>
-        <div class="ea-empty__placeholder" part="placeholder">
-            <slot name="image">
-              <section class="ea-empty__default">${y}</section>
-            </slot>
+  html() {
+    return `
+      <div class="${s()}" part="container" role="status">
+        <div class="${s.e("placeholder")}" part="placeholder">
+          <slot name="image">
+            <section class="${s.e("default")}">${c}</section>
+          </slot>
         </div>
-        <div class="ea-empty__description" part="description">
-            <slot name="description">No Data</slot>
+        <div class="${s.e("description")}" part="description">
+          <slot name="description">No Data</slot>
         </div>
-        <div class="ea-empty__bottom" part="bottom">
-            <slot></slot>
+        <div class="${s.e("bottom")}" part="bottom">
+          <slot></slot>
         </div>
       </div>
-    `), p(this, l, this.shadowRoot.querySelector(".ea-empty")), p(this, i, this.shadowRoot.querySelector(
-      ".ea-empty__placeholder slot[name='image']"
-    )), p(this, o, this.shadowRoot.querySelector(
-      ".ea-empty__description slot[name='description']"
-    )), p(this, n, this.shadowRoot.querySelector(".ea-empty__bottom"));
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.image && this._updateImage(this.image), this.description && this._updateDescription(this.description);
   }
-}
-l = new WeakMap(), i = new WeakMap(), o = new WeakMap(), n = new WeakMap();
-window.customElements.get("ea-empty") || window.customElements.define("ea-empty", f);
+};
+o([
+  d(`${s.ce("placeholder")} slot[name="image"]`)
+], i.prototype, "_imageSlot", 2);
+o([
+  d(`${s.ce("description")} slot[name="description"]`)
+], i.prototype, "_descriptionSlot", 2);
+o([
+  m({
+    type: String,
+    default: "",
+    observer(t) {
+      this._updateImage(t);
+    }
+  })
+], i.prototype, "image", 2);
+o([
+  m({
+    type: String,
+    default: "",
+    observer(t) {
+      if (!t) {
+        this.style.removeProperty("--ea-empty-size");
+        return;
+      }
+      if (!CSS.supports("width", t)) {
+        console.warn(`[ea-empty] The size value ${t} is not supported.`);
+        return;
+      }
+      this.style.setProperty("--ea-empty-size", t);
+    }
+  })
+], i.prototype, "imageSize", 2);
+o([
+  m({
+    type: String,
+    default: "",
+    observer(t) {
+      this._updateDescription(t);
+    }
+  })
+], i.prototype, "description", 2);
+i = o([
+  g(u, { styles: [f] })
+], i);
+const D = i;
 export {
-  f as EaEmpty
+  i as EaEmpty,
+  D as default
 };