easy-component-ui 2.1.0 → 3.0.0

package/components/ea-link/index.js

@@ -1,122 +0,0 @@
-import Base from '../Base.js'
-import "../ea-icon/index.js"
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaLink extends Base {
-  #container;
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    shadowRoot.innerHTML = `
-      <a class="ea-link" part="container">
-        <slot></slot>
-      </a>
-    `;
-
-    this.#container = shadowRoot.querySelector('.ea-link');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  get LINK_TYPE() {
-    return ['primary', 'success', 'info', 'warning', 'danger'];
-  }
-
-  // ------- href链接 -------
-  // #region
-  get href() {
-    return this.getAttribute('href');
-  }
-
-  set href(value) {
-    if (!value) return;
-
-    this.setAttribute('href', value);
-    this.#container.href = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- type类型 -------
-  // #region
-  get type() {
-    const attr = this.getAttribute('type');
-    return this.LINK_TYPE.includes(attr) ? attr : null;
-  }
-
-  set type(value) {
-    if (!value) return;
-
-    if (this.LINK_TYPE.includes(value)) this.#container.classList.add(value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- disabled禁用状态 -------
-  // #region
-  get disabled() {
-    return this.getAttrBoolean('disabled');
-  }
-
-  set disabled(value) {
-    this.setAttribute('disabled', value);
-    this.#container.classList.toggle('disabled', value);
-    this.style.cursor = value ? 'not-allowed' : 'pointer';
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- underline下划线 -------
-  // #region
-  get underline() {
-    return this.getAttrBoolean('underline');
-  }
-
-  set underline(value) {
-    this.setAttribute('underline', value);
-    this.#container.classList.toggle('underline', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- icon图标 -------
-  // #region
-  get icon() {
-    return this.getAttribute('icon');
-  }
-
-  set icon(value) {
-    if (!value) return;
-
-    const icon = document.createElement('ea-icon');
-    icon.icon = value;
-    this.#container.insertBefore(icon, this.#container.firstChild);
-  }
-  // #endregion
-  // ------- end -------
-
-  connectedCallback() {
-    this.style.display = 'inline-block';
-
-    // 设置链接
-    this.href = this.href;
-
-    // 设置类型
-    this.type = this.type;
-
-    // 禁用状态
-    this.disabled = this.disabled;
-
-    // 设置下划线
-    this.underline = this.underline;
-
-    // 图标
-    this.icon = this.icon;
-  }
-}
-
-if (!window.customElements.get("ea-link")) {
-  window.customElements.define("ea-link", EaLink);
-}

package/components/ea-link/index.scss

@@ -1,36 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-@mixin ea-link-theme($theme-name, $color) {
-  &.#{$theme-name} {
-    color: $color;
-
-    &:hover {
-      color: lighten($color, 10);
-    }
-
-    @if ($theme-name == "disabled") {
-      pointer-events: none;
-    }
-  }
-}
-
-.ea-link {
-  text-decoration: none;
-  color: $color-default-text;
-  cursor: pointer;
-
-  &:hover {
-    color: lighten($color-default-text, 10);
-  }
-
-  &.underline:hover {
-    text-decoration: underline;
-  }
-
-  @include ea-link-theme("primary", $color-primary-bgc);
-  @include ea-link-theme("success", $color-success-bgc);
-  @include ea-link-theme("info", $color-info-bgc);
-  @include ea-link-theme("warning", $color-warning-bgc);
-  @include ea-link-theme("danger", $color-danger-bgc);
-  @include ea-link-theme("disabled", $color-disabled-text);
-}

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

@@ -1,50 +0,0 @@
-export const stylesheet = `
-.ea-link {
-  text-decoration: none;
-  color: #606266;
-  cursor: pointer;
-}
-.ea-link:hover {
-  color: #797b80;
-}
-.ea-link.underline:hover {
-  text-decoration: underline;
-}
-.ea-link.primary {
-  color: #409eff;
-}
-.ea-link.primary:hover {
-  color: #73b8ff;
-}
-.ea-link.success {
-  color: #67c23a;
-}
-.ea-link.success:hover {
-  color: #85cf60;
-}
-.ea-link.info {
-  color: #909399;
-}
-.ea-link.info:hover {
-  color: #abadb1;
-}
-.ea-link.warning {
-  color: #e6a23c;
-}
-.ea-link.warning:hover {
-  color: #ecb869;
-}
-.ea-link.danger {
-  color: #f56c6c;
-}
-.ea-link.danger:hover {
-  color: #f89c9c;
-}
-.ea-link.disabled {
-  color: #c0c4cc;
-  pointer-events: none;
-}
-.ea-link.disabled:hover {
-  color: #dcdee3;
-}
-`;

package/components/ea-loading/index.css

@@ -1,38 +0,0 @@
-.ea-loading_wrap {
-  position: relative;
-}
-.ea-loading_wrap .ea-loading_mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background-color: hsla(0, 0%, 100%, 0.9);
-  z-index: 1;
-  transition: background-color 0.2s;
-}
-.ea-loading_wrap .ea-loading_spinner,
-.ea-loading_wrap .ea-loading_text {
-  color: #409eff;
-}
-.ea-loading_wrap .ea-loading_spinner {
-  font-size: 2rem;
-}
-.ea-loading_wrap .ea-loading_text {
-  margin-left: 0.5rem;
-}
-.ea-loading_wrap.ea-loading_wrap--fullscreen {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 3000;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask {
-  display: flex;
-}

package/components/ea-loading/index.js

@@ -1,166 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import "../ea-icon/index.js";
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-
-export class EaLoading extends Base {
-    #wrap;
-
-    #loadingWrap;
-
-    #spinner;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-        <div class="ea-loading_wrap" part="container">
-            <div class="ea-loading_mask" part="mask-wrap">
-                <ea-icon icon="icon-spin6 animate-spin" class="ea-loading_spinner" part="icon"></ea-icon>
-            </div>
-            <div class="ea-loading_content" part="content-wrap">
-                <slot></slot>
-            </div>
-        </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-loading_wrap');
-        this.#loadingWrap = shadowRoot.querySelector('.ea-loading_mask');
-        this.#spinner = shadowRoot.querySelector('.ea-loading_spinner');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- loading 加载状态 -------
-    // #region
-    get loading() {
-        return this.getAttrBoolean('loading') || false;
-    }
-
-    set loading(flag) {
-        this.setAttribute('loading', flag);
-
-        this.#wrap.classList.toggle('ea-loading_wrap--loading', flag);
-
-        this.#handleFullscreen(this.fullscreen, flag, this.lock);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- spinner 加载图标 -------
-    // #region
-    get spinner() {
-        return this.getAttribute('spinner') || "icon-spin6";
-    }
-
-    set spinner(val) {
-        this.setAttribute('spinner', val);
-
-        this.#spinner.icon = `${val} animate-spin`
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- spinner-size 加载图标大小 -------
-    // #region
-    get spinnerSize() {
-        return this.getAttrNumber('spinner-size') || 16;
-    }
-
-    set spinnerSize(val) {
-        this.setAttribute('spinner-size', val);
-
-        this.#spinner.style.fontSize = `${val}px`;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- background 背景颜色 -------
-    // #region
-    get background() {
-        return this.getAttribute('background') || "hsla(0, 0%, 100%, 0.9)";
-    }
-
-    set background(val) {
-        this.setAttribute('background', val);
-
-        this.#loadingWrap.style.backgroundColor = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- text 文本 -------
-    // #region
-    get text() {
-        return this.getAttribute('text') || "";
-    }
-
-    set text(val) {
-        if (!val) return;
-
-        this.setAttribute('text', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- fullscreen 全屏 -------
-    // #region
-    get fullscreen() {
-        return this.getAttrBoolean('fullscreen') || false;
-    }
-
-    set fullscreen(val) {
-        if (!val) return;
-
-        this.setAttribute('fullscreen', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- lock 全屏是否锁定 -------
-    // #region
-    get lock() {
-        return this.getAttrBoolean('lock') || false;
-    }
-
-    set lock(val) {
-        if (!val) return;
-
-        this.setAttribute('lock', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleFullscreen(isFullscreen, isLoading, isLock) {
-        if (isFullscreen) {
-            this.#wrap.classList.toggle('ea-loading_wrap--fullscreen', isLoading);
-
-            if (isLock) document.body.style.overflow = isLoading ? 'hidden' : 'auto';
-        }
-    }
-
-    connectedCallback() {
-        this.fullscreen = this.fullscreen;
-
-        this.loading = this.loading;
-
-        this.spinnerSize = this.spinnerSize;
-
-        this.spinner = this.spinner;
-
-        this.background = this.background;
-
-        if (this.text) {
-            const el = document.createElement('div');
-            el.className = 'ea-loading_text';
-            el.innerHTML = this.text;
-            this.#loadingWrap.appendChild(el);
-        }
-    }
-}
-
-if (!customElements.get('ea-loading')) {
-    customElements.define('ea-loading', EaLoading);
-}

package/components/ea-loading/index.scss

@@ -1,55 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-.ea-loading_wrap {
-  position: relative;
-
-  .ea-loading_mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    display: none;
-    justify-content: center;
-    align-items: center;
-
-    width: 100%;
-    height: 100%;
-
-    background-color: hsla(0, 0%, 100%, 0.9);
-    z-index: 1;
-
-    transition: background-color 0.2s;
-  }
-
-  .ea-loading_spinner,
-  .ea-loading_text {
-    color: $color-primary-bgc;
-  }
-
-  .ea-loading_spinner {
-    font-size: 2rem;
-  }
-
-  .ea-loading_text {
-    margin-left: 0.5rem;
-  }
-
-  &.ea-loading_wrap--fullscreen {
-    position: fixed;
-    left: 0;
-    top: 0;
-
-    z-index: 3000;
-
-    width: 100%;
-    height: 100%;
-
-    overflow: hidden;
-  }
-
-  &.ea-loading_wrap--loading {
-    .ea-loading_mask {
-      display: flex;
-    }
-  }
-}

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

@@ -1,40 +0,0 @@
-export const stylesheet = `
-.ea-loading_wrap {
-  position: relative;
-}
-.ea-loading_wrap .ea-loading_mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background-color: hsla(0, 0%, 100%, 0.9);
-  z-index: 1;
-  transition: background-color 0.2s;
-}
-.ea-loading_wrap .ea-loading_spinner,
-.ea-loading_wrap .ea-loading_text {
-  color: #409eff;
-}
-.ea-loading_wrap .ea-loading_spinner {
-  font-size: 2rem;
-}
-.ea-loading_wrap .ea-loading_text {
-  margin-left: 0.5rem;
-}
-.ea-loading_wrap.ea-loading_wrap--fullscreen {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 3000;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask {
-  display: flex;
-}
-`;

package/components/ea-main/index.css

@@ -1,8 +0,0 @@
-.ea-main_wrap {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0 20px;
-  overflow: auto;
-  color: #333;
-}

package/components/ea-main/index.js

@@ -1,32 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-const stylesheet = `
-.ea-main_wrap {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0 20px;
-  overflow: auto;
-  color: #333;
-}
-`;
-
-export class EaMain extends Base {
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <main class="ea-main_wrap" part="container">
-                <slot></slot>
-            </main>
-        `;
-
-        this.build(shadowRoot, stylesheet);
-    }
-}
-
-if (!customElements.get('ea-main')) {
-    customElements.define('ea-main', EaMain);
-}

package/components/ea-main/index.scss

@@ -1,11 +0,0 @@
-.ea-main_wrap {
-  width: 100%;
-  height: 100%;
-
-  box-sizing: border-box;
-  padding: 0 20px;
-
-  overflow: auto;
-
-  color: #333;
-}

package/components/ea-menu/index.css

@@ -1,19 +0,0 @@
-.ea-menu_wrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 20px;
-}
-.ea-menu_wrap.is-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  border-right: 1px solid #e6e6e6;
-  overflow: auto;
-}
-.ea-menu_wrap.is-vertical ::slotted(ea-menu-item),
-.ea-menu_wrap.is-vertical ::slotted(ea-submenu) {
-  width: 100%;
-}
-.ea-menu_wrap.is-vertical ::slotted(ea-submenu) {
-  width: 100%;
-}