easy-component-ui 2.0.5 → 2.1.0

package/build/components/ea-time-picker/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{createElement}from"../../utils/createElement.js";import{timeout}from"../../utils/timeout.js";import{stylesheet}from"./src/style/stylesheet.js";import"../ea-input/index.js";import"../ea-button/index.js";export class EaTimePicker extends Base{#e;#t;#i;#n;#r;#s;#a=!1;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-time-picker_wrap' part='container'>\n                <ea-input part='input' autocomplete=\"off\" readonly prefix-icon=\"icon-clock\"></ea-input>\n                <div class=\"ea-time-picker_dropdown-wrap\" part='dropdown-wrap'>\n                    <div class=\"ea-time-picker_dropdown-inner-wrap\" part='dropdown-inner-wrap'>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-hour\" part='dropdown-time'>\n                        </ul>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-minute\" part='dropdown-time'>\n                        </ul>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-second\" part='dropdown-time'>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        ",this.#e=e.querySelector(".ea-time-picker_wrap"),this.#t=e.querySelector("ea-input"),this.#i=e.querySelector(".ea-time-picker_dropdown-wrap"),this.#n=e.querySelector(".ea-time-picker_dropdown-inner-hour"),this.#r=e.querySelector(".ea-time-picker_dropdown-inner-minute"),this.#s=e.querySelector(".ea-time-picker_dropdown-inner-second"),this.build(e,stylesheet)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e}get time(){return this.getAttribute("time")||"00:00:00"}set time(e){this.setAttribute("time",e);const[t,i,n]=e.split(":");this.hour=t,this.minute=i,this.second=n}get name(){return this.getAttribute("name")||"timePicker"}set name(e){this.setAttribute("name",e)}get hour(){const e=this.getAttrNumber("hour");return this.#o(e)}set hour(e){this.setAttribute("hour",e),this.#h(this.#n,e)}get minute(){const e=this.getAttrNumber("minute");return this.#o(e)}set minute(e){this.setAttribute("minute",e),this.#h(this.#r,e)}get second(){const e=this.getAttrNumber("second");return this.#o(e)}set second(e){this.setAttribute("second",e),this.#h(this.#s,e)}get value(){return this.time}set value(e){this.time=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.setAttribute("disabled",e),this.#t.disabled=e}get align(){return this.getAttribute("align")||"left"}set align(e){this.setAttribute("align",e),this.#t.shadowRoot.querySelector("input").style.textAlign=e}get limitRangeStart(){if(this.getAttribute("limit-range-start")){const[e,t,i]=this.getAttribute("limit-range-start")?.split(":");return`${this.#o(e)}:${this.#o(t)}:${this.#o(i)}`}return"00:00:00"}set limitRangeStart(e){this.setAttribute("limit-range-start",e)}get limitRangeEnd(){if(this.getAttribute("limit-range-end")){const[e,t,i]=this.getAttribute("limit-range-end")?.split(":");return`${this.#o(e)}:${this.#o(t)}:${this.#o(i)}`}return"23:59:59"}set limitRangeEnd(e){this.setAttribute("limit-range-end",e)}#o(e,t="00"){return(e=Number(e))<10?`0${e}`:e||t}#h(e,t){e.querySelectorAll("li").forEach((e=>{Number(e.innerText)===Number(this.#o(t))&&e.click()}))}#d(){this.#i.style.width=this.#t.getBoundingClientRect().width+"px",timeout((()=>{this.#e.classList.add("with-transition")}),50)}#l(e,t,i,n){e.addEventListener("click",(()=>{i.querySelectorAll("li").forEach((e=>{e.classList.remove("is-active")})),e.classList.add("is-active");const r=this.#o(t);switch(n){case"hour":this.hour=r;break;case"minute":this.minute=r;break;case"second":this.second=r}this.#a&&this.dispatchEvent(new CustomEvent("change",{detail:{time:this.time}})),this.#t.value=`${this.hour}:${this.minute}:${this.second}`,this.time=`${this.hour}:${this.minute}:${this.second}`;const s=e.getBoundingClientRect().height*t;i.scrollTo({top:s,behavior:"smooth"})}))}#c(e){e.addEventListener("wheel",(()=>{timeout((()=>{const t=e.querySelectorAll("li"),i=t[0].getBoundingClientRect().height,{scrollTop:n}=e,r=Math.floor(n/i);t[r]&&t[r].click()}),100)}))}#m(){const[e,t,i]=this.limitRangeStart.split(":"),[n,r,s]=this.limitRangeEnd.split(":"),a=new Date;if(new Date(a.getFullYear(),a.getMonth(),a.getDate(),e,t,i)>new Date(a.getFullYear(),a.getMonth(),a.getDate(),n,r,s))throw new Error("limit-range-start must be less than limit-range-end");const o=(t,i,r,s)=>{t=Number(t),i=Number(i);let a=0,o=0;if("hour"===s)a=0,o=23;else a=0,o=59,String(t).localeCompare(i)||e===n||(i=0===i?59:i);for(let e=a;e<=o;e++){const n=createElement("li","ea-time-picker_dropdown-item");n.innerText=this.#o(e),r.appendChild(n),e>=t&&e<=i?this.#l(n,e,r,s):n.classList.add("is-disabled")}};o(e,n,this.#n,"hour"),o(t,r,this.#r,"minute"),o(i,s,this.#s,"second"),this.#c(this.#n),this.#c(this.#r),this.#c(this.#s)}#u(){let e=!1;const t=()=>{this.time=this.time,e=!0,this.#a=!0,this.#i.removeEventListener("transitionend",t)};this.#t.addEventListener("focus",(()=>{this.#e.classList.add("is-open"),e||this.#i.addEventListener("transitionend",t)})),window.addEventListener("click",(e=>{this.contains(e.target)?this.#t.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.disabled=this.disabled,this.align=this.align,this.limitRangeStart=this.limitRangeStart,this.limitRangeEnd=this.limitRangeEnd,this.#d(),this.#m(),this.time=this.time,this.#t.value=`${this.hour}:${this.minute}:${this.second}`,this.#u()}}customElements.get("ea-time-picker")||customElements.define("ea-time-picker",EaTimePicker);

package/build/components/ea-time-picker/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet='\n.ea-time-picker_wrap {\n  position: relative;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  transform-origin: center top;\n  transform: translateY(100%) scaleY(0);\n  box-sizing: border-box;\n  background-color: #fff;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0.5rem;\n  border: 0.5rem solid transparent;\n  border-bottom-color: #fff;\n  transform: translateY(-100%);\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap {\n  display: flex;\n  position: relative;\n  margin: 1rem 0;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::before, .ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  transform: translateY(-50%);\n  width: 100%;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::before {\n  top: calc(50% - 16px);\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::after {\n  top: calc(50% + 16px);\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner {\n  flex: 1;\n  max-height: 190px;\n  box-sizing: border-box;\n  padding: 5rem 0;\n  text-align: center;\n  overflow: auto;\n  scrollbar-width: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px;\n  list-style-type: none;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item {\n  height: 32px;\n  line-height: 32px;\n  font-size: 12px;\n  color: #606266;\n  transition: color 0.3s;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item.is-active {\n  color: #409eff;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item.is-disabled {\n  color: #c0c4cc;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-button-group {\n  text-align: right;\n  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n.ea-time-picker_wrap.is-open .ea-time-picker_dropdown-wrap {\n  transform: translateY(100%) scaleY(1);\n}\n.ea-time-picker_wrap.with-transition .ea-time-picker_dropdown-wrap {\n  transition: transform 0.3s ease-in-out;\n}\n';

package/build/components/ea-timeline/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-timeline-item/index.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{timeout}from"../../utils/timeout.js";import{stylesheet}from"./style/stylesheet.js";export class EaTimeline extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n      <div class='ea-timeline_wrap' part='container'>\n        <ul class='ea-timeline-item_container' part='list-wrap'>\n          <slot></slot>\n        </ul>\n      </div>\n    ",this.#e=e.querySelector(".ea-timeline_wrap"),this.#t=e.querySelector(".ea-timeline-item_container"),this.build(e,stylesheet)}get reverse(){const e=this.getAttribute("reverse");return handleDefaultAttrIsTrue(e)}set reverse(e){this.setAttribute("reverse",e),this.#i(e)}#i(e){e="true"===e||!0===e;Array.from(this.querySelectorAll("ea-timeline-item")).sort(((t,i)=>{const r=new Date(t.time),s=new Date(i.time);return e?s-r:r-s})).forEach(((e,t)=>{this.appendChild(e)}))}connectedCallback(){this.reverse=this.reverse}}customElements.get("ea-timeline")||customElements.define("ea-timeline",EaTimeline);

package/build/components/ea-timeline/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n\n";

package/build/components/ea-timeline-item/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTimelineItem extends Base{#t;#e;#i;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-timeline-item_wrap' part='container'>\n                <div class='ea-timeline-item_circle' part='circle'></div>\n                <div class='ea-timeline-item_tail' part='tail'></div>\n                <div class='ea-timeline-item_container' part='body'>\n                    <div class='ea-timeline-item_content' part='content'>\n                        <slot></slot>\n                    </div>\n                    <div class='ea-timeline-item_timestamp' part='timestamp'></div>\n                </div>\n            </div>\n        ",this.#t=t.querySelector(".ea-timeline-item_wrap"),this.#e=t.querySelector(".ea-timeline-item_timestamp"),this.#i=t.querySelector(".ea-timeline-item_circle"),this.#s=t.querySelector(".ea-timeline-item_timestamp"),this.build(t,stylesheet)}get time(){return this.getAttribute("time")||""}set time(t){t&&(this.setAttribute("time",t),this.#s.innerText=t)}get typeList(){return["primary","success","warning","danger","info"]}get type(){const t=this.getAttribute("type");return this.typeList.includes(t)?t:"info"}set type(t){this.setAttribute("type",t),this.#i.classList.add(`ea-timeline-item--${t}`)}get color(){return this.getAttribute("color")||""}set color(t){if(!t)return;this.setAttribute("color",t);""!==((new Option).style.color=t)&&(this.#i.style.backgroundColor=t)}get sizeList(){return["normal","large"]}get size(){const t=this.getAttribute("size");return this.sizeList.includes(t)?t:"normal"}set size(t){this.setAttribute("size",t),this.#t.classList.add(`ea-timeline-item_circle--${t}`)}get placementList(){return["top","bottom"]}get placement(){const t=this.getAttribute("placement");return this.placementList.includes(t)?t:"bottom"}set placement(t){this.setAttribute("placement",t),this.#e.classList.add(`ea-timeline-item_timestamp--${t}`)}connectedCallback(){this.time=this.time,this.type=this.type,this.color=this.color,this.size=this.size,this.placement=this.placement}}customElements.get("ea-timeline-item")||customElements.define("ea-timeline-item",EaTimelineItem);

package/build/components/ea-timeline-item/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-timeline-item_wrap {\n  position: relative;\n  padding-bottom: 20px;\n  padding-left: 28px;\n  list-style: none;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle {\n  position: absolute;\n  left: 0;\n  z-index: 1;\n  display: block;\n  width: 12px;\n  height: 12px;\n  font-size: 12px;\n  border-radius: 50%;\n  background-color: #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--primary {\n  background-color: #409eff;\n  color: #409eff;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--success {\n  background-color: #67c23a;\n  color: #67c23a;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--warning {\n  background-color: #e6a23c;\n  color: #e6a23c;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--danger {\n  background-color: #f56c6c;\n  color: #f56c6c;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--info {\n  background-color: #e4e7ed;\n  color: #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_tail {\n  z-index: 0;\n  position: absolute;\n  left: 0.3281rem;\n  height: 100%;\n  border-left: 2px solid #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container {\n  position: relative;\n  top: -4px;\n  font-size: 14px;\n  display: flex;\n  flex-direction: column;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_timestamp {\n  color: #909399;\n  line-height: 1;\n  margin-top: 8px;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_content {\n  color: #303133;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top {\n  flex-direction: column-reverse;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top .ea-timeline-item_timestamp {\n  margin-top: 0;\n  margin-bottom: 8px;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--bottom {\n  flex-direction: column;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_circle {\n  width: 14px;\n  height: 14px;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_tail {\n  left: 0.3906rem;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_container {\n  font-size: 16px;\n}\n";

package/build/components/globalConfig.js

@@ -0,0 +1 @@
+const globalConfig={fontelloCSS:"https://cdn.jsdelivr.net/npm/easy-component-ui/components/ea-icon/css/fontello.css"};function setConfig(n){Object.assign(globalConfig,n),document.dispatchEvent(new CustomEvent("configChanged",{detail:globalConfig}))}export{setConfig};

package/build/components/index.js

@@ -0,0 +1 @@
+import"./ea-alert";import"./ea-aside";import"./ea-badge";import"./ea-backtop";import"./ea-breadcrumb-item";import"./ea-breadcrumb";import"./ea-button-group";import"./ea-button";import"./ea-calendar";import"./ea-avatar";import"./ea-carousel";import"./ea-carousel-item";import"./ea-checkbox-group";import"./ea-checkbox";import"./ea-collapse-item";import"./ea-collapse";import"./ea-container";import"./ea-date-picker";import"./ea-descriptions-item";import"./ea-drawer";import"./ea-descriptions";import"./ea-empty";import"./ea-footer";import"./ea-form-item";import"./ea-header";import"./ea-icon";import"./ea-image";import"./ea-infinite-scroll";import"./ea-form";import"./ea-infinite-scroll-item";import"./ea-input";import"./ea-card";import"./ea-link";import"./ea-loading";import"./ea-input-number";import"./ea-main";import"./ea-menu-item";import"./ea-menu";import"./ea-message";import"./ea-menu-item-group";import"./ea-message-box";import"./ea-option-gropu";import"./ea-option";import"./ea-page-header";import"./ea-progress";import"./ea-pagination";import"./ea-radio-group";import"./ea-pane";import"./ea-radio";import"./ea-result";import"./ea-skeleton";import"./ea-rate";import"./ea-select";import"./ea-skeleton-item";import"./ea-step";import"./ea-submenu";import"./ea-steps";import"./ea-switch";import"./ea-table-column";import"./ea-tab";import"./ea-table";import"./ea-textarea";import"./ea-tag";import"./ea-time-picker";import"./ea-tabs";import"./ea-timeline";import"./ea-timeline-item";

package/build/utils/Validator.js

@@ -0,0 +1 @@
+export const Validator={required:r=>"string"==typeof r?""!==r:!!Array.isArray(r)&&r.length>0,min:(r,t)=>r.length>=t,max:(r,t)=>r.length<=t,reg:(r,t)=>t.test(r)};

package/build/utils/createElement.js

@@ -0,0 +1 @@
+export const createElement=(e,t,n)=>{const r=document.createElement(e||"div");return r.className=t||"",n&&(Array.isArray(n)?n.forEach((e=>{r.appendChild(e)})):r.appendChild(n)),r};export const createSlotElement=e=>{const t=document.createElement("slot");return e&&(t.name=e),t};

package/build/utils/handleDefaultAttrIsTrue.js

@@ -0,0 +1 @@
+export const handleDefaultAttrIsTrue=e=>e="false"!==e&&!1!==e;

package/build/utils/handleTemplate.js

@@ -0,0 +1 @@
+export const handleTemplate=(e,n,o,r)=>{const c=e.querySelector(`[slot="${n}"]`);if(c)try{if(0===c.childNodes.length)o.innerHTML=c.innerHTML;else if(""===c.innerHTML){const e=c.childNodes;o.innerHTML="",Array.from(e).forEach((e=>{o.appendChild(e.cloneNode(!0))}))}c.remove(),r.remove()}catch(e){}};

package/build/utils/setStyle.js

@@ -0,0 +1 @@
+export default function setStyle(e,t){const l=document.createElement("link");l.href=t,l.rel="stylesheet",e.appendChild(l)}

package/build/utils/timeout.js

@@ -0,0 +1 @@
+export const timeout=(t,e=0)=>{let i=setTimeout((()=>{clearTimeout(i),i=null,t()}),e)};export const withTransitionTimeOut=(t,e=300)=>{let i=setTimeout((()=>{clearTimeout(i),i=null,t.classList.add("with-transition")}),e)};

package/components/Base.js

@@ -1 +1,75 @@
-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)}}
+// @ts-nocheck
+
+import setStyle from '../utils/setStyle.js';
+
+export default class Base extends HTMLElement {
+    constructor() {
+        super();
+
+        this.isProduction = false;
+        this.isProduction = true;
+    }
+
+    /**
+     * 设置属性值，并切换className
+     * @param {string} attr 属性名
+     * @param {boolean} flag 属性值
+     * @param {string} className class名
+     */
+    toggleAttribute(attr, flag, className) {
+        if (flag) {
+            this.setAttribute(attr, flag);
+
+            if (className) this.dom.classList.add(className);
+        } else {
+
+            if (this.hasAttribute(attr)) this.removeAttribute(attr);
+            if (className) this.dom.classList.remove(className);
+        }
+    }
+
+    /**
+     * 设置属性值
+     * @param {string} attr 属性名
+     * @param {boolean} flag 属性值
+     */
+    toggleAttr(attr, flag) {
+        if (flag) {
+            this.setAttribute(attr, flag);
+        } else {
+            this.removeAttribute(attr);
+        }
+    }
+
+    /**
+     * 获取属性值，并转换为布尔值
+     * @param {string} attrName 属性名
+     * @returns {boolean}
+     */
+    getAttrBoolean(attrName) {
+        const attr = this.getAttribute(attrName);
+        return attr === 'true' || attr === '';
+    }
+
+    /**
+     * 获取属性值，并转换为数字
+     * @param {string} attrName 属性名
+     * @returns {number}
+     */
+    getAttrNumber(attrName) {
+        const attr = this.getAttribute(attrName);
+
+        return attr ? Number(attr) : 0;
+    }
+
+    // 样式构建
+    build(shadowRoot, stylesheet) {
+        if (this.isProduction) {
+            const styleNode = document.createElement('style');
+            styleNode.innerHTML = stylesheet;
+            this.shadowRoot.appendChild(styleNode);
+        } else {
+            setStyle(shadowRoot, new URL(this.nodeName.toLowerCase() + '/index.css', import.meta.url).href);
+        }
+    }
+}

package/components/ea-alert/index.css

@@ -0,0 +1,91 @@
+@import "../ea-icon/css/fontello.css";
+@import "../ea-icon/css/animation.css";
+@font-face {
+  font-size: 1rem;
+  font-size: 16px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  src: url("../ea-icon/font/fontello.eot") format("embedded-opentype"), url("../ea-icon/font/fontello.ttf") format("truetype"), url("../ea-icon/font/fontello.woff") format("woff"), url("../ea-icon/font/fontello.woff2") format("woff2"), url("../ea-icon/font/fontello.svg") format("svg");
+}
+.ea-alert_wrap {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 8px 16px;
+  margin: 20px 0 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.ea-alert_wrap .ea-alert_content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ea-alert_wrap .ea-alert_content .ea-alert_title {
+  display: flex;
+  align-items: center;
+}
+.ea-alert_wrap .ea-alert_content .ea-alert_title i {
+  margin-right: 0.5rem;
+}
+.ea-alert_wrap .ea-alert_content .ea-alert_close-icon {
+  color: #c0c4cc;
+  cursor: pointer;
+}
+.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_title,
+.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_close-icon {
+  margin-left: auto;
+}
+.ea-alert_wrap .ea-alert_description {
+  width: 100%;
+  margin: 5px 0 0;
+  font-size: 12px;
+}
+.ea-alert_wrap.ea-alert--success {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+.ea-alert_wrap.ea-alert--success.ea-alert--dark {
+  color: #fff;
+  background-color: #67c23a;
+}
+.ea-alert_wrap.ea-alert--success.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+.ea-alert_wrap.ea-alert--info {
+  background-color: #f4f4f5;
+  color: #909399;
+}
+.ea-alert_wrap.ea-alert--info.ea-alert--dark {
+  color: #fff;
+  background-color: #909399;
+}
+.ea-alert_wrap.ea-alert--info.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+.ea-alert_wrap.ea-alert--warning {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+.ea-alert_wrap.ea-alert--warning.ea-alert--dark {
+  color: #fff;
+  background-color: #e6a23c;
+}
+.ea-alert_wrap.ea-alert--warning.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+.ea-alert_wrap.ea-alert--error {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+.ea-alert_wrap.ea-alert--error.ea-alert--dark {
+  color: #fff;
+  background-color: #f56c6c;
+}
+.ea-alert_wrap.ea-alert--error.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}

package/components/ea-alert/index.js

@@ -1 +1,210 @@
-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);
+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 {
+  #wrap;
+
+  #alertContent;
+  #alertTitle;
+  #closeIcon;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div class='ea-alert_wrap' part='container'>
+        <div class="ea-alert_content" part='content-wrap'>
+          <span class="ea-alert_title" part='title'></span>
+          <ea-icon class="ea-alert_close-icon" part='icon'></ea-icon>
+        </div>
+      </div>
+    `;
+
+    this.#wrap = shadowRoot.querySelector('.ea-alert_wrap');
+    this.#alertContent = shadowRoot.querySelector('.ea-alert_content');
+    this.#alertTitle = shadowRoot.querySelector('.ea-alert_title');
+    this.#closeIcon = shadowRoot.querySelector('.ea-alert_close-icon');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- type 获取提示类型 -------
+  // #region
+  get type() {
+    return this.getAttribute('type') || "info";
+  }
+
+  set type(value) {
+    this.setAttribute('type', value);
+
+    this.#wrap.classList.add(`ea-alert--${value}`);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- title 获取提示标题 -------
+  // #region
+  get title() {
+    return this.getAttribute('title') || "";
+  }
+
+  set title(value) {
+    this.setAttribute('title', value);
+
+    this.#alertTitle.innerText = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- closable 是否可关闭 -------
+  // #region
+  get closable() {
+    return handleDefaultAttrIsTrue('closable');
+  }
+
+  set closable(value) {
+    this.setAttribute('closable', value);
+
+    this.#closeIcon.style.display = value ? 'block' : 'none';
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- close-text 关闭按钮文字 -------
+  // #region
+  get closeText() {
+    return this.getAttribute('close-text') || "";
+  }
+
+  set closeText(value) {
+    this.setAttribute('close-text', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- effect 亮色与暗色主题 -------
+  // #region
+  get effect() {
+    return this.getAttribute('effect') || "light";
+  }
+
+  set effect(value) {
+    this.setAttribute('effect', value);
+
+    this.#wrap.classList.toggle('ea-alert--dark', value === "dark");
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- show-icon 是否显示图标 -------
+  // #region
+  get showIcon() {
+    return this.getAttrBoolean('show-icon') || false;
+  }
+
+  set showIcon(value) {
+    this.setAttribute('show-icon', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- center 是否居中 -------
+  // #region
+  get center() {
+    return this.getAttrBoolean('center') || false;
+  }
+
+  set center(value) {
+    this.setAttribute('center', value);
+
+    this.#alertContent.classList.toggle('ea-alert--center', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- description 提示描述 -------
+  // #region
+  get description() {
+    return this.getAttribute('description') || "";
+  }
+
+  set description(value) {
+    this.setAttribute('description', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  #initClosableElement() {
+    if (!this.closable) return;
+
+    this.closable === true && this.closeText === "" ? this.#closeIcon.icon = 'icon-cancel' : this.#closeIcon.innerText = this.closeText;
+
+    this.#closeIcon.addEventListener('click', () => {
+      this.#wrap.style.opacity = 0;
+
+      this.dispatchEvent(new CustomEvent('close', { detail: { target: this.#closeIcon } }));
+    });
+
+    this.#wrap.addEventListener('transitionend', () => {
+      this.remove();
+    });
+  }
+
+  get iconList() {
+    return {
+      success: 'ok-circled',
+      info: 'info',
+      warning: 'attention-alt',
+      error: 'cancel-circled'
+    }
+  }
+
+  #initShowIconElement() {
+    if (!this.showIcon) return;
+
+    const icon = createElement('ea-icon');
+    icon.icon = `icon-${this.iconList[this.type]}`;
+    icon.classList.add(`ea-alert--${this.type}`);
+
+    this.#alertTitle.insertBefore(icon, this.#alertTitle.firstChild);
+  }
+
+  #initDescriptionElement() {
+    if (!this.description) return;
+
+    const descriptionElement = createElement('p', 'ea-alert_description');
+    descriptionElement.part = 'description';
+    this.#wrap.style.flexDirection = 'column';
+
+    descriptionElement.innerText = this.description;
+    this.#wrap.appendChild(descriptionElement);
+  }
+
+  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.#initClosableElement();
+    this.#initShowIconElement();
+    this.#initDescriptionElement();
+  }
+}
+
+if (!customElements.get('ea-alert')) {
+  customElements.define('ea-alert', EaAlert);
+}

package/components/ea-alert/index.scss

@@ -0,0 +1,108 @@
+@import "../ea-ui-base-style.scss";
+@import "../ea-icon/index.scss";
+
+$themes-light: (
+  success: (
+    bgc: #f0f9eb,
+    text: #67c23a,
+  ),
+  info: (
+    bgc: #f4f4f5,
+    text: #909399,
+  ),
+  warning: (
+    bgc: #fdf6ec,
+    text: #e6a23c,
+  ),
+  error: (
+    bgc: #fef0f0,
+    text: #f56c6c,
+  ),
+);
+
+$themes-dark: (
+  success: (
+    bgc: #1f2d3d,
+    text: #67c23a,
+  ),
+  info: (
+    bgc: #1f2d3d,
+    text: #909399,
+  ),
+  warning: (
+    bgc: #1f2d3d,
+    text: #e6a23c,
+  ),
+  error: (
+    bgc: #1f2d3d,
+    text: #f56c6c,
+  ),
+);
+
+.ea-alert_wrap {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 8px 16px;
+  margin: 20px 0 0;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  opacity: 1;
+
+  transition: opacity 0.2s;
+
+  .ea-alert_content {
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ea-alert_title {
+      display: flex;
+      align-items: center;
+
+      i {
+        margin-right: 0.5rem;
+      }
+    }
+
+    .ea-alert_close-icon {
+      color: #c0c4cc;
+      cursor: pointer;
+    }
+
+    &.ea-alert--center {
+      .ea-alert_title,
+      .ea-alert_close-icon {
+        margin-left: auto;
+      }
+    }
+  }
+
+  .ea-alert_description {
+    width: 100%;
+    margin: 5px 0 0;
+    font-size: 12px;
+  }
+
+  @each $theme-name, $theme-color in $themes-light {
+    &.ea-alert--#{$theme-name} {
+      background-color: map-get($theme-color, bgc);
+      color: map-get($theme-color, text);
+
+      &.ea-alert--dark {
+        color: #fff;
+        background-color: map-get($theme-color, text);
+
+        .ea-alert_close-icon {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

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

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

package/components/ea-aside/index.css

@@ -0,0 +1,9 @@
+.ea-aside_wrap {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.ea-aside_wrap ::slotted(ea-main) {
+  overflow: auto;
+}