Merge branch 'match-column-widths' into dev

Author: webdevnerdstuff

src/plugin/VDrilldownTable.vue

@@ -2,9 +2,10 @@
 	<component
 		:is="tableType"
 		v-if="tableType"
-		v-model="loadedDrilldown.modelValue"
 		v-bind="$attrs"
+		v-model="loadedDrilldown.modelValue"
 		:class="tableClasses"
+		:data-vdt-id="tableId"
 		:density="loadedDrilldown.density"
 		:expand-on-click="loadedDrilldown.expandOnClick"
 		:expanded="loadedDrilldown.expanded"
@@ -66,6 +67,7 @@
 			<HeadersSlot
 				:key="level"
 				:colors="loadedDrilldown.colors"
+				:column-widths="loadedDrilldown.columnWidths"
 				:density="loadedDrilldown.density"
 				:items="loadedDrilldown.items"
 				:level="level"
@@ -78,14 +80,14 @@
 					size: loadedDrilldown.loaderSize,
 					skeltonType: loadedDrilldown.skeltonType,
 				}"
+				:match-column-widths="loadedDrilldown.matchColumnWidths"
 				:select-strategy="loadedDrilldown.selectStrategy"
 				:show-select="loadedDrilldown.showSelect"
 				:slot-props="{ ...props }"
 				:sort-asc-icon="loadedDrilldown.sortAscIcon"
 				:sort-by="loadedDrilldown.sortBy"
 				:table-model-value="loadedDrilldown.modelValue"
 			>
-				<!-- @click:selectAll="emitAllSelectedEvent($event)" -->
 				<!-- Pass on all scoped slots -->
 				<template
 					v-for="(_, slot) in slots"
@@ -201,6 +203,7 @@
 					<VDrilldownTable
 						:key="item.raw"
 						:colors="colors"
+						:column-widths="loadedDrilldown.columnWidths"
 						:density="loadedDrilldown.density"
 						:drilldown="loadedDrilldown"
 						:headers="item.raw[itemChildrenKey]?.headers"
@@ -215,9 +218,9 @@
 						:loaderType="item.raw[itemChildrenKey]?.loaderType"
 						:loading="item.raw[itemChildrenKey]?.loading"
 						:loadingText="loadingText"
+						:match-column-widths="loadedDrilldown.matchColumnWidths"
 						:multi-sort="item.raw[itemChildrenKey]?.multiSort"
 						:no-data-text="loadedDrilldown.noDataText"
-						:parent-ref="parentTableRef"
 						:server="item.raw[itemChildrenKey]?.server"
 						:skeltonType="item.raw[itemChildrenKey]?.skeltonType"
 						:sort-by="loadedDrilldown.sortBy"
@@ -331,7 +334,10 @@ import {
 } from './slots';
 import { useEmitUpdatedExpanded } from './composables/emits';
 import { useMergeDeep } from './composables/helpers';
