easy-component-ui 1.0.3 → 2.0.1

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

@@ -1,110 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const stylesheet = `
-@import url('/ea_ui_component/icon/index.css');
-
-.ea-descriptions-item_wrap {
-  display: inline-flex;
-  text-align: left;
-  padding-bottom: 1rem;
-  line-height: 1.5;
-}
-.ea-descriptions-item_wrap .ea-descriptions-item_label {
-  margin-right: 10px;
-}
-.ea-descriptions-item_wrap .ea-descriptions-item_label::after {
-  content: ":";
-}
-.ea-descriptions-item_wrap .ea-descriptions-item_content {
-  display: inline-flex;
-  flex: 1;
-  align-items: baseline;
-}
-.ea-descriptions-item_wrap .ea-descriptions-item_label.is-border,
-.ea-descriptions-item_wrap .ea-descriptions-item_content.is-border {
-  border: 1px solid #ebeef5;
-}
-`;
-
-export class EaDescriptionsItem extends Base {
-  #wrap;
-
-  #label;
-
-  #labelSlot;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-
-    const wrap = document.createElement('td');
-    wrap.className = 'ea-descriptions-item_wrap';
-    wrap.colSpan = 1;
-
-    const label = document.createElement('span');
-    const labelSlot = document.createElement('slot');
-    label.className = 'ea-descriptions-item_label';
-    label.appendChild(labelSlot);
-    wrap.appendChild(label);
-
-    const content = document.createElement('span');
-    const slot = document.createElement('slot');
-    content.className = 'ea-descriptions-item_content';
-    labelSlot.name = 'label';
-    content.appendChild(slot);
-    wrap.appendChild(content);
-
-    this.#wrap = wrap;
-    this.#label = label;
-    this.#labelSlot = labelSlot;
-
-    this.build(shadowRoot, stylesheet);
-    this.shadowRoot.appendChild(wrap);
-  }
-
-  // ------- label 该格的标题 -------
-  // #region
-  get label() {
-    return this.getAttribute('label') || '';
-  }
-
-  set label(value) {
-    this.setAttribute('label', value);
-
-    this.#label.innerHTML = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- span 该格的大小 -------
-  // #region
-  get span() {
-    return this.getAttrNumber('span') || 1;
-  }
-
-  set span(value) {
-    this.setAttribute('span', value);
-
-    this.#wrap.colSpan = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  init() {
-    const that = this;
-
-    this.label = this.label;
-
-    this.span = this.span;
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-}
-
-if (!customElements.get('ea-descriptions-item')) {
-  customElements.define('ea-descriptions-item', EaDescriptionsItem);
-}
+import Base from"../Base.js";import{stylesheet}from"./src/stylesheet.js";export class EaDescriptionsItem extends Base{#e;#t;#s;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n        <td class="ea-descriptions-item_wrap" part="container">\n            <span class="ea-descriptions-item_label" part="label-wrap">\n                <slot slot="label"></slot>\n            </span>\n            <span class="ea-descriptions-item_content" part="content-wrap">\n                <slot></slot>\n            </span>\n        </td>\n    ',this.#e=e.querySelector(".ea-descriptions-item_wrap"),this.#t=e.querySelector(".ea-descriptions-item_label"),this.#s=e.querySelector('slot[name="label"]'),this.build(e,stylesheet)}get label(){return this.getAttribute("label")||""}set label(e){this.setAttribute("label",e),this.#t.innerHTML=e}get span(){return this.getAttrNumber("span")||1}set span(e){this.setAttribute("span",e)}connectedCallback(){this.label=this.label,this.span=this.span}}customElements.get("ea-descriptions-item")||customElements.define("ea-descriptions-item",EaDescriptionsItem);

package/components/ea-descriptions-item/src/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet='\n.ea-descriptions-item_wrap {\n  display: inline-flex;\n  text-align: left;\n  padding-bottom: 1rem;\n  line-height: 1.5;\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_label {\n  margin-right: 10px;\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_label::after {\n  content: ":";\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_content {\n  display: inline-flex;\n  flex: 1;\n  align-items: baseline;\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_label.is-border,\n.ea-descriptions-item_wrap .ea-descriptions-item_content.is-border {\n  border: 1px solid #ebeef5;\n}\n';

package/components/ea-drawer/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{timeout}from"../../utils/timeout.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaDrawer extends Base{#e;#t;#r;#s;#i;#a;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <div class="ea-drawer_wrap" part="container">\n        <div class="ea-drawer_drawer-wrap" part="drawer-wrap">\n          <div class="ea-drawer_header-wrap" part="header-wrap">\n            <span class="ea-drawer_title" part="title-wrap">\n              <slot name="title"></slot>\n            </span>\n            <ea-icon class="ea-drawer_icon" icon="icon-cancel" part="icon"></ea-icon>\n          </div>\n          <div class="ea-drawer_main-wrap" part="main-wrap">\n            <slot></slot>\n          </div>\n          <div class="ea-drawer_mask-wrap" part="mask-wrap"></div>\n        </div>\n      </div>\n    ',this.#e=e.querySelector(".ea-drawer_wrap"),this.#t=e.querySelector(".ea-drawer_drawer-wrap"),this.#r=e.querySelector(".ea-drawer_mask-wrap"),this.#s=e.querySelector(".ea-drawer_header-wrap"),this.#i=e.querySelector(".ea-drawer_title"),this.#a=e.querySelector(".ea-drawer_icon"),this.build(e,stylesheet)}get directionType(){return["ltr","rtl","ttb","btt"]}get direction(){const e=this.getAttribute("direction");return this.directionType.includes(e)?e:"ltr"}set direction(e){this.setAttribute("direction",e),this.#e.classList.toggle("direction-ltr","ltr"===e),this.#e.classList.toggle("direction-rtl","rtl"===e),this.#e.classList.toggle("direction-ttb","ttb"===e),this.#e.classList.toggle("direction-btt","btt"===e),this.#l(this.size)}get open(){return this.getAttrBoolean("open")||!1}set open(e){this.toggleAttr("open",e),timeout((()=>{this.#e.classList.toggle("is-open",e)}),20)}get size(){return this.getAttribute("size")||"30%"}set size(e){this.setAttribute("size",e),this.#l(e)}get withHeader(){return handleDefaultAttrIsTrue(this.getAttribute("with-header"))}set withHeader(e){this.toggleAttr("with-header",e),this.#s.style.display=e?"flex":"none"}get title(){return this.getAttribute("title")}set title(e){this.setAttribute("title",e),e&&(this.#i.innerText=e)}get showClose(){return handleDefaultAttrIsTrue(this.getAttribute("show-close"))}set showClose(e){this.toggleAttr("show-close",e),this.#a.style.display=e?"block":"none"}get modal(){return handleDefaultAttrIsTrue(this.getAttribute("modal"))}set modal(e){this.toggleAttr("modal",e),this.#r.style.display=e?"block":"none"}get wrapperClosable(){return handleDefaultAttrIsTrue(this.getAttribute("wrapper-closable"))}set wrapperClosable(e){this.setAttribute("wrapper-closable",e)}#l(e){const t="ltr"===this.direction||"rtl"===this.direction?"width":"height";this.#t.style.height="inherit",this.#t.style.width="inherit",this.#t.style[t]=e}#o(){const e=()=>{this.open=!1,this.#e.classList.remove("will-close"),this.#t.removeEventListener("transitionend",e)},t=()=>{this.#e.classList.add("will-close"),this.#t.addEventListener("transitionend",e),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))};this.wrapperClosable&&this.modal&&this.#r.addEventListener("click",(()=>{t()})),this.showClose&&this.#a.addEventListener("click",(()=>{t()}))}connectedCallback(){this.direction=this.direction,this.size=this.size,this.withHeader=this.withHeader,this.withHeader&&(this.showClose=this.showClose,this.title=this.title),this.modal=this.modal,this.wrapperClosable=this.wrapperClosable,this.open=!1,this.#o()}}customElements.get("ea-drawer")||customElements.define("ea-drawer",EaDrawer);

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

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

package/components/ea-empty/index.js

@@ -1,141 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-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;
-}
-`;
-
-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>
-`;
-
-export class EaEmpty extends Base {
-    #wrap;
-    #imageWrap;
-    #descriptionWrap;
-    #slot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-empty_wrap';
-
-        const imageWrap = document.createElement('div');
-        imageWrap.className = 'ea-empty_image';
-        imageWrap.innerHTML = emptyStatusSVG;
-        wrap.appendChild(imageWrap);
-
-        const descriptionWrap = document.createElement('div');
-        descriptionWrap.className = 'ea-empty_description';
-        descriptionWrap.innerHTML = `暂无数据`;
-        wrap.appendChild(descriptionWrap);
-
-        const bottomWrap = document.createElement('div');
-        const slot = document.createElement('slot');
-        bottomWrap.className = 'ea-empty_bottom';
-        bottomWrap.appendChild(slot);
-        wrap.appendChild(bottomWrap);
-
-        this.#wrap = wrap;
-        this.#imageWrap = imageWrap;
-        this.#descriptionWrap = descriptionWrap;
-        this.#slot = slot;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- 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.style.width = image.width + "px";
-            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 -------
-
-    init() {
-        const that = this;
-
-        this.description = this.description;
-
-        this.image = this.image;
-
-        this.imageSize = this.imageSize;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!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{#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);

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

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

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

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

package/components/ea-footer/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n\n";export class EaFooter extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <footer class="ea-footer_wrap" part="container">\n                <slot></slot>\n            </footer>\n        ',this.#t=t.querySelector(".ea-footer_wrap"),this.build(t,"\n\n")}get height(){return this.getAttrNumber("height")||60}set height(t){this.setAttribute("height",t),this.#t.style.height=`${t}px`,this.#t.style.lineHeight=`${t}px`}connectedCallback(){this.height=this.height}}customElements.get("ea-footer")||customElements.define("ea-footer",EaFooter);

package/components/ea-form/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{Validator}from"../../utils/Validator.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(){const e=this.querySelectorAll("ea-form-item"),t=Array.from(e).map((e=>e.label.length)),r=Math.max(...t);e.forEach((e=>{e.shadowRoot.querySelector(".ea-form-item_label-wrap").style.width=20*r+"px"}))}}customElements.get("ea-form")||customElements.define("ea-form",EaForm);

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

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

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

@@ -0,0 +1 @@
+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.with-transition .ea-form-item_content-wrap .ea-form-item_invalid-wrap {\n  transition: transform 0.3s;\n}\n';

package/components/ea-header/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="";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,"")}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);