easy-component-ui 3.0.7 → 3.0.9

package/dist/components/ea-carousel.js

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

package/dist/css/ea-carousel.style.js

@@ -1,4 +1,4 @@
-const r = ":host{--ea-carousel-indicator-x: 50%;--ea-carousel-indicator-y: 8px;--ea-carousel-arrow-x: 8px;--ea-carousel-indicator-spacing: var(--spacing-sm);--ea-carousel-arrow-border-radius: var(--border-radius-circle);--ea-carousel-height: 100%;--ea-carousel-indicator-width: 16px;--ea-carousel-indicator-height: 4px;--ea-carousel-arrow-size: 24px;--ea-carousel-transform: translateX(0);--ea-carousel-indicator-color: rgba(255, 255, 255, .4);--ea-carousel-indicator-outside-color: rgba(208, 208, 208, .4);--ea-carousel-indicator-active-color: var(--grey-400);--ea-carousel-arrow-color: rgba(31, 45, 61, .11);--ea-carousel-arrow-hover-color: rgba(31, 45, 61, .23);--ea-carousel-transition: var(--transition-slow)}.ea-carousel{position:relative;overflow:hidden;display:flex;flex-direction:column;flex-wrap:nowrap;height:var(--ea-carousel-height)}.ea-carousel__content{position:relative;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;height:100%;width:100%;transform:var(--ea-carousel-transform);transition:transform var(--ea-carousel-transition)}.ea-carousel__arrow{border:none;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;z-index:1;transform:translateY(-50%);opacity:0;width:var(--ea-carousel-arrow-size);height:var(--ea-carousel-arrow-size);line-height:var(--ea-carousel-arrow-size);font-size:var(--font-size-md);font-weight:800;text-align:center;border-radius:var(--ea-carousel-arrow-border-radius);background-color:var(--ea-carousel-arrow-color);color:var(--color-white);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s,transform .3s,opacity .3s}.ea-carousel__arrow.arrow-left{left:var(--ea-carousel-arrow-x);transform:translate(calc(-100% - var(--ea-carousel-arrow-x)),-50%)}.ea-carousel__arrow.arrow-right{right:var(--ea-carousel-arrow-x);transform:translate(calc(100% - var(--ea-carousel-arrow-x)),-50%)}.ea-carousel__arrow:hover{background-color:var(--ea-carousel-arrow-hover-color)}.ea-carousel__arrow ea-icon{color:var(--color-white)}.ea-carousel__indicator-wrap{position:absolute;right:var(--ea-carousel-indicator-x);bottom:var(--ea-carousel-indicator-y);transform:translate(50%);display:flex;flex-direction:row;align-items:center;justify-content:center}.ea-carousel__indicator{box-sizing:border-box;padding:0;border:none;margin:var(--ea-carousel-indicator-spacing);width:var(--ea-carousel-indicator-width);height:var(--ea-carousel-indicator-height);background-color:var(--ea-carousel-indicator-color);transition:background-color .3s}.ea-carousel__indicator.is-active{background-color:var(--ea-carousel-indicator-active-color)}.ea-carousel--vertical .ea-carousel__arrow{display:none}.ea-carousel--vertical .ea-carousel__content{flex-direction:column}.ea-carousel--vertical .ea-carousel__indicator{--ea-carousel-indicator-width: 4px;--ea-carousel-indicator-height: 16px}.ea-carousel--vertical .ea-carousel__indicator-wrap{--ea-carousel-indicator-x: 8px;--ea-carousel-indicator-y: 50%;flex-direction:column;transform:translateY(50%)}.ea-carousel.is-arrow-hover .arrow-left,.ea-carousel.is-arrow-hover .arrow-right,.ea-carousel.is-arrow-always .arrow-left,.ea-carousel.is-arrow-always .arrow-right{opacity:1;transform:translateY(-50%)}.ea-carousel.is-outside-indicator .ea-carousel__indicator-wrap{position:relative;bottom:unset;left:unset}.ea-carousel.is-outside-indicator .ea-carousel__indicator{background-color:var(--ea-carousel-indicator-outside-color)}.ea-carousel.is-outside-indicator .ea-carousel__indicator.is-active{background-color:var(--ea-carousel-indicator-active-color)}";
+const r = ":host{--ea-carousel-indicator-x: 50%;--ea-carousel-indicator-y: 8px;--ea-carousel-arrow-x: 8px;--ea-carousel-indicator-spacing: var(--spacing-sm);--ea-carousel-arrow-border-radius: var(--border-radius-circle);--ea-carousel-height: 100%;--ea-carousel-indicator-width: 16px;--ea-carousel-indicator-height: 4px;--ea-carousel-arrow-size: 24px;--ea-carousel-transform: translateX(0);--ea-carousel-indicator-color: rgba(255, 255, 255, .4);--ea-carousel-indicator-outside-color: rgba(208, 208, 208, .4);--ea-carousel-indicator-active-color: var(--grey-400);--ea-carousel-arrow-color: rgba(31, 45, 61, .11);--ea-carousel-arrow-hover-color: rgba(31, 45, 61, .23);--ea-carousel-transition: var(--transition-slow)}:host{display:block}.ea-carousel{position:relative;overflow:hidden;display:flex;flex-direction:column;flex-wrap:nowrap;height:var(--ea-carousel-height)}.ea-carousel__content{position:relative;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;height:100%;width:100%;transform:var(--ea-carousel-transform);transition:transform var(--ea-carousel-transition)}.ea-carousel__arrow{border:none;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;z-index:1;transform:translateY(-50%);opacity:0;width:var(--ea-carousel-arrow-size);height:var(--ea-carousel-arrow-size);line-height:var(--ea-carousel-arrow-size);font-size:var(--font-size-md);font-weight:800;text-align:center;border-radius:var(--ea-carousel-arrow-border-radius);background-color:var(--ea-carousel-arrow-color);color:var(--color-white);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s,transform .3s,opacity .3s}.ea-carousel__arrow.arrow-left{left:var(--ea-carousel-arrow-x);transform:translate(calc(-100% - var(--ea-carousel-arrow-x)),-50%)}.ea-carousel__arrow.arrow-right{right:var(--ea-carousel-arrow-x);transform:translate(calc(100% - var(--ea-carousel-arrow-x)),-50%)}.ea-carousel__arrow:hover{background-color:var(--ea-carousel-arrow-hover-color)}.ea-carousel__arrow ea-icon{color:var(--color-white)}.ea-carousel__indicator-wrap{position:absolute;right:var(--ea-carousel-indicator-x);bottom:var(--ea-carousel-indicator-y);transform:translate(50%);display:flex;flex-direction:row;align-items:center;justify-content:center}.ea-carousel__indicator{box-sizing:border-box;padding:0;border:none;margin:var(--ea-carousel-indicator-spacing);width:var(--ea-carousel-indicator-width);height:var(--ea-carousel-indicator-height);background-color:var(--ea-carousel-indicator-color);transition:background-color .3s}.ea-carousel__indicator.is-active{background-color:var(--ea-carousel-indicator-active-color)}.ea-carousel--vertical .ea-carousel__arrow{display:none}.ea-carousel--vertical .ea-carousel__content{flex-direction:column}.ea-carousel--vertical .ea-carousel__indicator{--ea-carousel-indicator-width: 4px;--ea-carousel-indicator-height: 16px}.ea-carousel--vertical .ea-carousel__indicator-wrap{--ea-carousel-indicator-x: 8px;--ea-carousel-indicator-y: 50%;flex-direction:column;transform:translateY(50%)}.ea-carousel.is-arrow-hover .arrow-left,.ea-carousel.is-arrow-hover .arrow-right,.ea-carousel.is-arrow-always .arrow-left,.ea-carousel.is-arrow-always .arrow-right{opacity:1;transform:translateY(-50%)}.ea-carousel.is-outside-indicator .ea-carousel__indicator-wrap{position:relative;bottom:unset;left:unset}.ea-carousel.is-outside-indicator .ea-carousel__indicator{background-color:var(--ea-carousel-indicator-outside-color)}.ea-carousel.is-outside-indicator .ea-carousel__indicator.is-active{background-color:var(--ea-carousel-indicator-active-color)}";
 export {
   r as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-component-ui",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "使用 WebComponent 编写的原生组件库",
   "main": "dist/components/index.js",
   "module": "dist/components/index.js",