easy-component-ui 2.0.4 → 2.1.0

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

@@ -1 +1,152 @@
-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{#t;#e;#i;#r;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-form-item_wrap' part='container'>\n                <label class=\"ea-form-item_label-wrap\" part='label-wrap'>\n                    <slot name='label'></slot>\n                </label>\n                <div class=\"ea-form-item_content-wrap\" part='content-wrap'> \n                    <slot></slot>\n                    <span class=\"ea-form-item_invalid-wrap\" part='invalid-wrap'>\n                        <slot name='invalid-text'></slot>\n                    </span>\n                </div>\n            </div>\n        ",this.#e=t.querySelector(".ea-form-item_wrap"),this.#i=t.querySelector(".ea-form-item_label-wrap"),this.#r=t.querySelector(".ea-form-item_invalid-wrap"),this.build(t,stylesheet)}get label(){return this.getAttribute("label")}set label(t){this.setAttribute("label",t);const e=this.#i.querySelector("slot");try{0===e.assignedNodes().length&&(this.#i.innerHTML=t)}catch(t){}}get trigger(){const t=this.getAttribute("trigger");return["blur","change"].includes(t)?t:"blur"}set trigger(t){this.setAttribute("trigger",t)}get isInvalid(){return"true"===this.getAttribute("is-invalid")}set isInvalid(t){this.setAttribute("is-invalid",t),this.#e.classList.toggle("is-required",t)}get rule(){return this.#t}set rule(t){this.#t=t;for(const e in t)this[e]=t[e]}get isRequired(){return this.getAttrBoolean("is-required")}set isRequired(t){this.setAttribute("is-required",t),this.#e.classList.toggle("is-required-star",t)}validateEvent(){const t=this.querySelector("[data-ea-component]");try{t.addEventListener(this.trigger,(e=>{for(const e in this.#t)if(Validator[e]){if(!Validator[e](t.value,this.#t[e])){t.isInvalid=!0,this.#e.classList.add("is-required");break}t.isInvalid=!1,this.#e.classList.remove("is-required")}}))}catch(t){}}connectedCallback(){this.label=this.label,this.trigger=this.trigger,withTransitionTimeOut(this.#e,50)}}customElements.get("ea-form-item")||customElements.define("ea-form-item",EaFromItem);
+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

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

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

package/components/ea-header/index.js

@@ -1 +1,55 @@
-import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-header_wrap {\n  box-sizing: border-box;\n  padding: 0 20px;\n\n  height: 60px;\n\n  color: #333;\n\n  overflow: hidden;\n}\n";export class EaHeader extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <header class="ea-header_wrap" part="container">\n                <slot></slot>\n            </header>\n        ',this.#e=e.querySelector(".ea-header_wrap"),this.build(e,stylesheet)}get height(){return this.getAttrNumber("height")||60}set height(e){this.setAttribute("height",e),this.#e.style.height=`${e}px`,this.#e.style.lineHeight=`${e}px`}connectedCallback(){this.height=this.height}}customElements.get("ea-header")||customElements.define("ea-header",EaHeader);
+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

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