refactor(drawer): sfc to tsx

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';
 

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>
+      );
+    };
+  },
+});

src/drawer/index.ts

@@ -1,4 +1,4 @@
-import _Drawer from './drawer.vue';
+import _Drawer from './drawer';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';

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';