feat: enhance TSTable component with new slot type definitions and improve TypeScript configuration (#3)

Author: dacsang97

packages/core/src/components/TSTable.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ColumnDef, RowData, Table } from '@tanstack/vue-table'
+import type { CellSlotProps, FooterSlotProps, HeaderSlotProps } from '../shared/types'
 
 export interface TSTableProps<TData extends RowData & object> {
   columns: ColumnDef<TData>[]
@@ -42,9 +43,9 @@ defineSlots<{
     table: Table<TData>;
   }) => any;
 
-  [key: `header-${string}`]: (props: any) => any;
-  [key: `cell-${string}`]: (props: any) => any;
-  [key: `footer-${string}`]: (props: any) => any;
+  [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
+  [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
+  [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
 }>()
 </script>
 

packages/core/src/shared/index.ts

@@ -1 +1,2 @@
 export * from './utils'
+export * from './types'

packages/core/src/shared/types.ts

@@ -0,0 +1,17 @@
+import type { CellContext, Column, HeaderContext, Row, RowData } from '@tanstack/vue-table'
+
+export interface HeaderSlotProps<TData extends RowData> {
+  column: Column<TData>
+  context: HeaderContext<TData, unknown>
+}
+
+export interface CellSlotProps<TData extends RowData> {
+  row: Row<TData>
+  context: CellContext<TData, unknown>
+  value: any
+}
+
+export interface FooterSlotProps<TData extends RowData> {
+  column: Column<TData>
+  context: HeaderContext<TData, unknown>
+}

packages/core/tsconfig.app.json

@@ -2,13 +2,17 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "esModuleInterop": true,
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}