easy-component-ui 2.1.0 → 3.0.0

package/components/ea-carousel-item/src/style/stylesheet.js

@@ -1,22 +0,0 @@
-export const stylesheet = `
-:host {
-  --odd-bgc: #99a9bf;
-}
-
-.ea-carousel-item_wrap {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  z-index: 0;
-  background-color: var(--odd-bgc);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ea-carousel-item_wrap ::slotted(img) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-`;

package/components/ea-checkbox/index.css

@@ -1,108 +0,0 @@
-: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,160 +0,0 @@
-// @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

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

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

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

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

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

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

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