easy-component-ui 2.0.5 → 2.1.1

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

@@ -0,0 +1,69 @@
+:host {
+  --p-width: 100%;
+  --margin-top: 1rem;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+}
+.ea-skeleton-item_wrap {
+  position: relative;
+  background-color: #f2f2f2;
+  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-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 {
+  width: 100%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_p {
+  width: var(--p-width);
+  height: 16px;
+  margin-top: var(--margin-top);
+}
+.ea-skeleton-item_wrap.ea-skeleton_image {
+  width: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+  height: 100%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_image .skeleton-image {
+  width: 30%;
+  height: 30%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_text {
+  height: 13px;
+  margin: 2px 0;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h1 {
+  height: 2rem;
+  margin-block: 0.67rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h2 {
+  height: 1.5rem;
+  margin-block: 0.83rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h3 {
+  height: 1.17rem;
+  margin-block: 1rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h4 {
+  height: 1rem;
+  margin-block: 1.33rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h5 {
+  height: 0.83rem;
+  margin-block: 1.67rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h6 {
+  height: 0.67rem;
+  margin-block: 2.33rem;
+}

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

@@ -1 +1,82 @@
-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);
+import Base from '../Base.js';
+
+import { imageSVG } from './src/assets/imageSVG.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaSkeletonItem extends Base {
+    #wrap;
+    get variantOptions() {
+        return ["text", "image", "p", "h1", "h2", "h3", "h4", "h5", "h6"];
+    }
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-skeleton-item_wrap" part="container"></div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-skeleton-item_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- style html标签上的样式 -------
+    // #region
+    get elementStyle() {
+        return this.getAttribute('style');
+    }
+
+    set elementStyle(value) {
+        if (!value) return;
+
+        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 = imageSVG;
+
+        this.#wrap.classList.add("ea-skeleton_" + this.variant);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- animated 是否带有动画 -------
+    // #region
+    get animated() {
+        return this.getAttrBoolean('animated');
+    }
+
+    set animated(value) {
+        if (!value) return;
+        this.setAttribute('animated', value);
+
+        this.#wrap.classList.toggle("animated", value);
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.style.display = "block";
+
+        this.variant = this.variant;
+
+        this.animated = this.animated;
+    }
+}
+
+if (!customElements.get('ea-skeleton-item')) {
+    customElements.define('ea-skeleton-item', EaSkeletonItem);
+}

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

@@ -0,0 +1,107 @@
+:host {
+  --p-width: 100%;
+  --margin-top: 1rem;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+}
+
+.ea-skeleton-item_wrap {
+  position: relative;
+  background-color: #f2f2f2;
+  border-radius: 4px;
+
+  &.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-item_wrap {
+  &.ea-skeleton_p,
+  &.ea-skeleton_image,
+  &.ea-skeleton_text,
+  &.ea-skeleton_h1,
+  &.ea-skeleton_h2,
+  &.ea-skeleton_h3,
+  &.ea-skeleton_h4,
+  &.ea-skeleton_h5,
+  &.ea-skeleton_h6 {
+    width: 100%;
+  }
+
+  &.ea-skeleton_p {
+    width: var(--p-width);
+    height: 16px;
+
+    margin-top: var(--margin-top);
+  }
+
+  &.ea-skeleton_image {
+    width: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+
+    height: 100%;
+
+    .skeleton-image {
+      width: 30%;
+      height: 30%;
+    }
+  }
+
+  &.ea-skeleton_text {
+    height: 13px;
+
+    margin: 2px 0;
+  }
+
+  &.ea-skeleton_h1 {
+    height: 2rem;
+
+    margin-block: 0.67rem;
+  }
+
+  &.ea-skeleton_h2 {
+    height: 1.5rem;
+
+    margin-block: 0.83rem;
+  }
+
+  &.ea-skeleton_h3 {
+    height: 1.17rem;
+
+    margin-block: 1rem;
+  }
+
+  &.ea-skeleton_h4 {
+    height: 1rem;
+
+    margin-block: 1.33rem;
+  }
+
+  &.ea-skeleton_h5 {
+    height: 0.83rem;
+
+    margin-block: 1.67rem;
+  }
+
+  &.ea-skeleton_h6 {
+    height: 0.67rem;
+
+    margin-block: 2.33rem;
+  }
+}

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

@@ -1 +1,8 @@
-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';
+export const imageSVG = `
+<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>
+`;

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

@@ -1 +1,71 @@
-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";
+export const stylesheet = `
+:host {
+  --p-width: 100%;
+  --margin-top: 1rem;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+}
+.ea-skeleton-item_wrap {
+  position: relative;
+  background-color: #f2f2f2;
+  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-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 {
+  width: 100%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_p {
+  width: var(--p-width);
+  height: 16px;
+  margin-top: var(--margin-top);
+}
+.ea-skeleton-item_wrap.ea-skeleton_image {
+  width: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+  height: 100%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_image .skeleton-image {
+  width: 30%;
+  height: 30%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_text {
+  height: 13px;
+  margin: 2px 0;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h1 {
+  height: 2rem;
+  margin-block: 0.67rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h2 {
+  height: 1.5rem;
+  margin-block: 0.83rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h3 {
+  height: 1.17rem;
+  margin-block: 1rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h4 {
+  height: 1rem;
+  margin-block: 1.33rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h5 {
+  height: 0.83rem;
+  margin-block: 1.67rem;
+}
+.ea-skeleton-item_wrap.ea-skeleton_h6 {
+  height: 0.67rem;
+  margin-block: 2.33rem;
+}
+`;

package/components/ea-step/index.css

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

package/components/ea-step/index.js

@@ -1 +1,230 @@
-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);
+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 {
+  #wrap;
+
+  #headWrap;
+  #stepIcon;
+  #stepBar;
+
+  #titleWrap;
+  #descriptionWrap;
+  
+  #titleSlot;
+  #descriptionSlot;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div class="ea-step_wrap" part="container">
+        <div class="ea-step_head-wrap" part="head-wrap">
+          <div class="ea-step_bar" part="step-bar"></div>
+          <div class="ea-step_head-icon" part="head-icon"></div>
+        </div>
+        <div class="ea-step_main-wrap" part="main-wrap">
+          <div class="ea-step_title-wrap" part="title-wrap">
+            <slot name="title"></slot>
+          </div>
+          <div class="ea-step_description-wrap" part="description-wrap">
+            <slot name="description"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.#wrap = shadowRoot.querySelector('.ea-step_wrap');
+    this.#headWrap = shadowRoot.querySelector('.ea-step_head-wrap');
+    this.#stepIcon = shadowRoot.querySelector('.ea-step_head-icon');
+    this.#stepBar = shadowRoot.querySelector('.ea-step_bar');
+
+    this.#titleWrap = shadowRoot.querySelector('.ea-step_title-wrap');
+    this.#titleSlot = shadowRoot.querySelector('slot[name="title"]');
+    this.#descriptionWrap = shadowRoot.querySelector('.ea-step_description-wrap');
+    this.#descriptionSlot = shadowRoot.querySelector('slot[name="description"]');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- title 步骤的标题(如:步骤一) -------
+  // #region
+  get title() {
+    return this.getAttribute('title');
+  }
+
+  set title(value) {
+    if (!value) return;
+
+    const slot = this.querySelector('[slot="title"]');
+
+    if (!slot) {
+      this.#titleWrap.innerText = value;
+    } else {
+      value = slot.innerHTML;
+      this.#titleSlot.innerHTML = value;
+    }
+
+    this.setAttribute('title', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- description 步骤的描述 -------
+  // #region
+  get description() {
+    return this.getAttribute('description');
+  }
+
+  set description(value) {
+    if (!value) return;
+
+    const slot = this.querySelector('[slot="description"]');
+
+    if (!slot) {
+      this.#descriptionWrap.innerText = value;
+    } else {
+      value = slot.innerHTML;
+      this.#descriptionSlot.innerHTML = value;
+    }
+
+    this.setAttribute('description', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- space 步骤之间的间距 -------
+  // #region
+  get space() {
+    return this.getAttribute('space') || '50%';
+  }
+
+  set space(value) {
+    this.setAttribute('space', value || '50%');
+
+    this.style.flexBasis = value || '50%';
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- icon 步骤的图标 -------
+  // #region
+  get icon() {
+    return this.getAttribute('icon');
+  }
+
+  set icon(value) {
+    if (!value) {
+      this.#stepIcon.innerHTML = this.index + 1;
+      this.#stepIcon.classList.add('is-text');
+      value = this.index + 1;
+    } else {
+      this.#stepIcon.innerHTML = `
+          <ea-icon icon="${value}" size="24"></ea-icon>
+      `;
+    }
+
+    this.setAttribute('icon', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- active 当前的步骤 -------
+  // #region
+  get active() {
+    return this.getAttrBoolean('active') || false;
+  }
+
+  set active(value) {
+    this.toggleAttr('active', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- is-last 是否最后一个步骤 -------
+  // #region
+  get isLast() {
+    return this.getAttrBoolean('is-last') || false;
+  }
+
+  set isLast(value) {
+    this.toggleAttr('is-last', value);
+
+    this.#headWrap.classList.toggle('is-last', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- status 步骤的状态 -------
+  // #region
+  get status() {
+    return this.getAttribute('status');
+  }
+
+  set status(value) {
+    this.setAttribute('status', value);
+
+    this.#wrap.classList.toggle('is-finish', value === 'finish');
+    this.#wrap.classList.toggle('is-process', value === 'process');
+    this.#wrap.classList.toggle('is-wait', value === 'wait');
+
+    if (value === 'finish') {
+      const isIcon = this.#stepIcon.querySelector('ea-icon');
+
+      if (!isIcon) this.#stepIcon.innerHTML = `
+          <ea-icon icon="icon-ok" color="#67c23a" style="font-size: 14px; line-height: 14px;"></ea-icon>
+      `;
+    } else {
+      this.#stepIcon.innerHTML = this.index + 1;
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- simple 简洁模式 -------
+  // #region
+  get simple() {
+    return this.getAttrBoolean('simple') || false;
+  }
+
+  set simple(value) {
+    this.toggleAttr('simple', value);
+
+    this.#wrap.classList.toggle('is-simple', value);
+
+    if (value && !this.isLast) {
+      this.#stepBar.innerHTML = `
+        <ea-icon icon="icon-angle-right" color="#c0c4cc" style="font-size: 24px; line-height: 24px;"></ea-icon>
+      `;
+
+      this.#stepBar.style.flex = "1";
+      this.#stepBar.style.textAlign = "center";
+
+      this.#descriptionWrap.remove();
+
+      this.#wrap.appendChild(this.#stepBar);
+    } else if (value && !this.isLast) {
+      this.#stepBar.innerHTML = "";
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  connectedCallback() {
+    this.title = this.title;
+    this.description = this.description;
+    this.simple = this.simple;;
+
+    timeout(() => {
+      this.icon = this.icon;
+    }, 20);
+  }
+}
+
+if (!customElements.get('ea-step')) {
+  customElements.define('ea-step', EaStep);
+}