easy-component-ui 2.0.5 → 2.1.1

package/components/ea-tab/index.js

@@ -1 +1,138 @@
-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);
+// @ts-nocheck
+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 {
+    #wrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-tab_wrap" part="container">
+                <slot></slot>
+            </div>
+        `;
+        this.#wrap = shadowRoot.querySelector('.ea-tab_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- name 唯一标识 -------
+    // #region
+    get name() {
+        return this.getAttribute('name');
+    }
+
+    set name(value) {
+        this.setAttribute('name', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- type 标签样式类型 -------
+    // #region
+    get type() {
+        return this.getAttrBoolean('type') || 'normal';
+    }
+
+    set type(value) {
+        this.setAttribute('type', value);
+
+        this.#wrap.classList.add(`ea-tab_wrap--${value}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- actived 标签是否被选中 -------
+    // #region
+    get actived() {
+        return this.getAttrBoolean('actived');
+    }
+
+    set actived(value) {
+        this.toggleAttr('actived', value);
+
+        this.#wrap.classList.toggle('is-actived', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- editable 是否可关闭 -------
+    // #region
+    get editable() {
+        return this.getAttrBoolean('editable');
+    }
+
+    set editable(value) {
+        this.setAttribute('editable', value);
+        this.#wrap.classList.toggle('ea-tab_wrap--editable', value);
+
+        if (value) {
+            this.#handleTabCloasable();
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleSelectedEvent() {
+        this.addEventListener('click', (e) => {
+            const isSelected = e.detail.value === this.getAttrBoolean('selected');
+            this.toggleAttr('selected', isSelected)
+
+            this.dispatchEvent(new CustomEvent('tab-click', {
+                detail: {
+                    name: this.name,
+                    event: this,
+                },
+                bubbles: true,
+            }));
+        });
+    }
+
+    #handleTabCloasable() {
+        const span = createElement('span', 'ea-tab_wrap--editable-sign');
+        span.innerText = 'x';
+        this.#wrap.appendChild(span);
+
+        span.addEventListener('click', (e) => {
+            e.stopPropagation();
+
+            this.dispatchEvent(new CustomEvent('tab-close', {
+                detail: {
+                    event: this,
+                    name: this.name,
+                    index: this.index,
+                },
+                bubbles: true,
+            }));
+        });
+    }
+
+    handleBorderRadius(key) {
+        this.#wrap.style.setProperty(key, '3px');
+    }
+
+    handleBorderRightWidth() {
+        this.#wrap.style.setProperty('--border-right-width', '1px');
+    }
+
+    connectedCallback() {
+        this.editable = this.editable;
+
+        this.label = this.label;
+
+        this.#handleSelectedEvent();
+    }
+}
+
+if (!customElements.get('ea-tab')) {
+    customElements.define('ea-tab', EaTab);
+}

package/components/ea-tab/index.scss

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

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

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

package/components/ea-table/index.css

@@ -0,0 +1,98 @@
+.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;
+}