easy-component-ui 1.0.3 → 2.0.1

package/components/ea-carousel/index.js

@@ -1,434 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from "../../utils/createElement.js"
-
-const stylesheet = `
-.ea-carousel_wrap {
-  position: relative;
-}
-.ea-carousel_wrap.ea-carousel--horizontal {
-  overflow-x: hidden;
-}
-.ea-carousel_wrap .ea-carousel_container {
-  position: relative;
-  color: #fff;
-  text-align: center;
-  height: 300px;
-  transition: transform 0.5s;
-}
-.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;
-  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;
-  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 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;
-}
-
-:host {
-  --odd-bgc: #d3dce6;
-}
-
-.ea-carousel-item_wrap {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  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;
-}
-`;
-
-export class EaCarousel extends Base {
-    #wrap;
-
-    #container;
-
-    #indicatorWrap;
-
-    #timer = null;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-carousel_wrap';
-
-        const carouselSlot = createSlotElement('');
-        const container = createElement('div', 'ea-carousel_container', [carouselSlot]);
-        wrap.appendChild(container);
-
-        const indicatorWrap = createElement('div', 'ea-carousel-indicator_wrap');
-        wrap.appendChild(indicatorWrap);
-
-        this.#wrap = wrap;
-        this.#container = container;
-        this.#indicatorWrap = indicatorWrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- direction 轮播图方向 -------
-    // #region
-    get direction() {
-        const direction = this.getAttribute('direction');
-        return ["horizontal", "vertical"].includes(direction) ? direction : "horizontal";
-    }
-
-    set direction(value) {
-        this.setAttribute('direction', value);
-
-        this.#wrap.classList.add(`ea-carousel--${value}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- index 轮播图索引 -------
-    // #region
-    get index() {
-        return this.getAttrNumber('index') || 0;
-    }
-
-    set index(value) {
-        const index = this.#handleIndexOverflow(value);
-
-        this.setAttribute('index', index);
-
-        this.#container.style.transform = `translateX(-${index * this.#container.getBoundingClientRect().width}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 -------
-
-    /**
-     * 处理索引溢出问题
-     * @param {number} val - 需要检查和调整的索引值
-     * @returns {number} - 调整后的合法索引值
-     */
-    #handleIndexOverflow(val) {
-        // 获取容器孩子的数量
-        const length = this.querySelectorAll('ea-carousel-item').length - 1;
-
-        // 如果索引值小于0，将其设置为最后一个索引
-        if (val < 0) {
-            val = length;
-            // 如果索引值大于孩子数量，将其设置为第一个索引
-        } else if (val > length) {
-            val = 0;
-        }
-
-        // 返回调整后的索引值
-        return val;
-    }
-
-    /**
-     * 初始化轮播项的位置和样式。
-     */
-    #initCarouselItem() {
-        // 获取所有轮播项元素
-        const items = this.querySelectorAll('ea-carousel-item');
-
-        // 遍历每个轮播项
-        items.forEach((item, index) => {
-            // 延迟执行，创建动画效果的延迟
-            setTimeout(() => {
-                // 如果是奇数索引，设置特殊的背景色
-                if (index % 2 === 1) {
-                    item.style.setProperty('--odd-bgc', '#99a9bf');
-                }
-                // 计算并设置轮播项的初始位置
-                item.translate = index * this.#wrap.getBoundingClientRect().width;
-            }, 20);
-        });
-    }
-
-    /**
-     * 初始化轮播指示器
-     */
-    #initIndicators() {
-        const that = this;
-
-        // 获取所有轮播项元素
-        const items = this.querySelectorAll('ea-carousel-item');
-        items.forEach((item, index) => {
-            const indicator = createElement('div', 'ea-carousel-item_indicator');
-            this.#indicatorWrap.appendChild(indicator);
-        });
-
-        // 遍历每个指示器
-        const indicators = this.#indicatorWrap.querySelectorAll('.ea-carousel-item_indicator');
-        indicators.forEach((indicator, index) => {
-            indicator.addEventListener(this.trigger === 'click' ? 'click' : 'mouseenter', () => {
-                that.index = index;
-
-                indicators.forEach((item) => {
-                    item.classList.remove('ea-carousel-item_active');
-                })
-                indicator.classList.add('ea-carousel-item_active');
-            })
-        });
-    }
-
-
-    /**
-     * 创建箭头项
-     * @param {string} arrow - 箭头方向，"left" 或 "right"
-     * @param {string} show - 箭头显示的时机，"always"、"hover" 或 "never"
-     * @returns {HTMLElement} - 创建的箭头元素
-     * 
-     * 该函数用于创建轮播图的左右箭头元素，并设置其初始状态和点击事件。
-     * 箭头元素的样式和位置会在鼠标进入和离开时动态改变。
-     */
-    #createArrowItem(arrow, show) {
-        // 保持当前对象的引用
-        const that = this;
-        // 创建箭头元素，并根据方向添加相应的类名
-        const arrowItem = createElement('div', `ea-carousel-item_arrow ea-carousel-item_arrow--${arrow}`);
-        // 根据箭头方向设置箭头的HTML内容
-        arrowItem.innerHTML = arrow === "left" ? `&lt;` : `&gt;`;
-
-        switch (show) {
-            case "always":
-                // 如果显示时机为“总是”，则设置箭头的初始位置和透明度
-                arrowItem.style.transform = `translateY(-50%) translateX(${arrow === "left" ? 1 : -1}rem)`;
-                arrowItem.style.opacity = 1;
-                break;
-            case "hover":
-                // 当鼠标进入箭头元素时，改变其位置和透明度
-                this.#wrap.addEventListener('mouseenter', (e) => {
-                    arrowItem.style.transform = `translateY(-50%) translateX(${arrow === "left" ? 1 : -1}rem)`;
-                    arrowItem.style.opacity = 1;
-                })
-
-                // 当鼠标离开箭头元素时，恢复其初始位置和透明度
-                this.#wrap.addEventListener('mouseleave', (e) => {
-                    arrowItem.style.transform = `translateY(-50%) translateX(${arrow === "left" ? -100 : 100}%)`;
-                    arrowItem.style.opacity = 0;
-                })
-                break;
-        }
-
-        // 绑定点击事件，根据箭头方向改变轮播图的索引
-        arrowItem.addEventListener('click', (e) => {
-            that.index = arrow === "left" ? --that.index : ++that.index;
-        })
-
-        // 返回创建的箭头元素
-        return arrowItem;
-    }
-
-    /**
-     * 初始化箭头项
-     * 该方法用于创建并添加左右两个箭头项到指定的包装元素中。
-     * 这两个箭头项分别代表向左和向右的导航功能。
-     * 
-     * @private
-     */
-    #initArrowItem(show) {
-        if (show === "never") return;
-
-        // 创建一个向左的箭头项
-        const leftArrowItem = this.#createArrowItem("left", show);
-        // 创建一个向右的箭头项
-        const rightArrowItem = this.#createArrowItem("right", show);
-
-        // 将左箭头项添加到包装元素中
-        this.#wrap.appendChild(leftArrowItem);
-        // 将右箭头项添加到包装元素中
-        this.#wrap.appendChild(rightArrowItem);
-    }
-
-    /**
-     * 初始化轮播图自动播放功能。
-     * @param {number} duration - 每张图片展示的时间间隔，单位为秒。
-     */
-    #initCarouselAutoPlay(duration) {
-        // 保存当前上下文的引用
-        const that = this;
-        // 设置定时器，每隔一定时间自动切换到下一张图片
-        this.#timer = setInterval(() => {
-            this.index = this.index + 1;
-        }, duration * 1000);
-
-        // 当鼠标进入轮播图区域时，停止自动播放
-        this.addEventListener('mouseenter', () => {
-            clearInterval(this.#timer);
-            that.#timer = null;
-        });
-
-        // 当鼠标离开轮播图区域时，恢复自动播放
-        this.addEventListener('mouseleave', () => {
-            that.#timer = setInterval(() => {
-                this.index = this.index + 1;
-            }, duration * 1000)
-        });
-    }
-
-    init() {
-        const that = this;
-
-        this.direction = this.direction;
-
-        this.trigger = this.trigger;
-
-        this.interval = this.interval;;
-
-        this.arrow = this.arrow;
-
-        this.#initCarouselItem();
-        this.#initArrowItem(this.arrow);
-        this.#initIndicators(this.interval);
-        this.#initCarouselAutoPlay(this.interval);
-
-        this.index = this.index;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-export class EaCarouselItem extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-carousel-item_wrap';
-
-        const carouselSlot = createSlotElement('');
-        wrap.appendChild(carouselSlot);
-
-        this.#wrap = wrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- translate 图片偏移 -------
-    // #region
-    get translate() {
-        return this.getAttribute('translate') || 0;
-    }
-
-    set translate(value) {
-        this.setAttribute('translate', value);
-
-        this.#wrap.style.transform = `translateX(${value}px) scale(1)`;
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        const that = this;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-carousel')) {
-    customElements.define('ea-carousel', EaCarousel);
-}
-if (!customElements.get('ea-carousel-item')) {
-    customElements.define('ea-carousel-item', EaCarouselItem);
-}
+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(),s="horizontal"===this.direction?"X":"Y",a="horizontal"===this.direction?r.width:r.height;this.#e.style.transform=`translate${s}(-${i*a}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");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")}))}))}#s(){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)}))}#a(t){let e=!1;const i=createElement("div",`ea-carousel-item_arrow ea-carousel-item_arrow--${t}`);switch(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.#s(),"never"!==this.arrow||"vertical"!==this.direction){const t=this.#a("left"),e=this.#a("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);

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

@@ -0,0 +1 @@
+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";

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

@@ -0,0 +1 @@
+export function handleIndexOverflow(e,n){return n<0?n=e:n>e&&(n=0),n}

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

@@ -0,0 +1 @@
+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);

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

@@ -0,0 +1 @@
+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";