easy-component-ui 2.1.0 → 3.0.0

package/components/ea-tag/index.css

@@ -1,90 +0,0 @@
-.ea-tag_wrap {
-  display: inline-block;
-  height: 2rem;
-  line-height: 30px;
-  white-space: nowrap;
-  padding: 0 0.625rem;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-}
-.ea-tag_wrap ea-icon {
-  font-size: 1rem;
-  margin-left: 0.5rem;
-  cursor: pointer;
-}
-.ea-tag_wrap.ea-tag--default {
-  color: #409eff;
-  background-color: #ecf5ff;
-  border-color: #dcdfe6;
-}
-.ea-tag_wrap.ea-tag--default.ea-tag--dark {
-  color: #fff;
-  background-color: #409eff;
-  border-color: #409eff;
-}
-.ea-tag_wrap.ea-tag--default.ea-tag--plain {
-  color: #409eff;
-  background-color: #fff;
-  border-color: #dcdfe6;
-}
-.ea-tag_wrap.ea-tag--success {
-  color: #67c23a;
-  background-color: #f0f9eb;
-  border-color: #e1f3d8;
-}
-.ea-tag_wrap.ea-tag--success.ea-tag--dark {
-  color: #fff;
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.ea-tag_wrap.ea-tag--success.ea-tag--plain {
-  color: #67c23a;
-  background-color: #fff;
-  border-color: #e1f3d8;
-}
-.ea-tag_wrap.ea-tag--info {
-  color: #909399;
-  background-color: #f4f4f5;
-  border-color: #e9e9eb;
-}
-.ea-tag_wrap.ea-tag--info.ea-tag--dark {
-  color: #fff;
-  background-color: #909399;
-  border-color: #909399;
-}
-.ea-tag_wrap.ea-tag--info.ea-tag--plain {
-  color: #909399;
-  background-color: #fff;
-  border-color: #e9e9eb;
-}
-.ea-tag_wrap.ea-tag--warning {
-  color: #e6a23c;
-  background-color: #fdf6ec;
-  border-color: #faecd8;
-}
-.ea-tag_wrap.ea-tag--warning.ea-tag--dark {
-  color: #fff;
-  background-color: #e6a23c;
-  border-color: #e6a23c;
-}
-.ea-tag_wrap.ea-tag--warning.ea-tag--plain {
-  color: #e6a23c;
-  background-color: #fff;
-  border-color: #faecd8;
-}
-.ea-tag_wrap.ea-tag--danger {
-  color: #f56c6c;
-  background-color: #fef0f0;
-  border-color: #fbc4c4;
-}
-.ea-tag_wrap.ea-tag--danger.ea-tag--dark {
-  color: #fff;
-  background-color: #f56c6c;
-  border-color: #f56c6c;
-}
-.ea-tag_wrap.ea-tag--danger.ea-tag--plain {
-  color: #f56c6c;
-  background-color: #fff;
-  border-color: #fbc4c4;
-}

package/components/ea-tag/index.js

@@ -1,107 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-import "../ea-icon/index.js"
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaTag extends Base {
-  #wrap;
-  #closeSlot;
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    shadowRoot.innerHTML = `
-      <div class="ea-tag_wrap" part="container">
-        <slot></slot>
-      </div>
-    `;
-
-    this.#wrap = shadowRoot.querySelector('.ea-tag_wrap');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  // ------- type tag类型样式 -------
-  // #region
-  get type() {
-    return this.getAttribute('type') || "default";
-  }
-
-  set type(value) {
-    this.setAttribute('type', value);
-    this.#wrap.classList.add(`ea-tag--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- closable 是否显示可关闭 -------
-  // #region
-  get closable() {
-    return this.getAttrBoolean('closable');
-  }
-
-  set closable(value) {
-    this.toggleAttr('closable', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- effect 不同主题 -------
-  // #region
-  get effect() {
-    return this.getAttribute('effect') || "light";
-  }
-
-  set effect(value) {
-    if (value === "light") return;
-
-    this.setAttribute('effect', value);
-    this.#wrap.classList.add(`ea-tag--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-  #initCloseEvent() {
-    if (!this.closable) return;
-
-    const closeIcon = document.createElement('ea-icon');
-    closeIcon.icon = 'icon-cancel-circled2';
-    closeIcon.part = 'close-icon';
-
-    closeIcon.addEventListener('mouseenter', (e) => {
-      closeIcon.icon = 'icon-cancel-circled';
-    });
-
-    closeIcon.addEventListener('mouseleave', (e) => {
-      closeIcon.icon = 'icon-cancel-circled2';
-    });
-
-    closeIcon.addEventListener('click', (e) => {
-      this.dispatchEvent(new CustomEvent('close', {
-        detail: {
-          value: this.innerText
-        },
-        bubbles: true,
-      }));
-    });
-
-    this.#wrap.appendChild(closeIcon);
-  }
-
-  connectedCallback() {
-    // 主题
-    this.effect = this.effect;
-
-    // tag类型
-    this.type = this.type;
-
-    // 显示可关闭
-    this.closable = this.closable;
-    this.#initCloseEvent();
-  }
-}
-
-if (!customElements.get('ea-tag')) {
-  customElements.define('ea-tag', EaTag);
-}

package/components/ea-tag/index.scss

@@ -1,71 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-@mixin ea-tag-theme($theme-name, $text-color, $bgc-color, $border-color) {
-  &.ea-tag--#{$theme-name} {
-    color: $text-color;
-    background-color: $bgc-color;
-    border-color: $border-color;
-
-    &.ea-tag--dark {
-      color: #fff;
-      background-color: $text-color;
-      border-color: $text-color;
-    }
-
-    &.ea-tag--plain {
-      color: $text-color;
-      background-color: #fff;
-      border-color: $border-color;
-    }
-  }
-}
-
-.ea-tag_wrap {
-  display: inline-block;
-
-  height: 2rem;
-  line-height: 30px;
-  white-space: nowrap;
-
-  padding: 0 0.625rem;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-
-  ea-icon {
-    font-size: 1rem;
-    margin-left: 0.5rem;
-    cursor: pointer;
-  }
-
-  @include ea-tag-theme(
-    "default",
-    $color-tag-default-text,
-    $color-tag-default-bgc,
-    $color-tag-default-border
-  );
-  @include ea-tag-theme(
-    "success",
-    $color-tag-success-text,
-    $color-tag-success-bgc,
-    $color-tag-success-border
-  );
-  @include ea-tag-theme(
-    "info",
-    $color-tag-info-text,
-    $color-tag-info-bgc,
-    $color-tag-info-border
-  );
-  @include ea-tag-theme(
-    "warning",
-    $color-tag-warning-text,
-    $color-tag-warning-bgc,
-    $color-tag-warning-border
-  );
-  @include ea-tag-theme(
-    "danger",
-    $color-tag-danger-text,
-    $color-tag-danger-bgc,
-    $color-tag-danger-border
-  );
-}

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

@@ -1,92 +0,0 @@
-export const stylesheet = `
-.ea-tag_wrap {
-  display: inline-block;
-  height: 2rem;
-  line-height: 30px;
-  white-space: nowrap;
-  padding: 0 0.625rem;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-}
-.ea-tag_wrap ea-icon {
-  font-size: 1rem;
-  margin-left: 0.5rem;
-  cursor: pointer;
-}
-.ea-tag_wrap.ea-tag--default {
-  color: #409eff;
-  background-color: #ecf5ff;
-  border-color: #dcdfe6;
-}
-.ea-tag_wrap.ea-tag--default.ea-tag--dark {
-  color: #fff;
-  background-color: #409eff;
-  border-color: #409eff;
-}
-.ea-tag_wrap.ea-tag--default.ea-tag--plain {
-  color: #409eff;
-  background-color: #fff;
-  border-color: #dcdfe6;
-}
-.ea-tag_wrap.ea-tag--success {
-  color: #67c23a;
-  background-color: #f0f9eb;
-  border-color: #e1f3d8;
-}
-.ea-tag_wrap.ea-tag--success.ea-tag--dark {
-  color: #fff;
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.ea-tag_wrap.ea-tag--success.ea-tag--plain {
-  color: #67c23a;
-  background-color: #fff;
-  border-color: #e1f3d8;
-}
-.ea-tag_wrap.ea-tag--info {
-  color: #909399;
-  background-color: #f4f4f5;
-  border-color: #e9e9eb;
-}
-.ea-tag_wrap.ea-tag--info.ea-tag--dark {
-  color: #fff;
-  background-color: #909399;
-  border-color: #909399;
-}
-.ea-tag_wrap.ea-tag--info.ea-tag--plain {
-  color: #909399;
-  background-color: #fff;
-  border-color: #e9e9eb;
-}
-.ea-tag_wrap.ea-tag--warning {
-  color: #e6a23c;
-  background-color: #fdf6ec;
-  border-color: #faecd8;
-}
-.ea-tag_wrap.ea-tag--warning.ea-tag--dark {
-  color: #fff;
-  background-color: #e6a23c;
-  border-color: #e6a23c;
-}
-.ea-tag_wrap.ea-tag--warning.ea-tag--plain {
-  color: #e6a23c;
-  background-color: #fff;
-  border-color: #faecd8;
-}
-.ea-tag_wrap.ea-tag--danger {
-  color: #f56c6c;
-  background-color: #fef0f0;
-  border-color: #fbc4c4;
-}
-.ea-tag_wrap.ea-tag--danger.ea-tag--dark {
-  color: #fff;
-  background-color: #f56c6c;
-  border-color: #f56c6c;
-}
-.ea-tag_wrap.ea-tag--danger.ea-tag--plain {
-  color: #f56c6c;
-  background-color: #fff;
-  border-color: #fbc4c4;
-}
-`;

package/components/ea-textarea/index.css

@@ -1,37 +0,0 @@
-.ea-textarea_wrap {
-  position: relative;
-  width: 100%;
-}
-.ea-textarea_wrap .ea-textarea_inner {
-  box-sizing: border-box;
-  box-shadow: none;
-  resize: vertical;
-  min-height: 1.75rem;
-  border: 1px solid #dcdfe6;
-  outline: 0;
-  transition: border 0.2s;
-  border-radius: 3px;
-  padding: 0.5rem;
-  line-height: 0.8;
-  font-size: 0.8rem;
-  scrollbar-width: none;
-}
-.ea-textarea_wrap .ea-textarea_inner:focus {
-  border-color: #409eff;
-}
-.ea-textarea_wrap .ea-textarea_inner::placeholder {
-  color: #c0c4cc;
-}
-.ea-textarea_wrap .ea-textarea_inner:disabled {
-  background-color: #eeeeee;
-  color: #c0c4cc;
-}
-.ea-textarea_wrap .ea-textarea_inner:invalid {
-  border-color: #f56c6c;
-}
-.ea-textarea_wrap .ea-input_word-limit {
-  position: absolute;
-  font-size: 0.75rem;
-  bottom: 0.5rem;
-  right: 0.5rem;
-}

package/components/ea-textarea/index.js

@@ -1,277 +0,0 @@
-// @ts-nocheck
-import Base from "../Base.js";
-
-import { stylesheet } from "./src/style/stylesheet.js";
-
-export class EaTextarea extends Base {
-    #wrap;
-    #input;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-textarea_wrap" part="container">
-                <textarea class="ea-textarea_inner" part="textarea" placeholder="请输入内容"></textarea>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-textarea_wrap');
-        this.#input = shadowRoot.querySelector('.ea-textarea_inner');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- name 属性 -------
-    // #region
-    get name() {
-        return this.getAttribute('name') || 'ea-textarea';
-    }
-
-    set name(value) {
-        this.setAttribute('name', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- value 输入框的值 -------
-    // #region
-    get value() {
-        return this.#input.value;
-    }
-
-    set value(val) {
-        this.#input.value = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 是否禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled');
-    }
-
-    set disabled(val) {
-        this.toggleAttr('disabled', val);
-        this.#input.disabled = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- placeholder 提示 -------
-    // #region
-    get placeholder() {
-        return this.getAttribute("placeholder") || '';
-    }
-
-    set placeholder(val) {
-        if (!val) return;
-
-        this.setAttribute("placeholder", val);
-        this.#input.placeholder = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- rows 默认行数 -------
-    // #region
-    get rows() {
-        return this.getAttribute("rows") || 2;
-    }
-
-    set rows(val) {
-        this.setAttribute("rows", val);
-        this.#input.rows = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- autosize 自动调整高度 -------
-    // #region
-    get autosize() {
-        return this.getAttrBoolean("autosize");
-    }
-
-    set autosize(val) {
-        if (!val) return;
-
-        this.setAttribute("autosize", val);
-
-        this.#input.addEventListener('input', (e) => {
-            if (this.#input.style.height !== this.#input.scrollHeight + 'px') {
-                this.#input.style.height = this.#input.scrollHeight + 'px';
-                this.#input.style.minHeight = this.#input.scrollHeight + 'px';
-            }
-
-            if (e.target.type === 'textarea') {
-                const cols = this.#input.cols;
-                const chars = e.target.value.length;
-
-                let rows = Math.ceil(chars / cols) <= Number(this.#input.rows) ? Number(this.#input.rows) : Math.ceil(chars / cols);
-                if (chars % cols == 1) {
-                    if (this.minRows > rows) this.#setTextareaHeight(this.minRows);
-                    else if (this.maxRows < rows) this.#setTextareaHeight(this.maxRows);
-                    else this.#setTextareaHeight(rows);
-                }
-            }
-        })
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- min-rows 最小行数 -------
-    // #region
-    get minRows() {
-        const val = this.getAttrNumber("min-rows");
-        return val !== 0 && val > 0 ? val : 0;
-    }
-
-    set minRows(val) {
-        if (!val) return;
-
-        this.setAttribute("min-rows", val);
-        this.#setTextareaHeight(Number(val));
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- max-rows 最大行数 -------
-    // #region
-    get maxRows() {
-        const val = Number(this.getAttribute("max-rows"));
-        return val !== 0 && val > 0 ? val : 0;
-    }
-
-    set maxRows(val) {
-        if (!val) return;
-
-        this.setAttribute("max-rows", val);
-        this.#setTextareaHeight(Number(val));
-    }
-
-    // #endregion
-    // ------- end -------
-
-    // ------- max-length/min-length 最大/最小字符长度 -------
-    // #region
-    // 获取最大限制值
-    get maxLength() {
-        return this.getAttribute("max-length");
-    }
-
-    set maxLength(val) {
-        if (!val) return;
-
-        this.setAttribute("max-length", val);
-        this.#input.maxLength = val;
-
-        if (this.showWordLimit) this.showWordLimit = true;
-    }
-
-    // 获取最小限制值
-    get minLength() {
-        return this.getAttribute("min-length");
-    }
-
-    set minLength(val) {
-        if (!val) return;
-
-        this.setAttribute("min-length", val);
-        this.#input.minLength = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- show-word-limit 显示 当前文字长度 和 限制值 -------
-    // #region
-    get showWordLimit() {
-        return this.getAttrBoolean("show-word-limit");
-    }
-
-    set showWordLimit(val) {
-        if (!val) return;
-
-        this.setAttribute("show-word-limit", val);
-
-        // 加入显示的dom
-        const wordLimit = document.createElement('span');
-        wordLimit.part = 'word-limit';
-        wordLimit.className = 'ea-input_word-limit';
-        wordLimit.innerText = `${this.#input.value.length}/${this.maxLength}`;
-
-        this.#input.addEventListener('input', (e) => {
-            wordLimit.innerText = `${e.target.value.length}/${this.maxLength}`;
-        });
-
-        this.#wrap.appendChild(wordLimit);
-        wordLimit.style.left = (this.#input.getBoundingClientRect().width - wordLimit.getBoundingClientRect().width - 5) + 'px';
-    }
-    // #endregion
-    // ------- end -------
-
-    #setTextareaHeight(rows) {
-        rows = Number(rows);
-        this.#input.rows = rows;
-    }
-
-    #handleDispatchEvent(eventName, e) {
-        this.dispatchEvent(
-            new CustomEvent(eventName, {
-                detail: {
-                    value: e.target.value
-                }
-            })
-        );
-    }
-
-    connectedCallback() {
-        this.setAttribute('data-ea-component', true);
-
-        this.name = this.name;
-
-        // 输入框提示
-        this.placeholder = this.placeholder;
-
-        // 输入框的值
-        this.value = this.value;
-        this.#input.value = this.getAttribute("value") || '';
-
-        // 禁用
-        this.disabled = this.disabled;
-
-        // 自动调整高度
-        this.autosize = this.autosize;
-
-        // 最大最小行数
-        if (this.maxRows) this.maxRows = this.maxRows;
-        if (this.minRows) this.minRows = this.minRows;
-
-        // 默认行数
-        this.rows = this.rows;
-
-        // 输入长度限制
-        this.maxLength = this.maxLength;
-        this.minLength = this.minLength;
-
-        // 输入时
-        this.#input.addEventListener("input", (e) => {
-            this.#handleDispatchEvent("change", e);
-        });
-
-        // 聚焦时
-        this.#input.addEventListener("focus", (e) => {
-            this.#handleDispatchEvent("focus", e);
-        });
-
-        // 失焦时
-        this.#input.addEventListener("blur", (e) => {
-            this.#handleDispatchEvent("blur", e);
-        });
-    }
-}
-
-if (!window.customElements.get("ea-textarea")) {
-    window.customElements.define("ea-textarea", EaTextarea);
-}