easy-component-ui 2.0.5 → 2.1.1

package/components/ea-backtop/index.scss

@@ -0,0 +1,29 @@
+@import "../ea-ui-base-style.scss";
+@import "../ea-icon/index.scss";
+
+.ea-backtop_wrap {
+  position: fixed;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 40px;
+  height: 40px;
+
+  right: 40px;
+  bottom: 40px;
+  cursor: pointer;
+
+  background-color: #fff;
+  border-radius: 50%;
+  color: #409eff;
+  font-size: 14px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+
+  opacity: 1;
+
+  z-index: 5;
+
+  transition: opacity 0.3s ease-in-out;
+}

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

@@ -1 +1,21 @@
-export const stylesheet="\n.ea-backtop_wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  right: 40px;\n  bottom: 40px;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 50%;\n  color: #409eff;\n  font-size: 14px;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);\n  opacity: 1;\n  z-index: 5;\n  transition: opacity 0.3s ease-in-out;\n}\n";
+export const stylesheet = `
+.ea-backtop_wrap {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  right: 40px;
+  bottom: 40px;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 50%;
+  color: #409eff;
+  font-size: 14px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  opacity: 1;
+  z-index: 5;
+  transition: opacity 0.3s ease-in-out;
+}
+`;

package/components/ea-badge/index.css

@@ -0,0 +1,49 @@
+@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 +1,103 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaBadge extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n        <div class=\"ea-badge_wrap\" part='container'>\n            <slot></slot>\n            <sup class=\"ea-badge_content\" part='content'></sup>\n        </div>\n    ",this.#t=t.querySelector(".ea-badge_wrap"),this.#e=t.querySelector(".ea-badge_content"),this.build(t,stylesheet)}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t),this.#e.innerHTML=t}get type(){return this.getAttribute("type")||"normal"}set type(t){this.setAttribute("type",t),this.#e.classList.add(t)}get max(){return this.getAttrNumber("max")||1/0}set max(t){t!==1/0&&(t=parseInt(t),this.setAttribute("max",t),this.value>t&&(this.value=t+"+"))}get isDot(){return this.getAttrBoolean("is-dot")||!1}set isDot(t){this.toggleAttr("is-dot",t),this.#e.innerText=t?"":this.value,this.#e.classList.toggle("dot",t)}connectedCallback(){this.value=this.value,this.type=this.type,this.max=this.max,this.isDot=this.isDot}}customElements.get("ea-badge")||customElements.define("ea-badge",EaBadge);
+// @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

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

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

package/components/ea-breadcrumb/index.js

@@ -1 +1,90 @@
-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 t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class=\"ea-breadcrumb_wrap\" part='container'>\n                <slot></slot>\n            </div>\n        ",this.build(t,stylesheet)}get separator(){return this.getAttribute("separator")||"/"}set separator(t){this.setAttribute("separator",t)}get separatorClass(){return this.getAttribute("separator-class")||""}set separatorClass(t){this.setAttribute("separator-class",t)}get separatorColor(){return this.getAttribute("separator-color")||"#c0c4cc"}set separatorColor(t){this.setAttribute("separator-color",t)}#t(){const t=this.querySelectorAll("ea-breadcrumb-item");t.forEach(((e,r)=>{if(r<t.length-1){const t=createElement("ea-icon");t.color=this.separatorColor,this.separatorClass?t.icon=this.separatorClass:(t.style.margin="0 10px",t.innerText=this.separator),e.appendChild(t)}}))}connectedCallback(){this.separator=this.separator,this.separatorClass=this.separatorClass,this.separatorColor=this.separatorColor,this.#t()}}customElements.get("ea-breadcrumb")||customElements.define("ea-breadcrumb",EaBreadcrumb);
+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

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

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

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

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

@@ -0,0 +1,10 @@
+.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 +1,23 @@
-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 e=this.attachShadow({mode:"open"});e.innerHTML="\n            <span class=\"ea-breadcrumb-item_wrap\" part='container'>\n                <slot></slot>\n            </span>\n        ",this.build(e,stylesheet)}}customElements.get("ea-breadcrumb-item")||customElements.define("ea-breadcrumb-item",EaBreadcrumbItem);
+// @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

@@ -0,0 +1,12 @@
+.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 +1,12 @@
-export const stylesheet="\n.ea-breadcrumb-item_wrap {\n  font-size: 14px;\n  color: #606266;\n  line-height: 1;\n}\n.ea-breadcrumb-item_wrap ::slotted(a) {\n  text-decoration: none;\n  font-weight: 600;\n  color: #303133;\n}\n";
+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;
+}
+`;