easy-component-ui 2.0.4 → 2.1.0

package/components/ea-menu/index.js

@@ -1 +1,131 @@
-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{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-menu_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#t=t.querySelector(".ea-menu_wrap"),this.build(t,stylesheet)}get mode(){return this.getAttribute("mode")||"vertical"}set mode(t){this.setAttribute("mode",t),this.#t.classList.toggle("is-vertical","vertical"===t),this.querySelectorAll("ea-submenu").forEach((e=>{e.mode=t}))}get backgroundColor(){return this.getAttribute("background-color")||"#fff"}set backgroundColor(t){this.setAttribute("background-color",t),this.#t.style.backgroundColor=t}get textColor(){return this.getAttribute("text-color")||"#303133"}set textColor(t){this.setAttribute("text-color",t)}get activeTextColor(){return this.getAttribute("active-text-color")||"#409eff"}set activeTextColor(t){this.setAttribute("active-text-color",t)}get collapse(){return this.getAttrBoolean("collapse")}set collapse(t){this.toggleAttr("collapse",t),this.querySelectorAll("ea-menu-item-group").forEach((e=>{"vertical"===this.mode&&(e.collapse=!t)}))}connectedCallback(){this.mode=this.mode,this.collapse=!0,this.backgroundColor=this.backgroundColor,this.textColor=this.textColor,this.activeTextColor=this.activeTextColor;const t=this.querySelectorAll("ea-menu-item"),e=this.querySelectorAll("ea-submenu"),o=this.querySelectorAll("ea-menu-item-group");handleMenuItemEvent.call(this,t,e,o);const r=(t,e)=>{t.backgroundColor=this.backgroundColor,t.textColor=this.textColor,t.activeTextColor=this.activeTextColor};t.forEach(r),e.forEach(r),o.forEach(r)}}customElements.get("ea-menu")||customElements.define("ea-menu",EaMenu);
+// @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

@@ -0,0 +1,22 @@
+.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 +1,21 @@
-export const stylesheet="\n.ea-menu_wrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 20px;\n}\n.ea-menu_wrap.is-vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  border-right: 1px solid #e6e6e6;\n  overflow: auto;\n}\n.ea-menu_wrap.is-vertical ::slotted(ea-menu-item),\n.ea-menu_wrap.is-vertical ::slotted(ea-submenu) {\n  width: 100%;\n}\n.ea-menu_wrap.is-vertical ::slotted(ea-submenu) {\n  width: 100%;\n}\n";
+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 +1,32 @@
-const callback=e=>{e.actived=!1};function cancelItemActived(e,t,c){e.forEach(callback),t.forEach(callback),c.forEach(callback)}export function handleMenuItemEvent(e,t,c){e.forEach(((a,n)=>{a.itemIndex=n,a.addEventListener("item-selected",(l=>{const i=l.detail.title;cancelItemActived(e,t,c),a.actived=!0,this.dispatchEvent(new CustomEvent("select",{detail:{index:n,title:i}}))}))}))}
+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

@@ -0,0 +1,48 @@
+.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 +1,130 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaMenuItem extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-menu-item_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#t=t.querySelector(".ea-menu-item_wrap"),this.build(t,stylesheet)}get actived(){return this.getAttrBoolean("actived")}set actived(t){this.setAttribute("actived",t),this.isSubItem?this.#t.classList.toggle("is-sub-actived",t):this.#t.classList.toggle("is-actived",t)}get isSubItem(){return this.getAttrBoolean("is-sub-item")}set isSubItem(t){t&&this.setAttribute("is-sub-item",t)}get backgroundColor(){return this.getAttribute("background-color")||"#fff"}set backgroundColor(t){this.setAttribute("background-color",t),this.#t.style.setProperty("--normal-bgc",t)}get textColor(){return this.getAttribute("text-color")||"#303133"}set textColor(t){this.setAttribute("text-color",t),this.#t.style.setProperty("--normal-text-color",t)}get activeTextColor(){return this.getAttribute("active-text-color")||"#409eff"}set activeTextColor(t){this.setAttribute("active-text-color",t),this.#t.style.setProperty("--actived-text-color",t)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#t.classList.toggle("is-disabled",t)}connectedCallback(){this.actived=this.actived,this.disabled=this.disabled,this.#t.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("item-selected",{detail:{index:this.index,title:this.textContent}}))}))}}customElements.get("ea-menu-item")||customElements.define("ea-menu-item",EaMenuItem);
+// @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

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

@@ -0,0 +1,42 @@
+.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 +1,130 @@
-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{#t;#e;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-menu-item-group_wrap" part="container">\n                <div class="ea-submenu_title_wrap" part="title-wrap">\n                    <slot name="title"></slot>\n                    <ea-icon class="ea-submenu_dropdown_icon" icon="icon-angle-down" part="dropdown-icon"></ea-icon>\n                </div>\n                <div class="ea-submenu_items_wrap" part="dropdown-wrap">\n                    <slot></slot>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-menu-item-group_wrap"),this.#e=t.querySelector(".ea-submenu_title_wrap"),this.#s=t.querySelector(".ea-submenu_items_wrap"),this.build(t,stylesheet)}get actived(){return this.getAttrBoolean("actived")}set actived(t){this.setAttribute("actived",t),this.#t.classList.toggle("is-actived",t)}get backgroundColor(){return this.getAttribute("background-color")||"#fff"}set backgroundColor(t){this.setAttribute("background-color",t),this.#t.style.setProperty("--normal-bgc",t)}get textColor(){return this.getAttribute("text-color")||"#303133"}set textColor(t){this.setAttribute("text-color",t),this.#t.style.setProperty("--normal-text-color",t)}get activeTextColor(){return this.getAttribute("active-text-color")||"#409eff"}set activeTextColor(t){this.setAttribute("active-text-color",t),this.#t.style.setProperty("--actived-text-color",t)}get collapse(){return this.getAttrBoolean("collapse")||!1}set collapse(t){this.setAttribute("collapse",t),this.#s.style.height=t?this.#s.scrollHeight+"px":"0",this.#t.classList.toggle("is-open",t)}connectedCallback(){this.style.width="100%";this.querySelectorAll("ea-menu-item").forEach((t=>{t.isSubItem=!0,t.addEventListener("item-selected",(t=>{timeout((()=>{this.actived=!0}),20)}))})),this.#e.addEventListener("click",(t=>{this.collapse=!this.collapse}))}}customElements.get("ea-menu-item-group")||customElements.define("ea-menu-item-group",EaMenuItemGroup);
+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);
+}