nuxt
Table<unknown> after updating to 3.1.0?
Description
Table is now of type unknown after updating to 3.1.0 - worked before in 3.0.x Did I miss anything?
const table = useTemplateRef("table");
const selectedRowsMapPositions = computed(() =>
table.value?.tableApi
?.getFilteredSelectedRowModel()
.rows.map((row) => row.original?.id)
.filter(Boolean)
);
@schillerenrico I think this is the same issue as the one you created already (#3980). Would you mind providing a reproduction? I don't the issue myself.
@benjamincanac Sure, using the examples from the nuxt ui docs and some extra functions the ide is not getting the right type. row is of type any or unknown instead of Payment.
https://codesandbox.io/p/devbox/strange-buck-dz55vr
@schillerenrico and @benjamincanac , I had also same both issues when I tried to upgrade a project yesterday.
I first though I broke type inference with my change. I was suspecting this line:
const data = ref(props.data ?? []) as Ref<T[]>
But when I checked the nuxt ui playground directly I saw that I did not had this problem so I just roll-back due to lack of time. @schillerenrico, when using your code in that playground of nuxt ui, there is no issue.
When searching for issues, I saw that typescript build files has changed and are no more in the same file. There might be something that nuxt clean and so do not fix.
There might be something to clear and restart typescript analysis required? I did not had such quick fix for the issue https://github.com/nuxt/ui/issues/3980.
Before upgrade:
After upgrade:
==> All types are removed and there is a new file specific with typescript stuff (ex: defineSlots)
The example in the docs found here has this issue as well for easier reproduction: https://ui.nuxt.com/components/table#with-slots
<script setup lang="ts">
import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
interface User {
id: number
name: string
position: string
email: string
role: string
}
const toast = useToast()
const data = ref<User[]>([
{
id: 1,
name: 'Lindsay Walton',
position: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
},
{
id: 2,
name: 'Courtney Henry',
position: 'Designer',
email: '[email protected]',
role: 'Admin'
},
{
id: 3,
name: 'Tom Cook',
position: 'Director of Product',
email: '[email protected]',
role: 'Member'
},
{
id: 4,
name: 'Whitney Francis',
position: 'Copywriter',
email: '[email protected]',
role: 'Admin'
},
{
id: 5,
name: 'Leonard Krasner',
position: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
},
{
id: 6,
name: 'Floyd Miles',
position: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}
])
const columns: TableColumn<User>[] = [
{
accessorKey: 'id',
header: 'ID'
},
{
accessorKey: 'name',
header: 'Name'
},
{
accessorKey: 'email',
header: 'Email'
},
{
accessorKey: 'role',
header: 'Role'
},
{
id: 'action'
}
]
function getDropdownActions(user: User): DropdownMenuItem[][] {
return [
[
{
label: 'Copy user Id',
icon: 'i-lucide-copy',
onSelect: () => {
navigator.clipboard.writeText(user.id.toString())
toast.add({
title: 'User ID copied to clipboard!',
color: 'success',
icon: 'i-lucide-circle-check'
})
}
}
],
[
{
label: 'Edit',
icon: 'i-lucide-edit'
},
{
label: 'Delete',
icon: 'i-lucide-trash',
color: 'error'
}
]
]
}
</script>
<template>
<UTable :data="data" :columns="columns" class="flex-1">
<template #name-cell="{ row }">
<div class="flex items-center gap-3">
<UAvatar
:src="`https://i.pravatar.cc/120?img=${row.original.id}`"
size="lg"
:alt="`${row.original.name} avatar`"
/>
<div>
<p class="font-medium text-highlighted">
{{ row.original.name }}
</p>
<p>
{{ row.original.position }}
</p>
</div>
</div>
</template>
<template #action-cell="{ row }">
<UDropdownMenu :items="getDropdownActions(row.original)">
<UButton
icon="i-lucide-ellipsis-vertical"
color="neutral"
variant="ghost"
aria-label="Actions"
/>
</UDropdownMenu>
</template>
</UTable>
</template>
3.1.0 broke the typings of all my tables where I use row.original because inside the template it shows Row<unknown>.
I hope this can be fixed soon. Thanks
Confirming the issue. I think it's caused by this line from the reactivity update.
https://github.com/nuxt/ui/commit/6e27304d8ca459a04667bac404084264a8cf58fd#diff-b7fa789489c8c59a3f5b6fe1ae3dc8b57ba36a45fb99f9db8f4b598aa377a5cdR204
i don't think this is an issue with just the table, all of the generic nuxt ui components are broken in my code base after the update
<UCarousel
:items="f.state.value"
// ^? string[]
v-slot="{ item }"
// ^? before string after AcceptableValue which is an internal type of nuxt ui
>
<UAccordion
:items="tags.data.value!"
// ^? (AccordionItem & { total: number; customContent: { id: number; name: string; total: number }[]; })[]
>
<template #default="{ item }">
// ^? before AccordionItem & { total: number; customContent: { id: number; name: string; total: number }[]; } after AccordionItem
<span class="text-(--ui-primary)">
{{ item.label }}
</span>
</template>
Excuse me why this issue is closed? Is a fix coming in the next release?
