easy-component-ui 2.1.1 → 3.0.1

package/components/ea-radio/index.js

@@ -1,137 +0,0 @@
-import Base from '../Base.js'
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaRadio extends Base {
-  #radio;
-  #label;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-
-    shadowRoot.innerHTML = `
-      <label class="ea-radio_wrap" part="container">
-        <span class="ea-radio-input_wrap" part="input-wrap">
-          <span class="ea-radio-input_inner" part="input"></span>
-          <input class="ea-radio-input_input" type="radio" />
-        </span>
-        <span class="ea-radio-label_desc" part="label-wrap">
-          <slot></slot>
-        </span>
-      </label>
-    `;
-
-    this.#label = shadowRoot.querySelector('.ea-radio_wrap');
-    this.#radio = shadowRoot.querySelector('.ea-radio-input_input');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  // ------- 选中 -------
-  // #region
-  get checked() {
-    return this.getAttrBoolean('checked');
-  }
-
-  set checked(val) {
-    this.setAttribute('checked', val);
-    this.#label.setAttribute('checked', val);
-    this.#radio.checked = val;
-
-    this.#label.classList.toggle('checked', val);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- label_for 单选框的唯一键 -------
-  // #region
-  get name() {
-    return this.getAttribute('name');
-  }
-
-  set name(val) {
-    this.setAttribute("name", val);
-    this.#radio.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.#radio.setAttribute('id', val);
-    this.#radio.setAttribute('value', val);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- disabled 禁用状态 -------
-  // #region
-  get disabled() {
-    return this.getAttrBoolean('disabled');
-  }
-
-  set disabled(val) {
-    this.#radio.disabled = val;
-    this.#label.setAttribute('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 -------
-
-  connectedCallback() {
-    // radio 的 checked 属性
-    this.checked = this.checked;
-
-    // label 的 for 属性
-    this.name = this.name;
-
-    // radio 的 value 属性
-    this.value = this.value;
-
-    // radio 的 disabled 属性
-    this.disabled = this.disabled;
-
-    // border 属性
-    this.border = this.border;
-
-    // 监听 change 事件, 修改 checked 属性
-    this.#radio.addEventListener('change', (e) => {
-      document.querySelectorAll(`ea-radio[name="${this.name}"]`).forEach(btn => {
-        const btnInput = btn.shadowRoot.querySelector('input');
-        btn.checked = btnInput === this.#radio;
-      });
-
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.value,
-          checked: this.checked
-        }
-      }))
-    })
-  }
-}
-
-if (!window.customElements.get("ea-radio")) {
-  window.customElements.define("ea-radio", EaRadio);
-}

package/components/ea-radio/index.scss

@@ -1,119 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-:host {
-  --margin-right: 0.75rem;
-
-  --text-color: #606266;
-
-  --radio-show-type: inline-block;
-
-  --button-size: 1rem;
-
-  --button-margin: 0.5rem;
-}
-
-.ea-radio_wrap {
-  display: flex;
-  align-items: center;
-  margin-right: 1rem;
-
-  .ea-radio-input_wrap {
-    width: var(--button-size);
-    height: var(--button-size);
-    line-height: 1;
-    margin-right: var(--button-margin);
-
-    input {
-      display: none;
-    }
-
-    .ea-radio-input_inner {
-      position: relative;
-      display: var(--radio-show-type);
-
-      width: 1rem;
-      height: 1rem;
-      line-height: 1;
-
-      box-sizing: border-box;
-      border-radius: 50%;
-      border: 1px solid $color-default-text;
-
-      &::before {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-
-        content: "";
-        width: 0.35rem;
-        height: 0.35rem;
-        border-radius: 50%;
-        background-color: transparent;
-
-        box-sizing: border-box;
-        transition: all 0.3s ease;
-      }
-
-      &:hover {
-        border-color: $color-primary-bgc;
-      }
-    }
-  }
-
-  .ea-radio-label_desc {
-    color: var(--text-color);
-  }
-
-  &.checked {
-    .ea-radio-input_wrap {
-      .ea-radio-input_inner {
-        border-color: $color-primary-bgc;
-        background-color: $color-primary-bgc;
-
-        &::before {
-          background-color: white;
-        }
-      }
-    }
-
-    .ea-radio-label_desc {
-      color: $color-primary-bgc;
-    }
-  }
-
-  &.disabled {
-    .ea-radio-input_wrap {
-      .ea-radio-input_inner {
-        border-color: $color-disabled-btn-bgc;
-        background-color: $color-disabled-btn-bgc;
-
-        &::before {
-          background-color: transparent;
-        }
-      }
-    }
-
-    .ea-radio-label_desc {
-      color: $color-disabled-text;
-    }
-  }
-
-  &.disabled[checked="true"] {
-      .ea-radio-input_inner {
-        &::before {
-          background-color: $color-disabled-text;
-        }
-      }
-  }
-
-  &.border {
-    border: 1px solid #ccc;
-    padding: 0.25rem 0.5rem;
-    border-radius: 8px;
-  }
-
-  &.border[checked="true"] {
-    border: 1px solid $color-primary-bgc;
-  }
-}

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

