fix(components): refactor types after @nuxt/module-builder upgrade (#3855)

src/runtime/components/Button.vue

@@ -1,36 +1,29 @@
 <script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
-import type { PartialString } from '../types/utils'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfigButton = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
-
-const button = tv({ extend: tv(theme), ...(appConfigButton.ui?.button || {}) })
-
-type ButtonVariants = VariantProps<typeof button>
+type Button = ComponentConfig<typeof theme, AppConfig, 'button'>
 
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
   /**
    * @defaultValue 'primary'
    */
-  color?: ButtonVariants['color']
-  activeColor?: ButtonVariants['color']
+  color?: Button['variants']['color']
+  activeColor?: Button['variants']['color']
   /**
    * @defaultValue 'solid'
    */
-  variant?: ButtonVariants['variant']
-  activeVariant?: ButtonVariants['variant']
+  variant?: Button['variants']['variant']
+  activeVariant?: Button['variants']['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: ButtonVariants['size']
+  size?: Button['variants']['size']
   /** Render the button with equal padding on all sides. */
   square?: boolean
   /** Render the button full width. */
@@ -39,7 +32,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   loadingAuto?: boolean
   onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
-  ui?: PartialString<typeof button.slots>
+  ui?: Button['slots']
 }
 
 export interface ButtonSlots {
@@ -51,11 +44,14 @@ export interface ButtonSlots {
 
 <script setup lang="ts">
 import { type Ref, computed, ref, inject } from 'vue'
+import { defu } from 'defu'
 import { useForwardProps } from 'reka-ui'
+import { useAppConfig } from '#imports'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { formLoadingInjectionKey } from '../composables/useFormField'
 import { omit } from '../utils'
+import { tv } from '../utils/tv'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
@@ -69,10 +65,11 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 })
 const slots = defineSlots<ButtonSlots>()
 
-const linkProps = useForwardProps(pickLinkProps(props))
-
+const appConfig = useAppConfig() as Button['AppConfig']
 const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
 
+const linkProps = useForwardProps(pickLinkProps(props))
+
 const loadingAutoState = ref(false)
 const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
 
@@ -95,17 +92,19 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
 )
 
 const ui = computed(() => tv({
-  extend: button,
-  variants: {
-    active: {
-      true: {
-        base: props.activeClass
-      },
-      false: {
-        base: props.inactiveClass
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: {
+          base: props.activeClass
+        },
+        false: {
+          base: props.inactiveClass
+        }
       }
     }
-  }
+  }, appConfig.ui?.button || {})
 })({
   color: props.color,
   variant: props.variant,