easy-component-ui 1.0.3 → 2.0.1

package/components/ea-progress/index.js

@@ -1,333 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import "../ea-icon/index.js"
-
-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);
-}
-`;
-
-const SVGTemplate = {
-    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>
-    `,
-}
-
-export class EaProgress extends Base {
-    #wrap;
-    #track;
-    #path;
-    #progressText;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-progress_wrap';
-
-        // 背景条
-        const track = document.createElement('section');
-        track.className = 'ea-progress_track';
-
-        // 进度条
-        const path = document.createElement('section');
-        path.className = 'ea-progress_path';
-
-        track.appendChild(path);
-        wrap.appendChild(track);
-
-        // 进度文字
-        const progressText = document.createElement('section');
-        progressText.className = 'ea-progress_text';
-
-        wrap.appendChild(progressText);
-
-        this.#wrap = wrap;
-        this.#track = track;
-        this.#path = path;
-        this.#progressText = progressText;
-
-        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- type 进度条类型 -------
-    // #region
-
-    handleSVGTemplate(type) {
-        this.#wrap.style.height = '126px';
-        this.#wrap.style.width = '126px';
-
-        this.#wrap.innerHTML = SVGTemplate[type];
-
-        const track = this.#wrap.querySelector(`circle[class="track--${type}"]`);
-        const path = this.#wrap.querySelector(`circle[class="path--${type}"]`);
-        const progressText = this.#wrap.querySelector(`span[class="ea-progress_text--${type}"]`);
-
-        this.#track = track;
-        this.#path = path;
-        this.#progressText = progressText;
-    }
-
-    get type() {
-        return this.getAttribute('type');
-    }
-
-    set type(value) {
-        if (value === null || value === undefined || value === '') return;
-
-        this.setAttribute('type', value);
-
-        switch (this.type) {
-            case "circle":
-                this.handleSVGTemplate("circle");
-                break;
-            case "dashboard":
-                this.handleSVGTemplate("dashboard");
-                break;
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- percentage 进度百分比 -------
-    // #region
-    get percentage() {
-        return this.getAttribute('percentage') || 0;
-    }
-
-    getCirclePercentageValue(value) {
-        return 302 * (100 - Number(value)) / 100;
-    }
-
-    getDashboardPercentageValue(value) {
-        return 152 * (100 - Number(value)) / 100 + 100;
-    }
-
-    set percentage(value) {
-        if (value === null || value === undefined || value === '') return;
-        else if (Number(value) < 0) value = 0;
-        else if (Number(value) > 100) value = 100;
-
-        this.setAttribute('percentage', value);
-        this.#progressText.innerHTML = `${value}%`;
-
-        switch (this.type) {
-            case "circle": {
-                this.#path.style.strokeDashoffset = `${this.getCirclePercentageValue(value)}px`;
-                break;
-            }
-            case "dashboard": {
-                this.#path.style.strokeDashoffset = `${this.getDashboardPercentageValue(value)}px`;
-                break;
-            }
-            default: {
-                this.#path.style.width = `${value}%`;
-
-                if (this.textInside) this.handleTextInside(value);
-                break;
-            }
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- status 进度条状态样式 -------
-    // #region
-
-    // 样式配置
-    get statusList() {
-        return {
-            success: {
-                icon: 'icon-ok-circled',
-                color: '#67c23a'
-            },
-            warning: {
-                icon: 'icon-attention-circled',
-                color: '#e6a23c'
-            },
-            exception: {
-                icon: 'icon-cancel-circled',
-                color: '#f56c6c'
-            },
-            primary: '',
-        }
-    }
-
-    // 状态处理
-    handleStatusStyle(value, className) {
-        this.#progressText.innerText = !this.statusList[value] ? `${this.percentage}%` : '';
-        this.#progressText.className = `${className} ${this.statusList[value].icon || ''}`;
-        this.#progressText.style.color = this.statusList[value].color;
-    }
-
-    get status() {
-        return this.getAttribute('status') || 'primary';
-    }
-
-    set status(value) {
-        this.setAttribute('status', value);
-
-        switch (this.type) {
-            case "circle":
-                this.handleStatusStyle(value, 'ea-progress_text--circle');
-                this.#path.style.stroke = this.statusList[value].color;
-                break;
-            case "dashboard":
-                this.handleStatusStyle(value, 'ea-progress_text--dashboard');
-                this.#path.style.stroke = this.statusList[value].color;
-                break;
-            default:
-                this.handleStatusStyle(value, 'ea-progress_text');
-                this.#path.style.backgroundColor = this.statusList[value].color;
-                break;
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- text-inside 进度文字内显 -------
-    // #region
-    handleTextInside(value) {
-        if (this.type === "circle") return;
-
-        if (value) {
-            this.#progressText.style.display = "none";
-            this.#path.innerText = `${this.percentage}%`;
-        } else {
-            this.#progressText.style.display = "block";
-            this.#path.innerText = ``;
-        }
-    }
-
-    get textInside() {
-        return this.getAttrBoolean("text-inside");
-    }
-
-    set textInside(value) {
-        this.setAttribute("text-inside", value);
-
-        this.handleTextInside(value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- stroke-width 进度条高度 -------
-    // #region
-    get strokeWidth() {
-        return this.getAttribute("stroke-width");
-    }
-
-    set strokeWidth(value) {
-        value = value ? value : 4;
-
-        this.toggleAttr("stroke-width", value);
-
-        if (this.type === "circle") {
-            this.#track.style.strokeWidth = `${Number(value)}px`;
-            this.#path.style.strokeWidth = `${Number(value)}px`;
-        } else {
-            value = Number(value) + 4;
-
-            this.#track.style.height = `${value}px`;
-            this.#track.style.lineHeight = `${value}px`;
-            this.#path.style.height = `${value}px`;
-            this.#path.style.lineHeight = `${value}px`;
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        const that = this;
-
-        // type 进度条类型
-        this.type = this.type;
-
-        // percentage 百分比
-        this.percentage = this.percentage;
-
-        // status 状态
-        this.status = this.status;
-
-        // text-inside 文本内显
-        this.textInside = this.textInside;
-
-        // stroke-width 进度条的高度
-        this.strokeWidth = this.strokeWidth;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get("ea-progress")) {
-    customElements.define("ea-progress", EaProgress);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{SVGComm}from"./src/components/SVGComm.js";export class EaProgress extends Base{#t;#e;#s;#r;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-progress_wrap" part="container">\n                <section class="ea-progress_track" part="track-wrap">\n                    <section class="ea-progress_path" part="path"></section>\n                </section>\n                <section class="ea-progress_text" part="text-wrap"></section>\n            </div>\n        ',this.#t=t.querySelector(".ea-progress_wrap"),this.#e=t.querySelector(".ea-progress_track"),this.#s=t.querySelector(".ea-progress_path"),this.#r=t.querySelector(".ea-progress_text"),this.build(t,stylesheet)}get type(){return this.getAttribute("type")}set type(t){if(t)switch(this.setAttribute("type",t),this.type){case"circle":this.#i("circle");break;case"dashboard":this.#i("dashboard")}}get percentage(){return this.getAttribute("percentage")||0}#a(t){return 302*(100-Number(t))/100}#h(t){return 152*(100-Number(t))/100+100}set percentage(t){if(!isNaN(Number(t)))switch(Number(t)<0?t=0:Number(t)>100&&(t=100),this.setAttribute("percentage",t),this.#r.innerHTML=`${t}%`,this.type){case"circle":this.#s.style.strokeDashoffset=`${this.#a(t)}px`;break;case"dashboard":this.#s.style.strokeDashoffset=`${this.#h(t)}px`;break;default:this.#s.style.width=`${t}%`,this.textInside&&this.#c(t)}}get statusList(){return{success:{icon:"icon-ok-circled",color:"#67c23a"},warning:{icon:"icon-attention-circled",color:"#e6a23c"},exception:{icon:"icon-cancel-circled",color:"#f56c6c"},primary:{}}}#o(t,e){!this.type&&this.textInside||"dashboard"===this.type||"circle"===this.type?this.#r.innerText=`${this.percentage}%`:this.#r.innerText="",this.#r.className=`${e} ${this.statusList[t].icon||""}`,this.#r.style.color=this.statusList[t].color}get status(){return this.getAttribute("status")||"primary"}set status(t){switch(this.setAttribute("status",t),this.type){case"circle":this.#o(t,"ea-progress_text--circle"),this.#s.style.stroke=this.statusList[t].color;break;case"dashboard":this.#o(t,"ea-progress_text--dashboard"),this.#s.style.stroke=this.statusList[t].color;break;default:this.#o(t,"ea-progress_text"),this.#s.style.backgroundColor=this.statusList[t].color}}get textInside(){return this.getAttrBoolean("text-inside")}set textInside(t){"circle"!==this.type&&(this.setAttribute("text-inside",t),this.#c(t))}get strokeWidth(){return this.getAttribute("stroke-width")}set strokeWidth(t){t=t?Number(t):4,this.toggleAttr("stroke-width",t),"circle"===this.type||"dashboard"===this.type?(this.#e.style.strokeWidth=`${t}px`,this.#s.style.strokeWidth=`${t}px`):(t+=4,this.#e.style.height=`${t}px`,this.#e.style.lineHeight=`${t}px`,this.#s.style.height=`${t}px`,this.#s.style.lineHeight=`${t}px`,this.#t.style.height=`${t}px`,this.#t.style.lineHeight=`${t}px`)}#i(t){this.#t.style.height="126px",this.#t.style.width="126px",this.#t.innerHTML=SVGComm[t];const e=this.#t.querySelector(`circle[class="track--${t}"]`),s=this.#t.querySelector(`circle[class="path--${t}"]`),r=this.#t.querySelector(`span[class="ea-progress_text--${t}"]`);this.#e=e,this.#s=s,this.#r=r}#c(t){t?(this.#r.style.display="none",this.#s.innerText=`${this.percentage}%`):(this.#r.style.display="block",this.#s.innerText="")}connectedCallback(){this.type=this.type,this.percentage=this.percentage,this.status=this.status,this.textInside=this.textInside,this.strokeWidth=this.strokeWidth}}customElements.get("ea-progress")||customElements.define("ea-progress",EaProgress);

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

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

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

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

package/components/ea-radio/index.js

@@ -1,287 +1 @@
-// @ts-nocheck
-import Base from '../Base.js'
-
-const stylesheet = `
-:host(ea-radio) {
-  --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_wrap .__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;
-}`;
-
-const inputDom = () => {
-  const wrap = document.createElement('span');
-  wrap.className = "__ea-radio-input_wrap";
-
-  const radio = document.createElement('span');
-  radio.className = "__ea-radio-input_inner";
-  wrap.appendChild(radio);
-
-  const input = document.createElement('input');
-  input.type = 'radio';
-  input.className = "__ea-radio-input_input";
-
-  wrap.appendChild(input);
-
-  return { wrap, input };
-}
-
-const labelDom = () => {
-  const labelDesc = document.createElement('span');
-  labelDesc.className = "__ea-radio-label_desc";
-  const slot = document.createElement('slot');
-  labelDesc.appendChild(slot);
-
-  return labelDesc;
-}
-
-export class EaRadio extends Base {
-  #radio;
-  #label;
-
-  static get observedAttributes() {
-    return ['checked'];
-  }
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    let dom = document.createElement('label');
-    dom.className = "ea-radio_wrap";
-
-    // input + radio
-    const input = inputDom();
-    dom.appendChild(input.wrap);
-
-    // label 标签文字
-    const label = labelDom();
-    dom.appendChild(label);
-
-    this.#label = dom;
-    this.#radio = input.input;
-
-
-    // ------- 打包 -------
-    // #region
-    const styleNode = document.createElement('style');
-    styleNode.innerHTML = stylesheet;
-    this.shadowRoot.appendChild(styleNode);
-    // #endregion
-    // ------- end -------
-
-    // ------- 本地调试 -------
-    // #region
-    // setStyle(shadowRoot, new URL('./index.css', import.meta.url).href);
-    // #endregion
-    // ------- end -------
-
-
-    shadowRoot.appendChild(dom);
-  }
-
-  // ------- 选中 -------
-  // #region
-  get checked() {
-    return this.getAttrBoolean('checked');
-  }
-
-  set checked(val) {
-    this.#radio.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');
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- label_for 单选框的唯一键 -------
-  // #region
-  get name() {
-    return this.getAttribute('name');
-  }
-
-  set name(val) {
-    this.#radio.setAttribute('name', val);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- value 单选框的值 -------
-  // #region
-  get value() {
-    return this.getAttribute('value');
-  }
-
-  set 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.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 -------
-
-  init() {
-    const that = this;
-
-    // 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', function (e) {
-      if (e.target.checked) {
-        document.querySelectorAll(`ea-radio[name="${that.name}"]`).forEach(btn => {
-          const btnInput = btn.shadowRoot.querySelector('input');
-
-          if (btnInput !== this) {
-            btn.checked = false;
-          } else {
-            btn.checked = true;
-          }
-        });
-      }
-
-      that.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.value,
-          checked: this.checked
-        }
-      }))
-    })
-
-
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    // console.log(name);
-  }
-}
-
-if (!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{#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.#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.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);

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

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