easy-component-ui 1.0.3 → 2.0.2

package/components/ea-skeleton/index.js

@@ -1,341 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const imageElement = `
-<svg class="skeleton-image" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15 20h70v60H15z" stroke="#c0c4cc" stroke-width="5px" fill="none" />
-    <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
-    <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
-    <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
-</svg>
-`;
-
-const stylesheet = `
-@keyframes skeleton-loading {
-  0% {
-    background-position: 100% 50%;
-  }
-}
-.ea-skeleton_item,
-.ea-skeleton-item_wrap {
-  position: relative;
-  display: inline-block;
-  background-color: #f2f2f2;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.ea-skeleton-item_wrap.animated {
-  background-image: linear-gradient(90deg, #f6f6f6 25%, #e8e8e8 37%, #f6f6f6 63%);
-  background-size: 400% 100%;
-  animation: skeleton-loading 1.4s ease infinite;
-}
-
-.ea-skeleton_wrap.animated .ea-skeleton_item {
-  background-image: linear-gradient(90deg, #f6f6f6 25%, #e8e8e8 37%, #f6f6f6 63%);
-  background-size: 400% 100%;
-  animation: skeleton-loading 1.4s ease infinite;
-}
-
-.ea-skeleton_wrap {
-  width: 100%;
-}
-.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p {
-  width: 100%;
-}
-.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p.el-skeleton_paragraph {
-  width: 100%;
-  margin-top: 16px;
-}
-.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p.is-first {
-  width: 33%;
-}
-.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p.is-last {
-  width: 61%;
-}
-
-.ea-skeleton-item_wrap .skeleton-image {
-  width: 30%;
-  height: 30%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_p {
-  width: 100%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_image {
-  width: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0;
-}
-.ea-skeleton-item_wrap.ea-skeleton_text {
-  width: 100%;
-  height: 13px;
-}
-`;
-
-/**
- * 创建一个具有骨架屏样式的元素。
- * 
- * @param {string} item - 包含要添加到新元素的类名。
- * @param {boolean} isFirst - 指示生成的元素是否应该是列表中的第一个元素。
- * @param {boolean} isLast - 指示生成的元素是否应该是列表中的最后一个元素。
- * @returns {HTMLElement} - 返回一个新创建的div元素。
- */
-const getSkeletonElement = (className) => {
-    const el = document.createElement('div');
-    el.className = `ea-skeleton_item el-skeleton_p ${className ? className : ''}`;
-
-    return el;
-};
-
-export class EaSkeleton extends Base {
-    #mounted = false;
-
-    #wrap;
-
-    #customizationSlot;
-    #defaultSlot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-skeleton_wrap';
-
-        const defaultSlot = document.createElement('slot');
-        defaultSlot.style.display = 'none';
-
-        const customizationSlot = document.createElement('slot');
-        customizationSlot.name = 'template';
-
-        this.#wrap = wrap;
-        this.#defaultSlot = defaultSlot;
-        this.#customizationSlot = customizationSlot;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-        this.shadowRoot.appendChild(customizationSlot);
-        this.shadowRoot.appendChild(defaultSlot);
-    }
-
-    // ------- row 骨架屏的渲染行数 -------
-    // #region
-    get row() {
-        return this.getAttrNumber('row') || 4;
-    }
-
-    set row(value) {
-        this.setAttribute('row', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- animated 骨架屏的动画效果 -------
-    // #region
-    get animated() {
-        return this.getAttrBoolean('animated');
-    }
-
-    set animated(value) {
-        this.setAttribute('animated', value);
-
-        this.#wrap.classList.toggle('animated', value);
-
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- count 元素重复数 -------
-    // #region
-    get count() {
-        return this.getAttrNumber('count') || 1;
-    }
-
-    set count(value) {
-        this.setAttribute('count', value);
-
-        this.#wrap.innerHTML = '';
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- loading 是否显示骨架屏 -------
-    // #region
-    get loading() {
-        return this.getAttrBoolean('loading') || true;
-    }
-
-    set loading(value) {
-        this.setAttribute('loading', value);
-
-        if (value) {
-            this.#customizationSlot.style.display = 'block';
-            this.#defaultSlot.style.display = 'none';
-        } else {
-            this.#customizationSlot.style.display = 'none';
-            this.#defaultSlot.style.display = 'block';
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // 默认骨架屏的初始化
-    defaultSkeletonInit(row) {
-        row = Number(row) || 4;
-
-        const firstSkeleton = getSkeletonElement('is-first');
-        this.#wrap.appendChild(firstSkeleton);
-
-        for (let i = 0; i < row - 2; i++) {
-            const paragraphSkeleton = getSkeletonElement('el-skeleton_paragraph');
-            this.#wrap.appendChild(paragraphSkeleton);
-        }
-
-        const lastSkeleton = getSkeletonElement('el-skeleton_paragraph is-last');
-        this.#wrap.appendChild(lastSkeleton);
-    }
-
-    // 渲染自定义骨架屏
-    customizationSkeletonInit() {
-        const item = this.querySelectorAll('ea-skeleton-item');
-
-        if (item.length > 0) this.#wrap.innerHTML = "";
-    }
-
-    // 渲染带动画的骨架屏
-    handleSkeletonItemAniamted(isAnimated) {
-        if (!isAnimated) return;
-
-        const items = this.querySelectorAll('ea-skeleton-item');
-        items.forEach(item => {
-            item.setAttribute("animated", true);
-        })
-    }
-
-    // 渲染骨架屏的渲染个数
-    handleSkeletonItemCount(count) {
-        const item = this.querySelector('[slot="template"]');
-        let template = ``;
-
-        for (let i = 0; i < count; i++) {
-            template += item.innerHTML;
-        }
-
-        item.innerHTML = template;
-    }
-
-    init() {
-        const that = this;
-
-        this.animated = this.animated;
-
-        this.count = this.count;
-
-        this.loading = this.loading;
-
-        const items = this.querySelectorAll('ea-skeleton-item');
-        if (items.length > 0) {
-            this.#wrap.style.display = "none";
-
-            this.handleSkeletonItemCount(this.count);
-
-            this.handleSkeletonItemAniamted(this.animated);
-
-            return;
-        }
-
-
-
-        this.row = this.row;
-        this.defaultSkeletonInit(this.row);
-    }
-
-    connectedCallback() {
-        this.init();
-
-        this.#mounted = true;
-    }
-}
-
-export class EaSkeletonItem extends Base {
-    #wrap;
-
-    static get observedAttributes() {
-        return ['animated'];
-    }
-    get variantOptions() {
-        return ["text", "image", "p"];
-    }
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-skeleton-item_wrap';
-
-        this.#wrap = wrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- style html标签上的样式 -------
-    // #region
-    get elementStyle() {
-        return this.getAttribute('style');
-    }
-
-    set elementStyle(value) {
-        this.setAttribute('style', value);
-        this.#wrap.setAttribute('style', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- variant html标签标识 -------
-    // #region
-    get variant() {
-        return this.getAttribute('variant');
-    }
-
-    set variant(value) {
-        this.variantOptions.includes(value) ? this.setAttribute('variant', value) : this.setAttribute('variant', 'text');
-
-        if (value === "image") this.#wrap.innerHTML = imageElement;
-
-        this.#wrap.classList.add("ea-skeleton_" + this.variant);
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        const that = this;
-
-        this.variant = this.variant;
-
-        this.elementStyle = this.elementStyle;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-
-    attributeChangedCallback(name, oldVal, newVal) {
-        switch (name) {
-            case "animated":
-                this.#wrap.classList.toggle("animated", this.getAttrBoolean(name));
-                break;
-        }
-    }
-}
-
-if (!customElements.get('ea-skeleton')) {
-    customElements.define('ea-skeleton', EaSkeleton);
-}
-
-if (!customElements.get('ea-skeleton-item')) {
-    customElements.define('ea-skeleton-item', EaSkeletonItem);
-}
+import Base from"../Base.js";import"../ea-skeleton-item/index.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{createSkeletonElement}from"./src/utils/createSkeletonElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSkeleton extends Base{#t;#e;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-skeleton_wrap" part="container">\n                <slot></slot>\n                <slot name="template"></slot>\n            </div>\n        ',this.#t=t.querySelector(".ea-skeleton_wrap"),this.#s=t.querySelector("slot"),this.#e=t.querySelector('slot[name="template"]'),this.build(t,stylesheet)}get row(){return this.getAttrNumber("row")||4}set row(t){this.setAttribute("row",t)}get animated(){return this.getAttrBoolean("animated")}set animated(t){t&&this.setAttribute("animated",t)}get count(){return this.getAttrNumber("count")||1}set count(t){this.setAttribute("count",t)}get loading(){const t=this.getAttribute("loading");return handleDefaultAttrIsTrue(t)}set loading(t){this.setAttribute("loading",t),this.#e.style.display=t?"block":"none",this.#s.style.display=t?"none":"block"}#n(t){t=Number(t)||4;this.#s.assignedNodes(),this.#e.assignedNodes();if(!(this.children.length>0)){this.#t.innerHTML="";for(let e=0;e<t;e++){const t=createSkeletonElement("p",this.animated);this.#t.appendChild(t)}}}#i(t){if(!t)return;this.querySelectorAll("ea-skeleton-item").forEach((t=>{t.animated=!0}))}#o(t){if(0===this.children.length||t<1)return;const e=this.querySelector('[slot="template"]');let s="";for(let n=0;n<t;n++)s+=e.innerHTML;e.innerHTML=s}connectedCallback(){this.animated=this.animated,this.loading=this.loading,this.count=this.count,this.row=this.row,this.#n(this.row),this.#o(this.count),this.#i(this.animated)}}customElements.get("ea-skeleton")||customElements.define("ea-skeleton",EaSkeleton);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-skeleton_wrap {\n  width: 100%;\n  position: relative;\n  border-radius: 4px;\n}\n.ea-skeleton_wrap ea-skeleton-item[variant=p]:first-child {\n  --p-width: 33%;\n  --margin-top: 0;\n}\n.ea-skeleton_wrap ea-skeleton-item[variant=p]:last-child {\n  --p-width: 61%;\n}\n";

package/components/ea-skeleton/src/utils/createSkeletonElement.js

@@ -0,0 +1 @@
+export const createSkeletonElement=(e,t)=>{const n=document.createElement("ea-skeleton-item");return n.variant=e,n.animated=t,n};

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

@@ -0,0 +1 @@
+import Base from"../Base.js";import{imageSVG}from"./src/assets/imageSVG.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSkeletonItem extends Base{#t;get variantOptions(){return["text","image","p","h1","h2","h3","h4","h5","h6"]}constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-skeleton-item_wrap" part="container"></div>\n        ',this.#t=t.querySelector(".ea-skeleton-item_wrap"),this.build(t,stylesheet)}get elementStyle(){return this.getAttribute("style")}set elementStyle(t){t&&this.#t.setAttribute("style",t)}get variant(){return this.getAttribute("variant")}set variant(t){this.variantOptions.includes(t)?this.setAttribute("variant",t):this.setAttribute("variant","text"),"image"===t&&(this.#t.innerHTML=imageSVG),this.#t.classList.add("ea-skeleton_"+this.variant)}get animated(){return this.getAttrBoolean("animated")}set animated(t){t&&(this.setAttribute("animated",t),this.#t.classList.toggle("animated",t))}connectedCallback(){this.style.display="block",this.variant=this.variant,this.animated=this.animated}}customElements.get("ea-skeleton-item")||customElements.define("ea-skeleton-item",EaSkeletonItem);

package/components/ea-skeleton-item/src/assets/imageSVG.js

@@ -0,0 +1 @@
+export const imageSVG='\n<svg class="skeleton-image" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n    <path d="M15 20h70v60H15z" stroke="#c0c4cc" stroke-width="5px" fill="none" />\n    <circle r="8" cx="32" cy="35" fill="#c0c4cc" />\n    <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />\n    <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />\n</svg>\n';

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

@@ -0,0 +1 @@
+export const stylesheet="\n:host {\n  --p-width: 100%;\n  --margin-top: 1rem;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n}\n.ea-skeleton-item_wrap {\n  position: relative;\n  background-color: #f2f2f2;\n  border-radius: 4px;\n}\n.ea-skeleton-item_wrap.animated {\n  background-image: linear-gradient(90deg, #f6f6f6 25%, #e8e8e8 37%, #f6f6f6 63%);\n  background-size: 400% 100%;\n  animation: skeleton-loading 1.4s ease infinite;\n}\n\n.ea-skeleton-item_wrap.ea-skeleton_p, .ea-skeleton-item_wrap.ea-skeleton_image, .ea-skeleton-item_wrap.ea-skeleton_text, .ea-skeleton-item_wrap.ea-skeleton_h1, .ea-skeleton-item_wrap.ea-skeleton_h2, .ea-skeleton-item_wrap.ea-skeleton_h3, .ea-skeleton-item_wrap.ea-skeleton_h4, .ea-skeleton-item_wrap.ea-skeleton_h5, .ea-skeleton-item_wrap.ea-skeleton_h6 {\n  width: 100%;\n}\n.ea-skeleton-item_wrap.ea-skeleton_p {\n  width: var(--p-width);\n  height: 16px;\n  margin-top: var(--margin-top);\n}\n.ea-skeleton-item_wrap.ea-skeleton_image {\n  width: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0;\n  height: 100%;\n}\n.ea-skeleton-item_wrap.ea-skeleton_image .skeleton-image {\n  width: 30%;\n  height: 30%;\n}\n.ea-skeleton-item_wrap.ea-skeleton_text {\n  height: 13px;\n  margin: 2px 0;\n}\n.ea-skeleton-item_wrap.ea-skeleton_h1 {\n  height: 2rem;\n  margin-block: 0.67rem;\n}\n.ea-skeleton-item_wrap.ea-skeleton_h2 {\n  height: 1.5rem;\n  margin-block: 0.83rem;\n}\n.ea-skeleton-item_wrap.ea-skeleton_h3 {\n  height: 1.17rem;\n  margin-block: 1rem;\n}\n.ea-skeleton-item_wrap.ea-skeleton_h4 {\n  height: 1rem;\n  margin-block: 1.33rem;\n}\n.ea-skeleton-item_wrap.ea-skeleton_h5 {\n  height: 0.83rem;\n  margin-block: 1.67rem;\n}\n.ea-skeleton-item_wrap.ea-skeleton_h6 {\n  height: 0.67rem;\n  margin-block: 2.33rem;\n}\n";

package/components/ea-step/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 EaStep extends Base{#t;#e;#s;#i;#r;#n;#a;#o;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n      <div class="ea-step_wrap" part="container">\n        <div class="ea-step_head-wrap" part="head-wrap">\n          <div class="ea-step_bar" part="step-bar"></div>\n          <div class="ea-step_head-icon" part="head-icon"></div>\n        </div>\n        <div class="ea-step_main-wrap" part="main-wrap">\n          <div class="ea-step_title-wrap" part="title-wrap">\n            <slot name="title"></slot>\n          </div>\n          <div class="ea-step_description-wrap" part="description-wrap">\n            <slot name="description"></slot>\n          </div>\n        </div>\n      </div>\n    ',this.#t=t.querySelector(".ea-step_wrap"),this.#e=t.querySelector(".ea-step_head-wrap"),this.#s=t.querySelector(".ea-step_head-icon"),this.#i=t.querySelector(".ea-step_bar"),this.#r=t.querySelector(".ea-step_title-wrap"),this.#a=t.querySelector('slot[name="title"]'),this.#n=t.querySelector(".ea-step_description-wrap"),this.#o=t.querySelector('slot[name="description"]'),this.build(t,stylesheet)}get title(){return this.getAttribute("title")}set title(t){if(!t)return;const e=this.querySelector('[slot="title"]');e?(t=e.innerHTML,this.#a.innerHTML=t):this.#r.innerText=t,this.setAttribute("title",t)}get description(){return this.getAttribute("description")}set description(t){if(!t)return;const e=this.querySelector('[slot="description"]');e?(t=e.innerHTML,this.#o.innerHTML=t):this.#n.innerText=t,this.setAttribute("description",t)}get space(){return this.getAttribute("space")||"50%"}set space(t){this.setAttribute("space",t||"50%"),this.style.flexBasis=t||"50%"}get icon(){return this.getAttribute("icon")}set icon(t){t?this.#s.innerHTML=`\n          <ea-icon icon="${t}" size="24"></ea-icon>\n      `:(this.#s.innerHTML=this.index+1,this.#s.classList.add("is-text"),t=this.index+1),this.setAttribute("icon",t)}get active(){return this.getAttrBoolean("active")||!1}set active(t){this.toggleAttr("active",t)}get isLast(){return this.getAttrBoolean("is-last")||!1}set isLast(t){this.toggleAttr("is-last",t),this.#e.classList.toggle("is-last",t)}get status(){return this.getAttribute("status")}set status(t){if(this.setAttribute("status",t),this.#t.classList.toggle("is-finish","finish"===t),this.#t.classList.toggle("is-process","process"===t),this.#t.classList.toggle("is-wait","wait"===t),"finish"===t){this.#s.querySelector("ea-icon")||(this.#s.innerHTML='\n          <ea-icon icon="icon-ok" color="#67c23a" style="font-size: 14px; line-height: 14px;"></ea-icon>\n      ')}else this.#s.innerHTML=this.index+1}get simple(){return this.getAttrBoolean("simple")||!1}set simple(t){this.toggleAttr("simple",t),this.#t.classList.toggle("is-simple",t),t&&!this.isLast?(this.#i.innerHTML='\n        <ea-icon icon="icon-angle-right" color="#c0c4cc" style="font-size: 24px; line-height: 24px;"></ea-icon>\n      ',this.#i.style.flex="1",this.#i.style.textAlign="center",this.#n.remove(),this.#t.appendChild(this.#i)):t&&!this.isLast&&(this.#i.innerHTML="")}connectedCallback(){this.title=this.title,this.description=this.description,this.simple=this.simple,timeout((()=>{this.icon=this.icon}),20)}}customElements.get("ea-step")||customElements.define("ea-step",EaStep);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-step_wrap {\n  color: #c0c4cc;\n  transition: color 0.3s;\n}\n.ea-step_wrap .ea-step_head-wrap {\n  position: relative;\n}\n.ea-step_wrap .ea-step_head-wrap .ea-step_head-icon {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 24px;\n  height: 24px;\n  background-color: #fff;\n  font-size: 14px;\n  z-index: 1;\n}\n.ea-step_wrap .ea-step_head-wrap .ea-step_head-icon.is-text {\n  border-radius: 50%;\n  border: 2px solid;\n}\n.ea-step_wrap .ea-step_head-wrap .ea-step_bar {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 2px;\n  width: 100%;\n  height: 2px;\n  background-color: #c0c4cc;\n}\n.ea-step_wrap .ea-step_head-wrap.is-last {\n  flex-basis: auto;\n}\n.ea-step_wrap .ea-step_head-wrap.is-last .ea-step_bar {\n  display: none;\n}\n.ea-step_wrap .ea-step_main-wrap {\n  white-space: normal;\n  text-align: left;\n}\n.ea-step_wrap .ea-step_main-wrap .ea-step_title-wrap {\n  font-size: 16px;\n  line-height: 38px;\n}\n.ea-step_wrap .ea-step_main-wrap .ea-step_description-wrap {\n  margin-top: -5px;\n  font-size: 12px;\n  line-height: 20px;\n}\n.ea-step_wrap.is-process {\n  color: #303133;\n  border-color: #303133;\n}\n.ea-step_wrap.is-finish {\n  color: #67c23a;\n  border-color: #67c23a;\n}\n.ea-step_wrap.is-finish .ea-step_head-wrap .ea-step_bar {\n  background-color: #67c23a;\n}\n.ea-step_wrap.is-simple {\n  display: flex;\n  align-items: center;\n}\n.ea-step_wrap.is-simple .ea-step_head-wrap {\n  position: relative;\n}\n.ea-step_wrap.is-simple .ea-step_head-wrap .ea-step_bar {\n  position: relative;\n  width: auto;\n  height: auto;\n  transform: translateY(0%);\n  margin-left: 2px;\n  flex: 1;\n}\n.ea-step_wrap.is-simple .ea-step_main-wrap {\n  margin-left: 16px;\n  line-height: 24px;\n  height: 24px;\n}\n.ea-step_wrap.is-simple .ea-step_main-wrap .ea-step_title-wrap {\n  line-height: 24px;\n}\n";

package/components/ea-steps/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-step/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSteps extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-steps_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#t=t.querySelector(".ea-steps_wrap"),this.build(t,stylesheet)}get active(){return this.getAttrNumber("active")||0}set active(t){this.setAttribute("active",t),this.#e.forEach(((e,s)=>{e.status=s<t?"finish":s>t?"wait":"process"}))}get space(){return this.getAttribute("space")||"50%"}set space(t){this.setAttribute("space",t),this.#e.forEach(((e,s)=>{s<this.#e.length-1&&(e.space=t)}))}get simple(){return this.getAttrBoolean("simple")||!1}set simple(t){this.toggleAttr("simple",t),this.#e.forEach(((e,s)=>{e.simple=t,this.#t.classList.toggle("is-simple",t),s<this.#e.length-1&&(e.space=t?"auto":this.space)}))}connectedCallback(){const t=this.querySelectorAll("ea-step");this.#e=t,this.#e.forEach(((t,e)=>{t.setAttribute("index",e),t.index=e})),this.#e[this.#e.length-1].isLast=!0,this.simple=this.simple,this.active=this.active}}customElements.get("ea-steps")||customElements.define("ea-steps",EaSteps);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-steps_wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ea-steps_wrap ::slotted(ea-step) {\n  flex-basis: 50%;\n}\n.ea-steps_wrap.is-simple {\n  justify-content: unset;\n}\n.ea-steps_wrap ::slotted(ea-step:last-child) {\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n.ea-steps_wrap ::slotted(ea-step[simple]) {\n  flex: 1;\n}\n";

package/components/ea-submenu/index.js

@@ -0,0 +1 @@
+import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSubmenu extends Base{#t;#e;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-submenu_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-submenu_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 disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#t.classList.toggle("is-disabled",t)}get mode(){return this.getAttribute("mode")||"horizontal"}set mode(t){this.setAttribute("mode",t),this.#t.classList.toggle("is-vertical","vertical"===t)}connectedCallback(){this.disabled=this.disabled;this.querySelectorAll("ea-menu-item").forEach(((t,e)=>{t.isSubItem=!0,t.addEventListener("item-selected",(t=>{this.actived=!0}))})),timeout((()=>{this.#s.style.display="block"}),20)}}customElements.get("ea-submenu")||customElements.define("ea-submenu",EaSubmenu);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-submenu_wrap {\n  --normal-bgc: #fff;\n  --normal-text-color: #303133;\n  --actived-text-color: #409eff;\n  --actived-bgc: #fff;\n  position: relative;\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-submenu_wrap .ea-submenu_title_wrap {\n  display: flex;\n  justify-content: space-between;\n}\n.ea-submenu_wrap .ea-submenu_title_wrap .ea-submenu_dropdown_icon {\n  rotate: -90deg;\n  transition: rotate 0.3s;\n}\n.ea-submenu_wrap .ea-submenu_items_wrap {\n  display: none;\n  position: absolute;\n  left: 0;\n  margin-top: 3px;\n  border-radius: 8px;\n  overflow: hidden;\n  min-width: 200px;\n  z-index: 100;\n  opacity: 0;\n  transform-origin: left top;\n  transform: scale(0);\n  transition: opacity 0.3s, transform 0.3s;\n}\n.ea-submenu_wrap:hover .ea-submenu_items_wrap {\n  opacity: 1;\n  transform: scale(1);\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n}\n.ea-submenu_wrap:hover .ea-submenu_title_wrap .ea-submenu_dropdown_icon {\n  rotate: 0deg;\n}\n.ea-submenu_wrap.is-actived {\n  color: var(--actived-text-color);\n  border-color: var(--actived-text-color);\n}\n.ea-submenu_wrap.is-sub-actived {\n  color: var(--actived-text-color);\n}\n.ea-submenu_wrap.is-disabled {\n  color: #c0c4cc;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.ea-submenu_wrap ::slotted(a) {\n  color: var(--normal-text-color);\n  text-decoration: none;\n}\n";