easy-component-ui 2.1.1 → 3.0.0

package/components/ea-empty/index.scss

@@ -1,30 +0,0 @@
-@import "../ea-ui-base-style.scss";
-@import "../ea-icon/index.scss";
-
-.ea-empty_wrap {
-  padding: 40px 0;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  .ea-empty_image {
-    width: 8rem;
-
-    object-fit: cover;
-    svg,
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .ea-empty_description {
-    margin-top: 20px;
-  }
-
-  .ea-empty_bottom {
-    margin-top: 20px;
-  }
-}

package/components/ea-empty/src/assets/emptyStatusSVG.js

@@ -1,6 +0,0 @@
-export const emptyStatusSVG = `
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <path d="M30 50v21.5a2 2 0 0 0 1 1h39a2 2 0 0 0 1-1V50H61a10 10 0 0 1-20 0h-6.5z" fill="#6E6E6F" />
-    <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" stroke="#6E6E6F" />
-</svg>
-`;

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

@@ -1,24 +0,0 @@
-export const stylesheet = `
-.ea-empty_wrap {
-  padding: 40px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.ea-empty_wrap .ea-empty_image {
-  width: 8rem;
-  object-fit: cover;
-}
-.ea-empty_wrap .ea-empty_image svg,
-.ea-empty_wrap .ea-empty_image img {
-  width: 100%;
-  height: 100%;
-}
-.ea-empty_wrap .ea-empty_description {
-  margin-top: 20px;
-}
-.ea-empty_wrap .ea-empty_bottom {
-  margin-top: 20px;
-}
-`;

package/components/ea-footer/index.css

@@ -1,7 +0,0 @@
-.ea-footer_wrap {
-  box-sizing: border-box;
-  padding: 0 20px;
-  height: 60px;
-  color: #333;
-  overflow: hidden;
-}

package/components/ea-footer/index.js

@@ -1,57 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js';
-
-const stylesheet = `
-.ea-footer_wrap {
-  box-sizing: border-box;
-  padding: 0 20px;
-
-  height: 60px;
-
-  color: #333;
-
-  overflow: hidden;
-}
-`;
-
-export class EaFooter extends Base {
-    #wrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <footer class="ea-footer_wrap" part="container">
-                <slot></slot>
-            </footer>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-footer_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- height 底栏高度 -------
-    // #region
-    get height() {
-        return this.getAttrNumber('height') || 60;
-    }
-
-    set height(value) {
-        this.setAttribute('height', value);
-
-        this.#wrap.style.height = `${value}px`;
-        this.#wrap.style.lineHeight = `${value}px`;
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.height = this.height;
-    }
-}
-
-if (!customElements.get('ea-footer')) {
-    customElements.define('ea-footer', EaFooter);
-}

package/components/ea-footer/index.scss

@@ -1,10 +0,0 @@
-.ea-footer_wrap {
-  box-sizing: border-box;
-  padding: 0 20px;
-
-  height: 60px;
-
-  color: #333;
-
-  overflow: hidden;
-}

package/components/ea-form/index.js

@@ -1,121 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-import { Validator } from "../../utils/Validator.js";
-import { timeout } from '../../utils/timeout.js';
-
-import "../ea-form-item/index.js"
-import '../ea-button/index.js'
-
-export class EaForm extends Base {
-    #rules;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <form class='ea-form_wrap' part='container'>
-                <slot></slot>
-            </form>
-        `;
-    }
-
-    // ------- data 获取form表单的值 -------
-    // #region
-    get data() {
-        const obj = {};
-        const formItems = this.querySelectorAll('[data-ea-component]');
-
-        formItems.forEach(input => {
-            obj[input.name] = input.value;
-        });
-
-        return obj;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- rules 校验规则 -------
-    // #region
-    get rules() {
-        return this.#rules || {};
-    }
-
-    set rules(value) {
-        this.#rules = value;
-
-        const formItems = this.querySelectorAll('ea-form-item');
-        const valueItems = this.querySelectorAll('[data-ea-component]');
-        valueItems.forEach((input, index) => {
-            formItems[index].rule = value[input.name];
-            formItems[index].validateEvent();
-            formItems[index].isRequired = value[input.name]?.required ? true : false;
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    validate() {
-        const formItems = this.querySelectorAll('ea-form-item');
-        const valueItems = this.querySelectorAll('[data-ea-component]');
-
-        let isValid = [];
-
-        valueItems.forEach((input, index) => {
-            if (!this.#rules[input.name]) return;
-
-            for (const k in formItems[index].rule) {
-                if (!Validator[k]) continue;
-
-                if (!Validator[k](input.value, formItems[index].rule[k])) {
-                    formItems[index].isInvalid = true;
-                    input.isInvalid = true;
-                    isValid.push(input.name);
-                    break;
-                } else {
-                    formItems[index].isInvalid = false;
-                    input.isInvalid = false;
-                }
-            }
-        });
-
-        return new Promise((resolve, reject) => {
-            if (isValid.length > 0) {
-                reject(isValid);
-            } else {
-                resolve(true);
-            }
-        });
-    }
-
-    reset() {
-        const formItems = this.querySelectorAll('ea-form-item');
-        const valueItems = this.querySelectorAll('[data-ea-component]');
-        valueItems.forEach((input, index) => {
-            input.value = '';
-            input.isInvalid = false;
-            formItems[index].isInvalid = false;
-        });
-    }
-
-    connectedCallback() {
-        timeout(() => {
-            const formItemsWrap = this.querySelectorAll('ea-form-item');
-
-            const lenArr = Array.from(formItemsWrap).map(item => item.label.length);
-            const max = Math.max(...lenArr);
-
-            formItemsWrap.forEach(item => {
-                const labelWrap = item.shadowRoot.querySelector('.ea-form-item_label-wrap');
-                if (labelWrap) labelWrap.style.width = `${max * 20}px`;
-            });
-
-            this.dispatchEvent(new CustomEvent('ready', { bubbles: true }));
-        }, 50);
-    }
-}
-
-if (!customElements.get('ea-form')) {
-    customElements.define('ea-form', EaForm);
-}

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

@@ -1,62 +0,0 @@
-.ea-form-item_wrap {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 22px;
-}
-.ea-form-item_wrap .ea-form-item_label-wrap {
-  text-align: right;
-  float: left;
-  font-size: 14px;
-  color: #606266;
-  line-height: 40px;
-  padding: 0 12px 0 0;
-  box-sizing: border-box;
-}
-.ea-form-item_wrap .ea-form-item_content-wrap {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-.ea-form-item_wrap .ea-form-item_content-wrap .ea-form-item_invalid-wrap {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  transform-origin: top center;
-  transform: translateY(100%) scaleY(0);
-  font-size: 12px;
-  color: #f56c6c;
-  white-space: nowrap;
-}
-.ea-form-item_wrap.is-required-star .ea-form-item_label-wrap::before {
-  content: "*";
-  color: #f56c6c;
-  margin-right: 4px;
-}
-.ea-form-item_wrap.is-required .ea-form-item_content-wrap .ea-form-item_invalid-wrap {
-  transform: translateY(100%) scaleY(1);
-}
-.ea-form-item_wrap.is-required .ea-form-item_label-wrap {
-  color: #f56c6c;
-}
-.ea-form-item_wrap.is-required ::slotted(ea-input),
-.ea-form-item_wrap.is-required ::slotted(ea-select),
-.ea-form-item_wrap.is-required ::slotted(ea-textarea),
-.ea-form-item_wrap.is-required ::slotted(ea-time-picker),
-.ea-form-item_wrap.is-required ::slotted(ea-date-picker) {
-  border-color: #f56c6c;
-}
-.ea-form-item_wrap ::slotted(ea-input),
-.ea-form-item_wrap ::slotted(ea-select),
-.ea-form-item_wrap ::slotted(ea-textarea),
-.ea-form-item_wrap ::slotted(ea-time-picker),
-.ea-form-item_wrap ::slotted(ea-date-picker) {
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-.ea-form-item_wrap.with-transition .ea-form-item_content-wrap .ea-form-item_invalid-wrap {
-  transition: transform 0.3s;
-}
-.ea-form-item_wrap.with-transition .ea-form-item_label-wrap {
-  transition: color 0.3s;
-}

package/components/ea-form-item/index.js

@@ -1,152 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-import { withTransitionTimeOut } from '../../utils/timeout.js';
-import { Validator } from "../../utils/Validator.js";
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaFromItem extends Base {
-    #rule;
-
-    #container;
-
-    #labelWrap;
-
-    #invalidWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class='ea-form-item_wrap' part='container'>
-                <label class="ea-form-item_label-wrap" part='label-wrap'>
-                    <slot name='label'></slot>
-                </label>
-                <div class="ea-form-item_content-wrap" part='content-wrap'> 
-                    <slot></slot>
-                    <span class="ea-form-item_invalid-wrap" part='invalid-wrap'>
-                        <slot name='invalid-text'></slot>
-                    </span>
-                </div>
-            </div>
-        `;
-
-        this.#container = shadowRoot.querySelector('.ea-form-item_wrap');
-
-        this.#labelWrap = shadowRoot.querySelector('.ea-form-item_label-wrap');
-
-        this.#invalidWrap = shadowRoot.querySelector('.ea-form-item_invalid-wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- label 标签 -------
-    // #region
-    get label() {
-        return this.getAttribute('label');
-    }
-
-    set label(value) {
-        this.setAttribute('label', value);
-
-        const slot = this.#labelWrap.querySelector('slot');
-        try {
-            if (slot.assignedNodes().length === 0) this.#labelWrap.innerHTML = value;
-        } catch (error) { }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- trigger 触发器 -------
-    // #region
-    get trigger() {
-        const attr = this.getAttribute('trigger');
-        return ['blur', 'change'].includes(attr) ? attr : 'blur';
-    }
-
-    set trigger(value) {
-        this.setAttribute('trigger', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- is-invalid 是否校验失败 -------
-    // #region
-    get isInvalid() {
-        return this.getAttribute('is-invalid') === 'true';
-    }
-
-    set isInvalid(value) {
-        this.setAttribute('is-invalid', value);
-
-        this.#container.classList.toggle('is-required', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- rule 校验规则 -------
-    // #region
-    get rule() {
-        return this.#rule;
-    }
-
-    set rule(value) {
-        this.#rule = value;
-
-        for (const key in value) {
-            this[key] = value[key];
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- isRequired 是否必填 -------
-    // #region
-    get isRequired() {
-        return this.getAttrBoolean('is-required');
-    }
-
-    set isRequired(value) {
-        this.setAttribute('is-required', value);
-
-        this.#container.classList.toggle('is-required-star', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    validateEvent() {
-        const formItem = this.querySelector('[data-ea-component]');
-        try {
-            formItem.addEventListener(this.trigger, (e) => {
-                for (const key in this.#rule) {
-                    if (Validator[key]) {
-                        if (!Validator[key](formItem.value, this.#rule[key])) {
-                            formItem.isInvalid = true;
-                            this.#container.classList.add('is-required');
-
-                            break;
-                        } else {
-                            formItem.isInvalid = false;
-                            this.#container.classList.remove('is-required');
-                        }
-                    }
-                }
-            });
-        } catch (error) { }
-    }
-
-    connectedCallback() {
-        this.label = this.label;
-
-        this.trigger = this.trigger;
-
-        withTransitionTimeOut(this.#container, 50);
-    }
-}
-
-if (!customElements.get('ea-form-item')) {
-    customElements.define('ea-form-item', EaFromItem);
-}

package/components/ea-form-item/index.scss

@@ -1,83 +0,0 @@
-.ea-form-item_wrap {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 22px;
-
-  .ea-form-item_label-wrap {
-    text-align: right;
-    float: left;
-    font-size: 14px;
-    color: #606266;
-    line-height: 40px;
-    padding: 0 12px 0 0;
-    box-sizing: border-box;
-  }
-
-  .ea-form-item_content-wrap {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    .ea-form-item_invalid-wrap {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      transform-origin: top center;
-      transform: translateY(100%) scaleY(0);
-
-      font-size: 12px;
-      color: #f56c6c;
-
-      white-space: nowrap;
-    }
-  }
-
-  &.is-required-star {
-    .ea-form-item_label-wrap {
-      &::before {
-        content: "*";
-        color: #f56c6c;
-        margin-right: 4px;
-      }
-    }
-  }
-
-  &.is-required {
-    .ea-form-item_content-wrap {
-      .ea-form-item_invalid-wrap {
-        transform: translateY(100%) scaleY(1);
-      }
-    }
-    .ea-form-item_label-wrap {
-      color: #f56c6c;
-    }
-    ::slotted(ea-input),
-    ::slotted(ea-select),
-    ::slotted(ea-textarea),
-    ::slotted(ea-time-picker),
-    ::slotted(ea-date-picker) {
-      border-color: #f56c6c;
-    }
-  }
-
-  ::slotted(ea-input),
-  ::slotted(ea-select),
-  ::slotted(ea-textarea),
-  ::slotted(ea-time-picker),
-  ::slotted(ea-date-picker) {
-    border: 1px solid transparent;
-    border-radius: 3px;
-  }
-
-  &.with-transition {
-    .ea-form-item_content-wrap {
-      .ea-form-item_invalid-wrap {
-        transition: transform 0.3s;
-      }
-    }
-    .ea-form-item_label-wrap {
-      transition: color 0.3s;
-    }
-  }
-}

package/components/ea-form-item/src/style/stylesheet.js

@@ -1,64 +0,0 @@
-export const stylesheet = `
-.ea-form-item_wrap {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 22px;
-}
-.ea-form-item_wrap .ea-form-item_label-wrap {
-  text-align: right;
-  float: left;
-  font-size: 14px;
-  color: #606266;
-  line-height: 40px;
-  padding: 0 12px 0 0;
-  box-sizing: border-box;
-}
-.ea-form-item_wrap .ea-form-item_content-wrap {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-.ea-form-item_wrap .ea-form-item_content-wrap .ea-form-item_invalid-wrap {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  transform-origin: top center;
-  transform: translateY(100%) scaleY(0);
-  font-size: 12px;
-  color: #f56c6c;
-  white-space: nowrap;
-}
-.ea-form-item_wrap.is-required-star .ea-form-item_label-wrap::before {
-  content: "*";
-  color: #f56c6c;
-  margin-right: 4px;
-}
-.ea-form-item_wrap.is-required .ea-form-item_content-wrap .ea-form-item_invalid-wrap {
-  transform: translateY(100%) scaleY(1);
-}
-.ea-form-item_wrap.is-required .ea-form-item_label-wrap {
-  color: #f56c6c;
-}
-.ea-form-item_wrap.is-required ::slotted(ea-input),
-.ea-form-item_wrap.is-required ::slotted(ea-select),
-.ea-form-item_wrap.is-required ::slotted(ea-textarea),
-.ea-form-item_wrap.is-required ::slotted(ea-time-picker),
-.ea-form-item_wrap.is-required ::slotted(ea-date-picker) {
-  border-color: #f56c6c;
-}
-.ea-form-item_wrap ::slotted(ea-input),
-.ea-form-item_wrap ::slotted(ea-select),
-.ea-form-item_wrap ::slotted(ea-textarea),
-.ea-form-item_wrap ::slotted(ea-time-picker),
-.ea-form-item_wrap ::slotted(ea-date-picker) {
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-.ea-form-item_wrap.with-transition .ea-form-item_content-wrap .ea-form-item_invalid-wrap {
-  transition: transform 0.3s;
-}
-.ea-form-item_wrap.with-transition .ea-form-item_label-wrap {
-  transition: color 0.3s;
-}
-`;

package/components/ea-header/index.css

@@ -1,7 +0,0 @@
-.ea-header_wrap {
-  box-sizing: border-box;
-  padding: 0 20px;
-  height: 60px;
-  color: #333;
-  overflow: hidden;
-}

package/components/ea-header/index.js

@@ -1,55 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-const stylesheet = `
-.ea-header_wrap {
-  box-sizing: border-box;
-  padding: 0 20px;
-
-  height: 60px;
-
-  color: #333;
-
-  overflow: hidden;
-}
-`;
-
-export class EaHeader extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <header class="ea-header_wrap" part="container">
-                <slot></slot>
-            </header>
-        `;
-        this.#wrap = shadowRoot.querySelector('.ea-header_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- height 顶栏高度 -------
-    // #region
-    get height() {
-        return this.getAttrNumber('height') || 60;
-    }
-
-    set height(value) {
-        this.setAttribute('height', value);
-
-        this.#wrap.style.height = `${value}px`;
-        this.#wrap.style.lineHeight = `${value}px`;
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.height = this.height;
-    }
-}
-
-if (!customElements.get('ea-header')) {
-    customElements.define('ea-header', EaHeader);
-}

package/components/ea-header/index.scss

@@ -1,10 +0,0 @@
-.ea-header_wrap {
-  box-sizing: border-box;
-  padding: 0 20px;
-
-  height: 60px;
-
-  color: #333;
-
-  overflow: hidden;
-}