refactor: fix buildProps (#5936)

packages/components/dropdown/src/dropdown.ts

@@ -24,59 +24,56 @@ export interface IElDropdownInstance {
   triggerElm?: ComputedRef<Nullable<HTMLButtonElement>>
 }
 
-export const dropdownProps = {
+export const dropdownProps = buildProps({
   trigger: useTooltipTriggerProps.trigger,
-
   effect: {
     ...useTooltipContentProps.effect,
     default: 'light',
   },
-  ...buildProps({
-    type: {
-      type: definePropType<ButtonType>(String),
-    },
-    placement: {
-      type: definePropType<Placement>(String),
-      default: 'bottom',
-    },
-    popperOptions: {
-      type: definePropType<Partial<Options>>(Object),
-      default: () => ({}),
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-    splitButton: Boolean,
-    hideOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    loop: {
-      type: Boolean,
-    },
-    showTimeout: {
-      type: Number,
-      default: 150,
-    },
-    hideTimeout: {
-      type: Number,
-      default: 150,
-    },
-    tabindex: {
-      type: definePropType<number | string>([Number, String]),
-      default: 0,
-    },
-    maxHeight: {
-      type: definePropType<number | string>([Number, String]),
-      default: '',
-    },
-    popperClass: {
-      type: String,
-      default: '',
-    },
-  } as const),
-} as const
+  type: {
+    type: definePropType<ButtonType>(String),
+  },
+  placement: {
+    type: definePropType<Placement>(String),
+    default: 'bottom',
+  },
+  popperOptions: {
+    type: definePropType<Partial<Options>>(Object),
+    default: () => ({}),
+  },
+  size: {
+    type: String,
+    default: '',
+  },
+  splitButton: Boolean,
+  hideOnClick: {
+    type: Boolean,
+    default: true,
+  },
+  loop: {
+    type: Boolean,
+  },
+  showTimeout: {
+    type: Number,
+    default: 150,
+  },
+  hideTimeout: {
+    type: Number,
+    default: 150,
+  },
+  tabindex: {
+    type: definePropType<number | string>([Number, String]),
+    default: 0,
+  },
+  maxHeight: {
+    type: definePropType<number | string>([Number, String]),
+    default: '',
+  },
+  popperClass: {
+    type: String,
+    default: '',
+  },
+} as const)
 
 export const dropdownItemProps = buildProps({
   command: {

packages/components/popover/src/popover.ts

@@ -1,8 +1,11 @@
 import { buildProps } from '@element-plus/utils'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 
-export const usePopoverProps = {
-  appendToBody: { type: Boolean, default: undefined },
+export const usePopoverProps = buildProps({
+  appendToBody: {
+    type: Boolean,
+    default: undefined,
+  },
   content: useTooltipContentProps.content,
   popperStyle: useTooltipContentProps.popperStyle,
   popperClass: useTooltipContentProps.popperClass,
@@ -15,12 +18,10 @@ export const usePopoverProps = {
     default: 'light',
   },
   teleported: useTooltipContentProps.teleported,
-  ...buildProps({
-    title: String,
+  title: String,
 
-    width: {
-      type: [String, Number],
-      default: 150,
-    },
-  }),
-}
+  width: {
+    type: [String, Number],
+    default: 150,
+  },
+} as const)

packages/components/popper/src/popper.ts

@@ -26,7 +26,7 @@ export const usePopperArrowProps = buildProps({
     type: Number,
     default: 5,
   },
-})
+} as const)
 
 export const usePopperCoreConfigProps = buildProps({
   boundariesPadding: {
@@ -81,7 +81,7 @@ export const usePopperContentProps = buildProps({
   style: { type: definePropType<StyleValue>([String, Array, Object]) },
   className: { type: definePropType<ClassType>([String, Array, Object]) },
   effect: {
-    type: String,
+    values: effects,
     default: 'dark',
   },
   enterable: {
@@ -105,12 +105,16 @@ export const usePopperContentProps = buildProps({
     default: true,
   },
   zIndex: Number,
-})
+} as const)
 
 export const usePopperTriggerProps = buildProps({
-  virtualRef: { type: definePropType<Measurable>(Object) },
-  virtualTriggering: { type: Boolean },
-})
+  virtualRef: {
+    type: definePropType<Measurable>(Object),
+  },
+  virtualTriggering: {
+    type: Boolean,
+  },
+} as const)
 
 export type UsePopperProps = ExtractPropTypes<typeof usePopperProps>
 export type UsePopperCoreConfigProps = ExtractPropTypes<

packages/components/tooltip/src/tooltip.ts

@@ -8,60 +8,58 @@ import {
   POPPER_CONTAINER_SELECTOR,
 } from '@element-plus/hooks'
 
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 
 const triggers = ['hover', 'focus', 'click', 'contextmenu'] as const
 
 export type Trigger = typeof triggers[number]
 
-export const useTooltipContentProps = {
+export const useTooltipContentProps = buildProps({
   ...useDelayedToggleProps,
   ...usePopperContentProps,
-  ...buildProps({
-    appendTo: {
-      type: definePropType<string | HTMLElement>([String, Object]),
-      default: POPPER_CONTAINER_SELECTOR,
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    rawContent: {
-      type: Boolean,
-      default: false,
-    },
-    persistent: Boolean,
-    ariaLabel: String,
-    // because model toggle prop is generated dynamically
-    // so the typing cannot be evaluated by typescript as type:
-    // [name]: { type: Boolean, default: null }
-    // so we need to declare that again for type checking.
-    visible: {
-      type: definePropType<boolean | null>(Boolean),
-      default: null,
-    },
-    transition: {
-      type: String,
-      default: 'el-fade-in-linear',
-    },
-    teleported: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-    },
-  } as const),
-}
+  appendTo: {
+    type: definePropType<string | HTMLElement>([String, Object]),
+    default: POPPER_CONTAINER_SELECTOR,
+  },
+  content: {
+    type: String,
+    default: '',
+  },
+  rawContent: {
+    type: Boolean,
+    default: false,
+  },
+  persistent: Boolean,
+  ariaLabel: String,
+  // because model toggle prop is generated dynamically
+  // so the typing cannot be evaluated by typescript as type:
+  // [name]: { type: Boolean, default: null }
+  // so we need to declare that again for type checking.
+  visible: {
+    type: definePropType<boolean | null>(Boolean),
+    default: null,
+  },
+  transition: {
+    type: String,
+    default: 'el-fade-in-linear',
+  },
+  teleported: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+  },
+} as const)
 
-export const useTooltipTriggerProps = {
+export const useTooltipTriggerProps = buildProps({
   ...usePopperTriggerProps,
   disabled: Boolean,
   trigger: {
-    type: [String, Array] as PropType<Trigger | Trigger[]>,
+    type: definePropType<Trigger | Trigger[]>([String, Array]),
     default: 'hover',
   },
-}
+} as const)
 
 export const useTooltipProps = buildProps({
   openDelay: {

packages/hooks/use-delayed-toggle/index.ts

@@ -13,7 +13,7 @@ export const useDelayedToggleProps = buildProps({
     type: Number,
     default: 200,
   },
-})
+} as const)
 
 export type UseDelayedToggleProps = {
   open: () => void