easy-component-ui 1.0.3 → 2.0.1

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

@@ -1,59 +1 @@
-// @ts-nocheck
-import Base from "../Base.js";
-
-const stylesheet = `
-.ea-radio-group {
-  display: flex;
-}
-.ea-radio-group ea-radio {
-  margin-right: 2rem;
-}`;
-
-export class EaRadioGroup 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-radio-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-radio').forEach(radio => {
-            radio.setAttribute('name', val);
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        // name 唯一键值
-        this.name = this.name;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!window.customElements.get("ea-radio-group")) {
-    window.customElements.define("ea-radio-group", EaRadioGroup);
-}
+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.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;const e=this.querySelectorAll("ea-radio");this.#e(e),this.#t(e)}}window.customElements.get("ea-radio-group")||window.customElements.define("ea-radio-group",EaRadioGroup);

package/components/ea-rate/index.js

@@ -1,326 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import "../ea-icon/index.js"
-
-const stylesheet = `
-:host {
-  --i-color: rgb(247, 186, 42);
-}
-.ea-rate_wrap {
-  --i-color: rgb(247, 186, 42);
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.ea-rate_wrap .ea-rate_item {
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.ea-rate_wrap .ea-rate_item > i {
-  color: #c0c4cc;
-  font-size: 1rem;
-  line-height: 1;
-  transition: color 0.3s, font-size 0.1s;
-}
-.ea-rate_wrap .ea-rate_item.ea-rate_item--active > i {
-  color: var(--i-color);
-  font-size: 1.1rem;
-}
-.ea-rate_wrap .ea-rate_item.ea-rate_item--disabled {
-  pointer-events: none;
-  cursor: default;
-}
-.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;
-}
-`;
-
-const rateDom = (index) => {
-    const dom = document.createElement('span');
-    dom.className = 'ea-rate_item';
-    dom.setAttribute('data-index', index);
-
-    const icon = document.createElement('i');
-    icon.className = 'icon-star-empty';
-
-    dom.appendChild(icon);
-
-    return dom;
-}
-
-
-export class EaRate extends Base {
-    #mounted = false;
-    #wrap;
-    #appendSlot;
-    #textList = ["极差", "失望", "一般", "满意", "惊喜"];
-
-    static get observedAttributes() {
-        return ['value'];
-    }
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-rate_wrap';
-
-        for (let i = 0; i < 5; i++) {
-            const dom = rateDom(i);
-
-            wrap.appendChild(dom);
-        }
-
-        const text = document.createElement('span');
-        text.className = 'ea-rate_text';
-        wrap.appendChild(text);
-
-        this.#wrap = wrap;
-        this.#appendSlot = text;
-
-        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // 设置/显示选中状态
-    setCheckedStatus(index) {
-        const item = this.#wrap.querySelectorAll('.ea-rate_item');
-
-        for (let i = 0; i < index; i++) {
-            item[i].classList.add('ea-rate_item--active');
-            item[i].querySelector('i').className = this.activeIconClass;
-
-            if (this.showText) {
-                this.#appendSlot.innerText = this.showTextList[index - 1];
-            }
-        }
-    }
-
-    // 当未选中时, 清除选中状态
-    clearCheckedStatus() {
-        this.#wrap.querySelectorAll('.ea-rate_item').forEach(item => {
-            item.classList.remove('ea-rate_item--active');
-            item.querySelector('i').className = this.voidIconClass;
-
-            if (this.showText) {
-                const text = this.#wrap.querySelector('.ea-rate_text');
-                text.innerText = "";
-            }
-        })
-    }
-
-    // ------- value 当前选中值 -------
-    // #region
-    get value() {
-        const value = this.getAttrNumber('value') || 0;
-
-        if (value < 1 || value > 5 || !value) return 0;
-        else return Number(value);
-    }
-
-    set value(val) {
-        val = Number(val);
-
-        this.setAttribute('value', val);
-
-        this.clearCheckedStatus();
-
-        this.setCheckedStatus(val);
-    }
-
-    // #endregion
-    // ------- end -------
-
-    // ------- color 颜色 -------
-    // #region
-    get color() {
-        return this.getAttribute('color') || 'rgb(247, 186, 42)';
-    }
-
-    set color(val) {
-        this.setAttribute('color', val);
-        this.#wrap.querySelectorAll('.ea-rate_item').forEach(item => {
-            item.querySelector('i').style.setProperty('--i-color', val);
-        })
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- show-text 显示文本 -------
-    // #region
-
-    get showText() {
-        return this.getAttrBoolean('show-text');
-    }
-
-    set showText(val) {
-        this.toggleAttr('show-text', val);
-    }
-
-    get showTextList() {
-        return this.#textList;
-    }
-
-    set showTextList(val) {
-        if (typeof val === "object" && val.length === 5) this.#textList = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- void-icon-class 自定空图标样式类 -------
-    // #region
-    get voidIconClass() {
-        return this.getAttribute('void-icon-class') || 'icon-star-empty';
-    }
-
-    set voidIconClass(val) {
-        this.setAttribute('void-icon-class', val);
-        this.#wrap.querySelectorAll('.ea-rate_item').forEach(item => {
-            item.querySelector('i').className = val;
-        })
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- active-icon-class 自定图标样式类 -------
-    // #region
-    get activeIconClass() {
-        return this.getAttribute('active-icon-class') || 'icon-star';
-    }
-
-    set activeIconClass(val) {
-        this.setAttribute('active-icon-class', val);
-        this.#wrap.querySelectorAll('.ea-rate_item').forEach(item => {
-            item.querySelector('i').className = val;
-        })
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled');
-    }
-
-    set disabled(val) {
-        this.toggleAttr('disabled', val);
-
-        this.#wrap.querySelectorAll('.ea-rate_item').forEach(item => {
-            item.classList.toggle('ea-rate_item--disabled', val);
-        })
-    }
-    // #endregion
-    // ------- end -------
-
-    // 初始化鼠标事件
-    initRateEvent() {
-        const that = this;
-
-        this.#wrap.querySelectorAll('.ea-rate_item').forEach(dom => {
-
-            // 鼠标移入: 显示选中状态
-            dom.addEventListener('mouseenter', function (e) {
-                const index = Number(this.getAttribute('data-index'));
-
-                that.clearCheckedStatus();
-                that.setCheckedStatus(index + 1);
-
-                that.dispatchEvent(new CustomEvent("hover", {
-                    detail: {
-                        value: index + 1,
-                        rateText: that.#textList[index]
-                    }
-                }));
-            })
-
-            // 鼠标移出: 清除选中状态
-            dom.addEventListener('mouseleave', function (e) {
-                that.clearCheckedStatus();
-
-                that.setCheckedStatus(that.value);
-            })
-
-            // 点击: 设置选中状态
-            dom.addEventListener('click', function (e) {
-                const index = Number(this.getAttribute('data-index'));
-
-                that.value = index + 1;
-                that.dispatchEvent(new CustomEvent("change", {
-                    detail: {
-                        value: index + 1,
-                        rateText: that.#textList[index]
-                    }
-                }))
-            })
-        })
-    }
-
-    init() {
-        const that = this;
-
-        // icon-class 自定图标样式类初始化
-        this.activeIconClass = this.activeIconClass;
-
-        // void-icon-class 自定空图标样式类初始化
-        this.voidIconClass = this.voidIconClass;
-
-        // show-text 显示文本初始化
-        this.showText = this.showText;
-
-        // color 颜色初始化
-        this.color = this.color;
-
-        // value 星级初始化
-        this.value = this.value;
-
-        // disabled 禁用初始化
-        this.disabled = this.disabled;
-
-        // 初始化鼠标事件
-        if (!this.disabled) this.initRateEvent();
-    }
-
-    connectedCallback() {
-        this.init();
-
-        this.#mounted = true;
-    }
-
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (!this.#mounted) return;
-
-        if (name == "value") {
-
-            this.clearCheckedStatus();
-
-            this.setCheckedStatus(newVal);
-        }
-    }
-}
-
-if (!customElements.get('ea-rate')) {
-    customElements.define('ea-rate', EaRate);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{initRateTempalte}from"./src/components/rateComm.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaRate extends Base{#t;#e;#s;#i;#a;#o=["极差","失望","一般","满意","惊喜"];constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-rate_wrap" part="container">\n                <section class="ea-rate_item-wrap" part="item-wrap">\n                </section>\n                <span class="ea-rate_text" part="text-wrap"></span>\n            </div>\n        ',this.#t=t.querySelector(".ea-rate_wrap"),this.#e=t.querySelector(".ea-rate_item-wrap"),this.#s=t.querySelector(".ea-rate_text"),initRateTempalte(this.#e),this.#i=t.querySelectorAll(".ea-rate_item"),this.#a=t.querySelectorAll("ea-icon"),this.build(t,stylesheet)}get value(){const t=this.getAttrNumber("value")||0;return t<1||t>5||!t?0:t}set value(t){t&&!isNaN(Number(t))&&(this.setAttribute("value",t),this.#r(),this.#n(t))}get color(){return this.getAttribute("color")}set color(t){t&&(this.setAttribute("color",t),this.#e.style.setProperty("--i-color",t))}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.toggleAttr("disabled",t),this.#i.forEach((e=>{e.classList.toggle("disabled",t)})),this.#t.style.cursor=t?"not-allowed":"pointer"}get showText(){return this.getAttrBoolean("show-text")}set showText(t){this.toggleAttr("show-text",t)}get showTextList(){return this.#o}set showTextList(t){"object"==typeof t&&5===t.length&&(this.#o=t)}get voidIcon(){return this.getAttribute("void-icon")||"icon-star-empty"}set voidIcon(t){this.setAttribute("void-icon",t),this.#c(t)}get activeIcon(){return this.getAttribute("active-icon")||"icon-star"}set activeIcon(t){this.setAttribute("active-icon",t),this.#c(t)}#c(t){this.#a.forEach((e=>{e.icon=t}))}#n(t){for(let e=0;e<t;e++)this.#i[e].classList.add("active"),this.#a[e].icon=this.activeIcon,this.showText&&(this.#s.innerText=this.showTextList[t-1])}#r(){this.#i.forEach(((t,e)=>{t.classList.remove("active"),this.#a[e].icon=this.voidIcon,this.showText&&(this.#s.innerText="")}))}#h(){this.#i.forEach((t=>{const{index:e}=t;t.addEventListener("mouseenter",(()=>{this.#r(),this.#n(e+1),this.dispatchEvent(new CustomEvent("hover",{detail:{value:e+1,rateText:this.#o[e]}}))})),t.addEventListener("mouseleave",(()=>{this.#r(),this.#n(this.value)})),t.addEventListener("click",(()=>{this.value=e+1,this.dispatchEvent(new CustomEvent("change",{detail:{value:e+1,rateText:this.#o[e]}}))}))}))}connectedCallback(){this.activeIconClass=this.activeIconClass,this.voidIconClass=this.voidIconClass,this.showText=this.showText,this.color=this.color,this.value=this.value,this.disabled=this.disabled,this.disabled||this.#h()}}customElements.get("ea-rate")||customElements.define("ea-rate",EaRate);

package/components/ea-rate/src/components/rateComm.js

@@ -0,0 +1 @@
+import{createElement}from"../../../../utils/createElement.js";const rateComm=e=>{const t=createElement("span","ea-rate_item");t.index=e,t.part="rate-item";const a=createElement("ea-icon");return a.icon="icon-star-empty",t.appendChild(a),t};export const initRateTempalte=e=>{for(let t=0;t<5;t++)e.appendChild(rateComm(t))};

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

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

package/components/ea-result/index.js

@@ -1,167 +1 @@
-// @ts-nocheck
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-import { handleTemplate } from '../../utils/handleTemplate.js';
-import Base from '../Base.js';
-import "../ea-icon/index.js"
-
-const stylesheet = `
-.ea-result_wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 40px 30px;
-}
-.ea-result_wrap .ea-result_icon {
-  font-size: 3rem;
-}
-.ea-result_wrap .ea-result_icon i[class=icon-ok-circled] {
-  color: #67c23a;
-}
-.ea-result_wrap .ea-result_icon i[class=icon-cancel-circled] {
-  color: #f56c6c;
-}
-.ea-result_wrap .ea-result_icon i[class=icon-attention-alt] {
-  color: #e6a23c;
-}
-.ea-result_wrap .ea-result_icon i[class=icon-info] {
-  color: #909399;
-}
-.ea-result_wrap .ea-result_title,
-.ea-result_wrap .ea-result_subtitle {
-  color: #5e6d82;
-  font-size: 14px;
-}
-.ea-result_wrap .ea-result_title {
-  margin-top: 20px;
-}
-.ea-result_wrap .ea-result_subtitle {
-  margin-top: 10px;
-}
-.ea-result_wrap .ea-result_extra {
-  margin-top: 30px;
-}
-`;
-
-export class EaResult extends Base {
-  #wrap;
-
-  #resultIcon;
-  #resultTitle;
-  #resultSubtitle;
-  #resultExtraWrap;
-
-  #resultIconSlot;
-  #resultTitleSlot;
-  #resultSubtitleSlot;
-  #resultExtraSlot;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    const wrap = document.createElement('div');
-    wrap.className = 'ea-result_wrap';
-
-    const iconWrap = createElement('div', 'ea-result_icon');
-    wrap.appendChild(iconWrap);
-
-    const resultTitle = createElement('div', 'ea-result_title');
-    wrap.appendChild(resultTitle);
-
-    const resultSubtitle = createElement('div', 'ea-result_subtitle');
-    wrap.appendChild(resultSubtitle);
-
-    const resultExtraWrap = createElement('div', 'ea-result_extra');
-    wrap.appendChild(resultExtraWrap);
-
-    const resultIconSlot = createSlotElement('icon');
-    const resultTitleSlot = createSlotElement('title');
-    const resultSubtitleSlot = createSlotElement('subTitle');
-    const resultExtraSlot = createSlotElement('extra');
-
-    this.#wrap = wrap;
-    this.#resultIcon = iconWrap;
-    this.#resultTitle = resultTitle;
-    this.#resultSubtitle = resultSubtitle;
-    this.#resultExtraWrap = resultExtraWrap;
-
-    this.#resultIconSlot = resultIconSlot;
-    this.#resultTitleSlot = resultTitleSlot;
-    this.#resultSubtitleSlot = resultSubtitleSlot;
-    this.#resultExtraSlot = resultExtraSlot;
-
-    this.build(shadowRoot, stylesheet);
-    this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-    this.shadowRoot.appendChild(wrap);
-
-    shadowRoot.appendChild(resultIconSlot);
-    shadowRoot.appendChild(resultTitleSlot);
-    shadowRoot.appendChild(resultSubtitleSlot);
-    shadowRoot.appendChild(resultExtraSlot);
-  }
-
-  // ------- icon 设置自定义icon -------
-  // #region
-  get icon() {
-    return this.getAttribute('icon') || '';
-  }
-
-  set icon(value) {
-    this.setAttribute('icon', value);
-
-    this.#resultIcon.innerHTML = `<i class="${value}"></i>`;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- title 设置标题 -------
-  // #region
-  get title() {
-    return this.getAttribute('title') || '';
-  }
-
-  set title(value) {
-    this.setAttribute('title', value);
-
-    this.#resultTitle.innerText = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- sub-title 设置副标题 -------
-  // #region
-  get subtitle() {
-    return this.getAttribute('sub-title') || '';
-  }
-
-  set subtitle(value) {
-    this.setAttribute('sub-title', value);
-
-    this.#resultSubtitle.innerText = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  init() {
-    const that = this;
-
-    this.icon = this.icon;
-    this.title = this.title;
-    this.subtitle = this.subtitle;
-
-    handleTemplate(this, "icon", this.#resultIcon, this.#resultIconSlot);
-    handleTemplate(this, "title", this.#resultTitle, this.#resultTitleSlot);
-    handleTemplate(this, "subTitle", this.#resultSubtitle, this.#resultSubtitleSlot);
-    handleTemplate(this, "extra", this.#resultExtraWrap, this.#resultExtraSlot);
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-}
-
-if (!customElements.get('ea-result')) {
-  customElements.define('ea-result', EaResult);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaResult extends Base{#t;#e;#s;#l;#i;#r;#u;#n;#o;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n      <div class="ea-result_wrap" part="container">\n        <div class="ea-result_icon" part="icon-wrap">\n          <slot name="icon"></slot>\n        </div>\n        <div class="ea-result_title" part="title-wrap">\n          <slot name="title"></slot>\n        </div>\n        <div class="ea-result_subtitle" part="subTitle-wrap">\n          <slot name="subTitle"></slot>\n        </div>\n        <div class="ea-result_extra" part="extra-wrap">\n          <slot name="extra"></slot>\n        </div>\n      </div>\n    ',this.#t=t.querySelector(".ea-result_wrap"),this.#e=t.querySelector(".ea-result_icon"),this.#s=t.querySelector(".ea-result_title"),this.#l=t.querySelector(".ea-result_subtitle"),this.#i=t.querySelector(".ea-result_extra"),this.#r=t.querySelector('slot[name="icon"]'),this.#u=t.querySelector('slot[name="title"]'),this.#n=t.querySelector('slot[name="subTitle"]'),this.#o=t.querySelector('slot[name="extra"]'),this.build(t,stylesheet)}get icon(){return this.getAttribute("icon")||""}set icon(t){t&&(this.setAttribute("icon",t),this.#e.innerHTML=`<ea-icon icon="${t}"></ea-icon>`)}get title(){return this.getAttribute("title")||""}set title(t){t&&(this.setAttribute("title",t),this.#s.innerText=t)}get subtitle(){return this.getAttribute("sub-title")||""}set subtitle(t){t&&(this.setAttribute("sub-title",t),this.#l.innerText=t)}connectedCallback(){this.icon=this.icon,this.title=this.title,this.subtitle=this.subtitle}}customElements.get("ea-result")||customElements.define("ea-result",EaResult);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-result_wrap {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 40px 30px;\n}\n.ea-result_wrap .ea-result_icon {\n  font-size: 3rem;\n}\n.ea-result_wrap .ea-result_icon ea-icon[icon=icon-ok-circled] {\n  color: #67c23a;\n}\n.ea-result_wrap .ea-result_icon ea-icon[icon=icon-cancel-circled] {\n  color: #f56c6c;\n}\n.ea-result_wrap .ea-result_icon ea-icon[icon=icon-attention-alt] {\n  color: #e6a23c;\n}\n.ea-result_wrap .ea-result_icon ea-icon[icon=icon-info] {\n  color: #909399;\n}\n.ea-result_wrap .ea-result_title,\n.ea-result_wrap .ea-result_subtitle {\n  color: #5e6d82;\n  font-size: 14px;\n}\n.ea-result_wrap .ea-result_title {\n  margin-top: 20px;\n}\n.ea-result_wrap .ea-result_subtitle {\n  margin-top: 10px;\n}\n.ea-result_wrap .ea-result_extra {\n  margin-top: 30px;\n}\n";

package/components/ea-select/index.js

@@ -1,34 +1 @@
-import Base from '../Base';
-
-const stylesheet = `
-@import url('/ea_ui_component/icon/index.css');
-`;
-
-export class EaSelect extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        this.shadowRoot = shadowRoot;
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-select_wrap';
-
-        this.#wrap = wrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    init() {
-        const that = this;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!window.customElements.get("ea-select")) {
-    window.customElements.define("ea-select", EaSelect);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-option/index.js";import"../ea-option-gropu/index.js";import"../ea-input/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{timeout,withTransitionTimeOut}from"../../utils/timeout.js";export class EaSelect extends Base{#e;#t;#i;#s;#n;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-select_wrap" part="container">\n                <div class="ea-select_input-wrap" part="input-wrap">\n                    <ea-input type="text" part="input" readonly autocomplete="off"></ea-input>\n                    <span class="ea-select_dropdown-icon" part="dropdown-icon-wrap">\n                        <ea-icon part="icon" icon="icon-angle-down" color="#c0c4cc"></ea-icon>\n                    </span>\n                </div>\n                <div class="ea-select_dropdown-wrap" part="dropdown-wrap">\n                    <slot></slot>\n                    <slot name="empty" class="ea-select_dropdown-empty" style="display: none;">\n                        <p>暂无数据</p>\n                    </slot>\n                </div>\n            </div>\n        ',this.#e=this.shadowRoot.querySelector(".ea-select_wrap"),this.#t=this.shadowRoot.querySelector("ea-input"),this.#i=this.shadowRoot.querySelector(".ea-select_dropdown-icon"),this.#s=this.shadowRoot.querySelector(".ea-select_dropdown-wrap"),this.#n=this.shadowRoot.querySelector(".ea-select_dropdown-empty"),this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"select"}set name(e){this.setAttribute("name",e)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e}get value(){const e=this.selection;return this.multiple?e.split(",")||[]:this.selection}set value(e){this.setAttribute("value",e),this.multiple?this.selection=e.join(","):this.selection=e}get selection(){return this.getAttribute("selection")||""}set selection(e){this.setAttribute("selection",e),this.#t.value=e}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),this.#t.placeholder=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.toggleAttr("disabled",e),this.#t.disabled=e}get clearable(){return this.getAttrBoolean("clearable")||!1}set clearable(e){if(this.setAttribute("clearable",e),e){const e=this.#i.querySelector("ea-icon");this.#i.addEventListener("mouseenter",(t=>{e.icon="icon-cancel-circled2"})),this.#i.addEventListener("mouseleave",(t=>{e.icon="icon-angle-down"})),this.#i.addEventListener("click",(e=>{this.dispatchEvent(new CustomEvent("clear",{detail:{originValue:this.selection}})),this.querySelectorAll("ea-option").forEach((e=>{e.checked=!1})),this.selection=""}))}}get filterable(){return this.getAttrBoolean("filterable")||!1}set filterable(e){this.setAttribute("filterable",e),this.#t.readonly=!1===e,e&&this.#t.addEventListener("change",(e=>{const t=this.querySelectorAll("ea-option"),{value:i}=e.detail;t.forEach((e=>{e.style.display=e.value.includes(i)?"block":"none"}));let s=Array.from(t).every((e=>"block"!==e.style.display));this.#n.style.display=s?"block":"none"}))}get multiple(){return this.getAttrBoolean("multiple")||!1}set multiple(e){this.setAttribute("multiple",e)}get isInvalid(){return this.getAttrBoolean("is-invalid")||!1}set isInvalid(e){this.setAttribute("is-invalid",e),this.#t.isInvalid=e}#l(){const e=this.querySelectorAll("ea-option");e.forEach((t=>{t.disabled||t.addEventListener("click",(i=>{if(this.multiple)if(t.checked=!t.checked,t.checked)this.selection=this.selection?this.selection+","+t.value:t.value;else{const e=this.selection.split(",");e.splice(e.indexOf(t.value),1),this.selection=e.join(",")}else this.#t.value=t.value,this.selection=t.value,e.forEach((e=>{e.checked=!1})),t.checked=!0;this.dispatchEvent(new CustomEvent("change",{detail:{value:this.selection}}))}))}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.#s.style.width=this.width,this.name=this.name,this.width=this.width,this.selection=this.selection,this.placeholder=this.placeholder,this.disabled=this.disabled,this.clearable=this.clearable,this.filterable=this.filterable,this.multiple=this.multiple,this.#l(),this.#t.addEventListener("focus",(e=>{this.#e.classList.add("is-open"),this.dispatchEvent(new CustomEvent("visible-change",{detail:{visible:!0}}))})),this.#t.addEventListener("blur",(e=>{timeout((()=>{this.#e.classList.remove("is-open")}),100),this.dispatchEvent(new CustomEvent("visible-change",{detail:{visible:!1}}))})),withTransitionTimeOut(this.#e)}}customElements.get("ea-select")||customElements.define("ea-select",EaSelect);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-select_wrap {\n  position: relative;\n}\n.ea-select_wrap .ea-select_input-wrap .ea-select_dropdown-icon {\n  position: absolute;\n  left: calc(100% - 24px);\n  top: 50%;\n  transform-origin: center;\n  transform: translateY(-50%);\n}\n.ea-select_wrap .ea-select_input-wrap .ea-select_dropdown-icon.is-open {\n  transform: translateY(-50%) rotate(180deg);\n}\n.ea-select_wrap .ea-select_dropdown-wrap {\n  position: absolute;\n  left: 0;\n  bottom: -12px;\n  transform: translateY(100%) scaleY(0);\n  transform-origin: center top;\n  box-sizing: border-box;\n  background-color: #fff;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 2035;\n}\n.ea-select_wrap .ea-select_dropdown-wrap .ea-select_dropdown-empty {\n  padding: 10px 0;\n  margin: 0;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n}\n.ea-select_wrap.is-open .ea-select_input-wrap .ea-select_dropdown-icon {\n  transform: translateY(-50%) rotate(180deg);\n}\n.ea-select_wrap.is-open .ea-select_dropdown-wrap {\n  transform: translateY(100%) scaleY(1);\n}\n.ea-select_wrap.is-disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.ea-select_wrap.with-transition .ea-select_input-wrap .ea-select_dropdown-icon {\n  transition: transform 0.3s;\n}\n.ea-select_wrap.with-transition .ea-select_dropdown-wrap {\n  transition: transform 0.3s;\n}\n";