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

src/runtime/components/Tabs.vue

@@ -1,17 +1,12 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
-import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
-import type { DynamicSlots, PartialString } from '../types/utils'
+import type { DynamicSlots, ComponentConfig } from '../types/utils'
 
-const appConfigTabs = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
-
-const tabs = tv({ extend: tv(theme), ...(appConfigTabs.ui?.tabs || {}) })
+type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>
 
 export interface TabsItem {
   label?: string
@@ -28,8 +23,6 @@ export interface TabsItem {
   [key: string]: any
 }
 
-type TabsVariants = VariantProps<typeof tabs>
-
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
@@ -40,15 +33,15 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
   /**
    * @defaultValue 'primary'
    */
-  color?: TabsVariants['color']
+  color?: Tabs['variants']['color']
   /**
    * @defaultValue 'pill'
    */
-  variant?: TabsVariants['variant']
+  variant?: Tabs['variants']['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: TabsVariants['size']
+  size?: Tabs['variants']['size']
   /**
    * The orientation of the tabs.
    * @defaultValue 'horizontal'
@@ -65,7 +58,7 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
    */
   labelKey?: string
   class?: any
-  ui?: PartialString<typeof tabs.slots>
+  ui?: Tabs['slots']
 }
 
 export interface TabsEmits extends TabsRootEmits<string | number> {}
@@ -87,7 +80,9 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
 import { computed } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
 import { get } from '../utils'
+import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 
@@ -101,9 +96,11 @@ const props = withDefaults(defineProps<TabsProps<T>>(), {
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
 
+const appConfig = useAppConfig() as Tabs['AppConfig']
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
 
-const ui = computed(() => tabs({
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })({
   color: props.color,
   variant: props.variant,
   size: props.size,