easy-component-ui 1.0.3 → 2.0.1

package/components/ea-link/index.js

@@ -1,200 +1 @@
-// @ts-nocheck
-import Base from '../Base.js'
-import "../ea-icon/index.js"
-
-const stylesheet = `
-.__ea-link {
-  text-decoration: none;
-  color: #606266;
-  cursor: pointer;
-}
-.__ea-link:hover {
-  color: #797b80;
-}
-.__ea-link.underline:hover {
-  text-decoration: underline;
-}
-.__ea-link.primary {
-  color: #409eff;
-}
-.__ea-link.primary:hover {
-  color: #73b8ff;
-}
-.__ea-link.success {
-  color: #67c23a;
-}
-.__ea-link.success:hover {
-  color: #85cf60;
-}
-.__ea-link.info {
-  color: #909399;
-}
-.__ea-link.info:hover {
-  color: #abadb1;
-}
-.__ea-link.warning {
-  color: #e6a23c;
-}
-.__ea-link.warning:hover {
-  color: #ecb869;
-}
-.__ea-link.danger {
-  color: #f56c6c;
-}
-.__ea-link.danger:hover {
-  color: #f89c9c;
-}
-.__ea-link.disabled {
-  color: #c0c4cc;
-  pointer-events: none;
-}
-.__ea-link.disabled:hover {
-  color: #dcdee3;
-}
-`;
-
-export class EaLink extends Base {
-  constructor() {
-    super();
-
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    let dom = document.createElement('a');;
-
-    const slot = document.createElement('slot');
-    dom.className = "__ea-link";
-    dom.appendChild(slot);
-
-    this.dom = dom;
-
-    this.build(shadowRoot, stylesheet);
-    this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-    shadowRoot.appendChild(dom);
-  }
-
-  static get observedAttributes() {
-    return ['disabled'];
-  }
-
-  get LINK_TYPE() {
-    return ['primary', 'success', 'info', 'warning', 'danger'];
-  }
-
-  // ------- href链接 -------
-  // #region
-  get href() {
-    return this.getAttribute('href');
-  }
-
-  set href(value) {
-    if (value !== null) this.dom.href = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- type类型 -------
-  // #region
-  get type() {
-    return this.getAttribute('type');
-  }
-
-  set type(value) {
-    if (value === null) return;
-
-    for (let i = 0; i < this.LINK_TYPE.length; i++) {
-      if (value === this.LINK_TYPE[i]) {
-        this.dom.classList.add(value);
-        break;
-      }
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- disabled禁用状态 -------
-  // #region
-  get disabled() {
-    return this.getAttribute('disabled') === "" || this.getAttribute('disabled') === 'true';
-  }
-
-  set disabled(value) {
-    if (!value) return;
-
-    if (value) {
-      this.dom.classList.add('disabled');
-    } else {
-      this.dom.classList.remove('disabled');
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- underline下划线 -------
-  // #region
-  get underline() {
-    return this.getAttribute('underline') === "" || this.getAttribute('underline') === 'true';
-  }
-
-  set underline(value) {
-    if (!value) return;
-
-    if (value) {
-      this.dom.classList.add('underline');
-    } else {
-      this.dom.classList.remove('underline');
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- icon图标 -------
-  // #region
-  get icon() {
-    return this.getAttribute('icon');
-  }
-
-  set icon(value) {
-    if (value === null || value === "") return;
-
-    const icon = document.createElement('i');
-    icon.className = value;
-    this.dom.insertBefore(icon, this.dom.firstChild);
-  }
-  // #endregion
-  // ------- end -------
-
-  init() {
-    // 设置链接
-    this.href = this.href;
-
-    // 设置类型
-    this.type = this.type;
-
-    // 禁用状态
-    this.disabled = this.disabled;
-
-    // 设置下划线
-    this.underline = this.underline;
-
-    // 图标
-    this.icon = this.icon;
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'disabled':
-        this.disabled = newVal === "" || newVal === 'true' || newVal === true;
-        break;
-      default: break;
-    }
-  }
-}
-
-if (!window.customElements.get("ea-link")) {
-  window.customElements.define("ea-link", EaLink);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaLink extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n      <div class="ea-link" part="container">\n        <slot></slot>\n      </div>\n    ',this.#t=t.querySelector(".ea-link"),this.build(t,stylesheet)}get LINK_TYPE(){return["primary","success","info","warning","danger"]}get href(){return this.getAttribute("href")}set href(t){t&&(this.setAttribute("href",t),this.#t.href=t)}get type(){const t=this.getAttribute("type");return this.LINK_TYPE.includes(t)?t:null}set type(t){t&&this.LINK_TYPE.includes(t)&&this.#t.classList.add(t)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#t.classList.toggle("disabled",t),this.style.cursor=t?"not-allowed":"pointer"}get underline(){return this.getAttrBoolean("underline")}set underline(t){this.#t.classList.toggle("underline",t)}get icon(){return this.getAttribute("icon")}set icon(t){if(!t)return;const e=document.createElement("ea-icon");e.icon=t,this.#t.insertBefore(e,this.#t.firstChild)}connectedCallback(){this.style.display="inline-block",this.href=this.href,this.type=this.type,this.disabled=this.disabled,this.underline=this.underline,this.icon=this.icon}}window.customElements.get("ea-link")||window.customElements.define("ea-link",EaLink);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-link {\n  text-decoration: none;\n  color: #606266;\n  cursor: pointer;\n}\n.ea-link:hover {\n  color: #797b80;\n}\n.ea-link.underline:hover {\n  text-decoration: underline;\n}\n.ea-link.primary {\n  color: #409eff;\n}\n.ea-link.primary:hover {\n  color: #73b8ff;\n}\n.ea-link.success {\n  color: #67c23a;\n}\n.ea-link.success:hover {\n  color: #85cf60;\n}\n.ea-link.info {\n  color: #909399;\n}\n.ea-link.info:hover {\n  color: #abadb1;\n}\n.ea-link.warning {\n  color: #e6a23c;\n}\n.ea-link.warning:hover {\n  color: #ecb869;\n}\n.ea-link.danger {\n  color: #f56c6c;\n}\n.ea-link.danger:hover {\n  color: #f89c9c;\n}\n.ea-link.disabled {\n  color: #c0c4cc;\n  pointer-events: none;\n}\n.ea-link.disabled:hover {\n  color: #dcdee3;\n}\n";

package/components/ea-loading/index.js

@@ -1,218 +1 @@
-// @ts-nocheck
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-import Base from '../Base.js';
-import "../ea-icon/index.js"
-
-const stylesheet = `
-.ea-loading_wrap {
-  position: relative;
-}
-.ea-loading_wrap i {
-  opacity: 0;
-  transition: opacity 0.2s;
-  color: #409eff;
-}
-.ea-loading_wrap .ea-loading_text {
-  color: #409eff;
-  margin-left: 0.5rem;
-}
-.ea-loading_wrap.ea-loading_wrap--fullscreen {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 999;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background-color: hsla(0, 0%, 100%, 0.9);
-  z-index: 1;
-  transition: background-color 0.2s;
-}
-.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask i {
-  opacity: 1;
-  font-size: 2rem;
-}
-`;
-
-export class EaLoading extends Base {
-    #wrap;
-
-    #loadingWrap;
-
-    #spinner;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-loading_wrap';
-
-        const spinner = createElement('i', 'ea-loading_spinner animate-spin');
-        const loading = createElement('div', 'ea-loading', spinner);
-        const loadingWrap = createElement('div', 'ea-loading_mask', loading);
-        wrap.appendChild(loadingWrap);
-
-        const slot = createSlotElement('')
-        wrap.appendChild(slot);
-
-        this.#wrap = wrap;
-        this.#loadingWrap = loadingWrap;
-        this.#spinner = spinner;
-
-        this.build(shadowRoot, stylesheet);
-        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- loading 加载状态 -------
-    // #region
-    get loading() {
-        return this.getAttrBoolean('loading') || false;
-    }
-
-    set loading(flag) {
-        this.toggleAttr('loading', flag);
-
-        if (flag) {
-            this.#wrap.classList.add('ea-loading_wrap--loading');
-            this.#loadingWrap.style.display = "flex";
-        } else {
-            this.#wrap.classList.remove('ea-loading_wrap--loading');
-            this.#loadingWrap.style.display = "none";
-        }
-
-        this.handleFullscreen(this.fullscreen, flag, this.lock);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- spinner 加载图标 -------
-    // #region
-    get spinner() {
-        return this.getAttribute('spinner') || "icon-spin6";
-    }
-
-    set spinner(val) {
-        this.setAttribute('spinner', val);
-
-        this.#spinner.className = `ea-loading_spinner animate-spin ${val}`;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- spinner-size 加载图标大小 -------
-    // #region
-    get spinnerSize() {
-        return this.getAttrNumber('spinner-size') || 16;
-    }
-
-    set spinnerSize(val) {
-        this.setAttribute('spinner-size', val);
-
-        this.#spinner.style.fontSize = `${val}px`;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- background 背景颜色 -------
-    // #region
-    get background() {
-        return this.getAttribute('background') || "hsla(0, 0%, 100%, 0.9)";
-    }
-
-    set background(val) {
-        this.setAttribute('background', val);
-
-        this.#loadingWrap.style.backgroundColor = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- text 文本 -------
-    // #region
-    get text() {
-        return this.getAttribute('text') || "";
-    }
-
-    set text(val) {
-        this.setAttribute('text', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- fullscreen 全屏 -------
-    // #region
-    get fullscreen() {
-        return this.getAttrBoolean('fullscreen') || false;
-    }
-
-    set fullscreen(val) {
-        this.setAttribute('fullscreen', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- lock 全屏是否锁定 -------
-    // #region
-    get lock() {
-        return this.getAttrBoolean('lock') || false;
-    }
-
-    set lock(val) {
-        this.setAttribute('lock', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    initTextElement(text) {
-        const el = createElement('div', 'ea-loading_text');
-        el.innerHTML = text;
-        this.#loadingWrap.appendChild(el);
-    }
-
-    handleFullscreen(isFullscreen, isLoading, isLock) {
-        if (isFullscreen) {
-            this.#wrap.classList.toggle('ea-loading_wrap--fullscreen', isLoading);
-            this.#wrap.style.display = isLoading ? 'block' : 'none';
-
-            if (isLock) document.body.style.overflow = isLoading ? 'hidden' : 'auto';
-        }
-    }
-
-    init() {
-        const that = this;
-
-        this.fullscreen = this.fullscreen;
-
-
-
-        this.loading = this.loading;
-
-        this.spinnerSize = this.spinnerSize;
-
-        this.spinner = this.spinner;
-
-        this.background = this.background;
-
-        if (this.text) this.initTextElement(this.text);
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-loading')) {
-    customElements.define('ea-loading', EaLoading);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaLoading extends Base{#e;#t;#s;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n        <div class="ea-loading_wrap" part="container">\n            <div class="ea-loading_mask" part="mask-mask">\n                <ea-icon icon="icon-spin6 animate-spin" class="ea-loading_spinner" part="icon"></ea-icon>\n            </div>\n            <slot></slot>\n        </div>\n        ',this.#e=e.querySelector(".ea-loading_wrap"),this.#t=e.querySelector(".ea-loading_mask"),this.#s=e.querySelector(".ea-loading_spinner"),this.build(e,stylesheet)}get loading(){return this.getAttrBoolean("loading")||!1}set loading(e){this.setAttribute("loading",e),this.#e.classList.toggle("ea-loading_wrap--loading",e),this.#n(this.fullscreen,e,this.lock)}get spinner(){return this.getAttribute("spinner")||"icon-spin6"}set spinner(e){this.setAttribute("spinner",e),this.#s.icon=`${e} animate-spin`}get spinnerSize(){return this.getAttrNumber("spinner-size")||16}set spinnerSize(e){this.setAttribute("spinner-size",e),this.#s.style.fontSize=`${e}px`}get background(){return this.getAttribute("background")||"hsla(0, 0%, 100%, 0.9)"}set background(e){this.setAttribute("background",e),this.#t.style.backgroundColor=e}get text(){return this.getAttribute("text")||""}set text(e){e&&this.setAttribute("text",e)}get fullscreen(){return this.getAttrBoolean("fullscreen")||!1}set fullscreen(e){e&&this.setAttribute("fullscreen",e)}get lock(){return this.getAttrBoolean("lock")||!1}set lock(e){e&&this.setAttribute("lock",e)}#n(e,t,s){e&&(this.#e.classList.toggle("ea-loading_wrap--fullscreen",t),s&&(document.body.style.overflow=t?"hidden":"auto"))}connectedCallback(){if(this.fullscreen=this.fullscreen,this.loading=this.loading,this.spinnerSize=this.spinnerSize,this.spinner=this.spinner,this.background=this.background,this.text){const e=document.createElement("div");e.className="ea-loading_text",e.innerHTML=this.text,this.#t.appendChild(e)}}}customElements.get("ea-loading")||customElements.define("ea-loading",EaLoading);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-loading_wrap {\n  position: relative;\n}\n.ea-loading_wrap .ea-loading_mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: hsla(0, 0%, 100%, 0.9);\n  z-index: 1;\n  transition: background-color 0.2s;\n}\n.ea-loading_wrap .ea-loading_spinner,\n.ea-loading_wrap .ea-loading_text {\n  color: #409eff;\n}\n.ea-loading_wrap .ea-loading_spinner {\n  font-size: 2rem;\n}\n.ea-loading_wrap .ea-loading_text {\n  margin-left: 0.5rem;\n}\n.ea-loading_wrap.ea-loading_wrap--fullscreen {\n  position: fixed;\n  left: 0;\n  top: 0;\n  z-index: 3000;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask {\n  display: flex;\n}\n";

package/components/ea-main/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-main_wrap {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 20px;\n  overflow: auto;\n  color: #333;\n}\n";export class EaMain extends Base{constructor(){super();const n=this.attachShadow({mode:"open"});n.innerHTML='\n            <main class="ea-main_wrap" part="container">\n                <slot></slot>\n            </main>\n        ',this.build(n,stylesheet)}}customElements.get("ea-main")||customElements.define("ea-main",EaMain);

package/components/ea-menu/index.js

@@ -0,0 +1 @@
+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);

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

@@ -0,0 +1 @@
+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";

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

@@ -0,0 +1 @@
+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}}))}))}))}

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

@@ -0,0 +1 @@
+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);

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

@@ -0,0 +1 @@
+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";

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

@@ -0,0 +1 @@
+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);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-menu-item-group_wrap {\n  --normal-bgc: #fff;\n  --normal-text-color: #303133;\n  --actived-text-color: #409eff;\n  --actived-bgc: #fff;\n  width: 100%;\n}\n.ea-menu-item-group_wrap.is-actived .ea-submenu_title_wrap {\n  color: var(--actived-text-color);\n  border-color: var(--actived-text-color);\n}\n.ea-menu-item-group_wrap .ea-submenu_title_wrap {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\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  cursor: pointer;\n  transition: border-color 0.3s, background-color 0.3s, color 0.3s;\n}\n.ea-menu-item-group_wrap .ea-submenu_items_wrap {\n  margin: 0 20px;\n  height: 0;\n  overflow: hidden;\n  transition: height 0.3s;\n}\n.ea-menu-item-group_wrap .ea-submenu_dropdown_icon {\n  transform: rotate(-90deg);\n  transition: transform 0.3s;\n}\n.ea-menu-item-group_wrap.is-open .ea-submenu_dropdown_icon {\n  transform: rotate(0deg);\n}\n";