refactor: update Button component props to use TypeScript types and default values

Author: tangjinzhou

packages/ui/src/components/button/Button.vue

@@ -17,16 +17,16 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { buttonProps, buttonEmits, ButtonSlots } from './meta'
+import { ButtonSlots, ButtonProps, ButtonEmits, buttonDefaultProps } from './meta'
 import { getCssVarColor } from '@/utils/colorAlgorithm'
 import { useThemeInject } from '../theme/hook'
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
 import { defaultColor } from '../theme/meta'
 import { Wave } from '../wave'
 
-const props = defineProps(buttonProps)
+const props = withDefaults(defineProps<ButtonProps>(), buttonDefaultProps)
 const buttonRef = ref<HTMLButtonElement | null>(null)
-const emit = defineEmits(buttonEmits)
+const emit = defineEmits<ButtonEmits>()
 defineSlots<ButtonSlots>()
 
 const theme = useThemeInject()

packages/ui/src/components/button/meta.ts

@@ -1,110 +1,75 @@
-import { PropType, ExtractPublicPropTypes } from 'vue'
-
-// Button Props
-export const buttonProps = {
+export type ButtonProps = {
   /**
    * Specifies the visual style variant of the button
    * @default 'primary'
    */
-  variant: {
-    type: String as PropType<'solid' | 'outlined' | 'text' | 'link' | 'dashed' | 'filled'>,
-    default: 'solid',
-  },
-
+  variant?: 'solid' | 'outlined' | 'text' | 'link' | 'dashed' | 'filled'
   /**
    * Specifies the size of the button
    * @default 'md'
    */
-  size: {
-    type: String as PropType<'sm' | 'md' | 'lg'>,
-    default: 'md',
-  },
-
+  size?: 'sm' | 'md' | 'lg'
   /**
    * Specifies the shape of the button
    * @default 'default'
    */
-  shape: {
-    type: String as PropType<'default' | 'circle' | 'round'>,
-    default: 'default',
-  },
-
+  shape?: 'default' | 'circle' | 'round'
   /**
    * Specifies the loading state of the button
    * @default false
    */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
+  loading?: boolean
   /**
    * Specifies the disabled state of the button
    * @default false
    */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
+  disabled?: boolean
   /**
    * Specifies the danger state of the button
    * @default false
    */
-  danger: {
-    type: Boolean,
-    default: false,
-  },
-
+  danger?: boolean
   /**
    * Specifies the color of the button
    */
-  color: {
-    type: String,
-  },
-
+  color?: string
   /**
    * Specifies the href of the button
    */
-  href: {
-    type: String,
-  },
-
+  href?: string
   /**
    * Specifies the target of the button
    */
-  target: {
-    type: String,
-  },
-} as const
+  target?: string
+}
 
-export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
+export const buttonDefaultProps = {
+  variant: 'solid',
+  size: 'md',
+  shape: 'default',
+  loading: false,
+  disabled: false,
+} as const
 
-// Button Emits
-export const buttonEmits = {
+export type ButtonEmits = {
   /**
    * Triggered when the button is clicked by the user
    * @param e - The native MouseEvent object
    */
-  click: (e: MouseEvent) => e instanceof MouseEvent,
-} as const
+  (e: 'click', event: MouseEvent): void
+}
 
-export type ButtonEmits = typeof buttonEmits
-
-// Button Slots
-export const buttonSlots = {
+export type ButtonSlots = {
   /**
    * Main content slot for the button text or custom content
    */
-  default: (_: any) => null as any,
+  default?: (_: any) => any
   /**
    * Slot for the button icon
    */
-  icon: (_: any) => null as any,
+  icon?: (_: any) => any
   /**
    * Slot for the button loading indicator
    */
-  loading: (_: any) => null as any,
-} as const
-
-export type ButtonSlots = Partial<typeof buttonSlots>
+  loading?: (_: any) => any
+}