easy-component-ui 0.0.2 → 2.0.1

package/.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - package
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '14'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/components/Base.js

@@ -0,0 +1 @@
+import setStyle from"../utils/setStyle.js";export default class Base extends HTMLElement{constructor(){super(),this.isProduction=!1,this.isProduction=!0}toggleAttribute(t,e,s){e?(this.setAttribute(t,e),s&&this.dom.classList.add(s)):(this.hasAttribute(t)&&this.removeAttribute(t),s&&this.dom.classList.remove(s))}toggleAttr(t,e){e?this.setAttribute(t,e):this.removeAttribute(t)}getAttrBoolean(t){const e=this.getAttribute(t);return"true"===e||""===e}getAttrNumber(t){const e=this.getAttribute(t);return e?Number(e):0}build(t,e){if(this.isProduction){const t=document.createElement("style");t.innerHTML=e,this.shadowRoot.appendChild(t)}else setStyle(t,new URL(this.nodeName.toLowerCase()+"/index.css",import.meta.url).href)}}

package/components/ea-alert/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{createElement}from"../../utils/createElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaAlert extends Base{#t;#e;#s;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n      <div class='ea-alert_wrap' part='container'>\n        <div class=\"ea-alert_content\" part='content-wrap'>\n          <span class=\"ea-alert_title\" part='title'></span>\n          <ea-icon class=\"ea-alert_close-icon\" part='icon'></ea-icon>\n        </div>\n      </div>\n    ",this.#t=t.querySelector(".ea-alert_wrap"),this.#e=t.querySelector(".ea-alert_content"),this.#s=t.querySelector(".ea-alert_title"),this.#i=t.querySelector(".ea-alert_close-icon"),this.build(t,stylesheet)}get type(){return this.getAttribute("type")||"info"}set type(t){this.setAttribute("type",t),this.#t.classList.add(`ea-alert--${t}`)}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t),this.#s.innerText=t}get closable(){return handleDefaultAttrIsTrue("closable")}set closable(t){this.setAttribute("closable",t),this.#i.style.display=t?"block":"none"}get closeText(){return this.getAttribute("close-text")||""}set closeText(t){this.setAttribute("close-text",t)}get effect(){return this.getAttribute("effect")||"light"}set effect(t){this.setAttribute("effect",t),this.#t.classList.toggle("ea-alert--dark","dark"===t)}get showIcon(){return this.getAttrBoolean("show-icon")||!1}set showIcon(t){this.setAttribute("show-icon",t)}get center(){return this.getAttrBoolean("center")||!1}set center(t){this.setAttribute("center",t),this.#e.classList.toggle("ea-alert--center",t)}get description(){return this.getAttribute("description")||""}set description(t){this.setAttribute("description",t)}#r(){this.closable&&(!0===this.closable&&""===this.closeText?this.#i.icon="icon-cancel":this.#i.innerText=this.closeText,this.#i.addEventListener("click",(()=>{this.#t.style.opacity=0,this.dispatchEvent(new CustomEvent("close",{detail:{target:this.#i}}))})),this.#t.addEventListener("transitionend",(()=>{this.remove()})))}get iconList(){return{success:"ok-circled",info:"info",warning:"attention-alt",error:"cancel-circled"}}#n(){if(!this.showIcon)return;const t=createElement("ea-icon");t.icon=`icon-${this.iconList[this.type]}`,t.classList.add(`ea-alert--${this.type}`),this.#s.insertBefore(t,this.#s.firstChild)}#l(){if(!this.description)return;const t=createElement("p","ea-alert_description");t.part="description",this.#t.style.flexDirection="column",t.innerText=this.description,this.#t.appendChild(t)}connectedCallback(){this.type=this.type,this.title=this.title,this.closable=this.closable,this.closeText=this.closeText,this.effect=this.effect,this.center=this.center,this.#r(),this.#n(),this.#l()}}customElements.get("ea-alert")||customElements.define("ea-alert",EaAlert);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-alert_wrap {\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: 4px;\n  padding: 8px 16px;\n  margin: 20px 0 0;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  opacity: 1;\n  transition: opacity 0.2s;\n}\n.ea-alert_wrap .ea-alert_content {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ea-alert_wrap .ea-alert_content .ea-alert_title {\n  display: flex;\n  align-items: center;\n}\n.ea-alert_wrap .ea-alert_content .ea-alert_title i {\n  margin-right: 0.5rem;\n}\n.ea-alert_wrap .ea-alert_content .ea-alert_close-icon {\n  color: #c0c4cc;\n  cursor: pointer;\n}\n.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_title,\n.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_close-icon {\n  margin-left: auto;\n}\n.ea-alert_wrap .ea-alert_description {\n  width: 100%;\n  margin: 5px 0 0;\n  font-size: 12px;\n}\n.ea-alert_wrap.ea-alert--success {\n  background-color: #f0f9eb;\n  color: #67c23a;\n}\n.ea-alert_wrap.ea-alert--success.ea-alert--dark {\n  color: #fff;\n  background-color: #67c23a;\n}\n.ea-alert_wrap.ea-alert--success.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n.ea-alert_wrap.ea-alert--info {\n  background-color: #f4f4f5;\n  color: #909399;\n}\n.ea-alert_wrap.ea-alert--info.ea-alert--dark {\n  color: #fff;\n  background-color: #909399;\n}\n.ea-alert_wrap.ea-alert--info.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n.ea-alert_wrap.ea-alert--warning {\n  background-color: #fdf6ec;\n  color: #e6a23c;\n}\n.ea-alert_wrap.ea-alert--warning.ea-alert--dark {\n  color: #fff;\n  background-color: #e6a23c;\n}\n.ea-alert_wrap.ea-alert--warning.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n.ea-alert_wrap.ea-alert--error {\n  background-color: #fef0f0;\n  color: #f56c6c;\n}\n.ea-alert_wrap.ea-alert--error.ea-alert--dark {\n  color: #fff;\n  background-color: #f56c6c;\n}\n.ea-alert_wrap.ea-alert--error.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n";

package/components/ea-aside/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-aside_wrap {\n  height: 100%;\n  overflow: auto;\n}\n";export class EaAside extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <aside class="ea-aside_wrap" part="container">\n                <slot></slot>\n            </aside>\n        ',this.#e=e.querySelector(".ea-aside_wrap"),this.build(e,stylesheet)}get width(){return this.getAttrNumber("width")||200}set width(e){this.setAttribute("width",e),this.#e.style.width=`${e}px`}connectedCallback(){this.width=this.width}}customElements.get("ea-aside")||customElements.define("ea-aside",EaAside);

package/components/ea-avatar/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{errorAvatar}from"./src/assets/errorAvatar.js";import{iconAvatar,textAvatar}from"./src/assets/iconAndTextAvatar.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaAvatar extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-avatar_wrap" part=\'container\'>\n                <span class="ea-avatar" part="avatar">\n                    <slot></slot>\n                </span>\n            </div>\n        ',this.#t=t.querySelector(".ea-avatar"),this.build(t,stylesheet)}get size(){const t=this.getAttrNumber("size"),s=this.getAttribute("size");return 0!==t&&t?this.getAttrNumber("size"):["large","medium","small"].includes(s)?s:"normal"}set size(t){this.setAttribute("size",t),"number"==typeof t?(this.#t.style.width=`${t}px`,this.#t.style.height=`${t}px`,this.#t.style.lineHeight=`${t}px`):"string"==typeof t&&this.#t.classList.add(`ea-avatar--${t}`)}get shape(){const t=this.getAttribute("shape");return["circle","square"].includes(t)?t:"circle"}set shape(t){this.setAttribute("shape",t),this.#t.classList.add(`ea-avatar--${this.shape}`)}get src(){return this.getAttribute("src")}set src(t){if(!t)return;this.setAttribute("src",t);const s=new Image;s.src=t,s.onload=()=>{this.#t.innerHTML=`<img class="ea-avatar--img" src="${t}" alt="头像">`},s.onerror=t=>{this.#t.innerHTML=errorAvatar,this.dispatchEvent(new CustomEvent("error",{detail:{error:t}}))}}get icon(){return this.getAttribute("icon")||""}set icon(t){this.setAttribute("icon",t),this.#t.innerHTML=iconAvatar(t)}get fit(){return this.getAttribute("fit")||"cover"}set fit(t){this.setAttribute("fit",t),this.#t.classList.add(`ea-avatar-fill--${t}`)}connectedCallback(){this.size=this.size,this.shape=this.shape,this.src=this.src,this.src&&(this.fit=this.fit),!this.src&&this.icon&&(this.icon=this.icon),""===this.innerHTML||this.icon||this.src||(this.#t.innerHTML=textAvatar(this.innerHTML))}}customElements.get("ea-avatar")||customElements.define("ea-avatar",EaAvatar);

package/components/ea-avatar/src/assets/defaultAvatar.js

@@ -0,0 +1 @@
+export const defaultAvatar='\n    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <defs>\n            <clipPath id="a">\n                <path d="M0 40h90v45H0z" />\n            </clipPath>\n        </defs>\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <circle cx="50" cy="35" r="20" fill="#fff" />\n        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />\n    </svg>\n';

package/components/ea-avatar/src/assets/errorAvatar.js

@@ -0,0 +1 @@
+export const errorAvatar='\n    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <path fill="#fff" d="M15 20h70v60H15z" />\n        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />\n        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />\n        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />\n    </svg>\n';

package/components/ea-avatar/src/assets/iconAndTextAvatar.js

