easy-component-ui 2.0.5 → 2.1.1

package/components/ea-button/index.css

@@ -0,0 +1,206 @@
+: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;
+}

package/components/ea-button/index.js

@@ -1 +1,198 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{ButtonComm}from"./src/components/ButtonComm.js";import{HrefComm}from"./src/components/HrefComm.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaButton extends Base{#t="button";#e;constructor(){super();const t=this.attachShadow({mode:"open"});this.getAttribute("href")?(t.innerHTML=HrefComm,this.#t="a"):(t.innerHTML=ButtonComm,this.#t="button"),this.#e=t.querySelector(".ea-button"),this.build(t,stylesheet)}get BUTTON_STYLE(){return["plain","round"]}get BUTTON_TYPE(){return["normal","primary","success","warning","danger","text"]}get BUTTON_SIZE(){return["medium","small","mini"]}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.toggleAttr("disabled",t),this.#e.classList.toggle("disabled",t),this.style.cursor=t?"not-allowed":"pointer",t&&this.#e.setAttribute("disabled",t)}get plain(){return this.getAttrBoolean("plain")}set plain(t){this.toggleAttr("plain",t),this.#e.classList.toggle("plain",t)}get round(){return this.getAttrBoolean("round")}set round(t){this.toggleAttr("round",t),this.#e.classList.toggle("round",t)}get type(){const t=this.getAttribute("type");return this.BUTTON_TYPE.includes(t)?t:"normal"}set type(t){this.setAttribute("type",t),this.#e.classList.add(t)}get size(){const t=this.getAttribute("size");return this.BUTTON_SIZE.includes(t)?t:"medium"}set size(t){this.toggleAttr("size",t),this.#e.classList.add(t)}get loading(){return this.getAttrBoolean("loading")}set loading(t){if(this.toggleAttr("loading",t),this.disabled=t,t){const t=document.createElement("ea-icon");t.id="ea-loading-icon",t.icon="icon-spin6 animate-spin",this.#e.insertBefore(t,this.#e.firstChild)}else{const t=this.#e?.querySelectorAll("#ea-loading-icon");t?.length>0&&t?.forEach((t=>t.remove()))}}get icon(){return this.getAttribute("icon")||""}set icon(t){if(this.setAttribute("icon",t),t&&!this.#e.querySelector("ea-icon")){const e=document.createElement("ea-icon");e.icon=t,e.part="icon",this.#e.insertBefore(e,this.#e.firstChild)}}get href(){return this.getAttribute("href")||""}set href(t){"button"!==this.#t&&(this.setAttribute("href",t),this.#e.setAttribute("href",t))}connectedCallback(){this.plain=this.plain,this.round=this.round,this.type=this.type,this.size=this.size,this.icon=this.icon,this.disabled=this.disabled,this.href=this.href,this.loading&&(this.loading=this.loading)}}window.customElements.get("ea-button")||window.customElements.define("ea-button",EaButton);
+import Base from "../Base.js";
+import "../ea-icon/index.js"
+
+import { ButtonComm } from "./src/components/ButtonComm.js";
+import { HrefComm } from "./src/components/HrefComm.js";
+
+import { stylesheet } from "./src/style/stylesheet.js";
+
+export class EaButton extends Base {
+  #buttonType = "button";
+
+  #wrap;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+
+    const hrefAttr = this.getAttribute('href')
+    if (hrefAttr) {
+      shadowRoot.innerHTML = HrefComm;
+      this.#buttonType = "a";
+    } else {
+      shadowRoot.innerHTML = ButtonComm;
+      this.#buttonType = "button";
+    }
+
+    this.#wrap = shadowRoot.querySelector('.ea-button');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  get BUTTON_STYLE() {
+    return ['plain', 'round'];
+  }
+
+  get BUTTON_TYPE() {
+    return ['normal', 'primary', 'success', 'warning', 'danger', 'text'];
+  }
+
+  get BUTTON_SIZE() {
+    return ['medium', 'small', 'mini'];
+  }
+
+
+  // ------- 禁用 -------
+  // #region
+  get disabled() {
+    return this.getAttrBoolean('disabled');
+  }
+
+  set disabled(value) {
+    this.toggleAttr('disabled', value);
+    this.#wrap.classList.toggle('disabled', value);
+    this.style.cursor = value ? 'not-allowed' : 'pointer';
+
+    if (value) this.#wrap.setAttribute('disabled', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- 按钮样式 -------
+  // #region
+  get plain() {
+    return this.getAttrBoolean('plain');
+  }
+  set plain(value) {
+    this.toggleAttr('plain', value);
+    this.#wrap.classList.toggle('plain', value);
+  }
+
+  get round() {
+    return this.getAttrBoolean('round');
+  }
+  set round(value) {
+    this.toggleAttr('round', value);
+
+    this.#wrap.classList.toggle('round', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- type属性 -------
+  // #region
+  get type() {
+    const attr = this.getAttribute('type');
+    return this.BUTTON_TYPE.includes(attr) ? attr : 'normal';
+  }
+
+  set type(value) {
+    this.setAttribute('type', value);
+    this.#wrap.classList.add(value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- 按钮大小 -------
+  // #region
+  get size() {
+    const attr = this.getAttribute('size');
+    return this.BUTTON_SIZE.includes(attr) ? attr : 'medium';
+  }
+  set size(value) {
+    this.toggleAttr('size', value);
+    this.#wrap.classList.add(value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- 按钮加载 -------
+  // #region
+  get loading() {
+    return this.getAttrBoolean('loading');
+  }
+
+  set loading(value) {
+    this.toggleAttr('loading', value);
+
+    this.disabled = value;
+
+    if (value) {
+      const i = document.createElement('ea-icon');
+      i.id = 'ea-loading-icon';
+      i.icon = 'icon-spin6 animate-spin';
+
+      this.#wrap.insertBefore(i, this.#wrap.firstChild)
+    } else {
+      const loadingIcon = this.#wrap?.querySelectorAll('#ea-loading-icon');
+      if (loadingIcon?.length > 0) {
+        loadingIcon?.forEach(item => item.remove());
+      }
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- 图标按钮 -------
+  // #region
+  get icon() {
+    return this.getAttribute('icon') || '';
+  }
+
+  set icon(value) {
+    this.setAttribute('icon', value);
+
+    if (value && !this.#wrap.querySelector('ea-icon')) {
+      const eaIcon = document.createElement('ea-icon');
+      eaIcon.icon = value;
+      eaIcon.part = "icon";
+
+      this.#wrap.insertBefore(eaIcon, this.#wrap.firstChild);
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- 链接按钮 -------
+  // #region
+  get href() {
+    return this.getAttribute('href') || '';
+  }
+
+  set href(value) {
+    if (this.#buttonType === "button") return;
+
+    this.setAttribute('href', value);
+    this.#wrap.setAttribute('href', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  connectedCallback() {
+    // 按钮样式
+    this.plain = this.plain;
+    this.round = this.round;
+
+    // 按钮种类
+    this.type = this.type;
+
+    // 按钮大小
+    this.size = this.size;
+
+    // 图标
+    this.icon = this.icon;
+
+    // 禁用
+    this.disabled = this.disabled;
+
+    // 链接
+    this.href = this.href;
+
+    if (this.loading) this.loading = this.loading;
+  }
+}
+
+if (!window.customElements.get("ea-button")) {
+  window.customElements.define("ea-button", EaButton);
+}

package/components/ea-button/index.scss

@@ -0,0 +1,143 @@
+@import "../ea-ui-base-style.scss";
+
+@mixin button-type($type, $border, $text, $bgc) {
+  &.#{$type} {
+    $border-hover: lighten($border, 10);
+    $text-hover: lighten($text, 10);
+    $bgc-hover: lighten($bgc, 10);
+
+    @if ($type == "normal") {
+      $border-hover: transparentize(#a0cfff, 0.6);
+      $text-hover: darken(#a0cfff, 20);
+      $bgc-hover: transparentize(#a0cfff, 0.95);
+    }
+
+    border: 1px solid $border;
+    color: $text;
+    background-color: $bgc;
+
+    &.disabled {
+      background-color: lighten($bgc, 25) !important;
+      border-color: lighten($border, 25) !important;
+      color: lighten($text, 75) !important;
+      pointer-events: none;
+
+      @if ($type == "normal") {
+        border-color: lighten($border, 5) !important;
+        color: lighten($text, 35) !important;
+      }
+
+      @if ($type == "text") {
+        color: $color-disabled-text !important;
+      }
+    }
+    &.plain {
+      background-color: lighten($bgc, 36);
+      border-color: lighten($border, 25);
+      color: $bgc;
+
+      @if ($type == "normal") {
+        background-color: transparent;
+        color: $text;
+        border-color: $border;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      @if ($type == "danger") {
+        background-color: lighten($bgc, 26);
+      }
+    }
+
+    &:hover {
+      border-color: $border-hover;
+      color: $text-hover;
+      background-color: $bgc-hover;
+    }
+
+    &:active {
+      background-color: darken($bgc-hover, 30);
+    }
+  }
+}
+
+: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;
+
+  @include button-type(
+    "normal",
+    $color-default-border,
+    $color-default-text,
+    $color-default-bgc
+  );
+
+  @include button-type(
+    "primary",
+    $color-primary-border,
+    $color-primary-text,
+    $color-primary-bgc
+  );
+
+  @include button-type(
+    "success",
+    $color-success-border,
+    $color-success-text,
+    $color-success-bgc
+  );
+
+  @include button-type(
+    "info",
+    $color-info-border,
+    $color-info-text,
+    $color-info-bgc
+  );
+
+  @include button-type(
+    "warning",
+    $color-warning-border,
+    $color-warning-text,
+    $color-warning-bgc
+  );
+
+  @include button-type(
+    "danger",
+    $color-danger-border,
+    $color-danger-text,
+    $color-danger-bgc
+  );
+
+  @include button-type("text", transparent, $color-primary-bgc, transparent);
+
+  &.round {
+    border-radius: 999px;
+  }
+
+  &.medium {
+    font-size: 14px;
+  }
+  &.small {
+    font-size: 12px;
+  }
+  &.mini {
+    font-size: 10px;
+  }
+}

package/components/ea-button/src/components/ButtonComm.js

@@ -1 +1,5 @@
-export const ButtonComm='\n<button class="ea-button" part="container">\n    <slot></slot>\n</button>\n';
+export const ButtonComm = `
+<button class="ea-button" part="container">
+    <slot></slot>
+</button>
+`;

package/components/ea-button/src/components/HrefComm.js

@@ -1 +1,5 @@
-export const HrefComm='\n<a class="ea-button" part="container">\n    <slot></slot>\n</a>\n';
+export const HrefComm = `
+<a class="ea-button" part="container">
+    <slot></slot>
+</a>
+`;