update

src/base/drawer.wc

@@ -0,0 +1,235 @@
+<template>
+  <div class="drawer">
+    <header class="header">
+      <span class="title"><slot name="title"/></span>
+      <wc-icon is="close"></wc-icon>
+    </header>
+    <main class="wrapper"><slot /></main>
+  </div>
+</template>
+
+<style lang="scss">
+:host {
+  display: none;
+  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);
+  transition: transform 0.3s ease-in-out;
+
+  &.l2r-in {
+    transform: translateX(0) !important;
+  }
+  &.r2l-in {
+    transform: translateX(0) !important;
+  }
+  &.t2b-in {
+    transform: translateX(0) !important;
+  }
+  &.b2t-in {
+    transform: translateX(0) !important;
+  }
+}
+
+: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%);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  font-size: 16px;
+  color: var(--color-dark-2);
+
+  wc-icon {
+    --size: 16px;
+    margin-right: 8px;
+    color: var(--color-grey-3);
+    cursor: pointer;
+  }
+}
+
+.wrapper {
+  flex: 1;
+  padding: 16px;
+}
+
+/* @keyframes r2l-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes r2l-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes l2r-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes l2r-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes b2t-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes b2t-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes t2b-in {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes t2b-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+} */
+</style>
+
+<script>
+import $ from '../utils'
+import '../icon/index'
+
+const DIRECTION = {
+  left: 'l2r-in',
+  right: 'r2l-in',
+  top: 't2b-in',
+  bottom: 'b2t-in'
+}
+
+export default class Drawer {
+  props = {
+    title: '',
+    from: 'left',
+    padding: 16,
+    visible: false
+  }
+
+  __init__() {
+    /* render */
+
+    var elem = this.root.children[1]
+    this.__DRAWER__ = elem
+    this.__HEADER__ = elem.children[0]
+    this.__WRAPPER__ = elem.children[1]
+    this.__TITLE__ = this.__HEADER__.firstElementChild
+    this.__CLOSE__ = this.__HEADER__.lastElementChild
+  }
+
+  set visible(val) {
+    this.props.visible = !!val
+
+    if (this.props.visible) {
+      this.style.cssText = 'display:block'
+
+      setTimeout(_ => {
+        this.__DRAWER__.classList.toggle(DIRECTION[this.props.from], true)
+      }, 10)
+    } else {
+      this.__DRAWER__.classList.toggle(DIRECTION[this.props.from], false)
+      setTimeout(_ => {
+        this.style.cssText = ''
+      }, 300)
+    }
+  }
+
+  mounted() {
+    this._closeFn = $.bind(this.__CLOSE__, 'click', _ => {
+      this.visible = false
+    })
+  }
+
+  watch() {
+    switch (name) {
+      case 'title':
+        this.__TITLE__.textContent = val
+        break
+
+      case 'from':
+        this.props.from = val
+        break
+    }
+  }
+}
+</script>

src/base/index.js

@@ -1,3 +1,4 @@
 import './row'
 import './card'
 import './collapse'
+import './drawer'