easy-component-ui 2.1.0 → 3.0.0

package/components/ea-badge/index.css

@@ -1,49 +0,0 @@
-@import "../ea-icon/css/fontello.css";
-@import "../ea-icon/css/animation.css";
-@font-face {
-  font-size: 1rem;
-  font-size: 16px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  src: url("../ea-icon/font/fontello.eot") format("embedded-opentype"), url("../ea-icon/font/fontello.ttf") format("truetype"), url("../ea-icon/font/fontello.woff") format("woff"), url("../ea-icon/font/fontello.woff2") format("woff2"), url("../ea-icon/font/fontello.svg") format("svg");
-}
-.ea-badge_wrap {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-}
-.ea-badge_wrap .ea-badge_content {
-  display: inline-block;
-  padding: 0 0.375rem;
-  border-radius: 0.625rem;
-  border: 1px solid #fff;
-  height: 1.125rem;
-  line-height: 1.125rem;
-  position: absolute;
-  right: 0.625rem;
-  top: 0;
-  transform: translate(100%, -50%);
-  color: #fff;
-  font-size: 0.75rem;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #f56c6c;
-}
-.ea-badge_wrap .ea-badge_content.primary {
-  background-color: #409eff;
-}
-.ea-badge_wrap .ea-badge_content.success {
-  background-color: #67c23a;
-}
-.ea-badge_wrap .ea-badge_content.warning {
-  background-color: #e6a23c;
-}
-.ea-badge_wrap .ea-badge_content.info {
-  background-color: #909399;
-}
-.ea-badge_wrap .ea-badge_content.dot {
-  right: 0.3125rem;
-  padding: 0;
-  border-radius: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
-}

package/components/ea-badge/index.js

