easy-component-ui 2.1.1 → 3.0.0

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

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

@@ -1,47 +0,0 @@
-.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,171 +0,0 @@
-// @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

@@ -1,70 +0,0 @@
-@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,48 +0,0 @@
-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,67 +0,0 @@
-// @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

@@ -1,85 +0,0 @@
-: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;
-}