easy-component-ui 2.1.1 → 3.0.1

package/components/ea-drawer/index.js

@@ -1,251 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-import { timeout } from '../../utils/timeout.js';
-import { handleDefaultAttrIsTrue } from '../../utils/handleDefaultAttrIsTrue.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaDrawer extends Base {
-  #wrap;
-
-  #drawerWrap;
-  #maskWrap;
-
-  #headerWrap;
-  #headerTitleWrap;
-  #headerCloseIcon;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    shadowRoot.innerHTML = `
-      <div class="ea-drawer_wrap" part="container">
-        <div class="ea-drawer_drawer-wrap" part="drawer-wrap">
-          <div class="ea-drawer_header-wrap" part="header-wrap">
-            <span class="ea-drawer_title" part="title-wrap">
-              <slot name="title"></slot>
-            </span>
-            <ea-icon class="ea-drawer_icon" icon="icon-cancel" part="icon"></ea-icon>
-          </div>
-          <div class="ea-drawer_main-wrap" part="main-wrap">
-            <slot></slot>
-          </div>
-          <div class="ea-drawer_mask-wrap" part="mask-wrap"></div>
-        </div>
-      </div>
-    `;
-
-
-    this.#wrap = shadowRoot.querySelector('.ea-drawer_wrap');
-    this.#drawerWrap = shadowRoot.querySelector('.ea-drawer_drawer-wrap');
-    this.#maskWrap = shadowRoot.querySelector('.ea-drawer_mask-wrap');
-
-    this.#headerWrap = shadowRoot.querySelector('.ea-drawer_header-wrap');
-    this.#headerTitleWrap = shadowRoot.querySelector('.ea-drawer_title');
-    this.#headerCloseIcon = shadowRoot.querySelector('.ea-drawer_icon');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  get directionType() {
-    return ['ltr', 'rtl', 'ttb', 'btt'];
-  }
-
-  // ------- direction 抽屉打开方向 -------
-  // #region
-  get direction() {
-    const attr = this.getAttribute('direction');
-
-    return this.directionType.includes(attr) ? attr : 'ltr';
-  }
-
-  set direction(value) {
-    this.setAttribute('direction', value);
-
-    this.#wrap.classList.toggle('direction-ltr', value === 'ltr');
-    this.#wrap.classList.toggle('direction-rtl', value === 'rtl');
-    this.#wrap.classList.toggle('direction-ttb', value === 'ttb');
-    this.#wrap.classList.toggle('direction-btt', value === 'btt');
-
-    this.#handleDirectionAndSizeChange(this.size);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- open 是否打开 -------
-  // #region
-  get open() {
-    return this.getAttrBoolean('open') || false;
-  }
-
-  set open(value) {
-    this.toggleAttr('open', value);
-
-    timeout(() => {
-      this.#wrap.classList.toggle('is-open', value);
-    }, 20);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- size 抽屉宽度 -------
-  // #region
-
-  get size() {
-    return this.getAttribute('size') || '30%';
-  }
-
-  set size(value) {
-    this.setAttribute('size', value);
-
-    this.#handleDirectionAndSizeChange(value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- withHeader 是否显示标题 -------
-  // #region
-  get withHeader() {
-    let attr = handleDefaultAttrIsTrue(this.getAttribute('with-header'));
-
-    return attr;
-  }
-
-  set withHeader(value) {
-    this.toggleAttr('with-header', value);
-
-    this.#headerWrap.style.display = value ? 'flex' : 'none';
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- title 标题 -------
-  // #region
-  get title() {
-    return this.getAttribute('title');
-  }
-
-  set title(value) {
-    this.setAttribute('title', value);
-
-    if (value) {
-      this.#headerTitleWrap.innerText = value;
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- show-close 是否显示关闭按钮 -------
-  // #region
-  get showClose() {
-    let attr = handleDefaultAttrIsTrue(this.getAttribute('show-close'));
-
-    return attr;
-  }
-
-  set showClose(value) {
-    this.toggleAttr('show-close', value);
-
-    this.#headerCloseIcon.style.display = value ? 'block' : 'none';
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- modal 遮罩层 -------
-  // #region
-  get modal() {
-    let attr = handleDefaultAttrIsTrue(this.getAttribute('modal'));
-
-    return attr;
-  }
-
-  set modal(value) {
-    this.toggleAttr('modal', value);
-
-    this.#maskWrap.style.display = value ? 'block' : 'none';
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- wrapperClosable 点击遮罩层是否关闭 -------
-  // #region
-  get wrapperClosable() {
-    let attr = handleDefaultAttrIsTrue(this.getAttribute('wrapper-closable'));
-
-    return attr;
-  }
-
-  set wrapperClosable(value) {
-    this.setAttribute('wrapper-closable', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  #handleDirectionAndSizeChange(value) {
-
-    const directionSize = this.direction === "ltr" || this.direction === "rtl" ? 'width' : 'height';
-
-    this.#drawerWrap.style.height = 'inherit';
-    this.#drawerWrap.style.width = 'inherit';
-
-    this.#drawerWrap.style[directionSize] = value;
-  }
-
-  #initDrawerCloseEvent() {
-    const callback = () => {
-      this.open = false;
-      this.#wrap.classList.remove('will-close');
-
-      this.#drawerWrap.removeEventListener('transitionend', callback);
-    }
-
-    const handleClose = () => {
-      this.#wrap.classList.add('will-close');
-
-      this.#drawerWrap.addEventListener('transitionend', callback);
-
-      this.dispatchEvent(new CustomEvent('close', {
-        bubbles: true,
-        composed: true,
-      }));
-    }
-
-    if (this.wrapperClosable && this.modal) {
-      this.#maskWrap.addEventListener('click', () => {
-        handleClose();
-      });
-    }
-
-    if (this.showClose) {
-      this.#headerCloseIcon.addEventListener('click', () => {
-        handleClose();
-      });
-    }
-  }
-
-  connectedCallback() {
-    this.direction = this.direction;
-
-    this.size = this.size;
-
-    this.withHeader = this.withHeader;
-    if (this.withHeader) {
-      this.showClose = this.showClose;
-      this.title = this.title;
-    }
-
-    this.modal = this.modal;
-
-    this.wrapperClosable = this.wrapperClosable;
-
-    this.open = false;
-
-    this.#initDrawerCloseEvent();
-  }
-}
-
-if (!customElements.get('ea-drawer')) {
-  customElements.define('ea-drawer', EaDrawer);
-}

package/components/ea-drawer/index.scss

@@ -1,208 +0,0 @@
-.ea-drawer_wrap {
-  position: fixed;
-
-  width: 100%;
-  height: 100%;
-
-  z-index: 2001;
-
-  .ea-drawer_drawer-wrap {
-    position: absolute;
-
-    display: flex;
-    flex-direction: column;
-
-    background-color: #fff;
-
-    transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
-
-    .ea-drawer_header-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      box-sizing: border-box;
-      margin-bottom: 32px;
-      padding: 20px 20px 0;
-
-      color: #72767b;
-
-      .ea-drawer_icon {
-        cursor: pointer;
-      }
-    }
-
-    .ea-drawer_main-wrap {
-      flex: 1;
-
-      box-sizing: border-box;
-      padding: 20px;
-
-      overflow: auto;
-    }
-
-    .ea-drawer_mask-wrap {
-      position: fixed;
-
-      width: 100%;
-      height: 100%;
-
-      background-color: rgba(0, 0, 0, 0.4);
-      z-index: -1;
-
-      opacity: 0;
-      scale: 0;
-
-      transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
-    }
-  }
-
-  &.direction-ltr,
-  &.direction-rtl {
-    top: 0;
-
-    .ea-drawer_drawer-wrap {
-      top: 0;
-
-      height: 100%;
-    }
-  }
-
-  &.direction-ttb,
-  &.direction-btt {
-    left: 0;
-
-    .ea-drawer_drawer-wrap {
-      left: 0;
-
-      width: 100%;
-    }
-
-    .ea-drawer_mask-wrap {
-      left: 0;
-    }
-  }
-
-  &.direction-ltr,
-  &.direction-rtl,
-  &.direction-ttb,
-  &.direction-btt {
-    &.is-open {
-      .ea-drawer_mask-wrap {
-        opacity: 1;
-        scale: 1;
-      }
-    }
-
-    &.will-close {
-      .ea-drawer_mask-wrap {
-        opacity: 0;
-        scale: 0;
-      }
-    }
-  }
-
-  &.direction-ltr {
-    left: -100%;
-
-    .ea-drawer_drawer-wrap {
-      left: -100%;
-    }
-
-    .ea-drawer_mask-wrap {
-      left: 0;
-    }
-
-    &.is-open {
-      left: 0;
-
-      .ea-drawer_drawer-wrap {
-        left: 0;
-      }
-    }
-
-    &.will-close {
-      .ea-drawer_drawer-wrap {
-        left: -100%;
-      }
-    }
-  }
-
-  &.direction-rtl {
-    right: -100%;
-
-    .ea-drawer_drawer-wrap {
-      right: -100%;
-    }
-
-    .ea-drawer_mask-wrap {
-      right: 0;
-    }
-
-    &.is-open {
-      right: 0;
-
-      .ea-drawer_drawer-wrap {
-        right: 0;
-      }
-    }
-
-    &.will-close {
-      .ea-drawer_drawer-wrap {
-        right: -100%;
-      }
-    }
-  }
-
-  &.direction-ttb {
-    bottom: -100%;
-
-    .ea-drawer_drawer-wrap {
-      bottom: -100%;
-    }
-
-    .ea-drawer_mask-wrap {
-      bottom: 0;
-    }
-
-    &.is-open {
-      bottom: 0;
-
-      .ea-drawer_drawer-wrap {
-        bottom: 0;
-      }
-    }
-
-    &.will-close {
-      .ea-drawer_drawer-wrap {
-        bottom: -100%;
-      }
-    }
-  }
-
-  &.direction-btt {
-    top: -100%;
-
-    .ea-drawer_drawer-wrap {
-      top: -100%;
-    }
-
-    .ea-drawer_mask-wrap {
-      top: 0;
-    }
-
-    &.is-open {
-      top: 0;
-
-      .ea-drawer_drawer-wrap {
-        top: 0;
-      }
-    }
-
-    &.will-close {
-      .ea-drawer_drawer-wrap {
-        top: -100%;
-      }
-    }
-  }
-}

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

@@ -1,141 +0,0 @@
-export
-    const stylesheet = `
-.ea-drawer_wrap {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  z-index: 2001;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  margin-bottom: 32px;
-  padding: 20px 20px 0;
-  color: #72767b;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap .ea-drawer_icon {
-  cursor: pointer;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_main-wrap {
-  flex: 1;
-  box-sizing: border-box;
-  padding: 20px;
-  overflow: auto;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_mask-wrap {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: -1;
-  opacity: 0;
-  scale: 0;
-  transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
-}
-.ea-drawer_wrap.direction-ltr, .ea-drawer_wrap.direction-rtl {
-  top: 0;
-}
-.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {
-  top: 0;
-  height: 100%;
-}
-.ea-drawer_wrap.direction-ttb, .ea-drawer_wrap.direction-btt {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {
-  left: 0;
-  width: 100%;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.is-open .ea-drawer_mask-wrap {
-  opacity: 1;
-  scale: 1;
-}
-.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.will-close .ea-drawer_mask-wrap {
-  opacity: 0;
-  scale: 0;
-}
-.ea-drawer_wrap.direction-ltr {
-  left: -100%;
-}
-.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap {
-  left: -100%;
-}
-.ea-drawer_wrap.direction-ltr .ea-drawer_mask-wrap {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.is-open {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_drawer-wrap {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_drawer-wrap {
-  left: -100%;
-}
-.ea-drawer_wrap.direction-rtl {
-  right: -100%;
-}
-.ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {
-  right: -100%;
-}
-.ea-drawer_wrap.direction-rtl .ea-drawer_mask-wrap {
-  right: 0;
-}
-.ea-drawer_wrap.direction-rtl.is-open {
-  right: 0;
-}
-.ea-drawer_wrap.direction-rtl.is-open .ea-drawer_drawer-wrap {
-  right: 0;
-}
-.ea-drawer_wrap.direction-rtl.will-close .ea-drawer_drawer-wrap {
-  right: -100%;
-}
-.ea-drawer_wrap.direction-ttb {
-  bottom: -100%;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap {
-  bottom: -100%;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap {
-  bottom: 0;
-}
-.ea-drawer_wrap.direction-ttb.is-open {
-  bottom: 0;
-}
-.ea-drawer_wrap.direction-ttb.is-open .ea-drawer_drawer-wrap {
-  bottom: 0;
-}
-.ea-drawer_wrap.direction-ttb.will-close .ea-drawer_drawer-wrap {
-  bottom: -100%;
-}
-.ea-drawer_wrap.direction-btt {
-  top: -100%;
-}
-.ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {
-  top: -100%;
-}
-.ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {
-  top: 0;
-}
-.ea-drawer_wrap.direction-btt.is-open {
-  top: 0;
-}
-.ea-drawer_wrap.direction-btt.is-open .ea-drawer_drawer-wrap {
-  top: 0;
-}
-.ea-drawer_wrap.direction-btt.will-close .ea-drawer_drawer-wrap {
-  top: -100%;
-}
-`;

package/components/ea-empty/index.css

@@ -1,30 +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-empty_wrap {
-  padding: 40px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.ea-empty_wrap .ea-empty_image {
-  width: 8rem;
-  object-fit: cover;
-}
-.ea-empty_wrap .ea-empty_image svg,
-.ea-empty_wrap .ea-empty_image img {
-  width: 100%;
-  height: 100%;
-}
-.ea-empty_wrap .ea-empty_description {
-  margin-top: 20px;
-}
-.ea-empty_wrap .ea-empty_bottom {
-  margin-top: 20px;
-}

package/components/ea-empty/index.js

@@ -1,93 +0,0 @@
-import Base from '../Base.js';
-
-import { emptyStatusSVG } from './src/assets/emptyStatusSVG.js';
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaEmpty extends Base {
-    #imageWrap;
-    #descriptionWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-empty_wrap" part="container">
-                <div class="ea-empty_image" part="image-wrap">
-                    ${emptyStatusSVG}
-                </div>
-                <div class="ea-empty_description" part="description-wrap">
-                    暂无数据
-                </div>
-                <div class="ea-empty_bottom" part="bottom-wrap">
-                    <slot></slot>
-                </div>
-            </div>
-        `;
-
-        this.#imageWrap = shadowRoot.querySelector('.ea-empty_image');
-        this.#descriptionWrap = shadowRoot.querySelector('.ea-empty_description');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- description 描述文字 -------
-    // #region
-    get description() {
-        return this.getAttribute('description') || "暂无数据";
-    }
-
-    set description(value) {
-        this.setAttribute('description', value);
-        this.#descriptionWrap.innerHTML = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- image 自定义图片 -------
-    // #region
-    get image() {
-        return this.getAttribute('image') || "";
-    }
-
-    set image(value) {
-        if (!value) return;
-
-        this.setAttribute('image', value);
-
-        const image = new Image();
-        image.src = value;
-        image.onload = () => {
-            this.#imageWrap.innerHTML = `<img src="${value}" />`;
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- image-size 自定义图片大小 -------
-    // #region
-    get imageSize() {
-        return this.getAttribute('image-size') || "128";
-    }
-
-    set imageSize(value) {
-        if (!value) return;
-
-        this.setAttribute('image-size', value);
-        this.#imageWrap.style.width = value + "px";
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.description = this.description;
-
-        this.image = this.image;
-
-        this.imageSize = this.imageSize;
-    }
-}
-
-if (!customElements.get('ea-empty')) {
-    customElements.define('ea-empty', EaEmpty);
-}