easy-component-ui 2.1.1 → 3.0.0

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

@@ -1,211 +0,0 @@
-import Base from '../Base.js';
-
-import { EaMessageBox } from './src/utils/EaMessageBoxClass.js';
-import "../ea-button/index.js"
-import "../ea-input/index.js"
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaMessageBoxElement extends Base {
-    #wrap;
-
-    #headerWrap;
-
-    #contentWrap;
-    #contentText
-    #contentInput;
-
-    #footerWrap;
-
-    #confirmButton;
-    #cancelButton;
-
-    #reg;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-dialog_wrap" part="container" role="dialog">
-                <div class="ea-dialog_board" part="dialog-body">
-                    <div class="ea-dialog_header" part="dialog-header">
-                        <span class="ea-dialog_header-title" part="dialog-title"></span>
-                        <ea-icon class="ea-dialog_header-close" icon="icon-cancel" part="close-icon"></ea-icon>
-                    </div>
-                    <div class="ea-dialog_content" part="dialog-content">
-                        <div class="ea-dialog_content-text" part="dialog-content-text"></div>
-                        <ea-input class="ea-dialog_content-input" part="dialog-input"></ea-input>
-                    </div>
-                    <div class="ea-dialog_footer" part="dialog-footer">
-                        <div class="ea-dialog_footer-cancel-button" part="footer-cancel-button"></div>
-                        <div class="ea-dialog_footer-confirm-button" part="footer-confirm-button"></div>
-                    </div>
-                </div>
-                <div class="ea-dialog_mask" part="mask-wrap"></div>
-            </div>
-        `;
-        this.#wrap = shadowRoot.querySelector('.ea-dialog_wrap');
-        this.#headerWrap = shadowRoot.querySelector('.ea-dialog_header');
-        this.#contentWrap = shadowRoot.querySelector('.ea-dialog_content');
-        this.#contentText = shadowRoot.querySelector('.ea-dialog_content-text');
-        this.#contentInput = shadowRoot.querySelector('.ea-dialog_content-input');
-        this.#footerWrap = shadowRoot.querySelector('.ea-dialog_footer');
-
-        this.#confirmButton = shadowRoot.querySelector('.ea-dialog_footer-confirm-button');
-        this.#cancelButton = shadowRoot.querySelector('.ea-dialog_footer-cancel-button');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- 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.#contentText.innerHTML = content;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- isPrompt 是否为prompt -------
-    // #region
-    get isPrompt() {
-        return this.getAttrBoolean('isPrompt');
-    }
-
-    set isPrompt(isPrompt) {
-        this.toggleAttr('isPrompt', isPrompt);
-        this.#wrap?.classList.toggle('is-prompt', isPrompt);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- reg 当前输入框的验证规则 -------
-    // #region
-    get reg() {
-        return this.#reg;
-    }
-
-    set reg(reg) {
-        if (!this.isPrompt) return;
-        this.#reg = reg;
-
-        this.#contentInput.addEventListener('change', (e) => {
-            const value = e.detail.value;
-            const input = e.target.shadowRoot.querySelector('.ea-input_inner');
-            input.setAttribute('aria-invalid', !reg.test(value));
-            this.#contentInput.setAttribute('aria-invalid', !reg.test(value));
-
-            if (reg.test(value)) {
-
-            } else {
-
-            }
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- inputPlaceholder 输入框提示 -------
-    // #region
-    get inputPlaceholder() {
-        return this.getAttribute('input-placeholder');
-    }
-
-    set inputPlaceholder(placeholder) {
-        if (!placeholder) return;
-        this.#contentInput.placeholder = placeholder;
-    }
-    // #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) {
-        if (!val) return;
-
-        this.setAttribute('confirmButtonText', val);
-        this.#confirmButton.innerHTML = `<ea-button size="medium" type="primary">${val}</ea-button>`;
-        this.#confirmButton.addEventListener('click', () => {
-
-            if (this.isPrompt) {
-                this.dispatchEvent(new CustomEvent('confirm', {
-                    detail: {
-                        target: this.#contentInput,
-                        value: this.#contentInput.value,
-                    }
-                }));
-            } else {
-                this.dispatchEvent(new CustomEvent('confirm'));
-            }
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- cancelButtonText 取消按钮文本 -------
-    // #region
-    get cancelButtonText() {
-        return this.getAttribute('cancelButtonText');
-    }
-
-    set cancelButtonText(val) {
-        if (!val) return;
-
-        this.setAttribute('cancelButtonText', val);
-        this.#cancelButton.innerHTML = `<ea-button size="medium">${val}</ea-button>`;
-        this.#cancelButton.addEventListener('click', () => {
-            this.dispatchEvent(new CustomEvent('cancel'));
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.dispatchEvent(new CustomEvent('ready'));
-    }
-}
-
-if (!customElements.get('ea-message-box')) {
-    customElements.define('ea-message-box', EaMessageBoxElement);
-}
-
-const messageBox = new EaMessageBox(false);
-
-window.$alert = messageBox;
-window.$confirm = messageBox;
-
-const promptBox = new EaMessageBox(true);
-window.$prompt = promptBox;

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

@@ -1,113 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-: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_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_header {
-      padding: 15px 15px 10px;
-
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .ea-dialog_header-title {
-        font-size: 18px;
-        line-height: 1;
-        color: #303133;
-      }
-
-      .ea-dialog_header-close {
-        display: inline-block;
-        font-size: 16px;
-        color: #909399;
-        cursor: pointer;
-      }
-    }
-
-    .ea-dialog_content {
-      padding: 10px 15px;
-      color: #606266;
-
-      font-size: 14px;
-
-      .ea-dialog_content-input {
-        display: none;
-      }
-    }
-
-    .ea-dialog_footer {
-      padding: 5px 15px 0;
-
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      :first-child {
-        margin-right: 0.5rem;
-      }
-    }
-  }
-
-  &.is-prompt {
-    .ea-dialog_board {
-      .ea-dialog_content {
-        position: relative;
-
-        .ea-dialog_content-input {
-          margin-top: 15px;
-          padding-bottom: 15px;
-          display: block;
-
-          &::after {
-            content: var(--invalid-message);
-            position: absolute;
-            display: block;
-            bottom: 0;
-            transform-origin: top center;
-            transform: scaleY(0);
-
-            transition: transform 0.3s;
-          }
-
-          &[aria-invalid="true"] {
-            &::after {
-              transform-origin: top center;
-              transform: scaleY(1);
-
-              color: #f56c6c;
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,87 +0,0 @@
-export const stylesheet = `
-: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;
-}
-`;

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

@@ -1,60 +0,0 @@
-import { createElement } from "../../../../utils/createElement.js"
-
-export class EaMessageBox {
-    constructor(isPrompt) {
-        this.isPrompt = isPrompt;
-    }
-
-    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 EaMessageBox = createElement('ea-message-box');
-        EaMessageBox.addEventListener('ready', () => {
-            if (this.isPrompt) EaMessageBox.isPrompt = true;
-            EaMessageBox.reg = new RegExp(options.reg);
-            EaMessageBox.style.setProperty('--invalid-message', `"${options.invalidMessage}"`);
-            EaMessageBox.inputPlaceholder = options.inputPlaceholder;
-        });
-        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', () => {
-                this.#close(EaMessageBox);
-                reject();
-            });
-
-            EaMessageBox.addEventListener('confirm', (e) => {
-                if (this.isPrompt && !options.reg.test(e.detail.value)) {
-                    e.detail.target.setAttribute('aria-invalid', true);
-                    e.detail.target.focus();
-
-                    return;
-                }
-
-                this.#close(EaMessageBox);
-                if (this.isPrompt) resolve(e.detail.value);
-                else resolve(true);
-            });
-        });
-    }
-
-}

package/components/ea-option/index.css

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

package/components/ea-option/index.js

@@ -1,74 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaOption extends Base {
-    #container;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class='ea-option_wrap' part='container'>
-                <slot></slot>
-            </div>
-        `;
-
-        this.#container = shadowRoot.querySelector('.ea-option_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- value 选项值 -------
-    // #region
-    get value() {
-        return this.getAttribute('value') || '';
-    }
-
-    set value(val) {
-        this.setAttribute('value', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- checked 选项是否选中 -------
-    // #region
-    get checked() {
-        return this.getAttrBoolean('checked') || false;
-    }
-
-    set checked(val) {
-        this.setAttribute('checked', val);
-
-        this.#container.classList.toggle('is-checked', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 选项是否禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled') || false;
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val);
-
-        this.#container.classList.toggle('is-disabled', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.value = this.value;
-
-        this.disabled = this.disabled;
-    }
-}
-
-if (!customElements.get('ea-option')) {
-    customElements.define('ea-option', EaOption);
-}

