easy-component-ui 2.1.1 → 3.0.1

package/components/ea-select/index.js

@@ -1,312 +0,0 @@
-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 {
-    #container;
-    #selectInput;
-    #dropdownIcon;
-    #dropdownWrap;
-    #noResultWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class="ea-select_wrap" part="container">
-                <div class="ea-select_input-wrap" part="input-wrap">
-                    <ea-input type="text" part="input" readonly autocomplete="off"></ea-input>
-                    <span class="ea-select_dropdown-icon" part="dropdown-icon-wrap">
-                        <ea-icon part="icon" icon="icon-angle-down" color="#c0c4cc"></ea-icon>
-                    </span>
-                </div>
-                <div class="ea-select_dropdown-wrap" part="dropdown-wrap">
-                    <slot></slot>
-                    <slot name="empty" class="ea-select_dropdown-empty" style="display: none;">
-                        <p>暂无数据</p>
-                    </slot>
-                </div>
-            </div>
-        `;
-
-
-        this.#container = this.shadowRoot.querySelector('.ea-select_wrap');
-        this.#selectInput = this.shadowRoot.querySelector('ea-input');
-        this.#dropdownIcon = this.shadowRoot.querySelector('.ea-select_dropdown-icon');
-        this.#dropdownWrap = this.shadowRoot.querySelector('.ea-select_dropdown-wrap');
-        this.#noResultWrap = this.shadowRoot.querySelector('.ea-select_dropdown-empty');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- name 若与 form 组合使用，则 form 的返回值中. 该键名为该name -------
-    // #region
-    get name() {
-        return this.getAttribute('name') || 'select';
-    }
-
-    set name(val) {
-        this.setAttribute('name', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- width 输入框宽度 -------
-    // #region
-    get width() {
-        return this.getAttribute('width') || '200px';
-    }
-
-    set width(val) {
-        this.setAttribute('width', val);
-
-        this.#container.style.width = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- value 选项值 -------
-    // #region
-    get value() {
-        const value = this.selection;
-        if (this.multiple) return value.split(',') || [];
-        else return this.selection;
-    }
-
-    set value(val) {
-        this.setAttribute('value', val);
-
-        if (this.multiple) this.selection = val.join(',');
-        else this.selection = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- selection 选中项 -------
-    // #region
-    get selection() {
-        return this.getAttribute('selection') || '';
-    }
-
-    set selection(val) {
-        this.setAttribute('selection', val);
-
-        this.#selectInput.value = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- palceholder 提示 -------
-    // #region
-    get placeholder() {
-        return this.getAttribute('placeholder') || '';
-    }
-
-    set placeholder(val) {
-        this.setAttribute('placeholder', val);
-        this.#selectInput.placeholder = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled') || false;
-    }
-
-    set disabled(val) {
-        this.toggleAttr('disabled', val);
-
-        this.#selectInput.disabled = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- clearable 是否可清除 -------
-    // #region
-    get clearable() {
-        return this.getAttrBoolean('clearable') || false;
-    }
-
-    set clearable(val) {
-        this.setAttribute('clearable', val);
-
-        if (val) {
-            const icon = this.#dropdownIcon.querySelector('ea-icon');
-            this.#dropdownIcon.addEventListener('mouseenter', (e) => {
-                icon.icon = 'icon-cancel-circled2';
-            });
-
-            this.#dropdownIcon.addEventListener('mouseleave', (e) => {
-                icon.icon = 'icon-angle-down';
-            });
-
-            this.#dropdownIcon.addEventListener('click', (e) => {
-                this.dispatchEvent(new CustomEvent('clear', {
-                    detail: {
-                        originValue: this.selection
-                    }
-                }));
-
-                this.querySelectorAll('ea-option').forEach(option => {
-                    option.checked = false;
-                });
-                this.selection = '';
-            });
-
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- filterable 是否可搜索 -------
-    // #region
-    get filterable() {
-        return this.getAttrBoolean('filterable') || false;
-    }
-
-    set filterable(val) {
-        this.setAttribute('filterable', val);
-
-        this.#selectInput.readonly = val === false;
-
-        if (val) {
-            this.#selectInput.addEventListener('change', (e) => {
-                const options = this.querySelectorAll('ea-option');
-                const { value } = e.detail;
-
-                options.forEach(option => {
-                    option.style.display = option.value.includes(value) ? 'block' : 'none';
-                });
-                let isAllHidden = Array.from(options).every(option => {
-                    return option.style.display === 'block' ? false : true;
-                });
-
-                this.#noResultWrap.style.display = isAllHidden ? 'block' : 'none';
-            });
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- multiple 是否多选 -------
-    // #region
-    get multiple() {
-        return this.getAttrBoolean('multiple') || false;
-    }
-
-    set multiple(val) {
-        this.setAttribute('multiple', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- is-invalid 是否校验失败 -------
-    // #region
-    get isInvalid() {
-        return this.getAttrBoolean('is-invalid') || false;
-    }
-
-    set isInvalid(val) {
-        this.setAttribute('is-invalid', val);
-        this.#selectInput.isInvalid = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleOptionChecked() {
-        const options = this.querySelectorAll('ea-option');
-
-        options.forEach(option => {
-            if (!option.disabled) {
-                option.addEventListener('click', (e) => {
-                    if (this.multiple) {
-                        option.checked = !option.checked;
-
-                        if (!option.checked) {
-                            const choise = this.selection.split(',');
-                            choise.splice(choise.indexOf(option.value), 1);
-                            this.selection = choise.join(',');
-                        } else {
-                            this.selection = this.selection ? this.selection + ',' + option.value : option.value;
-                        }
-                    } else {
-                        this.#selectInput.value = option.value;
-                        this.selection = option.value;
-
-                        options.forEach(item => {
-                            item.checked = false;
-                        });
-                        option.checked = true;
-                    }
-
-                    this.dispatchEvent(new CustomEvent('change', {
-                        detail: {
-                            value: this.selection
-                        }
-                    }));
-                });
-            }
-        });
-    }
-
-    connectedCallback() {
-        this.setAttribute('data-ea-component', true);
-        this.#dropdownWrap.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.#handleOptionChecked();
-
-        this.#selectInput.addEventListener('focus', (e) => {
-            this.#container.classList.add('is-open');
-
-            this.dispatchEvent(new CustomEvent('visible-change', {
-                detail: {
-                    visible: true,
-                }
-            }));
-        });
-
-        this.#selectInput.addEventListener('blur', (e) => {
-            timeout(() => {
-                this.#container.classList.remove('is-open');
-            }, 100);
-
-            this.dispatchEvent(new CustomEvent('visible-change', {
-                detail: {
-                    visible: false,
-                }
-            }));
-        });
-
-        withTransitionTimeOut(this.#container);
-    }
-}
-
-if (!customElements.get('ea-select')) {
-    customElements.define('ea-select', EaSelect);
-}

package/components/ea-select/index.scss

@@ -1,70 +0,0 @@
-.ea-select_wrap {
-  position: relative;
-
-  .ea-select_input-wrap {
-    .ea-select_dropdown-icon {
-      position: absolute;
-
-      left: calc(100% - 24px);
-      top: 50%;
-
-      transform-origin: center;
-      transform: translateY(-50%);
-
-      &.is-open {
-        transform: translateY(-50%) rotate(180deg);
-      }
-    }
-  }
-
-  .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_dropdown-empty {
-      padding: 10px 0;
-      margin: 0;
-      text-align: center;
-      color: #999;
-      font-size: 14px;
-    }
-  }
-
-  &.is-open {
-    .ea-select_input-wrap {
-      .ea-select_dropdown-icon {
-        transform: translateY(-50%) rotate(180deg);
-      }
-    }
-
-    .ea-select_dropdown-wrap {
-      transform: translateY(100%) scaleY(1);
-    }
-  }
-
-  &.is-disabled {
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &.with-transition {
-    .ea-select_input-wrap {
-      .ea-select_dropdown-icon {
-        transition: transform 0.3s;
-      }
-    }
-
-    .ea-select_dropdown-wrap {
-      transition: transform 0.3s;
-    }
-  }
-}

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

@@ -1,49 +0,0 @@
-export const stylesheet = `
-.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;
-}
-`;

package/components/ea-skeleton/index.css

@@ -1,12 +0,0 @@
-.ea-skeleton_wrap {
-  width: 100%;
-  position: relative;
-  border-radius: 4px;
-}
-.ea-skeleton_wrap ea-skeleton-item[variant=p]:first-child {
-  --p-width: 33%;
-  --margin-top: 0;
-}
-.ea-skeleton_wrap ea-skeleton-item[variant=p]:last-child {
-  --p-width: 61%;
-}

package/components/ea-skeleton/index.js

@@ -1,148 +0,0 @@
-import Base from '../Base.js';
-
-import "../ea-skeleton-item/index.js"
-
-import { handleDefaultAttrIsTrue } from '../../utils/handleDefaultAttrIsTrue.js';
-import { createSkeletonElement } from './src/utils/createSkeletonElement.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaSkeleton extends Base {
-    #wrap;
-
-    #customizationSlot;
-    #defaultSlot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-skeleton_wrap" part="container">
-                <slot></slot>
-                <slot name="template"></slot>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-skeleton_wrap');
-        this.#defaultSlot = shadowRoot.querySelector('slot');
-        this.#customizationSlot = shadowRoot.querySelector('slot[name="template"]');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- row 骨架屏的渲染行数 -------
-    // #region
-    get row() {
-        return this.getAttrNumber('row') || 4;
-    }
-
-    set row(value) {
-        this.setAttribute('row', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- animated 骨架屏的动画效果 -------
-    // #region
-    get animated() {
-        return this.getAttrBoolean('animated');
-    }
-
-    set animated(value) {
-        if (!value) return;
-
-        this.setAttribute('animated', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- count 元素重复数 -------
-    // #region
-    get count() {
-        return this.getAttrNumber('count') || 1;
-    }
-
-    set count(value) {
-        this.setAttribute('count', value);
-
-        // this.#wrap.innerHTML = '';
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- loading 是否显示骨架屏 -------
-    // #region
-    get loading() {
-        const attr = this.getAttribute('loading');
-        return handleDefaultAttrIsTrue(attr);
-    }
-
-    set loading(value) {
-        this.setAttribute('loading', value);
-
-        this.#customizationSlot.style.display = value ? 'block' : 'none';
-        this.#defaultSlot.style.display = value ? 'none' : 'block';
-    }
-    // #endregion
-    // ------- end -------
-
-    // 默认骨架屏的初始化
-    #initDefaultSkeleton(row) {
-        row = Number(row) || 4;
-
-        const defaultSlotNodeLen = this.#defaultSlot.assignedNodes();
-        const customizationSlotLen = this.#customizationSlot.assignedNodes();
-
-
-        if (this.children.length > 0) return;
-        else this.#wrap.innerHTML = '';
-
-        for (let i = 0; i < row; i++) {
-            const paragraphSkeleton = createSkeletonElement('p', this.animated);
-            this.#wrap.appendChild(paragraphSkeleton);
-        }
-    }
-
-    // 渲染带动画的骨架屏
-    #handleSkeletonItemAniamted(isAnimated) {
-        if (!isAnimated) return;
-
-        const items = this.querySelectorAll('ea-skeleton-item');
-        items.forEach(item => {
-            item.animated = true;
-        })
-    }
-
-    // 渲染骨架屏的渲染个数
-    #handleSkeletonItemCount(count) {
-        if (this.children.length === 0 || count < 1) return;
-
-        const item = this.querySelector('[slot="template"]');
-        let template = ``;
-
-        for (let i = 0; i < count; i++) {
-            template += item.innerHTML;
-        }
-
-        item.innerHTML = template;
-    }
-
-    connectedCallback() {
-        this.animated = this.animated;
-
-        this.loading = this.loading;
-
-        this.count = this.count;
-
-        this.row = this.row;
-
-        this.#initDefaultSkeleton(this.row);
-        this.#handleSkeletonItemCount(this.count);
-        this.#handleSkeletonItemAniamted(this.animated);
-    }
-}
-
-if (!customElements.get('ea-skeleton')) {
-    customElements.define('ea-skeleton', EaSkeleton);
-}

package/components/ea-skeleton/index.scss

@@ -1,16 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-.ea-skeleton_wrap {
-  width: 100%;
-  position: relative;
-  border-radius: 4px;
-
-  ea-skeleton-item[variant="p"]:first-child {
-    --p-width: 33%;
-    --margin-top: 0;
-  }
-
-  ea-skeleton-item[variant="p"]:last-child {
-    --p-width: 61%;
-  }
-}

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

@@ -1,14 +0,0 @@
-export const stylesheet = `
-.ea-skeleton_wrap {
-  width: 100%;
-  position: relative;
-  border-radius: 4px;
-}
-.ea-skeleton_wrap ea-skeleton-item[variant=p]:first-child {
-  --p-width: 33%;
-  --margin-top: 0;
-}
-.ea-skeleton_wrap ea-skeleton-item[variant=p]:last-child {
-  --p-width: 61%;
-}
-`;

package/components/ea-skeleton/src/utils/createSkeletonElement.js

@@ -1,7 +0,0 @@
-export const createSkeletonElement = (className, isAnimated) => {
-    const el = document.createElement('ea-skeleton-item');
-    el.variant = className;
-    el.animated = isAnimated;
-
-    return el;
-};

package/components/ea-skeleton-item/index.css

@@ -1,69 +0,0 @@
-:host {
-  --p-width: 100%;
-  --margin-top: 1rem;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 100% 50%;
-  }
-}
-.ea-skeleton-item_wrap {
-  position: relative;
-  background-color: #f2f2f2;
-  border-radius: 4px;
-}
-.ea-skeleton-item_wrap.animated {
-  background-image: linear-gradient(90deg, #f6f6f6 25%, #e8e8e8 37%, #f6f6f6 63%);
-  background-size: 400% 100%;
-  animation: skeleton-loading 1.4s ease infinite;
-}
-
-.ea-skeleton-item_wrap.ea-skeleton_p, .ea-skeleton-item_wrap.ea-skeleton_image, .ea-skeleton-item_wrap.ea-skeleton_text, .ea-skeleton-item_wrap.ea-skeleton_h1, .ea-skeleton-item_wrap.ea-skeleton_h2, .ea-skeleton-item_wrap.ea-skeleton_h3, .ea-skeleton-item_wrap.ea-skeleton_h4, .ea-skeleton-item_wrap.ea-skeleton_h5, .ea-skeleton-item_wrap.ea-skeleton_h6 {
-  width: 100%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_p {
-  width: var(--p-width);
-  height: 16px;
-  margin-top: var(--margin-top);
-}
-.ea-skeleton-item_wrap.ea-skeleton_image {
-  width: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0;
-  height: 100%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_image .skeleton-image {
-  width: 30%;
-  height: 30%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_text {
-  height: 13px;
-  margin: 2px 0;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h1 {
-  height: 2rem;
-  margin-block: 0.67rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h2 {
-  height: 1.5rem;
-  margin-block: 0.83rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h3 {
-  height: 1.17rem;
-  margin-block: 1rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h4 {
-  height: 1rem;
-  margin-block: 1.33rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h5 {
-  height: 0.83rem;
-  margin-block: 1.67rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h6 {
-  height: 0.67rem;
-  margin-block: 2.33rem;
-}