mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
fix(Table): types in undeclared slots (#2544)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
|
||||
|
||||
type User = {
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
position: string
|
||||
@@ -9,6 +9,8 @@ type User = {
|
||||
role: string
|
||||
}
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const data = ref<User[]>([{
|
||||
id: 1,
|
||||
name: 'Lindsay Walton',
|
||||
@@ -59,7 +61,34 @@ const columns: TableColumn<User>[] = [{
|
||||
}, {
|
||||
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>
|
||||
@@ -77,5 +106,10 @@ const columns: TableColumn<User>[] = [{
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #action-cell="{ row }">
|
||||
<UDropdownMenu :items="getDropdownActions(row.original)">
|
||||
<UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
|
||||
</UDropdownMenu>
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
@@ -89,8 +89,8 @@ export interface TableProps<T> {
|
||||
ui?: Partial<typeof table.slots>
|
||||
}
|
||||
|
||||
type DynamicHeaderSlots<T, K = keyof T> = Record<string, T> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
|
||||
type DynamicCellSlots<T, K = keyof T> = Record<string, T> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
|
||||
type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
|
||||
type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
|
||||
|
||||
export type TableSlots<T> = {
|
||||
expanded: (props: { row: Row<T> }) => any
|
||||
|
||||
Reference in New Issue
Block a user