easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-tag.js

@@ -0,0 +1,228 @@
+var C = Object.defineProperty;
+var f = (t) => {
+  throw TypeError(t);
+};
+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 {
+  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"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-check-tag",
+      {
+        ["--" + this.type]: this.type && this.checked
+      },
+      {
+        disabled: this.disabled
+      }
+    );
+    return a(this, c).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-check-tag' part='container'>
+        <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
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = a(this, r)) == null || e.abort();
+  }
+}
+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) {
+    super("ea-remove", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = s;
+  }
+}
+var i, d, n, p;
+class $ extends g {
+  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();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "type",
+      "closable",
+      "disable-transitions",
+      "color",
+      "size",
+      "effect",
+      "round"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-tag",
+      {
+        ["--" + this.type]: this.type,
+        [`--${this.size}-size`]: this.size,
+        ["--" + this.effect]: this.effect
+      },
+      {
+        closable: this.closable,
+        round: this.round
+      }
+    );
+    return a(this, i).className = e, e;
+  }
+  $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>
+      </div>
+    `, l(this, i, this.shadowRoot.querySelector(".ea-tag")), l(this, d, this.shadowRoot.querySelector(".ea-tag__close")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = a(this, n)) == null || e.abort();
+  }
+}
+i = new WeakMap(), d = new WeakMap(), n = new WeakMap(), p = new WeakMap();
+window.customElements.get("ea-tag") || window.customElements.define("ea-tag", $);
+export {
+  A as EaCheckTag,
+  $ as EaTag
+};

package/dist/components/ea-text.js

@@ -0,0 +1,113 @@
+var y = Object.defineProperty;
+var p = (e) => {
+  throw TypeError(e);
+};
+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 {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, a);
+    o(this, n, {
+      isOriginalRendered: !1
+    });
+    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;
+  }
+  static get observedAttributes() {
+    return ["title", "type", "size", "truncated", "line-clamp", "tag"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  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;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <${this.tag} class="ea-text" 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();
+  }
+}
+a = new WeakMap(), n = new WeakMap(), r = new WeakMap();
+window.customElements.get("ea-text") || window.customElements.define("ea-text", g);
+export {
+  g as EaText
+};