easy-component-ui 2.0.5 → 2.1.0

package/components/ea-icon/index.js

@@ -1 +1,84 @@
-export class EaIcon extends HTMLElement{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easy-component-ui/components/ea-icon/css/animation.css">\n            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easy-component-ui/components/ea-icon/css/fontello.css">\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);
+
+export class EaIcon extends HTMLElement {
+    #wrap;
+    #fontCSS;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <link id="fontello-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easy-component-ui/components/ea-icon/css/fontello.css">
+            <i class="ea-icon_wrap" part="container">
+                <slot></slot>
+            </i>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-icon_wrap');
+        this.#fontCSS = shadowRoot.querySelector('#fontello-stylesheet');
+
+        document.addEventListener('configChanged', (e) => {
+            this.#updateStyles(e.detail);
+        });
+    }
+
+    // ------- icon 图标类名 -------
+    // #region
+    get icon() {
+        return this.getAttribute('icon') || "";
+    }
+
+    set icon(value) {
+        this.setAttribute('icon', value);
+
+        this.#wrap.className = `${value}`;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- color 颜色 -------
+    // #region
+    get color() {
+        return this.getAttribute('color') || "";
+    }
+
+    set color(value) {
+        this.setAttribute('color', value);
+
+        this.#wrap.style.color = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- size 大小 -------
+    // #region
+    get size() {
+        return this.getAttribute('size') || "";
+    }
+
+    set size(value) {
+        this.setAttribute('size', value);
+
+        this.#wrap.style.fontSize = `${value}px`;
+    }
+    // #endregion
+    // ------- end -------
+
+    #updateStyles(newConfig) {
+        this.#fontCSS.href = newConfig.fontelloCSS;
+    }
+
+    connectedCallback() {
+        this.icon = this.icon;
+
+        this.color = this.color;
+
+        this.size = this.size;
+
+        document.dispatchEvent(new CustomEvent("ea-icon-ready"))
+    }
+}
+
+if (!window.customElements.get("ea-icon")) {
+    window.customElements.define("ea-icon", EaIcon);
+}

package/components/ea-image/index.css

@@ -0,0 +1,84 @@
+.ea-image_wrap {
+  align-content: center;
+  text-align: center;
+}
+.ea-image_wrap.is-error {
+  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;
+}

package/components/ea-image/index.js

@@ -1 +1,182 @@
-import Base from"../Base.js";import"../ea-icon/index.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                <div class='ea-image_placeholder-wrap' part='placeholder-wrap'>\n                    <slot name='placeholder'></slot>\n                </div>\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){t&&this.setAttribute("lazy",t)}get preview(){return this.getAttrBoolean("preview")}set preview(t){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);
+import Base from '../Base.js';
+
+import "../ea-icon/index.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 {
+    #wrap;
+
+    #img;
+    #imgSlot;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-image_wrap' part='container'>
+                <img part='image' class='ea-image' />
+                <div class='ea-image_placeholder-wrap' part='placeholder-wrap'>
+                    <slot name='placeholder'></slot>
+                </div>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-image_wrap');
+        this.#img = shadowRoot.querySelector('.ea-image');
+        this.#imgSlot = shadowRoot.querySelector('slot[name="placeholder"]');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- 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) {
+        if (!value) return;
+
+        this.setAttribute('lazy', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- preview 大图预览 -------
+    // #region
+    get preview() {
+        return this.getAttrBoolean('preview');
+    }
+
+    set preview(value) {
+        if (!value) return;
+        this.setAttribute('preview', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    #initImageLoadEvent() {
+        const image = new Image();
+
+        if (this.lazy) {
+            const observer = new IntersectionObserver((entries) => {
+                if (entries[0].intersectionRatio <= 0) return;
+
+                image.src = this.src;
+                observer.disconnect();
+            });
+
+            observer.observe(this.#wrap);
+        } else {
+            image.src = this.src;
+        }
+
+        image.onload = () => {
+            this.#img.setAttribute('src', this.src);
+            this.#imgSlot.remove();
+
+            this.dispatchEvent(new CustomEvent('load', { detail: { src: this.src } }));
+        };
+
+        image.onerror = () => {
+            this.#wrap.innerHTML = errorImage;
+            this.#wrap.classList.add('is-error');
+            this.#imgSlot.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.#wrap, this.#img, this.preview);
+
+        this.#initImageLoadEvent();
+    }
+}
+
+if (!customElements.get('ea-image')) {
+    customElements.define('ea-image', EaImage);
+}

package/components/ea-image/index.scss

@@ -0,0 +1,111 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-image_wrap {
+  align-content: center;
+  text-align: center;
+  &.is-error {
+    background-color: #f5f7fa;
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    user-zoom: scale;
+
+    object-fit: cover;
+    transition: rotate 0.3s, scale 0.3s;
+  }
+
+  .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);
+
+    &.entry {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .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;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: contain;
+    }
+  }
+
+  .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: #60626691;
+    color: #fff;
+
+    .ea-icon-zoom,
+    .ea-icon-rotate {
+      width: 2rem;
+      text-align: center;
+      cursor: pointer;
+
+      margin: 0 1rem;
+    }
+
+    .ea-icon-zoom {
+      font-size: 2rem;
+    }
+
+    .ea-icon-zoom-in {
+      font-size: 1.75rem;
+    }
+
+    .ea-icon-rotate {
+      font-size: 1.5rem;
+    }
+  }
+}

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

@@ -1 +1,9 @@
-export const errorImage='\n    <svg id="errorImage" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="error-image">\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';
+export const errorImage = `
+    <svg id="errorImage" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="error-image">
+        <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>
+`;

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

@@ -0,0 +1,7 @@
+<svg id="errorImage" 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>

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

@@ -1 +1,86 @@
-export const stylesheet="\n.ea-image_wrap {\n  align-content: center;\n  text-align: center;\n}\n.ea-image_wrap.is-error {\n  background-color: #f5f7fa;\n}\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";
+export const stylesheet = `
+.ea-image_wrap {
+  align-content: center;
+  text-align: center;
+}
+.ea-image_wrap.is-error {
+  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;
+}
+`;