easy-component-ui 2.0.5 → 2.1.1

package/components/ea-menu-item-group/index.scss

@@ -0,0 +1,60 @@
+.ea-menu-item-group_wrap {
+  --normal-bgc: #fff;
+  --normal-text-color: #303133;
+
+  --actived-text-color: #409eff;
+  --actived-bgc: #fff;
+
+  width: 100%;
+
+  &.is-actived {
+    .ea-submenu_title_wrap {
+      color: var(--actived-text-color);
+      border-color: var(--actived-text-color);
+    }
+  }
+
+  .ea-submenu_title_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    box-sizing: border-box;
+    padding: 0 20px;
+    border-bottom: 2px solid;
+    border-color: transparent;
+
+    height: 60px;
+    line-height: 60px;
+
+    font-size: 14px;
+    color: var(--normal-text-color);
+    background-color: var(--normal-bgc);
+    white-space: nowrap;
+    cursor: pointer;
+
+    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+  }
+
+  .ea-submenu_items_wrap {
+    margin: 0 20px;
+
+    height: 0;
+    overflow: hidden;
+
+    transition: height 0.3s;
+  }
+
+  .ea-submenu_dropdown_icon {
+    transform: rotate(-90deg);
+    transition: transform 0.3s;
+  }
+
+  &.is-open {
+    .ea-submenu_dropdown_icon {
+      transform: rotate(0deg);
+    }
+  }
+}

package/components/ea-menu-item-group/src/style/stylesheet.js

@@ -1 +1,44 @@
-export const stylesheet="\n.ea-menu-item-group_wrap {\n  --normal-bgc: #fff;\n  --normal-text-color: #303133;\n  --actived-text-color: #409eff;\n  --actived-bgc: #fff;\n  width: 100%;\n}\n.ea-menu-item-group_wrap.is-actived .ea-submenu_title_wrap {\n  color: var(--actived-text-color);\n  border-color: var(--actived-text-color);\n}\n.ea-menu-item-group_wrap .ea-submenu_title_wrap {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 20px;\n  border-bottom: 2px solid;\n  border-color: transparent;\n  height: 60px;\n  line-height: 60px;\n  font-size: 14px;\n  color: var(--normal-text-color);\n  background-color: var(--normal-bgc);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: border-color 0.3s, background-color 0.3s, color 0.3s;\n}\n.ea-menu-item-group_wrap .ea-submenu_items_wrap {\n  margin: 0 20px;\n  height: 0;\n  overflow: hidden;\n  transition: height 0.3s;\n}\n.ea-menu-item-group_wrap .ea-submenu_dropdown_icon {\n  transform: rotate(-90deg);\n  transition: transform 0.3s;\n}\n.ea-menu-item-group_wrap.is-open .ea-submenu_dropdown_icon {\n  transform: rotate(0deg);\n}\n";
+export const stylesheet = `
+.ea-menu-item-group_wrap {
+  --normal-bgc: #fff;
+  --normal-text-color: #303133;
+  --actived-text-color: #409eff;
+  --actived-bgc: #fff;
+  width: 100%;
+}
+.ea-menu-item-group_wrap.is-actived .ea-submenu_title_wrap {
+  color: var(--actived-text-color);
+  border-color: var(--actived-text-color);
+}
+.ea-menu-item-group_wrap .ea-submenu_title_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+  border-bottom: 2px solid;
+  border-color: transparent;
+  height: 60px;
+  line-height: 60px;
+  font-size: 14px;
+  color: var(--normal-text-color);
+  background-color: var(--normal-bgc);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+}
+.ea-menu-item-group_wrap .ea-submenu_items_wrap {
+  margin: 0 20px;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s;
+}
+.ea-menu-item-group_wrap .ea-submenu_dropdown_icon {
+  transform: rotate(-90deg);
+  transition: transform 0.3s;
+}
+.ea-menu-item-group_wrap.is-open .ea-submenu_dropdown_icon {
+  transform: rotate(0deg);
+}
+`;

package/components/ea-message/index.css

@@ -0,0 +1,47 @@
+.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;
+  margin-right: auto;
+  vertical-align: middle;
+}
+.ea-message_wrap .ea-close-icon {
+  margin-left: auto;
+  display: none;
+}
+.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;
+}

package/components/ea-message/index.js

