easy-component-ui 2.1.0 → 3.0.0

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

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

@@ -1,19 +0,0 @@
-.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,104 +0,0 @@
-// @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

@@ -1,23 +0,0 @@
-.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,21 +0,0 @@
-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

@@ -1,65 +0,0 @@
-.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,141 +0,0 @@
-// @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

@@ -1,88 +0,0 @@
-.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;
-  }
-}

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

@@ -1,67 +0,0 @@
-export const stylesheet = `
-.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-switch/index.css

@@ -1,90 +0,0 @@
-:host {
-  --active-text-color: #409eff;
-  --inactive-text-color: ##606266;
-  --active-checkbox-bgc: #409eff;
-  --inactive-checkbox-bgc: #eff1f5;
-  --active-disabled-text-color: #7ebfff;
-  --active-disabled-bgc: #bbdcff;
-  --inactive-disabled-text-color: #c0c4cc;
-  --inactive-disabled-bgc: #eff1f5;
-}
-
-.ea-switch_wrap {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.ea-switch_wrap input {
-  display: none;
-}
-.ea-switch_wrap .ea-switch_label {
-  font-size: 0.875rem;
-  transition: color 0.2s;
-}
-.ea-switch_wrap input + .ea-switch_label--left {
-  color: var(--active-text-color);
-}
-.ea-switch_wrap input:checked + .ea-switch_label--left {
-  color: var(--inactive-text-color);
-}
-.ea-switch_wrap input:checked + .ea-switch_label--left + .ea-switch_core {
-  background-color: var(--active-checkbox-bgc);
-}
-.ea-switch_wrap input:checked + .ea-switch_label--left + .ea-switch_core::after {
-  left: calc(100% - 1rem - 2px);
-}
-.ea-switch_wrap input:checked + .ea-switch_label--left + .ea-switch_core + .ea-switch_label--right {
-  color: var(--active-text-color);
-}
-.ea-switch_wrap input:disabled + .ea-switch_label--left {
-  color: var(--active-disabled-text-color);
-}
-.ea-switch_wrap input:disabled + .ea-switch_label--left + .ea-switch_core {
-  background-color: var(--inactive-disabled-bgc);
-}
-.ea-switch_wrap input:disabled + .ea-switch_label--left + .ea-switch_core + .ea-switch_label--right {
-  color: var(--inactive-disabled-text-color);
-}
-.ea-switch_wrap input:checked:disabled + .ea-switch_label--left {
-  color: var(--inactive-disabled-text-color);
-}
-.ea-switch_wrap input:checked:disabled + .ea-switch_label--left + .ea-switch_core {
-  background-color: var(--active-disabled-bgc);
-}
-.ea-switch_wrap input:checked:disabled + .ea-switch_label--left + .ea-switch_core::after {
-  left: calc(100% - 1rem - 2px);
-}
-.ea-switch_wrap input:checked:disabled + .ea-switch_label--left + .ea-switch_core + .ea-switch_label--right {
-  color: var(--inactive-disabled-text-color);
-}
-.ea-switch_wrap .ea-switch_core {
-  position: relative;
-  cursor: pointer;
-  margin: 0 0.75rem;
-  width: 2.5rem;
-  height: 1.25rem;
-  line-height: 1.25rem;
-  background-color: var(--inactive-checkbox-bgc);
-  border-radius: 999px;
-  transition: background-color 0.2s;
-}
-.ea-switch_wrap .ea-switch_core::after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 2px;
-  top: 50%;
-  transform: translate(0, -50%);
-  width: 1rem;
-  height: 1rem;
-  border-radius: 999px;
-  background-color: #fff;
-  transition: left 0.2s, transform 0.2s;
-}
-.ea-switch_wrap.disabled {
-  cursor: not-allowed;
-}
-.ea-switch_wrap.disabled .ea-switch_label,
-.ea-switch_wrap.disabled .ea-switch_core {
-  pointer-events: none;
-}