easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-drawer.js

@@ -0,0 +1,171 @@
+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;
+};
+const b = "ea-drawer", A = u(b), i = u("ea-drawer-main"), w = ["rtl", "ltr", "ttb", "btt"];
+let t = class extends m {
+  constructor() {
+    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='${i.e("content")}' part='content'>
+          <slot></slot>
+        </main>
+        <footer class='${i.e("footer")}' part='footer'>
+          <slot name='footer'></slot>
+        </footer>
+      </div>
+    `, e.innerHTML;
+  }
+  /**
+   * 更新容器类名
+   */
+  updateContainerClasslist() {
+    const e = A(
+      { [this.direction]: !0 },
+      {
+        "close-hidden": !this.showClose,
+        "header-hidden": !this.withHeader
+      }
+    ), o = `${super.updateContainerClasslist()} ${e}`.trim();
+    return this._container && (this._container.className = o), o;
+  }
+  _handleCloseIconClick() {
+    this.showClose && this.hide();
+  }
+  _handleClosed(e) {
+    e.target === this && this.hide();
+  }
+  // ==================== 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 {
+  t as EaDrawer
+};

package/dist/components/ea-dropdown.js

@@ -0,0 +1,302 @@
+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;
+};
+const H = "ea-dropdown", O = ["click", "hover", "contextmenu"], P = ["small", "default", "large"];
+let a = class extends E {
+  constructor() {
+    super(...arguments), this._hoverHideTimer = null, this.trigger = "hover", this.hideOnClick = !0, this.size = "", this._triggerEventStrategies = {
+      hover: () => {
+        this.addEventListener(
+          "mouseenter",
+          () => {
+            this._clearHoverHideTimer(), this.show();
+          },
+          { signal: this._triggerAbortController.signal }
+        ), this.addEventListener(
+          "mouseleave",
+          () => {
+            this._scheduleHoverHide();
+          },
+          { signal: this._triggerAbortController.signal }
+        );
+      },
+      click: () => {
+        this._referenceSlot.addEventListener(
+          "click",
+          (e) => {
+            e.detail !== 0 && this.toggle();
+          },
+          { signal: this._triggerAbortController.signal }
+        );
+      },
+      contextmenu: () => {
+        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 }
+        );
+      }
+    };
+  }
+  /** 清除 hover 隐藏定时器 */
+  _clearHoverHideTimer() {
+    this._hoverHideTimer !== null && (clearTimeout(this._hoverHideTimer), this._hoverHideTimer = null);
+  }
+  /** 设置 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")));
+  }
+  /** 检查元素是否原生可聚焦 */
+  _isNativelyFocusable(e) {
+    return !!(["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(e.tagName) || e.tabIndex >= 0);
+  }
+  /** 延迟隐藏下拉菜单 */
+  _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;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        e.preventDefault(), this.visible || this.show(), r.length > 0 && requestAnimationFrame(() => r[0].focus());
+        return;
+      }
+      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();
+    });
+  }
+  _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 = "";
+  }
+  updateContainerClasslist() {
+    const e = p(
+      { disabled: this.disabled },
+      { divided: this.divided }
+    );
+    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>
+    `;
+  }
+  _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 }));
+  }
+  _handleKeydown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+  }
+  $mount() {
+    this.tabIndex = 0, this.setAttribute("role", "menuitem"), this.updateContainerClasslist();
+  }
+};
+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>
+    `;
+  }
+  $mount() {
+    this.setAttribute("role", "menu"), this.setAttribute("aria-label", "Menu");
+  }
+};
+g = F([
+  f(A, { styles: [k] })
+], g);
+export {
+  a as EaDropdown,
+  I as EaDropdownCommandEvent,
+  l as EaDropdownItem,
+  g as EaDropdownMenu
+};

package/dist/components/ea-empty.js

@@ -0,0 +1,103 @@
+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 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(...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);
+  }
+  /** 更新描述文字内容 */
+  _updateDescription(t) {
+    this._descriptionSlot.textContent = t || "No Data";
+  }
+  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="${s.e("description")}" part="description">
+          <slot name="description">No Data</slot>
+        </div>
+        <div class="${s.e("bottom")}" part="bottom">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  $mount() {
+    this.image && this._updateImage(this.image), this.description && this._updateDescription(this.description);
+  }
+};
+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 {
+  i as EaEmpty,
+  D as default
+};