@@ -1 +1,171 @@
-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;
+// @ts-nocheck
+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 {
+    #wrap;
+
+    #icon;
+
+    #textContent;
+
+    #closeWrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-message_wrap" part="container">
+                <ea-icon class="ea-icon-wrap" part="icon"></ea-icon>
+                <div class="ea-text-content" part="content-wrap"></div>
+                <ea-icon class="ea-close-icon" icon="icon-cancel"></ea-icon>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-message_wrap');
+        this.wrap = this.#wrap;
+        this.#icon = shadowRoot.querySelector('.ea-icon-wrap');
+        this.#textContent = shadowRoot.querySelector('.ea-text-content');
+        this.#closeWrap = shadowRoot.querySelector('.ea-close-icon');
+        this.closeWrap = this.#closeWrap;
+
+        this.build(shadowRoot, 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"
+        };
+    }
+
+    // ------- 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 {
+            this.#wrap.style.top = `-100%`;
+            this.#wrap.style.opacity = 0;
+
+            let event = this.#wrap.addEventListener('transitionend', () => {
+                this.removeEventListener('transitionend', event);
+                this.remove();
+            });
+        }
+
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- text 提示框的文字 -------
+    // #region
+    get text() {
+        return this.getAttribute('text');
+    }
+
+    set text(value) {
+        if (!value) return;
+        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.icon = this.iconList[value];
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- showClose 提示框的关闭按钮 -------
+    // #region
+    get showClose() {
+        return this.getAttrBoolean('showClose') || false;
+    }
+
+    set showClose(value) {
+        if (!value) return;
+
+        this.setAttribute('showClose', value);
+
+        this.#closeWrap.style.display = value ? "block" : "none";
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- center 提示框是否居中 -------
+    // #region
+    get center() {
+        return this.getAttrBoolean('center') || false;
+    }
+
+    set center(value) {
+        if (!value) return;
+
+        this.setAttribute('center', value);
+
+        this.#icon.style.marginLeft = value ? `auto` : `0`;
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        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);
+}
+
+window.$message = new EaMessage();

package/components/ea-message/index.scss

@@ -0,0 +1,70 @@
+@import "../ea-ui-base-style.scss";
+
+$themes-light: (
+  success: (
+    bgc: #f0f9eb,
+    text: #67c23a,
+  ),
+  info: (
+    bgc: #f4f4f5,
+    text: #909399,
+  ),
+  warning: (
+    bgc: #fdf6ec,
+    text: #e6a23c,
+  ),
+  error: (
+    bgc: #fef0f0,
+    text: #f56c6c,
+  ),
+);
+
+.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-icon-wrap {
+    margin-right: 0.5rem;
+
+    line-height: 1;
+  }
+
+  .ea-text-content {
+    line-height: 1;
+    margin-right: auto;
+
+    vertical-align: middle;
+  }
+
+  .ea-close-icon {
+    margin-left: auto;
+    display: none;
+  }
+
+  @each $theme-name, $theme-color in $themes-light {
+    &.ea-message--#{$theme-name} {
+      background-color: map-get($theme-color, bgc);
+      color: map-get($theme-color, text);
+    }
+  }
+}

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

@@ -1 +1,48 @@
-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";
+export 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;
+  margin-right: auto;
+  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;
+}
+`;

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

@@ -1 +1,67 @@
-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()}))}}}}
+// @ts-nocheck
+export class EaMessage {
+
+    /**
+     * 处理字符串型消息
+     * @param {Element} el EaMessage元素
+     * @param {String} tip 文本
+     */
+    handleStringMsg(el, tip) {
+        el.text = tip;
+        el.type = "info";
+        el.hasClose = false;
+    }
+
+    /**
+     * 处理对象型消息
+     * @param {Element} el EaMessage元素
+     * @param {String} tips 文本
+     * @param {*} attrs 属性列表
+     */
+    handleObjectMsg(el, tips, attrs) {
+        for (const k in tips) {
+            if (attrs.includes(k)) el[k] = tips[k];
+        }
+
+        if (!Object.keys(tips).includes("type")) el.type = "info";
+    }
+
+    /**
+     * 处理消失的时长
+     * @param {*} el EaMessage元素
+     * @param {*} duration 时间间隔
+     */
+    handleDuration(el, duration = 3) {
+        if (duration === 0) return;
+
+        let timer = setTimeout(() => {
+            el.show = false;
+
+            clearTimeout(timer);
+            timer = null;
+        }, duration * 1000 + 40);
+    }
+
+    open(tip) {
+        const eaMessage = document.createElement('ea-message');
+        document.body.appendChild(eaMessage);
+
+        if (typeof tip === 'string') {
+            this.handleStringMsg(eaMessage, tip);
+            this.handleDuration(eaMessage);
+        } else if (typeof tip === 'object') {
+            this.handleObjectMsg(eaMessage, tip, eaMessage.attrs);
+            this.handleDuration(eaMessage, tip.duration);
+        } else throw new Error("[EaMessage] TypeError");
+
+        eaMessage.show = true;
+
+        return {
+            onClose(fn) {
+                if (typeof fn === 'function') eaMessage.addEventListener('click', function () {
+                    fn();
+                })
+            }
+        }
+    }
+}

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

@@ -0,0 +1,85 @@
+:host {
+  --invalid-message: "";
+}
+
+.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: #fff;
+  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_content .ea-dialog_content-input {
+  display: none;
+}
+.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;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content {
+  position: relative;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content .ea-dialog_content-input {
+  margin-top: 15px;
+  padding-bottom: 15px;
+  display: block;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content .ea-dialog_content-input::after {
+  content: var(--invalid-message);
+  position: absolute;
+  display: block;
+  bottom: 0;
+  transform-origin: top center;
+  transform: scaleY(0);
+  transition: transform 0.3s;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content .ea-dialog_content-input[aria-invalid=true]::after {
+  transform-origin: top center;
+  transform: scaleY(1);
+  color: #f56c6c;
+}