Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 39c861a

Browse files
benjamincanacbenjamincanac
authored
fix(components): refactor types after @nuxt/module-builder upgrade (#3855)
1 parent 333b7e4 commit 39c861a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+634
-730
lines changed

‎cli/templates.mjs‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,10 @@ const component = ({ name, primitive, pro, prose, content }) => {
3131
? `
3232
<script lang="ts">
3333
import type { AppConfig } from '@nuxt/schema'
34-
import _appConfig from '#build/app.config'
3534
import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
36-
import { tv } from '../utils/tv'
37-
38-
const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
35+
import type { ComponentConfig } from '../types/utils'
3936
40-
const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
37+
type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
4138
4239
export interface ${upperName}Props {
4340
/**
@@ -46,7 +43,7 @@ export interface ${upperName}Props {
4643
*/
4744
as?: any
4845
class?: any
49-
ui?: Partial<typeof ${camelName}.slots>
46+
ui?: ${upperName}['slots']
5047
}
5148
5249
export interface ${upperName}Slots {
@@ -55,12 +52,17 @@ export interface ${upperName}Slots {
5552
</script>
5653
5754
<script setup lang="ts">
55+
import { computed } from 'vue'
5856
import { Primitive } from 'reka-ui'
57+
import { useAppConfig } from '#imports'
58+
import { tv } from '../utils/tv'
5959
6060
const props = defineProps<${upperName}Props>()
6161
defineSlots<${upperName}Slots>()
6262
63-
const ui = ${camelName}()
63+
const appConfig = useAppConfig() as ${upperName}['AppConfig']
64+
65+
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
6466
</script>
6567
6668
<template>
@@ -71,22 +73,16 @@ const ui = ${camelName}()
7173
`
7274
: `
7375
<script lang="ts">
74-
import type { VariantProps } from 'tailwind-variants'
7576
import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
7677
import type { AppConfig } from '@nuxt/schema'
77-
import _appConfig from '#build/app.config'
7878
import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
79-
import { tv } from '../utils/tv'
79+
import type { ComponentConfig } from '../types/utils'
8080
81-
const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
82-
83-
const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
84-
85-
type ${upperName}Variants = VariantProps<typeof ${camelName}>
81+
type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
8682
8783
export interface ${upperName}Props extends Pick<${upperName}RootProps> {
8884
class?: any
89-
ui?: Partial<typeof ${camelName}.slots>
85+
ui?: ${upperName}['slots']
9086
}
9187
9288
export interface ${upperName}Emits extends ${upperName}RootEmits {}
@@ -95,16 +91,21 @@ export interface ${upperName}Slots {}
9591
</script>
9692
9793
<script setup lang="ts">
94+
import { computed } from 'vue'
9895
import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
9996
import { reactivePick } from '@vueuse/core'
97+
import { useAppConfig } from '#imports'
98+
import { tv } from '../utils/tv'
10099
101100
const props = defineProps<${upperName}Props>()
102101
const emits = defineEmits<${upperName}Emits>()
103102
const slots = defineSlots<${upperName}Slots>()
104103
104+
const appConfig = useAppConfig() as ${upperName}['AppConfig']
105+
105106
const rootProps = useForwardPropsEmits(reactivePick(props), emits)
106107
107-
const ui = ${camelName}()
108+
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
108109
</script>
109110
110111
<template>

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"@nuxt/content": "^3.4.0",
1212
"@nuxt/image": "^1.10.0",
1313
"@nuxt/ui": "latest",
14-
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@6b838c4",
14+
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@655b0bd",
1515
"@nuxthub/core": "^0.8.24",
1616
"@nuxtjs/plausible": "^1.2.0",
1717
"@octokit/rest": "^21.1.1",

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/runtime/components/Accordion.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,10 @@
22
<script lang="ts">
33
import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
44
import type { AppConfig } from '@nuxt/schema'
5-
import _appConfig from '#build/app.config'
65
import theme from '#build/ui/accordion'
7-
import { tv } from '../utils/tv'
8-
import type { DynamicSlots } from '../types/utils'
9-
10-
const appConfigAccordion = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
6+
import type { DynamicSlots, ComponentConfig } from '../types/utils'
117
12-
const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion || {}) })
8+
type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>
139
1410
export interface AccordionItem {
1511
label?: string
@@ -48,7 +44,7 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
4844
*/
4945
labelKey?: string
5046
class?: any
51-
ui?: Partial<typeof accordion.slots>
47+
ui?: Accordion['slots']
5248
}
5349
5450
export interface AccordionEmits extends AccordionRootEmits {}
@@ -71,6 +67,7 @@ import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, Accord
7167
import { reactivePick } from '@vueuse/core'
7268
import { useAppConfig } from '#imports'
7369
import { get } from '../utils'
70+
import { tv } from '../utils/tv'
7471
import UIcon from './Icon.vue'
7572
7673
const props = withDefaults(defineProps<AccordionProps<T>>(), {
@@ -82,10 +79,11 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
8279
const emits = defineEmits<AccordionEmits>()
8380
const slots = defineSlots<AccordionSlots<T>>()
8481
85-
const appConfig = useAppConfig()
82+
const appConfig = useAppConfig() as Accordion['AppConfig']
83+
8684
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emits)
8785
88-
const ui = computed(() => accordion({
86+
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })({
8987
disabled: props.disabled
9088
}))
9189
</script>

‎src/runtime/components/Alert.vue‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
<script lang="ts">
2-
import type { VariantProps } from 'tailwind-variants'
32
import type { AppConfig } from '@nuxt/schema'
4-
import _appConfig from '#build/app.config'
53
import theme from '#build/ui/alert'
6-
import { tv } from '../utils/tv'
74
import type { AvatarProps, ButtonProps } from '../types'
5+
import type { ComponentConfig } from '../types/utils'
86
9-
const appConfigAlert = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
10-
11-
const alert = tv({ extend: tv(theme), ...(appConfigAlert.ui?.alert || {}) })
12-
13-
type AlertVariants = VariantProps<typeof alert>
7+
type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>
148
159
export interface AlertProps {
1610
/**
@@ -28,16 +22,16 @@ export interface AlertProps {
2822
/**
2923
* @defaultValue 'primary'
3024
*/
31-
color?: AlertVariants['color']
25+
color?: Alert['variants']['color']
3226
/**
3327
* @defaultValue 'solid'
3428
*/
35-
variant?: AlertVariants['variant']
29+
variant?: Alert['variants']['variant']
3630
/**
3731
* The orientation between the content and the actions.
3832
* @defaultValue 'vertical'
3933
*/
40-
orientation?: AlertVariants['orientation']
34+
orientation?: Alert['variants']['orientation']
4135
/**
4236
* Display a list of actions:
4337
* - under the title and description when orientation is `vertical`
@@ -59,7 +53,7 @@ export interface AlertProps {
5953
*/
6054
closeIcon?: string
6155
class?: any
62-
ui?: Partial<typeof alert.slots>
56+
ui?: Alert['slots']
6357
}
6458
6559
export interface AlertEmits {
@@ -71,7 +65,7 @@ export interface AlertSlots {
7165
title(props?: {}): any
7266
description(props?: {}): any
7367
actions(props?: {}): any
74-
close(props: { ui: ReturnType<typeof alert> }): any
68+
close(props: { ui: { [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string } }): any
7569
}
7670
</script>
7771

@@ -80,6 +74,7 @@ import { computed } from 'vue'
8074
import { Primitive } from 'reka-ui'
8175
import { useAppConfig } from '#imports'
8276
import { useLocale } from '../composables/useLocale'
77+
import { tv } from '../utils/tv'
8378
import UIcon from './Icon.vue'
8479
import UAvatar from './Avatar.vue'
8580
import UButton from './Button.vue'
@@ -91,9 +86,9 @@ const emits = defineEmits<AlertEmits>()
9186
const slots = defineSlots<AlertSlots>()
9287
9388
const { t } = useLocale()
94-
const appConfig = useAppConfig()
89+
const appConfig = useAppConfig() as Alert['AppConfig']
9590
96-
const ui = computed(() => alert({
91+
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })({
9792
color: props.color,
9893
variant: props.variant,
9994
orientation: props.orientation,

‎src/runtime/components/Avatar.vue‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
<script lang="ts">
2-
import type { VariantProps } from 'tailwind-variants'
32
import type { AppConfig } from '@nuxt/schema'
4-
import _appConfig from '#build/app.config'
53
import theme from '#build/ui/avatar'
6-
import { tv } from '../utils/tv'
7-
8-
const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
4+
import type { ComponentConfig } from '../types/utils'
95
10-
const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.ui?.avatar || {}) })
11-
12-
type AvatarVariants = VariantProps<typeof avatar>
6+
type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>
137
148
export interface AvatarProps {
159
/**
@@ -27,10 +21,10 @@ export interface AvatarProps {
2721
/**
2822
* @defaultValue 'md'
2923
*/
30-
size?: AvatarVariants['size']
24+
size?: Avatar['variants']['size']
3125
class?: any
3226
style?: any
33-
ui?: Partial<typeof avatar.slots>
27+
ui?: Avatar['slots']
3428
}
3529
3630
export interface AvatarSlots {
@@ -41,8 +35,10 @@ export interface AvatarSlots {
4135
<script setup lang="ts">
4236
import { ref, computed, watch } from 'vue'
4337
import { Primitive, Slot } from 'reka-ui'
38+
import { useAppConfig } from '#imports'
4439
import ImageComponent from '#build/ui-image-component'
4540
import { useAvatarGroup } from '../composables/useAvatarGroup'
41+
import { tv } from '../utils/tv'
4642
import UIcon from './Icon.vue'
4743
4844
defineOptions({ inheritAttrs: false })
@@ -51,10 +47,11 @@ const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
5147
5248
const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
5349
50+
const appConfig = useAppConfig() as Avatar['AppConfig']
5451
const { size } = useAvatarGroup(props)
5552
5653
// eslint-disable-next-line vue/no-dupe-keys
57-
const ui = computed(() => avatar({
54+
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })({
5855
size: size.value
5956
}))
6057

‎src/runtime/components/AvatarGroup.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
<script lang="ts">
2-
import type { VariantProps } from 'tailwind-variants'
32
import type { AppConfig } from '@nuxt/schema'
4-
import _appConfig from '#build/app.config'
53
import theme from '#build/ui/avatar-group'
6-
import { tv } from '../utils/tv'
7-
8-
const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
9-
10-
const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.ui?.avatarGroup || {}) })
4+
import type { ComponentConfig } from '../types/utils'
115
12-
type AvatarGroupVariants = VariantProps<typeof avatarGroup>
6+
type AvatarGroup = ComponentConfig<typeof theme, AppConfig, 'avatarGroup'>
137
148
export interface AvatarGroupProps {
159
/**
@@ -20,13 +14,13 @@ export interface AvatarGroupProps {
2014
/**
2115
* @defaultValue 'md'
2216
*/
23-
size?: AvatarGroupVariants['size']
17+
size?: AvatarGroup['variants']['size']
2418
/**
2519
* The maximum number of avatars to display.
2620
*/
2721
max?: number | string
2822
class?: any
29-
ui?: Partial<typeof avatarGroup.slots>
23+
ui?: AvatarGroup['slots']
3024
}
3125
3226
export interface AvatarGroupSlots {
@@ -37,13 +31,17 @@ export interface AvatarGroupSlots {
3731
<script setup lang="ts">
3832
import { computed, provide } from 'vue'
3933
import { Primitive } from 'reka-ui'
34+
import { useAppConfig } from '#imports'
4035
import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
36+
import { tv } from '../utils/tv'
4137
import UAvatar from './Avatar.vue'
4238
4339
const props = defineProps<AvatarGroupProps>()
4440
const slots = defineSlots<AvatarGroupSlots>()
4541
46-
const ui = computed(() => avatarGroup({
42+
const appConfig = useAppConfig() as AvatarGroup['AppConfig']
43+
44+
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })({
4745
size: props.size
4846
}))
4947

0 commit comments

Comments
 (0)