easy-component-ui 2.0.5 → 2.1.1

package/components/ea-carousel/index.css

@@ -0,0 +1,103 @@
+.ea-carousel_wrap {
+  position: relative;
+  overflow: hidden;
+}
+.ea-carousel_wrap .ea-carousel_content-container {
+  position: relative;
+  display: flex;
+  color: #fff;
+  text-align: center;
+  height: 300px;
+  transition: transform 0.5s;
+}
+.ea-carousel_wrap .ea-carousel_content-container ::slotted(ea-carousel-item) {
+  flex: 0 0 100%;
+  width: 100%;
+}
+.ea-carousel_wrap .ea-carousel-item_arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5;
+  font-weight: 800;
+  text-align: center;
+  border-radius: 50%;
+  background-color: rgba(31, 45, 61, 0.11);
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
+}
+.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--left {
+  left: 0;
+  transform: translate(-100%, -50%);
+}
+.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--right {
+  right: 0;
+  transform: translate(100%, -50%);
+}
+.ea-carousel_wrap .ea-carousel-item_arrow:hover {
+  background-color: rgba(31, 45, 61, 0.3);
+}
+.ea-carousel_wrap .ea-carousel-indicator_wrap {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.4);
+  margin: 0.25rem;
+  transition: background-color 0.3s;
+}
+.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator.ea-carousel-item_indicator--active {
+  background-color: #fff;
+}
+.ea-carousel_wrap ::slotted(ea-carousel-item:nth-child(odd)) {
+  --odd-bgc: #d3dce6;
+}
+.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--left {
+  left: 0;
+  transform: translate(50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--right {
+  right: 0;
+  transform: translate(-50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--left {
+  left: 0;
+  transform: translate(50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--right {
+  right: 0;
+  transform: translate(-50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.ea-carousel--horizontal .ea-carousel_content-container {
+  flex-direction: row;
+}
+.ea-carousel_wrap.ea-carousel--vertical .ea-carousel_content-container {
+  flex-direction: column;
+}
+.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-item_arrow {
+  display: none;
+}
+.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-indicator_wrap {
+  left: 100%;
+  bottom: 50%;
+  flex-direction: column;
+  transform: translate(-200%, 50%);
+}

package/components/ea-carousel/index.js

@@ -1 +1,222 @@
-import Base from"../Base.js";import"../ea-carousel-item/index.js";import{createElement}from"../../utils/createElement.js";import{handleIndexOverflow}from"./src/utils/handleIndexOverflow.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCarousel extends Base{#t;#e;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-carousel_wrap' part='container'>\n                <div class='ea-carousel_content-container' part='content-wrap'>\n                    <slot></slot>\n                </div>\n                <div class='ea-carousel-indicator_wrap' part='indicator-wrap'></div>\n            </div>\n        ",this.#t=t.querySelector(".ea-carousel_wrap"),this.#e=t.querySelector(".ea-carousel_content-container"),this.#i=t.querySelector(".ea-carousel-indicator_wrap"),this.build(t,stylesheet)}get direction(){const t=this.getAttribute("direction");return["horizontal","vertical"].includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t),this.#t.classList.add(`ea-carousel--${t}`)}get index(){return this.getAttrNumber("index")||0}set index(t){const e=this.querySelectorAll("ea-carousel-item").length-1,i=handleIndexOverflow(e,t);this.setAttribute("index",i);const r=this.#t.getBoundingClientRect(),a="horizontal"===this.direction?"X":"Y",s="horizontal"===this.direction?r.width:r.height;this.#e.style.transform=`translate${a}(-${i*s}px)`;try{const t=this.#i.querySelectorAll(".ea-carousel-item_indicator");t.forEach((t=>{t.classList.remove("ea-carousel-item_indicator--active")})),t[i].classList.add("ea-carousel-item_indicator--active")}catch(t){}}get trigger(){const t=this.getAttribute("trigger")||"hover";return["click","hover"].includes(t)?t:"click"}set trigger(t){this.setAttribute("trigger",t)}get interval(){return this.getAttrNumber("interval")||3}set interval(t){this.setAttribute("interval",t)}get arrow(){const t=this.getAttribute("arrow")||"hover";return["always","hover","never"].includes(t)?t:"hover"}set arrow(t){this.setAttribute("arrow",t)}#r(){const t=this.querySelectorAll("ea-carousel-item").length;for(let e=0;e<t;e++){const t=createElement("div","ea-carousel-item_indicator");t.part="indicator",this.#i.appendChild(t)}const e=this.#i.querySelectorAll(".ea-carousel-item_indicator");e[0].classList.add("ea-carousel-item_indicator--active"),e.forEach(((t,i)=>{t.addEventListener("click"===this.trigger?"click":"mouseenter",(()=>{this.index=i,e.forEach((t=>{t.classList.remove("ea-carousel-item_active")})),t.classList.add("ea-carousel-item_active")}))}))}#a(){let t=setInterval((()=>{this.index=this.index+1}),1e3*this.interval);this.addEventListener("mouseenter",(()=>{clearInterval(t),t=null})),this.addEventListener("mouseleave",(()=>{t=setInterval((()=>{this.index=this.index+1}),1e3*this.interval)}))}#s(t){let e=!1;const i=createElement("div",`ea-carousel-item_arrow ea-carousel-item_arrow--${t}`);switch(i.part="arrow",i.innerHTML="left"===t?"&lt;":"&gt;",this.arrow){case"always":this.#t.classList.add("always-show-arrow");break;case"hover":this.#t.classList.add("hover-trigger")}return i.addEventListener("click",(()=>{e||(this.index="left"===t?--this.index:++this.index)})),this.#e.addEventListener("transitionstart",(()=>{e=!0})),this.#e.addEventListener("transitionend",(()=>{e=!1})),i}connectedCallback(){if(this.direction=this.direction,this.trigger=this.trigger,this.interval=this.interval,this.arrow=this.arrow,this.index=this.index,this.#r(),this.#a(),"never"!==this.arrow||"vertical"!==this.direction){const t=this.#s("left"),e=this.#s("right");this.#t.appendChild(t),this.#t.appendChild(e)}window.addEventListener("resize",(()=>{this.index=this.index}))}}customElements.get("ea-carousel")||customElements.define("ea-carousel",EaCarousel);
+import Base from '../Base.js';
+import "../ea-carousel-item/index.js"
+
+import { createElement } from '../../utils/createElement.js';
+
+import { handleIndexOverflow } from './src/utils/handleIndexOverflow.js';
+
+import { stylesheet } from './src/style/stylesheet.js'
+
+export class EaCarousel extends Base {
+    #container;
+
+    #contentContainer;
+
+    #indicatorWrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-carousel_wrap' part='container'>
+                <div class='ea-carousel_content-container' part='content-wrap'>
+                    <slot></slot>
+                </div>
+                <div class='ea-carousel-indicator_wrap' part='indicator-wrap'></div>
+            </div>
+        `;
+
+        this.#container = shadowRoot.querySelector('.ea-carousel_wrap');
+        this.#contentContainer = shadowRoot.querySelector('.ea-carousel_content-container');
+        this.#indicatorWrap = shadowRoot.querySelector('.ea-carousel-indicator_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- direction 轮播图方向 -------
+    // #region
+    get direction() {
+        const direction = this.getAttribute('direction');
+        return ["horizontal", "vertical"].includes(direction) ? direction : "horizontal";
+    }
+
+    set direction(value) {
+        this.setAttribute('direction', value);
+
+        this.#container.classList.add(`ea-carousel--${value}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- index 轮播图索引 -------
+    // #region
+    get index() {
+        return this.getAttrNumber('index') || 0;
+    }
+
+    set index(value) {
+        const length = this.querySelectorAll('ea-carousel-item').length - 1;
+        const index = handleIndexOverflow(length, value);
+
+        this.setAttribute('index', index);
+
+        const itemInfo = this.#container.getBoundingClientRect();
+        const direction = this.direction === "horizontal" ? `X` : `Y`;
+        const moveStep = this.direction === "horizontal" ? itemInfo.width : itemInfo.height;
+
+        this.#contentContainer.style.transform = `translate${direction}(-${index * moveStep}px)`;
+
+        try {
+            const indicators = this.#indicatorWrap.querySelectorAll(`.ea-carousel-item_indicator`);
+            indicators.forEach(item => {
+                item.classList.remove('ea-carousel-item_indicator--active');
+            });
+            indicators[index].classList.add('ea-carousel-item_indicator--active');
+        } catch (e) { }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- trigger 轮播图指示器触发方式 -------
+    // #region
+    get trigger() {
+        const trigger = this.getAttribute('trigger') || "hover";
+        return ["click", "hover"].includes(trigger) ? trigger : "click";
+    }
+
+    set trigger(value) {
+        this.setAttribute('trigger', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- interval 轮播图自动播放间隔时间 -------
+    // #region
+    get interval() {
+        return this.getAttrNumber('interval') || 3;
+    }
+
+    set interval(value) {
+        this.setAttribute('interval', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- arrow 轮播图是否一直显示箭头 -------
+    // #region
+    get arrow() {
+        const arrow = this.getAttribute('arrow') || "hover";
+        return ["always", "hover", "never"].includes(arrow) ? arrow : "hover";
+    }
+
+    set arrow(value) {
+        this.setAttribute('arrow', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    #initIndicators() {
+        const length = this.querySelectorAll('ea-carousel-item').length;
+
+        for (let i = 0; i < length; i++) {
+            const indicator = createElement('div', 'ea-carousel-item_indicator');
+            indicator.part = 'indicator';
+            this.#indicatorWrap.appendChild(indicator);
+        }
+
+        const indicators = this.#indicatorWrap.querySelectorAll('.ea-carousel-item_indicator');
+        indicators[0].classList.add('ea-carousel-item_indicator--active');
+        indicators.forEach((indicator, index) => {
+            indicator.addEventListener(this.trigger === 'click' ? 'click' : 'mouseenter', () => {
+                this.index = index;
+
+                indicators.forEach((item) => {
+                    item.classList.remove('ea-carousel-item_active');
+                })
+                indicator.classList.add('ea-carousel-item_active');
+            })
+        });
+    }
+
+    #initCarouselAutoPlay() {
+        let timer = setInterval(() => {
+            this.index = this.index + 1;
+        }, this.interval * 1000);
+
+        // 当鼠标进入轮播图区域时，停止自动播放
+        this.addEventListener('mouseenter', () => {
+            clearInterval(timer);
+            timer = null;
+        });
+
+        // 当鼠标离开轮播图区域时，恢复自动播放
+        this.addEventListener('mouseleave', () => {
+            timer = setInterval(() => {
+                this.index = this.index + 1;
+            }, this.interval * 1000)
+        });
+    }
+
+    #createArrowItem(arrow) {
+        let throttle = false;
+        const arrowItem = createElement('div', `ea-carousel-item_arrow ea-carousel-item_arrow--${arrow}`);
+        arrowItem.part = 'arrow';
+
+        arrowItem.innerHTML = arrow === "left" ? `&lt;` : `&gt;`;
+
+        switch (this.arrow) {
+            case "always":
+                this.#container.classList.add('always-show-arrow');
+                break;
+            case "hover":
+                this.#container.classList.add('hover-trigger');
+                break;
+        }
+
+        arrowItem.addEventListener('click', () => {
+            if (throttle) return;
+            this.index = arrow === "left" ? --this.index : ++this.index;
+        })
+
+        this.#contentContainer.addEventListener('transitionstart', () => {
+            throttle = true;
+        })
+        this.#contentContainer.addEventListener('transitionend', () => {
+            throttle = false;
+        })
+
+        return arrowItem;
+    }
+
+    connectedCallback() {
+        this.direction = this.direction;
+
+        this.trigger = this.trigger;
+
+        this.interval = this.interval;;
+
+        this.arrow = this.arrow;
+
+        this.index = this.index;
+
+        this.#initIndicators();
+        this.#initCarouselAutoPlay();
+
+        if (this.arrow !== "never" || this.direction !== "vertical") {
+            const leftArrowItem = this.#createArrowItem("left");
+            const rightArrowItem = this.#createArrowItem("right");
+
+            this.#container.appendChild(leftArrowItem);
+            this.#container.appendChild(rightArrowItem);
+        }
+
+        window.addEventListener('resize', () => {
+            this.index = this.index;
+        });
+    }
+}
+
+if (!customElements.get('ea-carousel')) {
+    customElements.define('ea-carousel', EaCarousel);
+}

package/components/ea-carousel/index.scss

@@ -0,0 +1,140 @@
+@import "../ea-ui-base-style.scss";
+
+@mixin carousel-item-arrow {
+  &.ea-carousel-item_arrow--left {
+    left: 0;
+    transform: translate(50%, -50%);
+    opacity: 1;
+  }
+
+  &.ea-carousel-item_arrow--right {
+    right: 0;
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+}
+
+.ea-carousel_wrap {
+  position: relative;
+  overflow: hidden;
+
+  .ea-carousel_content-container {
+    position: relative;
+
+    display: flex;
+
+    color: #fff;
+
+    text-align: center;
+    height: 300px;
+    transition: transform 0.5s;
+
+    ::slotted(ea-carousel-item) {
+      flex: 0 0 100%;
+      width: 100%;
+    }
+  }
+
+  .ea-carousel-item_arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0;
+
+    width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5;
+    font-weight: 800;
+    text-align: center;
+    border-radius: 50%;
+    background-color: rgba(31, 45, 61, 0.11);
+    color: #fff;
+
+    cursor: pointer;
+    user-select: none;
+
+    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
+
+    &.ea-carousel-item_arrow--left {
+      left: 0;
+      transform: translate(-100%, -50%);
+    }
+
+    &.ea-carousel-item_arrow--right {
+      right: 0;
+      transform: translate(100%, -50%);
+    }
+
+    &:hover {
+      background-color: rgba(31, 45, 61, 0.3);
+    }
+  }
+
+  .ea-carousel-indicator_wrap {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+
+    .ea-carousel-item_indicator {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.4);
+      margin: 0.25rem;
+      transition: background-color 0.3s;
+
+      &.ea-carousel-item_indicator--active {
+        background-color: #fff;
+      }
+    }
+  }
+
+  ::slotted(ea-carousel-item:nth-child(odd)) {
+    --odd-bgc: #d3dce6;
+  }
+
+  &.hover-trigger {
+    &:hover {
+      .ea-carousel-item_arrow {
+        @include carousel-item-arrow;
+      }
+    }
+  }
+
+  &.always-show-arrow {
+    .ea-carousel-item_arrow {
+      @include carousel-item-arrow;
+    }
+  }
+
+  &.ea-carousel--horizontal {
+    .ea-carousel_content-container {
+      flex-direction: row;
+    }
+  }
+
+  &.ea-carousel--vertical {
+    .ea-carousel_content-container {
+      flex-direction: column;
+    }
+
+    .ea-carousel-item_arrow {
+      display: none;
+    }
+
+    .ea-carousel-indicator_wrap {
+      left: 100%;
+      bottom: 50%;
+
+      flex-direction: column;
+
+      transform: translate(-200%, 50%);
+    }
+  }
+}

package/components/ea-carousel/src/style/stylesheet.js

@@ -1 +1,105 @@
-export const stylesheet="\n.ea-carousel_wrap {\n  position: relative;\n  overflow: hidden;\n}\n.ea-carousel_wrap .ea-carousel_content-container {\n  position: relative;\n  display: flex;\n  color: #fff;\n  text-align: center;\n  height: 300px;\n  transition: transform 0.5s;\n}\n.ea-carousel_wrap .ea-carousel_content-container ::slotted(ea-carousel-item) {\n  flex: 0 0 100%;\n  width: 100%;\n}\n.ea-carousel_wrap .ea-carousel-item_arrow {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  line-height: 1.5;\n  font-weight: 800;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgba(31, 45, 61, 0.11);\n  color: #fff;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;\n}\n.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--left {\n  left: 0;\n  transform: translate(-100%, -50%);\n}\n.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--right {\n  right: 0;\n  transform: translate(100%, -50%);\n}\n.ea-carousel_wrap .ea-carousel-item_arrow:hover {\n  background-color: rgba(31, 45, 61, 0.3);\n}\n.ea-carousel_wrap .ea-carousel-indicator_wrap {\n  position: absolute;\n  bottom: 1rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background-color: rgba(255, 255, 255, 0.4);\n  margin: 0.25rem;\n  transition: background-color 0.3s;\n}\n.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator.ea-carousel-item_indicator--active {\n  background-color: #fff;\n}\n.ea-carousel_wrap ::slotted(ea-carousel-item:nth-child(odd)) {\n  --odd-bgc: #d3dce6;\n}\n.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--left {\n  left: 0;\n  transform: translate(50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--right {\n  right: 0;\n  transform: translate(-50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--left {\n  left: 0;\n  transform: translate(50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--right {\n  right: 0;\n  transform: translate(-50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.ea-carousel--horizontal .ea-carousel_content-container {\n  flex-direction: row;\n}\n.ea-carousel_wrap.ea-carousel--vertical .ea-carousel_content-container {\n  flex-direction: column;\n}\n.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-item_arrow {\n  display: none;\n}\n.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-indicator_wrap {\n  left: 100%;\n  bottom: 50%;\n  flex-direction: column;\n  transform: translate(-200%, 50%);\n}\n";
+export const stylesheet = `
+.ea-carousel_wrap {
+  position: relative;
+  overflow: hidden;
+}
+.ea-carousel_wrap .ea-carousel_content-container {
+  position: relative;
+  display: flex;
+  color: #fff;
+  text-align: center;
+  height: 300px;
+  transition: transform 0.5s;
+}
+.ea-carousel_wrap .ea-carousel_content-container ::slotted(ea-carousel-item) {
+  flex: 0 0 100%;
+  width: 100%;
+}
+.ea-carousel_wrap .ea-carousel-item_arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5;
+  font-weight: 800;
+  text-align: center;
+  border-radius: 50%;
+  background-color: rgba(31, 45, 61, 0.11);
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
+}
+.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--left {
+  left: 0;
+  transform: translate(-100%, -50%);
+}
+.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--right {
+  right: 0;
+  transform: translate(100%, -50%);
+}
+.ea-carousel_wrap .ea-carousel-item_arrow:hover {
+  background-color: rgba(31, 45, 61, 0.3);
+}
+.ea-carousel_wrap .ea-carousel-indicator_wrap {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.4);
+  margin: 0.25rem;
+  transition: background-color 0.3s;
+}
+.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator.ea-carousel-item_indicator--active {
+  background-color: #fff;
+}
+.ea-carousel_wrap ::slotted(ea-carousel-item:nth-child(odd)) {
+  --odd-bgc: #d3dce6;
+}
+.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--left {
+  left: 0;
+  transform: translate(50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--right {
+  right: 0;
+  transform: translate(-50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--left {
+  left: 0;
+  transform: translate(50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--right {
+  right: 0;
+  transform: translate(-50%, -50%);
+  opacity: 1;
+}
+.ea-carousel_wrap.ea-carousel--horizontal .ea-carousel_content-container {
+  flex-direction: row;
+}
+.ea-carousel_wrap.ea-carousel--vertical .ea-carousel_content-container {
+  flex-direction: column;
+}
+.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-item_arrow {
+  display: none;
+}
+.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-indicator_wrap {
+  left: 100%;
+  bottom: 50%;
+  flex-direction: column;
+  transform: translate(-200%, 50%);
+}
+`;

package/components/ea-carousel/src/utils/handleIndexOverflow.js

@@ -1 +1,9 @@
-export function handleIndexOverflow(e,n){return n<0?n=e:n>e&&(n=0),n}
+export function handleIndexOverflow(length, val) {
+    if (val < 0) {
+        val = length;
+    } else if (val > length) {
+        val = 0;
+    }
+    
+    return val;
+}

package/components/ea-carousel-item/index.css

@@ -0,0 +1,20 @@
+:host {
+  --odd-bgc: #99a9bf;
+}
+
+.ea-carousel-item_wrap {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
+  background-color: var(--odd-bgc);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ea-carousel-item_wrap ::slotted(img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/components/ea-carousel-item/index.js

@@ -1 +1,23 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCarouselItem extends Base{constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-carousel-item_wrap' part='container'>\n                <slot></slot>\n            </div>\n        ",this.build(e,stylesheet)}}customElements.get("ea-carousel-item")||customElements.define("ea-carousel-item",EaCarouselItem);
+// @ts-nocheck
+import Base from '../Base.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaCarouselItem extends Base {
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-carousel-item_wrap' part='container'>
+                <slot></slot>
+            </div>
+        `;
+
+        this.build(shadowRoot, stylesheet);
+    }
+}
+
+if (!customElements.get('ea-carousel-item')) {
+    customElements.define('ea-carousel-item', EaCarouselItem);
+}

package/components/ea-carousel-item/index.scss

@@ -0,0 +1,26 @@
+:host {
+  --odd-bgc: #99a9bf;
+}
+
+.ea-carousel-item_wrap {
+  display: inline-block;
+
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+  z-index: 0;
+
+  background-color: var(--odd-bgc);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ::slotted(img) {
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+  }
+}

package/components/ea-carousel-item/src/style/stylesheet.js

@@ -1 +1,22 @@
-export const stylesheet="\n:host {\n  --odd-bgc: #99a9bf;\n}\n\n.ea-carousel-item_wrap {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 0;\n  background-color: var(--odd-bgc);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ea-carousel-item_wrap ::slotted(img) {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n";
+export const stylesheet = `
+:host {
+  --odd-bgc: #99a9bf;
+}
+
+.ea-carousel-item_wrap {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
+  background-color: var(--odd-bgc);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ea-carousel-item_wrap ::slotted(img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+`;