easy-component-ui 2.0.5 → 2.1.1

package/components/ea-link/index.js

@@ -1 +1,122 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaLink extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n      <a class="ea-link" part="container">\n        <slot></slot>\n      </a>\n    ',this.#t=t.querySelector(".ea-link"),this.build(t,stylesheet)}get LINK_TYPE(){return["primary","success","info","warning","danger"]}get href(){return this.getAttribute("href")}set href(t){t&&(this.setAttribute("href",t),this.#t.href=t)}get type(){const t=this.getAttribute("type");return this.LINK_TYPE.includes(t)?t:null}set type(t){t&&this.LINK_TYPE.includes(t)&&this.#t.classList.add(t)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#t.classList.toggle("disabled",t),this.style.cursor=t?"not-allowed":"pointer"}get underline(){return this.getAttrBoolean("underline")}set underline(t){this.setAttribute("underline",t),this.#t.classList.toggle("underline",t)}get icon(){return this.getAttribute("icon")}set icon(t){if(!t)return;const e=document.createElement("ea-icon");e.icon=t,this.#t.insertBefore(e,this.#t.firstChild)}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}}window.customElements.get("ea-link")||window.customElements.define("ea-link",EaLink);
+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

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

@@ -0,0 +1,38 @@
+.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 +1,166 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaLoading extends Base{#e;#t;#s;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n        <div class="ea-loading_wrap" part="container">\n            <div class="ea-loading_mask" part="mask-mask">\n                <ea-icon icon="icon-spin6 animate-spin" class="ea-loading_spinner" part="icon"></ea-icon>\n            </div>\n            <slot></slot>\n        </div>\n        ',this.#e=e.querySelector(".ea-loading_wrap"),this.#t=e.querySelector(".ea-loading_mask"),this.#s=e.querySelector(".ea-loading_spinner"),this.build(e,stylesheet)}get loading(){return this.getAttrBoolean("loading")||!1}set loading(e){this.setAttribute("loading",e),this.#e.classList.toggle("ea-loading_wrap--loading",e),this.#n(this.fullscreen,e,this.lock)}get spinner(){return this.getAttribute("spinner")||"icon-spin6"}set spinner(e){this.setAttribute("spinner",e),this.#s.icon=`${e} animate-spin`}get spinnerSize(){return this.getAttrNumber("spinner-size")||16}set spinnerSize(e){this.setAttribute("spinner-size",e),this.#s.style.fontSize=`${e}px`}get background(){return this.getAttribute("background")||"hsla(0, 0%, 100%, 0.9)"}set background(e){this.setAttribute("background",e),this.#t.style.backgroundColor=e}get text(){return this.getAttribute("text")||""}set text(e){e&&this.setAttribute("text",e)}get fullscreen(){return this.getAttrBoolean("fullscreen")||!1}set fullscreen(e){e&&this.setAttribute("fullscreen",e)}get lock(){return this.getAttrBoolean("lock")||!1}set lock(e){e&&this.setAttribute("lock",e)}#n(e,t,s){e&&(this.#e.classList.toggle("ea-loading_wrap--fullscreen",t),s&&(document.body.style.overflow=t?"hidden":"auto"))}connectedCallback(){if(this.fullscreen=this.fullscreen,this.loading=this.loading,this.spinnerSize=this.spinnerSize,this.spinner=this.spinner,this.background=this.background,this.text){const e=document.createElement("div");e.className="ea-loading_text",e.innerHTML=this.text,this.#t.appendChild(e)}}}customElements.get("ea-loading")||customElements.define("ea-loading",EaLoading);
+// @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

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

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

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

package/components/ea-menu/index.css

@@ -0,0 +1,19 @@
+.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%;
+}