easy-component-ui 2.0.5 → 2.1.0

package/components/ea-rate/index.js

@@ -1 +1,243 @@
-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);
+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 {
+    #wrap;
+    #itemWrap;
+    #textContent;
+
+    #iconItems;
+    #icons;
+
+    #textList = ["极差", "失望", "一般", "满意", "惊喜"];
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-rate_wrap" part="container">
+                <section class="ea-rate_item-wrap" part="item-wrap">
+                </section>
+                <span class="ea-rate_text" part="text-wrap"></span>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-rate_wrap');
+        this.#itemWrap = shadowRoot.querySelector('.ea-rate_item-wrap');
+        this.#textContent = shadowRoot.querySelector('.ea-rate_text');
+
+        initRateTempalte(this.#itemWrap);
+
+        this.#iconItems = shadowRoot.querySelectorAll('.ea-rate_item');
+        this.#icons = shadowRoot.querySelectorAll('ea-icon');
+
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- value rate值 -------
+    // #region
+    get value() {
+        const value = this.getAttrNumber('value') || 0;
+
+        if (value < 1 || value > 5 || !value) return 0;
+
+        return value
+    }
+
+    set value(val) {
+        if (!val || isNaN(Number(val))) return;
+
+        this.setAttribute('value', val);
+
+        this.#clearCheckedStatus();
+
+        this.#setCheckedStatus(val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- color 图标颜色 -------
+    // #region
+    get color() {
+        return this.getAttribute('color');
+    }
+
+    set color(val) {
+        if (!val) return;
+
+        this.setAttribute('color', val);
+        this.#itemWrap.style.setProperty('--i-color', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled');
+    }
+
+    set disabled(val) {
+        this.toggleAttr('disabled', val);
+
+        this.#iconItems.forEach(item => {
+            item.classList.toggle('disabled', val);
+        })
+
+        this.#wrap.style.cursor = val ? 'not-allowed' : 'pointer';
+    }
+    // #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 未选中时展示的图标 -------
+    // #region
+    get voidIcon() {
+        return this.getAttribute('void-icon') || 'icon-star-empty';
+    }
+
+    set voidIcon(val) {
+        this.setAttribute('void-icon', val);
+
+        this.#handleIcon(val);
+
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- active-icon 选中时展示的图标 -------
+    // #region
+    get activeIcon() {
+        return this.getAttribute('active-icon') || 'icon-star';
+    }
+
+    set activeIcon(val) {
+        this.setAttribute('active-icon', val);
+
+        this.#handleIcon(val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // 处理图标
+    #handleIcon(val) {
+        this.#icons.forEach(icon => {
+            icon.icon = val;
+        })
+    }
+
+    // 设置/显示选中状态
+    #setCheckedStatus(index) {
+        for (let i = 0; i < index; i++) {
+            this.#iconItems[i].classList.add('active');
+            this.#icons[i].icon = this.activeIcon;
+
+            if (this.showText) {
+                this.#textContent.innerText = this.showTextList[index - 1];
+            }
+        }
+    }
+
+    // 当未选中时, 清除选中状态
+    #clearCheckedStatus() {
+        this.#iconItems.forEach((item, index) => {
+            item.classList.remove('active');
+            this.#icons[index].icon = this.voidIcon;
+
+            if (this.showText) {
+                this.#textContent.innerText = "";
+            }
+        })
+    }
+
+    // 初始化鼠标事件
+    #initRateEvent() {
+        this.#iconItems.forEach(dom => {
+            const { index } = dom;
+
+            // 鼠标移入: 显示选中状态
+            dom.addEventListener('mouseenter', () => {
+
+                this.#clearCheckedStatus();
+                this.#setCheckedStatus(index + 1);
+
+                this.dispatchEvent(new CustomEvent("hover", {
+                    detail: {
+                        value: index + 1,
+                        rateText: this.#textList[index]
+                    }
+                }));
+            })
+
+            // 鼠标移出: 清除选中状态
+            dom.addEventListener('mouseleave', () => {
+                this.#clearCheckedStatus();
+
+                this.#setCheckedStatus(this.value);
+            })
+
+            // 点击: 设置选中状态
+            dom.addEventListener('click', () => {
+                this.value = index + 1;
+                this.dispatchEvent(new CustomEvent("change", {
+                    detail: {
+                        value: index + 1,
+                        rateText: this.#textList[index]
+                    }
+                }))
+            })
+        })
+    }
+
+    connectedCallback() {
+        // 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();
+    }
+}
+
+if (!customElements.get('ea-rate')) {
+    customElements.define('ea-rate', EaRate);
+}

package/components/ea-rate/index.scss

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

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

@@ -1 +1,20 @@
-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))};
+import { createElement } from "../../../../utils/createElement.js";
+
+const rateComm = (i) => {
+    const dom = createElement('span', 'ea-rate_item');
+    dom.index = i;
+    dom.part = 'rate-item';
+
+    const icon = createElement('ea-icon');
+    icon.icon = 'icon-star-empty';
+    dom.appendChild(icon);
+
+    return dom;
+}
+
+
+export const initRateTempalte = (container) => {
+    for (let i = 0; i < 5; i++) {
+        container.appendChild(rateComm(i));
+    }
+}

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