@@ -0,0 +1 @@
+const background='\n<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n    <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n</svg>\n';export const iconAvatar=a=>`\n        ${background}\n        <ea-icon class="fa ea-avatar--text" icon="${a}"></ea-icon>\n    `;export const textAvatar=a=>`\n        ${background}\n        <span class="ea-avatar--text">${a}</span>\n    `;

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-avatar_wrap .ea-avatar {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  color: #ffffff;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {\n  object-fit: fill;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {\n  object-fit: contain;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {\n  object-fit: cover;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {\n  object-fit: none;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {\n  object-fit: scale-down;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--normal {\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--large {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--medium {\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--small {\n  width: 28px;\n  height: 28px;\n  line-height: 28px;\n}\n.ea-avatar_wrap .ea-avatar .ea-avatar--text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--circle {\n  border-radius: 50%;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--square {\n  border-radius: 5px;\n}\n.ea-avatar_wrap .ea-avatar .ea-avatar--img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n";

package/components/ea-backtop/index.js

@@ -0,0 +1 @@
+import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaBacktop extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class=\"ea-backtop_wrap\" part='container' style='display: none'>\n                <slot></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-backtop_wrap"),this.build(t,stylesheet)}get target(){return this.getAttribute("target")||""}set target(t){this.setAttribute("target",t)}get right(){return this.getAttribute("right")||"40px"}set right(t){this.setAttribute("right",t),this.#t.style.right=t}get bottom(){return this.getAttribute("bottom")||"40px"}set bottom(t){this.setAttribute("bottom",t),this.#t.style.bottom=t}get icon(){return this.getAttribute("icon")||"icon-angle-up"}set icon(t){this.setAttribute("icon",t),this.#t.innerHTML=`\n            <ea-icon icon="${t}" part='icon'></ea-icon>\n        `}get visibilityHeight(){return this.getAttribute("visibility-height")||200}set visibilityHeight(t){this.setAttribute("visibility-height",t)}#e(t){let e=null,i=null;return"null"===t||""===t||null==t||"undefined"===t?(e=document,i=document.documentElement):(e=document.querySelector(t),i=document.querySelector(t)),{dom:e,scrollDom:i}}#i(t){t.scrollTop>this.visibilityHeight?(this.#t.style.display="flex",this.#t.ontransitionend=null,timeout((()=>{this.#t.style.opacity=1}),10)):(this.#t.style.opacity=0,this.#t.ontransitionend=()=>{this.#t.style.display="none"})}#s(){const{dom:t,scrollDom:e}=this.#e(this.target);this.#i(e),t.addEventListener("scroll",(()=>{this.#i(e)})),this.#t.addEventListener("click",(function(){let t=10,i=setInterval((()=>{t+=5,e.scrollTop-=t,e.scrollTop<=0&&(e.scrollTop=0,clearInterval(i),i=null,this.dispatchEvent(new CustomEvent("reachedTop",{})))}),12);this.dispatchEvent(new CustomEvent("backtop",{}))}))}connectedCallback(){this.target=this.target,this.right=this.right,this.bottom=this.bottom,this.visibilityHeight=this.visibilityHeight,this.icon=this.icon,this.#s()}}customElements.get("ea-backtop")||customElements.define("ea-backtop",EaBacktop);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-backtop_wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  right: 40px;\n  bottom: 40px;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 50%;\n  color: #409eff;\n  font-size: 14px;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);\n  opacity: 1;\n  z-index: 5;\n  transition: opacity 0.3s ease-in-out;\n}\n";

package/components/ea-badge/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaBadge extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n        <div class=\"ea-badge_wrap\" part='container'>\n            <slot></slot>\n            <sup class=\"ea-badge_content\" part='content'></sup>\n        </div>\n    ",this.#t=t.querySelector(".ea-badge_wrap"),this.#e=t.querySelector(".ea-badge_content"),this.build(t,stylesheet)}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t),this.#e.innerHTML=t}get type(){return this.getAttribute("type")||"normal"}set type(t){this.setAttribute("type",t),this.#e.classList.add(t)}get max(){return this.getAttrNumber("max")||1/0}set max(t){t!==1/0&&(t=parseInt(t),this.setAttribute("max",t),this.value>t&&(this.value=t+"+"))}get isDot(){return this.getAttrBoolean("is-dot")||!1}set isDot(t){this.toggleAttr("is-dot",t),this.#e.innerText=t?"":this.value,this.#e.classList.toggle("dot",t)}connectedCallback(){this.value=this.value,this.type=this.type,this.max=this.max,this.isDot=this.isDot}}customElements.get("ea-badge")||customElements.define("ea-badge",EaBadge);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-badge_wrap {\n  position: relative;\n  vertical-align: middle;\n  display: inline-block;\n}\n.ea-badge_wrap .ea-badge_content {\n  display: inline-block;\n  padding: 0 0.375rem;\n  border-radius: 0.625rem;\n  border: 1px solid #fff;\n  height: 1.125rem;\n  line-height: 1.125rem;\n  position: absolute;\n  right: 0.625rem;\n  top: 0;\n  transform: translate(100%, -50%);\n  color: #fff;\n  font-size: 0.75rem;\n  text-align: center;\n  white-space: nowrap;\n  background-color: #f56c6c;\n}\n.ea-badge_wrap .ea-badge_content.primary {\n  background-color: #409eff;\n}\n.ea-badge_wrap .ea-badge_content.success {\n  background-color: #67c23a;\n}\n.ea-badge_wrap .ea-badge_content.warning {\n  background-color: #e6a23c;\n}\n.ea-badge_wrap .ea-badge_content.info {\n  background-color: #909399;\n}\n.ea-badge_wrap .ea-badge_content.dot {\n  right: 0.3125rem;\n  padding: 0;\n  border-radius: 50%;\n  width: 0.5rem;\n  height: 0.5rem;\n}\n";

package/components/ea-breadcrumb/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-breadcrumb-item/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{createElement}from"../../utils/createElement.js";export class EaBreadcrumb extends Base{constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class=\"ea-breadcrumb_wrap\" part='container'>\n                <slot></slot>\n            </div>\n        ",this.build(t,stylesheet)}get separator(){return this.getAttribute("separator")||"/"}set separator(t){this.setAttribute("separator",t)}get separatorClass(){return this.getAttribute("separator-class")||""}set separatorClass(t){this.setAttribute("separator-class",t)}get separatorColor(){return this.getAttribute("separator-color")||"#c0c4cc"}set separatorColor(t){this.setAttribute("separator-color",t)}#t(){const t=this.querySelectorAll("ea-breadcrumb-item");t.forEach(((e,r)=>{if(r<t.length-1){const t=createElement("ea-icon");t.color=this.separatorColor,this.separatorClass?t.icon=this.separatorClass:(t.style.margin="0 10px",t.innerText=this.separator),e.appendChild(t)}}))}connectedCallback(){this.separator=this.separator,this.separatorClass=this.separatorClass,this.separatorColor=this.separatorColor,this.#t()}}customElements.get("ea-breadcrumb")||customElements.define("ea-breadcrumb",EaBreadcrumb);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-breadcrumb_wrap {\n  display: flex;\n}\n.ea-breadcrumb_wrap .separator {\n  margin: 0 10px;\n}\n";

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

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/style.js";export class EaBreadcrumbItem extends Base{constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <span class=\"ea-breadcrumb-item_wrap\" part='container'>\n                <slot></slot>\n            </span>\n        ",this.build(e,stylesheet)}}customElements.get("ea-breadcrumb-item")||customElements.define("ea-breadcrumb-item",EaBreadcrumbItem);

