easy-component-ui 0.0.2 → 1.0.3

package/components/ea-loading/index.js

@@ -0,0 +1,218 @@
+// @ts-nocheck
+import { createElement, createSlotElement } from '../../utils/createElement.js';
+import Base from '../Base.js';
+import "../ea-icon/index.js"
+
+const stylesheet = `
+.ea-loading_wrap {
+  position: relative;
+}
+.ea-loading_wrap i {
+  opacity: 0;
+  transition: opacity 0.2s;
+  color: #409eff;
+}
+.ea-loading_wrap .ea-loading_text {
+  color: #409eff;
+  margin-left: 0.5rem;
+}
+.ea-loading_wrap.ea-loading_wrap--fullscreen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: hsla(0, 0%, 100%, 0.9);
+  z-index: 1;
+  transition: background-color 0.2s;
+}
+.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask i {
+  opacity: 1;
+  font-size: 2rem;
+}
+`;
+
+export class EaLoading extends Base {
+    #wrap;
+
+    #loadingWrap;
+
+    #spinner;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-loading_wrap';
+
+        const spinner = createElement('i', 'ea-loading_spinner animate-spin');
+        const loading = createElement('div', 'ea-loading', spinner);
+        const loadingWrap = createElement('div', 'ea-loading_mask', loading);
+        wrap.appendChild(loadingWrap);
+
+        const slot = createSlotElement('')
+        wrap.appendChild(slot);
+
+        this.#wrap = wrap;
+        this.#loadingWrap = loadingWrap;
+        this.#spinner = spinner;
+
+        this.build(shadowRoot, stylesheet);
+        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
+
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- loading 加载状态 -------
+    // #region
+    get loading() {
+        return this.getAttrBoolean('loading') || false;
+    }
+
+    set loading(flag) {
+        this.toggleAttr('loading', flag);
+
+        if (flag) {
+            this.#wrap.classList.add('ea-loading_wrap--loading');
+            this.#loadingWrap.style.display = "flex";
+        } else {
+            this.#wrap.classList.remove('ea-loading_wrap--loading');
+            this.#loadingWrap.style.display = "none";
+        }
+
+        this.handleFullscreen(this.fullscreen, flag, this.lock);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- spinner 加载图标 -------
+    // #region
+    get spinner() {
+        return this.getAttribute('spinner') || "icon-spin6";
+    }
+
+    set spinner(val) {
+        this.setAttribute('spinner', val);
+
+        this.#spinner.className = `ea-loading_spinner animate-spin ${val}`;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- spinner-size 加载图标大小 -------
+    // #region
+    get spinnerSize() {
+        return this.getAttrNumber('spinner-size') || 16;
+    }
+
+    set spinnerSize(val) {
+        this.setAttribute('spinner-size', val);
+
+        this.#spinner.style.fontSize = `${val}px`;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- background 背景颜色 -------
+    // #region
+    get background() {
+        return this.getAttribute('background') || "hsla(0, 0%, 100%, 0.9)";
+    }
+
+    set background(val) {
+        this.setAttribute('background', val);
+
+        this.#loadingWrap.style.backgroundColor = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- text 文本 -------
+    // #region
+    get text() {
+        return this.getAttribute('text') || "";
+    }
+
+    set text(val) {
+        this.setAttribute('text', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- fullscreen 全屏 -------
+    // #region
+    get fullscreen() {
+        return this.getAttrBoolean('fullscreen') || false;
+    }
+
+    set fullscreen(val) {
+        this.setAttribute('fullscreen', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- lock 全屏是否锁定 -------
+    // #region
+    get lock() {
+        return this.getAttrBoolean('lock') || false;
+    }
+
+    set lock(val) {
+        this.setAttribute('lock', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    initTextElement(text) {
+        const el = createElement('div', 'ea-loading_text');
+        el.innerHTML = text;
+        this.#loadingWrap.appendChild(el);
+    }
+
+    handleFullscreen(isFullscreen, isLoading, isLock) {
+        if (isFullscreen) {
+            this.#wrap.classList.toggle('ea-loading_wrap--fullscreen', isLoading);
+            this.#wrap.style.display = isLoading ? 'block' : 'none';
+
+            if (isLock) document.body.style.overflow = isLoading ? 'hidden' : 'auto';
+        }
+    }
+
+    init() {
+        const that = this;
+
+        this.fullscreen = this.fullscreen;
+
+
+
+        this.loading = this.loading;
+
+        this.spinnerSize = this.spinnerSize;
+
+        this.spinner = this.spinner;
+
+        this.background = this.background;
+
+        if (this.text) this.initTextElement(this.text);
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!customElements.get('ea-loading')) {
+    customElements.define('ea-loading', EaLoading);
+}

package/components/ea-message/MessageClass.js

@@ -0,0 +1,71 @@
+// @ts-nocheck
+export class EaMessage {
+    constructor() {
+    }
+
+    /**
+     * 处理字符串型消息
+     * @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);
+        }
+
+        setTimeout(() => {
+            eaMessage.show = true;
+        }, 20);
+
+        return {
+            onClose(fn) {
+                if (typeof fn === 'function') eaMessage.addEventListener('click', function () {
+                    fn();
+                })
+            }
+        }
+    }
+}

package/components/ea-message/index.js

@@ -0,0 +1,233 @@
+// @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);
+}

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

@@ -0,0 +1,48 @@
+import { createElement } from "../../utils/createElement.js"
+
+export class EaMessageBox {
+    constructor() {
+
+    }
+
+    get attrs() {
+        return ["cancelButtonText", "confirmButtonText"];
+    }
+
+    #handleElementAttrs(el, options, attrs) {
+        attrs.forEach(attr => {
+            if (options[attr]) el[attr] = options[attr];
+        });
+    }
+
+    #close(el) {
+        el.remove();
+    }
+
+    open(content, title, options) {
+        const that = this;
+
+        const EaMessageBox = createElement('ea-message-box', '');
+        document.body.appendChild(EaMessageBox);
+
+        EaMessageBox.open = true;
+
+        EaMessageBox.content = content;
+        EaMessageBox.title = title;
+
+        this.#handleElementAttrs(EaMessageBox, options, this.attrs);
+
+        return new Promise((resolve, reject) => {
+            EaMessageBox.addEventListener('cancel', () => {
+                that.#close(EaMessageBox);
+                reject();
+            });
+
+            EaMessageBox.addEventListener('confirm', () => {
+                that.#close(EaMessageBox);
+                resolve(true);
+            });
+        });
+    }
+
+}