From 7f90d6fcd54d206439d3c38005bf9b9384fe6b58 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 21 Nov 2023 13:11:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8A=BD=E5=B1=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/drawer/index.js | 32 +++++++++-----------------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/drawer/index.js b/src/drawer/index.js
index d6a0a28..d07a230 100644
--- a/src/drawer/index.js
+++ b/src/drawer/index.js
@@ -40,7 +40,7 @@ class Drawer extends Component {
   static props = {
     title: 'str!',
     from: 'right',
-    visible: {
+    value: {
       type: Boolean,
       default: false,
       observer(v) {
@@ -48,8 +48,6 @@ class Drawer extends Component {
         this.$refs.drawer.$animate(!v)
       }
     },
-    width: 'str!',
-    height: 'str!',
     maskClose: false
   }
 
@@ -69,7 +67,7 @@ class Drawer extends Component {
         display: flex;
         flex-direction: column;
         position: absolute;
-        width: 50%;
+        width: var(--wc-drawer-width, 50%);
         height: 100%;
         font-size: 14px;
         background: #fff;
@@ -103,7 +101,7 @@ class Drawer extends Component {
       :host([from='right']) {
         .drawer {
           top: 0;
-          width: 50%;
+          width: var(--wc-drawer-width, 50%);
           height: 100%;
         }
       }
@@ -112,7 +110,7 @@ class Drawer extends Component {
         .drawer {
           left: 0;
           width: 100%;
-          height: 50%;
+          height: var(--wc-drawer-width, 50%);
         }
       }
       :host([from='left']) .drawer {
@@ -130,8 +128,8 @@ class Drawer extends Component {
     `
   ]
 
-  closeDrawer() {
-    this.visible = false
+  #close() {
+    this.value = false
     this.$emit('input', { value: false })
     this.$emit('close', { value: false })
   }
@@ -141,29 +139,17 @@ class Drawer extends Component {
       let path = ev.composedPath()
 
       if (path[0] === ev.currentTarget && this.maskClose) {
-        this.closeDrawer()
+        this.#close()
       }
     })
   }
 
   render() {
-    let style = {}
-    if ((this.from === 'left' || this.from === 'right') && this.width) {
-      style = { width: this.width }
-    } else if ((this.from === 'top' || this.from === 'bottom') && this.height) {
-      style = { height: this.height }
-    }
-
     return html`
-      <div
-        class="drawer"
-        style=${styleMap(style)}
-        ref="drawer"
-        #animation=${ANIMATION[this.from]}
-      >
+      <div class="drawer" ref="drawer" #animation=${ANIMATION[this.from]}>
         <header class="header">
           <span class="title"><slot name="title">${this.title}</slot></span>
-          <wc-icon name="close" @click=${this.closeDrawer}></wc-icon>
+          <wc-icon name="close" @click=${this.#close}></wc-icon>
         </header>
         <main class="wrapper"><slot></slot></main>
       </div>