easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-tag.js

@@ -0,0 +1,234 @@
+var v = Object.defineProperty;
+var f = (t) => {
+  throw TypeError(t);
+};
+var y = (t, s, e) => s in t ? v(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)), i = (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 C } from "./Base.js";
+import { c as g, a as w } from "../utils/Variables.js";
+import { s as k } from "../css/ea-check-tag.style.js";
+import { s as E } from "../css/ea-tag.style.js";
+import { E as A } from "../utils/Utils.js";
+var c, r, u;
+class T extends C {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    i(this, c);
+    /** @type {AbortController} */
+    i(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: g,
+        default: "primary",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 点击切换选中状态
+     */
+    i(this, u, () => {
+      this.disabled || (this.checked = !this.checked, this.emit("change", { detail: { checked: this.checked } }));
+    });
+    this.stylesheet = k, 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", T);
+class $ extends Event {
+  constructor(s) {
+    super("ea-remove", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = s;
+  }
+}
+var o, d, n, p;
+class B extends C {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    i(this, o);
+    /** @type {HTMLElement | null} */
+    i(this, d);
+    /** @type {AbortController} */
+    i(this, n);
+    b(this, "state", this.properties({
+      type: {
+        type: g,
+        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) => {
+        }
+      },
+      hit: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+        }
+      },
+      color: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("background", e))
+            return console.warn(
+              `[EaTag] The color value ${e} is not supported.`
+            );
+          a(this, o).style.background = e;
+        }
+      },
+      size: {
+        type: w,
+        default: "default",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      effect: {
+        type: ["dark", "light", "plain"],
+        default: "light",
+        observer: (e) => {
+        }
+      },
+      round: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+        }
+      }
+    }));
+    /**
+     * 标签移除事件
+     */
+    i(this, p, async () => {
+      this["disable-transitions"] || (a(this, o).classList.add("before-close"), await A.EaElement.addAsyncEventListener(
+        a(this, o),
+        "transitionend"
+      )), this.dispatchEvent(new $({ text: this.textContent })), this.remove();
+    });
+    this.stylesheet = E, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "type",
+      "closable",
+      "disable-transitions",
+      "hit",
+      "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, o).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-tag' part='container'>
+        <slot></slot>
+        <ea-icon class="ea-tag__close" part="close-icon" icon="icon-cancel"></ea-icon>
+      </div>
+    `, l(this, o, 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();
+  }
+}
+o = new WeakMap(), d = new WeakMap(), n = new WeakMap(), p = new WeakMap();
+window.customElements.get("ea-tag") || window.customElements.define("ea-tag", B);
+export {
+  T as EaCheckTag,
+  B as EaTag
+};

package/dist/components/ea-text.js

@@ -0,0 +1,103 @@
+var p = Object.defineProperty;
+var r = (e) => {
+  throw TypeError(e);
+};
+var d = (e, s, t) => s in e ? p(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var n = (e, s, t) => d(e, typeof s != "symbol" ? s + "" : s, t), h = (e, s, t) => s.has(e) || r("Cannot " + t);
+var a = (e, s, t) => (h(e, s, "read from private field"), t ? t.call(e) : s.get(e)), o = (e, s, t) => s.has(e) ? r("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), c = (e, s, t, l) => (h(e, s, "write to private field"), l ? l.call(e, t) : s.set(e, t), t);
+import { B as u } from "./Base.js";
+import { s as m } from "../css/ea-text.style.js";
+var i;
+class y extends u {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, i);
+    /** 
+     * @typedef {Object} State
+     * @property {string} title - 标题
+     * @property {string} type - 文本类型
+     * @property {string} size - 文本大小
+     * @property {boolean} truncated - 文本是否截断
+     * @property {number} line-clamp - 截断的行数
+     * @property {string} tag - 文本标签 
+     */
+    /** @type {State} */
+    n(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+        }
+      },
+      type: {
+        type: ["normal", "primary", "success", "warning", "danger", "info"],
+        default: "normal",
+        observer: (t) => {
+          a(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      size: {
+        type: ["large", "medium", "small"],
+        default: "medium",
+        observer: (t) => {
+          a(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      truncated: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          this.title = this.innerText || "", a(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      "line-clamp": {
+        type: Number,
+        default: 0,
+        observer: (t) => {
+          t > 0 && this.style.setProperty("--ea-text-line-clamp", t), a(this, i).className = this.updateContainerClasslist(), this.title = this.innerText || "";
+        }
+      },
+      tag: {
+        type: String,
+        default: "span",
+        observer: (t) => {
+        }
+      }
+    }));
+    this.isMounted = !1, this.stylesheet = m;
+  }
+  static get observedAttributes() {
+    return ["title", "type", "size", "truncated", "line-clamp", "tag"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist(
+      "ea-text",
+      {
+        ["--" + this.type]: this.type,
+        ["--" + this.size]: this.size,
+        "--truncated": this.truncated,
+        "--line-clamp": this["line-clamp"] > 0
+      }
+    );
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <${this.tag} class="ea-text" part="container">
+                <slot></slot>
+            </${this.tag}>
+        `, c(this, i, this.shadowRoot.querySelector(".ea-text")), this.isMounted = !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.$render(), this.tag = this.tag, this.title = this.title, this.type = this.type, this.size = this.size, this.truncated = this.truncated, this["line-clamp"] = this["line-clamp"];
+  }
+}
+i = new WeakMap();
+window.customElements.get("ea-text") || window.customElements.define("ea-text", y);
+export {
+  y as EaText
+};