package/components/ea-option/index.scss

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

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

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

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

@@ -1,6 +0,0 @@
-.ea-option-group_wrap .ea-option-group_title {
-  padding-left: 20px;
-  font-size: 12px;
-  color: #909399;
-  line-height: 30px;
-}

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

@@ -1,57 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-const stylesheet = `
-.ea-option-group_wrap .ea-option-group_title {
-  padding-left: 20px;
-  font-size: 12px;
-  color: #909399;
-  line-height: 30px;
-}
-`;
-
-export class EaOptionGroup extends Base {
-    #container;
-
-    #titleWrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class='ea-option-group_wrap' part='container'>
-                <div class='ea-option-group_title' part='title-wrap'></div>
-                <slot></slot>
-            </div>
-        `;
-
-        this.#container = shadowRoot.querySelector('.ea-option-group_wrap');
-        this.#titleWrap = shadowRoot.querySelector('.ea-option-group_title');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- label 标题  -------
-    // #region
-    get label() {
-        return this.getAttribute('label') || '';
-    }
-
-    set label(val) {
-        this.setAttribute('label', val);
-
-        this.#titleWrap.innerHTML = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.label = this.label;
-    }
-}
-
-if (!customElements.get('ea-option-group')) {
-    customElements.define('ea-option-group', EaOptionGroup);
-}

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

@@ -1,8 +0,0 @@
-.ea-option-group_wrap {
-  .ea-option-group_title {
-    padding-left: 20px;
-    font-size: 12px;
-    color: #909399;
-    line-height: 30px;
-  }
-}