easy-component-ui 3.0.5 → 3.0.7

package/dist/components/ea-space.js

@@ -1,19 +1,19 @@
-var f = Object.defineProperty;
+var m = Object.defineProperty;
 var n = (t) => {
   throw TypeError(t);
 };
-var m = (t, s, e) => s in t ? f(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var o = (t, s, e) => m(t, typeof s != "symbol" ? s + "" : s, e), p = (t, s, e) => s.has(t) || n("Cannot " + e);
-var i = (t, s, e) => (p(t, s, "read from private field"), e ? e.call(t) : s.get(t)), c = (t, s, e) => s.has(t) ? n("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), d = (t, s, e, r) => (p(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
-import { B as y } from "./Base.js";
-import { s as g } from "../css/ea-space.style.js";
-var a;
-class v extends y {
+var b = (t, s, e) => s in t ? m(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var p = (t, s, e) => b(t, typeof s != "symbol" ? s + "" : s, e), c = (t, s, e) => s.has(t) || n("Cannot " + e);
+var u = (t, s, e) => (c(t, s, "read from private field"), e ? e.call(t) : s.get(t)), d = (t, s, e) => s.has(t) ? n("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, a) => (c(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
+import { B as g } from "./Base.js";
+import { s as y } from "../css/ea-space.style.js";
+var r;
+class v extends g {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    c(this, a);
-    o(this, "state", this.properties({
+    d(this, r);
+    p(this, "state", this.properties({
       wrap: {
         type: Boolean,
         default: !1,
@@ -22,18 +22,19 @@ class v extends y {
         }
       },
       alignment: {
-        type: String,
+        type: ["", "center", "flex-start", "flex-end", "baseline", "stretch"],
         default: "",
         observer: (e) => {
-          if (!CSS.supports("align-items", e)) return console.warn(`[ea-space] Invalid alignment value ${e}`);
+          if (!CSS.supports("align-items", e))
+            return console.warn(`[ea-space] Invalid alignment value ${e}`);
           this.style.setProperty("--ea-space-alignment", e);
         }
       },
       direction: {
         type: ["vertical", "horizontal"],
         default: "horizontal",
-        observer: (e) => {
-          i(this, a).className = this.updateContainerClasslist();
+        observer: () => {
+          this.updateContainerClasslist();
         }
       },
       size: {
@@ -41,9 +42,10 @@ class v extends y {
         default: "default",
         observer: (e) => {
           if (["large", "small", "default"].includes(e))
-            i(this, a).className = `${this.updateContainerClasslist()} ea-space--${e}`;
+            this.updateContainerClasslist();
           else {
-            if (!CSS.supports("gap", e)) return console.warn("[ea-space] Invalid size value");
+            if (!CSS.supports("gap", e))
+              return console.warn("[ea-space] Invalid size value");
             this.style.setProperty("--ea-space-gap", e);
           }
         }
@@ -52,11 +54,12 @@ class v extends y {
         type: String,
         default: "",
         observer: (e) => {
-          const r = [...this.children];
-          r.forEach((h, u) => {
-            if (u < r.length - 1) {
+          if (this.querySelectorAll('[part="spacer"]').forEach((i) => i.remove()), !e) return;
+          const o = [...this.children];
+          o.forEach((i, f) => {
+            if (f < o.length - 1) {
               const l = document.createElement("span");
-              l.innerText = e, l.part = "spacer", this.insertBefore(l, h.nextSibling);
+              l.innerText = e, l.part = "spacer", this.insertBefore(l, i.nextSibling);
             }
           });
         }
@@ -64,45 +67,56 @@ class v extends y {
       fill: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          i(this, a).className = this.updateContainerClasslist();
+        observer: () => {
+          this.updateContainerClasslist();
         }
       },
       "fill-ratio": {
         type: Number,
         default: 100,
         observer: (e) => {
-          this.style.setProperty("--ea-space-fill-ratio", `${e}%`);
+          Number.isNaN(Number(e)) || this.toggleAttribute("fill", !0), this.style.setProperty("--ea-space-fill-ratio", `${e}%`);
         }
       }
     }));
-    this.stylesheet = g, this.$render();
+    this.stylesheet = y, this.$render();
   }
   static get observedAttributes() {
-    return ["wrap", "direction", "size", "spacer", "alignment", "fill", "fill-ratio"];
+    return [
+      ...super.observedAttributes,
+      "wrap",
+      "direction",
+      "size",
+      "spacer",
+      "alignment",
+      "fill",
+      "fill-ratio"
+    ];
   }
   /**
    * 获取 classlist 列表
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return this.computedClasslist("ea-space", {
+    const e = this.computedClasslist("ea-space", {
+      [`--${this.size}`]: !CSS.supports("gap", this.size),
       ["--" + this.direction]: this.direction,
       "--fill": this.fill
     });
+    return u(this, r).className = e, e;
   }
   $render() {
     this.shadowRoot.innerHTML = `
-            <div class="ea-space" part="container">
-                <slot></slot>
-            </div>
-        `, d(this, a, this.shadowRoot.querySelector(".ea-space"));
+      <div class="ea-space" part="container">
+        <slot></slot>
+      </div>
+    `, h(this, r, this.shadowRoot.querySelector(".ea-space")), this.updateContainerClasslist();
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-a = new WeakMap();
+r = new WeakMap();
 window.customElements.get("ea-space") || window.customElements.define("ea-space", v);
 export {
   v as EaSpace

package/dist/components/ea-text.js

@@ -1,29 +1,37 @@
-var p = Object.defineProperty;
-var r = (e) => {
+var y = Object.defineProperty;
+var p = (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 {
+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, i);
-    /** 
+    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 - 文本标签 
+     * @property {string} tag - 文本标签
      */
     /** @type {State} */
-    n(this, "state", this.properties({
+    u(this, "state", this.properties({
       title: {
         type: String,
         default: "",
@@ -33,39 +41,43 @@ class y extends u {
       type: {
         type: ["normal", "primary", "success", "warning", "danger", "info"],
         default: "normal",
-        observer: (t) => {
-          a(this, i).className = this.updateContainerClasslist();
+        observer: async (t) => {
+          await i(this, r), this.updateContainerClasslist();
         }
       },
       size: {
         type: ["large", "medium", "small"],
         default: "medium",
-        observer: (t) => {
-          a(this, i).className = this.updateContainerClasslist();
+        observer: async (t) => {
+          await i(this, r), this.updateContainerClasslist();
         }
       },
       truncated: {
         type: Boolean,
         default: !1,
-        observer: (t) => {
-          this.title = this.innerText || "", a(this, i).className = this.updateContainerClasslist();
+        observer: async (t) => {
+          await i(this, r), this.title = this.innerText || "", 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 || "";
+        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.isMounted = !1, this.stylesheet = m;
+    this.stylesheet = C;
   }
   static get observedAttributes() {
     return ["title", "type", "size", "truncated", "line-clamp", "tag"];
@@ -75,29 +87,27 @@ class y extends u {
    * @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
-      }
-    );
+    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}>
-        `, c(this, i, this.shadowRoot.querySelector(".ea-text")), this.isMounted = !0;
+      <${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(), 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"];
+    super.connectedCallback(), this.$render();
   }
 }
-i = new WeakMap();
-window.customElements.get("ea-text") || window.customElements.define("ea-text", y);
+a = new WeakMap(), n = new WeakMap(), r = new WeakMap();
+window.customElements.get("ea-text") || window.customElements.define("ea-text", g);
 export {
-  y as EaText
+  g as EaText
 };