easy-component-ui 1.0.3 → 2.0.1

package/components/ea-switch/index.js

@@ -1,301 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const stylesheet = `
-.ea-switch_wrap {
-  display: flex;
-  align-items: center;
-}
-.ea-switch_wrap input {
-  display: none;
-}
-.ea-switch_wrap span {
-  display: block;
-  cursor: default;
-}
-.ea-switch_wrap .ea-switch_label {
-  color: #606266;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-.ea-switch_wrap .ea-switch_label.ea-switch_label--active {
-  color: #409eff;
-}
-.ea-switch_wrap .ea-switch_core {
-  position: relative;
-  cursor: pointer;
-  margin: 0 0.75rem;
-  width: 2.5rem;
-  height: 1.25rem;
-  line-height: 1.25rem;
-  background-color: #dcdfe6;
-  border-radius: 999px;
-  transition: background-color 0.2s;
-}
-.ea-switch_wrap .ea-switch_core.ea-switch_core--checked {
-  background-color: #409eff;
-}
-.ea-switch_wrap .ea-switch_core::after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 2px;
-  top: 50%;
-  transform: translate(0, -50%);
-  width: 1rem;
-  height: 1rem;
-  border-radius: 999px;
-  background-color: #fff;
-  transition: left 0.2s, transform 0.2s;
-}
-.ea-switch_wrap .ea-switch_core.ea-switch_core--checked::after {
-  left: calc(100% - 1rem - 2px);
-}
-.ea-switch_wrap .ea-switch_core.ea-switch_core--disabled {
-  background-color: #c0c4cc;
-}
-.ea-switch_wrap.ea-switch_wrap--disabled {
-  cursor: not-allowed;
-}
-.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label,
-.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_core {
-  pointer-events: none;
-}
-.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_core {
-  background-color: #eff1f5;
-}
-.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label {
-  color: #c0c4cc;
-}
-.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label.ea-switch_label--active {
-  color: #7ebfff;
-}
-`;
-
-const inputDom = () => {
-    const input = document.createElement('input');
-    input.type = 'checkbox';
-    input.className = 'ea-switch_input';
-
-    return input;
-}
-
-const inputCoreDom = () => {
-    const div = document.createElement('span');
-    div.className = 'ea-switch_core';
-
-    return div;
-}
-
-const labelDom = (posi) => {
-    const label = document.createElement('span');
-    label.className = `ea-switch_label ea-switch_label--${posi}`;
-
-    return label;
-}
-
-export class EaSwitch extends Base {
-    #mounted = false;
-
-    #wrap;
-    #input;
-
-    #labelLeft;
-    #inputCore;
-    #labelRight;
-
-    static get observedAttributes() {
-        return ['checked'];
-    }
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-switch_wrap';
-
-        const input = inputDom();
-        const leftLabel = labelDom('left');
-        const inputCore = inputCoreDom();
-        const rightLabel = labelDom('right');
-
-        wrap.appendChild(input);
-        wrap.appendChild(leftLabel);
-        wrap.appendChild(inputCore);
-        wrap.appendChild(rightLabel);
-
-        this.#wrap = wrap;
-        this.#input = input;
-        this.#labelLeft = leftLabel;
-        this.#inputCore = inputCore;
-        this.#labelRight = rightLabel;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- inactive-text 关闭时选项 -------
-    // #region
-    get inactiveText() {
-        return this.getAttribute('inactive-text');
-    }
-
-    set inactiveText(value) {
-        this.setAttribute('inactive-text', value);
-        this.#labelLeft.innerText = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-text 开启时选项 -------
-    // #region
-    get activeText() {
-        return this.getAttribute('active-text');
-    }
-
-    set activeText(value) {
-        this.setAttribute('active-text', value);
-        this.#labelRight.innerText = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- checked 选中 -------
-    // #region
-    get checked() {
-        return this.getAttrBoolean('checked');
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value);
-        this.#input.checked = value;
-        this.#input.setAttribute('checked', value);
-
-        if (value) {
-            this.#inputCore.classList.add('ea-switch_core--checked');
-            this.#labelRight.classList.add('ea-switch_label--active');
-
-            this.#labelLeft.classList.remove('ea-switch_label--active');
-        } else {
-            this.#inputCore.classList.remove('ea-switch_core--checked');
-            this.#labelLeft.classList.add('ea-switch_label--active');
-
-            this.#labelRight.classList.remove('ea-switch_label--active');
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled');
-    }
-
-    set disabled(value) {
-        this.setAttribute('disabled', value);
-        this.#input.disabled = value;
-        this.#wrap.classList.toggle('ea-switch_wrap--disabled', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- inactive-color 关闭时颜色 -------
-    // #region
-    get inactiveColor() {
-        return this.getAttribute('inactive-color');
-    }
-
-    set inactiveColor(value) {
-        if (!value) return;
-
-        this.setAttribute('inactive-color', value);
-        if (value) this.#inputCore.style.backgroundColor = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-color 开启时颜色 -------
-    // #region
-    get activeColor() {
-        return this.getAttribute('active-color');
-    }
-
-    set activeColor(value) {
-        if (!value) return;
-
-        this.setAttribute('active-color', value);
-        this.#inputCore.style.backgroundColor = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    handleInputChecked(e) {
-        const currentChecked = this.#input.checked;
-
-        if (this.inactiveColor && this.activeColor) {
-            this.#inputCore.style.backgroundColor = currentChecked ? this.inactiveColor : this.activeColor;
-        } else {
-            this.#inputCore.classList.toggle('ea-switch_core--checked', currentChecked);
-        }
-    }
-
-    init() {
-        const that = this;
-
-        // 设置勾选值
-        this.checked = this.checked;
-
-        // 设置开启/关闭值
-        this.inactiveText = this.inactiveText;
-        this.activeText = this.activeText;
-
-        // 设置禁用
-        this.disabled = this.disabled;
-
-        // 设置颜色
-        if (this.activeColor && this.inactiveColor) {
-            if (this.checked) this.activeColor = this.activeColor;
-            else this.inactiveColor = this.inactiveColor;
-        }
-
-
-        this.#labelLeft.addEventListener('click', function (e) {
-            that.checked = !that.#input.checked;
-        });
-
-        this.#labelRight.addEventListener('click', function (e) {
-            that.checked = !that.#input.checked;
-        });
-
-        this.#inputCore.addEventListener('click', function (e) {
-            that.checked = !that.#input.checked;
-        });
-    }
-
-    connectedCallback() {
-        this.init();
-        this.#mounted = true;
-    }
-
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (!this.#mounted) return;
-
-        if (name === 'checked') {
-            const value = this.checked ? this.activeText : this.inactiveText;
-            this.handleInputChecked();
-
-            this.dispatchEvent(new CustomEvent("change", {
-                detail: {
-                    checked: this.checked,
-                    value,
-                },
-            }))
-        }
-    }
-}
-
-if (!customElements.get('ea-switch')) {
-    customElements.define('ea-switch', EaSwitch);
-}
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSwitch extends Base{#t;#e;#i;#s;#a;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <label class="ea-switch_wrap" part="container">\n                <input class="ea-switch_input" type="checkbox">\n                <span class="ea-switch_label ea-switch_label--left" part="label-left"></span>\n                <span class="ea-switch_core" part="switch"></span>\n                <span class="ea-switch_label ea-switch_label--right" part="label-right"></span>\n            </label>\n        ',this.#t=t.querySelector(".ea-switch_wrap"),this.#e=t.querySelector(".ea-switch_input"),this.#i=t.querySelector(".ea-switch_label--left"),this.#s=t.querySelector(".ea-switch_core"),this.#a=t.querySelector(".ea-switch_label--right"),this.build(t,stylesheet)}get name(){return this.getAttribute("name")||"ea-switch"}set name(t){this.setAttribute("name",t),this.#t.setAttribute("for",t),this.#e.setAttribute("name",t),this.#e.setAttribute("id",t)}get value(){return this.inactiveText&&!this.checked?this.inactiveText:this.activeText&&this.checked?this.activeText:this.checked}set value(t){this.#e.value=t}get inactiveText(){return this.getAttribute("inactive-text")||""}set inactiveText(t){t&&(this.setAttribute("inactive-text",t),this.#i.innerText=t)}get activeText(){return this.getAttribute("active-text")||""}set activeText(t){t&&(this.setAttribute("active-text",t),this.#a.innerText=t)}get checked(){return this.getAttrBoolean("checked")}set checked(t){this.setAttribute("checked",t),this.#e.checked=t}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#e.disabled=t,this.#t.classList.toggle("disabled",t)}get inactiveColor(){return this.getAttribute("inactive-color")||""}set inactiveColor(t){t&&this.style.setProperty("--inactive-checkbox-bgc",t)}get activeColor(){return this.getAttribute("active-color")}set activeColor(t){t&&this.style.setProperty("--active-checkbox-bgc",t)}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.value=this.value,this.checked=this.checked,this.inactiveText=this.inactiveText,this.activeText=this.activeText,this.disabled=this.disabled,this.inactiveColor=this.inactiveColor,this.activeColor=this.activeColor,this.#e.addEventListener("change",(t=>{t.preventDefault(),t.stopPropagation(),this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:this.value}}))}))}}customElements.get("ea-switch")||customElements.define("ea-switch",EaSwitch);

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

@@ -0,0 +1 @@
+export const stylesheet='\n:host {\n  --active-text-color: #409eff;\n  --inactive-text-color: ##606266;\n  --active-checkbox-bgc: #409eff;\n  --inactive-checkbox-bgc: #eff1f5;\n  --active-disabled-text-color: #7ebfff;\n  --active-disabled-bgc: #bbdcff;\n  --inactive-disabled-text-color: #c0c4cc;\n  --inactive-disabled-bgc: #eff1f5;\n}\n\n.ea-switch_wrap {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ea-switch_wrap input {\n  display: none;\n}\n.ea-switch_wrap .ea-switch_label {\n  font-size: 0.875rem;\n  transition: color 0.2s;\n}\n.ea-switch_wrap input + .ea-switch_label--left {\n  color: var(--active-text-color);\n}\n.ea-switch_wrap input:checked + .ea-switch_label--left {\n  color: var(--inactive-text-color);\n}\n.ea-switch_wrap input:checked + .ea-switch_label--left + .ea-switch_core {\n  background-color: var(--active-checkbox-bgc);\n}\n.ea-switch_wrap input:checked + .ea-switch_label--left + .ea-switch_core::after {\n  left: calc(100% - 1rem - 2px);\n}\n.ea-switch_wrap input:checked + .ea-switch_label--left + .ea-switch_core + .ea-switch_label--right {\n  color: var(--active-text-color);\n}\n.ea-switch_wrap input:disabled + .ea-switch_label--left {\n  color: var(--active-disabled-text-color);\n}\n.ea-switch_wrap input:disabled + .ea-switch_label--left + .ea-switch_core {\n  background-color: var(--inactive-disabled-bgc);\n}\n.ea-switch_wrap input:disabled + .ea-switch_label--left + .ea-switch_core + .ea-switch_label--right {\n  color: var(--inactive-disabled-text-color);\n}\n.ea-switch_wrap input:checked:disabled + .ea-switch_label--left {\n  color: var(--inactive-disabled-text-color);\n}\n.ea-switch_wrap input:checked:disabled + .ea-switch_label--left + .ea-switch_core {\n  background-color: var(--active-disabled-bgc);\n}\n.ea-switch_wrap input:checked:disabled + .ea-switch_label--left + .ea-switch_core::after {\n  left: calc(100% - 1rem - 2px);\n}\n.ea-switch_wrap input:checked:disabled + .ea-switch_label--left + .ea-switch_core + .ea-switch_label--right {\n  color: var(--inactive-disabled-text-color);\n}\n.ea-switch_wrap .ea-switch_core {\n  position: relative;\n  cursor: pointer;\n  margin: 0 0.75rem;\n  width: 2.5rem;\n  height: 1.25rem;\n  line-height: 1.25rem;\n  background-color: var(--inactive-checkbox-bgc);\n  border-radius: 999px;\n  transition: background-color 0.2s;\n}\n.ea-switch_wrap .ea-switch_core::after {\n  content: "";\n  display: block;\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  transform: translate(0, -50%);\n  width: 1rem;\n  height: 1rem;\n  border-radius: 999px;\n  background-color: #fff;\n  transition: left 0.2s, transform 0.2s;\n}\n.ea-switch_wrap.disabled {\n  cursor: not-allowed;\n}\n.ea-switch_wrap.disabled .ea-switch_label,\n.ea-switch_wrap.disabled .ea-switch_core {\n  pointer-events: none;\n}\n';

package/components/ea-tab/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-pane/index.js";import{createElement}from"../../utils/createElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTab extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-tab_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#t=t.querySelector(".ea-tab_wrap"),this.build(t,stylesheet)}get name(){return this.getAttribute("name")}set name(t){this.setAttribute("name",t)}get type(){return this.getAttrBoolean("type")||"normal"}set type(t){this.setAttribute("type",t),this.#t.classList.add(`ea-tab_wrap--${t}`)}get actived(){return this.getAttrBoolean("actived")}set actived(t){this.toggleAttr("actived",t),this.#t.classList.toggle("is-actived",t)}get editable(){return this.getAttrBoolean("editable")}set editable(t){this.setAttribute("editable",t),this.#t.classList.toggle("ea-tab_wrap--editable",t),t&&this.#e()}#a(){this.addEventListener("click",(t=>{const e=t.detail.value===this.getAttrBoolean("selected");this.toggleAttr("selected",e),this.dispatchEvent(new CustomEvent("tab-click",{detail:{name:this.name,event:this},bubbles:!0}))}))}#e(){const t=createElement("span","ea-tab_wrap--editable-sign");t.innerText="x",this.#t.appendChild(t),t.addEventListener("click",(t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("tab-close",{detail:{event:this,name:this.name,index:this.index},bubbles:!0}))}))}handleBorderRadius(t){this.#t.style.setProperty(t,"3px")}handleBorderRightWidth(){this.#t.style.setProperty("--border-right-width","1px")}connectedCallback(){this.editable=this.editable,this.label=this.label,this.#a()}}customElements.get("ea-tab")||customElements.define("ea-tab",EaTab);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-tab_wrap {\n  --border-radius-top-left: 0;\n  --border-radius-top-right: 0;\n  --border-right-width: 0;\n  position: relative;\n  box-sizing: border-box;\n  padding: 0 1.25rem;\n  height: 40px;\n  line-height: 40px;\n  min-width: 1rem;\n  font-size: 14px;\n  font-weight: 500;\n  color: #303133;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: color 0.3s, background-color 0.3s, width 0.3s, min-width 0.3s;\n}\n.ea-tab_wrap:hover {\n  color: #409eff;\n}\n.ea-tab_wrap.ea-tab_wrap--normal.is-actived {\n  color: #409eff;\n}\n.ea-tab_wrap.ea-tabs_wrap--card {\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-tab_wrap.ea-tabs_wrap--card .ea-tabs_tab-bottom-bar {\n  height: 1px;\n  bottom: -1px;\n  background-color: white;\n}\n.ea-tab_wrap.ea-tab_wrap--card {\n  border-top-left-radius: var(--border-radius-top-left);\n  border-top-right-radius: var(--border-radius-top-right);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-right-width: var(--border-right-width);\n}\n.ea-tab_wrap.ea-tab_wrap--card.is-actived {\n  border-bottom-color: white;\n  color: #409eff;\n}\n.ea-tab_wrap.ea-tab_wrap--border-card {\n  border-top-left-radius: var(--border-radius-top-left);\n  border-top-right-radius: var(--border-radius-top-right);\n  border: 0px solid rgba(0, 0, 0, 0.1);\n  border-right-width: var(--border-right-width);\n}\n.ea-tab_wrap.ea-tab_wrap--border-card.is-actived {\n  border-bottom-color: white;\n  color: #409eff;\n  background-color: white;\n}\n.ea-tab_wrap.ea-tab_wrap--editable .ea-tab_wrap--editable-sign {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(0, -50%);\n  user-select: none;\n  width: 0;\n  overflow: hidden;\n  transition: width 0.3s;\n}\n.ea-tab_wrap.ea-tab_wrap--editable:hover .ea-tab_wrap--editable-sign {\n  width: 14px;\n}\n";

package/components/ea-table/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{createElement}from"../../utils/createElement.js";import"../ea-table-column/index.js";import"../ea-checkbox/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTable extends Base{#e;#t;#r;#a;#l;#o;#s;#i;#n;#h;#d;#c;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-table_wrap" part="container">\n                <div class="ea-table_header-wrap" part="header-wrap">\n                    <table class="ea-table_header" part="header-table">\n                        <colgroup></colgroup>\n                        <thead></thead>\n                    </table>\n                </div>\n                <div class="ea-table_body-wrap" part="body-wrap">\n                    <table class="ea-table_main" part="body-table">\n                        <colgroup></colgroup>\n                        <tbody></tbody>\n                        <slot name="empty" style="display: none;"></slot>\n                    </table>\n                </div>\n            </div>\n            <slot></slot>\n            <slot name="header"></slot>\n            <slot name="body"></slot>\n        ',this.build(e,stylesheet),this.#e=this.shadowRoot.querySelector(".ea-table_wrap"),this.#t=this.shadowRoot.querySelector(".ea-table_header"),this.#r=this.#t.querySelector(".ea-table_header colgroup"),this.#a=this.#t.querySelector(".ea-table_header thead"),this.#l=this.shadowRoot.querySelector(".ea-table_main"),this.#o=this.#l.querySelector(".ea-table_body-wrap colgroup"),this.#s=this.#l.querySelector(".ea-table_body-wrap tbody"),this.#i=this.querySelectorAll("ea-table-column")}get border(){return this.getAttrBoolean("border")}set border(e){this.setAttribute("border",e),this.#e.classList.toggle("border",e),this.#t.classList.toggle("border",e),this.#l.classList.toggle("border",e)}get stripe(){return this.getAttrBoolean("stripe")}set stripe(e){this.setAttribute("stripe",e),this.#e.classList.toggle("stripe",e)}get height(){return this.getAttrNumber("height")}set height(e){if(this.setAttribute("height",e),e){this.shadowRoot.querySelector(".ea-table_body-wrap").style.height=`${e}px`}else this.#e.style.height=""}get highlightCurrentRow(){return this.getAttrBoolean("highlight-current-row")||!1}set highlightCurrentRow(e){this.setAttribute("highlight-current-row",e)}get currentRow(){return this.getAttrNumber("current-row")||0}set currentRow(e){this.setAttribute("current-row",e)}get data(){return this.#h||[]}set data(e){const t=JSON.stringify(e);let r=JSON.parse(t);this.#h=r,this.renderTableBody(r)}get currentRowDetail(){const e=this.currentRow;return{index:e,data:this.data[e],target:this.#l.querySelectorAll(".ea-table__row")[e]||null}}#b(e,t,r,a,l,o=!1){const s=this.parentNode.clientWidth,i=Array.from(a.children).reduce(((e,t)=>e+Number(t.getAttribute("width"))),0);s>0&&i<=s?(r.style.width=s-l+"px",e.style.width=`${s}px`,t.style.width=s-l+"px",o&&(e.style.width=`${s}px`)):(r.style.width=`${s}px`,e.style.width=`${s}px`,t.style.width=`${s}px`)}#p(){const e=this.shadowRoot.querySelector(".ea-table_header-wrap"),t=this.shadowRoot.querySelector(".ea-table_body-wrap");let r=null;const a=()=>{this.#b(this.#e,this.#l,this.#t,this.#r,r)};window.addEventListener("resize",(()=>{a()})),setTimeout((()=>{r=this.#e.getBoundingClientRect().width-this.#l.getBoundingClientRect().width,a()}),0),t.addEventListener("scroll",(r=>{e.style.transform=`translateX(-${t.scrollLeft}px)`}))}#u(e,t){if(t.sortable&&"selection"!==t.type){const r=createElement("ea-icon");r.icon="icon-angle-down",r.style.float="right",e.appendChild(r),e.addEventListener("click",(()=>{r.color="#5cb6ff";"asc"===t.order?(t.order="desc",r.icon="icon-angle-up"):(t.order="asc",r.icon="icon-angle-down");let e=this.data.sort(((e,r)=>{const a="null"!==t.prop?t.prop:t.type;return"asc"===t.order?String(e[a]).localeCompare(r[a]):String(r[a]).localeCompare(e[a])}));this.renderTableBody(e),this.dispatchEvent(new CustomEvent("sort-change",{detail:{prop:t.prop,order:t.order},composed:!0,bubbles:!0}))}))}}#y(){this.querySelectorAll("ea-table-column");this.#r.innerHTML="",this.#o.innerHTML="",this.#a.innerHTML="";const e=(t,r=1)=>{const a=createElement("tr");a.part="row",a.setAttribute("index",r),Array.from(t).forEach((t=>{if("EA-TABLE-COLUMN"!==t.nodeName)return;const l=createElement("th","ea-table__cell th-cell");if(l.part="th-cell",l.setAttribute("colspan",t.colspan||1),l.setAttribute("rowspan",t.rowspan||1),l.appendChild(t),a.appendChild(l),"selection"===t.type&&(this.#n=t.querySelector("ea-checkbox")),t.children.length>0)e(t.children,++r);else{const e=createElement("col");e.setAttribute("width",t.getAttribute("width")||100);const r=createElement("col");r.setAttribute("width",t.getAttribute("width")||100),this.#r.appendChild(e),this.#o.appendChild(r),this.#a.appendChild(a),this.#u(l,t)}}))};e(this.children)}#g(e,t){e.addEventListener("click",(()=>{const r=this.#s.querySelectorAll(".ea-table__row");let a=!1,l=!1;r.forEach(((e,t)=>{"index"===e.type&&(a=!0),"selection"===e.type&&(l=!0),e.index=t,this.highlightCurrentRow&&e.classList.remove("is-current-row")})),this.highlightCurrentRow&&e.classList.add("is-current-row"),l&&delete t.selection,this.currentRow=e.index,this.dispatchEvent(new CustomEvent("current-change",{composed:!0,bubbles:!0,detail:{index:e.index,row:e,data:t}}))}))}#m(e,t){const r=this.#t.querySelectorAll("ea-table-column");let a=0,l=!1;return r.forEach(((e,r)=>{e.type===t&&(a=r,l=!0)})),l?e.map(((e,r)=>{const l={},o=Object.keys(e);return o.splice(a,0,t),o.forEach(((t,a)=>{l[t]="index"===t?r+1:"selection"===t?"<ea-checkbox></ea-checkbox>":e[t]})),l})):e}#T(){const e=this.#s.querySelectorAll("tr"),t=this.shadowRoot.querySelector('slot[name="body"]');t.assignedNodes().length?(e.forEach((e=>{const r=createElement("td","ea-table__cell");r.part="td-cell",Array.from(t.assignedNodes()).forEach((t=>{const a=t.cloneNode(!0);r.appendChild(a),a.addEventListener("click",(()=>{t.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,detail:{row:e}}))}))})),e.appendChild(r)})),t.style.display="none"):t.remove()}renderTableBody(e){if(this.#s.innerHTML="",!this.#d){e=this.#m(e,"index"),e=this.#m(e,"selection");const t=Array.from(this.#t.querySelectorAll("ea-table-column")).map(((e,t)=>"default"===e.type?e.prop:e.type));e=e.map((e=>{const r={};return t.forEach((t=>{null!==t&&"null"!==t&&void 0!==t&&"undefined"!==t&&(r[t]=e[t])})),r})),this.#d=!0}e.forEach(((t,r)=>{const a=createElement("tr","ea-table__row");a.part="row",Object.entries(t).forEach((([r,l])=>{const o=createElement("td","ea-table__cell td_cell");o.part="td-cell",o.innerHTML=l,"selection"===r&&o.querySelector("ea-checkbox").addEventListener("change",(r=>{const l=this.shadowRoot.querySelectorAll("ea-checkbox"),o=Array.from(l).filter(((e,t)=>(e.index=t,e.checked))),s=o.map((t=>{const r=e[t.index];return delete r.selection,r}));this.dispatchEvent(new CustomEvent("body-selection-change",{composed:!0,bubbles:!0,detail:{checked:r.detail.checked,currentRow:a,currentRowData:t,checkedElements:o,checkedElementsData:s}}))})),a.appendChild(o)})),this.#g(a,t),this.#s.appendChild(a)})),this.#h=e;const t=this.shadowRoot.querySelector('slot[name="empty"]');e.length>0?t.style.display="none":t.style.display="block",this.#T()}#w(){const e=this.shadowRoot.querySelectorAll("ea-table-column");Array.from(e).some((e=>"selection"===e.type))&&(this.addEventListener("header-selection-change",(e=>{this.#l.querySelectorAll("ea-checkbox").forEach((t=>{t.checked=e.detail.checked}))})),this.addEventListener("body-selection-change",(e=>{const t=this.#a.querySelector("ea-table-column").shadowRoot.querySelector("ea-checkbox"),r=this.#l.querySelectorAll("ea-checkbox");let a=Array.from(r).map((e=>e.checked));a.every((e=>!0===e))?t.checked=!0:a.every((e=>!1===e))?t.checked=!1:t.indeterminate=!0})))}#E(){const e=this.shadowRoot.querySelector('slot[name="header"]');if(e.assignedNodes().length>0){const t=this.#a.querySelector("tr"),r=createElement("th","ea-table__cell th-cell");r.part="th-cell";let a=1;Array.from(this.#a.querySelectorAll("th")).forEach((e=>{e.rowSpan>a&&(a=e.rowSpan)})),r.rowSpan=a,r.appendChild(e),t.appendChild(r)}else e.remove()}connectedCallback(){this.style.position="relative",this.border=this.border,this.stripe=this.stripe,this.height=this.height,this.highlightCurrentRow=this.highlightCurrentRow,this.#y(),this.#p(),this.#w(),this.#E()}}customElements.get("ea-table")||customElements.define("ea-table",EaTable);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-table_wrap,\n.ea-table_fixed-column {\n  position: relative;\n  background-color: #fff;\n  overflow: hidden;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header,\n.ea-table_wrap .ea-table_body-wrap .ea-table_main,\n.ea-table_wrap .ea-table_main,\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main,\n.ea-table_fixed-column .ea-table_main {\n  position: relative;\n  box-sizing: border-box;\n  padding: 12px 0;\n  width: 100%;\n  min-width: 0;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n  text-align: left;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header .ea-table__cell,\n.ea-table_wrap .ea-table_body-wrap .ea-table_main .ea-table__cell,\n.ea-table_wrap .ea-table_main .ea-table__cell,\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header .ea-table__cell,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main .ea-table__cell,\n.ea-table_fixed-column .ea-table_main .ea-table__cell {\n  border-top: 1px solid #ebeef5;\n  border-bottom: 1px solid #ebeef5;\n  box-sizing: border-box;\n  padding: 8px;\n  color: #606266;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header .ea-table__cell.th-cell,\n.ea-table_wrap .ea-table_body-wrap .ea-table_main .ea-table__cell.th-cell,\n.ea-table_wrap .ea-table_main .ea-table__cell.th-cell,\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header .ea-table__cell.th-cell,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main .ea-table__cell.th-cell,\n.ea-table_fixed-column .ea-table_main .ea-table__cell.th-cell {\n  color: #909399;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header .ea-table__cell.is-gutter,\n.ea-table_wrap .ea-table_body-wrap .ea-table_main .ea-table__cell.is-gutter,\n.ea-table_wrap .ea-table_main .ea-table__cell.is-gutter,\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header .ea-table__cell.is-gutter,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main .ea-table__cell.is-gutter,\n.ea-table_fixed-column .ea-table_main .ea-table__cell.is-gutter {\n  width: 15px;\n  padding: 0;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header.border .ea-table__cell,\n.ea-table_wrap .ea-table_body-wrap .ea-table_main.border .ea-table__cell,\n.ea-table_wrap .ea-table_main.border .ea-table__cell,\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header.border .ea-table__cell,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main.border .ea-table__cell,\n.ea-table_fixed-column .ea-table_main.border .ea-table__cell {\n  border: 1px solid #ebeef5;\n  padding: 8px;\n  color: #606266;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header.border .ea-table__cell.is-gutter,\n.ea-table_wrap .ea-table_body-wrap .ea-table_main.border .ea-table__cell.is-gutter,\n.ea-table_wrap .ea-table_main.border .ea-table__cell.is-gutter,\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header.border .ea-table__cell.is-gutter,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main.border .ea-table__cell.is-gutter,\n.ea-table_fixed-column .ea-table_main.border .ea-table__cell.is-gutter {\n  width: 15px;\n  padding: 0;\n  min-width: none;\n}\n.ea-table_wrap .ea-table_header-wrap .ea-table_header.stripe .ea-table__row:nth-child(2n),\n.ea-table_wrap .ea-table_body-wrap .ea-table_main.stripe .ea-table__row:nth-child(2n),\n.ea-table_wrap .ea-table_main.stripe .ea-table__row:nth-child(2n),\n.ea-table_fixed-column .ea-table_header-wrap .ea-table_header.stripe .ea-table__row:nth-child(2n),\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main.stripe .ea-table__row:nth-child(2n),\n.ea-table_fixed-column .ea-table_main.stripe .ea-table__row:nth-child(2n) {\n  background-color: #fafafa;\n}\n.ea-table_wrap .ea-table_main,\n.ea-table_fixed-column .ea-table_main {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.ea-table_wrap .ea-table_body-wrap,\n.ea-table_fixed-column .ea-table_body-wrap {\n  overflow-y: auto;\n}\n.ea-table_wrap .ea-table_body-wrap .ea-table_main .ea-table__row:hover,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main .ea-table__row:hover {\n  background-color: #f5f7fa;\n}\n.ea-table_wrap .ea-table_body-wrap .ea-table_main .ea-table__row.is-current-row,\n.ea-table_fixed-column .ea-table_body-wrap .ea-table_main .ea-table__row.is-current-row {\n  background-color: #ecf5ff;\n}\n";

package/components/ea-table-column/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-checkbox/index.js";const stylesheet="";export class EaTableColumn extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <th part="container">\n                <slot></slot>\n                <span></span>\n            </th>\n        ',this.build(t,""),this.#t=t.querySelector("span")}get prop(){return this.getAttribute("prop")}set prop(t){this.setAttribute("prop",t)}get width(){return this.getAttrNumber("width")||350}set width(t){this.setAttribute("width",t)}get label(){return this.getAttribute("label")||""}set label(t){this.setAttribute("label",t),""!==t&&(this.#t.innerHTML=t)}get colspan(){return this.getAttrNumber("colspan")||1}set colspan(t){this.setAttribute("colspan",t)}get rowspan(){return this.getAttrNumber("rowspan")||1}set rowspan(t){this.setAttribute("rowspan",t)}get type(){const t=this.getAttribute("type");return["default","index","selection"].includes(t)?t:"default"}set type(t){this.setAttribute("type",t),"selection"===t&&(this.#t.innerHTML="\n                <ea-checkbox></ea-checkbox>\n            ",this.#t.querySelector("ea-checkbox").addEventListener("change",(t=>{this.dispatchEvent(new CustomEvent("header-selection-change",{detail:{checked:t.detail.checked},composed:!0}))})))}get sortable(){return this.getAttrBoolean("sortable")||!1}set sortable(t){this.setAttribute("sortable",t)}get order(){return this.getAttribute("order")||"asc"}set order(t){this.setAttribute("order",t)}connectedCallback(){this.prop=this.prop,this.width=this.width,this.label=this.label,this.colspan=this.colspan,this.rowspan=this.rowspan,this.type=this.type,this.sortable=this.sortable,this.order=this.order}}customElements.get("ea-table-column")||customElements.define("ea-table-column",EaTableColumn);

package/components/ea-tabs/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-tab/index.js";import"../ea-pane/index.js";import{timeout}from"../../utils/timeout.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTabs extends Base{#t;#e;#a;#s;#i=0;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-tabs_wrap" part="container">\n                <div class="ea-tabs_tab-wrap" part="tab-wrap">\n                    <slot></slot>\n                </div>\n                <div class="ea-tabs_tab-bottom-bar" part="tab-bottom-bar"></div>\n                <div class="ea-tabs_pane-wrap" part="pane-wrap">\n                    <slot name="pane"></slot>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-tabs_wrap"),this.#e=t.querySelector(".ea-tabs_tab-bottom-bar"),this.#a=t.querySelector(".ea-tabs_pane-wrap"),this.#s=t.querySelector(".ea-tabs_tab-wrap > slot"),this.build(t,stylesheet)}get type(){return this.getAttribute("type")||"normal"}set type(t){this.setAttribute("type",t),this.#t.classList.add("ea-tabs_wrap--"+t);const e=this.querySelectorAll("ea-tab");e.forEach((e=>{e.type=t})),"border-card"!==t&&(e[0].handleBorderRadius("--border-radius-top-left"),e[e.length-1].handleBorderRadius("--border-radius-top-right"),e[e.length-1].handleBorderRightWidth())}get actived(){return this.getAttribute("actived")||this.querySelectorAll("ea-tab")[0].name||0}set actived(t){this.setAttribute("actived",t),this.querySelectorAll("ea-tab").forEach(((e,a)=>{e.actived=e.name===t}))}get editable(){return this.getAttrBoolean("editable")||!1}set editable(t){this.setAttribute("editable",t),this.#o(t)}#r(t){const e=this.querySelectorAll("ea-tab"),a=this.querySelectorAll("ea-pane"),{width:s,height:i}=t.getBoundingClientRect(),o=Array.from(e).reduce(((e,a,s)=>s<=t.index?e+a.offsetWidth:e),0),r=(t,e)=>{t.actived=!1,t.index=e};e.forEach(r),a.forEach(r),t.actived=!0,this.querySelector(`ea-pane[name="${t.name}"]`).actived=!0,this.#e.style.left=o-s+"px",this.#e.style.width=s+"px",this.#e.style.top=i+"px"}#n(){const t=this.querySelectorAll("ea-tab"),e=this.querySelectorAll("ea-pane"),a=t=>{this.#r(t.detail.event),this.actived=t.detail.name,t.detail.event.actived=!0};t.forEach(((t,e)=>{t.index=e,t.name||(t.name=e),t.removeEventListener("tab-click",a),t.addEventListener("tab-click",a)})),e.forEach(((t,e)=>{t.index=e,t.name||(t.name=e)}))}#l(){timeout((()=>{const t=this.querySelector('ea-tab[name="'+this.actived+'"]');t.actived=!0,this.#r(t)}),20)}#d(t){t.stopPropagation();const e=this.querySelectorAll("ea-tab"),{name:a,event:s,index:i}=t.detail;let o=i;e[i+1]?o=i+1:e[i-1]&&(o=i-1);try{this.actived=e[o]?.name,s.remove(),this.querySelector(`ea-pane[name="${a}"]`).remove(),e.length<=1?this.#e.style.width=0:(this.#l(),this.#n())}catch(t){}}#o(t){this.querySelectorAll("ea-tab").forEach((e=>{e.editable=t})),this.removeEventListener("tab-close",this.#d),this.addEventListener("tab-close",this.#d)}#h(){timeout((()=>{this.#i=this.#s.assignedNodes().length,this.#s.addEventListener("slotchange",(t=>{const e=t.target.assignedNodes().length;e>=this.#i?(this.#n(),this.#o(this.editable),this.type=this.type,this.#i=e,this.dispatchEvent(new CustomEvent("tab-add",{detail:{event:t,tabs:this.querySelectorAll("ea-tab"),panes:this.querySelectorAll("ea-pane")},bubbles:!0,composed:!0}))):this.#i=this.#s.assignedNodes().length}))}),20)}connectedCallback(){this.type=this.type,this.actived=this.actived,this.editable=this.editable,this.#l(),this.#n(),this.#h()}}customElements.get("ea-tabs")||customElements.define("ea-tabs",EaTabs);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-tabs_wrap {\n  position: relative;\n}\n.ea-tabs_wrap .ea-tabs_tab-wrap {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n.ea-tabs_wrap .ea-tabs_pane-wrap {\n  padding: 20px;\n}\n.ea-tabs_wrap .ea-tabs_tab-bottom-bar {\n  position: absolute;\n  height: 2px;\n  width: 0;\n  top: 40px;\n  left: 0;\n  border-radius: 999px;\n  background-color: #409eff;\n  transition: left 0.3s;\n}\n.ea-tabs_wrap.ea-tabs_wrap--normal .ea-tabs_tab-wrap {\n  border-bottom: 2px solid #e4e7ed;\n}\n.ea-tabs_wrap.ea-tabs_wrap--card .ea-tabs_tab-wrap {\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-tabs_wrap.ea-tabs_wrap--card .ea-tabs_tab-bottom-bar {\n  height: 1px;\n  bottom: -1px;\n  background-color: white;\n}\n.ea-tabs_wrap.ea-tabs_wrap--border-card {\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n}\n.ea-tabs_wrap.ea-tabs_wrap--border-card .ea-tabs_tab-wrap {\n  background-color: #f5f7fa;\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-tabs_wrap.ea-tabs_wrap--border-card .ea-tabs_tab-bottom-bar {\n  height: 1px;\n  bottom: -1px;\n  background-color: white;\n}\n";

package/components/ea-tag/index.js

@@ -1,212 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const stylesheet = `
-.ea-tag_wrap {
-  display: inline-block;
-  height: 2rem;
-  line-height: 30px;
-  white-space: nowrap;
-  padding: 0 0.625rem;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-}
-.ea-tag_wrap.ea-tag--default {
-  color: #409eff;
-  background-color: #ecf5ff;
-  border-color: #dcdfe6;
-}
-.ea-tag_wrap.ea-tag--default.ea-tag--dark {
-  color: #fff;
-  background-color: #409eff;
-  border-color: #409eff;
-}
-.ea-tag_wrap.ea-tag--default.ea-tag--plain {
-  color: #409eff;
-  background-color: #fff;
-  border-color: #dcdfe6;
-}
-.ea-tag_wrap.ea-tag--success {
-  color: #67c23a;
-  background-color: #f0f9eb;
-  border-color: #e1f3d8;
-}
-.ea-tag_wrap.ea-tag--success.ea-tag--dark {
-  color: #fff;
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.ea-tag_wrap.ea-tag--success.ea-tag--plain {
-  color: #67c23a;
-  background-color: #fff;
-  border-color: #e1f3d8;
-}
-.ea-tag_wrap.ea-tag--info {
-  color: #909399;
-  background-color: #f4f4f5;
-  border-color: #e9e9eb;
-}
-.ea-tag_wrap.ea-tag--info.ea-tag--dark {
-  color: #fff;
-  background-color: #909399;
-  border-color: #909399;
-}
-.ea-tag_wrap.ea-tag--info.ea-tag--plain {
-  color: #909399;
-  background-color: #fff;
-  border-color: #e9e9eb;
-}
-.ea-tag_wrap.ea-tag--warning {
-  color: #e6a23c;
-  background-color: #fdf6ec;
-  border-color: #faecd8;
-}
-.ea-tag_wrap.ea-tag--warning.ea-tag--dark {
-  color: #fff;
-  background-color: #e6a23c;
-  border-color: #e6a23c;
-}
-.ea-tag_wrap.ea-tag--warning.ea-tag--plain {
-  color: #e6a23c;
-  background-color: #fff;
-  border-color: #faecd8;
-}
-.ea-tag_wrap.ea-tag--danger {
-  color: #f56c6c;
-  background-color: #fef0f0;
-  border-color: #fbc4c4;
-}
-.ea-tag_wrap.ea-tag--danger.ea-tag--dark {
-  color: #fff;
-  background-color: #f56c6c;
-  border-color: #f56c6c;
-}
-.ea-tag_wrap.ea-tag--danger.ea-tag--plain {
-  color: #f56c6c;
-  background-color: #fff;
-  border-color: #fbc4c4;
-}
-`;
-
-const closeDom = () => {
-  const closeIcon = document.createElement('i');
-  closeIcon.className = 'icon-cancel-circled2';
-  closeIcon.style.cssText = `
-        font-size: 1rem;
-        margin-left: 0.5rem;
-        cursor: pointer;
-    `;
-
-  return closeIcon;
-}
-
-export class EaTag extends Base {
-  #wrap;
-  #closeSlot;
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    const wrap = document.createElement('div');
-    wrap.className = 'ea-tag_wrap';
-
-    const textSlot = document.createElement('slot');
-    wrap.appendChild(textSlot);
-
-    const closeSlot = document.createElement('slot');
-    closeSlot.name = 'close';
-    wrap.appendChild(closeSlot);
-
-    this.#wrap = wrap;
-    this.#closeSlot = closeSlot;
-
-    this.build(shadowRoot, stylesheet);
-    this.shadowRoot.appendChild(wrap);
-  }
-
-  // ------- type tag类型样式 -------
-  // #region
-  get type() {
-    return this.getAttribute('type') || "default";
-  }
-
-  set type(value) {
-    this.setAttribute('type', value);
-    this.#wrap.classList.add(`ea-tag--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- closable 是否显示可关闭 -------
-  // #region
-  get closable() {
-    return this.getAttrBoolean('closable');
-  }
-
-  set closable(value) {
-    this.toggleAttr('closable', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- effect 不同主题 -------
-  // #region
-  get effect() {
-    return this.getAttribute('effect') || "light";
-  }
-
-  set effect(value) {
-    if (value === "light") return;
-
-    this.setAttribute('effect', value);
-    this.#wrap.classList.add(`ea-tag--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-  initCloseEvent() {
-    const that = this;
-    const closeIcon = closeDom();
-
-    closeIcon.addEventListener('mouseenter', function (e) {
-      closeIcon.className = 'icon-cancel-circled';
-    });
-
-    closeIcon.addEventListener('mouseleave', function (e) {
-      closeIcon.className = 'icon-cancel-circled2';
-    });
-
-    closeIcon.addEventListener('click', function (e) {
-      that.dispatchEvent(new CustomEvent('close', {
-        detail: {
-          value: that.innerText
-        },
-        bubbles: true,
-      }));
-    });
-
-    this.#closeSlot.appendChild(closeIcon);
-  }
-
-  init() {
-    const that = this;
-
-    // tag类型
-    this.type = this.type;
-
-    // 显示可关闭
-    this.closable = this.closable;
-    if (this.closable) this.initCloseEvent();
-
-    // 主题
-    this.effect = this.effect;
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-}
-
-if (!customElements.get('ea-tag')) {
-  customElements.define('ea-tag', EaTag);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTag extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <div class="ea-tag_wrap" part="container">\n        <slot></slot>\n      </div>\n    ',this.#e=e.querySelector(".ea-tag_wrap"),this.build(e,stylesheet)}get type(){return this.getAttribute("type")||"default"}set type(e){this.setAttribute("type",e),this.#e.classList.add(`ea-tag--${e}`)}get closable(){return this.getAttrBoolean("closable")}set closable(e){this.toggleAttr("closable",e)}get effect(){return this.getAttribute("effect")||"light"}set effect(e){"light"!==e&&(this.setAttribute("effect",e),this.#e.classList.add(`ea-tag--${e}`))}#s(){if(!this.closable)return;const e=document.createElement("ea-icon");e.icon="icon-cancel-circled2",e.part="close-icon",e.addEventListener("mouseenter",(t=>{e.icon="icon-cancel-circled"})),e.addEventListener("mouseleave",(t=>{e.icon="icon-cancel-circled2"})),e.addEventListener("click",(e=>{this.dispatchEvent(new CustomEvent("close",{detail:{value:this.innerText},bubbles:!0}))})),this.#e.appendChild(e)}connectedCallback(){this.effect=this.effect,this.type=this.type,this.closable=this.closable,this.#s()}}customElements.get("ea-tag")||customElements.define("ea-tag",EaTag);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-tag_wrap {\n  display: inline-block;\n  height: 2rem;\n  line-height: 30px;\n  white-space: nowrap;\n  padding: 0 0.625rem;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.ea-tag_wrap ea-icon {\n  font-size: 1rem;\n  margin-left: 0.5rem;\n  cursor: pointer;\n}\n.ea-tag_wrap.ea-tag--default {\n  color: #409eff;\n  background-color: #ecf5ff;\n  border-color: #dcdfe6;\n}\n.ea-tag_wrap.ea-tag--default.ea-tag--dark {\n  color: #fff;\n  background-color: #409eff;\n  border-color: #409eff;\n}\n.ea-tag_wrap.ea-tag--default.ea-tag--plain {\n  color: #409eff;\n  background-color: #fff;\n  border-color: #dcdfe6;\n}\n.ea-tag_wrap.ea-tag--success {\n  color: #67c23a;\n  background-color: #f0f9eb;\n  border-color: #e1f3d8;\n}\n.ea-tag_wrap.ea-tag--success.ea-tag--dark {\n  color: #fff;\n  background-color: #67c23a;\n  border-color: #67c23a;\n}\n.ea-tag_wrap.ea-tag--success.ea-tag--plain {\n  color: #67c23a;\n  background-color: #fff;\n  border-color: #e1f3d8;\n}\n.ea-tag_wrap.ea-tag--info {\n  color: #909399;\n  background-color: #f4f4f5;\n  border-color: #e9e9eb;\n}\n.ea-tag_wrap.ea-tag--info.ea-tag--dark {\n  color: #fff;\n  background-color: #909399;\n  border-color: #909399;\n}\n.ea-tag_wrap.ea-tag--info.ea-tag--plain {\n  color: #909399;\n  background-color: #fff;\n  border-color: #e9e9eb;\n}\n.ea-tag_wrap.ea-tag--warning {\n  color: #e6a23c;\n  background-color: #fdf6ec;\n  border-color: #faecd8;\n}\n.ea-tag_wrap.ea-tag--warning.ea-tag--dark {\n  color: #fff;\n  background-color: #e6a23c;\n  border-color: #e6a23c;\n}\n.ea-tag_wrap.ea-tag--warning.ea-tag--plain {\n  color: #e6a23c;\n  background-color: #fff;\n  border-color: #faecd8;\n}\n.ea-tag_wrap.ea-tag--danger {\n  color: #f56c6c;\n  background-color: #fef0f0;\n  border-color: #fbc4c4;\n}\n.ea-tag_wrap.ea-tag--danger.ea-tag--dark {\n  color: #fff;\n  background-color: #f56c6c;\n  border-color: #f56c6c;\n}\n.ea-tag_wrap.ea-tag--danger.ea-tag--plain {\n  color: #f56c6c;\n  background-color: #fff;\n  border-color: #fbc4c4;\n}\n";