From 9f2661444f67a49b8915187a318896d8cb76b04a Mon Sep 17 00:00:00 2001
From: Lyan-u <liyan_mr@163.com>
Date: Mon, 29 Apr 2024 12:56:10 +0000
Subject: [PATCH 1/3] refactor(drawer): sfc to tsx

---
 src/drawer/__test__/index.test.jsx |  2 +-
 src/drawer/drawer.tsx              | 98 +++++++++++++++++++++++++++++
 src/drawer/drawer.vue              | 99 ------------------------------
 src/drawer/index.ts                |  2 +-
 src/drawer/plugin.ts               |  2 +-
 5 files changed, 101 insertions(+), 102 deletions(-)
 create mode 100644 src/drawer/drawer.tsx
 delete mode 100644 src/drawer/drawer.vue

diff --git a/src/drawer/__test__/index.test.jsx b/src/drawer/__test__/index.test.jsx
index 4ea6f006e..8a7857ad1 100644
--- a/src/drawer/__test__/index.test.jsx
+++ b/src/drawer/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import drawer from '../drawer.vue';
+import drawer from '../drawer';
 import { ref, h } from 'vue';
 import { AppIcon } from 'tdesign-icons-vue-next';
 
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
new file mode 100644
index 000000000..24a8d377b
--- /dev/null
+++ b/src/drawer/drawer.tsx
@@ -0,0 +1,98 @@
+import { ref, watch, toRefs, computed, defineComponent, getCurrentInstance, h } from 'vue';
+import TPopup from '../popup';
+import config from '../config';
+import { renderTNode, TNode } from '../shared';
+import DrawerProps from './props';
+import { DrawerItem } from './type';
+import { useContent, useTNodeJSX } from '@/hooks/tnode';
+import { usePrefixClass } from '@/hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-drawer`;
+
+export default defineComponent({
+  name,
+  components: { TPopup, TNode },
+  props: DrawerProps,
+  emits: ['update:visible', 'itemClick', 'overlayClick'],
+  setup(props, context) {
+    const renderTNodeJSX = useTNodeJSX();
+    const currentInstance = getCurrentInstance();
+    const drawerClass = usePrefixClass('drawer');
+    const { attach, visible, placement, showOverlay } = toRefs(props);
+    const open = ref(visible.value || false);
+
+    watch(open, () => {
+      context.emit('update:visible', open.value);
+    });
+
+    watch(visible, () => {
+      open.value = visible.value;
+    });
+
+    const onItemClick = (index: number, item: DrawerItem, context: { e: MouseEvent }) => {
+      props.onItemClick?.(index, item, context);
+    };
+
+    const onVisibleChange = (visible: boolean) => {
+      if (showOverlay.value) {
+        props.onOverlayClick?.({ visible });
+      }
+    };
+
+    const onClose = () => {
+      props.onClose?.('overlay');
+    };
+
+    return () => {
+      const { attach, zIndex, closeOnOverlayClick, destroyOnClose, items } = props;
+      const renderTitleNode = () => {
+        const titleNode = renderTNodeJSX('title');
+        if (!titleNode) {
+          return null;
+        }
+        return <div class={`${drawerClass.value}__title`}>{titleNode}</div>;
+      };
+      const renderFooterNode = () => {
+        const footerNode = renderTNodeJSX('footer');
+        if (!footerNode) {
+          return null;
+        }
+        return <div class={`${drawerClass.value}__footer`}>{footerNode}</div>;
+      };
+      return (
+        <t-popup
+          v-model={open.value}
+          placement={placement.value}
+          attach={attach}
+          showOverlay={showOverlay.value}
+          zIndex={zIndex}
+          closeOnOverlayClick={closeOnOverlayClick}
+          destroyOnClose={destroyOnClose}
+          onVisibleChange={onVisibleChange}
+          onClose={onClose}
+        >
+          <div class={`${drawerClass.value}`}>
+            {renderTitleNode()}
+            {renderTNodeJSX('default')}
+
+            <div class={`${drawerClass.value}__sidebar`}>
+              {(items || []).map((item, index) => (
+                <div
+                  key={item.title}
+                  class={`${drawerClass.value}__sidebar-item`}
+                  onClick={(e) => onItemClick(index, item, { e })}
+                >
+                  {item.icon && <span class={`${drawerClass.value}__sidebar-item-icon`}>{item.icon(h)}</span>}
+                  <div class={`${drawerClass.value}__sidebar-item-title`}>{item.title}</div>
+                </div>
+              ))}
+            </div>
+
+            {renderFooterNode()}
+          </div>
+        </t-popup>
+      );
+    };
+  },
+});
diff --git a/src/drawer/drawer.vue b/src/drawer/drawer.vue
deleted file mode 100644
index 6d773f0f0..000000000
--- a/src/drawer/drawer.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <t-popup
-    v-model="open"
-    :placement="placement"
-    :attach="attach"
-    :show-overlay="showOverlay"
-    :z-index="zIndex"
-    :close-on-overlay-click="closeOnOverlayClick"
-    :destroy-on-close="destroyOnClose"
-    @visible-change="onVisibleChange"
-    @close="onClose"
-  >
-    <div :class="`${name}`">
-      <div v-if="titleNode" :class="`${name}__title`">
-        <t-node :content="titleNode" />
-      </div>
-      <slot />
-
-      <div :class="`${name}__sidebar`">
-        <div
-          v-for="(item, index) in items"
-          :key="item.title"
-          :class="`${name}__sidebar-item`"
-          @click="onItemClick(index, item, { e: $event })"
-        >
-          <span v-if="!!item.icon" :class="`${name}__sidebar-item-icon`">
-            <component :is="item.icon" />
-          </span>
-          <div :class="`${name}__sidebar-item-title`">{{ item.title }}</div>
-        </div>
-      </div>
-
-      <div :class="`${name}__footer`">
-        <t-node :content="footerNode" />
-      </div>
-    </div>
-  </t-popup>
-</template>
-
-<script lang="ts">
-import { ref, watch, toRefs, computed, defineComponent, getCurrentInstance } from 'vue';
-import TPopup from '../popup';
-import config from '../config';
-import { renderTNode, TNode } from '../shared';
-import DrawerProps from './props';
-import { DrawerItem } from './type';
-
-const { prefix } = config;
-const name = `${prefix}-drawer`;
-
-export default defineComponent({
-  name,
-  components: { TPopup, TNode },
-  props: DrawerProps,
-  emits: ['update:visible', 'itemClick', 'overlayClick'],
-  setup(props, context) {
-    const currentInstance = getCurrentInstance();
-    const { visible, placement, showOverlay } = toRefs(props);
-    const open = ref(visible.value || false);
-
-    const titleNode = computed(() => renderTNode(currentInstance, 'title'));
-    const footerNode = computed(() => renderTNode(currentInstance, 'footer'));
-
-    watch(open, () => {
-      context.emit('update:visible', open.value);
-    });
-
-    watch(visible, () => {
-      open.value = visible.value;
-    });
-
-    const onItemClick = (index: number, item: DrawerItem, context: { e: MouseEvent }) => {
-      props.onItemClick?.(index, item, context);
-    };
-
-    const onVisibleChange = (visible: boolean) => {
-      if (showOverlay.value) {
-        props.onOverlayClick?.({ visible });
-      }
-    };
-
-    const onClose = () => {
-      props.onClose?.('overlay');
-    };
-
-    return {
-      name,
-      placement,
-      showOverlay,
-      open,
-      titleNode,
-      footerNode,
-      onItemClick,
-      onVisibleChange,
-      onClose,
-    };
-  },
-});
-</script>
diff --git a/src/drawer/index.ts b/src/drawer/index.ts
index 6993407e5..e45567a1f 100644
--- a/src/drawer/index.ts
+++ b/src/drawer/index.ts
@@ -1,4 +1,4 @@
-import _Drawer from './drawer.vue';
+import _Drawer from './drawer';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/drawer/plugin.ts b/src/drawer/plugin.ts
index d1aec43b1..fde3efc9b 100644
--- a/src/drawer/plugin.ts
+++ b/src/drawer/plugin.ts
@@ -1,5 +1,5 @@
 import { createApp, App, h, ref, nextTick } from 'vue';
