easy-component-ui 2.0.5 → 2.1.1

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

@@ -1 +1,141 @@
-export const stylesheet="\n.ea-drawer_wrap {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  z-index: 2001;\n}\n.ea-drawer_wrap .ea-drawer_drawer-wrap {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n  transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;\n}\n.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  margin-bottom: 32px;\n  padding: 20px 20px 0;\n  color: #72767b;\n}\n.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap .ea-drawer_icon {\n  cursor: pointer;\n}\n.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_main-wrap {\n  flex: 1;\n  box-sizing: border-box;\n  padding: 20px;\n  overflow: auto;\n}\n.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_mask-wrap {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.4);\n  z-index: -1;\n  opacity: 0;\n  scale: 0;\n  transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;\n}\n.ea-drawer_wrap.direction-ltr, .ea-drawer_wrap.direction-rtl {\n  top: 0;\n}\n.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {\n  top: 0;\n  height: 100%;\n}\n.ea-drawer_wrap.direction-ttb, .ea-drawer_wrap.direction-btt {\n  left: 0;\n}\n.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {\n  left: 0;\n  width: 100%;\n}\n.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {\n  left: 0;\n}\n.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.is-open .ea-drawer_mask-wrap {\n  opacity: 1;\n  scale: 1;\n}\n.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.will-close .ea-drawer_mask-wrap {\n  opacity: 0;\n  scale: 0;\n}\n.ea-drawer_wrap.direction-ltr {\n  left: -100%;\n}\n.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap {\n  left: -100%;\n}\n.ea-drawer_wrap.direction-ltr .ea-drawer_mask-wrap {\n  left: 0;\n}\n.ea-drawer_wrap.direction-ltr.is-open {\n  left: 0;\n}\n.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_drawer-wrap {\n  left: 0;\n}\n.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_drawer-wrap {\n  left: -100%;\n}\n.ea-drawer_wrap.direction-rtl {\n  right: -100%;\n}\n.ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {\n  right: -100%;\n}\n.ea-drawer_wrap.direction-rtl .ea-drawer_mask-wrap {\n  right: 0;\n}\n.ea-drawer_wrap.direction-rtl.is-open {\n  right: 0;\n}\n.ea-drawer_wrap.direction-rtl.is-open .ea-drawer_drawer-wrap {\n  right: 0;\n}\n.ea-drawer_wrap.direction-rtl.will-close .ea-drawer_drawer-wrap {\n  right: -100%;\n}\n.ea-drawer_wrap.direction-ttb {\n  bottom: -100%;\n}\n.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap {\n  bottom: -100%;\n}\n.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap {\n  bottom: 0;\n}\n.ea-drawer_wrap.direction-ttb.is-open {\n  bottom: 0;\n}\n.ea-drawer_wrap.direction-ttb.is-open .ea-drawer_drawer-wrap {\n  bottom: 0;\n}\n.ea-drawer_wrap.direction-ttb.will-close .ea-drawer_drawer-wrap {\n  bottom: -100%;\n}\n.ea-drawer_wrap.direction-btt {\n  top: -100%;\n}\n.ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {\n  top: -100%;\n}\n.ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {\n  top: 0;\n}\n.ea-drawer_wrap.direction-btt.is-open {\n  top: 0;\n}\n.ea-drawer_wrap.direction-btt.is-open .ea-drawer_drawer-wrap {\n  top: 0;\n}\n.ea-drawer_wrap.direction-btt.will-close .ea-drawer_drawer-wrap {\n  top: -100%;\n}\n";
+export
+    const stylesheet = `
+.ea-drawer_wrap {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 2001;
+}
+.ea-drawer_wrap .ea-drawer_drawer-wrap {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
+}
+.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 32px;
+  padding: 20px 20px 0;
+  color: #72767b;
+}
+.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap .ea-drawer_icon {
+  cursor: pointer;
+}
+.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_main-wrap {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: auto;
+}
+.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_mask-wrap {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: -1;
+  opacity: 0;
+  scale: 0;
+  transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
+}
+.ea-drawer_wrap.direction-ltr, .ea-drawer_wrap.direction-rtl {
+  top: 0;
+}
+.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {
+  top: 0;
+  height: 100%;
+}
+.ea-drawer_wrap.direction-ttb, .ea-drawer_wrap.direction-btt {
+  left: 0;
+}
+.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {
+  left: 0;
+  width: 100%;
+}
+.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {
+  left: 0;
+}
+.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.is-open .ea-drawer_mask-wrap {
+  opacity: 1;
+  scale: 1;
+}
+.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.will-close .ea-drawer_mask-wrap {
+  opacity: 0;
+  scale: 0;
+}
+.ea-drawer_wrap.direction-ltr {
+  left: -100%;
+}
+.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap {
+  left: -100%;
+}
+.ea-drawer_wrap.direction-ltr .ea-drawer_mask-wrap {
+  left: 0;
+}
+.ea-drawer_wrap.direction-ltr.is-open {
+  left: 0;
+}
+.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_drawer-wrap {
+  left: 0;
+}
+.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_drawer-wrap {
+  left: -100%;
+}
+.ea-drawer_wrap.direction-rtl {
+  right: -100%;
+}
+.ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {
+  right: -100%;
+}
+.ea-drawer_wrap.direction-rtl .ea-drawer_mask-wrap {
+  right: 0;
+}
+.ea-drawer_wrap.direction-rtl.is-open {
+  right: 0;
+}
+.ea-drawer_wrap.direction-rtl.is-open .ea-drawer_drawer-wrap {
+  right: 0;
+}
+.ea-drawer_wrap.direction-rtl.will-close .ea-drawer_drawer-wrap {
+  right: -100%;
+}
+.ea-drawer_wrap.direction-ttb {
+  bottom: -100%;
+}
+.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap {
+  bottom: -100%;
+}
+.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap {
+  bottom: 0;
+}
+.ea-drawer_wrap.direction-ttb.is-open {
+  bottom: 0;
+}
+.ea-drawer_wrap.direction-ttb.is-open .ea-drawer_drawer-wrap {
+  bottom: 0;
+}
+.ea-drawer_wrap.direction-ttb.will-close .ea-drawer_drawer-wrap {
+  bottom: -100%;
+}
+.ea-drawer_wrap.direction-btt {
+  top: -100%;
+}
+.ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {
+  top: -100%;
+}
+.ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {
+  top: 0;
+}
+.ea-drawer_wrap.direction-btt.is-open {
+  top: 0;
+}
+.ea-drawer_wrap.direction-btt.is-open .ea-drawer_drawer-wrap {
+  top: 0;
+}
+.ea-drawer_wrap.direction-btt.will-close .ea-drawer_drawer-wrap {
+  top: -100%;
+}
+`;

