easy-component-ui 2.0.5 → 2.1.0

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

@@ -1 +1,67 @@
-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";
+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

@@ -0,0 +1,90 @@
+: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-switch/index.js

@@ -1 +1,189 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSwitch extends Base{#t;#e;#i;#s;#a;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <label class="ea-switch_wrap" part="container">\n                <input class="ea-switch_input" type="checkbox">\n                <span class="ea-switch_label ea-switch_label--left" part="label-left"></span>\n                <span class="ea-switch_core" part="switch"></span>\n                <span class="ea-switch_label ea-switch_label--right" part="label-right"></span>\n            </label>\n        ',this.#t=t.querySelector(".ea-switch_wrap"),this.#e=t.querySelector(".ea-switch_input"),this.#i=t.querySelector(".ea-switch_label--left"),this.#s=t.querySelector(".ea-switch_core"),this.#a=t.querySelector(".ea-switch_label--right"),this.build(t,stylesheet)}get name(){return this.getAttribute("name")||"ea-switch"}set name(t){this.setAttribute("name",t),this.#t.setAttribute("for",t),this.#e.setAttribute("name",t),this.#e.setAttribute("id",t)}get value(){return this.inactiveText&&!this.checked?this.inactiveText:this.activeText&&this.checked?this.activeText:this.checked}set value(t){this.#e.value=t}get inactiveText(){return this.getAttribute("inactive-text")||""}set inactiveText(t){t&&(this.setAttribute("inactive-text",t),this.#i.innerText=t)}get activeText(){return this.getAttribute("active-text")||""}set activeText(t){t&&(this.setAttribute("active-text",t),this.#a.innerText=t)}get checked(){return this.getAttrBoolean("checked")}set checked(t){this.setAttribute("checked",t),this.#e.checked=t}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#e.disabled=t,this.#t.classList.toggle("disabled",t)}get inactiveColor(){return this.getAttribute("inactive-color")||""}set inactiveColor(t){t&&this.style.setProperty("--inactive-checkbox-bgc",t)}get activeColor(){return this.getAttribute("active-color")}set activeColor(t){t&&this.style.setProperty("--active-checkbox-bgc",t)}connectedCallback(){this.setAttribute("data-ea-component",!0),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.#e.addEventListener("change",(t=>{t.preventDefault(),t.stopPropagation(),this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:this.value}}))}))}}customElements.get("ea-switch")||customElements.define("ea-switch",EaSwitch);
+// @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

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

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