easy-component-ui 2.0.5 → 2.1.0

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

@@ -1 +1,140 @@
-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("ea-icon","ea-icon-close");return t.part="close-btn",t.icon="icon-cancel",t.addEventListener("click",(()=>{handlePreviewDisplay(e)})),t}function handleImageDrag(e,t){let n=0,a=0;function o(e){const{clientX:o,clientY:r}=e;t.style.marginLeft=o-n+"px",t.style.marginTop=r-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.part="tools-wrap",t.innerHTML='\n        <span class="ea-icon-zoom ea-icon-zoom-in" part="zoom-in">+</span>\n        <span class="ea-icon-zoom ea-icon-zoom-out" part="zoom-out">-</span>\n        <span class="ea-icon-rotate ea-icon-rotate-left" part="rotate-left">↺</span>\n        <span class="ea-icon-rotate ea-icon-rotate-right" part="rotate-righ">↻</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]);n.part="preview-wrap",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"}))}
+
+
+import { createElement } from "../../../../utils/createElement.js";
+
+function handlePreviewDisplay(wrap) {
+    wrap.classList.remove('entry');
+
+    wrap.addEventListener('transitionend', () => {
+        wrap.remove();
+        document.body.style.overflow = 'auto';
+    })
+}
+
+/**
+ * 创建一个图片预览的关闭按钮
+ * 
+ * @returns {HTMLElement} 返回创建的关闭按钮元素
+ */
+function createCloseBtn(wrap) {
+    const closeBtn = createElement('ea-icon', 'ea-icon-close');
+    closeBtn.part = 'close-btn';
+    closeBtn.icon = 'icon-cancel';
+
+    closeBtn.addEventListener('click', () => {
+        handlePreviewDisplay(wrap);
+    });
+
+    // 返回创建的关闭按钮元素
+    return closeBtn;
+}
+
+/**
+ * 构建图片预览工具
+ * @param {HTMLElement} img 图片元素
+ */
+function 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);
+        });
+    });
+}
+
+/**
+ * 创建一个图片预览的关闭按钮
+ * 
+ * @param {HTMLElement} img 图片元素
+ * @returns {HTMLElement} 返回创建的关闭按钮元素
+ */
+function createPreviewTools(img) {
+    const toolsWrap = createElement('div', 'ea-image_preview-tools');
+    toolsWrap.part = 'tools-wrap';
+    toolsWrap.innerHTML = `
+        <span class="ea-icon-zoom ea-icon-zoom-in" part="zoom-in">+</span>
+        <span class="ea-icon-zoom ea-icon-zoom-out" part="zoom-out">-</span>
+        <span class="ea-icon-rotate ea-icon-rotate-left" part="rotate-left">↺</span>
+        <span class="ea-icon-rotate ea-icon-rotate-right" part="rotate-righ">↻</span>
+    `;
+
+    const zoomInBtn = toolsWrap.querySelector('.ea-icon-zoom-in');
+    zoomInBtn.addEventListener('click', () => {
+        img.style.scale = img.style.scale ? Number(img.style.scale) + 0.2 : 1.2;
+    });
+
+    const zoomOutBtn = toolsWrap.querySelector('.ea-icon-zoom-out');
+    zoomOutBtn.addEventListener('click', () => {
+        img.style.scale = img.style.scale ? Number(img.style.scale) - 0.2 : 0.8;
+    });
+
+    const rotateLeft = toolsWrap.querySelector('.ea-icon-rotate-left');
+    rotateLeft.addEventListener('click', () => {
+        img.style.rotate = (img.style.rotate ? Number(img.style.rotate.split('deg')[0]) - 90 : -90) + "deg";
+    });
+
+    const rotateRight = toolsWrap.querySelector('.ea-icon-rotate-right');
+    rotateRight.addEventListener('click', () => {
+        img.style.rotate = (img.style.rotate ? Number(img.style.rotate.split('deg')[0]) + 90 : 90) + "deg";
+    });
+
+
+    return toolsWrap;
+}
+
+
+/**
+ * 处理图片预览功能。
+ * 当isPreview参数为true时，为图片添加点击事件监听器，以实现预览功能。
+ * 预览功能包括：克隆图片元素、设置图片样式、处理图片拖动、创建关闭按钮和工具栏、以及隐藏滚动条。
+ * @param {boolean} isPreview - 是否开启图片预览功能。
+ */
+export function initImagePreview(container, img, isPreview) {
+    if (isPreview) {
+        img.addEventListener('click', () => {
+            // 克隆图片元素以用于预览，并设置图片的object-fit属性为contain。
+            img = img.cloneNode(true);
+            img.style.objectFit = "contain";
+
+            // 创建预览包装元素，并将克隆的图片添加到其中。
+            const wrap = createElement('div', 'ea-image_preview-wrap', [img]);
+            wrap.part = 'preview-wrap';
+            container.appendChild(wrap);
+
+            // 创建并添加关闭按钮到预览窗口。
+            const closeBtn = createCloseBtn(wrap);
+            wrap.appendChild(closeBtn);
+
+            // 创建并添加预览工具栏到预览窗口。
+            const toolkit = createPreviewTools(img, wrap);
+            wrap.appendChild(toolkit);
+
+            // 延迟20毫秒后添加动画入口类，以平滑地显示预览窗口。
+            setTimeout(() => {
+                wrap.classList.add('entry');
+            }, 20)
+
+            handleImageDrag(wrap, img);
+
+            document.body.style.overflow = 'hidden';
+        });
+    }
+}

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

