easy-component-ui 2.1.1 → 3.0.0

package/components/ea-switch/index.js

@@ -1,189 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaSwitch extends Base {
-    #wrap;
-    #input;
-
-    #labelLeft;
-    #inputCore;
-    #labelRight;
-    
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <label class="ea-switch_wrap" part="container">
-                <input class="ea-switch_input" type="checkbox">
-                <span class="ea-switch_label ea-switch_label--left" part="label-left"></span>
-                <span class="ea-switch_core" part="switch"></span>
-                <span class="ea-switch_label ea-switch_label--right" part="label-right"></span>
-            </label>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-switch_wrap');
-        this.#input = shadowRoot.querySelector('.ea-switch_input');
-        this.#labelLeft = shadowRoot.querySelector('.ea-switch_label--left');
-        this.#inputCore = shadowRoot.querySelector('.ea-switch_core');
-        this.#labelRight = shadowRoot.querySelector('.ea-switch_label--right');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- name 属性 -------
-    // #region
-    get name() {
-        return this.getAttribute('name') || 'ea-switch';
-    }
-
-    set name(value) {
-        this.setAttribute('name', value);
-
-        this.#wrap.setAttribute('for', value);
-        this.#input.setAttribute('name', value);
-        this.#input.setAttribute('id', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- value 属性 -------
-    // #region
-    get value() {
-        if (this.inactiveText && !this.checked) return this.inactiveText;
-        else if (this.activeText && this.checked) return this.activeText;
-        return this.checked;
-    }
-
-    set value(value) {
-        this.#input.value = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- inactive-text 关闭时选项 -------
-    // #region
-    get inactiveText() {
-        return this.getAttribute('inactive-text') || '';
-    }
-
-    set inactiveText(value) {
-        if (!value) return;
-
-        this.setAttribute('inactive-text', value);
-        this.#labelLeft.innerText = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-text 开启时选项 -------
-    // #region
-    get activeText() {
-        return this.getAttribute('active-text') || '';
-    }
-
-    set activeText(value) {
-        if (!value) return;
-
-        this.setAttribute('active-text', value);
-        this.#labelRight.innerText = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- checked 选中 -------
-    // #region
-    get checked() {
-        return this.getAttrBoolean('checked');
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value);
-        this.#input.checked = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled');
-    }
-
-    set disabled(value) {
-        this.setAttribute('disabled', value);
-        this.#input.disabled = value;
-        this.#wrap.classList.toggle('disabled', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- inactive-color 关闭时颜色 -------
-    // #region
-    get inactiveColor() {
-        return this.getAttribute('inactive-color') || '';
-    }
-
-    set inactiveColor(value) {
-        if (!value) return;
-
-        this.style.setProperty('--inactive-checkbox-bgc', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-color 开启时颜色 -------
-    // #region
-    get activeColor() {
-        return this.getAttribute('active-color');
-    }
-
-    set activeColor(value) {
-        if (!value) return;
-
-        this.style.setProperty('--active-checkbox-bgc', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.setAttribute('data-ea-component', true);
-
-        this.name = this.name;
-
-        this.value = this.value
-
-        // 设置勾选值
-        this.checked = this.checked;
-
-        // 设置开启/关闭值
-        this.inactiveText = this.inactiveText;
-        this.activeText = this.activeText;
-
-        // 设置禁用
-        this.disabled = this.disabled;
-
-        this.inactiveColor = this.inactiveColor;
-        this.activeColor = this.activeColor;
-
-        this.#input.addEventListener('change', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            this.checked = e.target.checked;
-
-            this.dispatchEvent(new CustomEvent("change", {
-                detail: {
-                    checked: this.checked,
-                    value: this.value,
-                },
-            }))
-        });
-    }
-}
-
-if (!customElements.get('ea-switch')) {
-    customElements.define('ea-switch', EaSwitch);
-}

package/components/ea-switch/index.scss

@@ -1,117 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-: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;
-
-  input {
-    display: none;
-  }
-
-  .ea-switch_label {
-    font-size: 0.875rem;
-    transition: color 0.2s;
-  }
-
-  input + .ea-switch_label--left {
-    color: var(--active-text-color);
-  }
-
-  input:checked + .ea-switch_label--left {
-    color: var(--inactive-text-color);
-
-    & + .ea-switch_core {
-      background-color: var(--active-checkbox-bgc);
-      &::after {
-        left: calc(100% - 1rem - 2px);
-      }
-
-      & + .ea-switch_label--right {
-        color: var(--active-text-color);
-      }
-    }
-  }
-
-  input:disabled + .ea-switch_label--left {
-    color: var(--active-disabled-text-color);
-
-    & + .ea-switch_core {
-      background-color: var(--inactive-disabled-bgc);
-
-      & + .ea-switch_label--right {
-        color: var(--inactive-disabled-text-color);
-      }
-    }
-  }
-
-  input:checked:disabled + .ea-switch_label--left {
-    color: var(--inactive-disabled-text-color);
-    & + .ea-switch_core {
-      background-color: var(--active-disabled-bgc);
-      &::after {
-        left: calc(100% - 1rem - 2px);
-      }
-
-      & + .ea-switch_label--right {
-        color: var(--inactive-disabled-text-color);
-      }
-    }
-  }
-
-  .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;
-
-    &::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;
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .ea-switch_label,
-    .ea-switch_core {
-      pointer-events: none;
-    }
-  }
-}

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

@@ -1,92 +0,0 @@
-export const stylesheet = `
-: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;
-}
-`;

package/components/ea-tab/index.css

@@ -1,68 +0,0 @@
-.ea-tab_wrap {
-  --border-radius-top-left: 0;
-  --border-radius-top-right: 0;
-  --border-right-width: 0;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 1.25rem;
-  height: 40px;
-  line-height: 40px;
-  min-width: 1rem;
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: color 0.3s, background-color 0.3s, width 0.3s, min-width 0.3s;
-}
-.ea-tab_wrap:hover {
-  color: #409eff;
-}
-.ea-tab_wrap.ea-tab_wrap--normal.is-actived {
-  color: #409eff;
-}
-.ea-tab_wrap.ea-tabs_wrap--card {
-  border-bottom: 1px solid #e4e7ed;
-}
-.ea-tab_wrap.ea-tabs_wrap--card .ea-tabs_tab-bottom-bar {
-  height: 1px;
-  bottom: -1px;
-  background-color: white;
-}
-.ea-tab_wrap.ea-tab_wrap--card {
-  border-top-left-radius: var(--border-radius-top-left);
-  border-top-right-radius: var(--border-radius-top-right);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-right-width: var(--border-right-width);
-}
-.ea-tab_wrap.ea-tab_wrap--card.is-actived {
-  border-bottom-color: white;
-  color: #409eff;
-}
-.ea-tab_wrap.ea-tab_wrap--border-card {
-  border-top-left-radius: var(--border-radius-top-left);
-  border-top-right-radius: var(--border-radius-top-right);
-  border: 0px solid rgba(0, 0, 0, 0.1);
-  border-right-width: var(--border-right-width);
-}
-.ea-tab_wrap.ea-tab_wrap--border-card.is-actived {
-  border-bottom-color: white;
-  color: #409eff;
-  background-color: white;
-}
-.ea-tab_wrap.ea-tab_wrap--editable .ea-tab_wrap--editable-sign {
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translate(0, -50%);
-  user-select: none;
-  width: 0;
-  overflow: hidden;
-  transition: width 0.3s;
-}
-.ea-tab_wrap.ea-tab_wrap--editable:hover .ea-tab_wrap--editable-sign {
-  width: 14px;
-}

package/components/ea-tab/index.js

@@ -1,138 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-import "../ea-pane/index.js"
-
-import { createElement } from '../../utils/createElement.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaTab extends Base {
-    #wrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-tab_wrap" part="container">
-                <slot></slot>
-            </div>
-        `;
-        this.#wrap = shadowRoot.querySelector('.ea-tab_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- name 唯一标识 -------
-    // #region
-    get name() {
-        return this.getAttribute('name');
-    }
-
-    set name(value) {
-        this.setAttribute('name', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- type 标签样式类型 -------
-    // #region
-    get type() {
-        return this.getAttrBoolean('type') || 'normal';
-    }
-
-    set type(value) {
-        this.setAttribute('type', value);
-
-        this.#wrap.classList.add(`ea-tab_wrap--${value}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- actived 标签是否被选中 -------
-    // #region
-    get actived() {
-        return this.getAttrBoolean('actived');
-    }
-
-    set actived(value) {
-        this.toggleAttr('actived', value);
-
-        this.#wrap.classList.toggle('is-actived', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- editable 是否可关闭 -------
-    // #region
-    get editable() {
-        return this.getAttrBoolean('editable');
-    }
-
-    set editable(value) {
-        this.setAttribute('editable', value);
-        this.#wrap.classList.toggle('ea-tab_wrap--editable', value);
-
-        if (value) {
-            this.#handleTabCloasable();
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleSelectedEvent() {
-        this.addEventListener('click', (e) => {
-            const isSelected = e.detail.value === this.getAttrBoolean('selected');
-            this.toggleAttr('selected', isSelected)
-
-            this.dispatchEvent(new CustomEvent('tab-click', {
-                detail: {
-                    name: this.name,
-                    event: this,
-                },
-                bubbles: true,
-            }));
-        });
-    }
-
-    #handleTabCloasable() {
-        const span = createElement('span', 'ea-tab_wrap--editable-sign');
-        span.innerText = 'x';
-        this.#wrap.appendChild(span);
-
-        span.addEventListener('click', (e) => {
-            e.stopPropagation();
-
-            this.dispatchEvent(new CustomEvent('tab-close', {
-                detail: {
-                    event: this,
-                    name: this.name,
-                    index: this.index,
-                },
-                bubbles: true,
-            }));
-        });
-    }
-
-    handleBorderRadius(key) {
-        this.#wrap.style.setProperty(key, '3px');
-    }
-
-    handleBorderRightWidth() {
-        this.#wrap.style.setProperty('--border-right-width', '1px');
-    }
-
-    connectedCallback() {
-        this.editable = this.editable;
-
-        this.label = this.label;
-
-        this.#handleSelectedEvent();
-    }
-}
-
-if (!customElements.get('ea-tab')) {
-    customElements.define('ea-tab', EaTab);
-}

package/components/ea-tab/index.scss

@@ -1,96 +0,0 @@
-.ea-tab_wrap {
-  --border-radius-top-left: 0;
-  --border-radius-top-right: 0;
-
-  --border-right-width: 0;
-
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 1.25rem;
-
-  height: 40px;
-  line-height: 40px;
-  min-width: 1rem;
-
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  cursor: pointer;
-
-  transition: color 0.3s, background-color 0.3s, width 0.3s, min-width 0.3s;
-
-  &:hover {
-    color: #409eff;
-  }
-
-  &.ea-tab_wrap--normal {
-    &.is-actived {
-      color: #409eff;
-    }
-  }
-
-  &.ea-tabs_wrap--card {
-    border-bottom: 1px solid #e4e7ed;
-
-    .ea-tabs_tab-bottom-bar {
-      height: 1px;
-      bottom: -1px;
-
-      background-color: white;
-    }
-  }
-
-  &.ea-tab_wrap--card {
-    border-top-left-radius: var(--border-radius-top-left);
-    border-top-right-radius: var(--border-radius-top-right);
-
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-right-width: var(--border-right-width);
-
-    &.is-actived {
-      border-bottom-color: white;
-      color: #409eff;
-    }
-  }
-
-  &.ea-tab_wrap--border-card {
-    border-top-left-radius: var(--border-radius-top-left);
-    border-top-right-radius: var(--border-radius-top-right);
-
-    border: 0px solid rgba(0, 0, 0, 0.1);
-    border-right-width: var(--border-right-width);
-
-    &.is-actived {
-      border-bottom-color: white;
-      color: #409eff;
-      background-color: white;
-    }
-  }
-
-  &.ea-tab_wrap--editable {
-    .ea-tab_wrap--editable-sign {
-      display: block;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(0, -50%);
-
-      user-select: none;
-
-      width: 0;
-      overflow: hidden;
-
-      transition: width 0.3s;
-    }
-
-    &:hover {
-      .ea-tab_wrap--editable-sign {
-        width: 14px;
-      }
-    }
-  }
-}