easy-component-ui 2.0.5 → 2.1.0

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

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

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

@@ -1 +1,164 @@
-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);
+// @ts-nocheck
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+import "../ea-checkbox/index.js"
+
+const stylesheet = ``;
+
+export class EaTableColumn extends Base {
+    #labelNode;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <th part="container">
+                <slot></slot>
+                <span></span>
+            </th>
+        `;
+
+        this.build(shadowRoot, stylesheet);
+
+        this.#labelNode = shadowRoot.querySelector('span');
+    }
+
+    // ------- prop 表头对应的数据的键值 -------
+    // #region
+    get prop() {
+        return this.getAttribute('prop');
+    }
+
+    set prop(value) {
+        this.setAttribute('prop', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- width 列宽 -------
+    // #region
+    get width() {
+        return this.getAttrNumber('width') || 350;
+    }
+
+    set width(value) {
+        this.setAttribute('width', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- label 标题 -------
+    // #region
+    get label() {
+        return this.getAttribute('label') || '';
+    }
+
+    set label(value) {
+        this.setAttribute('label', value);
+
+        if (value !== '') this.#labelNode.innerHTML = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- colspan 跨列 -------
+    // #region
+    get colspan() {
+        return this.getAttrNumber('colspan') || 1;
+    }
+
+    set colspan(value) {
+        this.setAttribute('colspan', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- rowspan 跨行 -------
+    // #region
+    get rowspan() {
+        return this.getAttrNumber('rowspan') || 1;
+    }
+
+    set rowspan(value) {
+        this.setAttribute('rowspan', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- type 列类型 -------
+    // #region
+    get type() {
+        const attr = this.getAttribute('type');
+
+        return ['default', 'index', 'selection'].includes(attr) ? attr : 'default';
+    }
+
+    set type(value) {
+        this.setAttribute('type', value);
+
+        if (value === "selection") {
+            this.#labelNode.innerHTML = `
+                <ea-checkbox></ea-checkbox>
+            `;
+
+            this.#labelNode.querySelector('ea-checkbox').addEventListener('change', (e) => {
+                this.dispatchEvent(new CustomEvent('header-selection-change', {
+                    detail: {
+                        checked: e.detail.checked,
+                    },
+                    composed: true
+                }));
+            });
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- sortable 是否可排序 -------
+    // #region
+    get sortable() {
+        return this.getAttrBoolean('sortable') || false;
+    }
+
+    set sortable(value) {
+        this.setAttribute('sortable', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- order 排序方式 -------
+    // #region
+    get order() {
+        return this.getAttribute('order') || 'asc';
+    }
+
+    set order(value) {
+        this.setAttribute('order', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    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;
+    }
+}
+
+if (!customElements.get('ea-table-column')) {
+    customElements.define('ea-table-column', EaTableColumn);
+}

package/components/ea-tabs/index.css

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

package/components/ea-tabs/index.js

@@ -1 +1,245 @@
-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);
+// @ts-nocheck
+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 {
+    #wrap;
+    #tabBottomBar;
+    #paneWrap;
+
+    #tabSlot;
+
+    #previousNodesLen = 0;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-tabs_wrap" part="container">
+                <div class="ea-tabs_tab-wrap" part="tab-wrap">
+                    <slot></slot>
+                </div>
+                <div class="ea-tabs_tab-bottom-bar" part="tab-bottom-bar"></div>
+                <div class="ea-tabs_pane-wrap" part="pane-wrap">
+                    <slot name="pane"></slot>
+                </div>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-tabs_wrap');
+        this.#tabBottomBar = shadowRoot.querySelector('.ea-tabs_tab-bottom-bar');
+        this.#paneWrap = shadowRoot.querySelector('.ea-tabs_pane-wrap');
+        this.#tabSlot = shadowRoot.querySelector('.ea-tabs_tab-wrap > slot');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- type 标签样式类型 -------
+    // #region
+    get type() {
+        return this.getAttribute('type') || 'normal';
+    }
+
+    set type(value) {
+        this.setAttribute('type', value);
+
+        this.#wrap.classList.add('ea-tabs_wrap--' + value);
+
+        const items = this.querySelectorAll(`ea-tab`);
+        items.forEach(item => {
+            item.type = value;
+        });
+
+        if (value !== 'border-card') {
+            items[0].handleBorderRadius('--border-radius-top-left');
+            items[items.length - 1].handleBorderRadius('--border-radius-top-right');
+            items[items.length - 1].handleBorderRightWidth();
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- actived 标签是否被选中 -------
+    // #region
+    get actived() {
+        return this.getAttribute('actived') || this.querySelectorAll('ea-tab')[0].name || 0;
+    }
+
+    set actived(value) {
+        this.setAttribute('actived', value);
+
+        this.querySelectorAll('ea-tab').forEach((item, index) => {
+            item.actived = item.name === value;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- editable 标签是否可编辑 -------
+    // #region
+    get editable() {
+        return this.getAttrBoolean('editable') || false;
+    }
+
+    set editable(value) {
+        this.setAttribute('editable', value);
+
+        this.#handleEditable(value);
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleBottomBarMove(e) {
+        const items = this.querySelectorAll('ea-tab');
+        const paneItems = this.querySelectorAll('ea-pane');
+
+        const { width, height } = e.getBoundingClientRect();
+        const arr = Array.from(items);
+        const left = arr.reduce((pre, cur, index) => {
+            if (index <= e.index) return pre + cur.offsetWidth;
+
+            return pre;
+        }, 0);
+
+        const callback = (item, index) => {
+            item.actived = false;
+            item.index = index;
+        }
+
+        items.forEach(callback);
+        paneItems.forEach(callback);
+        e.actived = true;
+        this.querySelector(`ea-pane[name="${e.name}"]`).actived = true;
+
+        this.#tabBottomBar.style.left = left - width + 'px';
+        this.#tabBottomBar.style.width = width + 'px';
+        this.#tabBottomBar.style.top = height + 'px';
+    }
+
+    #handleSubItemsName() {
+        const items = this.querySelectorAll('ea-tab');
+        const paneItems = this.querySelectorAll('ea-pane');
+
+        const eventListener = (e) => {
+            this.#handleBottomBarMove(e.detail.event);
+            this.actived = e.detail.name;
+            e.detail.event.actived = true;
+        }
+
+        items.forEach((item, index) => {
+            item.index = index;
+
+            if (!item.name) item.name = index;
+
+            item.removeEventListener('tab-click', eventListener);
+            item.addEventListener('tab-click', eventListener);
+        })
+
+        paneItems.forEach((item, index) => {
+            item.index = index;
+
+            if (!item.name) item.name = index;
+        })
+    }
+
+    #initBottomBarMove() {
+        timeout(() => {
+            const item = this.querySelector('ea-tab[name="' + this.actived + '"]');
+            item.actived = true;
+            this.#handleBottomBarMove(item);
+        }, 20)
+    }
+
+    #handleTabCloseEventListener(e) {
+        e.stopPropagation();
+
+        const items = this.querySelectorAll('ea-tab');
+        const { name, event, index } = e.detail;
+        let willActivedIndex = index;
+
+        if (items[index + 1]) {
+            willActivedIndex = index + 1;
+        } else if (items[index - 1]) {
+            willActivedIndex = index - 1;
+        }
+
+
+        try {
+            this.actived = items[willActivedIndex]?.name;
+
+            event.remove();
+            this.querySelector(`ea-pane[name="${name}"]`).remove();
+
+            if (items.length <= 1) {
+                this.#tabBottomBar.style.width = 0;
+            } else {
+                this.#initBottomBarMove();
+                this.#handleSubItemsName();
+            }
+        } catch (error) { }
+    }
+
+    #handleEditable(value) {
+        this.querySelectorAll('ea-tab').forEach(item => {
+            item.editable = value;
+        });
+
+        this.removeEventListener('tab-close', this.#handleTabCloseEventListener);
+        this.addEventListener('tab-close', this.#handleTabCloseEventListener);
+    }
+
+    #handleTabAdd() {
+        timeout(() => {
+            this.#previousNodesLen = this.#tabSlot.assignedNodes().length;
+
+            this.#tabSlot.addEventListener('slotchange', (e) => {
+                const currentNodesLen = e.target.assignedNodes().length;
+
+                if (currentNodesLen >= this.#previousNodesLen) {
+                    this.#handleSubItemsName();
+                    this.#handleEditable(this.editable);
+                    this.type = this.type;
+
+                    this.#previousNodesLen = currentNodesLen;
+
+                    this.dispatchEvent(new CustomEvent('tab-add', {
+                        detail: {
+                            event: e,
+                            tabs: this.querySelectorAll('ea-tab'),
+                            panes: this.querySelectorAll('ea-pane'),
+                        },
+                        bubbles: true,
+                        composed: true,
+                    }));
+
+                } else {
+                    this.#previousNodesLen = this.#tabSlot.assignedNodes().length;
+                }
+            })
+        }, 20)
+    }
+
+    connectedCallback() {
+        this.type = this.type;
+
+        this.actived = this.actived;
+
+        this.editable = this.editable;
+
+        this.#initBottomBarMove();
+        this.#handleSubItemsName();
+        this.#handleTabAdd();
+    }
+}
+
+if (!customElements.get('ea-tabs')) {
+    customElements.define('ea-tabs', EaTabs);
+}

package/components/ea-tabs/index.scss

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

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

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