-import { useSetLoadedDrilldown } from './composables/loadedDrilldown';
+import {
+	useGetHeaderColumnWidths,
+	useSetLoadedDrilldown,
+} from './composables/loadedDrilldown';
 import { useTableClasses } from './composables/classes';
 import { useTableStyles } from './composables/styles';
 import {
@@ -367,6 +373,7 @@ const emit = defineEmits([
 const props = withDefaults(defineProps<Props>(), { ...AllProps });
 
 const slots = useSlots();
+const attrs = useAttrs();
 
 const tableType = shallowRef<TableType>(null);
 
@@ -394,7 +401,7 @@ const defaultDrilldownSettings = { ...props, ...loadedDrilldown };
 
 
 // -------------------------------------------------- Data //
-const parentTableRef = ref<string>('');
+const tableId = ref<string>(attrs['data-vdt-id'] as string ?? `v-drilldown-table-${Date.now()}`);
 const levelSearch = ref<string>('');
 const theme = useTheme();
 
@@ -410,6 +417,7 @@ const hidingNoData = computed(() => {
 	return loadedDrilldown.hideNoData;
 });
 
+
 // -------------------------------------------------- Watch //
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 watchOnce(props as any, () => {
@@ -420,13 +428,18 @@ watchOnce(props as any, () => {
 	loadedDrilldown.itemsPerPage = props.itemsPerPage;
 }, { immediate: false });
 
+
 watch(() => props.items, () => {
-	setLoadedDrilldown();
-});
+	if (!props.loading) {
+		setLoadedDrilldown();
+	}
+}, { deep: true });
 
-watch(() => props.loading, (value) => {
-	if (value) {
-		loadedDrilldown.loading = value;
+
+watch(() => props.loading, () => {
+	if (props.loading) {
+		loadedDrilldown.loading = props.loading;
+		return false;
 	}
 
 	setLoadedDrilldown();
@@ -484,12 +497,17 @@ function setLoadedDrilldown(): void {
 			level: props.level,
 			levels: props.levels,
 			loadedDrilldown,
+			matchColumnWidths: props.matchColumnWidths,
 			rawItem: props.item?.raw,
 		});
 		return;
 	}
 
 	loadedDrilldown = useMergeDeep(loadedDrilldown, props) as Props;
+
+	if (props.matchColumnWidths && loadedDrilldown?.columnWidths?.length === 0) {
+		loadedDrilldown.columnWidths = useGetHeaderColumnWidths({ tableId });
+	}
 }
 
 // -------------------------------------------------- Emit Events //

src/plugin/composables/loadedDrilldown.ts

@@ -1,12 +1,33 @@
 import {
 	Props,
+	UseGetHeaderColumnWidths,
 	UseSetLoadedDrilldown,
 } from '@/types';
 import { useMergeDeep } from './helpers';
 
 
+export const useGetHeaderColumnWidths: UseGetHeaderColumnWidths = (options) => {
+	const { tableId } = options;
+	const columnWidths = [] as number[];
+
+	const id = unref(tableId);
+
+	const domHeaders = document.querySelectorAll(`[data-vdt-id="${id}"] .v-drilldown-table--header-row-th-1`);
+
+	if (Object.keys(domHeaders).length > 0) {
+		for (let i = 0; i < domHeaders.length; i += 1) {
+			const column = domHeaders[i] as HTMLElement;
+
+			columnWidths.push(column.offsetWidth);
+		}
+	}
+
+	return columnWidths;
+};
+
+
 export const useSetLoadedDrilldown: UseSetLoadedDrilldown = (options) => {
-	const { loadedDrilldown, drilldown, rawItem, level, levels } = options;
+	const { drilldown, rawItem, level, levels, loadedDrilldown } = options;
 	let settings = loadedDrilldown;
 
 	settings = useMergeDeep(loadedDrilldown, drilldown) as Props;

src/plugin/slots/HeadersSlot.vue

@@ -114,15 +114,19 @@ const props = withDefaults(defineProps<HeaderSlotProps>(), {
 });
 
 const allSelectable = ref();
-const columns = computed<Column[]>(() => props.slotProps.columns);
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 const isAllSelected = ref<boolean>(false);
 const items = ref(props.items);
+const matchColumnWidths = ref<boolean>(props.matchColumnWidths);
+const columnWidths = ref<number[]>(props.columnWidths || []);
 const sortAscIcon = ref(props.sortAscIcon);
 const tableModelValue = computed(() => props.tableModelValue);
 const theme = useTheme();
 
 
+const columns = computed<Column[]>(() => checkColumnWidthUsage());
+
+
 watch(() => props.items, (newItems) => {
 	items.value = newItems;
 
@@ -139,6 +143,35 @@ const headerRowClasses = computed<object>(() => {
 	return useHeaderRowClasses({ level: props.level });
 });
 
+function checkColumnWidthUsage(): Column[] {
+	const cols = props.slotProps.columns;
+
+	if (props.level <= 1 || !matchColumnWidths.value) {
+		return cols;
+	}
+
+	if (columnWidths.value.length === 0) {
+		throw new Error('VDrilldownTable (matchColumnWidths): There was an issue getting the parent tables widths.');
+	}
+
+	// Attach the width to the column //
+	Object.entries(cols).forEach(([index]) => {
+
+		// ? Do not add width to the last row
+		// ? This can cause width issues if columns length differ
+		if (Object.keys(cols).length === parseInt(index) + 1) {
+			return;
+		}
+
+		// Only set the width if the user has not already set it //
+		if (typeof cols[index].width === 'undefined') {
+			cols[index].width = columnWidths.value[parseInt(index)] as number;
+		}
+	});
+
+	return cols;
+}
+
 
 // -------------------------------------------------- Header Row Cells //
 const cellAlignClasses = (align: string): object => {

src/plugin/utils/props.ts

@@ -32,6 +32,7 @@ export const AllProps = {
 		percentageChange: 25,
 		percentageDirection: 'desc',
 	}) as const,
+	columnWidths: () => ([]),
 	// customFilter: undefined, 											// ? Needs Testing
 	// customKeyFilter: undefined,										// ? Needs Testing
 	density: 'default',
@@ -59,7 +60,7 @@ export const AllProps = {
 	items: () => [],
 	itemsLength: 0,																		// ? Not sure if this will be used
 	itemsPerPage: 10,
-	// itemsPerPageText: '$vuetify.dataFooter.itemsPerPageText',	// * Works - Keep Commented Out
+	// itemsPerPageText: ',														// * Works - Keep Commented Out
 	// itemsPerPageOptions: [													// * Works - Keep Commented Out
 	// 	{
 	// 		title: '10',
@@ -91,6 +92,7 @@ export const AllProps = {
 	loaderType: 'linear',
 	loading: false,
 	loadingText: '$vuetify.dataIterator.loadingText',
+	matchColumnWidths: true,
 	multiSort: false,																	// ! Not sure if this is working correctly - Is binding prop
 	// nextIcon: '', 																	// * Works - Keep Commented Out
 	noDataText: '$vuetify.noDataText',

src/stores/props.ts

@@ -9,25 +9,25 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: '1px',
 			desc: `Sets the height for the linear progress loader. See <a href="${links.vuetify}/en/api/v-progress-linear/#props-height" target="_blank"><code class="inline-code">VProgressLinear</code></a> for more information.`,
-			name: 'loaderHeight',
+			name: 'loader-height',
 			type: 'VProgressLinear["$props"]["height"]',
 		},
 		{
 			default: 'default',
 			desc: `Sets the diameter of the circular progress loader circle in pixels. See <a href="${links.vuetify}/en/api/v-progress-circular/#props-size" target="_blank"><code class="inline-code">VProgressCircular</code></a> for more information.`,
-			name: 'loaderSize',
+			name: 'loader-size',
 			type: 'VProgressCircular["$props"]["size"]',
 		},
 		{
 			default: 'linear',
 			desc: 'Sets the type of loader. Available types are <code class="inline-code">linear</code>, <code class="inline-code">circular</code>, <code class="inline-code">text</code> and <code class="inline-code">skelton</code>. You can also use multiple loaders by passing an array of types. The order of the array determines the order of the loaders. To use the <a href="#slots-supported-loader"><code class="inline-code">loader</code></a> slot, set this prop to <code class="inline-code">null</code> or <code class="inline-code">false</code>.',
-			name: 'loaderType',
+			name: 'loader-type',
 			type: 'string | string[] | false | null',
 		},
 		{
 			default: 'heading@1',
 			desc: `The type of skelton loader to show. See <a href="${links.vuetify}/en/api/v-skeleton-loader/#props-type" target="_blank">Vuetify Skeleton Loader</a> for more information.`,
-			name: 'skeltonType',
+			name: 'skelton-type',
 			type: 'string',
 		},
 	];
@@ -40,6 +40,12 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'colors',
 			type: 'ColorsObject | null',
 		},
+		{
+			default: () => ([]),
+			desc: 'Internal use only. This holds the header cell widths when the <code class="inline-code">matchColumnWidths</code> prop is set.',
+			name: 'column-widths',
+			type: 'object',
+		},
 		{
 			default: () => ({}),
 			desc: 'Internal use only. This holds the drilldown tables data and settings.',
@@ -73,13 +79,13 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: undefined,
 			desc: 'Currently not supported',
-			name: 'groupBy',
+			name: 'group-by',
 			type: 'VDataTable["$props"]["groupBy"]',
 		},
 		{
 			default: false,
 			desc: 'Internal use only',
-			name: 'isDrilldown',
+			name: 'is-drilldown',
 			type: 'boolean',
 		},
 		{
@@ -91,13 +97,13 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: 'child',
 			desc: 'This is the key used to hold the drilldown data and settings in the item object.',
-			name: 'itemChildrenKey',
+			name: 'item-children-key',
 			type: 'string',
 		},
 		{
 			default: 0,
 			desc: `<code class="inline-code">VDataTableServer</code> specific prop. See <a href="${links.vuetify}/en/api/v-data-table-server/#props-items-length" target="_blank">items-length</a> prop for more information.`,
-			name: 'itemsLength',
+			name: 'items-length',
 			type: 'number',
 		},
 		{
@@ -118,10 +124,16 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'loading',
 			type: 'VDataTable["$props"]["loading"]',
 		},
+		{
+			default: false,
+			desc: 'Adjusts the width of the drilldown table header cells to match the parent table\'s header cell widths. In case you specify a width for the headers, that specific column\'s width will be utilized instead. Ideally, the column count of both tables should align for optimal results. However, if they don\'t, the last column will be disregarded and automatically set to the default width used by Vuetify\'s <code class="inline-code">VDataTable</code>/<code class="inline-code">VDataTableServer</code>.',
+			name: 'match-column-widths',
+			type: 'boolean',
+		},
 		{
 			default: true,
 			desc: 'Missing description in Vuetify docs. This prop <u>needs</u> to be set to <code class="inline-code">true</code> for the server table to function properly. Do not set this to <code class="inline-code">false</code>.',
-			name: 'returnObject',
+			name: 'return-object',
 			type: 'boolean | undefined',
 		},
 		{
@@ -133,19 +145,19 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: 750,
 			desc: 'The delay before the search filters the items',
-			name: 'searchDebounce',
+			name: 'search-debounce',
 			type: 'number | undefined | null',
 		},
 		{
 			default: 1000,
 			desc: 'The maximum time to wait before the search filters the items',
-			name: 'searchMaxWait',
+			name: 'search-max-wait',
 			type: 'number | undefined | null',
 		},
 		{
 			default: 'tbd',
 			desc: 'The <code class="inline-code">VTextField</code> props',
-			name: 'searchProps',
+			name: 'search-props',
 			type: 'SearchProps',
 		},
 		{
@@ -163,25 +175,25 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: true,
 			desc: 'Determines if the table should show the drilldown when loading',
-			name: 'showDrilldownWhenLoading',
+			name: 'show-drilldown-when-loading',
 			type: 'boolean',
 		},
 		{
 			default: false,
 			desc: 'Determines if the table should show the footer row, which by default shows the same values as the header row. To customize the footer row, use the <a href="#props-all-footers"><code class="inline-code">footers</code></a> prop.',
-			name: 'showFooterRow',
+			name: 'show-footer-row',
 			type: 'boolean',
 		},
 		{
 			default: false,
 			desc: 'Determines if the table should show the <code class="inline-code">VTextField</code> in the <code class="inline-code">top</code> slot',
-			name: 'showSearch',
+			name: 'show-search',
 			type: 'boolean',
 		},
 		{
 			default: 'VDataTable',
 			desc: 'Internal use only',
-			name: 'tableType',
+			name: 'table-type',
 			type: 'TableType',
 		},
 	];