easy-component-ui 2.1.1 → 3.0.0

package/components/ea-rate/index.js

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

@@ -1,55 +0,0 @@
-@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,20 +0,0 @@
-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,45 +0,0 @@
-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

@@ -1,37 +0,0 @@
-.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,109 +0,0 @@
-// @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

@@ -1,46 +0,0 @@
-@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,39 +0,0 @@
-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

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