easy-component-ui 2.1.1 → 3.0.0

package/components/ea-button/index.js

@@ -1,198 +0,0 @@
-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

@@ -1,143 +0,0 @@
-@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,5 +0,0 @@
-export const ButtonComm = `
-<button class="ea-button" part="container">
-    <slot></slot>
-</button>
-`;

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

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

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

@@ -1,208 +0,0 @@
-export const stylesheet = `
-: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-group/index.css

@@ -1,16 +0,0 @@
-.ea-button-group {
-  display: flex;
-  align-items: center;
-}
-.ea-button-group ::slotted(ea-button) {
-  --border-radius: 0;
-}
-.ea-button-group ::slotted(ea-button:not([type=normal])) {
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
-}
-.ea-button-group ::slotted(ea-button:first-of-type) {
-  --border-radius: 4px 0 0 4px;
-}
-.ea-button-group ::slotted(ea-button:last-of-type) {
-  --border-radius: 0 4px 4px 0;
-}

package/components/ea-button-group/index.js

@@ -1,44 +0,0 @@
-// @ts-nocheck
-import Base from "../Base.js";
-
-import { stylesheet } from "./src/style/stylesheet.js";
-
-export class EaButtonGroup extends Base {
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-
-    shadowRoot.innerHTML = `
-      <div class="ea-button-group">
-        <slot></slot>
-      </div>
-    `;
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  // ------- disabled 禁用按钮 -------
-  // #region
-  get disabled() {
-    return this.getAttrBoolean('disabled');
-  }
-
-  set disabled(value) {
-    this.toggleAttr('disabled', value);
-
-    Array.from(this.children).forEach(child => {
-      child.disabled = value;
-    });
-  }
-  // #endregion
-  // ------- end -------
-
-  connectedCallback() {
-    this.disabled = this.disabled;
-  }
-}
-
-if (!window.customElements.get("ea-button-group")) {
-  window.customElements.define("ea-button-group", EaButtonGroup);
-}

package/components/ea-button-group/index.scss

@@ -1,20 +0,0 @@
-.ea-button-group {
-  display: flex;
-  align-items: center;
-
-  ::slotted(ea-button) {
-    --border-radius: 0;
-  }
-
-  ::slotted(ea-button:not([type="normal"])) {
-    border-right: 1px solid rgba(255, 255, 255, 0.3);
-  }
-
-  ::slotted(ea-button:first-of-type) {
-    --border-radius: 4px 0 0 4px;
-  }
-
-  ::slotted(ea-button:last-of-type) {
-    --border-radius: 0 4px 4px 0;
-  }
-}

package/components/ea-button-group/src/style/stylesheet.js

@@ -1,18 +0,0 @@
-export const stylesheet = `
-.ea-button-group {
-  display: flex;
-  align-items: center;
-}
-.ea-button-group ::slotted(ea-button) {
-  --border-radius: 0;
-}
-.ea-button-group ::slotted(ea-button:not([type=normal])) {
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
-}
-.ea-button-group ::slotted(ea-button:first-of-type) {
-  --border-radius: 4px 0 0 4px;
-}
-.ea-button-group ::slotted(ea-button:last-of-type) {
-  --border-radius: 0 4px 4px 0;
-}
-`;