-import vueDrawer from './drawer.vue';
+import vueDrawer from './drawer';
 import { WithInstallType, isBrowser } from '../shared';
 import { TdDrawerProps } from './type';
 

From f08c9a31ce2300d0e180823a1eb63ee108e76059 Mon Sep 17 00:00:00 2001
From: Lyan-u <liyan_mr@163.com>
Date: Tue, 30 Apr 2024 02:00:52 +0000
Subject: [PATCH 2/3] chore(drawer): update test snapshots

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 144 +++++++-----------
 1 file changed, 56 insertions(+), 88 deletions(-)

diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index e3decdf38..f96eec14e 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -24,9 +24,8 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
       <div
         class="t-drawer"
       >
-        <!--v-if-->
-        
-        
+        <!---->
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -34,7 +33,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -44,7 +43,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -54,7 +53,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -64,7 +63,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -74,7 +73,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -84,7 +83,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -93,11 +92,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           </div>
           
         </div>
-        <div
-          class="t-drawer__footer"
-        >
-          <!---->
-        </div>
+        <!---->
       </div>
       
     </div>
@@ -146,9 +141,8 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
       <div
         class="t-drawer"
       >
-        <!--v-if-->
-        
-        
+        <!---->
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -156,7 +150,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -166,7 +160,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -176,7 +170,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -186,7 +180,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -196,7 +190,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -206,7 +200,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -290,9 +284,8 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
       <div
         class="t-drawer"
       >
