refactor(components): [drawer] use type-based definitions (#23484)

* put Ts

* refactor(components): [drawer] use type-based definitions

* refactor: update

* fix: type error

* fix: type error

* refactor: tweaks

---------

Co-authored-by: rzzf <cszhjh@gmail.com>
Co-authored-by: keeplearning66 <1256734885@qq.com>

packages/components/dialog/src/dialog.ts

@@ -1,7 +1,10 @@
 import { buildProps, definePropType, isBoolean } from '@element-plus/utils'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { teleportProps } from '@element-plus/components/teleport'
-import { dialogContentProps } from './dialog-content'
+import {
+  dialogContentProps,
+  dialogContentPropsDefaults,
+} from './dialog-content'
 
 import type { ExtractPublicPropTypes, InjectionKey, TransitionProps } from 'vue'
 import type { DialogContentProps } from './dialog-content'
@@ -247,3 +250,16 @@ export interface DialogConfigContext {
 
 export const dialogContextKey: InjectionKey<DialogConfigContext> =
   Symbol('dialogContextKey')
+
+export const dialogPropsDefaults = {
+  ...dialogContentPropsDefaults,
+  appendTo: 'body',
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  lockScroll: true,
+  modal: true,
+  openDelay: 0,
+  closeDelay: 0,
+  headerAriaLevel: '2',
+  transition: undefined,
+} as const

packages/components/dialog/src/dialog.vue

@@ -87,9 +87,8 @@ import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElTeleport from '@element-plus/components/teleport'
 import ElDialogContent from './dialog-content.vue'
 import { dialogInjectionKey } from './constants'
-import { dialogEmits } from './dialog'
+import { dialogEmits, dialogPropsDefaults } from './dialog'
 import { useDialog } from './use-dialog'
-import { dialogContentPropsDefaults } from './dialog-content'
 
 import type { DialogProps } from './dialog'
 
@@ -98,18 +97,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<DialogProps>(), {
-  ...dialogContentPropsDefaults,
-  appendTo: 'body',
-  closeOnClickModal: true,
-  closeOnPressEscape: true,
-  lockScroll: true,
-  modal: true,
-  openDelay: 0,
-  closeDelay: 0,
-  headerAriaLevel: '2',
-  transition: undefined,
-})
+const props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)
 defineEmits(dialogEmits)
 const slots = useSlots()
 

packages/components/drawer/src/composables/useResizable.ts

@@ -6,7 +6,7 @@ import type { Ref, SetupContext } from 'vue'
 import type { DrawerEmits, DrawerProps } from '../drawer'
 
 export function useResizable(
-  props: DrawerProps,
+  props: DrawerProps & Required<Pick<DrawerProps, 'direction'>>,
   target: Ref<HTMLElement | undefined>,
   emit: SetupContext<DrawerEmits>['emit']
 ) {

packages/components/drawer/src/drawer.ts

@@ -1,8 +1,39 @@
 import { buildProps } from '@element-plus/utils'
 import { dialogEmits, dialogProps } from '@element-plus/components/dialog'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
+import type { DialogProps } from '@element-plus/components/dialog'
 
+export interface DrawerProps extends DialogProps {
+  /**
+   * @description Set the direction in which the Drawer opens
+   */
+  direction?: 'ltr' | 'rtl' | 'ttb' | 'btt'
+  /**
+   * @description Whether to enable the resizable function for the drawer
+   */
+  resizable?: boolean
+  /**
+   * @description The size of the Drawer form, when using the number type, is measured in pixels. When using the string type, please pass in 'x%'; otherwise, it will be interpreted as the number type
+   */
+  size?: string | number
+  /**
+   * @description You can remove the title from the drawer, so that your drawer will have more space on the screen. If you want to be visited, you must set the title attribute.
+   */
+  withHeader?: boolean
+  /**
+   * @description The fade-in and fade-out animation switch of the mask layer
+   */
+  modalFade?: boolean
+  /**
+   * @description Help assistive technologies such as screen readers identify content hierarchies
+   */
+  headerAriaLevel?: string
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `DrawerProps` instead.
+ */
 export const drawerProps = buildProps({
   ...dialogProps,
   direction: {
@@ -29,7 +60,9 @@ export const drawerProps = buildProps({
   },
 } as const)
 
-export type DrawerProps = ExtractPropTypes<typeof drawerProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `DrawerProps` instead.
+ */
 export type DrawerPropsPublic = ExtractPublicPropTypes<typeof drawerProps>
 
 export const drawerEmits = {

packages/components/drawer/src/drawer.vue

@@ -111,18 +111,27 @@ import { Close } from '@element-plus/icons-vue'
 import { ElOverlay } from '@element-plus/components/overlay'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElTeleport from '@element-plus/components/teleport'
-import { useDialog } from '@element-plus/components/dialog'
+import { dialogPropsDefaults, useDialog } from '@element-plus/components/dialog'
 import ElIcon from '@element-plus/components/icon'
 import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
-import { drawerEmits, drawerProps } from './drawer'
+import { drawerEmits } from './drawer'
 import { useResizable } from './composables/useResizable'
 
+import type { DrawerProps } from './drawer'
+
 defineOptions({
   name: 'ElDrawer',
   inheritAttrs: false,
 })
 
-const props = defineProps(drawerProps)
+const props = withDefaults(defineProps<DrawerProps>(), {
+  ...dialogPropsDefaults,
+  direction: 'rtl',
+  size: '30%',
+  withHeader: true,
+  modalFade: true,
+  headerAriaLevel: '2',
+})
 const emit = defineEmits(drawerEmits)
 const slots = useSlots()