ui/src/drawer/index.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/03/27 10:39:29
 */

import { css, html, Component, nextTick, classMap } from '@bd/core'

const DIRECTION = {
  left: 'l2r-in',
  right: 'r2l-in',
  top: 't2b-in',
  bottom: 'b2t-in'
}

class Drawer extends Component {
  static animation = {}
  static props = {
    title: '',
    from: 'right',
    // visible: false,
    visible: {
      type: Boolean,
      default: false,
      observer(v) {
        if (v) {
          this.anim.start()
          // this.setAttribute('fade-in', '')
          // setTimeout(() => {
          //   // this.removeAttribute('fade-in')
          // }, 300)
        } else {
          this.anim.end()
          // this.style.display = 'block'
          // this.setAttribute('fade-out', '')
          // setTimeout(() => {
          //   this.removeAttribute('fade-out')
          // }, 300)
        }
      }
    },
    'mask-close': true
  }

  static styles = [
    css`
      :host {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
      }

      .drawer {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 50%;
        height: 100%;
        font-size: 14px;
        background: #fff;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);

        &.l2r-in {
          animation: l2r-in 0.3s ease-in-out forwards;
        }
        &.r2l-in {
          animation: r2l-in 0.3s ease-in-out forwards;

          &.out {
            animation-direction: reverse;
          }
        }
        &.t2b-in {
          animation: t2b-in 0.3s ease-in-out forwards;
        }
        &.b2t-in {
          animation: b2t-in 0.3s ease-in-out forwards;
        }
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        font-size: 16px;
        color: var(--color-dark-2);
        user-select: none;

        wc-icon {
          --size: 16px;
          margin-right: 8px;
          color: var(--color-grey-3);
          cursor: pointer;
        }
      }

      .wrapper {
        flex: 1;
        padding: 16px;
      }
    `,
    css`
      :host([from='left']),
      :host([from='right']) {
        .drawer {
          width: 50%;
          height: 100%;
        }
      }
      :host([from='top']),
      :host([from='bottom']) {
        .drawer {
          width: 100%;
          height: 50%;
        }
      }
      :host([from='left']) .drawer {
        left: 0;
        top: 0;
        transform: translateX(-100%);
      }
      :host([from='top']) .drawer {
        left: 0;
        top: 0;
        transform: translateY(-100%);
      }
      :host([from='right']) .drawer {
        right: 0;
        top: 0;
        transform: translateX(100%);
      }
      :host([from='bottom']) .drawer {
        left: 0;
        bottom: 0;
        transform: translateY(100%);
      }
    `,
    css`
      @keyframes r2l-in {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0);
        }
      }
      @keyframes l2r-in {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }
      @keyframes b2t-in {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
      @keyframes t2b-in {
        from {
          transform: translateY(-100%);
        }
        to {
          transform: translateY(0);
        }
      }
    `
  ]

  closeDrawer() {
    this.$emit('close')
  }

  mounted() {
    console.log('mounted title: ', this['mask-close'])
    this.$on('click', ev => {
      console.log(ev.target, ev.currentTarget, ev.target === ev.currentTarget)
    })
  }

  render() {
    let classes = classMap({
      drawer: true
      // [DIRECTION[this.from]]: this.visible,
      // out: !this.visible
    })

    return html`
      <div class=${classes}>
        <header class="header">
          <span class="title"><slot name="title">${this.title}</slot></span>
          <wc-icon name="close" @click=${this.closeDrawer}></wc-icon>
        </header>
        <main class="wrapper">
          <slot></slot>
        </main>
      </div>
    `
  }
}

Drawer.reg('drawer')