easy-component-ui 2.0.5 → 2.1.0

package/components/ea-progress/src/components/SVGComm.js

@@ -1 +1,18 @@
-export const SVGComm={dashboard:'\n    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <circle class="track--dashboard" cx="50" cy="50" r="40" fill="none" stroke-dasharray="252px" stroke="aliceblue"\n            stroke-width="4px" stroke-dashoffset="100" stroke-linecap="round" />\n        <circle class="path--dashboard" cx="50" cy="50" r="40" fill="none" stroke-dasharray="252px" stroke="rgb(32, 160, 255)" stroke-width="4px"\n            stroke-dashoffset="252" stroke-linecap="round" />\n    </svg>\n    <span class="ea-progress_text--dashboard"></span>\n    ',circle:'\n    <svg viewBox="0 0 100 100">\n        <circle class="track--circle" cx="50" cy="50" r="48" fill="none" stroke="aliceblue" stroke-width="4" stroke-dasharray="302px" stroke-dashoffset="0" />\n        <circle class="path--circle" cx="50" cy="50" r="48" fill="none" stroke="rgb(32, 160, 255)" stroke-width="4" stroke-dasharray="302px" stroke-dashoffset="0"  stroke-linecap="round" />\n    </svg>\n    <span class="ea-progress_text--circle"></span>\n    '};
+export const SVGComm = {
+    dashboard: `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <circle class="track--dashboard" cx="50" cy="50" r="40" fill="none" stroke-dasharray="252px" stroke="aliceblue"
+            stroke-width="4px" stroke-dashoffset="100" stroke-linecap="round" />
+        <circle class="path--dashboard" cx="50" cy="50" r="40" fill="none" stroke-dasharray="252px" stroke="rgb(32, 160, 255)" stroke-width="4px"
+            stroke-dashoffset="252" stroke-linecap="round" />
+    </svg>
+    <span class="ea-progress_text--dashboard"></span>
+    `,
+    circle: `
+    <svg viewBox="0 0 100 100">
+        <circle class="track--circle" cx="50" cy="50" r="48" fill="none" stroke="aliceblue" stroke-width="4" stroke-dasharray="302px" stroke-dashoffset="0" />
+        <circle class="path--circle" cx="50" cy="50" r="48" fill="none" stroke="rgb(32, 160, 255)" stroke-width="4" stroke-dasharray="302px" stroke-dashoffset="0"  stroke-linecap="round" />
+    </svg>
+    <span class="ea-progress_text--circle"></span>
+    `,
+}

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

@@ -1 +1,55 @@
-export const stylesheet="\n.ea-progress_wrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  line-height: 1;\n  height: 1rem;\n}\n.ea-progress_wrap .ea-progress_track,\n.ea-progress_wrap .ea-progress_path {\n  height: 0.5rem;\n  line-height: 1;\n  background-color: rgb(235, 238, 245);\n  border-radius: 999px;\n}\n.ea-progress_wrap .ea-progress_track {\n  width: 100%;\n}\n.ea-progress_wrap .ea-progress_track .ea-progress_path {\n  box-sizing: border-box;\n  padding-right: 0.5rem;\n  color: aliceblue;\n  font-size: 0.8rem;\n  text-align: right;\n  width: 0%;\n  background-color: #409eff;\n  transition: width 0.2s;\n}\n.ea-progress_wrap .ea-progress_text {\n  margin-left: 0.5rem;\n  font-size: 0.8rem;\n  width: 3rem;\n}\n.ea-progress_wrap .ea-progress_text--circle,\n.ea-progress_wrap .ea-progress_text--dashboard {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.ea-progress_wrap svg circle {\n  stroke-width: 4px;\n  transform-origin: center center;\n  transition: stroke-dashoffset 0.2s;\n}\n.ea-progress_wrap svg .track--circle,\n.ea-progress_wrap svg .path--circle {\n  transform: rotate(-90deg);\n}\n.ea-progress_wrap svg .track--dashboard,\n.ea-progress_wrap svg .path--dashboard {\n  transform: rotate(161deg);\n}\n";
+export const stylesheet = `
+.ea-progress_wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  line-height: 1;
+  height: 1rem;
+}
+.ea-progress_wrap .ea-progress_track,
+.ea-progress_wrap .ea-progress_path {
+  height: 0.5rem;
+  line-height: 1;
+  background-color: rgb(235, 238, 245);
+  border-radius: 999px;
+}
+.ea-progress_wrap .ea-progress_track {
+  width: 100%;
+}
+.ea-progress_wrap .ea-progress_track .ea-progress_path {
+  box-sizing: border-box;
+  padding-right: 0.5rem;
+  color: aliceblue;
+  font-size: 0.8rem;
+  text-align: right;
+  width: 0%;
+  background-color: #409eff;
+  transition: width 0.2s;
+}
+.ea-progress_wrap .ea-progress_text {
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+  width: 3rem;
+}
+.ea-progress_wrap .ea-progress_text--circle,
+.ea-progress_wrap .ea-progress_text--dashboard {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ea-progress_wrap svg circle {
+  stroke-width: 4px;
+  transform-origin: center center;
+  transition: stroke-dashoffset 0.2s;
+}
+.ea-progress_wrap svg .track--circle,
+.ea-progress_wrap svg .path--circle {
+  transform: rotate(-90deg);
+}
+.ea-progress_wrap svg .track--dashboard,
+.ea-progress_wrap svg .path--dashboard {
+  transform: rotate(161deg);
+}
+`;