@@ -1,84 +0,0 @@
-export const stylesheet = `
-:host {
-  --margin-right: 0.75rem;
-  --text-color: #606266;
-  --radio-show-type: inline-block;
-  --button-size: 1rem;
-  --button-margin: 0.5rem;
-}
-
-.ea-radio_wrap {
-  display: flex;
-  align-items: center;
-  margin-right: 1rem;
-}
-.ea-radio_wrap .ea-radio-input_wrap {
-  width: var(--button-size);
-  height: var(--button-size);
-  line-height: 1;
-  margin-right: var(--button-margin);
-}
-.ea-radio_wrap .ea-radio-input_wrap input {
-  display: none;
-}
-.ea-radio_wrap .ea-radio-input_wrap .ea-radio-input_inner {
-  position: relative;
-  display: var(--radio-show-type);
-  width: 1rem;
-  height: 1rem;
-  line-height: 1;
-  box-sizing: border-box;
-  border-radius: 50%;
-  border: 1px solid #606266;
-}
-.ea-radio_wrap .ea-radio-input_wrap .ea-radio-input_inner::before {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  content: "";
-  width: 0.35rem;
-  height: 0.35rem;
-  border-radius: 50%;
-  background-color: transparent;
-  box-sizing: border-box;
-  transition: all 0.3s ease;
-}
-.ea-radio_wrap .ea-radio-input_wrap .ea-radio-input_inner:hover {
-  border-color: #409eff;
-}
-.ea-radio_wrap .ea-radio-label_desc {
-  color: var(--text-color);
-}
-.ea-radio_wrap.checked .ea-radio-input_wrap .ea-radio-input_inner {
-  border-color: #409eff;
-  background-color: #409eff;
-}
-.ea-radio_wrap.checked .ea-radio-input_wrap .ea-radio-input_inner::before {
-  background-color: white;
-}
-.ea-radio_wrap.checked .ea-radio-label_desc {
-  color: #409eff;
-}
-.ea-radio_wrap.disabled .ea-radio-input_wrap .ea-radio-input_inner {
-  border-color: #eeeeee;
-  background-color: #eeeeee;
-}
-.ea-radio_wrap.disabled .ea-radio-input_wrap .ea-radio-input_inner::before {
-  background-color: transparent;
-}
-.ea-radio_wrap.disabled .ea-radio-label_desc {
-  color: #c0c4cc;
-}
-.ea-radio_wrap.disabled[checked=true] .ea-radio-input_inner::before {
-  background-color: #c0c4cc;
-}
-.ea-radio_wrap.border {
-  border: 1px solid #ccc;
-  padding: 0.25rem 0.5rem;
-  border-radius: 8px;
-}
-.ea-radio_wrap.border[checked=true] {
-  border: 1px solid #409eff;
-}
-`;

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

@@ -1,3 +0,0 @@
-.ea-radio-group_wrap {
-  display: flex;
-}

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

@@ -1,96 +0,0 @@
-// @ts-nocheck
-import { timeout } from "../../utils/timeout.js";
-import Base from "../Base.js";
-
-const stylesheet = `
-.ea-radio-group_wrap {
-  display: flex;
-}
-`;
-
-export class EaRadioGroup extends Base {
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-radio-group_wrap" part="container">
-                <slot></slot>
-            </div>
-        `;
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- name 唯一键值 -------
-    // #region
-    get name() {
-        return this.getAttribute('name');
-    }
-
-    set name(val) {
-        this.setAttribute("name", val);
-        this.querySelectorAll('ea-radio').forEach(radio => {
-            radio.setAttribute('name', val);
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- value 值 -------
-    // #region
-    get value() {
-        return this.getAttribute('value') || '';
-    }
-
-    set value(val) {
-        if (!val) return;
-
-        this.setAttribute("value", val);
-    }
-    // #endregion
-    // ------- end -------
-
-    #initValue(radios) {
-        radios.forEach(radio => {
-            if (radio.checked) this.value = radio.value;
-
-            radio.addEventListener('change', e => {
-                this.value = radio.value;
-
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        target: radio,
-                        value: this.value
-                    }
-                }));
-            });
-        });
-    }
-
-    #initRadioChecked(radios) {
-        const valueRadio = Array.from(radios).find(radio => radio.value === this.value);
-        if (valueRadio) valueRadio.checked = true;
-    }
-
-    connectedCallback() {
-        this.setAttribute("data-ea-component", true);
-
-        // name 唯一键值
-        this.name = this.name;
-
-        this.value = this.value;
-
-        timeout(() => {
-            const radios = this.querySelectorAll('ea-radio');
-            this.#initValue(radios);
-            this.#initRadioChecked(radios);
-        }, 20);
-    }
-}
-
-if (!window.customElements.get("ea-radio-group")) {
-    window.customElements.define("ea-radio-group", EaRadioGroup);
-}

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

@@ -1,3 +0,0 @@
-.ea-radio-group_wrap {
-  display: flex;
-}

package/components/ea-rate/index.css

@@ -1,44 +0,0 @@
-:host {
-  --i-color: rgb(247, 186, 42);
-}
-
-.ea-rate_wrap {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.ea-rate_wrap .ea-rate_item {
-  cursor: pointer;
-}
-.ea-rate_wrap .ea-rate_item ea-icon::part(container) {
-  color: var(--i-color);
-  transition: color 0.3s, font-size 0.1s;
-}
-.ea-rate_wrap .ea-rate_item.active ea-icon::part(container) {
-  font-size: 1.1rem;
-}
-.ea-rate_wrap .ea-rate_item.disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.ea-rate_wrap .ea-rate_text {
-  margin-left: 0.25rem;
-  min-width: 2rem;
-  font-size: 0.8rem;
-  line-height: 0.8;
-  vertical-align: middle;
-}
-.ea-rate_wrap .ea-rate_score {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.ea-rate_wrap .ea-rate_score .ea-rate_score_item {
-  width: 24px;
-  height: 24px;
-}
-.ea-rate_wrap .ea-rate_score .ea-rate_score_item > i {
-  color: #c0c4cc;
-  font-size: 1rem;
-  line-height: 1;
-}