easy-component-ui 2.1.1 → 3.0.1

package/components/ea-menu/index.js

@@ -1,131 +0,0 @@
-// @ts-nocheck
-import { timeout } from '../../utils/timeout.js';
-import { handleMenuItemEvent } from './src/utils/handleMenuItemEvent.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-import "../ea-menu-item/index.js"
-import "../ea-submenu/index.js"
-import "../ea-menu-item-group/index.js"
-
-export class EaMenu extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-menu_wrap" part="container">
-                <slot></slot>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-menu_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- mode 顶栏排列方式 -------
-    // #region
-    get mode() {
-        return this.getAttribute('mode') || 'vertical';
-    }
-
-    set mode(value) {
-        this.setAttribute('mode', value);
-
-        this.#wrap.classList.toggle('is-vertical', value === 'vertical');
-        this.querySelectorAll('ea-submenu').forEach((item) => {
-            item.mode = value;
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- background-color 背景颜色 -------
-    // #region
-    get backgroundColor() {
-        return this.getAttribute('background-color') || '#fff';
-    }
-
-    set backgroundColor(value) {
-        this.setAttribute('background-color', value);
-
-        this.#wrap.style.backgroundColor = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- text-color 文字颜色 -------
-    // #region
-    get textColor() {
-        return this.getAttribute('text-color') || '#303133';
-    }
-
-    set textColor(value) {
-        this.setAttribute('text-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-text-color 激活文字颜色 -------
-    // #region
-    get activeTextColor() {
-        return this.getAttribute('active-text-color') || '#409eff';
-    }
-
-    set activeTextColor(value) {
-        this.setAttribute('active-text-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- collapse 是否折叠 -------
-    // #region
-    get collapse() {
-        return this.getAttrBoolean('collapse');
-    }
-
-    set collapse(value) {
-        this.toggleAttr('collapse', value);
-
-        this.querySelectorAll('ea-menu-item-group').forEach((item) => {
-            if (this.mode === 'vertical') item.collapse = !value;
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.mode = this.mode;
-
-        this.collapse = true;
-
-        this.backgroundColor = this.backgroundColor;
-        this.textColor = this.textColor;
-        this.activeTextColor = this.activeTextColor;
-
-        const menuItems = this.querySelectorAll('ea-menu-item');
-        const subMenuItems = this.querySelectorAll('ea-submenu');
-        const menuItemGroups = this.querySelectorAll('ea-menu-item-group');
-
-        handleMenuItemEvent.call(this, menuItems, subMenuItems, menuItemGroups);
-
-        const callback = (item, index) => {
-            item.backgroundColor = this.backgroundColor;
-            item.textColor = this.textColor;
-            item.activeTextColor = this.activeTextColor;
-        }
-        menuItems.forEach(callback);
-
-        subMenuItems.forEach(callback);
-
-        menuItemGroups.forEach(callback);
-    }
-}
-
-if (!customElements.get('ea-menu')) {
-    customElements.define('ea-menu', EaMenu);
-}

package/components/ea-menu/index.scss

@@ -1,22 +0,0 @@
-.ea-menu_wrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 20px;
-
-  &.is-vertical {
-    flex-direction: column;
-    align-items: flex-start;
-    border-right: 1px solid #e6e6e6;
-    overflow: auto;
-
-    ::slotted(ea-menu-item),
-    ::slotted(ea-submenu) {
-      width: 100%;
-    }
-
-    ::slotted(ea-submenu) {
-      width: 100%;
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-export const stylesheet = `
-.ea-menu_wrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 20px;
-}
-.ea-menu_wrap.is-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  border-right: 1px solid #e6e6e6;
-  overflow: auto;
-}
-.ea-menu_wrap.is-vertical ::slotted(ea-menu-item),
-.ea-menu_wrap.is-vertical ::slotted(ea-submenu) {
-  width: 100%;
-}
-.ea-menu_wrap.is-vertical ::slotted(ea-submenu) {
-  width: 100%;
-}
-`;

package/components/ea-menu/src/utils/handleMenuItemEvent.js

@@ -1,32 +0,0 @@
-const callback = (item) => {
-    item.actived = false;
-}
-
-function cancelItemActived(menuItems, subMenuItems, menuItemGroups) {
-    menuItems.forEach(callback);
-
-    subMenuItems.forEach(callback);
-
-    menuItemGroups.forEach(callback);
-}
-
-export function handleMenuItemEvent(menuItems, subMenuItems, menuItemGroups) {
-    menuItems.forEach((item, index) => {
-        item.itemIndex = index;
-
-        item.addEventListener('item-selected', (e) => {
-            const itemTitle = e.detail.title;
-
-            cancelItemActived(menuItems, subMenuItems, menuItemGroups);
-
-            item.actived = true;
-
-            this.dispatchEvent(new CustomEvent('select', {
-                detail: {
-                    index,
-                    title: itemTitle,
-                },
-            }));
-        });
-    });
-}

package/components/ea-menu-item/index.css

@@ -1,48 +0,0 @@
-.ea-menu-item_wrap {
-  --normal-bgc: #fff;
-  --normal-text-color: #303133;
-  --actived-text-color: #409eff;
-  --actived-bgc: #fff;
-  box-sizing: border-box;
-  padding: 0 20px;
-  border-bottom: 2px solid;
-  border-color: transparent;
-  height: 60px;
-  line-height: 60px;
-  font-size: 14px;
-  color: var(--normal-text-color);
-  background-color: var(--normal-bgc);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-}
-.ea-menu-item_wrap.is-actived {
-  color: var(--actived-text-color);
-  border-color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-actived ::slotted(a) {
-  color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-sub-actived {
-  color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-sub-actived ::slotted(a) {
-  color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-disabled {
-  color: #c0c4cc;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.ea-menu-item_wrap.is-disabled ::slotted(a) {
-  color: #c0c4cc;
-}
-.ea-menu-item_wrap ::slotted(a) {
-  color: var(--normal-text-color);
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

package/components/ea-menu-item/index.js

@@ -1,130 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaMenuItem extends Base {
-    #wrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-menu-item_wrap" part="container">
-                <slot></slot>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-menu-item_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- actived 菜单激活状态 -------
-    // #region
-    get actived() {
-        return this.getAttrBoolean('actived');
-    }
-
-    set actived(value) {
-        this.setAttribute('actived', value);
-
-        if (this.isSubItem) {
-            this.#wrap.classList.toggle('is-sub-actived', value);
-        } else {
-            this.#wrap.classList.toggle('is-actived', value);
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- isSubItem 是否为子菜单 -------
-    // #region
-    get isSubItem() {
-        return this.getAttrBoolean('is-sub-item');
-    }
-    set isSubItem(value) {
-        if (!value) return;
-
-        this.setAttribute('is-sub-item', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- background-color 背景颜色 -------
-    // #region
-    get backgroundColor() {
-        return this.getAttribute('background-color') || '#fff';
-    }
-
-    set backgroundColor(value) {
-        this.setAttribute('background-color', value);
-
-        this.#wrap.style.setProperty('--normal-bgc', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- text-color 文字颜色 -------
-    // #region
-    get textColor() {
-        return this.getAttribute('text-color') || '#303133';
-    }
-
-    set textColor(value) {
-        this.setAttribute('text-color', value);
-
-        this.#wrap.style.setProperty('--normal-text-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-text-color 激活文字颜色 -------
-    // #region
-    get activeTextColor() {
-        return this.getAttribute('active-text-color') || '#409eff';
-    }
-
-    set activeTextColor(value) {
-        this.setAttribute('active-text-color', value);
-
-        this.#wrap.style.setProperty('--actived-text-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled');
-    }
-
-    set disabled(value) {
-        this.setAttribute('disabled', value);
-
-        this.#wrap.classList.toggle('is-disabled', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.actived = this.actived;
-
-        this.disabled = this.disabled;
-
-        this.#wrap.addEventListener('click', () => {
-            this.dispatchEvent(new CustomEvent('item-selected', {
-                detail: {
-                    index: this.index,
-                    title: this.textContent,
-                },
-            }));
-        });
-    }
-}
-
-if (!customElements.get('ea-menu-item')) {
-    customElements.define('ea-menu-item', EaMenuItem);
-}

package/components/ea-menu-item/index.scss

@@ -1,62 +0,0 @@
-.ea-menu-item_wrap {
-  --normal-bgc: #fff;
-  --normal-text-color: #303133;
-
-  --actived-text-color: #409eff;
-  --actived-bgc: #fff;
-
-  box-sizing: border-box;
-  padding: 0 20px;
-  border-bottom: 2px solid;
-  border-color: transparent;
-
-  height: 60px;
-  line-height: 60px;
-
-  font-size: 14px;
-  color: var(--normal-text-color);
-  background-color: var(--normal-bgc);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  cursor: pointer;
-
-  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-
-  &.is-actived {
-    color: var(--actived-text-color);
-    border-color: var(--actived-text-color);
-
-    ::slotted(a) {
-      color: var(--actived-text-color);
-    }
-  }
-
-  &.is-sub-actived {
-    color: var(--actived-text-color);
-
-    ::slotted(a) {
-      color: var(--actived-text-color);
-    }
-  }
-
-  &.is-disabled {
-    color: #c0c4cc;
-    pointer-events: none;
-    cursor: not-allowed;
-
-    ::slotted(a) {
-      color: #c0c4cc;
-    }
-  }
-
-  ::slotted(a) {
-    color: var(--normal-text-color);
-    text-decoration: none;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}

package/components/ea-menu-item/src/style/stylesheet.js

@@ -1,50 +0,0 @@
-export const stylesheet = `
-.ea-menu-item_wrap {
-  --normal-bgc: #fff;
-  --normal-text-color: #303133;
-  --actived-text-color: #409eff;
-  --actived-bgc: #fff;
-  box-sizing: border-box;
-  padding: 0 20px;
-  border-bottom: 2px solid;
-  border-color: transparent;
-  height: 60px;
-  line-height: 60px;
-  font-size: 14px;
-  color: var(--normal-text-color);
-  background-color: var(--normal-bgc);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-}
-.ea-menu-item_wrap.is-actived {
-  color: var(--actived-text-color);
-  border-color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-actived ::slotted(a) {
-  color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-sub-actived {
-  color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-sub-actived ::slotted(a) {
-  color: var(--actived-text-color);
-}
-.ea-menu-item_wrap.is-disabled {
-  color: #c0c4cc;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.ea-menu-item_wrap.is-disabled ::slotted(a) {
-  color: #c0c4cc;
-}
-.ea-menu-item_wrap ::slotted(a) {
-  color: var(--normal-text-color);
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-`;

package/components/ea-menu-item-group/index.css

@@ -1,42 +0,0 @@
-.ea-menu-item-group_wrap {
-  --normal-bgc: #fff;
-  --normal-text-color: #303133;
-  --actived-text-color: #409eff;
-  --actived-bgc: #fff;
-  width: 100%;
-}
-.ea-menu-item-group_wrap.is-actived .ea-submenu_title_wrap {
-  color: var(--actived-text-color);
-  border-color: var(--actived-text-color);
-}
-.ea-menu-item-group_wrap .ea-submenu_title_wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 20px;
-  border-bottom: 2px solid;
-  border-color: transparent;
-  height: 60px;
-  line-height: 60px;
-  font-size: 14px;
-  color: var(--normal-text-color);
-  background-color: var(--normal-bgc);
-  white-space: nowrap;
-  cursor: pointer;
-  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-}
-.ea-menu-item-group_wrap .ea-submenu_items_wrap {
-  margin: 0 20px;
-  height: 0;
-  overflow: hidden;
-  transition: height 0.3s;
-}
-.ea-menu-item-group_wrap .ea-submenu_dropdown_icon {
-  transform: rotate(-90deg);
-  transition: transform 0.3s;
-}
-.ea-menu-item-group_wrap.is-open .ea-submenu_dropdown_icon {
-  transform: rotate(0deg);
-}

package/components/ea-menu-item-group/index.js

@@ -1,130 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-import { timeout } from '../../utils/timeout.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaMenuItemGroup extends Base {
-    #wrap;
-    #titleWrap;
-    #subItemsWrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-menu-item-group_wrap" part="container">
-                <div class="ea-submenu_title_wrap" part="title-wrap">
-                    <slot name="title"></slot>
-                    <ea-icon class="ea-submenu_dropdown_icon" icon="icon-angle-down" part="dropdown-icon"></ea-icon>
-                </div>
-                <div class="ea-submenu_items_wrap" part="dropdown-wrap">
-                    <slot></slot>
-                </div>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-menu-item-group_wrap');
-        this.#titleWrap = shadowRoot.querySelector('.ea-submenu_title_wrap');
-        this.#subItemsWrap = shadowRoot.querySelector('.ea-submenu_items_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-
-    // ------- actived 菜单激活状态 -------
-    // #region
-    get actived() {
-        return this.getAttrBoolean('actived');
-    }
-
-    set actived(value) {
-        this.setAttribute('actived', value);
-
-        this.#wrap.classList.toggle('is-actived', value);
-    }
-    // #endregion
-    // ------- end -------
-
-
-    // ------- background-color 背景颜色 -------
-    // #region
-    get backgroundColor() {
-        return this.getAttribute('background-color') || '#fff';
-    }
-
-    set backgroundColor(value) {
-        this.setAttribute('background-color', value);
-
-        this.#wrap.style.setProperty('--normal-bgc', value);
-    }
-    // #endregion
-    // ------- end -------
-
-
-    // ------- text-color 文字颜色 -------
-    // #region
-    get textColor() {
-        return this.getAttribute('text-color') || '#303133';
-    }
-
-    set textColor(value) {
-        this.setAttribute('text-color', value);
-
-        this.#wrap.style.setProperty('--normal-text-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-text-color 激活文字颜色 -------
-    // #region
-    get activeTextColor() {
-        return this.getAttribute('active-text-color') || '#409eff';
-    }
-
-    set activeTextColor(value) {
-        this.setAttribute('active-text-color', value);
-
-        this.#wrap.style.setProperty('--actived-text-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- collapse 是否折叠 -------
-    // #region
-    get collapse() {
-        return this.getAttrBoolean('collapse') || false;
-    }
-
-    set collapse(value) {
-        this.setAttribute('collapse', value);
-
-        this.#subItemsWrap.style.height = value ? this.#subItemsWrap.scrollHeight + 'px' : '0';
-        this.#wrap.classList.toggle('is-open', value)
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.style.width = "100%";
-
-        const items = this.querySelectorAll('ea-menu-item');
-        items.forEach((item) => {
-            item.isSubItem = true;
-
-            item.addEventListener('item-selected', (e) => {
-                timeout(() => {
-                    this.actived = true;
-                }, 20);
-            });
-        });
-
-        this.#titleWrap.addEventListener('click', (e) => {
-            this.collapse = !this.collapse;
-        });
-    }
-}
-
-if (!customElements.get('ea-menu-item-group')) {
-    customElements.define('ea-menu-item-group', EaMenuItemGroup);
-}