easy-component-ui 2.1.1 → 3.0.1

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

@@ -1,100 +0,0 @@
-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,164 +0,0 @@
-// @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

@@ -1,45 +0,0 @@
-.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,245 +0,0 @@
-// @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

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