easy-component-ui 1.0.3 → 2.0.1

package/components/ea-avatar/index.js

@@ -1,277 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const stylesheet = `
-.ea-avatar_wrap .ea-avatar {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  color: #ffffff;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {
-  object-fit: fill;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {
-  object-fit: contain;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {
-  object-fit: cover;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {
-  object-fit: none;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {
-  object-fit: scale-down;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--normal {
-  width: 50px;
-  height: 50px;
-  line-height: 50px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--large {
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--medium {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--small {
-  width: 28px;
-  height: 28px;
-  line-height: 28px;
-}
-.ea-avatar_wrap .ea-avatar .ea-avatar--text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--circle {
-  border-radius: 50%;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--square {
-  border-radius: 5px;
-}
-.ea-avatar_wrap .ea-avatar .ea-avatar--img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-`;
-
-const defaultAvatar = `
-    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-            <clipPath id="a">
-                <path d="M0 40h90v45H0z" />
-            </clipPath>
-        </defs>
-        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        <circle cx="50" cy="35" r="20" fill="#fff" />
-        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />
-    </svg>
-`;
-
-const errorAvatar = `
-    <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>
-`;
-
-const iconAvatar = (icon) => {
-    return `
-        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        </svg>
-        <i class="fa ea-avatar--text ${icon}"></i>
-    `;
-}
-
-const textAvatar = (text) => {
-    return `
-        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        </svg>
-        <span class="ea-avatar--text">${text}</span>
-    `;
-}
-
-export class EaAvatar extends Base {
-    #wrap;
-
-    #textSlot;
-
-    #avatar;
-    #img;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-avatar_wrap';
-
-        const avatar = document.createElement('span');
-        avatar.className = 'ea-avatar';
-        avatar.innerHTML = defaultAvatar;
-        wrap.appendChild(avatar);
-
-        const slot = document.createElement('slot');
-        avatar.appendChild(slot);
-
-        const img = document.createElement('img');
-        avatar.appendChild(img);
-
-        this.#wrap = wrap;
-        this.#textSlot = slot;
-        this.#avatar = avatar;
-        this.#img = img;
-
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = new URL('../ea-icon/index.css', import.meta.url).href;
-        shadowRoot.appendChild(link);
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- size 图片大小 -------
-    // #region
-    get size() {
-        const sizeNumber = this.getAttrNumber('size');
-        const sizeString = this.getAttribute('size');
-
-        if (sizeNumber === 0 || !sizeNumber) {
-            return ['large', 'medium', 'small'].includes(sizeString) ? sizeString : 'normal';
-        }
-
-        return this.getAttrNumber('size');
-    }
-
-    set size(value) {
-        this.setAttribute('size', value);
-
-
-        if (typeof value === "number") {
-            this.#avatar.style.width = `${value}px`;
-            this.#avatar.style.height = `${value}px`;
-            this.#avatar.style.lineHeight = `${value}px`;
-        } else if (typeof value === "string") {
-            this.#avatar.classList.add(`ea-avatar--${value}`);
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- shape 图片形状 -------
-    // #region
-    get shape() {
-        const shape = this.getAttribute('shape');
-
-        return ['circle', 'square'].includes(shape) ? shape : 'circle';
-    }
-
-    set shape(value) {
-        this.setAttribute('shape', value);
-        this.#avatar.classList.add(`ea-avatar--${this.shape}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- src 图片链接 -------
-    // #region
-    get src() {
-        return this.getAttribute('src');
-    }
-
-    set src(value) {
-        if (!value) return;
-
-        const image = new Image();
-        image.src = value;
-
-        image.onload = () => {
-            this.setAttribute('src', value);
-            this.#avatar.innerHTML = `<img class="ea-avatar--img" src="${value}" alt="头像">`;
-        };
-
-        image.onerror = (e) => {
-            this.setAttribute('src', value);
-            this.#avatar.innerHTML = errorAvatar;
-
-            this.dispatchEvent(new CustomEvent('error', {
-                detail: {
-                    error: e,
-                },
-            }));
-        };
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- icon 图标 -------
-    // #region
-    get icon() {
-        return this.getAttribute('icon');
-    }
-
-    set icon(value) {
-        this.setAttribute('icon', value);
-
-        this.#avatar.innerHTML = iconAvatar(value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- fit 图片容器适应 -------
-    // #region
-    get fit() {
-        return this.getAttribute('fit') || 'cover';
-    }
-
-    set fit(value) {
-        this.setAttribute('fit', value);
-
-        this.#avatar.classList.add(`ea-avatar-fill--${value}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        const that = this;
-
-        this.size = this.size;
-
-        this.shape = this.shape;
-
-        this.src = this.src;
-
-        if (this.src) {
-            this.fit = this.fit;
-        }
-
-        if (!this.src && this.icon) {
-            this.icon = this.icon;
-        }
-
-        if (this.innerHTML !== "" && !this.icon && !this.src) {
-            this.#avatar.innerHTML = textAvatar(this.innerHTML);
-        }
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-avatar')) {
-    customElements.define('ea-avatar', EaAvatar);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{errorAvatar}from"./src/assets/errorAvatar.js";import{iconAvatar,textAvatar}from"./src/assets/iconAndTextAvatar.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaAvatar extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-avatar_wrap" part=\'container\'>\n                <span class="ea-avatar" part="avatar">\n                    <slot></slot>\n                </span>\n            </div>\n        ',this.#t=t.querySelector(".ea-avatar"),this.build(t,stylesheet)}get size(){const t=this.getAttrNumber("size"),s=this.getAttribute("size");return 0!==t&&t?this.getAttrNumber("size"):["large","medium","small"].includes(s)?s:"normal"}set size(t){this.setAttribute("size",t),"number"==typeof t?(this.#t.style.width=`${t}px`,this.#t.style.height=`${t}px`,this.#t.style.lineHeight=`${t}px`):"string"==typeof t&&this.#t.classList.add(`ea-avatar--${t}`)}get shape(){const t=this.getAttribute("shape");return["circle","square"].includes(t)?t:"circle"}set shape(t){this.setAttribute("shape",t),this.#t.classList.add(`ea-avatar--${this.shape}`)}get src(){return this.getAttribute("src")}set src(t){if(!t)return;this.setAttribute("src",t);const s=new Image;s.src=t,s.onload=()=>{this.#t.innerHTML=`<img class="ea-avatar--img" src="${t}" alt="头像">`},s.onerror=t=>{this.#t.innerHTML=errorAvatar,this.dispatchEvent(new CustomEvent("error",{detail:{error:t}}))}}get icon(){return this.getAttribute("icon")||""}set icon(t){this.setAttribute("icon",t),this.#t.innerHTML=iconAvatar(t)}get fit(){return this.getAttribute("fit")||"cover"}set fit(t){this.setAttribute("fit",t),this.#t.classList.add(`ea-avatar-fill--${t}`)}connectedCallback(){this.size=this.size,this.shape=this.shape,this.src=this.src,this.src&&(this.fit=this.fit),!this.src&&this.icon&&(this.icon=this.icon),""===this.innerHTML||this.icon||this.src||(this.#t.innerHTML=textAvatar(this.innerHTML))}}customElements.get("ea-avatar")||customElements.define("ea-avatar",EaAvatar);

package/components/ea-avatar/src/assets/defaultAvatar.js

@@ -0,0 +1 @@
+export const defaultAvatar='\n    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <defs>\n            <clipPath id="a">\n                <path d="M0 40h90v45H0z" />\n            </clipPath>\n        </defs>\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <circle cx="50" cy="35" r="20" fill="#fff" />\n        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />\n    </svg>\n';

package/components/ea-avatar/src/assets/errorAvatar.js

@@ -0,0 +1 @@
+export const errorAvatar='\n    <svg 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-avatar/src/assets/iconAndTextAvatar.js

@@ -0,0 +1 @@
+const background='\n<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n    <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n</svg>\n';export const iconAvatar=a=>`\n        ${background}\n        <ea-icon class="fa ea-avatar--text" icon="${a}"></ea-icon>\n    `;export const textAvatar=a=>`\n        ${background}\n        <span class="ea-avatar--text">${a}</span>\n    `;

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-avatar_wrap .ea-avatar {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  color: #ffffff;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {\n  object-fit: fill;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {\n  object-fit: contain;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {\n  object-fit: cover;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {\n  object-fit: none;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {\n  object-fit: scale-down;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--normal {\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--large {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--medium {\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--small {\n  width: 28px;\n  height: 28px;\n  line-height: 28px;\n}\n.ea-avatar_wrap .ea-avatar .ea-avatar--text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--circle {\n  border-radius: 50%;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--square {\n  border-radius: 5px;\n}\n.ea-avatar_wrap .ea-avatar .ea-avatar--img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n";

package/components/ea-backtop/index.js

@@ -1,232 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-import "../ea-icon/index.js"
-
-const stylesheet = `
-.ea-backtop_wrap {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  right: 40px;
-  bottom: 40px;
-  cursor: pointer;
-  background-color: #fff;
-  border-radius: 50%;
-  color: #409eff;
-  font-size: 14px;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
-  opacity: 1;
-  z-index: 5;
-  transition: opacity 0.3s ease-in-out;
-}
-`;
-
-export class EaBacktop extends Base {
-    #wrap;
-
-    #iconSlot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-backtop_wrap';
-        wrap.style.display = 'none';
-
-        const slot = createSlotElement('');
-        wrap.appendChild(slot);
-        this.#iconSlot = slot;
-
-        this.#wrap = wrap;
-        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- target 触发滚动的对象 -------
-    // #region
-    get target() {
-        return this.getAttribute('target');
-    }
-
-    set target(value) {
-        this.setAttribute('target', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- right 滚动按钮距离右边的距离 -------
-    // #region
-    get right() {
-        return this.getAttribute('right') || 40;
-    }
-
-    set right(value) {
-        this.setAttribute('right', value);
-
-        this.#wrap.style.right = value + 'px';
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- bottom 滚动按钮距离下边的距离 -------
-    // #region
-    get bottom() {
-        return this.getAttribute('bottom') || 40;
-    }
-
-    set bottom(value) {
-        this.setAttribute('bottom', value);
-
-        this.#wrap.style.bottom = value + 'px';
-    }
-    // #endregion
-    // ------- end ------- 
-
-    // ------- icon 图标类名 -------
-    // #region
-    get icon() {
-        return this.getAttribute('icon') || "icon-angle-up";
-    }
-
-    set icon(value) {
-        this.setAttribute('icon', value);
-
-        const icon = createElement('ea-icon');
-        icon.icon = value;
-        this.#iconSlot.innerHTML = "";
-        this.#iconSlot.appendChild(icon);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- visibility-height 滚动按钮显示和隐藏的触发条件 -------
-    // #region
-    get visibilityHeight() {
-        return this.getAttribute('visibility-height') || 200;
-    }
-
-    set visibilityHeight(value) {
-        this.setAttribute('visibility-height', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    /**
-     * 根据滚动位置控制返回顶部按钮的显示和隐藏。
-     * 
-     * 当页面滚动超过200像素时，显示返回顶部按钮，并在过渡结束后设置按钮为完全可见。
-     * 当页面滚动不超过200像素时，隐藏返回顶部按钮，并在过渡结束后将按钮的显示属性设置为none。
-     * 
-     * @param {*} scrollDom - 用于检测滚动位置的DOM元素。
-     * @param {number} scrollFlag - 页面滚动到指定距离时触发。
-     */
-    #handleBackTopBtnShow(scrollDom, scrollFlag) {
-        const that = this;
-
-        // 当滚动距离超过200像素时，显示返回顶部按钮
-        if (scrollDom.scrollTop > scrollFlag) {
-            this.#wrap.style.display = 'flex';
-            this.#wrap.ontransitionend = null;
-
-            // 延迟10毫秒后设置按钮的透明度为1，使其完全可见
-            setTimeout(() => {
-                this.#wrap.style.opacity = 1;
-            }, 10);
-        } else {
-            // 当滚动距离不超过200像素时，隐藏返回顶部按钮
-            this.#wrap.style.opacity = 0;
-
-            // 在过渡结束时，将按钮的显示属性设置为none
-            this.#wrap.ontransitionend = function () {
-                that.#wrap.style.display = 'none';
-            };
-        }
-    }
-
-    /**
-     * 根据目标名称获取滚动事件相关DOM元素。
-     * 
-     * 此函数用于确定应该监听哪个DOM元素的滚动事件。它可以是特定的DOM元素，或者是整个文档。
-     * 通过判断目标名称是否为空或未定义，来决定是获取整个文档还是指定的DOM元素。
-     * 
-     * @param {string} targetName - 目标元素的选择器字符串。如果为空或未定义，则监听整个文档。
-     * @returns {Object} 返回一个对象，包含两个属性：dom和scrollDom，它们都指向同一个被选中的DOM元素，或者如果未指定目标名称，则指向document对象。
-     */
-    #handleScrollEvent(targetName) {
-        // 保存当前上下文的引用
-        const that = this;
-
-        // 初始化dom和scrollDom变量为null
-        let dom = null;
-        let scrollDom = null;
-
-        // 判断目标名称是否为空或未定义
-        if (targetName === "null" || targetName === '' || targetName === null || targetName === undefined || targetName === 'undefined') {
-            // 如果是，设置dom和scrollDom为document对象
-            dom = document;
-            scrollDom = document.documentElement;
-        } else {
-            // 如果不是，通过目标名称查询DOM元素，并设置dom和scrollDom
-            dom = document.querySelector(targetName);
-            scrollDom = document.querySelector(targetName);
-        }
-
-        // 返回包含dom和scrollDom的对象
-        return { dom, scrollDom };
-    }
-
-    #initScrollBtn() {
-        const that = this;
-        const { dom, scrollDom } = this.#handleScrollEvent(this.target);
-
-        this.#handleBackTopBtnShow(scrollDom, this.visibilityHeight);
-
-        dom.addEventListener('scroll', function () {
-            that.#handleBackTopBtnShow(scrollDom, that.visibilityHeight);
-        });
-
-        this.#wrap.addEventListener('click', function () {
-            let step = 10;
-
-            let timer = setInterval(() => {
-                step += 5;
-                scrollDom.scrollTop -= step;
-
-                if (scrollDom.scrollTop <= 0) {
-                    scrollDom.scrollTop = 0;
-                    clearInterval(timer);
-                    timer = null;
-                }
-            }, 12);
-
-            this.dispatchEvent(new CustomEvent('backtop', {}));
-        });
-    }
-
-    init() {
-        const that = this;
-
-        this.target = this.target;
-        this.right = this.right;
-        this.bottom = this.bottom;
-        this.visibilityHeight = this.visibilityHeight;
-        this.icon = this.icon;
-
-        this.#initScrollBtn();
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-backtop')) {
-    customElements.define('ea-backtop', EaBacktop);
-}
+import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaBacktop extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class=\"ea-backtop_wrap\" part='container' style='display: none'>\n                <slot></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-backtop_wrap"),this.build(t,stylesheet)}get target(){return this.getAttribute("target")||""}set target(t){this.setAttribute("target",t)}get right(){return this.getAttribute("right")||"40px"}set right(t){this.setAttribute("right",t),this.#t.style.right=t}get bottom(){return this.getAttribute("bottom")||"40px"}set bottom(t){this.setAttribute("bottom",t),this.#t.style.bottom=t}get icon(){return this.getAttribute("icon")||"icon-angle-up"}set icon(t){this.setAttribute("icon",t),this.#t.innerHTML=`\n            <ea-icon icon="${t}" part='icon'></ea-icon>\n        `}get visibilityHeight(){return this.getAttribute("visibility-height")||200}set visibilityHeight(t){this.setAttribute("visibility-height",t)}#e(t){let e=null,i=null;return"null"===t||""===t||null==t||"undefined"===t?(e=document,i=document.documentElement):(e=document.querySelector(t),i=document.querySelector(t)),{dom:e,scrollDom:i}}#i(t){t.scrollTop>this.visibilityHeight?(this.#t.style.display="flex",this.#t.ontransitionend=null,timeout((()=>{this.#t.style.opacity=1}),10)):(this.#t.style.opacity=0,this.#t.ontransitionend=()=>{this.#t.style.display="none"})}#s(){const{dom:t,scrollDom:e}=this.#e(this.target);this.#i(e),t.addEventListener("scroll",(()=>{this.#i(e)})),this.#t.addEventListener("click",(function(){let t=10,i=setInterval((()=>{t+=5,e.scrollTop-=t,e.scrollTop<=0&&(e.scrollTop=0,clearInterval(i),i=null,this.dispatchEvent(new CustomEvent("reachedTop",{})))}),12);this.dispatchEvent(new CustomEvent("backtop",{}))}))}connectedCallback(){this.target=this.target,this.right=this.right,this.bottom=this.bottom,this.visibilityHeight=this.visibilityHeight,this.icon=this.icon,this.#s()}}customElements.get("ea-backtop")||customElements.define("ea-backtop",EaBacktop);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-backtop_wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  right: 40px;\n  bottom: 40px;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 50%;\n  color: #409eff;\n  font-size: 14px;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);\n  opacity: 1;\n  z-index: 5;\n  transition: opacity 0.3s ease-in-out;\n}\n";

package/components/ea-badge/index.js

@@ -1,160 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const stylesheet = `
-.ea-badge_wrap {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-}
-.ea-badge_wrap .ea-badge_content {
-  display: inline-block;
-  padding: 0 0.375rem;
-  border-radius: 0.625rem;
-  border: 1px solid #fff;
-  height: 1.125rem;
-  line-height: 1.125rem;
-  position: absolute;
-  right: 0.625rem;
-  top: 0;
-  transform: translate(100%, -50%);
-  color: #fff;
-  font-size: 0.75rem;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #f56c6c;
-}
-.ea-badge_wrap .ea-badge_content.primary {
-  background-color: #409eff;
-}
-.ea-badge_wrap .ea-badge_content.success {
-  background-color: #67c23a;
-}
-.ea-badge_wrap .ea-badge_content.warning {
-  background-color: #e6a23c;
-}
-.ea-badge_wrap .ea-badge_content.info {
-  background-color: #909399;
-}
-.ea-badge_wrap .ea-badge_content.dot {
-  right: 0.3125rem;
-  padding: 0;
-  border-radius: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
-}
-`;
-
-export class EaBadge extends Base {
-  #wrap;
-  #badgeWrap;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    const wrap = document.createElement('div');
-    wrap.className = 'ea-badge_wrap';
-
-    const slot = document.createElement('slot');
-    wrap.appendChild(slot);
-
-    const badgeWrap = document.createElement('sup');
-    badgeWrap.className = 'ea-badge_content';
-    wrap.appendChild(badgeWrap);
-
-    this.#wrap = wrap;
-    this.#badgeWrap = badgeWrap;
-
-    this.build(shadowRoot, stylesheet);
-    this.shadowRoot.appendChild(wrap);
-  }
-
-  // ------- value 徽章内的值 -------
-  // #region
-  get value() {
-    return this.getAttribute('value') || '';
-  }
-
-  set value(value) {
-    this.setAttribute('value', value);
-
-    this.#badgeWrap.innerHTML = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- type 样式类型 -------
-  // #region
-  get type() {
-    return this.getAttribute('type') || 'normal';
-  }
-
-  set type(value) {
-    this.setAttribute('type', value);
-
-    this.#badgeWrap.classList.add(value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- max 最大值 -------
-  // #region
-  get max() {
-    return this.getAttrNumber('max') || Infinity;
-  }
-
-  set max(value) {
-    if (value === Infinity) return;
-
-    value = parseInt(value);
-
-    this.setAttribute('max', value);
-
-    if (this.value > value) {
-      this.value = value + '+';
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- is-dot 是否为点状徽章 -------
-  // #region
-  get isDot() {
-    return this.getAttrBoolean('is-dot') || false;
-  }
-
-  set isDot(value) {
-    this.toggleAttr('is-dot', value);
-
-    this.#badgeWrap.innerText = value ? '' : this.value;
-    this.#badgeWrap.classList.toggle('dot', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  init() {
-    const that = this;
-
-    this.value = this.value;
-
-    this.type = this.type;
-
-    this.max = this.max;
-
-    this.isDot = this.isDot;
-
-    try {
-      const button = this.querySelector('ea-button');
-      if (button) button.style.setProperty('--margin-right', '0');
-    } catch (error) { }
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-}
-
-if (!customElements.get('ea-badge')) {
-  customElements.define('ea-badge', EaBadge);
-}
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaBadge extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n        <div class=\"ea-badge_wrap\" part='container'>\n            <slot></slot>\n            <sup class=\"ea-badge_content\" part='content'></sup>\n        </div>\n    ",this.#t=t.querySelector(".ea-badge_wrap"),this.#e=t.querySelector(".ea-badge_content"),this.build(t,stylesheet)}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t),this.#e.innerHTML=t}get type(){return this.getAttribute("type")||"normal"}set type(t){this.setAttribute("type",t),this.#e.classList.add(t)}get max(){return this.getAttrNumber("max")||1/0}set max(t){t!==1/0&&(t=parseInt(t),this.setAttribute("max",t),this.value>t&&(this.value=t+"+"))}get isDot(){return this.getAttrBoolean("is-dot")||!1}set isDot(t){this.toggleAttr("is-dot",t),this.#e.innerText=t?"":this.value,this.#e.classList.toggle("dot",t)}connectedCallback(){this.value=this.value,this.type=this.type,this.max=this.max,this.isDot=this.isDot}}customElements.get("ea-badge")||customElements.define("ea-badge",EaBadge);