-        <!--v-if-->
-        
-        
+        <!---->
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -449,11 +442,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
           </div>
           
         </div>
-        <div
-          class="t-drawer__footer"
-        >
-          <!---->
-        </div>
+        <!---->
       </div>
       
     </div>
@@ -538,9 +527,8 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
           <div
             class="t-drawer"
           >
-            <!--v-if-->
-            
-            
+            <!---->
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -548,7 +536,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -558,7 +546,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -568,7 +556,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -578,7 +566,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -588,7 +576,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -598,7 +586,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -607,11 +595,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <div
-              class="t-drawer__footer"
-            >
-              <!---->
-            </div>
+            <!---->
           </div>
           
         </div>
@@ -675,9 +659,8 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
           <div
             class="t-drawer"
           >
-            <!--v-if-->
-            
-            
+            <!---->
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -834,11 +817,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <div
-              class="t-drawer__footer"
-            >
-              <!---->
-            </div>
+            <!---->
           </div>
           
         </div>
@@ -911,8 +890,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
             >
               标题
             </div>
-            
-            
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -920,7 +898,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -930,7 +908,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -940,7 +918,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -950,7 +928,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -960,7 +938,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -970,7 +948,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -979,11 +957,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <div
-              class="t-drawer__footer"
-            >
-              <!---->
-            </div>
+            <!---->
           </div>
           
         </div>
@@ -1046,9 +1020,8 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
           <div
             class="t-drawer"
           >
-            <!--v-if-->
-            
-            
+            <!---->
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -1056,7 +1029,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1066,7 +1039,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1076,7 +1049,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1086,7 +1059,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1096,7 +1069,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1106,7 +1079,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1258,8 +1231,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
         >
           标题
         </div>
-        
-        
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -1267,7 +1239,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1277,7 +1249,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1287,7 +1259,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1297,7 +1269,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1307,7 +1279,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1317,7 +1289,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1326,11 +1298,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           </div>
           
         </div>
-        <div
-          class="t-drawer__footer"
-        >
-          <!---->
-        </div>
+        <!---->
       </div>
       
     </div>

From 769a724dccc5ffa069dcd805bc179cd02f651a34 Mon Sep 17 00:00:00 2001
From: Lyan-u <liyan_mr@163.com>
Date: Tue, 30 Apr 2024 08:13:51 +0000
Subject: [PATCH 3/3] refactor(drawer): remove unused variables

---
 src/drawer/drawer.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
index 24a8d377b..ef88b9d9b 100644
--- a/src/drawer/drawer.tsx
+++ b/src/drawer/drawer.tsx
@@ -1,10 +1,9 @@
-import { ref, watch, toRefs, computed, defineComponent, getCurrentInstance, h } from 'vue';
+import { ref, watch, toRefs, defineComponent, h } from 'vue';
 import TPopup from '../popup';
 import config from '../config';
-import { renderTNode, TNode } from '../shared';
-import DrawerProps from './props';
+import props from './props';
 import { DrawerItem } from './type';
-import { useContent, useTNodeJSX } from '@/hooks/tnode';
+import { useTNodeJSX } from '@/hooks/tnode';
 import { usePrefixClass } from '@/hooks/useClass';
 
 const { prefix } = config;
@@ -12,14 +11,13 @@ const name = `${prefix}-drawer`;
 
 export default defineComponent({
   name,
-  components: { TPopup, TNode },
-  props: DrawerProps,
+  components: { TPopup },
+  props,
   emits: ['update:visible', 'itemClick', 'overlayClick'],
   setup(props, context) {
     const renderTNodeJSX = useTNodeJSX();
-    const currentInstance = getCurrentInstance();
     const drawerClass = usePrefixClass('drawer');
-    const { attach, visible, placement, showOverlay } = toRefs(props);
+    const { visible, showOverlay } = toRefs(props);
     const open = ref(visible.value || false);
 
     watch(open, () => {
@@ -45,7 +43,7 @@ export default defineComponent({
     };
 
     return () => {
-      const { attach, zIndex, closeOnOverlayClick, destroyOnClose, items } = props;
+      const { attach, zIndex, closeOnOverlayClick, destroyOnClose, items, placement, showOverlay } = props;
       const renderTitleNode = () => {
         const titleNode = renderTNodeJSX('title');
         if (!titleNode) {
@@ -63,9 +61,9 @@ export default defineComponent({
       return (
         <t-popup
           v-model={open.value}
-          placement={placement.value}
+          placement={placement}
           attach={attach}
-          showOverlay={showOverlay.value}
+          showOverlay={showOverlay}
           zIndex={zIndex}
           closeOnOverlayClick={closeOnOverlayClick}
           destroyOnClose={destroyOnClose}