easy-component-ui 2.1.1 → 3.0.1

package/components/ea-aside/index.js

@@ -1,54 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-const stylesheet = `
-.ea-aside_wrap {
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
-.ea-aside_wrap ::slotted(ea-main) {
-  overflow: auto;
-}
-`;
-
-export class EaAside extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <aside class="ea-aside_wrap" part="container">
-                <slot></slot>
-            </aside>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-aside_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- width 侧边栏宽度 -------
-    // #region
-    get width() {
-        return this.getAttrNumber('width') || 200;
-    }
-
-    set width(value) {
-        this.setAttribute('width', value);
-
-        this.#wrap.style.width = `${value}px`;
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.width = this.width;
-    }
-}
-
-if (!customElements.get('ea-aside')) {
-    customElements.define('ea-aside', EaAside);
-}

package/components/ea-aside/index.scss

@@ -1,12 +0,0 @@
-.ea-aside_wrap {
-  height: 100%;
-
-  overflow: auto;
-
-  display: flex;
-  flex-direction: column;
-
-  ::slotted(ea-main) {
-    overflow: auto;
-  }
-}

package/components/ea-avatar/index.css

@@ -1,66 +0,0 @@
-@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-avatar_wrap .ea-avatar {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  color: #ffffff;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {
-  object-fit: fill;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {
-  object-fit: contain;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {
-  object-fit: cover;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {
-  object-fit: none;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {
-  object-fit: scale-down;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--normal {
-  width: 50px;
-  height: 50px;
-  line-height: 50px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--large {
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--medium {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--small {
-  width: 28px;
-  height: 28px;
-  line-height: 28px;
-}
-.ea-avatar_wrap .ea-avatar .ea-avatar--text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--circle {
-  border-radius: 50%;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--square {
-  border-radius: 5px;
-}
-.ea-avatar_wrap .ea-avatar .ea-avatar--img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/components/ea-avatar/index.js

@@ -1,156 +0,0 @@
-import Base from '../Base.js';
-
-import "../ea-icon/index.js"
-
-import { errorAvatar } from './src/assets/errorAvatar.js';
-import { iconAvatar, textAvatar } from './src/assets/iconAndTextAvatar.js';
-
-import { stylesheet } from "./src/style/stylesheet.js"
-
-
-export class EaAvatar extends Base {
-    #avatar;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class="ea-avatar_wrap" part='container'>
-                <span class="ea-avatar" part="avatar">
-                    <slot></slot>
-                </span>
-            </div>
-        `;
-
-        this.#avatar = shadowRoot.querySelector('.ea-avatar');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- size 图片大小 -------
-    // #region
-    get size() {
-        const sizeNumber = this.getAttrNumber('size');
-        const sizeString = this.getAttribute('size');
-
-        if (sizeNumber === 0 || !sizeNumber) {
-            return ['large', 'medium', 'small'].includes(sizeString) ? sizeString : 'normal';
-        }
-
-        return this.getAttrNumber('size');
-    }
-
-    set size(value) {
-        this.setAttribute('size', value);
-
-        if (typeof value === "number") {
-            this.#avatar.style.width = `${value}px`;
-            this.#avatar.style.height = `${value}px`;
-            this.#avatar.style.lineHeight = `${value}px`;
-        } else if (typeof value === "string") {
-            this.#avatar.classList.add(`ea-avatar--${value}`);
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- shape 图片形状 -------
-    // #region
-    get shape() {
-        const shape = this.getAttribute('shape');
-
-        return ['circle', 'square'].includes(shape) ? shape : 'circle';
-    }
-
-    set shape(value) {
-        this.setAttribute('shape', value);
-        this.#avatar.classList.add(`ea-avatar--${this.shape}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- src 图片链接 -------
-    // #region
-    get src() {
-        return this.getAttribute('src');
-    }
-
-    set src(value) {
-        if (!value) return;
-
-        this.setAttribute('src', value);
-
-        const image = new Image();
-        image.src = value;
-
-        image.onload = () => {
-            this.#avatar.innerHTML = `<img class="ea-avatar--img" src="${value}" alt="头像">`;
-        };
-
-        image.onerror = (e) => {
-            this.#avatar.innerHTML = errorAvatar;
-
-            this.dispatchEvent(new CustomEvent('error', {
-                detail: {
-                    error: e,
-                },
-            }));
-        };
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- icon 图标 -------
-    // #region
-    get icon() {
-        return this.getAttribute('icon') || '';
-    }
-
-    set icon(value) {
-        this.setAttribute('icon', value);
-
-        this.#avatar.innerHTML = iconAvatar(value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- fit 图片容器适应 -------
-    // #region
-    get fit() {
-        return this.getAttribute('fit') || 'cover';
-    }
-
-    set fit(value) {
-        this.setAttribute('fit', value);
-
-        this.#avatar.classList.add(`ea-avatar-fill--${value}`);
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.size = this.size;
-
-        this.shape = this.shape;
-
-        this.src = this.src;
-
-        if (this.src) {
-            this.fit = this.fit;
-        }
-
-        if (!this.src && this.icon) {
-            this.icon = this.icon;
-        }
-
-        if (this.innerHTML !== "" && !this.icon && !this.src) {
-            this.#avatar.innerHTML = textAvatar(this.innerHTML);
-        }
-    }
-}
-
-if (!customElements.get('ea-avatar')) {
-    customElements.define('ea-avatar', EaAvatar);
-}

package/components/ea-avatar/index.scss

@@ -1,59 +0,0 @@
-@import "../ea-ui-base-style.scss";
-@import "../ea-icon/index.scss";
-
-@mixin ea-avatar-size($size-name, $size) {
-  &.ea-avatar--#{$size-name} {
-    width: $size;
-    height: $size;
-    line-height: $size;
-  }
-}
-
-$fit-type: fill contain cover none scale-down;
-@mixin ea-object-fit($type) {
-  &.ea-avatar-fill--#{$type} {
-    img {
-      object-fit: $type;
-    }
-  }
-}
-
-.ea-avatar_wrap {
-  .ea-avatar {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    color: #ffffff;
-
-    @each $type in $fit-type {
-      @include ea-object-fit($type);
-    }
-
-    @include ea-avatar-size("normal", 50px);
-    @include ea-avatar-size("large", 40px);
-    @include ea-avatar-size("medium", 36px);
-    @include ea-avatar-size("small", 28px);
-
-    .ea-avatar--text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &.ea-avatar--circle {
-      border-radius: 50%;
-    }
-
-    &.ea-avatar--square {
-      border-radius: 5px;
-    }
-
-    .ea-avatar--img {
-      width: 100%;
-      height: 100%;
-
-      object-fit: cover;
-    }
-  }
-}

package/components/ea-avatar/src/assets/defaultAvatar.js

@@ -1,12 +0,0 @@
-export const defaultAvatar = `
-    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-            <clipPath id="a">
-                <path d="M0 40h90v45H0z" />
-            </clipPath>
-        </defs>
-        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        <circle cx="50" cy="35" r="20" fill="#fff" />
-        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />
-    </svg>
-`;

package/components/ea-avatar/src/assets/errorAvatar.js

@@ -1,9 +0,0 @@
-export const errorAvatar = `
-    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        <path fill="#fff" d="M15 20h70v60H15z" />
-        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
-        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
-        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
-    </svg>
-`;

package/components/ea-avatar/src/assets/iconAndTextAvatar.js

@@ -1,18 +0,0 @@
-const background = `
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-</svg>
-`;
-export const iconAvatar = (icon) => {
-    return `
-        ${background}
-        <ea-icon class="fa ea-avatar--text" icon="${icon}"></ea-icon>
-    `;
-}
-
-export const textAvatar = (text) => {
-    return `
-        ${background}
-        <span class="ea-avatar--text">${text}</span>
-    `;
-}

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

@@ -1,61 +0,0 @@
-
-export const stylesheet = `
-.ea-avatar_wrap .ea-avatar {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  color: #ffffff;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {
-  object-fit: fill;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {
-  object-fit: contain;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {
-  object-fit: cover;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {
-  object-fit: none;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {
-  object-fit: scale-down;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--normal {
-  width: 50px;
-  height: 50px;
-  line-height: 50px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--large {
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--medium {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--small {
-  width: 28px;
-  height: 28px;
-  line-height: 28px;
-}
-.ea-avatar_wrap .ea-avatar .ea-avatar--text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--circle {
-  border-radius: 50%;
-}
-.ea-avatar_wrap .ea-avatar.ea-avatar--square {
-  border-radius: 5px;
-}
-.ea-avatar_wrap .ea-avatar .ea-avatar--img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-`;

package/components/ea-backtop/index.css

@@ -1,27 +0,0 @@
-@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-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/index.js

@@ -1,167 +0,0 @@
-import { timeout } from '../../utils/timeout.js';
-import Base from '../Base.js';
-import "../ea-icon/index.js"
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaBacktop extends Base {
-    #wrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-backtop_wrap" part='container' style='display: none'>
-                <slot></slot>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-backtop_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- target 触发滚动的对象 -------
-    // #region
-    get target() {
-        return this.getAttribute('target') || '';
-    }
-
-    set target(value) {
-        this.setAttribute('target', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- right 滚动按钮距离右边的距离 -------
-    // #region
-    get right() {
-        return this.getAttribute('right') || '40px';
-    }
-
-    set right(value) {
-        this.setAttribute('right', value);
-
-        this.#wrap.style.right = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- bottom 滚动按钮距离下边的距离 -------
-    // #region
-    get bottom() {
-        return this.getAttribute('bottom') || '40px';
-    }
-
-    set bottom(value) {
-        this.setAttribute('bottom', value);
-
-        this.#wrap.style.bottom = value;
-    }
-    // #endregion
-    // ------- end ------- 
-
-    // ------- icon 图标类名 -------
-    // #region
-    get icon() {
-        return this.getAttribute('icon') || "icon-angle-up";
-    }
-
-    set icon(value) {
-        this.setAttribute('icon', value);
-
-        this.#wrap.innerHTML = `
-            <ea-icon icon="${value}" part='icon'></ea-icon>
-        `;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- visibility-height 滚动按钮显示和隐藏的触发条件 -------
-    // #region
-    get visibilityHeight() {
-        return this.getAttribute('visibility-height') || 200;
-    }
-
-    set visibilityHeight(value) {
-        this.setAttribute('visibility-height', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleScrollEvent(targetName) {
-        let dom = null;
-        let scrollDom = null;
-
-        if (targetName === "null" || targetName === '' || targetName === null || targetName === undefined || targetName === 'undefined') {
-            dom = document;
-            scrollDom = document.documentElement;
-        } else {
-            dom = document.querySelector(targetName);
-            scrollDom = document.querySelector(targetName);
-        }
-
-        return { dom, scrollDom };
-    }
-
-    #handleBackTopBtnShow(scrollDom) {
-        if (scrollDom.scrollTop > this.visibilityHeight) {
-            this.#wrap.style.display = 'flex';
-            this.#wrap.ontransitionend = null;
-
-            timeout(() => {
-                this.#wrap.style.opacity = 1;
-            }, 10);
-        } else {
-            this.#wrap.style.opacity = 0;
-
-            this.#wrap.ontransitionend = () => {
-                this.#wrap.style.display = 'none';
-            };
-        }
-    }
-
-    #initScrollBtn() {
-        const { dom, scrollDom } = this.#handleScrollEvent(this.target);
-
-        this.#handleBackTopBtnShow(scrollDom);
-
-        dom.addEventListener('scroll', () => {
-            this.#handleBackTopBtnShow(scrollDom);
-        });
-
-        this.#wrap.addEventListener('click', function () {
-            let step = 10;
-
-            let timer = setInterval(() => {
-                step += 5;
-                scrollDom.scrollTop -= step;
-
-                if (scrollDom.scrollTop <= 0) {
-                    scrollDom.scrollTop = 0;
-                    clearInterval(timer);
-                    timer = null;
-
-                    this.dispatchEvent(new CustomEvent('reachedTop', {}));
-                }
-            }, 12);
-
-            this.dispatchEvent(new CustomEvent('backtop', {}));
-        });
-    }
-
-    connectedCallback() {
-        this.target = this.target;
-        this.right = this.right;
-        this.bottom = this.bottom;
-        this.visibilityHeight = this.visibilityHeight;
-        this.icon = this.icon;
-        
-        this.#initScrollBtn();
-    }
-}
-
-if (!customElements.get('ea-backtop')) {
-    customElements.define('ea-backtop', EaBacktop);
-}

package/components/ea-backtop/index.scss

@@ -1,29 +0,0 @@
-@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,21 +0,0 @@
-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;
-}
-`;