From f116d3a99831ef890f5ac6ba3b285f2b0880b557 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 28 Mar 2023 19:40:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json        |  2 +-
 src/drawer/index.js | 62 +++++++++++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index df00c48..618f3e3 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@bd/wcui",
+  "name": "@bd/ui",
   "version": "1.0.0",
   "description": "",
   "files": [
diff --git a/src/drawer/index.js b/src/drawer/index.js
index fe90fd8..811aecd 100644
--- a/src/drawer/index.js
+++ b/src/drawer/index.js
@@ -4,18 +4,7 @@
  * @date 2023/03/27 10:39:29
  */
 
-import {
-  css,
-  html,
-  bind,
-  unbind,
-  Component,
-  outsideClick,
-  clearOutsideClick,
-  nextTick,
-  classMap,
-  styleMap
-} from '@bd/core'
+import { css, html, Component, nextTick, classMap } from '@bd/core'
 
 const DIRECTION = {
   left: 'l2r-in',
@@ -25,16 +14,37 @@ const DIRECTION = {
 }
 
 class Drawer extends Component {
+  static animation = {}
   static props = {
-    title: { type: String, default: '', attribute: false },
+    title: '',
     from: 'right',
-    visible: false
+    // 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 {
-        display: none;
         position: fixed;
         left: 0;
         top: 0;
@@ -42,9 +52,8 @@ class Drawer extends Component {
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.3);
-        transition: opacity 0.3s linear;
-        opacity: 0;
       }
+
       .drawer {
         display: flex;
         flex-direction: column;
@@ -60,6 +69,10 @@ class Drawer extends Component {
         }
         &.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;
@@ -90,11 +103,6 @@ class Drawer extends Component {
         flex: 1;
         padding: 16px;
       }
-
-      :host([visible]) {
-        display: block;
-        opacity: 1;
-      }
     `,
     css`
       :host([from='left']),
@@ -173,13 +181,17 @@ class Drawer extends Component {
   }
 
   mounted() {
-    console.log('mounted title: ', this.title)
+    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
+      drawer: true
+      // [DIRECTION[this.from]]: this.visible,
+      // out: !this.visible
     })
 
     return html`