easy-component-ui 2.0.5 → 2.1.0

package/components/ea-step/index.scss

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

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

@@ -1 +1,86 @@
-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";
+export const stylesheet = `
+.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-steps/index.css

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

package/components/ea-steps/index.js

@@ -1 +1,104 @@
-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);
+// @ts-nocheck
+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 {
+    #wrap;
+    #stepChildren;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-steps_wrap" part="container">
+                <slot></slot>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-steps_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+
+    // ------- active 当前的步骤 -------
+    // #region
+    get active() {
+        return this.getAttrNumber('active') || 0;
+    }
+
+    set active(value) {
+        this.setAttribute('active', value);
+
+        this.#stepChildren.forEach((item, index) => {
+            if (index < value) {
+                item.status = 'finish';
+            } else if (index > value) {
+                item.status = 'wait';
+            } else {
+                item.status = 'process';
+            }
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- space 步骤之间的间距 -------
+    // #region
+    get space() {
+        return this.getAttribute('space') || '50%';
+    }
+
+    set space(value) {
+        this.setAttribute('space', value);
+
+        this.#stepChildren.forEach((item, index) => {
+            if (index < this.#stepChildren.length - 1) item.space = value;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- simple 简洁模式 -------
+    // #region
+    get simple() {
+        return this.getAttrBoolean('simple') || false;
+    }
+
+    set simple(value) {
+        this.toggleAttr('simple', value);
+
+        this.#stepChildren.forEach((item, index) => {
+            item.simple = value;
+            this.#wrap.classList.toggle('is-simple', value);
+
+            if (index < this.#stepChildren.length - 1) item.space = value ? 'auto' : this.space;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        const stepChildrens = this.querySelectorAll('ea-step');
+        this.#stepChildren = stepChildrens;
+
+        this.#stepChildren.forEach((item, index) => {
+            item.setAttribute('index', index);
+            item.index = index;
+        });
+        this.#stepChildren[this.#stepChildren.length - 1].isLast = true;
+
+        this.simple = this.simple;
+
+        this.active = this.active;
+    }
+}
+
+if (!customElements.get('ea-steps')) {
+    customElements.define('ea-steps', EaSteps);
+}

package/components/ea-steps/index.scss

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

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

@@ -1 +1,21 @@
-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";
+export const stylesheet = `
+.ea-steps_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ea-steps_wrap ::slotted(ea-step) {
+  flex-basis: 50%;
+}
+.ea-steps_wrap.is-simple {
+  justify-content: unset;
+}
+.ea-steps_wrap ::slotted(ea-step:last-child) {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.ea-steps_wrap ::slotted(ea-step[simple]) {
+  flex: 1;
+}
+`;

package/components/ea-submenu/index.css

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

package/components/ea-submenu/index.js

@@ -1 +1,141 @@
-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);
+// @ts-nocheck
+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 {
+    #wrap;
+    #titleWrap;
+    #subItemsWrap;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-submenu_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-submenu_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 -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled');
+    }
+
+    set disabled(value) {
+        this.setAttribute('disabled', value);
+
+        this.#wrap.classList.toggle('is-disabled', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- mode 菜单模式 -------
+    // #region
+    get mode() {
+        return this.getAttribute('mode') || 'horizontal';
+    }
+
+    set mode(value) {
+        this.setAttribute('mode', value);
+
+        this.#wrap.classList.toggle('is-vertical', value === 'vertical');
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.disabled = this.disabled;
+
+        const items = this.querySelectorAll('ea-menu-item');
+        items.forEach((item, index) => {
+            item.isSubItem = true;
+
+            item.addEventListener('item-selected', (e) => {
+                this.actived = true;
+            });
+        });
+
+        timeout(() => {
+            this.#subItemsWrap.style.display = "block";
+        }, 20);
+    }
+}
+
+if (!customElements.get('ea-submenu')) {
+    customElements.define('ea-submenu', EaSubmenu);
+}

package/components/ea-submenu/index.scss

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