package/components/ea-breadcrumb-item/src/style/style.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-breadcrumb-item_wrap {\n  font-size: 14px;\n  color: #606266;\n  line-height: 1;\n}\n.ea-breadcrumb-item_wrap ::slotted(a) {\n  text-decoration: none;\n  font-weight: 600;\n  color: #303133;\n}\n";

package/components/ea-button/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{ButtonComm}from"./src/components/ButtonComm.js";import{HrefComm}from"./src/components/HrefComm.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaButton extends Base{#t="button";#e;constructor(){super();const t=this.attachShadow({mode:"open"});this.getAttribute("href")?(t.innerHTML=HrefComm,this.#t="a"):(t.innerHTML=ButtonComm,this.#t="button"),this.#e=t.querySelector(".ea-button"),this.build(t,stylesheet)}get BUTTON_STYLE(){return["plain","round"]}get BUTTON_TYPE(){return["normal","primary","success","warning","danger","text"]}get BUTTON_SIZE(){return["medium","small","mini"]}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.toggleAttr("disabled",t),this.#e.classList.toggle("disabled",t)}get plain(){return this.getAttrBoolean("plain")}set plain(t){this.toggleAttr("plain",t),this.#e.classList.toggle("plain",t)}get round(){return this.getAttrBoolean("round")}set round(t){this.toggleAttr("round",t),this.#e.classList.toggle("round",t)}get type(){const t=this.getAttribute("type");return this.BUTTON_TYPE.includes(t)?t:"normal"}set type(t){this.setAttribute("type",t),this.#e.classList.add(t)}get size(){const t=this.getAttribute("size");return this.BUTTON_SIZE.includes(t)?t:"medium"}set size(t){this.toggleAttr("size",t),this.#e.classList.add(t)}get loading(){return this.getAttrBoolean("loading")}set loading(t){if(this.toggleAttr("loading",t),this.disabled=t,t){const t=document.createElement("ea-icon");t.id="ea-loading-icon",t.icon="icon-spin6 animate-spin",this.#e.insertBefore(t,this.#e.firstChild)}else{const t=this.#e?.querySelectorAll("#ea-loading-icon");t?.length>0&&t?.forEach((t=>t.remove()))}}get icon(){return this.getAttribute("icon")||""}set icon(t){if(this.setAttribute("icon",t),t&&!this.#e.querySelector("ea-icon")){const e=document.createElement("ea-icon");e.icon=t,e.part="icon",this.#e.insertBefore(e,this.#e.firstChild)}}get href(){return this.getAttribute("href")||""}set href(t){"button"!==this.#t&&(this.setAttribute("href",t),this.#e.setAttribute("href",t))}connectedCallback(){this.plain=this.plain,this.round=this.round,this.type=this.type,this.size=this.size,this.icon=this.icon,this.disabled=this.disabled,this.href=this.href,this.loading&&(this.loading=this.loading)}}window.customElements.get("ea-button")||window.customElements.define("ea-button",EaButton);

package/components/ea-button/src/components/ButtonComm.js

@@ -0,0 +1 @@
+export const ButtonComm='\n<button class="ea-button" part="container">\n    <slot></slot>\n</button>\n';

package/components/ea-button/src/components/HrefComm.js

@@ -0,0 +1 @@
+export const HrefComm='\n<a class="ea-button" part="container">\n    <slot></slot>\n</a>\n';

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

@@ -0,0 +1 @@
+export const stylesheet="\n:host {\n  --border-radius: 6px;\n}\n\n.ea-button {\n  box-sizing: border-box;\n  padding: 0.5rem;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1.25;\n  font-weight: 500;\n  transition: background-color 0.1s, color 0.1s;\n  text-decoration: none;\n  will-change: width;\n}\n.ea-button.normal {\n  border: 1px solid #dcdfe6;\n  color: #606266;\n  background-color: transparent;\n}\n.ea-button.normal.disabled {\n  background-color: rgba(64, 64, 64, 0) !important;\n  border-color: white !important;\n  color: white !important;\n  pointer-events: none;\n  border-color: #ebedf1 !important;\n  color: #babcbe !important;\n}\n.ea-button.normal.plain {\n  background-color: rgba(92, 92, 92, 0);\n  border-color: white;\n  color: transparent;\n  background-color: transparent;\n  color: #606266;\n  border-color: #dcdfe6;\n}\n.ea-button.normal.plain:hover {\n  background-color: transparent;\n}\n.ea-button.normal:hover {\n  border-color: rgba(160, 207, 255, 0.4);\n  color: #3a9bff;\n  background-color: rgba(160, 207, 255, 0.05);\n}\n.ea-button.normal:active {\n  background-color: rgba(7, 130, 255, 0.05);\n}\n.ea-button.primary {\n  border: 1px solid #409eff;\n  color: #fff;\n  background-color: #409eff;\n}\n.ea-button.primary.disabled {\n  background-color: #c0dfff !important;\n  border-color: #c0dfff !important;\n  color: white !important;\n  pointer-events: none;\n}\n.ea-button.primary.plain {\n  background-color: #f8fbff;\n  border-color: #c0dfff;\n  color: #409eff;\n}\n.ea-button.primary:hover {\n  border-color: #73b8ff;\n  color: white;\n  background-color: #73b8ff;\n}\n.ea-button.primary:active {\n  background-color: #006bd9;\n}\n.ea-button.success {\n  border: 1px solid #67c23a;\n  color: #fff;\n  background-color: #67c23a;\n}\n.ea-button.success.disabled {\n  background-color: #b2e19b !important;\n  border-color: #b2e19b !important;\n  color: white !important;\n  pointer-events: none;\n}\n.ea-button.success.plain {\n  background-color: #d3eec6;\n  border-color: #b2e19b;\n  color: #67c23a;\n}\n.ea-button.success:hover {\n  border-color: #85cf60;\n  color: white;\n  background-color: #85cf60;\n}\n.ea-button.success:active {\n  background-color: #3d7323;\n}\n.ea-button.info {\n  border: 1px solid #909399;\n  color: #fff;\n  background-color: #909399;\n}\n.ea-button.info.disabled {\n  background-color: #d2d4d6 !important;\n  border-color: #d2d4d6 !important;\n  color: white !important;\n  pointer-events: none;\n}\n.ea-button.info.plain {\n  background-color: #f0f0f1;\n  border-color: #d2d4d6;\n  color: #909399;\n}\n.ea-button.info:hover {\n  border-color: #abadb1;\n  color: white;\n  background-color: #abadb1;\n}\n.ea-button.info:active {\n  background-color: #5d6066;\n}\n.ea-button.warning {\n  border: 1px solid #e6a23c;\n  color: #fff;\n  background-color: #e6a23c;\n}\n.ea-button.warning.disabled {\n  background-color: #f4d8ad !important;\n  border-color: #f4d8ad !important;\n  color: white !important;\n  pointer-events: none;\n}\n.ea-button.warning.plain {\n  background-color: #fbf0df;\n  border-color: #f4d8ad;\n  color: #e6a23c;\n}\n.ea-button.warning:hover {\n  border-color: #ecb869;\n  color: white;\n  background-color: #ecb869;\n}\n.ea-button.warning:active {\n  background-color: #a76d15;\n}\n.ea-button.danger {\n  border: 1px solid #f56c6c;\n  color: #fff;\n  background-color: #f56c6c;\n}\n.ea-button.danger.disabled {\n  background-color: #fde3e3 !important;\n  border-color: #fde3e3 !important;\n  color: white !important;\n  pointer-events: none;\n}\n.ea-button.danger.plain {\n  background-color: white;\n  border-color: #fde3e3;\n  color: #f56c6c;\n  background-color: #fde8e8;\n}\n.ea-button.danger:hover {\n  border-color: #f89c9c;\n  color: white;\n  background-color: #f89c9c;\n}\n.ea-button.danger:active {\n  background-color: #eb1010;\n}\n.ea-button.text {\n  border: 1px solid transparent;\n  color: #409eff;\n  background-color: transparent;\n}\n.ea-button.text.disabled {\n  background-color: rgba(64, 64, 64, 0) !important;\n  border-color: rgba(64, 64, 64, 0) !important;\n  color: white !important;\n  pointer-events: none;\n  color: #c0c4cc !important;\n}\n.ea-button.text.plain {\n  background-color: rgba(92, 92, 92, 0);\n  border-color: rgba(64, 64, 64, 0);\n  color: transparent;\n}\n.ea-button.text:hover {\n  border-color: rgba(26, 26, 26, 0);\n  color: #73b8ff;\n  background-color: rgba(26, 26, 26, 0);\n}\n.ea-button.text:active {\n  background-color: rgba(0, 0, 0, 0);\n}\n.ea-button.round {\n  border-radius: 50%;\n}\n.ea-button.medium {\n  font-size: 14px;\n}\n.ea-button.small {\n  font-size: 12px;\n}\n.ea-button.mini {\n  font-size: 10px;\n}\n";

package/components/ea-button-group/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaButtonGroup extends Base{constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n      <div class="ea-button-group">\n        <slot></slot>\n      </div>\n    ',this.build(t,stylesheet)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.toggleAttr("disabled",t),Array.from(this.children).forEach((e=>{e.disabled=t}))}connectedCallback(){this.disabled=this.disabled}}window.customElements.get("ea-button-group")||window.customElements.define("ea-button-group",EaButtonGroup);

package/components/ea-button-group/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-button-group {\n  display: flex;\n  align-items: center;\n}\n.ea-button-group ::slotted(ea-button) {\n  --border-radius: 0;\n}\n.ea-button-group ::slotted(ea-button:not([type=normal])) {\n  border-right: 1px solid rgba(255, 255, 255, 0.3);\n}\n.ea-button-group ::slotted(ea-button:first-of-type) {\n  --border-radius: 4px 0 0 4px;\n}\n.ea-button-group ::slotted(ea-button:last-of-type) {\n  --border-radius: 0 4px 4px 0;\n}\n";

package/components/ea-calendar/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{createElement,createSlotElement}from"../../utils/createElement.js";import"../ea-button-group/index.js";import"../ea-button/index.js";import{createChangerElement}from"./src/utils/createChangerElement.js";import{createThead}from"./src/utils/createThead.js";import{getToday,getUserToday}from"./src/utils/getDate.js";import{getUserWeekStart}from"./src/utils/getUserWeekStart.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCalendar extends Base{#e;#t;#a;#n;#r;#s;#d;#h;#l;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-calendar_wrap' part='container'>\n                <div class='ea-calendar-header_wrap' part='header-wrap'>\n                    <span class='ea-calendar-header_content' part='header-content'></span>\n                    <ea-button-group class='ea-calendar-header_changer' part='header-changer'>\n                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-lastMonth' part='header-changer-lastMonth' size=\"small\">上个月</ea-button>\n                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-today' part='header-changer-today' size=\"small\">今天</ea-button>\n                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-nextMonth' part='header-changer-nextMonth' size=\"small\">下个月</ea-button>\n                    </ea-button-group>\n                </div>\n                <div class='ea-calendar_calendar-wrap' part='calendar-wrap'>\n                    <table class='ea-calendar_table' part='table'>\n                        <thead class='ea-calendar_table-head' part='table-head'></thead>\n                        <tbody class='ea-calendar_table-body' part='table-body'></tbody>\n                    </table>\n                </div>\n            </div>\n        ",this.#e=this.shadowRoot.querySelector(".ea-calendar_wrap"),this.#a=e.querySelector(".ea-calendar-header_content"),this.#t=e.querySelector(".ea-calendar-header_wrap"),this.#n=e.querySelector(".ea-calendar-header_changer"),this.#r=e.querySelector(".ea-calendar-header_changer-lastMonth"),this.#s=e.querySelector(".ea-calendar-header_changer-today"),this.#d=e.querySelector(".ea-calendar-header_changer-nextMonth"),this.#h=e.querySelector(".ea-calendar_table-head"),this.#l=e.querySelector(".ea-calendar_table-body"),this.build(e,stylesheet)}get weekStart(){return this.getAttribute("week-start")||"一"}set weekStart(e){this.setAttribute("week-start",e),this.#h.innerHTML=createThead(getUserWeekStart(this.week,e)).innerHTML}get date(){new Date;return this.getAttribute("date")||getToday()}set date(e){this.setAttribute("date",e),this.#a.innerHTML=e=isNaN(new Date(e))?getToday():getUserToday(e),this.#i(this.#l,e,this.weekStart)}get size(){const e=this.getAttribute("size");return["mini"].includes(e)?e:"medium"}set size(e){if(this.setAttribute("size",e),this.#e.classList.add(e),"mini"===e){const e=createElement("span","prev-btn");e.innerText="<";const t=createElement("span","next-btn");t.innerText=">",this.#r=e,this.#d=t,this.#t.insertBefore(e,this.#t.firstChild),this.#t.appendChild(t)}}get week(){return["日","一","二","三","四","五","六"]}#c(e){e.addEventListener("click",(t=>{this.#l.querySelectorAll("td").forEach((e=>{e.classList.remove("is-selected")})),e.classList.contains("is-selected")?e.classList.remove("is-selected"):e.classList.add("is-selected");const a=new Date(this.date);this.dispatchEvent(new CustomEvent("select",{detail:{year:a.getFullYear(),month:a.getMonth()+1,date:Number(e.innerText),day:this.week[Number(e.innerText)%7]}}))}))}#o(e){const t=new Date(this.date);t.setMonth(t.getMonth()+("next"===e?1:-1)),this.date=`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`}#i(e,t,a="一"){t=isNaN(new Date(t))?new Date:new Date(t),e.innerHTML="";const n=new Date(t),r=n.getMonth()+1,s=new Date(t);s.setDate(1);const d=new Date(t);d.setMonth(r),d.setDate(0);const h=new Date(t);h.setMonth(r),h.setDate(1);const l=getUserWeekStart(this.week,a);for(let t=0;t<6;t++){const t=createElement("tr");for(let e=0;e<7;e++){const{length:a}=t.children,h=createElement("td"),i=createElement("span"),c=s.getDay(),o=new Date;if(l[a]===this.week[c]&&r===s.getMonth()+1)i.innerText=s.getDate(),s.setDate(s.getDate()+1),this.#c(h);else if(r==s.getMonth())i.innerText=s.getDate(),s.setDate(s.getDate()+1),h.classList.add("is-disabled");else{const t=e-c+2,n=l.findIndex(((e,t)=>{if("一"===e)return t}));d.setMonth(r-1),d.setDate(t>0?c+a-n:t),i.innerText=d.getDate(),h.classList.add("is-disabled")}new Date(this.date);s.getFullYear()===o.getFullYear()&&s.getMonth()===o.getMonth()&&s.getDate()===o.getDate()+1&&h.classList.add("is-today"),s.getFullYear()===n.getFullYear()&&s.getMonth()===n.getMonth()&&s.getDate()===n.getDate()+1&&h.classList.add("is-selected"),h.appendChild(i),t.appendChild(h)}e.appendChild(t)}}connectedCallback(){this.weekStart=this.weekStart,this.date=this.date,this.size=this.size,this.#r.addEventListener("click",(()=>{this.#o("last")})),this.#s.addEventListener("click",(()=>{this.date=`${(new Date).getFullYear()}-${(new Date).getMonth()+1}-${(new Date).getDate()}`})),this.#d.addEventListener("click",(()=>{this.#o("next")}))}}customElements.get("ea-calendar")||customElements.define("ea-calendar",EaCalendar);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-calendar_wrap {\n  padding: 12px 20px 35px;\n}\n.ea-calendar_wrap .ea-calendar-header_wrap {\n  border-bottom: 1px solid #ebeef5;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 0.5rem;\n}\n.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer {\n  border: 1px solid #ebeef5;\n  border-left: 0px none transparent;\n}\n.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer:first-child {\n  border-left: 1px solid #ebeef5;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table th {\n  font-weight: 400;\n  color: #606266;\n  padding: 12px 0;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td {\n  border-right: 1px solid #ebeef5;\n  border-bottom: 1px solid #ebeef5;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-selected {\n  color: #1989fa;\n  background-color: #f2f8fe;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-today {\n  color: #1989fa;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-disabled {\n  pointer-events: none;\n  color: #c0c4cc;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span {\n  display: block;\n  box-sizing: border-box;\n  height: 85px;\n  padding: 8px;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span .calendar-description {\n  margin-top: auto;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr:first-child td {\n  border-top: 1px solid #ebeef5;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr td:first-child {\n  border-left: 1px solid #ebeef5;\n  border-top: 1px solid #ebeef5;\n}\n.ea-calendar_wrap.mini {\n  font-size: 10px;\n  text-align: center;\n}\n.ea-calendar_wrap.mini .ea-calendar-header_wrap {\n  justify-content: space-around;\n}\n.ea-calendar_wrap.mini .ea-calendar-header_wrap .ea-calendar-header_changer {\n  display: none;\n}\n.ea-calendar_wrap.mini .ea-calendar_calendar-wrap .ea-calendar_table td span {\n  height: 20px;\n  padding: 4px;\n}\n";

package/components/ea-calendar/src/utils/createChangerElement.js

@@ -0,0 +1 @@
+import{createElement}from"../../../../utils/createElement.js";export const createChangerElement=(e,a)=>{const r=createElement("ea-button",`ea-calendar-header_sg-changer ea-calendar-header_changer-${a}`);return r.innerText=e,r.size="small",r};

package/components/ea-calendar/src/utils/createThead.js

@@ -0,0 +1 @@
+import{createElement}from"../../../../utils/createElement.js";export const createThead=(e=["一","二","三","四","五","六","日"])=>{const t=createElement("tr"),r=e.map((e=>{const t=createElement("th");return t.innerText=e,t}));return t.append(...r),t};

package/components/ea-calendar/src/utils/getDate.js

@@ -0,0 +1 @@
+export function getToday(){const t=new Date;return`${t.getFullYear()}-${t.getMonth()+1}`}export function getUserToday(t){const e=new Date(t);return`${e.getFullYear()}-${e.getMonth()+1}`}

package/components/ea-calendar/src/utils/getUserWeekStart.js

@@ -0,0 +1 @@
+export function getUserWeekStart(e,n){if(!e.includes(n))return e;const t=e.findIndex(((e,t)=>{if(e===n)return t}));return 0===t||-1===t?e:e.slice(t).concat(e.slice(0,t))}

package/components/ea-card/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";class EaCard extends Base{#s;constructor(){super();const s=this.attachShadow({mode:"open"});s.innerHTML='\n      <div class="ea-card_wrap" part="container">\n        <div class="ea-card_header" part="header">\n          <slot name="header"></slot>\n        </div>\n        <div class="ea-card_content" part="content">\n          <slot></slot>\n        </div>\n      </div>\n    ',this.#s=s.querySelector(".ea-card_wrap"),this.build(s,stylesheet)}get shadow(){return this.getAttribute("shadow")||"always"}set shadow(s){this.setAttribute("shadow",s),this.#s.classList.add(`is-${s}-shadow`)}connectedCallback(){this.shadow=this.shadow}}customElements.get("ea-card")||customElements.define("ea-card",EaCard);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-card_wrap {\n  border-radius: 4px;\n  border: 1px solid #ebeef5;\n  background-color: #fff;\n  overflow: hidden;\n  color: #303133;\n  transition: box-shadow 0.3s;\n}\n.ea-card_wrap.is-always-shadow, .ea-card_wrap.is-hover-shadow:hover {\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.ea-card_wrap.is-never-shadow {\n  box-shadow: none;\n}\n.ea-card_wrap .ea-card_content {\n  padding: 20px;\n}\n";

package/components/ea-carousel/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-carousel-item/index.js";import{createElement}from"../../utils/createElement.js";import{handleIndexOverflow}from"./src/utils/handleIndexOverflow.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCarousel extends Base{#t;#e;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-carousel_wrap' part='container'>\n                <div class='ea-carousel_content-container' part='content-wrap'>\n                    <slot></slot>\n                </div>\n                <div class='ea-carousel-indicator_wrap' part='indicator-wrap'></div>\n            </div>\n        ",this.#t=t.querySelector(".ea-carousel_wrap"),this.#e=t.querySelector(".ea-carousel_content-container"),this.#i=t.querySelector(".ea-carousel-indicator_wrap"),this.build(t,stylesheet)}get direction(){const t=this.getAttribute("direction");return["horizontal","vertical"].includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t),this.#t.classList.add(`ea-carousel--${t}`)}get index(){return this.getAttrNumber("index")||0}set index(t){const e=this.querySelectorAll("ea-carousel-item").length-1,i=handleIndexOverflow(e,t);this.setAttribute("index",i);const r=this.#t.getBoundingClientRect(),s="horizontal"===this.direction?"X":"Y",a="horizontal"===this.direction?r.width:r.height;this.#e.style.transform=`translate${s}(-${i*a}px)`;try{const t=this.#i.querySelectorAll(".ea-carousel-item_indicator");t.forEach((t=>{t.classList.remove("ea-carousel-item_indicator--active")})),t[i].classList.add("ea-carousel-item_indicator--active")}catch(t){}}get trigger(){const t=this.getAttribute("trigger")||"hover";return["click","hover"].includes(t)?t:"click"}set trigger(t){this.setAttribute("trigger",t)}get interval(){return this.getAttrNumber("interval")||3}set interval(t){this.setAttribute("interval",t)}get arrow(){const t=this.getAttribute("arrow")||"hover";return["always","hover","never"].includes(t)?t:"hover"}set arrow(t){this.setAttribute("arrow",t)}#r(){const t=this.querySelectorAll("ea-carousel-item").length;for(let e=0;e<t;e++){const t=createElement("div","ea-carousel-item_indicator");this.#i.appendChild(t)}const e=this.#i.querySelectorAll(".ea-carousel-item_indicator");e[0].classList.add("ea-carousel-item_indicator--active"),e.forEach(((t,i)=>{t.addEventListener("click"===this.trigger?"click":"mouseenter",(()=>{this.index=i,e.forEach((t=>{t.classList.remove("ea-carousel-item_active")})),t.classList.add("ea-carousel-item_active")}))}))}#s(){let t=setInterval((()=>{this.index=this.index+1}),1e3*this.interval);this.addEventListener("mouseenter",(()=>{clearInterval(t),t=null})),this.addEventListener("mouseleave",(()=>{t=setInterval((()=>{this.index=this.index+1}),1e3*this.interval)}))}#a(t){let e=!1;const i=createElement("div",`ea-carousel-item_arrow ea-carousel-item_arrow--${t}`);switch(i.innerHTML="left"===t?"&lt;":"&gt;",this.arrow){case"always":this.#t.classList.add("always-show-arrow");break;case"hover":this.#t.classList.add("hover-trigger")}return i.addEventListener("click",(()=>{e||(this.index="left"===t?--this.index:++this.index)})),this.#e.addEventListener("transitionstart",(()=>{e=!0})),this.#e.addEventListener("transitionend",(()=>{e=!1})),i}connectedCallback(){if(this.direction=this.direction,this.trigger=this.trigger,this.interval=this.interval,this.arrow=this.arrow,this.index=this.index,this.#r(),this.#s(),"never"!==this.arrow||"vertical"!==this.direction){const t=this.#a("left"),e=this.#a("right");this.#t.appendChild(t),this.#t.appendChild(e)}window.addEventListener("resize",(()=>{this.index=this.index}))}}customElements.get("ea-carousel")||customElements.define("ea-carousel",EaCarousel);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-carousel_wrap {\n  position: relative;\n  overflow: hidden;\n}\n.ea-carousel_wrap .ea-carousel_content-container {\n  position: relative;\n  display: flex;\n  color: #fff;\n  text-align: center;\n  height: 300px;\n  transition: transform 0.5s;\n}\n.ea-carousel_wrap .ea-carousel_content-container ::slotted(ea-carousel-item) {\n  flex: 0 0 100%;\n  width: 100%;\n}\n.ea-carousel_wrap .ea-carousel-item_arrow {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  line-height: 1.5;\n  font-weight: 800;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgba(31, 45, 61, 0.11);\n  color: #fff;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;\n}\n.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--left {\n  left: 0;\n  transform: translate(-100%, -50%);\n}\n.ea-carousel_wrap .ea-carousel-item_arrow.ea-carousel-item_arrow--right {\n  right: 0;\n  transform: translate(100%, -50%);\n}\n.ea-carousel_wrap .ea-carousel-item_arrow:hover {\n  background-color: rgba(31, 45, 61, 0.3);\n}\n.ea-carousel_wrap .ea-carousel-indicator_wrap {\n  position: absolute;\n  bottom: 1rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background-color: rgba(255, 255, 255, 0.4);\n  margin: 0.25rem;\n  transition: background-color 0.3s;\n}\n.ea-carousel_wrap .ea-carousel-indicator_wrap .ea-carousel-item_indicator.ea-carousel-item_indicator--active {\n  background-color: #fff;\n}\n.ea-carousel_wrap ::slotted(ea-carousel-item:nth-child(odd)) {\n  --odd-bgc: #d3dce6;\n}\n.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--left {\n  left: 0;\n  transform: translate(50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.hover-trigger:hover .ea-carousel-item_arrow.ea-carousel-item_arrow--right {\n  right: 0;\n  transform: translate(-50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--left {\n  left: 0;\n  transform: translate(50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.always-show-arrow .ea-carousel-item_arrow.ea-carousel-item_arrow--right {\n  right: 0;\n  transform: translate(-50%, -50%);\n  opacity: 1;\n}\n.ea-carousel_wrap.ea-carousel--horizontal .ea-carousel_content-container {\n  flex-direction: row;\n}\n.ea-carousel_wrap.ea-carousel--vertical .ea-carousel_content-container {\n  flex-direction: column;\n}\n.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-item_arrow {\n  display: none;\n}\n.ea-carousel_wrap.ea-carousel--vertical .ea-carousel-indicator_wrap {\n  left: 100%;\n  bottom: 50%;\n  flex-direction: column;\n  transform: translate(-200%, 50%);\n}\n";

package/components/ea-carousel/src/utils/handleIndexOverflow.js

@@ -0,0 +1 @@
+export function handleIndexOverflow(e,n){return n<0?n=e:n>e&&(n=0),n}

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

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCarouselItem extends Base{constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-carousel-item_wrap' part='container'>\n                <slot></slot>\n            </div>\n        ",this.build(e,stylesheet)}}customElements.get("ea-carousel-item")||customElements.define("ea-carousel-item",EaCarouselItem);

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

@@ -0,0 +1 @@
+export const stylesheet="\n:host {\n  --odd-bgc: #99a9bf;\n}\n\n.ea-carousel-item_wrap {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 0;\n  background-color: var(--odd-bgc);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ea-carousel-item_wrap ::slotted(img) {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n";

package/components/ea-checkbox/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckbox extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <label class="ea-checkbox_wrap" part="container">\n        <span class="ea-checkbox-input_wrap" part="input-container">\n          <span class="ea-checkbox-input_inner" part="input"></span>\n          <input type="checkbox" class="ea-checkbox-input_input">\n          </input>\n        </span>\n        <span class="ea-checkbox-label_desc" part="label-container">\n          <slot></slot>\n        </span>\n      </label>\n    ',this.#t=e.querySelector(".ea-checkbox_wrap"),this.#e=e.querySelector(".ea-checkbox-input_input"),this.build(e,stylesheet)}get checked(){return this.getAttrBoolean("checked")}set checked(e){this.#e.checked=e,this.#t.classList.toggle("checked",e),this.setAttribute("checked",e),this.#t.setAttribute("checked",e),this.#t.classList.toggle("checked",e),e&&this.#t.classList.remove("indeterminate")}get name(){return this.getAttribute("name")||""}set name(e){this.#e.setAttribute("name",e)}get value(){return this.getAttribute("value")}set value(e){this.#t.setAttribute("for",e),this.#e.setAttribute("id",e),this.#e.setAttribute("value",e)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.#e.disabled=e,this.#t.toggleAttribute("disabled",e),this.#t.classList.toggle("disabled",e)}get border(){return this.getAttrBoolean("border")}set border(e){this.#t.classList.toggle("border",e)}get indeterminate(){return this.getAttrBoolean("indeterminate")}set indeterminate(e){this.setAttribute("indeterminate",e),this.#t.classList.toggle("indeterminate",e),e&&(this.checked=!1,this.#t.classList.remove("checked"),this.setAttribute("indeterminate",!0))}init(){this.checked=this.checked,this.name=this.name,this.value=this.value,this.disabled=this.disabled,this.border=this.border,this.indeterminate=this.indeterminate,this.#e.addEventListener("change",(e=>{e.preventDefault(),this.checked=e.target.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value,name:this.name}}))}))}connectedCallback(){this.init()}}window.customElements.get("ea-checkbox")||window.customElements.define("ea-checkbox",EaCheckbox);

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

@@ -0,0 +1 @@
+export const stylesheet='\n:host {\n  --margin-right: 1rem;\n}\n\n.ea-checkbox_wrap {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  user-select: none;\n  margin-right: var(--margin-right);\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap {\n  line-height: 1;\n  margin-right: 0.5rem;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 0.8125rem;\n  height: 0.8125rem;\n  line-height: 0.8125;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  content: "";\n  position: absolute;\n  left: 52.5%;\n  top: 45%;\n  transform: translate(-50%, -50%) rotate(-135deg);\n  display: block;\n  width: 3px;\n  height: 7px;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_input {\n  display: none;\n}\n.ea-checkbox_wrap .ea-checkbox-label_desc {\n  line-height: 1;\n  transition: color 0.2s;\n}\n.ea-checkbox_wrap.checked .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap.checked .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  opacity: 1;\n  border-left: 2px solid white;\n  border-top: 2px solid white;\n}\n.ea-checkbox_wrap.checked .ea-checkbox-label_desc {\n  color: #409eff;\n}\n.ea-checkbox_wrap.disabled .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #eeeeee;\n  background-color: #eeeeee;\n}\n.ea-checkbox_wrap.disabled .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n  background-color: transparent;\n}\n.ea-checkbox_wrap.disabled .ea-checkbox-label_desc {\n  color: #c0c4cc;\n}\n.ea-checkbox_wrap.disabled[checked=true] .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n  background-color: #c0c4cc;\n}\n.ea-checkbox_wrap.indeterminate .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap.indeterminate .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  opacity: 1;\n  left: 50%;\n  top: 50%;\n  width: 80%;\n  height: 3px;\n  background-color: white;\n  transform: translate(-50%, -50%) rotate(0deg);\n}\n.ea-checkbox_wrap.indeterminate .ea-checkbox-label_desc {\n  color: #409eff;\n}\n.ea-checkbox_wrap.indeterminate[checked=true] .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n  border-color: #409eff;\n  background-color: #409eff;\n}\n.ea-checkbox_wrap.indeterminate[checked=true] .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n  width: 3px;\n  height: 7px;\n  left: 52.5%;\n  top: 45%;\n  transform: translate(-50%, -50%) rotate(-135deg);\n  opacity: 1;\n  border-left: 2px solid white;\n  border-top: 2px solid white;\n  background-color: transparent;\n}\n.ea-checkbox_wrap.indeterminate[checked=true] .ea-checkbox-label_desc {\n  color: #409eff;\n}\n';

package/components/ea-checkbox-group/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckboxGroup extends Base{constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-checkbox-group_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"ea-checkbox"}set name(e){this.querySelectorAll("ea-checkbox").forEach((t=>{t.setAttribute("name",e),t.name=e}))}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e);try{const t=e.split(",").map((e=>e.trimStart()));t.map((e=>{const t=this.querySelector(`ea-checkbox[name="${this.name}"][value="${e}"]`);t.setAttribute("checked","true"),t.checked="true"})),this.dispatchEvent(new CustomEvent("change",{detail:t}))}catch(e){}}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){document.querySelectorAll(`ea-checkbox[name="${this.name}"]`).forEach((t=>{t.disabled=e}))}#e(e){let t=[];Array.from(e).filter((e=>!!e.checked&&t.push(e.value))),this.value=t.join(",")}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.value=this.value,this.disabled=this.disabled;const e=this.querySelectorAll("ea-checkbox");e.forEach((t=>{t.addEventListener("change",(t=>{this.#e(e)}))})),this.#e(e)}}window.customElements.get("ea-checkbox-group")||window.customElements.define("ea-checkbox-group",EaCheckboxGroup);

package/components/ea-checkbox-group/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-checkbox-group {\n  display: flex;\n}\n.ea-checkbox-group ::slotted(ea-checkbox) {\n  margin-right: 1.5rem;\n}\n";

package/components/ea-collapse/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-collapse-item/index.js";export class EaCollapse extends Base{constructor(){super();this.attachShadow({mode:"open"}).innerHTML='\n            <div class="ea-collapse_wrap" part="container">\n                <slot></slot>\n            </div>\n        '}get active(){return this.getAttribute("active")||1}set active(e){this.setAttribute("active",e),setTimeout((()=>{this.#e(this.accordion,e)}),20)}get accordion(){return this.getAttrBoolean("accordion")||!1}set accordion(e){this.setAttribute("accordion",e),setTimeout((()=>{this.#e(e,this.active)}),20)}#e(e,t){const a=Array.from(this.querySelectorAll("ea-collapse-item"));let s=e?"":[];a.forEach((t=>{t.addEventListener("collapseItemStatusChange",(s=>{e&&a.forEach((e=>{e.isOpen=!1})),t.isOpen=!s.detail.isOpen,this.dispatchEvent(new CustomEvent("change",{detail:{name:t.name,isOpen:t.isOpen}}))}))})),e?(s=t.toString().trim()[0],a.forEach((e=>{e.isOpen=e.name===s}))):(s=t.split(",").map((e=>e.trim())).concat(),a.forEach((e=>{e.isOpen=s.includes(e.name)})))}connectedCallback(){this.accordion=this.accordion,this.active=this.active}}customElements.get("ea-collapse")||customElements.define("ea-collapse",EaCollapse);

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

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCollapseItem extends Base{#t;#e;#s;#i;#n;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-collapse-item_wrap" part="container">\n                <div class="ea-collapse-item_title" part="title-wrap">\n                    <span class="ea-collapse-item_title-content" part="title-content"></span>\n                    <span class="ea-collapse-item_title-icon" part="title-icon"></span>\n                </div>\n                <div class="ea-collapse-item_content" part="content-wrap">\n                    <slot></slot>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-collapse-item_wrap"),this.#e=t.querySelector(".ea-collapse-item_title"),this.#s=t.querySelector(".ea-collapse-item_title-content"),this.#i=t.querySelector(".ea-collapse-item_title-icon"),this.#n=t.querySelector(".ea-collapse-item_content"),this.build(t,stylesheet)}get title(){return this.getAttribute("title")}set title(t){this.setAttribute("title",t),this.#s.innerHTML=t}get name(){return this.getAttribute("name")}set name(t){this.setAttribute("name",t)}get isOpen(){return this.getAttrBoolean("is-open")||!1}set isOpen(t){if(t===this.isOpen)return;this.toggleAttr("is-open",t);const e=this.#n.scrollHeight;this.isOpen?(this.#n.style.height=`${e}px`,this.#n.style.paddingBottom="20px",this.#i.style.rotate="45deg"):(this.#n.style.height="0px",this.#n.style.paddingBottom="0px",this.#i.style.rotate="-45deg")}connectedCallback(){this.title=this.title,this.name=this.name,this.#e.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("collapseItemStatusChange",{detail:{name:this.name,isOpen:this.isOpen}}))}))}}customElements.get("ea-collapse-item")||customElements.define("ea-collapse-item",EaCollapseItem);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-collapse-item_wrap .ea-collapse-item_title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #ebeef5;\n  height: 48px;\n  line-height: 48px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #303133;\n  cursor: pointer;\n}\n.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {\n  width: 0.35rem;\n  height: 0.35rem;\n  margin-right: 1rem;\n  border: 3px solid #9ca0a5;\n  border-left-color: transparent;\n  border-top-color: transparent;\n  rotate: -45deg;\n  transition: rotate 0.3s;\n}\n.ea-collapse-item_wrap .ea-collapse-item_content {\n  will-change: height;\n  overflow: hidden;\n  height: 0;\n  padding-bottom: 0;\n  transition: height 0.3s, padding-bottom 0.3s;\n  font-size: 13px;\n  color: #303133;\n}\n";

package/components/ea-container/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-container_wrap {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n.ea-container_wrap.is-vertical {\n  flex-direction: column;\n}\n.ea-container_wrap ::slotted(ea-main) {\n  flex: 1;\n}\n";export class EaContainer extends Base{#e;get CONTAINER_TYPE(){return["ea-header","ea-main","ea-footer","ea-container","ea-aside"]}constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-container_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#e=e.querySelector(".ea-container_wrap"),this.build(e,stylesheet)}get direction(){return["horizontal","vertical"].includes(this.getAttribute("direction"))||"horizontal"}set direction(e){this.setAttribute("direction",e),this.#e.classList.toggle("is-vertical","horizontal"===e)}#t(e){const t=e.map((e=>e.tagName.toLowerCase()));e.forEach((e=>{this.CONTAINER_TYPE.includes(e.tagName.toLowerCase())||e.remove(),"ea-container"===e.tagName.toLowerCase()&&(e.style.flex="1")})),t.includes("ea-header")||t.includes("ea-footer")?this.direction="horizontal":this.direction=this.direction}connectedCallback(){const e=Array.from(this.children);this.#t(e)}}customElements.get("ea-container")||customElements.define("ea-container",EaContainer);

package/components/ea-date-picker/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-calendar/index.js";import"../ea-input/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{timeout}from"../../utils/timeout.js";export class EaDatePicker extends Base{#e;#t;#a;#i;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-date-picker_wrap' part='container'>\n                <div class='ea-date-picker_input-wrap' part='input-wrap'>\n                    <ea-input class=\"ea-date-picker_input\" part='input' prefix-icon=\"icon-calendar-times-o\" readonly></ea-input>\n                </div>\n                <div class='ea-date-picker_dropdown-wrap' part='dropdown-wrap'>\n                    <ea-calendar class=\"ea-date-picker_calendar\" size=\"mini\" part='calendar'></ea-calendar>\n                </div>\n            </div>\n        ",this.#e=e.querySelector(".ea-date-picker_wrap"),this.#t=e.querySelector(".ea-date-picker_dropdown-wrap"),this.#a=e.querySelector(".ea-date-picker_calendar"),this.#i=e.querySelector(".ea-date-picker_input"),this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"datePicker"}set name(e){this.setAttribute("name",e)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e,this.#t.style.width=e,this.style.display="inline-block",this.style.width=e}get value(){return this.getAttribute("value")||""}set value(e){if(isNaN(new Date(e))&&""!==e){const t=new Date(Date.now());e=`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`}this.setAttribute("value",e),this.#i.value=e}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),this.#i.placeholder=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.toggleAttr("disabled",e),this.#i.disabled=e}get align(){return this.getAttribute("align")||"left"}set align(e){this.setAttribute("align",e),this.#i.shadowRoot.querySelector("input").style.textAlign=e}#n(){this.#a.addEventListener("select",(e=>{const{year:t,month:a,date:i,day:n}=e.detail;this.value=`${t}-${a}-${i}`,this.#i.value=`${t}-${a}-${i}`,this.dispatchEvent(new CustomEvent("change",{detail:{fulllDate:`${t}-${a}-${i}`,year:t,month:a,date:i,week:n}}))}))}#s(){this.#i.addEventListener("focus",(()=>{this.#e.classList.add("is-open")})),window.addEventListener("click",(e=>{this.contains(e.target)?this.#i.shadowRoot.querySelector(".ea-input_inner").focus():this.#e.classList.remove("is-open")}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.width=this.width,this.value=this.value,this.placeholder=this.placeholder,this.disabled=this.disabled,this.align=this.align,this.#n(),this.#s(),timeout((()=>{this.#e.classList.add("with-transition")}),300)}}customElements.get("ea-date-picker")||customElements.define("ea-date-picker",EaDatePicker);

package/components/ea-date-picker/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-date-picker_wrap .ea-date-picker_input-wrap {\n  position: relative;\n}\n.ea-date-picker_wrap .ea-date-picker_dropdown-wrap {\n  position: absolute;\n  background-color: #fff;\n  transform-origin: top center;\n  transform: scaleY(0);\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n}\n.ea-date-picker_wrap.is-open .ea-date-picker_dropdown-wrap {\n  transform: scaleY(1);\n}\n.ea-date-picker_wrap.with-transition .ea-date-picker_dropdown-wrap {\n  transition: transform 0.3s;\n}\n";

package/components/ea-descriptions/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-descriptions-item/index.js";import{getThTemplate_direction}from"./src/components/getThTemplate_direction.js";import{getTdTemplate_direction}from"./src/components/getTdTemplate_direction.js";import{contentTemplate}from"./src/components/contentTemplate.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaDescriptions extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-descriptions_wrap" part="container">\n                <div class="ea-descriptions_header" part="header-wrap"></div>\n                <div class="ea-descriptions_body" part="body-wrap">\n                    <table class="ea-descriptions_table" part="table-wrap"></table>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-descriptions_table"),this.#e=t.querySelector(".ea-descriptions_header"),this.build(t,stylesheet)}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t),this.#e.innerHTML=t}get col(){return this.getAttrNumber("col")||3}set col(t){this.setAttribute("col",t)}get border(){return this.getAttrBoolean("border")}set border(t){this.toggleAttr("border",t)}get direction(){return this.getAttribute("direction")||"horizontal"}set direction(t){this.setAttribute("direction",t)}#i(t){const e=Number(t.length);for(let i=0;i<e;i+=3){let e=0;const r=document.createElement("tbody");switch(this.direction){case"horizontal":{const s=document.createElement("tr");for(let r=i;r<this.col+i;r++){const i=Number(t[r]?.getAttribute("span"))||1;if(e+i>this.col||!t[r])break;s.innerHTML+=contentTemplate(t[r],i,this.border)}r.appendChild(s);break}case"vertical":{const s=document.createElement("tr"),o=document.createElement("tr");for(let r=i;r<this.col+i;r++){const i=Number(t[r]?.getAttribute("span"))||1;if(e+i>this.col||!t[r])break;s.innerHTML+=getThTemplate_direction(t[r].getAttribute("label"),this.border),o.innerHTML+=getTdTemplate_direction(t[r].innerHTML,this.border,i)}r.appendChild(s),r.appendChild(o);break}}this.#t.appendChild(r)}t.forEach((t=>{t.remove()}))}connectedCallback(){this.title=this.title,this.col=this.col,this.border=this.border,this.direction=this.direction;const t=this.querySelectorAll("ea-descriptions-item");this.#i(t)}}customElements.get("ea-descriptions")||customElements.define("ea-descriptions",EaDescriptions);

package/components/ea-descriptions/src/components/contentTemplate.js

@@ -0,0 +1 @@
+import{getTdTemplate_border}from"./getTdTemplate_border.js";import{getThTemplate_normal}from"./getThTemplate_normal.js";export const contentTemplate=(e,t,r)=>{let l=e.getAttribute("label"),o=e.innerHTML;return l||(l=e.querySelector('[slot="label"]')?.innerHTML||""),r?getTdTemplate_border(l,o,t):getThTemplate_normal(l,o,t)};

package/components/ea-descriptions/src/components/getTdTemplate_border.js

@@ -0,0 +1 @@
+export const getTdTemplate_border=(e,t,s)=>`\n        <th class="ea-descriptions-item_label ea-descriptions-item_cell is-border" colspan="1">${e}</th>\n        <td class="ea-descriptions-item_content ea-descriptions-item_cell is-border" colspan="${s}">${t}</td>\n    `;

package/components/ea-descriptions/src/components/getTdTemplate_direction.js

@@ -0,0 +1 @@
+export const getTdTemplate_direction=(e,t,n)=>`\n        <td class="ea-descriptions-item_content ea-descriptions-item_cell ${t?"is-border":""}" colspan="${n}">\n            ${e}\n        </td>\n    `;

package/components/ea-descriptions/src/components/getThTemplate_direction.js

@@ -0,0 +1 @@
+export const getThTemplate_direction=(e,t)=>`\n        <th class="ea-descriptions-item_label ea-descriptions-item_cell ${t?"is-border":""}" colspan="1">\n            ${e}${t?"":":"}\n        </th>\n    `;

package/components/ea-descriptions/src/components/getThTemplate_normal.js

@@ -0,0 +1 @@
+export const getThTemplate_normal=(s,n,e)=>`\n        <td class="ea-descriptions-item" colspan="${e}">\n            <span class="ea-descriptions-item_label">${s}:</span>\n            <span class="ea-descriptions-item_content">${n}</span>\n        </td>\n    `;

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-descriptions_wrap {\n  font-size: 14px;\n}\n.ea-descriptions_wrap .ea-descriptions_header {\n  font-size: 1rem;\n  font-weight: 700;\n  margin-bottom: 20px;\n}\n.ea-descriptions_wrap .ea-descriptions_body table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ea-descriptions_wrap .ea-descriptions_body table th {\n  background-color: #fafafa;\n}\n.ea-descriptions_wrap .ea-descriptions_body table td {\n  vertical-align: baseline;\n}\n.ea-descriptions_wrap .ea-descriptions-item_label,\n.ea-descriptions_wrap .ea-descriptions-item_content {\n  font-weight: normal;\n  font-size: 14px;\n  vertical-align: middle;\n}\n.ea-descriptions_wrap .ea-descriptions-item_label.is-border,\n.ea-descriptions_wrap .ea-descriptions-item_content.is-border {\n  border: 1px solid #ebeef5;\n}\n.ea-descriptions_wrap .ea-descriptions-item_cell {\n  text-align: left;\n  padding: 12px 10px;\n}\n";

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

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

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

package/{icon → components/ea-icon}/config.json

@@ -1013,6 +1013,18 @@
       "css": "bluetooth-b",
       "code": 62100,
       "src": "fontawesome"
+    },
+    {
+      "uid": "598a5f2bcf3521d1615de8e1881ccd17",
+      "css": "clock",
+      "code": 59467,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "a027a2ce420dfd6b660212d5ac6a7cc9",
+      "css": "calendar-times-o",
+      "code": 62067,
+      "src": "fontawesome"
     }
   ]
 }

package/{icon → components/ea-icon}/css/fontello.css

@@ -129,6 +129,7 @@
 .icon-umbrella:before { content: '\e848'; } /* '' */
 .icon-flight:before { content: '\e849'; } /* '' */
 .icon-leaf:before { content: '\e84a'; } /* '' */
+.icon-clock:before { content: '\e84b'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-twitter:before { content: '\f099'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
@@ -217,6 +218,7 @@
 .icon-hourglass-2:before { content: '\f252'; } /* '' */
 .icon-hourglass-3:before { content: '\f253'; } /* '' */
 .icon-hourglass:before { content: '\f254'; } /* '' */
+.icon-calendar-times-o:before { content: '\f273'; } /* '' */
 .icon-map-signs:before { content: '\f277'; } /* '' */
 .icon-map:before { content: '\f279'; } /* '' */
 .icon-bluetooth-b:before { content: '\f294'; } /* '' */

package/{icon → components/ea-icon}/font/fontello.svg

@@ -156,6 +156,8 @@
 
 <glyph glyph-name="leaf" unicode="&#xe84a;" d="M714 457q0 15-10 25t-25 11q-96 0-178-28t-145-74-131-123q-11-12-11-25 0-15 11-25t25-11q13 0 25 11 15 13 41 39t38 37q76 69 150 98t175 29q14 0 25 11t10 25z m286 111q0-53-11-108-26-125-103-214t-200-149q-119-61-244-61-83 0-160 27-8 2-49 23t-53 21q-9 0-22-18t-25-39-30-39-33-18q-24 0-36 10t-25 33q-1 2-3 6t-3 6-2 5-1 7q0 20 17 41t38 37 38 31 18 27q0 2-8 21t-9 25q-5 28-5 58 0 64 24 123t66 103 96 77 113 53q31 10 81 15t101 5 99 3 91 13 64 32l16 16t17 16 15 11 20 9 24 3q22 0 40-26t26-63 14-69 4-53z" horiz-adv-x="1000" />
 
+<glyph glyph-name="clock" unicode="&#xe84b;" d="M500 546v-250q0-7-5-12t-13-5h-178q-8 0-13 5t-5 12v36q0 8 5 13t13 5h125v196q0 8 5 13t12 5h36q8 0 13-5t5-13z m232-196q0 83-41 152t-110 111-152 41-153-41-110-111-41-152 41-152 110-111 153-41 152 41 110 111 41 152z m125 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
 
 <glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
@@ -332,6 +334,8 @@
 
 <glyph glyph-name="hourglass" unicode="&#xf254;" d="M839-43q8 0 13-5t5-13v-71q0-8-5-13t-13-5h-821q-8 0-13 5t-5 13v71q0 8 5 13t13 5h821z m-766 36q1 31 9 60t16 53 26 48 30 43 36 38 37 34 39 31 37 26 36 24q-24 16-36 24t-37 27-39 30-37 34-36 39-30 42-26 48-16 53-9 60h712q-2-30-9-60t-17-53-26-48-30-42-36-39-36-34-40-30-37-27-36-24q24-16 36-24t37-26 40-31 36-34 36-38 30-43 26-48 17-53 9-60h-712z m766 857q8 0 13-5t5-13v-71q0-8-5-13t-13-5h-821q-8 0-13 5t-5 13v71q0 8 5 13t13 5h821z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="calendar-times-o" unicode="&#xf273;" d="M620 77l-26-25q-5-6-12-6t-13 6l-105 105-105-105q-5-6-12-6t-13 6l-25 25q-5 5-5 12t5 13l105 105-105 105q-5 6-5 13t5 12l25 26q5 5 13 5t12-5l105-105 105 105q6 5 13 5t12-5l26-26q5-5 5-12t-5-13l-105-105 105-105q5-5 5-13t-5-12z m-549-156h786v572h-786v-572z m215 679v161q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-161q0-8 5-13t13-5h36q8 0 13 5t5 13z m428 0v161q0 8-5 13t-13 5h-35q-8 0-13-5t-5-13v-161q0-8 5-13t13-5h35q8 0 13 5t5 13z m215 36v-715q0-29-22-50t-50-21h-786q-29 0-50 21t-21 50v715q0 29 21 50t50 21h72v54q0 37 26 63t63 26h36q37 0 63-26t26-63v-54h214v54q0 37 27 63t63 26h35q37 0 64-26t26-63v-54h71q29 0 50-21t22-50z" horiz-adv-x="1000" />
+
 <glyph glyph-name="map-signs" unicode="&#xf277;" d="M974 684q5-5 5-13t-5-12l-79-79q-15-16-38-16h-750q-14 0-25 11t-11 25v143q0 14 11 25t25 11h322v35q0 15 10 25t25 11h72q14 0 25-11t10-25v-35h286q23 0 38-16z m-545-513h142v-285q0-15-10-25t-25-11h-72q-14 0-25 11t-10 25v285z m464 250q14 0 25-10t11-25v-143q0-15-11-25t-25-11h-750q-22 0-38 16l-79 79q-5 5-5 12t5 13l79 79q16 15 38 15h286v108h142v-108h322z" horiz-adv-x="1000" />
 
 <glyph glyph-name="map" unicode="&#xf279;" d="M286 850q7 0 12-5t6-13v-821q0-11-10-16l-268-143q-4-2-8-2-7 0-13 5t-5 13v821q0 11 10 16l267 143q4 2 9 2z m696 0q7 0 13-5t5-13v-821q0-11-9-16l-268-143q-4-2-9-2-7 0-12 5t-6 13v821q0 11 10 16l268 143q4 2 8 2z m-625 0q5 0 8-2l286-142q10-6 10-17v-821q0-7-6-13t-12-5q-5 0-8 2l-286 142q-10 6-10 17v821q0 7 6 13t12 5z" horiz-adv-x="1000" />

package/components/ea-icon/index.css

@@ -0,0 +1,2 @@
+@import "./css/fontello.css";
+@import "./css/animation.css";

package/components/ea-icon/index.js

@@ -0,0 +1 @@
+export class EaIcon extends HTMLElement{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`\n            <link rel="stylesheet" href="${new URL("../ea-icon/index.css",import.meta.url).href}">\n            <i class="ea-icon_wrap" part="container">\n                <slot></slot>\n            </i>\n        `,this.#t=t.querySelector(".ea-icon_wrap")}get icon(){return this.getAttribute("icon")||""}set icon(t){this.setAttribute("icon",t),this.#t.className=`${t}`}get color(){return this.getAttribute("color")||""}set color(t){this.setAttribute("color",t),this.#t.style.color=t}get size(){return this.getAttribute("size")||""}set size(t){this.setAttribute("size",t),this.#t.style.fontSize=`${t}px`}connectedCallback(){this.icon=this.icon,this.color=this.color,this.size=this.size}}window.customElements.get("ea-icon")||window.customElements.define("ea-icon",EaIcon);

package/components/ea-image/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{errorImage}from"./src/assets/errorImage.js";import{stylesheet}from"./src/style/stylesheet.js";import{initImagePreview}from"./src/utils/createPreviewTools.js";export class EaImage extends Base{#t;#e;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-image_wrap' part='container'>\n                <img part='image' class='ea-image' />\n                <slot name='placeholder'></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-image_wrap"),this.#e=t.querySelector(".ea-image"),this.#i=t.querySelector('slot[name="placeholder"]'),this.build(t,stylesheet)}get src(){return this.getAttribute("src")||""}set src(t){this.setAttribute("src",t)}get width(){return this.getAttribute("width")||"100px"}set width(t){this.setAttribute("width",t),this.#t.style.width=t}get height(){return this.getAttribute("height")||"100px"}set height(t){this.setAttribute("height",t),this.#t.style.height=t}get alt(){return this.getAttribute("alt")||""}set alt(t){this.setAttribute("alt",t),this.#e.alt=t}get fit(){return this.getAttribute("fit")||"cover"}set fit(t){this.setAttribute("fit",t),this.#e.style.objectFit=t}get lazy(){return this.getAttrBoolean("lazy")}set lazy(t){this.setAttribute("lazy",t)}get preview(){return this.getAttrBoolean("preview")}set preview(t){this.setAttribute("preview",t)}#s(){const t=new Image;if(this.lazy){const e=new IntersectionObserver((i=>{i[0].intersectionRatio<=0||(t.src=this.src,e.disconnect())}));e.observe(this.#t)}else t.src=this.src;t.onload=()=>{this.#e.setAttribute("src",this.src),this.#i.remove(),this.dispatchEvent(new CustomEvent("load",{detail:{src:this.src}}))},t.onerror=()=>{this.#t.innerHTML=errorImage,this.#t.classList.add("is-error"),this.#i.remove(),this.dispatchEvent(new CustomEvent("error",{detail:{src:this.src}}))}}connectedCallback(){this.width=this.width,this.height=this.height,this.fit=this.fit,this.alt=this.alt,this.lazy=this.lazy,this.src=this.src,this.preview=this.preview,initImagePreview(this.#t,this.#e,this.preview),this.#s()}}customElements.get("ea-image")||customElements.define("ea-image",EaImage);

package/components/ea-image/src/assets/errorImage.js

@@ -0,0 +1 @@
+export const errorImage='\n    <svg id="errorImage" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <path fill="#fff" d="M15 20h70v60H15z" />\n        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />\n        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />\n        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />\n    </svg>\n';

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-image_wrap.is-error svg {\n  width: 20px;\n  height: 20px;\n}\n.ea-image_wrap img {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  user-zoom: scale;\n  object-fit: cover;\n  transition: rotate 0.3s, scale 0.3s;\n}\n.ea-image_wrap .ea-image_preview-wrap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 999;\n  opacity: 0;\n  transform: translateY(-1rem);\n  transition: opacity 0.3s, transform 0.3s;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.ea-image_wrap .ea-image_preview-wrap.entry {\n  opacity: 1;\n  transform: translateY(0);\n}\n.ea-image_wrap .ea-image_preview-wrap .ea-icon-close {\n  position: absolute;\n  right: 40px;\n  top: 40px;\n  cursor: pointer;\n  width: 40px;\n  height: 40px;\n  font-size: 24px;\n  line-height: 36px;\n  border-radius: 50%;\n  color: #fff;\n  background-color: #606266;\n  text-align: center;\n}\n.ea-image_wrap .ea-image_preview-wrap img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ea-image_wrap .ea-image_preview-tools {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  position: absolute;\n  bottom: 20px;\n  left: 50%;\n  padding: 0.5rem 1rem;\n  user-select: none;\n  border-radius: 999px;\n  transform: translateX(-50%);\n  background-color: rgba(96, 98, 102, 0.568627451);\n  color: #fff;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom,\n.ea-image_wrap .ea-image_preview-tools .ea-icon-rotate {\n  width: 2rem;\n  text-align: center;\n  cursor: pointer;\n  margin: 0 1rem;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom {\n  font-size: 2rem;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-zoom-in {\n  font-size: 1.75rem;\n}\n.ea-image_wrap .ea-image_preview-tools .ea-icon-rotate {\n  font-size: 1.5rem;\n}\n";

package/components/ea-image/src/utils/createPreviewTools.js

@@ -0,0 +1 @@
+import{createElement}from"../../../../utils/createElement.js";function handlePreviewDisplay(e){e.classList.remove("entry"),e.addEventListener("transitionend",(()=>{e.remove(),document.body.style.overflow="auto"}))}function createCloseBtn(e){const t=createElement("span","ea-icon-close");return t.innerText="x",t.addEventListener("click",(()=>{handlePreviewDisplay(e)})),t}function handleImageDrag(e,t){let n=0,a=0;function o(e){const{clientX:o,clientY:s}=e;t.style.marginLeft=o-n+"px",t.style.marginTop=s-a+"px"}t.addEventListener("dragstart",(e=>{e.preventDefault()})),t.addEventListener("mousedown",(e=>{n=e.clientX,a=e.clientY,t.addEventListener("mousemove",o),t.addEventListener("mouseup",(()=>{t.removeEventListener("mousemove",o)}))}))}function createPreviewTools(e){const t=createElement("div","ea-image_preview-tools");t.innerHTML='\n        <span class="ea-icon-zoom ea-icon-zoom-in">+</span>\n        <span class="ea-icon-zoom ea-icon-zoom-out">-</span>\n        <span class="ea-icon-rotate ea-icon-rotate-left">↺</span>\n        <span class="ea-icon-rotate ea-icon-rotate-right">↻</span>\n    ';t.querySelector(".ea-icon-zoom-in").addEventListener("click",(()=>{e.style.scale=e.style.scale?Number(e.style.scale)+.2:1.2}));t.querySelector(".ea-icon-zoom-out").addEventListener("click",(()=>{e.style.scale=e.style.scale?Number(e.style.scale)-.2:.8}));t.querySelector(".ea-icon-rotate-left").addEventListener("click",(()=>{e.style.rotate=(e.style.rotate?Number(e.style.rotate.split("deg")[0])-90:-90)+"deg"}));return t.querySelector(".ea-icon-rotate-right").addEventListener("click",(()=>{e.style.rotate=(e.style.rotate?Number(e.style.rotate.split("deg")[0])+90:90)+"deg"})),t}export function initImagePreview(e,t,n){n&&t.addEventListener("click",(()=>{(t=t.cloneNode(!0)).style.objectFit="contain";const n=createElement("div","ea-image_preview-wrap",[t]);e.appendChild(n);const a=createCloseBtn(n);n.appendChild(a);const o=createPreviewTools(t,n);n.appendChild(o),setTimeout((()=>{n.classList.add("entry")}),20),handleImageDrag(n,t),document.body.style.overflow="hidden"}))}

package/components/ea-infinite-scroll/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-infinite-scroll-item/index.js";export class EaInfiniteScroll extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-infinite_wrap' part='container'>\n                <slot></slot>\n            </div>\n            <slot name='loading' style=\"display: none;\"></slot>\n            <slot name='noMore' style=\"display: none;\"></slot>\n        ",this.#t=t.querySelector('slot[name="loading"]'),this.#e=t.querySelector('slot[name="noMore"]')}get delay(){return this.getAttrNumber("delay")||200}set delay(t){this.setAttribute("delay",t)}get loading(){return this.getAttrBoolean("loading")}set loading(t){void 0!==t&&this.setAttribute("loading",t)}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(t){this.setAttribute("disabled",t),t&&(this.#e.style.display="block")}#i(){const t=this.querySelectorAll("ea-infinite-item");return t[t.length-1]}#s(){if(this.disabled)return;let t=this.#i(),e=null;const i=new IntersectionObserver((s=>{const{isIntersecting:o}=s[0];this.disabled?i.disconnect():o&&!e&&(this.loading&&(this.#t.style.display="block"),i.unobserve(t),e=setTimeout((()=>{this.dispatchEvent(new CustomEvent("bottomReached")),clearTimeout(e),e=null,t=this.#i(),i.observe(t),this.#t.style.display="none"}),this.delay||200))}),{root:this.parentNode,rootMargin:"10px",threshold:.1});i.observe(t)}connectedCallback(){this.delay=this.delay,this.#s()}}customElements.get("ea-infinite")||customElements.define("ea-infinite",EaInfiniteScroll);

package/components/ea-infinite-scroll-item/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";export class EaInfiniteScrollItem extends Base{constructor(){super();this.attachShadow({mode:"open"}).innerHTML="\n            <div class='ea-infinite-item_wrap' part='container'>\n                <slot></slot>\n            </div>\n        "}}customElements.get("ea-infinite-item")||customElements.define("ea-infinite-item",EaInfiniteScrollItem);