easy-component-ui 1.0.3 → 2.0.1

package/components/ea-checkbox/index.js

@@ -1,314 +1 @@
-// @ts-nocheck
-import Base from '../Base.js'
-
-const stylesheet = `:host {
-  --margin-right: 1rem;
-}
-
-.ea-checkbox_wrap {
-  display: flex;
-  align-items: center;
-  margin-right: var(--margin-right);
-}
-.ea-checkbox_wrap .__ea-checkbox-input_wrap {
-  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 {
-  transition: color 0.2s;
-}
-.ea-checkbox_wrap.checked .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
-  border-color: #409eff;
-  background-color: #409eff;
-}
-.ea-checkbox_wrap.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.checked .__ea-checkbox-label_desc {
-  color: #409eff;
-}
-.ea-checkbox_wrap.disabled .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
-  border-color: #eeeeee;
-  background-color: #eeeeee;
-}
-.ea-checkbox_wrap.disabled .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::before {
-  background-color: transparent;
-}
-.ea-checkbox_wrap.disabled .__ea-checkbox-label_desc {
-  color: #c0c4cc;
-}
-.ea-checkbox_wrap.disabled[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::before {
-  background-color: #c0c4cc;
-}
-.ea-checkbox_wrap.indeterminate .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
-  border-color: #409eff;
-  background-color: #409eff;
-}
-.ea-checkbox_wrap.indeterminate .__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.indeterminate .__ea-checkbox-label_desc {
-  color: #409eff;
-}
-.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
-  border-color: #409eff;
-  background-color: #409eff;
-}
-.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
-  width: 3px;
-  height: 7px;
-  left: 52.5%;
-  top: 45%;
-  transform: translate(-50%, -50%) rotate(-135deg);
-  opacity: 1;
-  border-left: 2px solid white;
-  border-top: 2px solid white;
-  background-color: transparent;
-}
-.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-label_desc {
-  color: #409eff;
-}`;
-
-const inputDom = () => {
-  const wrap = document.createElement('span');
-  wrap.className = "__ea-checkbox-input_wrap";
-
-  const checkbox = document.createElement('span');
-  checkbox.className = "__ea-checkbox-input_inner";
-  wrap.appendChild(checkbox);
-
-  const input = document.createElement('input');
-  input.type = 'checkbox';
-  input.className = "__ea-checkbox-input_input";
-
-  wrap.appendChild(input);
-
-  return { wrap, input };
-}
-
-const labelDom = () => {
-  const labelDesc = document.createElement('span');
-  labelDesc.className = "__ea-checkbox-label_desc";
-  const slot = document.createElement('slot');
-  labelDesc.appendChild(slot);
-
-  return labelDesc;
-}
-
-export class EaCheckbox extends Base {
-  #checkbox;
-  #label;
-
-  static get observedAttributes() {
-    return ['checked', 'disabled'];
-  }
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    const that = this;
-    let dom = document.createElement('label');
-    dom.className = "ea-checkbox_wrap";
-
-    // input + checkbox
-    const input = inputDom();
-    dom.appendChild(input.wrap);
-
-    // label 标签文字
-    const label = labelDom();
-    dom.appendChild(label);
-
-    this.#label = dom;
-    this.#checkbox = input.input;
-
-    this.build(shadowRoot, stylesheet);
-    shadowRoot.appendChild(dom);
-  }
-
-  // ------- checked 选中 -------
-  // #region
-  get checked() {
-    return this.getAttrBoolean('checked');
-  }
-
-  set checked(val) {
-    this.#checkbox.checked = val;
-
-    if (val) {
-      this.setAttribute('checked', true);
-      this.#label.setAttribute('checked', true);
-      this.#label.classList.add('checked');
-    } else {
-      this.removeAttribute('checked');
-      this.#label.removeAttribute('checked');
-      this.#label.classList.remove('checked');
-      this.#label.classList.remove('indeterminate');
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- name 单选框的唯一键 -------
-  // #region
-  get name() {
-    return this.getAttribute('name');
-  }
-
-  set name(val) {
-    this.#checkbox.setAttribute('name', val);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- value 单选框的值 -------
-  // #region
-  get value() {
-    return this.getAttribute('value');
-  }
-
-  set 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.#checkbox.disabled = val;
-    this.#label.toggleAttribute('disabled', val);
-    this.#label.classList.toggle('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) {
-    if (val) {
-      this.checked = false;
-      this.#label.classList.remove('checked');
-
-      this.setAttribute('indeterminate', true);
-      this.#label.classList.add('indeterminate');
-      console.log(val);
-    } else {
-      this.removeAttribute('indeterminate');
-      this.#label.classList.remove('indeterminate');
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  init() {
-    const that = this;
-
-    // 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', function (e) {
-      e.preventDefault();
-      that.checked = e.target.checked;
-      if (e.target.checked) {
-        // document.querySelectorAll(`ea-checkbox[name="${that.name}"]`).forEach(btn => {
-        //     const btnInput = btn.shadowRoot.querySelector('input');
-
-        //     if (btnInput !== this) {
-        //         btn.checked = false;
-        //     } else {
-        //         btn.checked = true;
-        //     }
-        // });
-      }
-    })
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    // switch (name) {
-    //     case 'disabled':
-    //         this.#label.setAttribute('checked', true);
-    //         this.#label.classList.add('checked');
-    //         break;
-    // }
-  }
-}
-
-if (!window.customElements.get("ea-checkbox")) {
-  window.customElements.define("ea-checkbox", EaCheckbox);
-}
+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        <span class="ea-checkbox-input_wrap" part="input-container">\n          <span class="ea-checkbox-input_inner" part="input"></span>\n          <input type="checkbox" class="ea-checkbox-input_input">\n          </input>\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.#e.checked=e,this.#t.classList.toggle("checked",e),this.setAttribute("checked",e),this.#t.setAttribute("checked",e),this.#t.classList.toggle("checked",e),e&&this.#t.classList.remove("indeterminate")}get name(){return this.getAttribute("name")||""}set name(e){this.#e.setAttribute("name",e)}get value(){return this.getAttribute("value")}set 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.#e.disabled=e,this.#t.toggleAttribute("disabled",e),this.#t.classList.toggle("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.#t.classList.toggle("indeterminate",e),e&&(this.checked=!1,this.#t.classList.remove("checked"),this.setAttribute("indeterminate",!0))}init(){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.checked=e.target.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value,name:this.name}}))}))}connectedCallback(){this.init()}}window.customElements.get("ea-checkbox")||window.customElements.define("ea-checkbox",EaCheckbox);

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

@@ -0,0 +1 @@
+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 .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.checked .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap.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.checked .ea-checkbox-label_desc {\n  color: #409eff;\n}\n.ea-checkbox_wrap.disabled .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #eeeeee;\n  background-color: #eeeeee;\n}\n.ea-checkbox_wrap.disabled .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n  background-color: transparent;\n}\n.ea-checkbox_wrap.disabled .ea-checkbox-label_desc {\n  color: #c0c4cc;\n}\n.ea-checkbox_wrap.disabled[checked=true] .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n  background-color: #c0c4cc;\n}\n.ea-checkbox_wrap.indeterminate .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap.indeterminate .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.indeterminate .ea-checkbox-label_desc {\n  color: #409eff;\n}\n.ea-checkbox_wrap.indeterminate[checked=true] .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap.indeterminate[checked=true] .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  width: 3px;\n  height: 7px;\n  left: 52.5%;\n  top: 45%;\n  transform: translate(-50%, -50%) rotate(-135deg);\n  opacity: 1;\n  border-left: 2px solid white;\n  border-top: 2px solid white;\n  background-color: transparent;\n}\n.ea-checkbox_wrap.indeterminate[checked=true] .ea-checkbox-label_desc {\n  color: #409eff;\n}\n';

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

@@ -1,107 +1 @@
-// @ts-nocheck
-import Base from "../Base.js";
-
-const stylesheet = `
-.ea-checkbox-group {
-  display: flex;
-}
-.ea-checkbox-group ::slotted(ea-checkbox) {
-  margin-right: 1.5rem;
-}`;
-
-export class EaCheckboxGroup extends Base {
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        const dom = document.createElement('div');
-        shadowRoot.appendChild(dom);
-        const slot = document.createElement('slot');
-        dom.className = "ea-checkbox-group";
-        dom.appendChild(slot);
-
-
-        this.dom = dom;
-
-        this.build(shadowRoot, stylesheet);
-
-        shadowRoot.appendChild(dom);
-    }
-
-    // ------- name 唯一键值 -------
-    // #region
-    get name() {
-        return this.getAttribute('name');
-    }
-
-    set name(val) {
-        this.querySelectorAll('ea-checkbox').forEach(checkbox => {
-            checkbox.setAttribute('name', val);
-            checkbox.name = val;
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- value 指定选中值 -------
-    // #region
-    get value() {
-        if (!this.getAttribute('value')) return;
-
-        return this.getAttribute('value');
-    }
-
-    set value(val) {
-        if (!val) return;
-
-        try {
-            const valArr = val.split(',').map(item => item.trimStart());
-
-            valArr.map(item => {
-                const checkbox = document.querySelector(`ea-checkbox[name="${this.name}"][value="${item}"]`);
-                checkbox.setAttribute('checked', 'true');
-                checkbox.checked = 'true';
-            })
-        } catch (error) {
-
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled');
-    }
-
-    set disabled(val) {
-        const checkboxs = document.querySelectorAll(`ea-checkbox[name="${this.name}"]`);
-
-        checkboxs.forEach(checkbox => {
-            checkbox.disabled = val;
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        // name 唯一键值
-        this.name = this.name;
-
-        // value 指定选中值
-        this.value = this.value;
-
-        // disabled 禁用
-        this.disabled = this.disabled;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!window.customElements.get("ea-checkbox-group")) {
-    window.customElements.define("ea-checkbox-group", EaCheckboxGroup);
-}
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckboxGroup extends Base{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.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=>{const t=this.querySelector(`ea-checkbox[name="${this.name}"][value="${e}"]`);t.setAttribute("checked","true"),t.checked="true"})),this.dispatchEvent(new CustomEvent("change",{detail:t}))}catch(e){}}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){document.querySelectorAll(`ea-checkbox[name="${this.name}"]`).forEach((t=>{t.disabled=e}))}#e(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),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.#e(e)}))})),this.#e(e)}}window.customElements.get("ea-checkbox-group")||window.customElements.define("ea-checkbox-group",EaCheckboxGroup);

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

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