Fixing ts strict stuff

Author: webdevnerdstuff

src/plugin/VDrilldownTable.vue

@@ -243,12 +243,17 @@ import {
 	Column,
 	DrilldownEvent,
 	LoadedDrilldown,
+	SearchProps,
+	SearchPropCols,
 	SortItem,
 } from '@/types/types';
 import {
 	HeadersSlot,
 	TfootSlot,
 } from './components';
+import {
+	DataTableItem,
+} from 'vuetify/dist/vuetify-labs.esm';
 
 
 
@@ -262,58 +267,18 @@ const props = defineProps({ ...AllProps });
 
 // -------------------------------------------------- Table Settings (WIP) //
 // Custom Default Props/Options //
-const customOptions = {
-	// calculateWidths: true,
-	// className: '',
-	// colors: {
-	// 	body: {
-	// 		base: '--v-theme-surface',
-	// 		bg: '--v-theme-surface',
-	// 		text: '--v-theme-on-surface',
-	// 	},
-	// 	default: {
-	// 		base: 'primary',
-	// 		bg: 'primary',
-	// 		border: null,
-	// 		text: 'on-primary',
-	// 	},
-	// 	footer: {
-	// 		bg: '--v-theme-surface',
-	// 		text: '--v-theme-on-surface',
-	// 	},
-	// 	header: {
-	// 		bg: 'primary',
-	// 		text: 'on-primary',
-	// 	},
-	// 	percentageChange: 25,
-	// 	percentageDirection: 'desc',
-	// },
-	debounceDelay: 750,
-	// drilldownKey: false,
-	elevation: 1,										// * Works
-	// expandIcon: 'plus-circle',
-	// expandIconType: 'fas',
-	// footerRow: false,
-	// matchHeaderColumnWidths: true,
-	// parentTableRef: '',
-	// ref: 'drilldown',
-	// searchProps: {
-	// 	cols: {
-	// 		lg: 3,
-	// 		md: 6,
-	// 		sm: 12,
-	// 		xl: 3,
-	// 		xs: 12,
-	// 		xxl: 2,
-	// 	},
-	// 	density: 'compact',
-	// 	variant: 'underlined',
-	// },
-	showSearch: false,
-};
+// const customOptions = {
+// calculateWidths: true,
+// className: '',
+// expandIcon: 'plus-circle',
+// expandIconType: 'fas',
+// footerRow: false,
+// matchHeaderColumnWidths: true,
+// parentTableRef: '',
+// ref: 'drilldown',
+// };
 
 const loadedDrilldown = ref<LoadedDrilldown>({
-	...customOptions,						// * Custom Props
 	colors: {
 		body: {
 			base: '--v-theme-surface',
@@ -339,8 +304,11 @@ const loadedDrilldown = ref<LoadedDrilldown>({
 	},
 	customFilter: () => { }, 			// ? Needs Testing
 	customKeyFilter: [], 					// ? Needs Testing
+	debounceDelay: 750,						// * Custom Prop
 	// dense: false,							// ? Missing in Docs, but is in code base
-	density: 'compact',						// * Works - Missing in Docs
+	density: 'comfortable',						// * Works - Missing in Docs
+	drilldownKey: '',							// * Custom Prop
+	elevation: 1, 								// * Custom Prop
 	expandOnClick: false, 				// * Works
 	expanded: [], 								// ? Needs Testing
 	// filterKeys: [], 							// ? Needs Testing
@@ -388,6 +356,7 @@ const loadedDrilldown = ref<LoadedDrilldown>({
 	},
 	server: false, 								// ? Needs Testing. This requires v-data-table-server
 	showExpand: true,							// * Works
+	showSearch: false,						// * Custom Prop
 	showSelect: false,						// * Works
 	sortBy: [],										// * Works
 	width: '100%',								// ! Failed
@@ -423,14 +392,13 @@ onMounted(() => {
 
 // -------------------------------------------------- Table #
 const tableClasses = computed<object>(() => {
-	const baseClass = componentName;
-	const elevation = loadedDrilldown.value.elevation as string;
+	const elevation = loadedDrilldown.value.elevation;
 
 	const classes = {
-		[baseClass]: true,
-		[`${baseClass}--level-${loadedDrilldown.value.level}`]: true,
-		[`${baseClass}--child`]: props.isDrilldown,
-		[`elevation-${elevation}`]: parseInt(elevation) > 0,
+		[`${componentName}`]: true,
+		[`${componentName}--level-${loadedDrilldown.value.level}`]: true,
+		[`${componentName}--child`]: props.isDrilldown,
+		[`elevation-${elevation}`]: parseInt(elevation as string) > 0,
 		'pb-2': true,
 	};
 
@@ -454,7 +422,8 @@ const tableStyles = computed<StyleValue>(() => {
 
 // -------------------------------------------------- Top #
 const searchFieldClasses = computed<object>(() => {
-	const searchCols = loadedDrilldown.value.searchProps.cols;
+	const searchProps = loadedDrilldown.value.searchProps as SearchProps;
+	const searchCols = searchProps.cols as SearchPropCols;
 
 	const classes = {
 		[`${componentName}--search-field`]: true,
@@ -501,7 +470,7 @@ function setLoadedDrilldown(): void {
 	loadedDrilldown.value = useMergeDeep(loadedDrilldown.value, props);
 }
 
-function renderCellItem(item: object, column: Column, index: number): unknown {
+function renderCellItem(item: DataTableItem, column: Column, index: number): unknown {
 	return useRenderCellItem(item.raw, column, index);
 }
 
@@ -526,7 +495,7 @@ function drilldownEvent(data: DrilldownEvent): void {
 // }
 
 // ? Probably more useful when using server side
-function updateItemsPerPage(itemsCount) {
+function updateItemsPerPage(itemsCount: number) {
 	loadedDrilldown.value.itemsPerPage = itemsCount;
 
 	return true;

src/plugin/components/HeadersSlot.vue

@@ -10,8 +10,8 @@
 			<!-- Column Dynamic Name Header Slot -->
 			<th
 				v-if="$slots[`header.${column.key}`]"
-				:class="headerRowThClasses(column)"
-				:style="headerRowThStyles(column, true)"
+				:class="cellClasses(column)"
+				:style="cellStyles(column, true)"
 			>
 				<slot
 					:column="column"
@@ -22,16 +22,16 @@
 			<th
 				v-else-if="column.key === 'data-table-expand'"
 				class="v-drilldown-table--header-row-th"
-				:class="headerRowThClasses(column)"
-				:style="headerRowThStyles(column, true)"
+				:class="cellClasses(column)"
+				:style="cellStyles(column, true)"
 				v-html="renderCell(column /* , index */)"
 			></th>
 			<!-- Column Render TH -->
 			<th
 				v-else
 				class="v-drilldown-table--header-row-th"
-				:class="headerRowThClasses(column)"
-				:style="headerRowThStyles(column)"
+				:class="cellClasses(column)"
+				:style="cellStyles(column)"
 				v-html="renderCell(column /* , index */)"
 			></th>
 		</template>
@@ -68,17 +68,17 @@ const headerRowClasses = (): object => {
 
 
 // -------------------------------------------------- Header Row TH //
-const headerRowThClasses = (column): object => {
+const cellClasses = (column: DrilldownTypes.Column): object => {
 	const classes = {
 		[`${componentName}--header-row-th-${props.loadedDrilldown.level}`]: true,
-		[column.cellClass]: column.cellClass,
+		[`${column.cellClass}`]: column.cellClass,
 	};
 
 	return classes;
 };
 
-const headerRowThStyles = (column: { width?: string | number; }, dataTableExpand = false): CSSProperties => {
-	const headerColors = useGetLevelColors(props.loadedDrilldown, theme, 'header');
+const cellStyles = (column: { width?: string | number; }, dataTableExpand = false): CSSProperties => {
+	const headerColors = useGetLevelColors(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, theme, 'header');
 
 	const styles = {
 		backgroundColor: headerColors.bg,
@@ -92,12 +92,12 @@ const headerRowThStyles = (column: { width?: string | number; }, dataTableExpand
 		styles.minWidth = '48px';
 	}
 
-	return styles;
+	return styles as CSSProperties;
 };
 
 // -------------------------------------------------- Render //
 function renderCell(column: DrilldownTypes.Column, /* , index */): unknown {
 	const tempIndex = 0;
-	return useRenderCell(props.loadedDrilldown, column, tempIndex);
+	return useRenderCell(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, column, tempIndex);
 }
 </script>

src/plugin/components/TfootSlot.vue

@@ -3,7 +3,7 @@
 		v-if="$slots.tfoot"
 		name="tfoot"
 	/>
-	<tfoot v-if="columns.length">
+	<tfoot v-if="columns?.length">
 		<tr class="v-drilldown-table--footer-row aa">
 			<template
 				v-for="column in columns"
@@ -63,7 +63,7 @@ const props = defineProps({
 	},
 });
 
-const columns = ref([]);
+const columns = ref();
 const theme = useTheme();
 
 
@@ -76,12 +76,12 @@ const cellClasses = (column: DrilldownTypes.Column): object => {
 	return {
 		[`${componentName}--footer-row-td`]: true,
 		[`${componentName}--footer-row-td-${props.loadedDrilldown.level}`]: true,
-		[column.cellClass]: column.cellClass,
+		[`${column.cellClass}`]: column.cellClass,
 	};
 };
 
 const cellStyles = (): CSSProperties => {
-	const headerColors = useGetLevelColors(props.loadedDrilldown, theme, 'header');
+	const headerColors = useGetLevelColors(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, theme, 'footer');
 
 	const styles = {
 		backgroundColor: headerColors.bg,
@@ -92,9 +92,8 @@ const cellStyles = (): CSSProperties => {
 };
 
 function renderCell(column: DrilldownTypes.Column, /* , index */): unknown {
-	console.log('renderCell', column);
 	const tempIndex = 0;
-	return useRenderCell(props.loadedDrilldown, column, tempIndex);
+	return useRenderCell(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, column, tempIndex);
 }
 
 </script>