@@ -1 +1,45 @@
-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";
+export const stylesheet = `
+: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;
+}
+`;

package/components/ea-result/index.css

@@ -0,0 +1,37 @@
+.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 ea-icon[icon=icon-ok-circled] {
+  color: #67c23a;
+}
+.ea-result_wrap .ea-result_icon ea-icon[icon=icon-cancel-circled] {
+  color: #f56c6c;
+}
+.ea-result_wrap .ea-result_icon ea-icon[icon=icon-attention-alt] {
+  color: #e6a23c;
+}
+.ea-result_wrap .ea-result_icon ea-icon[icon=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;
+}

package/components/ea-result/index.js

@@ -1 +1,109 @@
-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);
+// @ts-nocheck
+import Base from '../Base.js';
+import "../ea-icon/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaResult extends Base {
+  #wrap;
+
+  #resultIcon;
+  #resultTitle;
+  #resultSubtitle;
+  #resultExtraWrap;
+
+  #resultIconSlot;
+  #resultTitleSlot;
+  #resultSubtitleSlot;
+  #resultExtraSlot;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div class="ea-result_wrap" part="container">
+        <div class="ea-result_icon" part="icon-wrap">
+          <slot name="icon"></slot>
+        </div>
+        <div class="ea-result_title" part="title-wrap">
+          <slot name="title"></slot>
+        </div>
+        <div class="ea-result_subtitle" part="subTitle-wrap">
+          <slot name="subTitle"></slot>
+        </div>
+        <div class="ea-result_extra" part="extra-wrap">
+          <slot name="extra"></slot>
+        </div>
+      </div>
+    `;
+
+    this.#wrap = shadowRoot.querySelector('.ea-result_wrap');
+    this.#resultIcon = shadowRoot.querySelector('.ea-result_icon');
+    this.#resultTitle = shadowRoot.querySelector('.ea-result_title');
+    this.#resultSubtitle = shadowRoot.querySelector('.ea-result_subtitle');
+    this.#resultExtraWrap = shadowRoot.querySelector('.ea-result_extra');
+
+    this.#resultIconSlot = shadowRoot.querySelector('slot[name="icon"]');
+    this.#resultTitleSlot = shadowRoot.querySelector('slot[name="title"]');
+    this.#resultSubtitleSlot = shadowRoot.querySelector('slot[name="subTitle"]');
+    this.#resultExtraSlot = shadowRoot.querySelector('slot[name="extra"]');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- icon 设置自定义icon -------
+  // #region
+  get icon() {
+    return this.getAttribute('icon') || '';
+  }
+
+  set icon(value) {
+    if (!value) return;
+    this.setAttribute('icon', value);
+
+    this.#resultIcon.innerHTML = `<ea-icon icon="${value}"></ea-icon>`;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- title 设置标题 -------
+  // #region
+  get title() {
+    return this.getAttribute('title') || '';
+  }
+
+  set title(value) {
+    if (!value) return;
+    this.setAttribute('title', value);
+
+    this.#resultTitle.innerText = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- sub-title 设置副标题 -------
+  // #region
+  get subtitle() {
+    return this.getAttribute('sub-title') || '';
+  }
+
+  set subtitle(value) {
+    if (!value) return;
+    this.setAttribute('sub-title', value);
+
+    this.#resultSubtitle.innerText = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  connectedCallback() {
+    this.icon = this.icon;
+    this.title = this.title;
+    this.subtitle = this.subtitle;
+  }
+}
+
+if (!customElements.get('ea-result')) {
+  customElements.define('ea-result', EaResult);
+}

package/components/ea-result/index.scss

@@ -0,0 +1,46 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-result_wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: 40px 30px;
+
+  .ea-result_icon {
+    font-size: 3rem;
+
+    ea-icon[icon="icon-ok-circled"] {
+      color: $color-success-bgc;
+    }
+    ea-icon[icon="icon-cancel-circled"] {
+      color: $color-danger-bgc;
+    }
+    ea-icon[icon="icon-attention-alt"] {
+      color: $color-warning-bgc;
+    }
+    ea-icon[icon="icon-info"] {
+      color: $color-info-bgc;
+    }
+  }
+
+  .ea-result_title,
+  .ea-result_subtitle {
+    color: #5e6d82;
+    font-size: 14px;
+  }
+
+  .ea-result_title {
+    margin-top: 20px;
+  }
+
+  .ea-result_subtitle {
+    margin-top: 10px;
+  }
+
+  .ea-result_extra {
+    margin-top: 30px;
+  }
+}

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

@@ -1 +1,39 @@
-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";
+export 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 ea-icon[icon=icon-ok-circled] {
+  color: #67c23a;
+}
+.ea-result_wrap .ea-result_icon ea-icon[icon=icon-cancel-circled] {
+  color: #f56c6c;
+}
+.ea-result_wrap .ea-result_icon ea-icon[icon=icon-attention-alt] {
+  color: #e6a23c;
+}
+.ea-result_wrap .ea-result_icon ea-icon[icon=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;
+}
+`;

package/components/ea-select/index.css

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