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