From f821e6681bfc5d1515fe7158fe3fda639a897ac8 Mon Sep 17 00:00:00 2001
From: Alex <a.hywax@gmail.com>
Date: Wed, 6 Nov 2024 18:27:22 +0500
Subject: [PATCH] fix(Table): types in undeclared slots (#2544)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../examples/table/TableSlotsExample.vue      | 38 ++++++++++++++++++-
 src/runtime/components/Table.vue              |  4 +-
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/content/examples/table/TableSlotsExample.vue b/docs/app/components/content/examples/table/TableSlotsExample.vue
index ff2a8c44cf..54a39fe972 100644
--- a/docs/app/components/content/examples/table/TableSlotsExample.vue
+++ b/docs/app/components/content/examples/table/TableSlotsExample.vue
@@ -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>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 075fe8a603..67e43da127 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -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