package/components/ea-empty/index.css

@@ -0,0 +1,30 @@
+@import "../ea-icon/css/fontello.css";
+@import "../ea-icon/css/animation.css";
+@font-face {
+  font-size: 1rem;
+  font-size: 16px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  src: url("../ea-icon/font/fontello.eot") format("embedded-opentype"), url("../ea-icon/font/fontello.ttf") format("truetype"), url("../ea-icon/font/fontello.woff") format("woff"), url("../ea-icon/font/fontello.woff2") format("woff2"), url("../ea-icon/font/fontello.svg") format("svg");
+}
+.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-empty/index.js

@@ -1 +1,93 @@
-import Base from"../Base.js";import{emptyStatusSVG}from"./src/assets/emptyStatusSVG.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaEmpty extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`\n            <div class="ea-empty_wrap" part="container">\n                <div class="ea-empty_image" part="image-wrap">\n                    ${emptyStatusSVG}\n                </div>\n                <div class="ea-empty_description" part="description-wrap">\n                    暂无数据\n                </div>\n                <div class="ea-empty_bottom" part="bottom-wrap">\n                    <slot></slot>\n                </div>\n            </div>\n        `,this.#t=t.querySelector(".ea-empty_image"),this.#e=t.querySelector(".ea-empty_description"),this.build(t,stylesheet)}get description(){return this.getAttribute("description")||"暂无数据"}set description(t){this.setAttribute("description",t),this.#e.innerHTML=t}get image(){return this.getAttribute("image")||""}set image(t){if(!t)return;this.setAttribute("image",t);const e=new Image;e.src=t,e.onload=()=>{this.#t.innerHTML=`<img src="${t}" />`}}get imageSize(){return this.getAttribute("image-size")||"128"}set imageSize(t){t&&(this.setAttribute("image-size",t),this.#t.style.width=t+"px")}connectedCallback(){this.description=this.description,this.image=this.image,this.imageSize=this.imageSize}}customElements.get("ea-empty")||customElements.define("ea-empty",EaEmpty);
+import Base from '../Base.js';
+
+import { emptyStatusSVG } from './src/assets/emptyStatusSVG.js';
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaEmpty extends Base {
+    #imageWrap;
+    #descriptionWrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-empty_wrap" part="container">
+                <div class="ea-empty_image" part="image-wrap">
+                    ${emptyStatusSVG}
+                </div>
+                <div class="ea-empty_description" part="description-wrap">
+                    暂无数据
+                </div>
+                <div class="ea-empty_bottom" part="bottom-wrap">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+
+        this.#imageWrap = shadowRoot.querySelector('.ea-empty_image');
+        this.#descriptionWrap = shadowRoot.querySelector('.ea-empty_description');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- description 描述文字 -------
+    // #region
+    get description() {
+        return this.getAttribute('description') || "暂无数据";
+    }
+
+    set description(value) {
+        this.setAttribute('description', value);
+        this.#descriptionWrap.innerHTML = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- image 自定义图片 -------
+    // #region
+    get image() {
+        return this.getAttribute('image') || "";
+    }
+
+    set image(value) {
+        if (!value) return;
+
+        this.setAttribute('image', value);
+
+        const image = new Image();
+        image.src = value;
+        image.onload = () => {
+            this.#imageWrap.innerHTML = `<img src="${value}" />`;
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- image-size 自定义图片大小 -------
+    // #region
+    get imageSize() {
+        return this.getAttribute('image-size') || "128";
+    }
+
+    set imageSize(value) {
+        if (!value) return;
+
+        this.setAttribute('image-size', value);
+        this.#imageWrap.style.width = value + "px";
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.description = this.description;
+
+        this.image = this.image;
+
+        this.imageSize = this.imageSize;
+    }
+}
+
+if (!customElements.get('ea-empty')) {
+    customElements.define('ea-empty', EaEmpty);
+}

package/components/ea-empty/index.scss

@@ -0,0 +1,30 @@
+@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 +1,6 @@
-export const emptyStatusSVG='\n<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n    <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" />\n    <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" stroke="#6E6E6F" />\n</svg>\n';
+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 +1,24 @@
-export const stylesheet="\n.ea-empty_wrap {\n  padding: 40px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n.ea-empty_wrap .ea-empty_image {\n  width: 8rem;\n  object-fit: cover;\n}\n.ea-empty_wrap .ea-empty_image svg,\n.ea-empty_wrap .ea-empty_image img {\n  width: 100%;\n  height: 100%;\n}\n.ea-empty_wrap .ea-empty_description {\n  margin-top: 20px;\n}\n.ea-empty_wrap .ea-empty_bottom {\n  margin-top: 20px;\n}\n";
+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

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

package/components/ea-footer/index.js

@@ -1 +1,57 @@
-import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-footer_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 EaFooter extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <footer class="ea-footer_wrap" part="container">\n                <slot></slot>\n            </footer>\n        ',this.#e=e.querySelector(".ea-footer_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-footer")||customElements.define("ea-footer",EaFooter);
+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

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

package/components/ea-form/index.js

@@ -1 +1,121 @@
-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{#e;constructor(){super();this.attachShadow({mode:"open"}).innerHTML="\n            <form class='ea-form_wrap' part='container'>\n                <slot></slot>\n            </form>\n        "}get data(){const e={};return this.querySelectorAll("[data-ea-component]").forEach((t=>{e[t.name]=t.value})),e}get rules(){return this.#e||{}}set rules(e){this.#e=e;const t=this.querySelectorAll("ea-form-item");this.querySelectorAll("[data-ea-component]").forEach(((r,a)=>{t[a].rule=e[r.name],t[a].validateEvent(),t[a].isRequired=!!e[r.name]?.required}))}validate(){const e=this.querySelectorAll("ea-form-item"),t=this.querySelectorAll("[data-ea-component]");let r=[];return t.forEach(((t,a)=>{if(this.#e[t.name])for(const o in e[a].rule)if(Validator[o]){if(!Validator[o](t.value,e[a].rule[o])){e[a].isInvalid=!0,t.isInvalid=!0,r.push(t.name);break}e[a].isInvalid=!1,t.isInvalid=!1}})),new Promise(((e,t)=>{r.length>0?t(r):e(!0)}))}reset(){const e=this.querySelectorAll("ea-form-item");this.querySelectorAll("[data-ea-component]").forEach(((t,r)=>{t.value="",t.isInvalid=!1,e[r].isInvalid=!1}))}connectedCallback(){timeout((()=>{const e=this.querySelectorAll("ea-form-item"),t=Array.from(e).map((e=>e.label.length)),r=Math.max(...t);e.forEach((e=>{const t=e.shadowRoot.querySelector(".ea-form-item_label-wrap");t&&(t.style.width=20*r+"px")})),this.dispatchEvent(new CustomEvent("ready",{bubbles:!0}))}),50)}}customElements.get("ea-form")||customElements.define("ea-form",EaForm);
+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

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