easy-component-ui 3.0.6 → 3.0.8

package/dist/components/ea-carousel.js

@@ -1,19 +1,19 @@
-var B = Object.defineProperty;
-var $ = (s) => {
-  throw TypeError(s);
+var N = Object.defineProperty;
+var z = (i) => {
+  throw TypeError(i);
 };
-var P = (s, r, e) => r in s ? B(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
-var k = (s, r, e) => P(s, typeof r != "symbol" ? r + "" : r, e), H = (s, r, e) => r.has(s) || $("Cannot " + e);
-var t = (s, r, e) => (H(s, r, "read from private field"), e ? e.call(s) : r.get(s)), n = (s, r, e) => r.has(s) ? $("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, e), v = (s, r, e, i) => (H(s, r, "write to private field"), i ? i.call(s, e) : r.set(s, e), e), p = (s, r, e) => (H(s, r, "access private method"), e);
-import { B as N } from "./Base.js";
-import { s as O } from "../css/ea-carousel-item.style.js";
+var O = (i, o, e) => o in i ? N(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
+var M = (i, o, e) => O(i, typeof o != "symbol" ? o + "" : o, e), H = (i, o, e) => o.has(i) || z("Cannot " + e);
+var t = (i, o, e) => (H(i, o, "read from private field"), e ? e.call(i) : o.get(i)), n = (i, o, e) => o.has(i) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(i) : o.set(i, e), f = (i, o, e, r) => (H(i, o, "write to private field"), r ? r.call(i, e) : o.set(i, e), e), c = (i, o, e) => (H(i, o, "access private method"), e);
+import { B } from "./Base.js";
+import { s as j } from "../css/ea-carousel-item.style.js";
 import { s as U } from "../css/ea-carousel.style.js";
-class j extends N {
+class W extends B {
   static get observedAttributes() {
     return [...super.observedAttributes];
   }
   constructor() {
-    super(), this.stylesheet = O, this.$render();
+    super(), this.stylesheet = j, this.$render();
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -26,38 +26,39 @@ class j extends N {
     super.connectedCallback();
   }
 }
-window.customElements.get("ea-carousel-item") || window.customElements.define("ea-carousel-item", j);
-var f, w, C, y, g, d, h, c, o, E, _, l, z, b, R, M, m, A, x, L, S, T, I;
-class W extends N {
+window.customElements.get("ea-carousel-item") || window.customElements.define("ea-carousel-item", W);
+var v, b, _, L, p, g, h, u, s, S, C, l, $, w, k, A, m, y, E, q, P, R, I, T;
+class X extends B {
   constructor() {
     super();
     n(this, l);
     /** @type {HTMLElement} */
-    n(this, f);
+    n(this, v);
     /** @type {HTMLElement} */
-    n(this, w);
+    n(this, b);
     /** @type {HTMLElement} */
-    n(this, C);
+    n(this, _);
     /** @type {HTMLElement} */
-    n(this, y);
+    n(this, L);
     /** @type {HTMLElement} */
-    n(this, g);
+    n(this, p);
     /** @type {HTMLElement[]} */
-    n(this, d, []);
+    n(this, g, []);
     /** @type {AbortController} */
     n(this, h);
-    n(this, c, {
+    n(this, u, {
       triggerAbortControllers: new AbortController()
     });
-    n(this, o, {
+    n(this, s, {
       prevIndex: 0,
       originLength: 0,
       timer: null,
       pause: !1,
       isMouseEnter: !1,
-      isEnd: !1
+      isEnd: !1,
+      isProcessingSlotChange: !1
     });
-    k(this, "state", this.properties({
+    M(this, "state", this.properties({
       height: {
         type: String,
         default: "100%",
@@ -75,12 +76,12 @@ class W extends N {
       index: {
         type: Number,
         default: 0,
-        observer: (e, i) => {
-          if (t(this, b).call(this, e), t(this, o).isEnd) return t(this, o).isEnd = !1;
-          e < 0 ? (e = t(this, d).length - 1, i = 0, t(this, o).isEnd = !0) : e > t(this, d).length - 1 && (i = t(this, d).length - 1, e = 0, t(this, o).isEnd = !0), t(this, o).prevIndex = i, this.emit("change", {
+        observer: (e, r) => {
+          if (t(this, w).call(this, e), t(this, s).isEnd) return t(this, s).isEnd = !1;
+          e < 0 ? (e = t(this, g).length - 1, r = 0, t(this, s).isEnd = !0) : e > t(this, g).length - 1 && (r = t(this, g).length - 1, e = 0, t(this, s).isEnd = !0), t(this, s).prevIndex = r, this.emit("change", {
             detail: {
               current: e,
-              prev: i
+              prev: r
             }
           });
         }
@@ -90,12 +91,12 @@ class W extends N {
         default: "hover",
         /** @param {'click' | 'hover'} newVal */
         observer: (e) => {
-          var i;
-          (i = t(this, c).triggerAbortControllers) == null || i.abort(), t(this, c).triggerAbortControllers = new AbortController(), t(this, g).addEventListener(
+          var r;
+          (r = t(this, u).triggerAbortControllers) == null || r.abort(), t(this, u).triggerAbortControllers = new AbortController(), t(this, p).addEventListener(
             e === "hover" ? "mouseover" : "click",
-            t(this, L),
+            t(this, q),
             {
-              signal: t(this, c).triggerAbortControllers.signal
+              signal: t(this, u).triggerAbortControllers.signal
             }
           );
         }
@@ -117,7 +118,7 @@ class W extends N {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          e ? p(this, l, m).call(this) : p(this, l, M).call(this);
+          e ? c(this, l, m).call(this) : c(this, l, A).call(this);
         }
       },
       loop: {
@@ -144,76 +145,76 @@ class W extends N {
      * 处理 index 溢出的情况
      * @return {number}
      */
-    n(this, E, () => this.index === t(this, d).length ? 0 : this.index === -1 ? t(this, d).length - 1 : this.index);
+    n(this, S, () => this.index === t(this, g).length ? 0 : this.index === -1 ? t(this, g).length - 1 : this.index);
     /**
      * 渲染 轮播图指示器，为了避免vue组件缓存，所以在初始化和组件挂载时都进行渲染
      */
-    n(this, _, () => {
+    n(this, C, () => {
       const e = Array.from(
-        this.querySelectorAll("ea-carousel-item"),
-        (i, a) => `<button class='ea-carousel__indicator' part='indicator' tabindex="1" data-index="${a}"></button>`
+        this.querySelectorAll("ea-carousel-item:not([slot])"),
+        (r, a) => `<button class='ea-carousel__indicator' part='indicator' tabindex="1" data-index="${a}"></button>`
       ).join("");
-      t(this, g).innerHTML = e, v(this, d, [
-        ...t(this, g).querySelectorAll(".ea-carousel__indicator")
+      t(this, p).innerHTML = e, f(this, g, [
+        ...t(this, p).querySelectorAll(".ea-carousel__indicator")
       ]);
     });
     /**
      * 更新轮播图位置
      * @param {number} index
      */
-    n(this, b, (e = 0) => {
-      const { width: i, height: a } = t(this, f).getBoundingClientRect(), u = this.direction === "horizontal" ? "X" : "Y", q = this.direction === "horizontal" ? i : a;
+    n(this, w, (e = 0) => {
+      const { width: r, height: a } = t(this, v).getBoundingClientRect(), d = this.direction === "horizontal" ? "X" : "Y", x = this.direction === "horizontal" ? r : a;
       this.style.setProperty(
         "--ea-carousel-transform",
-        `translate${u}(-${(e + 1) * q}px)`
-      ), t(this, R).call(this);
+        `translate${d}(-${(e + 1) * x}px)`
+      ), t(this, k).call(this);
     });
     /**
      * 更新指示器位置
      */
-    n(this, R, () => {
-      t(this, d).forEach((e, i) => {
-        e.classList.toggle("is-active", i === t(this, E).call(this));
+    n(this, k, () => {
+      t(this, g).forEach((e, r) => {
+        e.classList.toggle("is-active", r === t(this, S).call(this));
       });
     });
     /**
      * 开启轮播图过渡属性
      */
-    n(this, A, () => {
+    n(this, y, () => {
       this.clientHeight, this.style.removeProperty("--ea-carousel-transition");
     });
     /**
      * 关闭轮播图过渡属性
      */
-    n(this, x, () => {
+    n(this, E, () => {
       this.style.setProperty("--ea-carousel-transition", "none"), this.clientHeight;
     });
     /**
      * 指示器 处理事件，需要按照 `this.trigger` 来确定事件名
      * @param {MouseEvent} e
      */
-    n(this, L, (e) => {
-      const i = t(this, g).querySelectorAll(
+    n(this, q, (e) => {
+      const r = t(this, p).querySelectorAll(
         ".ea-carousel__indicator"
       ), a = e.target.closest(".ea-carousel__indicator");
-      a && i.forEach((u, q) => {
-        u.classList.toggle("is-active", u === a), u === a && (this.index = q);
+      a && r.forEach((d, x) => {
+        d.classList.toggle("is-active", d === a), d === a && (this.index = x);
       });
     });
     /**
      * 轮播图切换结束事件，即能确保轮播图在视觉上连续
      */
-    n(this, S, () => {
-      t(this, x).call(this), this.autoplay && !t(this, o).isMouseEnter && p(this, l, M).call(this), this.index = t(this, E).call(this), this.autoplay && !t(this, o).isMouseEnter && p(this, l, m).call(this), t(this, A).call(this), t(this, o).pause = !1;
+    n(this, P, () => {
+      t(this, E).call(this), this.autoplay && !t(this, s).isMouseEnter && c(this, l, A).call(this), this.index = t(this, S).call(this), this.autoplay && !t(this, s).isMouseEnter && c(this, l, m).call(this), t(this, y).call(this), t(this, s).pause = !1;
     });
     /**
      * 箭头显示事件
      */
-    n(this, T, () => {
+    n(this, R, () => {
       const e = () => {
-        t(this, o).isMouseEnter = !1, this["pause-on-hover"] && p(this, l, m).call(this), this.updateContainerClasslist();
+        t(this, s).isMouseEnter = !1, this["pause-on-hover"] && c(this, l, m).call(this), this.updateContainerClasslist();
       };
-      t(this, o).isMouseEnter = !0, this["pause-on-hover"] && p(this, l, M).call(this), this.updateContainerClasslist(), t(this, f).addEventListener("mouseleave", e, {
+      t(this, s).isMouseEnter = !0, this["pause-on-hover"] && c(this, l, A).call(this), this.updateContainerClasslist(), t(this, v).addEventListener("mouseleave", e, {
         signal: t(this, h).signal,
         once: !0
       });
@@ -226,7 +227,7 @@ class W extends N {
       return {
         listener: () => {
           clearTimeout(e), e = null, e = setTimeout(() => {
-            t(this, b).call(this, this.index);
+            t(this, w).call(this, this.index);
           }, 100);
         },
         unsetHandler: () => {
@@ -234,17 +235,25 @@ class W extends N {
         }
       };
     });
+    /**
+     * 处理 slotchange 事件，当 slot 内容变化时重新渲染
+     */
+    n(this, T, () => {
+      t(this, s).isProcessingSlotChange || (console.log(1), t(this, s).isProcessingSlotChange = !0, t(this, E).call(this), c(this, l, A).call(this), t(this, s).prevIndex = 0, t(this, s).originLength = 0, t(this, s).pause = !1, t(this, s).isEnd = !1, this.index = 0, t(this, C).call(this), c(this, l, $).call(this), t(this, k).call(this), this.autoplay && c(this, l, m).call(this), queueMicrotask(() => {
+        t(this, y).call(this), t(this, s).isProcessingSlotChange = !1;
+      }));
+    });
     /**
      * 上一张轮播图
      */
-    k(this, "prev", () => {
-      t(this, o).pause || (this.index--, t(this, o).pause = !0);
+    M(this, "prev", () => {
+      t(this, s).pause || (this.index--, t(this, s).pause = !0);
     });
     /**
      * 下一张轮播图
      */
-    k(this, "next", () => {
-      t(this, o).pause || (this.index++, t(this, o).pause = !0);
+    M(this, "next", () => {
+      t(this, s).pause || (this.index++, t(this, s).pause = !0);
     });
     this.stylesheet = U, this.$render();
   }
@@ -277,11 +286,11 @@ class W extends N {
         ["--" + this.direction]: this.direction
       },
       {
-        ["arrow-" + this.arrow]: this.arrow === "always" || this.arrow === "never" || t(this, o).isMouseEnter,
+        ["arrow-" + this.arrow]: this.arrow === "always" || this.arrow === "never" || t(this, s).isMouseEnter,
         [this["indicator-position"] + "-indicator"]: this["indicator-position"]
       }
     );
-    return t(this, f).className = e, e;
+    return t(this, v).className = e, e;
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -293,82 +302,88 @@ class W extends N {
           <ea-icon icon="icon-angle-right" part="arrow-right-icon"></ea-icon>
         </button>
         <ul class="ea-carousel__content" part="content">
+            <slot name="clone-last"></slot>
             <slot></slot>
+            <slot name="clone-first"></slot>
         </ul>
         <footer class="ea-carousel__indicator-wrap" part="indicator-wrap">
           
         </footer>
       </div>
-    `, v(this, f, this.shadowRoot.querySelector(".ea-carousel")), v(this, w, this.shadowRoot.querySelector(".ea-carousel__content")), v(this, g, this.shadowRoot.querySelector(
+    `, f(this, v, this.shadowRoot.querySelector(".ea-carousel")), f(this, b, this.shadowRoot.querySelector(".ea-carousel__content")), f(this, p, this.shadowRoot.querySelector(
       ".ea-carousel__indicator-wrap"
-    )), v(this, C, this.shadowRoot.querySelector(
+    )), f(this, _, this.shadowRoot.querySelector(
       ".ea-carousel__arrow.arrow-left"
-    )), v(this, y, this.shadowRoot.querySelector(
+    )), f(this, L, this.shadowRoot.querySelector(
       ".ea-carousel__arrow.arrow-right"
-    )), t(this, _).call(this), this.updateContainerClasslist();
+    )), t(this, C).call(this), this.updateContainerClasslist();
   }
   connectedCallback() {
-    var e, i;
-    super.connectedCallback(), (e = t(this, h)) == null || e.abort(), v(this, h, new AbortController());
-    for (const a in t(this, c))
-      (i = t(this, c)[a]) == null || i.abort(), t(this, c)[a] = new AbortController();
-    t(this, x).call(this), t(this, _).call(this), p(this, l, z).call(this), this.autoplay && p(this, l, m).call(this), t(this, g).addEventListener(
+    var e, r;
+    super.connectedCallback(), (e = t(this, h)) == null || e.abort(), f(this, h, new AbortController());
+    for (const a in t(this, u))
+      (r = t(this, u)[a]) == null || r.abort(), t(this, u)[a] = new AbortController();
+    t(this, E).call(this), t(this, C).call(this), c(this, l, $).call(this), this.autoplay && c(this, l, m).call(this), t(this, p).addEventListener(
       this.trigger === "hover" ? "mouseover" : "click",
-      t(this, L),
+      t(this, q),
       {
-        signal: t(this, c).triggerAbortControllers.signal
+        signal: t(this, u).triggerAbortControllers.signal
       }
-    ), t(this, w).addEventListener(
+    ), t(this, b).addEventListener(
       "transitionend",
-      t(this, S),
+      t(this, P),
       { signal: t(this, h).signal }
-    ), this.arrow !== "never" && this.direction !== "vertical" && (t(this, C).addEventListener("click", this.prev, {
+    ), this.arrow !== "never" && this.direction !== "vertical" && (t(this, _).addEventListener("click", this.prev, {
       signal: t(this, h).signal
-    }), t(this, y).addEventListener("click", this.next, {
+    }), t(this, L).addEventListener("click", this.next, {
       signal: t(this, h).signal
-    })), t(this, f).addEventListener("mouseenter", t(this, T), {
+    })), t(this, v).addEventListener("mouseenter", t(this, R), {
       signal: t(this, h).signal
     }), window.addEventListener("resize", t(this, I).call(this).listener, {
       signal: t(this, h).signal
+    }), t(this, b).querySelector("slot:not([name])").addEventListener("slotchange", t(this, T), {
+      signal: t(this, h).signal
     }), queueMicrotask(() => {
-      t(this, A).call(this);
+      t(this, y).call(this);
     });
   }
   $beforeUnmounted() {
-    var e, i, a;
+    var e, r, a;
     (e = t(this, h)) == null || e.abort();
-    for (const u in t(this, c))
-      (i = t(this, c)[u]) == null || i.abort();
+    for (const d in t(this, u))
+      (r = t(this, u)[d]) == null || r.abort();
     (a = t(this, I).call(this)) == null || a.unsetHandler();
   }
 }
-f = new WeakMap(), w = new WeakMap(), C = new WeakMap(), y = new WeakMap(), g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), c = new WeakMap(), o = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), l = new WeakSet(), /**
+v = new WeakMap(), b = new WeakMap(), _ = new WeakMap(), L = new WeakMap(), p = new WeakMap(), g = new WeakMap(), h = new WeakMap(), u = new WeakMap(), s = new WeakMap(), S = new WeakMap(), C = new WeakMap(), l = new WeakSet(), /**
  * 初始化 `轮播图元素` 结构
  */
-z = function() {
+$ = function() {
   try {
-    this.childNodes.forEach((u) => {
-      u.tagName !== "EA-CAROUSEL-ITEM" && u.remove();
-    });
-    const e = this.children, i = e[0].cloneNode(!0), a = e[e.length - 1].cloneNode(!0);
-    t(this, o).originLength = e.length, this.insertBefore(a, this.firstChild), this.appendChild(i), queueMicrotask(() => {
-      t(this, b).call(this);
+    const e = this.querySelectorAll("ea-carousel-item:not([slot])");
+    if (e.length === 0) return;
+    t(this, s).originLength = e.length, this.querySelectorAll(
+      'ea-carousel-item[slot^="clone-"]'
+    ).forEach((x) => x.remove());
+    const a = e[0].cloneNode(!0), d = e[e.length - 1].cloneNode(!0);
+    a.setAttribute("slot", "clone-first"), d.setAttribute("slot", "clone-last"), this.appendChild(a), this.appendChild(d), queueMicrotask(() => {
+      t(this, w).call(this);
     });
   } catch {
   }
-}, b = new WeakMap(), R = new WeakMap(), /**
+}, w = new WeakMap(), k = new WeakMap(), /**
  * 清除轮播图自动播放
  */
-M = function() {
-  t(this, o).timer && (clearInterval(t(this, o).timer), t(this, o).timer = null);
+A = function() {
+  t(this, s).timer && (clearInterval(t(this, s).timer), t(this, s).timer = null);
 }, /**
  * 处理轮播图自动播放
  */
 m = function() {
-  this.autoplay && (t(this, o).timer = setInterval(this.next, this.interval));
-}, A = new WeakMap(), x = new WeakMap(), L = new WeakMap(), S = new WeakMap(), T = new WeakMap(), I = new WeakMap();
-window.customElements.get("ea-carousel") || window.customElements.define("ea-carousel", W);
+  this.autoplay && (t(this, s).timer = setInterval(this.next, this.interval));
+}, y = new WeakMap(), E = new WeakMap(), q = new WeakMap(), P = new WeakMap(), R = new WeakMap(), I = new WeakMap(), T = new WeakMap();
+window.customElements.get("ea-carousel") || window.customElements.define("ea-carousel", X);
 export {
-  W as EaCarousel,
-  j as EaCarouselItem
+  X as EaCarousel,
+  W as EaCarouselItem
 };

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

@@ -2,13 +2,13 @@ var y = Object.defineProperty;
 var p = (e) => {
   throw TypeError(e);
 };
-var f = (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) => f(e, typeof s != "symbol" ? s + "" : s, t), m = (e, s, t) => s.has(e) || p("Cannot " + t);
+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 w } from "./Base.js";
+import { B as f } from "./Base.js";
 import { s as C } from "../css/ea-text.style.js";
 var a, n, r;
-class g extends w {
+class g extends f {
   constructor() {
     super();
     /** @type {HTMLElement} */
@@ -70,7 +70,10 @@ class g extends w {
         type: String,
         default: "span",
         observer: (t) => {
-          this.$render(), this.hasAttribute("line-clamp") && i(this, a).style.setProperty("--ea-text-line-clamp", t), (this.hasAttribute("truncated") || this.hasAttribute("line-clamp")) && (this.title = this.innerText || ""), this.updateContainerClasslist();
+          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();
         }
       }
     }));