easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-timeline.js

@@ -1,185 +1,186 @@
-var b = Object.defineProperty;
-var u = (t) => {
-  throw TypeError(t);
+import { E as f } from "../core/EaBase.ts.js";
+import { C as u, q as h, a as i } from "../core/decorator.js";
+import { s as C } from "../css/ea-timeline.style.js";
+import { c as y } from "../utils/bem.ts.js";
+import { h as b } from "../utils/html.ts.js";
+import { E as d } from "../utils/Enum.ts.js";
+import { V as $ } from "../core/constants.js";
+import { s as T } from "../css/ea-timeline-item.style.js";
+import "./ea-icon.js";
+var E = Object.getOwnPropertyDescriptor, g = (t, a, m, l) => {
+  for (var o = l > 1 ? void 0 : l ? E(a, m) : a, p = t.length - 1, n; p >= 0; p--)
+    (n = t[p]) && (o = n(o) || o);
+  return o;
 };
-var C = (t, s, e) => s in t ? b(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var w = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), y = (t, s, e) => s.has(t) || u("Cannot " + e);
-var a = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), i = (t, s, e) => s.has(t) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), o = (t, s, e, h) => (y(t, s, "write to private field"), h ? h.call(t, e) : s.set(t, e), e);
-import { B as f } from "./Base.js";
-import { s as _ } from "../css/ea-timeline.style.js";
-import { s as v } from "../css/ea-timeline-item.style.js";
-class S extends f {
-  static get observedAttributes() {
-    return [...super.observedAttributes];
-  }
-  constructor() {
-    super(), this.stylesheet = _, this.$render();
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-timeline' part='container'>
+const v = "ea-timeline", w = y(v);
+let c = class extends f {
+  html() {
+    return `
+      <div class="${w()}" part="container" role="list">
         <slot></slot>
       </div>
     `;
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-}
-window.customElements.get("ea-timeline") || window.customElements.define("ea-timeline", S);
-var n, m, r, c, p, d, l;
-class g extends f {
+};
+c = g([
+  u(v, { styles: [C] })
+], c);
+var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (t, a, m, l) => {
+  for (var o = l > 1 ? void 0 : l ? S(a, m) : a, p = t.length - 1, n; p >= 0; p--)
+    (n = t[p]) && (o = (l ? n(a, m, o) : n(o)) || o);
+  return l && o && P(a, m, o), o;
+};
+const _ = "ea-timeline-item", r = y(_);
+let e = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    i(this, n);
-    /** @type {HTMLElement} */
-    i(this, m);
-    /** @type {HTMLElement} */
-    i(this, r);
-    /** @type {HTMLElement} */
-    i(this, c);
-    /** @type {HTMLElement} */
-    i(this, p);
-    /** @type {HTMLElement} */
-    i(this, d);
-    /** @type {HTMLElement} */
-    i(this, l);
-    w(this, "state", this.properties({
-      type: {
-        type: ["primary", "info", "success", "warning", "danger"],
-        default: "",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      timestamp: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, l).textContent = e;
-        }
-      },
-      "hide-timestamp": {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          a(this, l).style.display = e ? "none" : "block";
-        }
-      },
-      color: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          if (!CSS.supports("color", e))
-            return console.warn(
-              `[EaTag] The color value ${e} is not supported.`
-            );
-          a(this, r) && (this.style.setProperty("--ea-timeline-item-dot-color", e), a(this, r).style.borderColor = e);
-        }
-      },
-      hollow: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, r).innerHTML = `<ea-icon class="ea-timeline-item__icon-dot" part='icon-dot' name="${e}"></ea-icon>`;
-        }
-      },
-      size: {
-        type: ["normal", "large"],
-        default: "",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      placement: {
-        type: ["top", "bottom"],
-        default: "",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      center: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    this.stylesheet = v, this.$render();
+    super(...arguments), this.variant = "", this.timestamp = "", this.hideTimestamp = !1, this.color = "", this.hollow = !1, this.icon = "", this.size = "", this.placement = "", this.center = !1;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "timestamp",
-      "hide-timestamp",
-      "color",
-      "hollow",
-      "icon",
-      "placement",
-      "size",
-      "center"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名列表 */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-timeline-item",
+    const t = r(
       {
-        ["--" + this.type]: this.type,
-        ["--" + this.size]: this.size,
-        ["--" + this.placement]: this.placement,
-        "--center": this.center
+        [this.variant]: !!this.variant,
+        [this.size]: !!this.size,
+        [this.placement]: !!this.placement,
+        center: this.center
       },
       {
-        "hollow-dot": this.hollow
+        "hollow-dot": this.hollow,
+        "hide-timestamp": this.hideTimestamp
       }
     );
-    return a(this, n).className = e, e;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-timeline-item' part='container'>
-        <aside class="ea-timeline-item__wrapper" part='left-wrapper'>
+  html() {
+    return `
+      <div class="${r()}" part="container" role="listitem">
+        <aside class="${r.e("wrapper")}" part="left-wrapper">
           <slot name="dot">
-            <section class="ea-timeline-item__dot" part='dot'></section>
+            <section class="${r.e("dot")}" part="dot"></section>
           </slot>
-          <section class="ea-timeline-item__tail" part='tail'></section>
+          <section class="${r.e("tail")}" part="tail"></section>
         </aside>
-        <main class="ea-timeline-item__wrapper right-wrapper" part='right-wrapper'>
-          <header class="ea-timeline-item__content" part='content'>
+        <main class="${r.e("wrapper")} ${r.e("right-wrapper")}" part="right-wrapper">
+          <header class="${r.e("content")}" part="content">
             <slot></slot>
           </header>
-          <footer class='ea-timeline-item__timestamp' part='timestamp'>
+          <footer class="${r.e("timestamp")}" part="timestamp">
             <slot name="timestamp"></slot>
           </footer>
         </main>
       </div>
-        `, o(this, n, this.shadowRoot.querySelector(".ea-timeline-item")), o(this, m, this.shadowRoot.querySelector("slot[name='dot']")), o(this, r, this.shadowRoot.querySelector(".ea-timeline-item__dot")), o(this, c, this.shadowRoot.querySelector(".ea-timeline-item__tail")), o(this, p, this.shadowRoot.querySelector(".ea-timeline-item__content")), o(this, d, this.shadowRoot.querySelector(
-      ".ea-timeline-item__timestamp"
-    )), o(this, l, this.shadowRoot.querySelector(
-      'slot[name="timestamp"]'
-    )), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-n = new WeakMap(), m = new WeakMap(), r = new WeakMap(), c = new WeakMap(), p = new WeakMap(), d = new WeakMap(), l = new WeakMap();
-window.customElements.get("ea-timeline-item") || window.customElements.define("ea-timeline-item", g);
+};
+s([
+  h(r.cb())
+], e.prototype, "_container", 2);
+s([
+  h(r.ce("dot"))
+], e.prototype, "_dot", 2);
+s([
+  h('slot[name="timestamp"]')
+], e.prototype, "_timestampSlot", 2);
+s([
+  i({
+    type: d($),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "variant", 2);
+s([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      this._timestampSlot.textContent = t;
+    }
+  })
+], e.prototype, "timestamp", 2);
+s([
+  i({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "hideTimestamp", 2);
+s([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      if (!t) {
+        this.style.removeProperty("--ea-timeline-item-dot-color"), this._dot && (this._dot.style.borderColor = "");
+        return;
+      }
+      if (!CSS.supports("color", t))
+        return console.warn(
+          `[EaTimelineItem] The color value ${t} is not supported.`
+        );
+      this._dot && (this.style.setProperty("--ea-timeline-item-dot-color", t), this._dot.style.borderColor = t);
+    }
+  })
+], e.prototype, "color", 2);
+s([
+  i({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "hollow", 2);
+s([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      t ? this._dot.innerHTML = b(
+        `<ea-icon class="${r.e("icon-dot")}" part="icon-dot" name="${t}"></ea-icon>`
+      ) : this._dot.innerHTML = "";
+    }
+  })
+], e.prototype, "icon", 2);
+s([
+  i({
+    type: d(["normal", "large"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "size", 2);
+s([
+  i({
+    type: d(["top", "bottom"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "placement", 2);
+s([
+  i({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "center", 2);
+e = s([
+  u(_, { styles: [T] })
+], e);
+const I = { EaTimeline: c, EaTimelineItem: e };
 export {
-  S as EaTimeline,
-  g as EaTimelineItem
+  c as EaTimeline,
+  e as EaTimelineItem,
+  I as default
 };

package/dist/components/ea-tooltip.js

@@ -1,161 +1,201 @@
-var w = Object.defineProperty;
-var b = (e) => {
-  throw TypeError(e);
+import { EaPopper as f } from "./ea-popper.js";
+import "../core/EaBase.ts.js";
+import { q as m, a as c, C as v, l as b } from "../core/decorator.js";
+import { E as u } from "../utils/Enum.ts.js";
+import { s as _ } from "../css/ea-tooltip.style.js";
+import { c as d } from "../utils/bem.ts.js";
+var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, e, r, n) => {
+  for (var i = n > 1 ? void 0 : n ? C(e, r) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (i = (n ? l(e, r, i) : l(i)) || i);
+  return n && i && E(e, r, i), i;
 };
-var y = (e, s, t) => s in e ? w(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var E = (e, s, t) => y(e, typeof s != "symbol" ? s + "" : s, t), C = (e, s, t) => s.has(e) || b("Cannot " + t);
-var o = (e, s, t) => (C(e, s, "read from private field"), t ? t.call(e) : s.get(e)), r = (e, s, t) => s.has(e) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), l = (e, s, t, i) => (C(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
-import { EaPopper as k } from "./ea-popper.js";
-import { s as x } from "../css/ea-tooltip.style.js";
-var d, c, p, h, n, m, u, g, f;
-class L extends k {
+const p = "ea-tooltip", g = d(p), h = d("ea-popper"), A = [
+  "click",
+  "focus",
+  "hover",
+  "contextmenu",
+  "customized"
+], T = ["dark", "light", "customized"];
+let s = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, d);
-    /** @type {HTMLElement} */
-    r(this, c);
-    /** @type {HTMLElement} */
-    r(this, p);
-    /** @type {HTMLElement} */
-    r(this, h);
-    /** @type {AbortController} */
-    r(this, n);
-    r(this, m);
-    E(this, "state", this.properties({
-      trigger: {
-        type: ["click", "focus", "hover", "contextmenu", "customized"],
-        default: "hover",
-        observer: (t) => {
-        }
-      },
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.status = t;
-        }
-      },
-      effect: {
-        type: ["dark", "light", "customized"],
-        default: "dark",
-        observer: (t) => {
-          t !== "customized" && (o(this, d).className = this.updateContainerClasslist());
-        }
-      },
-      content: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          if (o(this, h))
-            o(this, h).innerText = t;
-          else {
-            const i = document.createElement("div"), a = o(this, c).querySelector("slot");
-            i.classList.add("ea-tooltip__content"), i.part = "content", i.innerText = t, o(this, c).appendChild(i), l(this, h, i), a.remove();
-          }
-        }
-      }
-    }));
-    r(this, u, {
+    super(...arguments), this.trigger = "hover", this.effect = "dark", this.content = "", this._triggerEventStrategies = {
       hover: () => {
         this.addEventListener(
           "mouseover",
-          (t) => {
-            this.show(), this.addEventListener(
-              "mouseout",
-              (i) => {
-                this.hide();
-              },
-              { once: !0 }
-            );
+          () => {
+            this.show();
           },
-          { signal: o(this, n).signal }
+          { signal: this._triggerAbortController.signal }
+        ), this.addEventListener(
+          "mouseout",
+          () => {
+            this.contains(document.activeElement) || this.hide();
+          },
+          { signal: this._triggerAbortController.signal }
+        ), this.addEventListener(
+          "focusin",
+          () => {
+            this.show();
+          },
+          { signal: this._triggerAbortController.signal }
+        ), this.addEventListener(
+          "focusout",
+          () => {
+            requestAnimationFrame(() => {
+              this.visible && !this.contains(document.activeElement) && this.hide();
+            });
+          },
+          { signal: this._triggerAbortController.signal }
         );
       },
       click: () => {
         this.addEventListener(
           "click",
-          () => {
-            this.toggle();
+          (t) => {
+            t.detail !== 0 && this.toggle();
           },
-          { signal: o(this, n).signal }
+          { signal: this._triggerAbortController.signal }
         );
       },
       focus: () => {
         this.addEventListener(
-          "focus",
+          "focusin",
           () => {
-            this.show(), this.addEventListener(
-              "blur",
-              (t) => {
-                this.hide();
-              },
-              { once: !0 }
-            );
+            this.visible || this.show();
+          },
+          { signal: this._triggerAbortController.signal }
+        ), this.addEventListener(
+          "focusout",
+          () => {
+            requestAnimationFrame(() => {
+              this.visible && !this.contains(document.activeElement) && this.hide();
+            });
           },
-          { signal: o(this, n).signal }
+          { signal: this._triggerAbortController.signal }
         );
       },
       contextmenu: () => {
         this.addEventListener(
           "contextmenu",
           (t) => {
-            t.preventDefault();
-            const i = new AbortController();
-            this.show(), window.addEventListener(
+            var e;
+            t.preventDefault(), (e = this._contextmenuAbortController) == null || e.abort(), this._contextmenuAbortController = new AbortController(), this.show(), window.addEventListener(
               "click",
-              (a) => {
-                this.contains(a.target) || (i.abort(), this.hide());
+              (r) => {
+                var i;
+                this.contains(r.target) || (this.hide(), (i = this._contextmenuAbortController) == null || i.abort());
               },
-              { signal: i.signal }
+              { signal: this._contextmenuAbortController.signal }
             );
           },
-          { signal: o(this, n).signal }
+          { signal: this._triggerAbortController.signal }
         );
+      },
+      customized: () => {
       }
-    });
-    r(this, g, () => {
-      const t = new AbortController();
-      l(this, n, t), this.assignedStyle(x);
-    });
-    r(this, f, () => {
-      var i, a;
-      if (this.trigger === "customized") return;
-      const t = Object.keys(o(this, u)).find(
-        (v) => this.trigger === v
-      );
-      (a = (i = o(this, u))[t || "hover"]) == null || a.call(i), t || console.warn(`[EaPopper] trigger event ${this.trigger} is not exist`);
-    });
-    l(this, d, this.shadowRoot.querySelector(".ea-popper")), l(this, c, this.shadowRoot.querySelector(
-      ".ea-popper__original"
-    )), l(this, p, this.shadowRoot.querySelector(
-      ".ea-popper__reference"
-    ));
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "trigger",
-      "content",
-      "visible",
-      "effect"
-    ];
+    };
   }
   updateContainerClasslist() {
-    return `${super.updateContainerClasslist()} ${this.computedClasslist("ea-tooltip", {
-      ["--" + this.effect]: this.effect && this.effect !== "customized"
-    })}`;
+    const e = `${super.updateContainerClasslist()} ${g(
+      {
+        [this.effect]: this.effect && this.effect !== "customized"
+      },
+      {
+        "has-content": !!this.content
+      }
+    )}`;
+    return this._container && (this._container.className = e), e;
+  }
+  /** 设置 ARIA 关联属性：tooltip 使用 aria-describedby，非交互式触发元素添加 tabindex */
+  _setupAria() {
+    super._setupAria(), this._originalPopper.setAttribute("role", "tooltip");
+    const t = this._getReferenceTrigger();
+    t && (t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), t.setAttribute("aria-describedby", this._originalPopper.id), this._isNativelyFocusable(t) || t.setAttribute("tabindex", "0"));
   }
-  connectedCallback() {
-    super.connectedCallback(), o(this, g).call(this), o(this, f).call(this);
+  /** tooltip 不使用 aria-expanded */
+  _updateAriaExpanded() {
   }
-  $beforeUnmounted() {
-    var t;
-    super.$beforeUnmounted(), (t = o(this, n)) == null || t.abort();
+  /** 检查元素是否原生可聚焦 */
+  _isNativelyFocusable(t) {
+    return !!(["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(t.tagName) || t.tabIndex >= 0);
   }
-}
-d = new WeakMap(), c = new WeakMap(), p = new WeakMap(), h = new WeakMap(), n = new WeakMap(), m = new WeakMap(), u = new WeakMap(), g = new WeakMap(), f = new WeakMap();
-window.customElements.get("ea-tooltip") || window.customElements.define("ea-tooltip", L);
+  /** 初始化触发事件监听 */
+  _initTriggerEvent() {
+    var e;
+    if ((e = this._triggerAbortController) == null || e.abort(), this._triggerAbortController = new AbortController(), this.trigger === "customized") return;
+    const t = this._triggerEventStrategies[this.trigger];
+    t ? t() : (console.warn(`[EaTooltip] trigger event ${this.trigger} is not exist`), this._triggerEventStrategies.hover());
+  }
+  _handleKeydown(t) {
+    const e = t.target, r = this._getReferenceTrigger();
+    if (r && (e === r || r.contains(e))) {
+      if (t.key === "Escape") {
+        t.preventDefault(), t.stopPropagation(), this.hide();
+        return;
+      }
+      if (t.key === "Enter" || t.key === " ") {
+        if (this.trigger === "focus" || this.trigger === "hover" || this.trigger === "customized") return;
+        t.preventDefault(), t.stopPropagation(), this.toggle();
+      }
+    }
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container" tabindex="-1">
+        <div class="${h.e("reference")}" part="reference" tabindex="-1">
+          <slot name="reference"></slot>
+          <div class="${h.e("original")}" part="original" tabindex="-1" inert>
+            <slot></slot>
+            <div class="${g.e("content")}" part="content"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  $mount() {
+    super.$mount(), this._initTriggerEvent(), this.content && this._contentElement && (this._contentElement.textContent = this.content);
+  }
+  $beforeUnmount() {
+    var t, e;
+    super.$beforeUnmount(), (t = this._triggerAbortController) == null || t.abort(), (e = this._contextmenuAbortController) == null || e.abort();
+  }
+};
+o([
+  m(g.ce("content"))
+], s.prototype, "_contentElement", 2);
+o([
+  c({
+    type: u(A),
+    default: "hover",
+    observer() {
+      this._initTriggerEvent();
+    }
+  })
+], s.prototype, "trigger", 2);
+o([
+  c({
+    type: u(T),
+    default: "dark",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "effect", 2);
+o([
+  c({
+    type: String,
+    default: "",
+    observer(t) {
+      this._contentElement && (this._contentElement.textContent = t), this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "content", 2);
+o([
+  b("keydown")
+], s.prototype, "_handleKeydown", 1);
+s = o([
+  v(p, { styles: [_] })
+], s);
 export {
-  L as EaTooltip
+  s as EaTooltip
 };