@@ -1,103 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaBadge extends Base {
-  #wrap;
-  #badgeWrap;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    shadowRoot.innerHTML = `
-        <div class="ea-badge_wrap" part='container'>
-            <slot></slot>
-            <sup class="ea-badge_content" part='content'></sup>
-        </div>
-    `;
-
-    this.#wrap = shadowRoot.querySelector('.ea-badge_wrap');
-    this.#badgeWrap = shadowRoot.querySelector('.ea-badge_content');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  // ------- value 徽章内的值 -------
-  // #region
-  get value() {
-    return this.getAttribute('value') || '';
-  }
-
-  set value(value) {
-    this.setAttribute('value', value);
-
-    this.#badgeWrap.innerHTML = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- type 样式类型 -------
-  // #region
-  get type() {
-    return this.getAttribute('type') || 'normal';
-  }
-
-  set type(value) {
-    this.setAttribute('type', value);
-
-    this.#badgeWrap.classList.add(value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- max 最大值 -------
-  // #region
-  get max() {
-    return this.getAttrNumber('max') || Infinity;
-  }
-
-  set max(value) {
-    if (value === Infinity) return;
-
-    value = parseInt(value);
-
-    this.setAttribute('max', value);
-
-    if (this.value > value) {
-      this.value = value + '+';
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- is-dot 是否为点状徽章 -------
-  // #region
-  get isDot() {
-    return this.getAttrBoolean('is-dot') || false;
-  }
-
-  set isDot(value) {
-    this.toggleAttr('is-dot', value);
-
-    this.#badgeWrap.innerText = value ? '' : this.value;
-    this.#badgeWrap.classList.toggle('dot', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  connectedCallback() {
-    this.value = this.value;
-
-    this.type = this.type;
-
-    this.max = this.max;
-
-    this.isDot = this.isDot;
-  }
-}
-
-if (!customElements.get('ea-badge')) {
-  customElements.define('ea-badge', EaBadge);
-}

package/components/ea-badge/index.scss

@@ -1,56 +0,0 @@
-@import "../ea-ui-base-style.scss";
-@import "../ea-icon/index.scss";
-
-.ea-badge_wrap {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-
-  .ea-badge_content {
-    display: inline-block;
-
-    padding: 0 0.375rem;
-    border-radius: 0.625rem;
-    border: 1px solid #fff;
-
-    height: 1.125rem;
-    line-height: 1.125rem;
-
-    position: absolute;
-    right: 0.625rem;
-    top: 0;
-    transform: translate(100%, -50%);
-
-    color: #fff;
-    font-size: 0.75rem;
-    text-align: center;
-    white-space: nowrap;
-    background-color: #f56c6c;
-
-    &.primary {
-      background-color: $color-primary-bgc;
-    }
-
-    &.success {
-      background-color: $color-success-bgc;
-    }
-
-    &.warning {
-      background-color: $color-warning-bgc;
-    }
-
-    &.info {
-      background-color: $color-info-bgc;
-    }
-
-    &.dot {
-      right: 0.3125rem;
-
-      padding: 0;
-      border-radius: 50%;
-
-      width: 0.5rem;
-      height: 0.5rem;
-    }
-  }
-}

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

@@ -1,43 +0,0 @@
-export const stylesheet = `
-.ea-badge_wrap {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-}
-.ea-badge_wrap .ea-badge_content {
-  display: inline-block;
-  padding: 0 0.375rem;
-  border-radius: 0.625rem;
-  border: 1px solid #fff;
-  height: 1.125rem;
-  line-height: 1.125rem;
-  position: absolute;
-  right: 0.625rem;
-  top: 0;
-  transform: translate(100%, -50%);
-  color: #fff;
-  font-size: 0.75rem;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #f56c6c;
-}
-.ea-badge_wrap .ea-badge_content.primary {
-  background-color: #409eff;
-}
-.ea-badge_wrap .ea-badge_content.success {
-  background-color: #67c23a;
-}
-.ea-badge_wrap .ea-badge_content.warning {
-  background-color: #e6a23c;
-}
-.ea-badge_wrap .ea-badge_content.info {
-  background-color: #909399;
-}
-.ea-badge_wrap .ea-badge_content.dot {
-  right: 0.3125rem;
-  padding: 0;
-  border-radius: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
-}
-`;

package/components/ea-breadcrumb/index.css

@@ -1,6 +0,0 @@
-.ea-breadcrumb_wrap {
-  display: flex;
-}
-.ea-breadcrumb_wrap .separator {
-  margin: 0 10px;
-}

package/components/ea-breadcrumb/index.js

@@ -1,90 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js';
-
-import "../ea-breadcrumb-item/index.js";
-
-import { stylesheet } from './src/style/stylesheet.js';
-import { createElement } from '../../utils/createElement.js';
-
-export class EaBreadcrumb extends Base {
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-breadcrumb_wrap" part='container'>
-                <slot></slot>
-            </div>
-        `;
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- separator 分隔符 -------
-    // #region
-    get separator() {
-        return this.getAttribute('separator') || "\/";
-    }
-
-    set separator(value) {
-        this.setAttribute('separator', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- separator-class 分隔符的图标类名 -------
-    // #region
-    get separatorClass() {
-        return this.getAttribute('separator-class') || '';
-    }
-
-    set separatorClass(value) {
-        this.setAttribute('separator-class', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- separator-color 分隔符的图标颜色 -------
-    // #region
-    get separatorColor() {
-        return this.getAttribute('separator-color') || '#c0c4cc';
-    }
-
-    set separatorColor(value) {
-        this.setAttribute('separator-color', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    #initSeparator() {
-        const items = this.querySelectorAll('ea-breadcrumb-item');
-
-        items.forEach((item, index) => {
-            if (index < items.length - 1) {
-                const separatorIcon = createElement('ea-icon');
-                separatorIcon.color = this.separatorColor;
-
-                if (this.separatorClass) {
-                    separatorIcon.icon = this.separatorClass;
-                } else {
-                    separatorIcon.style.margin = '0 10px';
-                    separatorIcon.innerText = this.separator;
-                }
-
-                item.appendChild(separatorIcon);
-            }
-        });
-    }
-
-    connectedCallback() {
-        this.separator = this.separator;
-        this.separatorClass = this.separatorClass;
-        this.separatorColor = this.separatorColor;
-
-        this.#initSeparator();
-    }
-}
-
-if (!customElements.get('ea-breadcrumb')) {
-    customElements.define('ea-breadcrumb', EaBreadcrumb);
-}

package/components/ea-breadcrumb/index.scss

@@ -1,7 +0,0 @@
-.ea-breadcrumb_wrap {
-  display: flex;
-
-  .separator {
-    margin: 0 10px;
-  }
-}

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

@@ -1,8 +0,0 @@
-export const stylesheet = `
-.ea-breadcrumb_wrap {
-  display: flex;
-}
-.ea-breadcrumb_wrap .separator {
-  margin: 0 10px;
-}
-`;

package/components/ea-breadcrumb-item/index.css

@@ -1,10 +0,0 @@
-.ea-breadcrumb-item_wrap {
-  font-size: 14px;
-  color: #606266;
-  line-height: 1;
-}
-.ea-breadcrumb-item_wrap ::slotted(a) {
-  text-decoration: none;
-  font-weight: 600;
-  color: #303133;
-}

package/components/ea-breadcrumb-item/index.js

@@ -1,23 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-import { stylesheet } from './src/style/style.js';
-
-export class EaBreadcrumbItem extends Base {
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <span class="ea-breadcrumb-item_wrap" part='container'>
-                <slot></slot>
-            </span>
-        `;
-
-        this.build(shadowRoot, stylesheet);
-    }
-}
-
-if (!customElements.get('ea-breadcrumb-item')) {
-    customElements.define('ea-breadcrumb-item', EaBreadcrumbItem);
-}

package/components/ea-breadcrumb-item/index.scss

@@ -1,12 +0,0 @@
-.ea-breadcrumb-item_wrap {
-  font-size: 14px;
-  color: #606266;
-  line-height: 1;
-
-  ::slotted(a) {
-    text-decoration: none;
-
-    font-weight: 600;
-    color: #303133;
-  }
-}

package/components/ea-breadcrumb-item/src/style/style.js

@@ -1,12 +0,0 @@
-export const stylesheet = `
-.ea-breadcrumb-item_wrap {
-  font-size: 14px;
-  color: #606266;
-  line-height: 1;
-}
-.ea-breadcrumb-item_wrap ::slotted(a) {
-  text-decoration: none;
-  font-weight: 600;
-  color: #303133;
-}
-`;

package/components/ea-button/index.css

@@ -1,206 +0,0 @@
-:host {
-  --border-radius: 6px;
-}
-
-.ea-button {
-  box-sizing: border-box;
-  padding: 0.5rem;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  font-size: 1rem;
-  line-height: 1.25;
-  font-weight: 500;
-  transition: background-color 0.1s, color 0.1s;
-  text-decoration: none;
-  will-change: width;
-}
-.ea-button.normal {
-  border: 1px solid #dcdfe6;
-  color: #606266;
-  background-color: transparent;
-}
-.ea-button.normal.disabled {
-  background-color: rgba(64, 64, 64, 0) !important;
-  border-color: white !important;
-  color: white !important;
-  pointer-events: none;
-  border-color: #ebedf1 !important;
-  color: #babcbe !important;
-}
-.ea-button.normal.plain {
-  background-color: rgba(92, 92, 92, 0);
-  border-color: white;
-  color: transparent;
-  background-color: transparent;
-  color: #606266;
-  border-color: #dcdfe6;
-}
-.ea-button.normal.plain:hover {
-  background-color: transparent;
-}
-.ea-button.normal:hover {
-  border-color: rgba(160, 207, 255, 0.4);
-  color: #3a9bff;
-  background-color: rgba(160, 207, 255, 0.05);
-}
-.ea-button.normal:active {
-  background-color: rgba(7, 130, 255, 0.05);
-}
-.ea-button.primary {
-  border: 1px solid #409eff;
-  color: #fff;
-  background-color: #409eff;
-}
-.ea-button.primary.disabled {
-  background-color: #c0dfff !important;
-  border-color: #c0dfff !important;
-  color: white !important;
-  pointer-events: none;
-}
-.ea-button.primary.plain {
-  background-color: #f8fbff;
-  border-color: #c0dfff;
-  color: #409eff;
-}
-.ea-button.primary:hover {
-  border-color: #73b8ff;
-  color: white;
-  background-color: #73b8ff;
-}
-.ea-button.primary:active {
-  background-color: #006bd9;
-}
-.ea-button.success {
-  border: 1px solid #67c23a;
-  color: #fff;
-  background-color: #67c23a;
-}
-.ea-button.success.disabled {
-  background-color: #b2e19b !important;
-  border-color: #b2e19b !important;
-  color: white !important;
-  pointer-events: none;
-}
-.ea-button.success.plain {
-  background-color: #d3eec6;
-  border-color: #b2e19b;
-  color: #67c23a;
-}
-.ea-button.success:hover {
-  border-color: #85cf60;
-  color: white;
-  background-color: #85cf60;
-}
-.ea-button.success:active {
-  background-color: #3d7323;
-}
-.ea-button.info {
-  border: 1px solid #909399;
-  color: #fff;
-  background-color: #909399;
-}
-.ea-button.info.disabled {
-  background-color: #d2d4d6 !important;
-  border-color: #d2d4d6 !important;
-  color: white !important;
-  pointer-events: none;
-}
-.ea-button.info.plain {
-  background-color: #f0f0f1;
-  border-color: #d2d4d6;
-  color: #909399;
-}
-.ea-button.info:hover {
-  border-color: #abadb1;
-  color: white;
-  background-color: #abadb1;
-}
-.ea-button.info:active {
-  background-color: #5d6066;
-}
-.ea-button.warning {
-  border: 1px solid #e6a23c;
-  color: #fff;
-  background-color: #e6a23c;
-}
-.ea-button.warning.disabled {
-  background-color: #f4d8ad !important;
-  border-color: #f4d8ad !important;
-  color: white !important;
-  pointer-events: none;
-}
-.ea-button.warning.plain {
-  background-color: #fbf0df;
-  border-color: #f4d8ad;
-  color: #e6a23c;
-}
-.ea-button.warning:hover {
-  border-color: #ecb869;
-  color: white;
-  background-color: #ecb869;
-}
-.ea-button.warning:active {
-  background-color: #a76d15;
-}
-.ea-button.danger {
-  border: 1px solid #f56c6c;
-  color: #fff;
-  background-color: #f56c6c;
-}
-.ea-button.danger.disabled {
-  background-color: #fde3e3 !important;
-  border-color: #fde3e3 !important;
-  color: white !important;
-  pointer-events: none;
-}
-.ea-button.danger.plain {
-  background-color: white;
-  border-color: #fde3e3;
-  color: #f56c6c;
-  background-color: #fde8e8;
-}
-.ea-button.danger:hover {
-  border-color: #f89c9c;
-  color: white;
-  background-color: #f89c9c;
-}
-.ea-button.danger:active {
-  background-color: #eb1010;
-}
-.ea-button.text {
-  border: 1px solid transparent;
-  color: #409eff;
-  background-color: transparent;
-}
-.ea-button.text.disabled {
-  background-color: rgba(64, 64, 64, 0) !important;
-  border-color: rgba(64, 64, 64, 0) !important;
-  color: white !important;
-  pointer-events: none;
-  color: #c0c4cc !important;
-}
-.ea-button.text.plain {
-  background-color: rgba(92, 92, 92, 0);
-  border-color: rgba(64, 64, 64, 0);
-  color: transparent;
-}
-.ea-button.text:hover {
-  border-color: rgba(26, 26, 26, 0);
-  color: #73b8ff;
-  background-color: rgba(26, 26, 26, 0);
-}
-.ea-button.text:active {
-  background-color: rgba(0, 0, 0, 0);
-}
-.ea-button.round {
-  border-radius: 999px;
-}
-.ea-button.medium {
-  font-size: 14px;
-}
-.ea-button.small {
-  font-size: 12px;
-}
-.ea-button.mini {
-  font-size: 10px;
-}