fix: exposed table config as a type (TableColConfig)

BREAKING CHANGE: colInfo prop is now colConfig

Author: AlansCodeLog

src/components/LibTable/LibTable.stories.ts

@@ -7,7 +7,6 @@ import * as components from "../index.js"
 
 
 const meta: Meta<typeof LibTable> = {
-	// @ts-expect-error ???
 	component: LibTable,
 }
 
@@ -18,14 +17,12 @@ export const Primary: Story = {
 		components,
 		setup: () => ({ args }),
 		template: `
-			<test-wrapper :outline="args.outline">
 				<div class="overflow-x-scroll scrollbar-hidden">
 					<lib-table
 						v-bind="args"
 					>
 					</lib-table>
 				</div>
-			</test-wrapper>
 		`,
 	}),
 	args: {
@@ -35,7 +32,8 @@ export const Primary: Story = {
 			{ prop1: "Item2 Prop 1", prop2: "Item2 Prop 2", prop3: "Item2 Prop 3" },
 			{ prop1: "Item3 Prop 1", prop2: "Item3 Prop 2", prop3: "Item3 Prop 3" },
 		],
-		colInfo: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
+		colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
+		itemKey: "prop1",
 	},
 }
 
@@ -107,65 +105,63 @@ export const ThreeColSomeColsNotResizable: Story = {
 		components,
 		setup: () => ({ args }),
 		template: `
-			<test-wrapper :outline="args.outline">
-				<lib-table
-					v-bind="args"
-				>
-				</lib-table>
-				<br>
-				<lib-table
-				v-bind="{...args, colInfo:args.colInfo2}"
-				>
+			<lib-table
+				v-bind="args"
+			>
 			</lib-table>
 			<br>
-				<lib-table
-					v-bind="{...args, colInfo:args.colInfo3}"
-				>
-				</lib-table>
-			</test-wrapper>
+			<lib-table
+			v-bind="{...args, colConfig:args.colConfig2}"
+			>
+			</lib-table>
+			<br>
+			<lib-table
+				v-bind="{...args, colConfig:args.colConfig3}"
+			>
+			</lib-table>
 		`,
 	}),
 	args: {
 		cols: ["prop1", "prop2", "prop3"],
+		itemKey: "prop1",
 		values: [
 			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3" },
 		],
-		colInfo: { prop1: { name: "No Resize", resizable: false } },
-		colInfo2: { prop2: { name: "No Resize", resizable: false } },
-		colInfo3: { prop3: { name: "No Resize", resizable: false } },
+		colConfig: { prop1: { name: "No Resize", resizable: false } },
+		colConfig2: { prop2: { name: "No Resize", resizable: false } },
+		colConfig3: { prop3: { name: "No Resize", resizable: false } },
 	} as any,
 }
 export const FourColSomeColsNotResizable: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
-			<test-wrapper :outline="args.outline">
 				<lib-table
 					v-bind="args"
 				>
 				</lib-table>
 				<br>
 				<lib-table
-				v-bind="{...args, colInfo:args.colInfo2}"
+				v-bind="{...args, colConfig:args.colConfig2}"
 				>
 			</lib-table>
 			<br>
 				<lib-table
-					v-bind="{...args, colInfo:args.colInfo3}"
+					v-bind="{...args, colConfig:args.colConfig3}"
 				>
 				</lib-table>
-			</test-wrapper>
 		`,
 	}),
 	args: {
 		cols: ["prop1", "prop2", "prop3", "prop4"],
 		values: [
 			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3", prop4: "Prop 4" },
 		],
-		colInfo: { prop1: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
-		colInfo2: { prop2: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
-		colInfo3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } },
+		itemKey: "prop1",
+		colConfig: { prop1: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+		colConfig2: { prop2: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+		colConfig3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } },
 	} as any,
 }
 

src/components/LibTable/LibTable.vue

@@ -47,21 +47,21 @@
 					:class="[
 						extraClasses[`-1-${i}`],
 						'cell',
-						(colInfo as any)[col]?.resizable === false
+						(colConfig as any)[col]?.resizable === false
 							? 'no-resize'
 							: ''
 					].join(' ')"
 				>
 					<td :class="[
 							extraClasses[`-1-${i}`] ,
 							'cell',
-							(colInfo as any)[col]?.resizable === false
+							(colConfig as any)[col]?.resizable === false
 								? 'no-resize'
 								: ''
 						].join(' ')"
 						:style="` width:${widths.length > 0 ? widths[i] : ``}; `"
 					>
-						{{ (colInfo as any)[col]?.name ?? col }}
+						{{ (colConfig as any)[col]?.name ?? col }}
 					</td>
 				</slot>
 			</template>
@@ -92,7 +92,7 @@ import { computed, type PropType, ref } from "vue"
 
 import { resizableCols as vResizableCols } from "../../directives/resizableCols.js"
 import { twMerge } from "../../helpers/twMerge.js"
-import type { ResizableOptions } from "../../types.js"
+import type { ResizableOptions, TableColConfig } from "../../types.js"
 
 
 defineOptions({
@@ -110,7 +110,7 @@ const props = defineProps({
 	border: { type: Boolean, required: false, default: true },
 	cellBorder: { type: Boolean, required: false, default: true },
 	header: { type: Boolean, required: false, default: true },
-	colInfo: { type: Object as PropType<Record<keyof T, { name?: string, resizable?: boolean }>>, required: false, default: () => ({}) },
+	colConfig: { type: Object as PropType<TableColConfig<T>>, required: false, default: () => ({}) },
 })
 const widths = ref([])
 const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({

src/types.ts

@@ -45,6 +45,8 @@ export type ResizableOptions = {
 	/** The selector to use for the cells. "tr > td" by default. */
 	selector: string
 }
+export type TableColConfig<T = {}> = Record<keyof T, { name?: string, resizable?: boolean }>
+
 export type ResizeCallback = (rect: DOMRectReadOnly, el: Element) => void
 
 export type FileInputError = ErrorW<{ file: File, isValidMimeType: boolean, isValidExtension: boolean }>