package/components/ea-radio/index.css

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

@@ -1 +1,137 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaRadio extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <label class="ea-radio_wrap" part="container">\n        <span class="ea-radio-input_wrap" part="input-wrap">\n          <span class="ea-radio-input_inner" part="input"></span>\n          <input class="ea-radio-input_input" type="radio" />\n        </span>\n        <span class="ea-radio-label_desc" part="label-wrap">\n          <slot></slot>\n        </span>\n      </label>\n    ',this.#t=e.querySelector(".ea-radio_wrap"),this.#e=e.querySelector(".ea-radio-input_input"),this.build(e,stylesheet)}get checked(){return this.getAttrBoolean("checked")}set checked(e){this.setAttribute("checked",e),this.#t.setAttribute("checked",e),this.#e.checked=e,this.#t.classList.toggle("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.#e.disabled=e,this.#t.setAttribute("disabled",e),this.#t.classList.toggle("disabled",e)}get border(){return this.getAttrBoolean("border")}set border(e){this.#t.classList.toggle("border",e)}connectedCallback(){this.checked=this.checked,this.name=this.name,this.value=this.value,this.disabled=this.disabled,this.border=this.border,this.#e.addEventListener("change",(e=>{document.querySelectorAll(`ea-radio[name="${this.name}"]`).forEach((e=>{const t=e.shadowRoot.querySelector("input");e.checked=t===this.#e})),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,checked:this.checked}}))}))}}window.customElements.get("ea-radio")||window.customElements.define("ea-radio",EaRadio);
+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

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

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

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

@@ -1 +1,96 @@
-import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";const stylesheet="\n.ea-radio-group_wrap {\n  display: flex;\n}\n";export class EaRadioGroup extends Base{constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-radio-group_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.build(e,stylesheet)}get name(){return this.getAttribute("name")}set name(e){this.setAttribute("name",e),this.querySelectorAll("ea-radio").forEach((t=>{t.setAttribute("name",e)}))}get value(){return this.getAttribute("value")||""}set value(e){e&&this.setAttribute("value",e)}#e(e){e.forEach((e=>{e.checked&&(this.value=e.value),e.addEventListener("change",(t=>{this.value=e.value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{target:e,value:this.value}}))}))}))}#t(e){const t=Array.from(e).find((e=>e.value===this.value));t&&(t.checked=!0)}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.value=this.value,timeout((()=>{const e=this.querySelectorAll("ea-radio");this.#e(e),this.#t(e)}),20)}}window.customElements.get("ea-radio-group")||window.customElements.define("ea-radio-group",EaRadioGroup);
+// @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

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

package/components/ea-rate/index.css

@@ -0,0 +1,44 @@
+: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;
+}