@@ -1 +1,119 @@
-import Base from"../Base.js";import"../ea-icon/index.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            <div class='ea-infinite_loading-wrap' part='loading-wrap'>\n                <slot name='loading' style=\"display: none;\"></slot>\n            </div>\n            <div class='ea-infinite_noMore-wrap' part='noMore-wrap'>\n                <slot name='noMore' style=\"display: none;\"></slot>\n            </div>\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]}#n(){if(this.disabled)return;let t=this.#i(),e=null;const i=new IntersectionObserver((n=>{const{isIntersecting:o}=n[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.#n()}}customElements.get("ea-infinite")||customElements.define("ea-infinite",EaInfiniteScroll);
+import Base from '../Base.js';
+import "../ea-icon/index.js"
+import "../ea-infinite-scroll-item/index.js"
+
+export class EaInfiniteScroll extends Base {
+    #loadingSlot;
+
+    #noMoreSlot;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-infinite_wrap' part='container'>
+                <slot></slot>
+            </div>
+            <div class='ea-infinite_loading-wrap' part='loading-wrap'>
+                <slot name='loading' style="display: none;"></slot>
+            </div>
+            <div class='ea-infinite_noMore-wrap' part='noMore-wrap'>
+                <slot name='noMore' style="display: none;"></slot>
+            </div>
+        `;
+
+        this.#loadingSlot = shadowRoot.querySelector('slot[name="loading"]');
+        this.#noMoreSlot = shadowRoot.querySelector('slot[name="noMore"]');
+    }
+
+    // ------- 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() {
+        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';
+
+            }, this.delay || 200);
+        }, { root: this.parentNode, rootMargin: '10px', threshold: 0.1 });
+
+        // 初始观察
+        observer.observe(item);
+    }
+    connectedCallback() {
+        this.delay = this.delay;
+
+        this.#initBottomReachedObserver();
+    }
+}
+
+if (!customElements.get('ea-infinite')) {
+    customElements.define('ea-infinite', EaInfiniteScroll);
+}

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

@@ -1 +1,18 @@
-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);
+import Base from '../Base.js';
+
+export class EaInfiniteScrollItem extends Base {
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-infinite-item_wrap' part='container'>
+                <slot></slot>
+            </div>
+        `;
+    }
+}
+
+if (!customElements.get('ea-infinite-item')) {
+    customElements.define('ea-infinite-item', EaInfiniteScrollItem);
+}

package/components/ea-input/index.css

@@ -0,0 +1,139 @@
+.ea-input_container {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.ea-input_container .ea-input_wrap {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner {
+  flex: 1;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: 1px solid #dcdfe6;
+  outline: 0;
+  border-radius: 3px;
+  padding: 0.5rem;
+  width: 100%;
+  line-height: 0.8;
+  font-size: 0.8rem;
+  scrollbar-width: none;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner:focus {
+  border-color: #409eff;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner::placeholder {
+  color: #c0c4cc;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner[aria-invalid=true] {
+  border-color: #f56c6c;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner[disabled] {
+  background-color: #eeeeee;
+  color: #c0c4cc;
+}
+.ea-input_container .ea-input_wrap .fix-icon {
+  position: absolute;
+  top: 50%;
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+}
+.ea-input_container .ea-input_wrap.prefix .ea-input_inner {
+  padding-left: 1.75rem;
+}
+.ea-input_container .ea-input_wrap.prefix .prefix-icon {
+  left: 1rem;
+  transform: translate(-50%, -50%);
+}
+.ea-input_container .ea-input_wrap.surfix .ea-input_inner {
+  padding-right: 1.75rem;
+}
+.ea-input_container .ea-input_wrap.surfix .surfix-icon {
+  right: 1rem;
+  transform: translate(50%, -50%);
+}
+.ea-input_container .ea-input_wrap .ea-input_prepend-slot,
+.ea-input_container .ea-input_wrap .ea-input_append-slot {
+  height: 100%;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0;
+  unicode-bidi: unset;
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 3;
+  top: calc(100% + 5px);
+  left: 0;
+  transform-origin: top center;
+  transform: scaleY(0);
+  padding: 0.5rem 0;
+  width: 100%;
+  max-height: 10rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  background-color: white;
+  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap li {
+  padding: 0.5rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap li:hover {
+  background-color: #f5f7fa;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap .loading-icon {
+  display: none;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading li {
+  display: none;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading .loading-icon {
+  display: block;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.is-open {
+  transform: scaleY(1);
+}
+.ea-input_container .ea-input_wrap.word-limit {
+  border: 1px solid;
+  border-color: #dcdfe6;
+  border-radius: 3px;
+}
+.ea-input_container .ea-input_wrap.word-limit .ea-input_inner {
+  border: 0;
+}
+.ea-input_container .ea-input_wrap.word-limit .ea-input_word-limit {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  text-align: center;
+}
+.ea-input_container .ea-input_wrap.focus {
+  border-color: #409eff;
+}
+.ea-input_container .ea-input_wrap.with-transition {
+  transition: border 0.3s;
+}
+.ea-input_container .ea-input_wrap.with-transition .ea-input_inner {
+  transition: border 0.3s;
+}
+.ea-input_container .ea-input_wrap.with-transition \ .ea-input_suggestion-wrap {
+  transition: transform 0.3s;
+}