easy-component-ui 1.0.3 → 2.0.1

package/components/ea-message/index.js

@@ -1,233 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement } from '../../utils/createElement.js';
-import "../ea-icon/index.js"
-
-const stylesheet = `
-
-.ea-message_wrap {
-  position: fixed;
-  left: 50%;
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  padding: 15px 15px 15px 20px;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  top: -100%;
-  transform-origin: center;
-  opacity: 0;
-  transform: translate(-50%, 0);
-  min-width: 380px;
-  overflow: hidden;
-  background-color: black;
-  transition: opacity 0.3s, top 0.3s;
-}
-.ea-message_wrap .ea-icon-wrap {
-  margin-right: 0.5rem;
-  line-height: 1;
-}
-.ea-message_wrap .ea-text-content {
-  line-height: 1;
-  vertical-align: middle;
-}
-.ea-message_wrap .ea-close-icon {
-  margin-left: auto;
-}
-.ea-message_wrap.ea-message--success {
-  background-color: #f0f9eb;
-  color: #67c23a;
-}
-.ea-message_wrap.ea-message--info {
-  background-color: #f4f4f5;
-  color: #909399;
-}
-.ea-message_wrap.ea-message--warning {
-  background-color: #fdf6ec;
-  color: #e6a23c;
-}
-.ea-message_wrap.ea-message--error {
-  background-color: #fef0f0;
-  color: #f56c6c;
-}
-`;
-
-export class EaMessageElement extends Base {
-    #wrap;
-
-    #icon;
-
-    #textContent;
-
-    #closeWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-message_wrap';
-
-        const icon = createElement('i', 'ea-icon-wrap');
-        wrap.appendChild(icon);
-
-        const textContent = createElement('div', 'ea-text-content');
-        wrap.appendChild(textContent);
-
-        const closeIcon = createElement('i', 'ea-close-icon icon-cancel');
-        wrap.appendChild(closeIcon);
-        closeIcon.style.display = 'none';
-
-        this.#wrap = wrap;
-        this.wrap = wrap;
-        this.#icon = icon;
-        this.#textContent = textContent;
-        this.#closeWrap = closeIcon;
-        this.closeWrap = closeIcon;
-
-        this.build(shadowRoot, stylesheet);
-        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    get attrs() {
-        return ["show", "text", "icon", "type", "showClose", "center"];
-    }
-
-    get iconList() {
-        return {
-            "success": "icon-ok-circled",
-            "error": "icon-cancel-circled",
-            "warning": "icon-attention-alt",
-            "info": "icon-info"
-        };
-    }
-
-    // ------- show 提示框的显示状态 -------
-    // #region
-    get show() {
-        return this.getAttrBoolean('show');
-    }
-
-    set show(value) {
-        this.setAttribute('show', value);
-
-        const eaMessageList = document.querySelectorAll('ea-message');
-
-        if (value) {
-            const length = eaMessageList.length - 1;
-            const elementHeight = this.#wrap.getBoundingClientRect().height;
-            let gap = length <= 0 ? 10 : (length + 1) * 10;
-
-            this.#wrap.style.top = `${length * elementHeight + gap}px`;
-            this.#wrap.style.opacity = 1;
-        } else {
-            const that = this;
-
-            this.#wrap.style.top = `-100%`;
-            this.#wrap.style.opacity = 0;
-
-            let event = this.#wrap.addEventListener('transitionend', function () {
-                this.removeEventListener('transitionend', event);
-                that.remove();
-            });
-        }
-
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- text 提示框的文字 -------
-    // #region
-    get text() {
-        return this.getAttribute('text');
-    }
-
-    set text(value) {
-        this.setAttribute('text', value);
-
-        this.#textContent.innerText = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- type 提示框的类型 -------
-    // #region
-    get type() {
-        return this.getAttribute('type') || "info";
-    }
-
-    set type(value) {
-        this.setAttribute('type', value);
-
-        this.#wrap.classList.add(`ea-message--${value}`);
-        this.#icon.classList.add(`${this.iconList[value]}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- showClose 提示框的关闭按钮 -------
-    // #region
-    get showClose() {
-        return this.getAttrBoolean('showClose') || false;
-    }
-
-    set showClose(value) {
-        this.setAttribute('showClose', value);
-
-        if (value) {
-            this.#closeWrap.style.display = "block";
-        } else {
-            this.#closeWrap.style.display = "none";
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- center 提示框是否居中 -------
-    // #region
-    get center() {
-        return this.getAttrBoolean('center') || false;
-    }
-
-    set center(value) {
-        this.setAttribute('center', value);
-
-        if (value) {
-            this.#icon.style.marginLeft = `auto`;
-        } else {
-            this.#icon.style.marginLeft = `0`;
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        const that = this;
-    }
-
-    connectedCallback() {
-        this.init();
-
-        this.#closeWrap.addEventListener('click', () => {
-            this.show = false;
-        });
-    }
-
-    disconnectedCallback() {
-        const eaMessageList = document.querySelectorAll('ea-message');
-        const length = eaMessageList.length;
-
-        if (length > 0) {
-            Array.from(eaMessageList).forEach((el, index) => {
-                const elementHeight = el.wrap.getBoundingClientRect().height;
-                el.wrap.style.top = `${index * elementHeight + (index * 10)}px`;
-            });
-        }
-    }
-}
-
-if (!customElements.get('ea-message')) {
-    customElements.define('ea-message', EaMessageElement);
-}
+import Base from"../Base.js";import{createElement}from"../../utils/createElement.js";import"../ea-icon/index.js";import{EaMessage}from"./src/utils/MessageClass.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaMessageElement extends Base{#e;#t;#s;#n;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-message_wrap" part="container">\n                <ea-icon class="ea-icon-wrap" part="icon"></ea-icon>\n                <div class="ea-text-content" part="content-wrap"></div>\n                <ea-icon class="ea-close-icon" icon="icon-cancel"></ea-icon>\n            </div>\n        ',this.#e=e.querySelector(".ea-message_wrap"),this.wrap=this.#e,this.#t=e.querySelector(".ea-icon-wrap"),this.#s=e.querySelector(".ea-text-content"),this.#n=e.querySelector(".ea-close-icon"),this.closeWrap=this.#n,this.build(e,stylesheet)}get attrs(){return["show","text","icon","type","showClose","center"]}get iconList(){return{success:"icon-ok-circled",error:"icon-cancel-circled",warning:"icon-attention-alt",info:"icon-info"}}get show(){return this.getAttrBoolean("show")}set show(e){this.setAttribute("show",e);const t=document.querySelectorAll("ea-message");if(e){const e=t.length-1,s=this.#e.getBoundingClientRect().height;let n=e<=0?10:10*(e+1);this.#e.style.top=`${e*s+n}px`,this.#e.style.opacity=1}else{this.#e.style.top="-100%",this.#e.style.opacity=0;let e=this.#e.addEventListener("transitionend",(()=>{this.removeEventListener("transitionend",e),this.remove()}))}}get text(){return this.getAttribute("text")}set text(e){e&&(this.setAttribute("text",e),this.#s.innerText=e)}get type(){return this.getAttribute("type")||"info"}set type(e){this.setAttribute("type",e),this.#e.classList.add(`ea-message--${e}`),this.#t.icon=this.iconList[e]}get showClose(){return this.getAttrBoolean("showClose")||!1}set showClose(e){e&&(this.setAttribute("showClose",e),this.#n.style.display=e?"block":"none")}get center(){return this.getAttrBoolean("center")||!1}set center(e){e&&(this.setAttribute("center",e),this.#t.style.marginLeft=e?"auto":"0")}connectedCallback(){this.#n.addEventListener("click",(()=>{this.show=!1}))}disconnectedCallback(){const e=document.querySelectorAll("ea-message");e.length>0&&Array.from(e).forEach(((e,t)=>{const s=e.wrap.getBoundingClientRect().height;e.wrap.style.top=t*s+10*t+"px"}))}}customElements.get("ea-message")||customElements.define("ea-message",EaMessageElement),window.$message=new EaMessage;

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-message_wrap {\n  position: fixed;\n  left: 50%;\n  z-index: 999;\n  display: flex;\n  align-items: center;\n  padding: 15px 15px 15px 20px;\n  border: 1px solid #ebeef5;\n  border-radius: 4px;\n  top: -100%;\n  transform-origin: center;\n  opacity: 0;\n  transform: translate(-50%, 0);\n  min-width: 380px;\n  overflow: hidden;\n  background-color: black;\n  transition: opacity 0.3s, top 0.3s;\n}\n.ea-message_wrap .ea-icon-wrap {\n  margin-right: 0.5rem;\n  line-height: 1;\n}\n.ea-message_wrap .ea-text-content {\n  line-height: 1;\n  margin-right: auto;\n  vertical-align: middle;\n}\n.ea-message_wrap .ea-close-icon {\n  margin-left: auto;\n}\n.ea-message_wrap.ea-message--success {\n  background-color: #f0f9eb;\n  color: #67c23a;\n}\n.ea-message_wrap.ea-message--info {\n  background-color: #f4f4f5;\n  color: #909399;\n}\n.ea-message_wrap.ea-message--warning {\n  background-color: #fdf6ec;\n  color: #e6a23c;\n}\n.ea-message_wrap.ea-message--error {\n  background-color: #fef0f0;\n  color: #f56c6c;\n}\n";

package/components/ea-message/src/utils/MessageClass.js

@@ -0,0 +1 @@
+export class EaMessage{handleStringMsg(e,t){e.text=t,e.type="info",e.hasClose=!1}handleObjectMsg(e,t,n){for(const s in t)n.includes(s)&&(e[s]=t[s]);Object.keys(t).includes("type")||(e.type="info")}handleDuration(e,t=3){if(0===t)return;let n=setTimeout((()=>{e.show=!1,clearTimeout(n),n=null}),1e3*t+40)}open(e){const t=document.createElement("ea-message");if(document.body.appendChild(t),"string"==typeof e)this.handleStringMsg(t,e),this.handleDuration(t);else{if("object"!=typeof e)throw new Error("[EaMessage] TypeError");this.handleObjectMsg(t,e,t.attrs),this.handleDuration(t,e.duration)}return t.show=!0,{onClose(e){"function"==typeof e&&t.addEventListener("click",(function(){e()}))}}}}

package/components/ea-message-box/index.js

@@ -1,202 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement } from "../../utils/createElement.js"
-
-const stylesheet = `
-.ea-dialog_wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2024;
-}
-.ea-dialog_wrap .ea-dialog_board {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background-color: aliceblue;
-  width: 420px;
-  padding-bottom: 10px;
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  box-sizing: 0 2px 12px 0;
-  font-size: 18px;
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-}
-.ea-dialog_wrap .ea-dialog_board .ea-dialog_header {
-  padding: 15px 15px 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-title {
-  font-size: 18px;
-  line-height: 1;
-  color: #303133;
-}
-.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-close {
-  display: inline-block;
-  font-size: 16px;
-  color: #909399;
-  cursor: pointer;
-}
-.ea-dialog_wrap .ea-dialog_board .ea-dialog_content {
-  padding: 10px 15px;
-  color: #606266;
-  font-size: 14px;
-}
-.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer {
-  padding: 5px 15px 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer :first-child {
-  margin-right: 0.5rem;
-}
-`;
-
-export class EaMessageBoxElement extends Base {
-    #wrap;
-
-    #headerWrap;
-    #contentWrap;
-    #footerWrap;
-
-    #confirmButton;
-    #cancelButton;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-dialog_wrap';
-        wrap.role = 'dialog';
-
-        const headerTitle = createElement('span', 'ea-dialog_header-title');
-        const headerClose = createElement('i', 'ea-dialog_header-close icon-cancel');
-        headerClose.addEventListener('click', () => {
-            this.dispatchEvent(new CustomEvent('cancel'));
-        });
-        const header = createElement('div', 'ea-dialog_header', [headerTitle, headerClose]);
-
-        const content = createElement('div', 'ea-dialog_content');
-
-        const confirmButton = createElement('div', 'ea-dialog_footer-confirm-button');
-        const cancelButton = createElement('div', 'ea-dialog_footer-cancel-button');
-        const footer = createElement('div', 'ea-dialog_footer', [cancelButton, confirmButton]);
-
-        const board = createElement('div', 'ea-dialog_board', [header, content, footer]);
-        wrap.appendChild(board);
-
-        this.#wrap = wrap;
-        this.#headerWrap = headerTitle;
-        this.#contentWrap = content;
-        this.#footerWrap = footer;
-
-        this.#confirmButton = confirmButton;
-        this.#cancelButton = cancelButton;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- open 是否显示 -------
-    // #region
-    get open() {
-        return this.getAttrBoolean('open');
-    }
-
-    set open(flag) {
-        this.toggleAttr('open', flag);
-        this.#wrap.style.display = flag ? 'block' : 'none';
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- content 文字区域 -------
-    // #region
-    get content() {
-        return this.getAttribute('content');
-    }
-
-    set content(content) {
-        this.#contentWrap.innerHTML = content;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- title 标题 -------
-    // #region
-    get title() {
-        return this.getAttribute('title');
-    }
-
-    set title(title) {
-        this.#headerWrap.innerHTML = title;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- confirmButtonText 确认按钮文本 -------
-    // #region
-    get confirmButtonText() {
-        return this.getAttribute('confirmButtonText');
-    }
-
-    set confirmButtonText(val) {
-        const that = this;
-        this.setAttribute('confirmButtonText', val);
-
-        if (val || val !== '') {
-            this.#confirmButton.innerHTML = `<ea-button size="medium" type="primary">${val}</ea-button>`;
-
-            this.#confirmButton.addEventListener('click', () => {
-                that.dispatchEvent(new CustomEvent('confirm'));
-            });
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- cancelButtonText 取消按钮文本 -------
-    // #region
-    get cancelButtonText() {
-        return this.getAttribute('cancelButtonText');
-    }
-
-    set cancelButtonText(val) {
-        const that = this;
-        this.setAttribute('cancelButtonText', val);
-
-        if (val || val !== '') {
-            this.#cancelButton.innerHTML = `<ea-button size="medium">${val}</ea-button>`;
-
-            this.#cancelButton.addEventListener('click', () => {
-                that.dispatchEvent(new CustomEvent('cancel'));
-            });
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    init() {
-        const that = this;
-
-        this
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-message-box')) {
-    customElements.define('ea-message-box', EaMessageBoxElement);
-}
+import Base from"../Base.js";import{EaMessageBox}from"./src/utils/EaMessageBoxClass.js";import"../ea-button/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaMessageBoxElement extends Base{#t;#e;#o;#n;#a;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-dialog_wrap" part="container" role="dialog">\n                <div class="ea-dialog_board" part="dialog-body">\n                    <div class="ea-dialog_header" part="dialog-header">\n                        <span class="ea-dialog_header-title" part="dialog-title"></span>\n                        <ea-icon class="ea-dialog_header-close" icon="icon-cancel" part="close-icon"></ea-icon>\n                    </div>\n                    <div class="ea-dialog_content" part="dialog-content"></div>\n                    <div class="ea-dialog_footer" part="dialog-footer">\n                        <div class="ea-dialog_footer-cancel-button" part="footer-cancel-button"></div>\n                        <div class="ea-dialog_footer-confirm-button" part="footer-confirm-button"></div>\n                    </div>\n                </div>\n                <div class="ea-dialog_mask" part="mask-wrap"></div>\n            </div>\n        ',this.#t=t.querySelector(".ea-dialog_wrap"),this.#e=t.querySelector(".ea-dialog_header"),this.#o=t.querySelector(".ea-dialog_content"),this.#n=t.querySelector(".ea-dialog_footer"),this.#a=t.querySelector(".ea-dialog_footer-confirm-button"),this.#i=t.querySelector(".ea-dialog_footer-cancel-button"),this.build(t,stylesheet)}get open(){return this.getAttrBoolean("open")}set open(t){this.toggleAttr("open",t),this.#t.style.display=t?"block":"none"}get content(){return this.getAttribute("content")}set content(t){this.#o.innerHTML=t}get title(){return this.getAttribute("title")}set title(t){this.#e.innerHTML=t}get confirmButtonText(){return this.getAttribute("confirmButtonText")}set confirmButtonText(t){t&&(this.setAttribute("confirmButtonText",t),this.#a.innerHTML=`<ea-button size="medium" type="primary">${t}</ea-button>`,this.#a.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("confirm"))})))}get cancelButtonText(){return this.getAttribute("cancelButtonText")}set cancelButtonText(t){t&&(this.setAttribute("cancelButtonText",t),this.#i.innerHTML=`<ea-button size="medium">${t}</ea-button>`,this.#i.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("cancel"))})))}}customElements.get("ea-message-box")||customElements.define("ea-message-box",EaMessageBoxElement);const messageBox=new EaMessageBox;window.$alert=messageBox,window.$confirm=messageBox;

package/components/ea-message-box/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-dialog_wrap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2024;\n}\n.ea-dialog_wrap .ea-dialog_board {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: aliceblue;\n  width: 420px;\n  padding-bottom: 10px;\n  border-radius: 4px;\n  border: 1px solid #ebeef5;\n  box-sizing: 0 2px 12px 0;\n  font-size: 18px;\n  text-align: left;\n  overflow: hidden;\n  backface-visibility: hidden;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_header {\n  padding: 15px 15px 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-title {\n  font-size: 18px;\n  line-height: 1;\n  color: #303133;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-close {\n  display: inline-block;\n  font-size: 16px;\n  color: #909399;\n  cursor: pointer;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_content {\n  padding: 10px 15px;\n  color: #606266;\n  font-size: 14px;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer {\n  padding: 5px 15px 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer :first-child {\n  margin-right: 0.5rem;\n}\n";

package/components/ea-message-box/src/utils/EaMessageBoxClass.js

@@ -0,0 +1 @@
+import{createElement}from"../../../../utils/createElement.js";export class EaMessageBox{constructor(){}get attrs(){return["cancelButtonText","confirmButtonText"]}#e(e,t,n){n.forEach((n=>{t[n]&&(e[n]=t[n])}))}#t(e){e.remove()}open(e,t,n){const s=createElement("ea-message-box","");return document.body.appendChild(s),s.open=!0,s.content=e,s.title=t,this.#e(s,n,this.attrs),new Promise(((e,t)=>{s.addEventListener("cancel",(()=>{this.#t(s),t()})),s.addEventListener("confirm",(()=>{this.#t(s),e(!0)}))}))}}

package/components/ea-option/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaOption extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-option_wrap' part='container'>\n                <slot></slot>\n            </div>\n        ",this.#e=e.querySelector(".ea-option_wrap"),this.build(e,stylesheet)}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e)}get checked(){return this.getAttrBoolean("checked")||!1}set checked(e){this.setAttribute("checked",e),this.#e.classList.toggle("is-checked",e)}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.setAttribute("disabled",e),this.#e.classList.toggle("is-disabled",e)}connectedCallback(){this.value=this.value,this.disabled=this.disabled}}customElements.get("ea-option")||customElements.define("ea-option",EaOption);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-option_wrap {\n  position: relative;\n  padding: 0 20px;\n  height: 30px;\n  line-height: 30px;\n  font-size: 14px;\n  color: #606266;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ea-option_wrap.is-checked {\n  color: #409eff;\n  font-weight: 700;\n}\n.ea-option_wrap.is-disabled {\n  color: #c0c4cc;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.ea-option_wrap:hover {\n  background-color: #f5f7fa;\n}\n";

package/components/ea-option-gropu/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-option-group_wrap .ea-option-group_title {\n  padding-left: 20px;\n  font-size: 12px;\n  color: #909399;\n  line-height: 30px;\n}\n";export class EaOptionGroup extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-option-group_wrap' part='container'>\n                <div class='ea-option-group_title' part='title-wrap'></div>\n                <slot></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-option-group_wrap"),this.#e=t.querySelector(".ea-option-group_title"),this.build(t,stylesheet)}get label(){return this.getAttribute("label")||""}set label(t){this.setAttribute("label",t),this.#e.innerHTML=t}connectedCallback(){this.label=this.label}}customElements.get("ea-option-group")||customElements.define("ea-option-group",EaOptionGroup);

package/components/ea-page-header/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{createSlotElement,createElement}from"../../utils/createElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaPageHeader extends Base{#t;#e;#n;#a;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-page-header_wrap' part='container'>\n                <div class='ea-page-header_title-wrap' part='title-wrap'>\n                    <ea-icon class='ea-page-header_back-icon' part='back-icon' icon=\"icon-angle-left\"></ea-icon>\n                    <slot name=\"title\"></slot>\n                </div>\n                <div class='ea-page-header_divider' part='divider'>|</div>\n                <div class='ea-page-header_content-wrap' part='content-wrap'>\n                    <slot name=\"content\"></slot>\n                </div>\n            </div>\n        ",this.#t=t.querySelector(".ea-page-header_wrap"),this.#e=t.querySelector(".ea-page-header_title-wrap"),this.#a=t.querySelector('slot[name="title"]'),this.#n=t.querySelector(".ea-page-header_content-wrap"),this.#i=t.querySelector('slot[name="content"]'),this.build(t,stylesheet)}get title(){return this.getAttribute("title")||""}set title(t){t?(this.setAttribute("title",t),this.#a.innerText=t):(this.setAttribute("title","返回"),this.#a.innerText="返回")}get content(){return this.getAttribute("content")||""}set content(t){t?(this.setAttribute("content",t),this.#i.innerText=t):(this.setAttribute("content",""),this.#i.innerText="")}connectedCallback(){this.title=this.title,this.content=this.content,this.#e.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("back"))}))}}customElements.get("ea-page-header")||customElements.define("ea-page-header",EaPageHeader);

package/components/ea-page-header/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-page-header_wrap {\n  display: flex;\n  align-items: center;\n  line-height: 24px;\n}\n.ea-page-header_wrap .ea-page-header_title-wrap,\n.ea-page-header_wrap .ea-page-header_divider,\n.ea-page-header_wrap .ea-page-header_content-wrap {\n  line-height: 24px;\n}\n.ea-page-header_wrap .ea-page-header_title-wrap {\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  cursor: pointer;\n}\n.ea-page-header_wrap .ea-page-header_divider {\n  margin: 0 1rem;\n  margin-bottom: 1px;\n  font-size: 14px;\n  height: 14px;\n  overflow: hidden;\n  color: #dcdfe6;\n  line-height: 1;\n  vertical-align: middle;\n}\n.ea-page-header_wrap .ea-page-header_content-wrap {\n  font-size: 18px;\n  color: #303133;\n  line-height: 1;\n}\n";