easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-tag.js

@@ -0,0 +1,259 @@
+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;
+};
+const T = "ea-check-tag", m = E(T);
+let p = class extends C {
+  constructor() {
+    super(...arguments), this.checked = !1, this.disabled = !1, this.variant = "primary";
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const t = m(
+      {
+        [this.variant]: this.variant && this.checked
+      },
+      {
+        disabled: this.disabled
+      }
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${this.updateContainerClasslist()}' part='container' role='checkbox'>
+        <slot></slot>
+      </div>
+    `;
+  }
+  _handleClick() {
+    this.disabled || (this.checked = !this.checked, this.dispatchEvent(new x({ checked: this.checked })));
+  }
+  $mount() {
+    this.updateContainerClasslist();
+  }
+};
+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 = e;
+  }
+}
+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(...arguments), this.variant = g, this.closable = !1, this.disableTransitions = !1, this.color = "", this.size = "default", this.effect = "light", this.round = !1;
+  }
+  /** 更新自定义颜色 */
+  _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);
+      }
+    }
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const t = h(
+      {
+        [this.variant]: !0,
+        [`${this.size}-size`]: !0,
+        [this.effect]: !0
+      },
+      {
+        closable: this.closable,
+        round: this.round
+      }
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  /** 渲染模板 */
+  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>
+    `;
+  }
+  _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
+      );
+    }
+  }
+  $mount() {
+    this.updateContainerClasslist(), this.color && this._updateCustomColor(this.color);
+  }
+  $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 {
+  p as EaCheckTag,
+  x as EaCheckTagChangeEvent,
+  r as EaTag,
+  f as EaTagRemoveEvent
+};

package/dist/components/ea-text.js

@@ -0,0 +1,128 @@
+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;
+};
+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(...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
+    });
+    return this._container && (this._container.className = t), t;
+  }
+  /**
+   * 重新渲染组件模板
+   */
+  _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();
+  }
+  /**
+   * 当 truncated 或 line-clamp 启用时，自动将文本内容设置为容器 title
+   */
+  _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 = "";
+  }
+  html() {
+    return `
+      <${this.tag} class="${this.updateContainerClasslist()}" part="container">
+        <slot></slot>
+      </${this.tag}>
+    `;
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._updateTitle();
+  }
+};
+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 {
+  e as EaText,
+  N as default
+};

package/dist/components/ea-theme-toggle.js

@@ -0,0 +1,75 @@
+import { E as u } from "../core/EaBase.ts.js";
+import { C as v, a as g, l as p } from "../core/decorator.js";
+import { getCurrentTheme as n, setTheme as l } from "../themes/controller.js";
+import "./ea-switch.js";
+import "./ea-icon.js";
+import { s as d } from "../css/ea-theme-toggle.style.js";
+import { c as _ } from "../utils/bem.ts.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (e, t, a, s) => {
+  for (var o = s > 1 ? void 0 : s ? b(t, a) : t, i = e.length - 1, c; i >= 0; i--)
+    (c = e[i]) && (o = (s ? c(t, a, o) : c(o)) || o);
+  return s && o && f(t, a, o), o;
+};
+const m = "ea-theme-toggle", w = _(m);
+let r = class extends u {
+  constructor() {
+    super(...arguments), this._observer = null, this.mode = "auto";
+  }
+  /**
+   * 同步内部 ea-switch 的选中状态与当前主题一致
+   */
+  _syncSwitchState() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("ea-switch");
+    e && (e.value = String(n() === "dark"));
+  }
+  _handleSwitchChange(e) {
+    e.stopPropagation();
+    const t = n() !== "dark";
+    l(t ? "dark" : "light"), this.mode = t ? "dark" : "light", this.emit("ea-theme-toggle-change", { detail: { mode: this.mode } });
+  }
+  html() {
+    const e = n() === "dark";
+    return `
+      <ea-switch
+        class="${w.e("switch")}"
+        part="switch"
+        value="${e}"
+        active-color="var(--ea-theme-toggle-active-color, var(--blue-500))"
+        inactive-color="var(--ea-theme-toggle-inactive-color, var(--grey-300))"
+      >
+        <ea-icon slot="active" name="fa-solid fa-moon"></ea-icon>
+        <ea-icon slot="inactive" name="fa-solid fa-sun"></ea-icon>
+      </ea-switch>
+    `;
+  }
+  $mount() {
+    this._syncSwitchState(), this._observer = new MutationObserver(() => {
+      this._syncSwitchState();
+    }), this._observer.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["class"]
+    });
+  }
+  $beforeUnmount() {
+    this._observer && (this._observer.disconnect(), this._observer = null);
+  }
+};
+h([
+  g({
+    type: String,
+    default: "auto",
+    observer(e) {
+      l(e), this._syncSwitchState();
+    }
+  })
+], r.prototype, "mode", 2);
+h([
+  p("change", "ea-switch")
+], r.prototype, "_handleSwitchChange", 1);
+r = h([
+  v(m, { styles: [d] })
+], r);
+export {
+  r as EaThemeToggle
+};