easy-component-ui 1.0.3 → 2.0.2

package/components/ea-icon/index.js

@@ -1,47 +1 @@
-// @ts-nocheck
-import Base from "../Base.js";
-
-export class EaIcon extends Base {
-    static observedAttributes = ['type', 'size', 'color'];
-
-    #wrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('i');
-
-        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-        this.#wrap = wrap;
-
-        shadowRoot.appendChild(wrap);
-    }
-
-    // ------- icon 图标类名 -------
-    // #region
-    get icon() {
-        return this.getAttribute('icon') || "";
-    }
-
-    set icon(value) {
-        this.setAttribute('icon', value);
-
-        this.#wrap.className = `${value}`;
-    }
-    // #endregion
-    // ------- end -------
-
-    #init() {
-        this.icon = this.icon;
-    }
-
-    connectedCallback() {
-        this.#init()
-    }
-}
-
-if (!window.customElements.get("ea-icon")) {
-    window.customElements.define("ea-icon", EaIcon);
-}
+export class EaIcon extends HTMLElement{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`\n            <link rel="stylesheet" href="${new URL("../ea-icon/index.css",import.meta.url).href}">\n            <i class="ea-icon_wrap" part="container">\n                <slot></slot>\n            </i>\n        `,this.#t=t.querySelector(".ea-icon_wrap")}get icon(){return this.getAttribute("icon")||""}set icon(t){this.setAttribute("icon",t),this.#t.className=`${t}`}get color(){return this.getAttribute("color")||""}set color(t){this.setAttribute("color",t),this.#t.style.color=t}get size(){return this.getAttribute("size")||""}set size(t){this.setAttribute("size",t),this.#t.style.fontSize=`${t}px`}connectedCallback(){this.icon=this.icon,this.color=this.color,this.size=this.size}}window.customElements.get("ea-icon")||window.customElements.define("ea-icon",EaIcon);

package/components/ea-image/index.js

@@ -1,412 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-
-const stylesheet = `
-.ea-image_wrap.is-loading, .ea-image_wrap.is-error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f7fa;
-}
-.ea-image_wrap.is-error svg {
-  width: 20px;
-  height: 20px;
-}
-.ea-image_wrap img {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  user-zoom: scale;
-  object-fit: cover;
-  transition: rotate 0.3s, scale 0.3s;
-}
-.ea-image_wrap .ea-image_preview-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  opacity: 0;
-  transform: translateY(-1rem);
-  transition: opacity 0.3s, transform 0.3s;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-.ea-image_wrap .ea-image_preview-wrap.entry {
-  opacity: 1;
-  transform: translateY(0);
-}
-.ea-image_wrap .ea-image_preview-wrap .ea-icon-close {
-  position: absolute;
-  right: 40px;
-  top: 40px;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  font-size: 24px;
-  line-height: 36px;
-  border-radius: 50%;
-  color: #fff;
-  background-color: #606266;
-  text-align: center;
-}
-.ea-image_wrap .ea-image_preview-wrap img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.ea-image_wrap .ea-image_preview-tools {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  padding: 0.5rem 1rem;
-  user-select: none;
-  border-radius: 999px;
-  transform: translateX(-50%);
-  background-color: rgba(96, 98, 102, 0.568627451);
-  color: #fff;
-}
-.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom,
-.ea-image_wrap .ea-image_preview-tools .ea-icon-rotate {
-  width: 2rem;
-  text-align: center;
-  cursor: pointer;
-  margin: 0 1rem;
-}
-.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom {
-  font-size: 2rem;
-}
-.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom-in {
-  font-size: 1.75rem;
-}
-.ea-image_wrap .ea-image_preview-tools .ea-icon-rotate {
-  font-size: 1.5rem;
-}
-`;
-
-const errorImage = `
-    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        <path fill="#fff" d="M15 20h70v60H15z" />
-        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
-        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
-        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
-    </svg>
-`;
-
-export class EaImage extends Base {
-    #wrap;
-
-    #img;
-    #imgSlot;
-
-    #previewWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-image_wrap';
-
-        const imgSlot = createSlotElement('placeholder');
-        const img = createElement('img', 'ea-image', [imgSlot]);
-        wrap.appendChild(img);
-
-        this.#wrap = wrap;
-        this.#img = img;
-        this.#imgSlot = imgSlot;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- src 图片的路径 -------
-    // #region
-    get src() {
-        return this.getAttribute('src') || "";
-    }
-
-    set src(src) {
-        this.setAttribute('src', src);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- width 图片宽度 -------
-    // #region
-    get width() {
-        return this.getAttribute('width') || "100px";
-    }
-
-    set width(value) {
-        this.setAttribute('width', value);
-
-        this.#wrap.style.width = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- height 图片高度 -------
-    // #region
-    get height() {
-        return this.getAttribute('height') || "100px";
-    }
-
-    set height(value) {
-        this.setAttribute('height', value);
-
-        this.#wrap.style.height = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- alt 图片描述 -------
-    // #region
-    get alt() {
-        return this.getAttribute('alt') || "";
-    }
-
-    set alt(value) {
-        this.setAttribute('alt', value);
-
-        this.#img.alt = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- fit 图片缩放模式 -------
-    // #region
-    get fit() {
-        return this.getAttribute('fit') || "cover";
-    }
-
-    set fit(value) {
-        this.setAttribute('fit', value);
-
-        this.#img.style.objectFit = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- lazy 图片懒加载 -------
-    // #region
-    get lazy() {
-        return this.getAttrBoolean('lazy');
-    }
-
-    set lazy(value) {
-        this.setAttribute('lazy', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- preview 大图预览 -------
-    // #region
-    get preview() {
-        return this.getAttrBoolean('preview');
-    }
-
-    set preview(value) {
-        this.setAttribute('preview', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleImageLoad(src, isLazy = false) {
-        const image = new Image();
-
-        if (isLazy) {
-            const observer = new IntersectionObserver((entries) => {
-                if (entries[0].intersectionRatio <= 0) return;
-
-                image.src = src;
-                observer.disconnect();
-            });
-
-            observer.observe(this.#wrap);
-        } else {
-            image.src = src;
-        }
-
-        image.onload = () => {
-            this.#img.setAttribute('src', src);
-            this.#imgSlot.innerHTML = "";
-
-            this.dispatchEvent(new CustomEvent('load', { detail: { src } }));
-        };
-
-        image.onerror = () => {
-            this.#wrap.innerHTML = errorImage;
-            this.#wrap.classList.add('is-error');
-            this.#imgSlot.innerHTML = "";
-
-            this.dispatchEvent(new CustomEvent('error', { detail: { src } }));
-        };
-    }
-
-    #handlePreviewDisplay(wrap) {
-        wrap.classList.remove('entry');
-
-        wrap.addEventListener('transitionend', () => {
-            wrap.remove();
-            document.body.style.overflow = 'auto';
-        })
-    }
-
-    /**
-     * 创建一个图片预览的关闭按钮
-     * 
-     * @returns {HTMLElement} 返回创建的关闭按钮元素
-     */
-    #createCloseBtn(wrap) {
-        // 创建一个span元素，并设置其类名为'ea-icon-close'，用于表示一个关闭图标
-        const closeBtn = createElement('span', 'ea-icon-close');
-
-        // 设置按钮的内联文本为"x"，作为关闭符号
-        closeBtn.innerText = "x";
-
-        // 为按钮添加点击事件监听器，当按钮被点击时，调用#handlePreviewDisplay处理函数
-        closeBtn.addEventListener('click', () => {
-            this.#handlePreviewDisplay(wrap);
-        });
-
-        // 返回创建的关闭按钮元素
-        return closeBtn;
-    }
-
-    /**
-     * 创建一个图片预览的关闭按钮
-     * 
-     * @param {HTMLElement} img 图片元素
-     * @returns {HTMLElement} 返回创建的关闭按钮元素
-     */
-    #createPreviewTools(img) {
-        const zoomInBtn = createElement('span', 'ea-icon-zoom ea-icon-zoom-in');
-        zoomInBtn.innerText = "+";
-        zoomInBtn.addEventListener('click', () => {
-            img.style.scale = img.style.scale ? Number(img.style.scale) + 0.2 : 1.2;
-        });
-
-        const zoomOutBtn = createElement('span', 'ea-icon-zoom ea-icon-zoom-out');
-        zoomOutBtn.innerText = "-";
-        zoomOutBtn.addEventListener('click', () => {
-            img.style.scale = img.style.scale ? Number(img.style.scale) - 0.2 : 0.8;
-        });
-
-        const rotateLeft = createElement('span', 'ea-icon-rotate ea-icon-rotate-left');
-        rotateLeft.innerText = "↺";
-        rotateLeft.addEventListener('click', () => {
-            img.style.rotate = (img.style.rotate ? Number(img.style.rotate.split('deg')[0]) - 90 : -90) + "deg";
-        });
-
-        const rotateRight = createElement('span', 'ea-icon-rotate ea-icon-rotate-right');
-        rotateRight.innerText = "↻";
-        rotateRight.addEventListener('click', () => {
-            img.style.rotate = (img.style.rotate ? Number(img.style.rotate.split('deg')[0]) + 90 : 90) + "deg";
-        });
-
-        const toolsWrap = createElement('div', 'ea-image_preview-tools', [zoomInBtn, zoomOutBtn, rotateLeft, rotateRight]);
-
-        return toolsWrap;
-    }
-
-    /**
-     * 构建图片预览工具
-     * @param {HTMLElement} img 图片元素
-     */
-    #handleImageDrag(wrap, img) {
-        let startX = 0;
-        let startY = 0;
-
-        function handleMouseMove(e) {
-            const { clientX, clientY } = e;
-
-            img.style.marginLeft = `${clientX - startX}px`;
-            img.style.marginTop = `${clientY - startY}px`;
-        }
-
-        img.addEventListener('dragstart', (e) => {
-            e.preventDefault();
-        });
-
-        img.addEventListener('mousedown', (e) => {
-            startX = e.clientX;
-            startY = e.clientY;
-
-            img.addEventListener('mousemove', handleMouseMove);
-
-            img.addEventListener('mouseup', () => {
-                img.removeEventListener('mousemove', handleMouseMove);
-            });
-        });
-    }
-
-    /**
-     * 处理图片预览功能。
-     * 当isPreview参数为true时，为图片添加点击事件监听器，以实现预览功能。
-     * 预览功能包括：克隆图片元素、设置图片样式、处理图片拖动、创建关闭按钮和工具栏、以及隐藏滚动条。
-     * @param {boolean} isPreview - 是否开启图片预览功能。
-     */
-    #handleImagePreview(isPreview) {
-        if (isPreview) {
-            this.#img.addEventListener('click', () => {
-                // 克隆图片元素以用于预览，并设置图片的object-fit属性为contain。
-                const img = this.#img.cloneNode(true);
-                img.style.objectFit = "contain";
-
-                // 创建预览包装元素，并将克隆的图片添加到其中。
-                const wrap = createElement('div', 'ea-image_preview-wrap', [img]);
-                this.#wrap.appendChild(wrap);
-
-                // 创建并添加关闭按钮到预览窗口。
-                const closeBtn = this.#createCloseBtn(wrap);
-                wrap.appendChild(closeBtn);
-
-                // 创建并添加预览工具栏到预览窗口。
-                const toolkit = this.#createPreviewTools(img, wrap);
-                wrap.appendChild(toolkit);
-
-                // 延迟20毫秒后添加动画入口类，以平滑地显示预览窗口。
-                setTimeout(() => {
-                    wrap.classList.add('entry');
-                }, 20)
-
-                // 初始化图片拖动功能。
-                this.#handleImageDrag(wrap, img);
-
-                // 隐藏页面滚动条，以提供更好的预览体验。
-                document.body.style.overflow = 'hidden';
-            });
-        }
-    }
-
-    init() {
-        const that = this;
-
-        this.width = this.width;
-        this.height = this.height;
-        this.fit = this.fit;
-        this.alt = this.alt;
-
-        this.lazy = this.lazy;
-        this.src = this.src;
-
-        this.preview = this.preview;
-
-        this.#handleImageLoad(this.src, this.lazy);
-        this.#handleImagePreview(this.preview);
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-image')) {
-    customElements.define('ea-image', EaImage);
-}
+import Base from"../Base.js";import{errorImage}from"./src/assets/errorImage.js";import{stylesheet}from"./src/style/stylesheet.js";import{initImagePreview}from"./src/utils/createPreviewTools.js";export class EaImage extends Base{#t;#e;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-image_wrap' part='container'>\n                <img part='image' class='ea-image' />\n                <slot name='placeholder'></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-image_wrap"),this.#e=t.querySelector(".ea-image"),this.#i=t.querySelector('slot[name="placeholder"]'),this.build(t,stylesheet)}get src(){return this.getAttribute("src")||""}set src(t){this.setAttribute("src",t)}get width(){return this.getAttribute("width")||"100px"}set width(t){this.setAttribute("width",t),this.#t.style.width=t}get height(){return this.getAttribute("height")||"100px"}set height(t){this.setAttribute("height",t),this.#t.style.height=t}get alt(){return this.getAttribute("alt")||""}set alt(t){this.setAttribute("alt",t),this.#e.alt=t}get fit(){return this.getAttribute("fit")||"cover"}set fit(t){this.setAttribute("fit",t),this.#e.style.objectFit=t}get lazy(){return this.getAttrBoolean("lazy")}set lazy(t){this.setAttribute("lazy",t)}get preview(){return this.getAttrBoolean("preview")}set preview(t){this.setAttribute("preview",t)}#s(){const t=new Image;if(this.lazy){const e=new IntersectionObserver((i=>{i[0].intersectionRatio<=0||(t.src=this.src,e.disconnect())}));e.observe(this.#t)}else t.src=this.src;t.onload=()=>{this.#e.setAttribute("src",this.src),this.#i.remove(),this.dispatchEvent(new CustomEvent("load",{detail:{src:this.src}}))},t.onerror=()=>{this.#t.innerHTML=errorImage,this.#t.classList.add("is-error"),this.#i.remove(),this.dispatchEvent(new CustomEvent("error",{detail:{src:this.src}}))}}connectedCallback(){this.width=this.width,this.height=this.height,this.fit=this.fit,this.alt=this.alt,this.lazy=this.lazy,this.src=this.src,this.preview=this.preview,initImagePreview(this.#t,this.#e,this.preview),this.#s()}}customElements.get("ea-image")||customElements.define("ea-image",EaImage);

package/components/ea-image/src/assets/errorImage.js

@@ -0,0 +1 @@
+export const errorImage='\n    <svg id="errorImage" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <path fill="#fff" d="M15 20h70v60H15z" />\n        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />\n        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />\n        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />\n    </svg>\n';

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-image_wrap.is-error svg {\n  width: 20px;\n  height: 20px;\n}\n.ea-image_wrap img {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  user-zoom: scale;\n  object-fit: cover;\n  transition: rotate 0.3s, scale 0.3s;\n}\n.ea-image_wrap .ea-image_preview-wrap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 999;\n  opacity: 0;\n  transform: translateY(-1rem);\n  transition: opacity 0.3s, transform 0.3s;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.ea-image_wrap .ea-image_preview-wrap.entry {\n  opacity: 1;\n  transform: translateY(0);\n}\n.ea-image_wrap .ea-image_preview-wrap .ea-icon-close {\n  position: absolute;\n  right: 40px;\n  top: 40px;\n  cursor: pointer;\n  width: 40px;\n  height: 40px;\n  font-size: 24px;\n  line-height: 36px;\n  border-radius: 50%;\n  color: #fff;\n  background-color: #606266;\n  text-align: center;\n}\n.ea-image_wrap .ea-image_preview-wrap img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ea-image_wrap .ea-image_preview-tools {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  position: absolute;\n  bottom: 20px;\n  left: 50%;\n  padding: 0.5rem 1rem;\n  user-select: none;\n  border-radius: 999px;\n  transform: translateX(-50%);\n  background-color: rgba(96, 98, 102, 0.568627451);\n  color: #fff;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom,\n.ea-image_wrap .ea-image_preview-tools .ea-icon-rotate {\n  width: 2rem;\n  text-align: center;\n  cursor: pointer;\n  margin: 0 1rem;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom {\n  font-size: 2rem;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom-in {\n  font-size: 1.75rem;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-rotate {\n  font-size: 1.5rem;\n}\n";

package/components/ea-image/src/utils/createPreviewTools.js

@@ -0,0 +1 @@
+import{createElement}from"../../../../utils/createElement.js";function handlePreviewDisplay(e){e.classList.remove("entry"),e.addEventListener("transitionend",(()=>{e.remove(),document.body.style.overflow="auto"}))}function createCloseBtn(e){const t=createElement("span","ea-icon-close");return t.innerText="x",t.addEventListener("click",(()=>{handlePreviewDisplay(e)})),t}function handleImageDrag(e,t){let n=0,a=0;function o(e){const{clientX:o,clientY:s}=e;t.style.marginLeft=o-n+"px",t.style.marginTop=s-a+"px"}t.addEventListener("dragstart",(e=>{e.preventDefault()})),t.addEventListener("mousedown",(e=>{n=e.clientX,a=e.clientY,t.addEventListener("mousemove",o),t.addEventListener("mouseup",(()=>{t.removeEventListener("mousemove",o)}))}))}function createPreviewTools(e){const t=createElement("div","ea-image_preview-tools");t.innerHTML='\n        <span class="ea-icon-zoom ea-icon-zoom-in">+</span>\n        <span class="ea-icon-zoom ea-icon-zoom-out">-</span>\n        <span class="ea-icon-rotate ea-icon-rotate-left">↺</span>\n        <span class="ea-icon-rotate ea-icon-rotate-right">↻</span>\n    ';t.querySelector(".ea-icon-zoom-in").addEventListener("click",(()=>{e.style.scale=e.style.scale?Number(e.style.scale)+.2:1.2}));t.querySelector(".ea-icon-zoom-out").addEventListener("click",(()=>{e.style.scale=e.style.scale?Number(e.style.scale)-.2:.8}));t.querySelector(".ea-icon-rotate-left").addEventListener("click",(()=>{e.style.rotate=(e.style.rotate?Number(e.style.rotate.split("deg")[0])-90:-90)+"deg"}));return t.querySelector(".ea-icon-rotate-right").addEventListener("click",(()=>{e.style.rotate=(e.style.rotate?Number(e.style.rotate.split("deg")[0])+90:90)+"deg"})),t}export function initImagePreview(e,t,n){n&&t.addEventListener("click",(()=>{(t=t.cloneNode(!0)).style.objectFit="contain";const n=createElement("div","ea-image_preview-wrap",[t]);e.appendChild(n);const a=createCloseBtn(n);n.appendChild(a);const o=createPreviewTools(t,n);n.appendChild(o),setTimeout((()=>{n.classList.add("entry")}),20),handleImageDrag(n,t),document.body.style.overflow="hidden"}))}

package/components/ea-infinite-scroll/index.js

@@ -1,170 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-
-const stylesheet = `
-`;
-
-export class EaInfiniteScroll extends Base {
-    #wrap;
-
-    #loadingSlot;
-
-    #noMoreSlot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-infinite_wrap';
-        wrap.part = "wrap";
-
-        const slot = createSlotElement("");
-        wrap.appendChild(slot);
-
-        this.#wrap = wrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-
-        const loadingSlot = createSlotElement("loading");
-        loadingSlot.style.display = "none";
-        this.shadowRoot.appendChild(loadingSlot);
-
-        const noMoreSlot = createSlotElement("noMore");
-        noMoreSlot.style.display = "none";
-        this.shadowRoot.appendChild(noMoreSlot);
-
-        this.#loadingSlot = loadingSlot;
-        this.#noMoreSlot = noMoreSlot;
-    }
-
-    // ------- delay 节流时延, 单位为ms -------
-    // #region
-    get delay() {
-        return this.getAttrNumber('delay') || 200;
-    }
-
-    set delay(value) {
-        this.setAttribute('delay', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- loading 是否在加载时显示加载状态 -------
-    // #region
-    get loading() {
-        return this.getAttrBoolean('loading');
-    }
-
-    set loading(value) {
-        if (value === undefined) return;
-
-        this.setAttribute('loading', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 是否禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled') || false;
-    }
-
-    set disabled(value) {
-        this.setAttribute('disabled', value);
-
-        if (value) this.#noMoreSlot.style.display = 'block';
-    }
-    // #endregion
-    // ------- end -------
-
-    #getLastChild() {
-        const items = this.querySelectorAll('ea-infinite-item');
-        return items[items.length - 1];
-    }
-
-    #initBottomReachedObserver(delay) {
-        if (this.disabled) return;
-
-        let item = this.#getLastChild();
-        let timer = null;
-
-        const observer = new IntersectionObserver((entries) => {
-            const { isIntersecting } = entries[0];
-            if (this.disabled) {
-                observer.disconnect();
-                return;
-            }
-
-            if (!isIntersecting || timer) return;
-
-            if (this.loading) this.#loadingSlot.style.display = 'block';
-
-            observer.unobserve(item);
-
-            timer = setTimeout(() => {
-                this.dispatchEvent(new CustomEvent('bottomReached'));
-
-                clearTimeout(timer);
-                timer = null;
-
-                item = this.#getLastChild();
-                observer.observe(item);
-                this.#loadingSlot.style.display = 'none';
-
-            }, delay || 200);
-        }, { root: this.parentNode, rootMargin: '10px', threshold: 0.1 });
-
-        // 初始观察
-        observer.observe(item);
-    }
-
-    init() {
-        const that = this;
-
-        this.delay = this.delay;
-
-        this.#initBottomReachedObserver(this.delay);
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-infinite')) {
-    customElements.define('ea-infinite', EaInfiniteScroll);
-}
-
-export class EaInfiniteScrollItem extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-infinite-item_wrap';
-
-        const slot = createSlotElement("");
-        wrap.appendChild(slot);
-
-        this.#wrap = wrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    init() {
-        const that = this;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-infinite-item')) {
-    customElements.define('ea-infinite-item', EaInfiniteScrollItem);
-}
+import Base from"../Base.js";import"../ea-infinite-scroll-item/index.js";export class EaInfiniteScroll extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-infinite_wrap' part='container'>\n                <slot></slot>\n            </div>\n            <slot name='loading' style=\"display: none;\"></slot>\n            <slot name='noMore' style=\"display: none;\"></slot>\n        ",this.#t=t.querySelector('slot[name="loading"]'),this.#e=t.querySelector('slot[name="noMore"]')}get delay(){return this.getAttrNumber("delay")||200}set delay(t){this.setAttribute("delay",t)}get loading(){return this.getAttrBoolean("loading")}set loading(t){void 0!==t&&this.setAttribute("loading",t)}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(t){this.setAttribute("disabled",t),t&&(this.#e.style.display="block")}#i(){const t=this.querySelectorAll("ea-infinite-item");return t[t.length-1]}#s(){if(this.disabled)return;let t=this.#i(),e=null;const i=new IntersectionObserver((s=>{const{isIntersecting:o}=s[0];this.disabled?i.disconnect():o&&!e&&(this.loading&&(this.#t.style.display="block"),i.unobserve(t),e=setTimeout((()=>{this.dispatchEvent(new CustomEvent("bottomReached")),clearTimeout(e),e=null,t=this.#i(),i.observe(t),this.#t.style.display="none"}),this.delay||200))}),{root:this.parentNode,rootMargin:"10px",threshold:.1});i.observe(t)}connectedCallback(){this.delay=this.delay,this.#s()}}customElements.get("ea-infinite")||customElements.define("ea-infinite",EaInfiniteScroll);

package/components/ea-infinite-scroll-item/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";export class EaInfiniteScrollItem extends Base{constructor(){super();this.attachShadow({mode:"open"}).innerHTML="\n            <div class='ea-infinite-item_wrap' part='container'>\n                <slot></slot>\n            </div>\n        "}}customElements.get("ea-infinite-item")||customElements.define("ea-infinite-item",EaInfiniteScrollItem);