easy-component-ui 2.0.5 → 2.1.1

package/components/ea-drawer/index.css

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

@@ -1 +1,251 @@
-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{#e;#t;#r;#s;#i;#a;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <div class="ea-drawer_wrap" part="container">\n        <div class="ea-drawer_drawer-wrap" part="drawer-wrap">\n          <div class="ea-drawer_header-wrap" part="header-wrap">\n            <span class="ea-drawer_title" part="title-wrap">\n              <slot name="title"></slot>\n            </span>\n            <ea-icon class="ea-drawer_icon" icon="icon-cancel" part="icon"></ea-icon>\n          </div>\n          <div class="ea-drawer_main-wrap" part="main-wrap">\n            <slot></slot>\n          </div>\n          <div class="ea-drawer_mask-wrap" part="mask-wrap"></div>\n        </div>\n      </div>\n    ',this.#e=e.querySelector(".ea-drawer_wrap"),this.#t=e.querySelector(".ea-drawer_drawer-wrap"),this.#r=e.querySelector(".ea-drawer_mask-wrap"),this.#s=e.querySelector(".ea-drawer_header-wrap"),this.#i=e.querySelector(".ea-drawer_title"),this.#a=e.querySelector(".ea-drawer_icon"),this.build(e,stylesheet)}get directionType(){return["ltr","rtl","ttb","btt"]}get direction(){const e=this.getAttribute("direction");return this.directionType.includes(e)?e:"ltr"}set direction(e){this.setAttribute("direction",e),this.#e.classList.toggle("direction-ltr","ltr"===e),this.#e.classList.toggle("direction-rtl","rtl"===e),this.#e.classList.toggle("direction-ttb","ttb"===e),this.#e.classList.toggle("direction-btt","btt"===e),this.#l(this.size)}get open(){return this.getAttrBoolean("open")||!1}set open(e){this.toggleAttr("open",e),timeout((()=>{this.#e.classList.toggle("is-open",e)}),20)}get size(){return this.getAttribute("size")||"30%"}set size(e){this.setAttribute("size",e),this.#l(e)}get withHeader(){return handleDefaultAttrIsTrue(this.getAttribute("with-header"))}set withHeader(e){this.toggleAttr("with-header",e),this.#s.style.display=e?"flex":"none"}get title(){return this.getAttribute("title")}set title(e){this.setAttribute("title",e),e&&(this.#i.innerText=e)}get showClose(){return handleDefaultAttrIsTrue(this.getAttribute("show-close"))}set showClose(e){this.toggleAttr("show-close",e),this.#a.style.display=e?"block":"none"}get modal(){return handleDefaultAttrIsTrue(this.getAttribute("modal"))}set modal(e){this.toggleAttr("modal",e),this.#r.style.display=e?"block":"none"}get wrapperClosable(){return handleDefaultAttrIsTrue(this.getAttribute("wrapper-closable"))}set wrapperClosable(e){this.setAttribute("wrapper-closable",e)}#l(e){const t="ltr"===this.direction||"rtl"===this.direction?"width":"height";this.#t.style.height="inherit",this.#t.style.width="inherit",this.#t.style[t]=e}#o(){const e=()=>{this.open=!1,this.#e.classList.remove("will-close"),this.#t.removeEventListener("transitionend",e)},t=()=>{this.#e.classList.add("will-close"),this.#t.addEventListener("transitionend",e),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))};this.wrapperClosable&&this.modal&&this.#r.addEventListener("click",(()=>{t()})),this.showClose&&this.#a.addEventListener("click",(()=>{t()}))}connectedCallback(){this.direction=this.direction,this.size=this.size,this.withHeader=this.withHeader,this.withHeader&&(this.showClose=this.showClose,this.title=this.title),this.modal=this.modal,this.wrapperClosable=this.wrapperClosable,this.open=!1,this.#o()}}customElements.get("ea-drawer")||customElements.define("ea-drawer",EaDrawer);
+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

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