easy-component-ui 2.0.4 → 2.1.0

package/components/ea-checkbox/index.css

@@ -0,0 +1,108 @@
+:host {
+  --margin-right: 1rem;
+}
+
+.ea-checkbox_wrap {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: var(--margin-right);
+}
+.ea-checkbox_wrap input {
+  display: none;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap {
+  line-height: 1;
+  margin-right: 0.5rem;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  line-height: 0.8125;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {
+  content: "";
+  position: absolute;
+  left: 52.5%;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(-135deg);
+  display: block;
+  width: 3px;
+  height: 7px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_input {
+  display: none;
+}
+.ea-checkbox_wrap .ea-checkbox-label_desc {
+  line-height: 1;
+  transition: color 0.2s;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {
+  opacity: 1;
+  left: 50%;
+  top: 50%;
+  width: 80%;
+  height: 3px;
+  background-color: white;
+  transform: translate(-50%, -50%) rotate(0deg);
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {
+  opacity: 1;
+  border-left: 2px solid white;
+  border-top: 2px solid white;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {
+  color: #409eff;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled {
+  pointer-events: none;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap {
+  cursor: not-allowed;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #eeeeee;
+  background-color: #eeeeee;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {
+  background-color: transparent;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #eeeeee;
+  background-color: #eeeeee;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {
+  opacity: 1;
+  border-left: 2px solid white;
+  border-top: 2px solid white;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {
+  color: #c0c4cc;
+}

package/components/ea-checkbox/index.js

@@ -1 +1,160 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckbox extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <label class="ea-checkbox_wrap" part="container">\n        <input type="checkbox" class="ea-checkbox-input_input"/>\n        <span class="ea-checkbox-input_wrap" part="input-container">\n          <span class="ea-checkbox-input_inner" part="input"></span>\n        </span>\n        <span class="ea-checkbox-label_desc" part="label-container">\n          <slot></slot>\n        </span>\n      </label>\n    ',this.#t=e.querySelector(".ea-checkbox_wrap"),this.#e=e.querySelector(".ea-checkbox-input_input"),this.build(e,stylesheet)}get checked(){return this.getAttrBoolean("checked")}set checked(e){this.setAttribute("checked",e),this.#e.checked=e}get name(){return this.getAttribute("name")||""}set name(e){this.setAttribute("name",e),this.#e.setAttribute("name",e)}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e),this.#t.setAttribute("for",e),this.#e.setAttribute("id",e),this.#e.setAttribute("value",e)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.setAttribute("disabled",e),this.#e.disabled=e}get border(){return this.getAttrBoolean("border")}set border(e){this.#t.classList.toggle("border",e)}get indeterminate(){return this.getAttrBoolean("indeterminate")}set indeterminate(e){this.setAttribute("indeterminate",e),this.#e.setAttribute("indeterminate",e),e&&(this.checked=!1,this.#t.classList.remove("checked"),this.setAttribute("indeterminate",!0),this.#e.setAttribute("indeterminate",!0))}connectedCallback(){this.checked=this.checked,this.name=this.name,this.value=this.value,this.disabled=this.disabled,this.border=this.border,this.indeterminate=this.indeterminate,this.#e.addEventListener("change",(e=>{e.preventDefault(),this.indeterminate=!1,this.checked=e.target.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value,name:this.name}}))}))}}window.customElements.get("ea-checkbox")||window.customElements.define("ea-checkbox",EaCheckbox);
+// @ts-nocheck
+import Base from '../Base.js'
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaCheckbox extends Base {
+  #checkbox;
+  #label;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <label class="ea-checkbox_wrap" part="container">
+        <input type="checkbox" class="ea-checkbox-input_input"/>
+        <span class="ea-checkbox-input_wrap" part="input-container">
+          <span class="ea-checkbox-input_inner" part="input"></span>
+        </span>
+        <span class="ea-checkbox-label_desc" part="label-container">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+
+    this.#label = shadowRoot.querySelector('.ea-checkbox_wrap');
+    this.#checkbox = shadowRoot.querySelector('.ea-checkbox-input_input');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- checked 选中 -------
+  // #region
+  get checked() {
+    return this.getAttrBoolean('checked');
+  }
+
+  set checked(val) {
+    this.setAttribute('checked', val);
+    this.#checkbox.checked = val;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- name 单选框的唯一键 -------
+  // #region
+  get name() {
+    return this.getAttribute('name') || '';
+  }
+
+  set name(val) {
+    this.setAttribute('name', val);
+    this.#checkbox.setAttribute('name', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- value 单选框的值 -------
+  // #region
+  get value() {
+    return this.getAttribute('value');
+  }
+
+
+  set value(val) {
+    this.setAttribute('value', val);
+    this.#label.setAttribute('for', val);
+    this.#checkbox.setAttribute('id', val);
+    this.#checkbox.setAttribute('value', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- disabled 禁用状态 -------
+  // #region
+  get disabled() {
+    return this.getAttrBoolean('disabled');
+  }
+
+  set disabled(val) {
+    this.setAttribute('disabled', val);
+    this.#checkbox.disabled = val;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- border 是否带有边框 -------
+  // #region
+  get border() {
+    return this.getAttrBoolean('border');
+  }
+
+  set border(val) {
+    this.#label.classList.toggle('border', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- indeterminate 状态 -------
+  // #region
+  get indeterminate() {
+    return this.getAttrBoolean('indeterminate');
+  }
+
+  set indeterminate(val) {
+    this.setAttribute('indeterminate', val);
+    this.#checkbox.setAttribute('indeterminate', val);
+
+    if (val) {
+      this.checked = false;
+      this.#label.classList.remove('checked');
+
+      this.setAttribute('indeterminate', true);
+      this.#checkbox.setAttribute('indeterminate', true);
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  connectedCallback() {
+    // checkbox 的 checked 属性
+    this.checked = this.checked;
+
+    // label 的 for 属性
+    this.name = this.name;
+
+    // checkbox 的 value 属性
+    this.value = this.value;
+
+    // checkbox 的 disabled 属性
+    this.disabled = this.disabled;
+
+    // border 属性
+    this.border = this.border;
+
+    // indeterminate 属性
+    this.indeterminate = this.indeterminate;
+
+    // 监听 change 事件, 修改 checked 属性
+    this.#checkbox.addEventListener('change', (e) => {
+      e.preventDefault();
+      this.indeterminate = false;
+      this.checked = e.target.checked;
+
+      this.dispatchEvent(new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          checked: this.checked,
+          value: this.value,
+          name: this.name,
+        }
+      }))
+    })
+  }
+}
+
+if (!window.customElements.get("ea-checkbox")) {
+  window.customElements.define("ea-checkbox", EaCheckbox);
+}

package/components/ea-checkbox/index.scss

@@ -0,0 +1,141 @@
+@import "../ea-ui-base-style.scss";
+
+:host {
+  --margin-right: 1rem;
+}
+
+.ea-checkbox_wrap {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: var(--margin-right);
+
+  input {
+    display: none;
+  }
+
+  .ea-checkbox-input_wrap {
+    line-height: 1;
+    margin-right: 0.5rem;
+
+    .ea-checkbox-input_inner {
+      box-sizing: border-box;
+      position: relative;
+      display: block;
+      width: 0.8125rem;
+      height: 0.8125rem;
+      line-height: 0.8125;
+
+      border-radius: 3px;
+
+      border: 1px solid #ccc;
+      transition: background-color 0.2s, border-color 0.2s;
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 52.5%;
+        top: 45%;
+
+        transform: translate(-50%, -50%) rotate(-135deg);
+
+        display: block;
+
+        width: 3px;
+        height: 7px;
+
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+    }
+
+    .ea-checkbox-input_input {
+      display: none;
+    }
+  }
+
+  .ea-checkbox-label_desc {
+    line-height: 1;
+    transition: color 0.2s;
+  }
+
+  .ea-checkbox-input_input[indeterminate="true"] {
+    & + .ea-checkbox-input_wrap {
+      .ea-checkbox-input_inner {
+        border-color: $color-primary-bgc;
+        background-color: $color-primary-bgc;
+        &::after {
+          opacity: 1;
+
+          left: 50%;
+          top: 50%;
+
+          width: 80%;
+          height: 3px;
+          background-color: white;
+          transform: translate(-50%, -50%) rotate(0deg);
+        }
+      }
+    }
+  }
+
+  .ea-checkbox-input_input:checked,
+  .ea-checkbox-input_input[indeterminate="true"]:checked,
+  .ea-checkbox-input_input[indeterminate="false"]:checked {
+    & + .ea-checkbox-input_wrap {
+      .ea-checkbox-input_inner {
+        border-color: $color-primary-bgc;
+        background-color: $color-primary-bgc;
+
+        &::after {
+          opacity: 1;
+          border-left: 2px solid white;
+          border-top: 2px solid white;
+        }
+      }
+
+      & + .ea-checkbox-label_desc {
+        color: $color-primary-bgc;
+      }
+    }
+  }
+
+  .ea-checkbox-input_input:disabled {
+    pointer-events: none;
+    & + .ea-checkbox-input_wrap {
+      cursor: not-allowed;
+      .ea-checkbox-input_inner {
+        border-color: $color-disabled-btn-bgc;
+        background-color: $color-disabled-btn-bgc;
+
+        &::before {
+          background-color: transparent;
+        }
+      }
+
+      & + .ea-checkbox-label_desc {
+        cursor: not-allowed;
+        color: $color-disabled-text;
+      }
+    }
+  }
+
+  .ea-checkbox-input_input:disabled:checked {
+    & + .ea-checkbox-input_wrap {
+      .ea-checkbox-input_inner {
+        border-color: $color-disabled-btn-bgc;
+        background-color: $color-disabled-btn-bgc;
+        &::before {
+          opacity: 1;
+          border-left: 2px solid white;
+          border-top: 2px solid white;
+        }
+      }
+
+      & + .ea-checkbox-label_desc {
+        color: $color-disabled-text;
+      }
+    }
+  }
+}

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

@@ -1 +1,110 @@
-export const stylesheet='\n:host {\n  --margin-right: 1rem;\n}\n\n.ea-checkbox_wrap {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  user-select: none;\n  margin-right: var(--margin-right);\n}\n.ea-checkbox_wrap input {\n  display: none;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap {\n  line-height: 1;\n  margin-right: 0.5rem;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 0.8125rem;\n  height: 0.8125rem;\n  line-height: 0.8125;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  content: "";\n  position: absolute;\n  left: 52.5%;\n  top: 45%;\n  transform: translate(-50%, -50%) rotate(-135deg);\n  display: block;\n  width: 3px;\n  height: 7px;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_input {\n  display: none;\n}\n.ea-checkbox_wrap .ea-checkbox-label_desc {\n  line-height: 1;\n  transition: color 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  opacity: 1;\n  left: 50%;\n  top: 50%;\n  width: 80%;\n  height: 3px;\n  background-color: white;\n  transform: translate(-50%, -50%) rotate(0deg);\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  opacity: 1;\n  border-left: 2px solid white;\n  border-top: 2px solid white;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {\n  color: #409eff;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled {\n  pointer-events: none;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap {\n  cursor: not-allowed;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #eeeeee;\n  background-color: #eeeeee;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n  background-color: transparent;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {\n  cursor: not-allowed;\n  color: #c0c4cc;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #eeeeee;\n  background-color: #eeeeee;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n  opacity: 1;\n  border-left: 2px solid white;\n  border-top: 2px solid white;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {\n  color: #c0c4cc;\n}\n';
+export const stylesheet = `
+:host {
+  --margin-right: 1rem;
+}
+
+.ea-checkbox_wrap {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: var(--margin-right);
+}
+.ea-checkbox_wrap input {
+  display: none;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap {
+  line-height: 1;
+  margin-right: 0.5rem;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  line-height: 0.8125;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {
+  content: "";
+  position: absolute;
+  left: 52.5%;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(-135deg);
+  display: block;
+  width: 3px;
+  height: 7px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_input {
+  display: none;
+}
+.ea-checkbox_wrap .ea-checkbox-label_desc {
+  line-height: 1;
+  transition: color 0.2s;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {
+  opacity: 1;
+  left: 50%;
+  top: 50%;
+  width: 80%;
+  height: 3px;
+  background-color: white;
+  transform: translate(-50%, -50%) rotate(0deg);
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {
+  opacity: 1;
+  border-left: 2px solid white;
+  border-top: 2px solid white;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,
+.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {
+  color: #409eff;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled {
+  pointer-events: none;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap {
+  cursor: not-allowed;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #eeeeee;
+  background-color: #eeeeee;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {
+  background-color: transparent;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {
+  border-color: #eeeeee;
+  background-color: #eeeeee;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {
+  opacity: 1;
+  border-left: 2px solid white;
+  border-top: 2px solid white;
+}
+.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {
+  color: #c0c4cc;
+}
+`;

package/components/ea-checkbox-group/index.css

@@ -0,0 +1,6 @@
+.ea-checkbox-group {
+  display: flex;
+}
+.ea-checkbox-group ::slotted(ea-checkbox) {
+  margin-right: 1.5rem;
+}

package/components/ea-checkbox-group/index.js

@@ -1 +1,120 @@
-import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckboxGroup extends Base{#e=!1;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-checkbox-group_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"ea-checkbox"}set name(e){this.setAttribute("name",e),this.querySelectorAll("ea-checkbox").forEach((t=>{t.setAttribute("name",e),t.name=e}))}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e);try{const t=e.split(",").map((e=>e.trimStart()));t.map((e=>{this.querySelector(`ea-checkbox[value="${e}"]`).checked="true"})),this.dispatchEvent(new CustomEvent("change",{detail:t}))}catch(e){}}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){if(!e&&!this.#e)return;this.querySelectorAll("ea-checkbox").forEach((t=>{t.disabled=e}))}#t(e){let t=[];Array.from(e).filter((e=>!!e.checked&&t.push(e.value))),this.value=t.join(",")}connectedCallback(){this.setAttribute("data-ea-component",!0),setTimeout((()=>{this.name=this.name,this.value=this.value,this.disabled=this.disabled;const e=this.querySelectorAll("ea-checkbox");e.forEach((t=>{t.addEventListener("change",(t=>{this.#t(e)}))})),this.#t(e),this.#e=!0}),50)}}window.customElements.get("ea-checkbox-group")||window.customElements.define("ea-checkbox-group",EaCheckboxGroup);
+import { timeout } from "../../utils/timeout.js";
+import Base from "../Base.js";
+
+import { stylesheet } from "./src/style/stylesheet.js";
+
+export class EaCheckboxGroup extends Base {
+    #mounted = false;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class="ea-checkbox-group_wrap" part="container">
+                <slot></slot>
+            </div>
+        `;
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- name 唯一键值 -------
+    // #region
+    get name() {
+        return this.getAttribute('name') || 'ea-checkbox';
+    }
+
+    set name(val) {
+        this.setAttribute('name', val);
+        this.querySelectorAll('ea-checkbox').forEach(checkbox => {
+            checkbox.setAttribute('name', val);
+            checkbox.name = val;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 指定选中值 -------
+    // #region
+    get value() {
+        return this.getAttribute('value') || '';
+    }
+
+    set value(val) {
+        this.setAttribute('value', val);
+
+        try {
+            const valArr = val.split(',').map(item => item.trimStart());
+
+            valArr.map(item => {
+                const checkbox = this.querySelector(`ea-checkbox[value="${item}"]`);
+
+                checkbox.checked = 'true';
+            })
+
+            this.dispatchEvent(new CustomEvent('change', { detail: valArr }));
+        } catch (error) {
+
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled');
+    }
+
+    set disabled(val) {
+        if (!val && !this.#mounted) return;
+
+        const checkboxs = this.querySelectorAll(`ea-checkbox`);
+        checkboxs.forEach(checkbox => {
+            checkbox.disabled = val;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleValueUptate(checkboxes) {
+        let valueArr = [];
+        Array.from(checkboxes).filter(item => {
+            if (item.checked) return valueArr.push(item.value);
+            return false;
+        })
+
+        this.value = valueArr.join(',');
+    }
+
+    connectedCallback() {
+        this.setAttribute('data-ea-component', true);
+
+
+        setTimeout(() => {
+            // name 唯一键值
+            this.name = this.name;
+
+            // value 指定选中值
+            this.value = this.value;
+
+            // disabled 禁用
+            this.disabled = this.disabled;
+
+            const checkboxes = this.querySelectorAll('ea-checkbox');
+            checkboxes.forEach(checkbox => {
+                checkbox.addEventListener('change', e => {
+                    this.#handleValueUptate(checkboxes);
+                });
+            });
+            this.#handleValueUptate(checkboxes);
+            this.#mounted = true;
+        }, 50);
+
+    }
+}
+
+if (!window.customElements.get("ea-checkbox-group")) {
+    window.customElements.define("ea-checkbox-group", EaCheckboxGroup);
+}

package/components/ea-checkbox-group/index.scss

@@ -0,0 +1,7 @@
+.ea-checkbox-group {
+  display: flex;
+
+  ::slotted(ea-checkbox) {
+    margin-right: 1.5rem;
+  }
+}

package/components/ea-checkbox-group/src/style/stylesheet.js

@@ -1 +1,8 @@
-export const stylesheet="\n.ea-checkbox-group {\n  display: flex;\n}\n.ea-checkbox-group ::slotted(ea-checkbox) {\n  margin-right: 1.5rem;\n}\n";
+export const stylesheet = `
+.ea-checkbox-group {
+  display: flex;
+}
+.ea-checkbox-group ::slotted(ea-checkbox) {
+  margin-right: 1.5rem;
+}
+`;