easy-component-ui 2.1.0 → 3.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

package/build/utils/handleTemplate.js

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

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

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

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

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

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