easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-tag.js

@@ -1,228 +1,259 @@
-var C = Object.defineProperty;
-var f = (t) => {
-  throw TypeError(t);
+import { E as C } from "../core/EaBase.ts.js";
+import { q as b, a as i, l as v, C as _ } from "../core/decorator.js";
+import { E as d } from "../utils/Enum.ts.js";
+import { V as y, a as g } from "../core/constants.js";
+import { s as $ } from "../css/ea-check-tag.style.js";
+import { c as E } from "../utils/bem.ts.js";
+import { t as k } from "../utils/timeout.ts.js";
+import { s as P } from "../css/ea-tag.style.js";
+import "./ea-icon.js";
+class x extends Event {
+  constructor(e) {
+    super("change", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
+  }
+}
+var S = Object.defineProperty, w = Object.getOwnPropertyDescriptor, u = (t, e, o, s) => {
+  for (var a = s > 1 ? void 0 : s ? w(e, o) : e, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (a = (s ? c(e, o, a) : c(a)) || a);
+  return s && a && S(e, o, a), a;
 };
-var y = (t, s, e) => s in t ? C(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var b = (t, s, e) => y(t, typeof s != "symbol" ? s + "" : s, e), m = (t, s, e) => s.has(t) || f("Cannot " + e);
-var a = (t, s, e) => (m(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), l = (t, s, e, h) => (m(t, s, "write to private field"), h ? h.call(t, e) : s.set(t, e), e);
-import { B as g } from "./Base.js";
-import { s as v } from "../css/ea-check-tag.style.js";
-import { s as k } from "../css/ea-tag.style.js";
-import { c as w } from "../utils/Variables.js";
-import { E } from "../utils/Utils.js";
-var c, r, u;
-class A extends g {
+const T = "ea-check-tag", m = E(T);
+let p = class extends C {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, c);
-    /** @type {AbortController} */
-    o(this, r);
-    b(this, "state", this.properties({
-      checked: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      type: {
-        type: ["primary", "info", "success", "warning", "danger"],
-        default: "primary",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 点击切换选中状态
-     */
-    o(this, u, () => {
-      this.disabled || (this.checked = !this.checked, this.emit("change", { detail: { checked: this.checked } }));
-    });
-    this.stylesheet = v, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "checked", "disabled", "type"];
+    super(...arguments), this.checked = !1, this.disabled = !1, this.variant = "primary";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-check-tag",
+    const t = m(
       {
-        ["--" + this.type]: this.type && this.checked
+        [this.variant]: this.variant && this.checked
       },
       {
         disabled: this.disabled
       }
     );
-    return a(this, c).className = e, e;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-check-tag' part='container'>
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${this.updateContainerClasslist()}' part='container' role='checkbox'>
         <slot></slot>
       </div>
-    `, l(this, c, this.shadowRoot.querySelector(".ea-check-tag"));
+    `;
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = a(this, r)) == null || e.abort(), l(this, r, new AbortController()), a(this, c).addEventListener("click", a(this, u), {
-      signal: a(this, r).signal
-    });
+  _handleClick() {
+    this.disabled || (this.checked = !this.checked, this.dispatchEvent(new x({ checked: this.checked })));
   }
-  $beforeUnmounted() {
-    var e;
-    (e = a(this, r)) == null || e.abort();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-c = new WeakMap(), r = new WeakMap(), u = new WeakMap();
-window.customElements.get("ea-check-tag") || window.customElements.define("ea-check-tag", A);
-class S extends Event {
-  constructor(s) {
+};
+u([
+  b(m.cb())
+], p.prototype, "_container", 2);
+u([
+  i({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-checked",
+      map: (t) => String(!!t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], p.prototype, "checked", 2);
+u([
+  i({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], p.prototype, "disabled", 2);
+u([
+  i({
+    type: d(y),
+    default: "primary",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], p.prototype, "variant", 2);
+u([
+  v("click", m.cb())
+], p.prototype, "_handleClick", 1);
+p = u([
+  _(T, { styles: [$] })
+], p);
+class f extends Event {
+  constructor(e) {
     super("ea-remove", {
       bubbles: !0,
       composed: !0
-    }), this.detail = s;
+    }), this.detail = e;
   }
 }
-var i, d, n, p;
-class $ extends g {
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (t, e, o, s) => {
+  for (var a = s > 1 ? void 0 : s ? O(e, o) : e, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (a = (s ? c(e, o, a) : c(a)) || a);
+  return s && a && N(e, o, a), a;
+};
+const A = "ea-tag", h = E(A), B = ["large", "default", "small"], D = ["dark", "light", "plain"];
+let r = class extends C {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, i);
-    /** @type {HTMLElement | null} */
-    o(this, d);
-    /** @type {AbortController} */
-    o(this, n);
-    b(this, "state", this.properties({
-      type: {
-        type: ["primary", "info", "success", "warning", "danger"],
-        default: "primary",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      closable: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          var h;
-          (h = a(this, n)) == null || h.abort(), a(this, d).setAttribute("closable", e ? "icon-cancel" : ""), this.updateContainerClasslist(), e && (l(this, n, new AbortController()), a(this, d).addEventListener("click", a(this, p), {
-            signal: a(this, n).signal
-          }));
-        }
-      },
-      "disable-transitions": {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-        }
-      },
-      color: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          if (e && CSS.supports("background", e) ? a(this, i).style.background = e : a(this, i).style.background = "", !CSS.supports("background", e))
-            return console.warn(
-              `[EaTag] The color value ${e} is not supported.`
-            );
-        }
-      },
-      size: {
-        type: w,
-        default: "default",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      effect: {
-        type: ["dark", "light", "plain"],
-        default: "light",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      round: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 标签移除事件
-     */
-    o(this, p, async () => {
-      this["disable-transitions"] || (a(this, i).classList.add("before-close"), await E.EaElement.addAsyncEventListener(
-        a(this, i),
-        "transitionend"
-      )), this.dispatchEvent(new S({ text: this.textContent })), this.remove();
-    });
-    this.stylesheet = k, this.$render();
+    super(...arguments), this.variant = g, this.closable = !1, this.disableTransitions = !1, this.color = "", this.size = "default", this.effect = "light", this.round = !1;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "closable",
-      "disable-transitions",
-      "color",
-      "size",
-      "effect",
-      "round"
-    ];
+  /** 更新自定义颜色 */
+  _updateCustomColor(t) {
+    if (this._container) {
+      if (!t) {
+        this._container.style.removeProperty("--ea-tag-custom-color");
+        return;
+      }
+      try {
+        CSS.supports("background", t) ? this._container.style.setProperty("--ea-tag-custom-color", t) : (this._container.style.removeProperty("--ea-tag-custom-color"), console.warn(`[EaTag] The color value ${t} is not supported.`));
+      } catch {
+        this._container.style.setProperty("--ea-tag-custom-color", t);
+      }
+    }
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-tag",
+    const t = h(
       {
-        ["--" + this.type]: this.type,
-        [`--${this.size}-size`]: this.size,
-        ["--" + this.effect]: this.effect
+        [this.variant]: !0,
+        [`${this.size}-size`]: !0,
+        [this.effect]: !0
       },
       {
         closable: this.closable,
         round: this.round
       }
     );
-    return a(this, i).className = e, e;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tag' part='container'>
-        <slot></slot>
-        <ea-icon class="ea-tag__close" part="close-icon" name="xmark"></ea-icon>
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${this.updateContainerClasslist()}' part='container'>
+        <span class="${h.e("content")}"><slot></slot></span>
+        <ea-icon class="${h.e("close")}" part="close-icon" name="xmark" role="button" aria-label="close" tabindex="0"></ea-icon>
       </div>
-    `, l(this, i, this.shadowRoot.querySelector(".ea-tag")), l(this, d, this.shadowRoot.querySelector(".ea-tag__close")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  _handleCloseClick() {
+    var t;
+    if (this.disableTransitions)
+      this.dispatchEvent(new f({ text: this.textContent })), this.remove();
+    else {
+      this._container.classList.add(h.s("before-close")), (t = this._transitionAbortController) == null || t.abort(), this._transitionAbortController = new AbortController();
+      const e = parseFloat(getComputedStyle(this._container).transitionDuration) || 0.3, o = () => {
+        var s;
+        clearTimeout(this._closeFallbackTimer), (s = this._transitionAbortController) == null || s.abort(), this.dispatchEvent(new f({ text: this.textContent })), this.remove();
+      };
+      this._container.addEventListener(
+        "transitionend",
+        (s) => {
+          s.target !== this._container || s.propertyName !== "filter" || o();
+        },
+        { signal: this._transitionAbortController.signal }
+      ), this._closeFallbackTimer = k(
+        o,
+        (e + 0.1) * 1e3
+      );
+    }
   }
-  $beforeUnmounted() {
-    var e;
-    (e = a(this, n)) == null || e.abort();
+  $mount() {
+    this.updateContainerClasslist(), this.color && this._updateCustomColor(this.color);
   }
-}
-i = new WeakMap(), d = new WeakMap(), n = new WeakMap(), p = new WeakMap();
-window.customElements.get("ea-tag") || window.customElements.define("ea-tag", $);
+  $beforeUnmount() {
+    var t;
+    (t = this._transitionAbortController) == null || t.abort(), clearTimeout(this._closeFallbackTimer);
+  }
+};
+n([
+  b(h.cb())
+], r.prototype, "_container", 2);
+n([
+  i({
+    type: d(y),
+    default: g,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "variant", 2);
+n([
+  i({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "closable", 2);
+n([
+  i({
+    type: Boolean,
+    default: !1
+  })
+], r.prototype, "disableTransitions", 2);
+n([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      this._updateCustomColor(t);
+    }
+  })
+], r.prototype, "color", 2);
+n([
+  i({
+    type: d(B),
+    default: "default",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "size", 2);
+n([
+  i({
+    type: d(D),
+    default: "light",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "effect", 2);
+n([
+  i({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "round", 2);
+n([
+  v("click", h.ce("close"))
+], r.prototype, "_handleCloseClick", 1);
+r = n([
+  _(A, { styles: [P] })
+], r);
 export {
-  A as EaCheckTag,
-  $ as EaTag
+  p as EaCheckTag,
+  x as EaCheckTagChangeEvent,
+  r as EaTag,
+  f as EaTagRemoveEvent
 };

package/dist/components/ea-text.js

@@ -1,113 +1,128 @@
-var y = Object.defineProperty;
-var p = (e) => {
-  throw TypeError(e);
+import { E as c } from "../core/EaBase.ts.js";
+import { q as C, a as o, C as _ } from "../core/decorator.js";
+import { E as h } from "../utils/Enum.ts.js";
+import { V as f } from "../core/constants.js";
+import { s as u } from "../css/ea-text.style.js";
+import { c as y } from "../utils/bem.ts.js";
+var T = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, s, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? E(s, n) : s, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (i = (a ? p(s, n, i) : p(i)) || i);
+  return a && i && T(s, n, i), i;
 };
-var w = (e, s, t) => s in e ? y(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var u = (e, s, t) => w(e, typeof s != "symbol" ? s + "" : s, t), m = (e, s, t) => s.has(e) || p("Cannot " + t);
-var i = (e, s, t) => (m(e, s, "read from private field"), t ? t.call(e) : s.get(e)), o = (e, s, t) => s.has(e) ? p("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, l) => (m(e, s, "write to private field"), l ? l.call(e, t) : s.set(e, t), t);
-import { B as f } from "./Base.js";
-import { s as C } from "../css/ea-text.style.js";
-var a, n, r;
-class g extends f {
+const m = "ea-text", d = y(m), b = [...f, "normal"], v = ["large", "medium", "small"], S = [
+  "span",
+  "p",
+  "b",
+  "i",
+  "sub",
+  "sup",
+  "ins",
+  "del",
+  "mark"
+];
+let e = class extends c {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, a);
-    o(this, n, {
-      isOriginalRendered: !1
+    super(...arguments), this.variant = "normal", this.size = "medium", this.truncated = !1, this.lineClamp = 0, this.tag = "span";
+  }
+  updateContainerClasslist() {
+    const t = d({
+      [this.variant]: !0,
+      [this.size]: !0,
+      truncated: this.truncated,
+      "line-clamp": this.lineClamp > 0
     });
-    o(this, r, new Promise((t) => {
-      h(this, n, new Proxy(i(this, n), {
-        set: (l, d, c) => (d === "isOriginalRendered" && c && t(!0), Reflect.set(l, d, c))
-      }));
-    }));
-    /**
-     * @typedef {Object} State
-     * @property {string} title - 标题
-     * @property {string} type - 文本类型
-     * @property {string} size - 文本大小
-     * @property {boolean} truncated - 文本是否截断
-     * @property {number} line-clamp - 截断的行数
-     * @property {string} tag - 文本标签
-     */
-    /** @type {State} */
-    u(this, "state", this.properties({
-      title: {
-        type: String,
-        default: "",
-        observer: (t) => {
-        }
-      },
-      type: {
-        type: ["normal", "primary", "success", "warning", "danger", "info"],
-        default: "normal",
-        observer: async (t) => {
-          await i(this, r), this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: ["large", "medium", "small"],
-        default: "medium",
-        observer: async (t) => {
-          await i(this, r), this.updateContainerClasslist();
-        }
-      },
-      truncated: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await i(this, r), this.title = this.innerText || "", this.updateContainerClasslist();
-        }
-      },
-      "line-clamp": {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          await i(this, r), i(this, a).style.setProperty("--ea-text-line-clamp", t), this.title = this.innerText || "", this.updateContainerClasslist();
-        }
-      },
-      tag: {
-        type: String,
-        default: "span",
-        observer: (t) => {
-          this.$render(), this.hasAttribute("line-clamp") && i(this, a).style.setProperty(
-            "--ea-text-line-clamp",
-            this["line-clamp"]
-          ), (this.hasAttribute("truncated") || this.hasAttribute("line-clamp")) && (this.title = this.innerText || ""), this.updateContainerClasslist();
-        }
-      }
-    }));
-    this.stylesheet = C;
+    return this._container && (this._container.className = t), t;
   }
-  static get observedAttributes() {
-    return ["title", "type", "size", "truncated", "line-clamp", "tag"];
+  /**
+   * 重新渲染组件模板
+   */
+  _reRender() {
+    var n;
+    if (!this.shadowRoot) return;
+    const t = ((n = this.shadowRoot.adoptedStyleSheets) == null ? void 0 : n.length) > 0;
+    if (this.shadowRoot.innerHTML = "", !t) {
+      const a = document.createElement("style");
+      a.textContent = u, this.shadowRoot.appendChild(a);
+    }
+    const s = document.createElement("template");
+    s.innerHTML = this.html(), this.shadowRoot.appendChild(s.content), this.lineClamp > 0 && this.style.setProperty("--ea-text-line-clamp", String(this.lineClamp)), this.updateContainerClasslist(), this._updateTitle();
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 当 truncated 或 line-clamp 启用时，自动将文本内容设置为容器 title
    */
-  updateContainerClasslist() {
-    const t = this.computedClasslist("ea-text", {
-      ["--" + this.type]: this.type,
-      ["--" + this.size]: this.size,
-      "--truncated": this.truncated,
-      "--line-clamp": this["line-clamp"] > 0
-    });
-    return i(this, a).className = t, t;
+  _updateTitle() {
+    if (!this._container) return;
+    const t = this.getAttribute("title");
+    if (t) {
+      this._container.title = t;
+      return;
+    }
+    this.truncated || this.lineClamp > 0 ? this._container.title = this.textContent || "" : this._container.title = "";
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <${this.tag} class="ea-text" part="container">
+  html() {
+    return `
+      <${this.tag} class="${this.updateContainerClasslist()}" part="container">
         <slot></slot>
       </${this.tag}>
-    `, h(this, a, this.shadowRoot.querySelector(".ea-text")), this.updateContainerClasslist(), i(this, n).isOriginalRendered = !0;
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.$render();
+  $mount() {
+    this.updateContainerClasslist(), this._updateTitle();
   }
-}
-a = new WeakMap(), n = new WeakMap(), r = new WeakMap();
-window.customElements.get("ea-text") || window.customElements.define("ea-text", g);
+};
+r([
+  C(d.cb())
+], e.prototype, "_container", 2);
+r([
+  o({
+    type: h(b),
+    default: "normal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "variant", 2);
+r([
+  o({
+    type: h(v),
+    default: "medium",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "size", 2);
+r([
+  o({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._updateTitle();
+    }
+  })
+], e.prototype, "truncated", 2);
+r([
+  o({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-text-line-clamp", String(t)), this.updateContainerClasslist(), this._updateTitle();
+    }
+  })
+], e.prototype, "lineClamp", 2);
+r([
+  o({
+    type: h(S),
+    default: "span",
+    observer() {
+      this._reRender();
+    }
+  })
+], e.prototype, "tag", 2);
+e = r([
+  _(m, { styles: [u] })
+], e);
+const N = e;
 export {
-  g as EaText
+  e as EaText,
+  N as default
 };