Updating search field to have props and events passed to the component

Author: webdevnerdstuff

src/plugin/VDrilldownTable.vue

@@ -43,6 +43,8 @@
 				:items="loadedDrilldown.items"
 				:level="loadedDrilldown.level"
 				:loading="loadedDrilldown.loading"
+				:search-container-cols="loadedDrilldown.searchContainerCols"
+				:search-events="loadedDrilldown.searchEvents"
 				:search-props="loadedDrilldown.searchProps"
 				:show-search="loadedDrilldown.showSearch ?? false"
 				:slot-props="props"
@@ -594,24 +596,47 @@ function updatePage(val: Props['page']) {
 }
 
 // ------------ Search //
+const searchDebounce = {
+	debounce: loadedDrilldown.searchDebounce as number,
+	maxWait: loadedDrilldown.searchMaxWait as number,
+};
+
+// ? Using top.left slot //
 watchDebounced(
 	() => props.search,
 	() => {
-		levelSearch.value = props.search || '';
-
-		const options = updatedOptions(loadedDrilldown);
-		const drilldown = { ...props, ...options, ...{ search: levelSearch.value } };
-		const data = { drilldown, search: levelSearch.value };
-
-		optionsBus.emit(data);
-		emit('update:search', data);
+		searchUpdated();
 	},
-	{
-		debounce: loadedDrilldown.searchDebounce as number,
-		maxWait: loadedDrilldown.searchMaxWait as number,
+	searchDebounce,
+);
+
+// ? Not using top.left slot //
+watchDebounced(
+	levelSearch,
+	() => {
+		searchUpdated();
 	},
+	searchDebounce,
 );
 
+// Search - Updated //
+function searchUpdated() {
+	if (!slots['top.left']) {
+		loadedDrilldown.search = levelSearch.value;
+	}
+
+	if (slots['top.left']) {
+		levelSearch.value = props.search || '';
+	}
+
+	const options = updatedOptions(loadedDrilldown);
+	const drilldown = { ...props, ...options, ...{ search: levelSearch.value } };
+	const data = { drilldown, search: levelSearch.value };
+
+	optionsBus.emit(data);
+	emit('update:search', data);;
+}
+
 // ------------ Column Sorting //
 function updateSortBy(val: Props['sortBy']) {
 	loadedDrilldown.sortBy = val;

src/plugin/slots/TopSlot.vue

@@ -19,18 +19,15 @@
 			<v-col
 				v-else-if="showSearch"
 				class="d-flex align-center justify-end"
-				:class="searchFieldClasses"
+				:class="searchContainerCols"
 			>
 				<!-- =========================== Search -->
 				<v-text-field
 					v-if="showSearch"
+					v-bind="boundSearchProps"
 					v-model="levelSearch"
 					class="mt-0 pt-0"
-					:density="searchProps.density"
-					hide-details
-					label="Search"
-					single-line
-					:variant="searchProps.variant"
+					v-on="searchEvents"
 				></v-text-field>
 			</v-col>
 
@@ -44,11 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-	SearchProps,
-	SearchPropCols,
-	TopSlotProps,
-} from '@/types';
+import { TopSlotProps } from '@/types';
 import { componentName } from '@/plugin/utils/globals';
 import { watchDebounced } from '@vueuse/core';
 
@@ -59,20 +52,8 @@ const emit = defineEmits([
 	'update:search',
 ]);
 
-const props = withDefaults(defineProps<TopSlotProps>(), {
-	searchProps: () => ({
-		cols: {
-			lg: 3,
-			md: 6,
-			sm: 12,
-			xl: 3,
-			xs: 12,
-			xxl: 2,
-		},
-		density: 'comfortable',
-		variant: 'underlined',
-	})
-});
+const props = withDefaults(defineProps<TopSlotProps>(), {});
+
 
 const levelSearch = ref<string>('');
 const showTopContent = ref<boolean>(true);
@@ -131,18 +112,30 @@ watchDebounced(
 	{ debounce: 750, maxWait: 1000 },
 );
 
-const searchFieldClasses = computed<object>(() => {
-	const searchProps = props.searchProps as SearchProps;
-	const searchCols = searchProps.cols as SearchPropCols;
+const boundSearchProps = computed(() => {
+	return {
+		...{
+			density: 'compact',
+			hideDetails: true,
+			label: 'Search',
+			singleLine: true,
+			variant: 'underlined',
+		},
+		...props.searchProps,
+	};
+});
+
+const searchContainerCols = computed<object>(() => {
+	const col = props.searchContainerCols;
 
 	const classes = {
 		[`${componentName}--search-field`]: true,
-		[`v-col-${searchCols.xs}`]: searchCols.xs,
-		[`v-col-sm-${searchCols.sm}`]: searchCols.sm,
-		[`v-col-md-${searchCols.md}`]: searchCols.md,
-		[`v-col-lg-${searchCols.lg}`]: searchCols.lg,
-		[`v-col-xl-${searchCols.xl}`]: searchCols.xl,
-		[`v-col-xxl-${searchCols.xxl}`]: searchCols.xxl,
+		[`v-col-${col.xs}`]: true,
+		[`v-col-sm-${col.sm}`]: true,
+		[`v-col-md-${col.md}`]: true,
+		[`v-col-lg-${col.lg}`]: true,
+		[`v-col-xl-${col.xl}`]: true,
+		[`v-col-xxl-${col.xxl}`]: true,
 	};
 
 	return classes;

src/plugin/utils/props.ts

@@ -100,21 +100,19 @@ export const AllProps = {
 	page: 1,
 	returnObject: true,																// * Works - Needs to be set to `true`
 	// rowHeight: undefined,													// ? Doesn't seem to work
-	search: '',																				// ? Need to test this when top slot is used over showSearch prop
+	search: '',
+	searchContainerCols: () => ({
+		lg: 3,
+		md: 6,
+		sm: 12,
+		xl: 3,
+		xs: 12,
+		xxl: 2,
+	}),
 	searchDebounce: 750,
+	searchEvents: () => ({}),
 	searchMaxWait: 1000,
-	searchProps: () => ({
-		cols: {
-			lg: 3,
-			md: 6,
-			sm: 12,
-			xl: 3,
-			xs: 12,
-			xxl: 2,
-		},
-		density: 'comfortable',
-		variant: 'underlined',
-	}) as const,
+	searchProps: () => ({}),
 	selectStrategy: 'page' as const,
 	separator: 'default' as const,
 	server: false,

src/stores/props.ts

@@ -142,21 +142,40 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'search',
 			type: 'string | undefined',
 		},
+		{
+			default: `{
+				lg: 3,
+				md: 6,
+				sm: 12,
+				xl: 3,
+				xs: 12,
+				xxl: 2,
+			}`,
+			desc: 'Sets the cols prop of the <code class="inline-code">VCol</code> component that wraps the search input inside the <code class="inline-code"><a href="#slots-top-left">top.left</a></code> slot. This is useful if you want to change the width of the search input.',
+			name: 'search-container-cols',
+			type: 'string | undefined',
+		},
 		{
 			default: 750,
 			desc: 'The delay before the search filters the items',
 			name: 'search-debounce',
 			type: 'number | undefined | null',
 		},
+		{
+			default: undefined,
+			desc: 'Used to bind events to the <code class="inline-code">VTextField</code> used for the search field. You can see an example of how to do this in the Playground <code class="inline-code">tableDefaults.ts</code> file.',
+			name: 'search-events',
+			type: 'object',
+		},
 		{
 			default: 1000,
 			desc: 'The maximum time to wait before the search filters the items',
 			name: 'search-max-wait',
 			type: 'number | undefined | null',
 		},
 		{
-			default: 'tbd',
-			desc: 'The <code class="inline-code">VTextField</code> props',
+			default: undefined,
+			desc: 'Used to bind the props of the <code class="inline-code">VTextField</code> used for the search field',
 			name: 'search-props',
 			type: 'SearchProps',
 		},
@@ -186,7 +205,7 @@ export const usePropsStore = defineStore('props', () => {
 		},
 		{
 			default: false,
-			desc: 'Determines if the table should show the <code class="inline-code">VDrilldownTable</code> built in <code class="inline-code">VTextField</code> in the <code class="inline-code">top</code> slot. Limited <code class="inline-code">VTextField</code> props are supported. If you would like more customization of the search field, we suggest using the available <code class="inline-code"><a href="#slots-supported-top">top</a></code> or <code class="inline-code"><a href="#slots-top-left">top.left</a></code> slots.',
+			desc: 'Determines if the table should show the <code class="inline-code">VDrilldownTable</code> built in <code class="inline-code">VTextField</code> in the <code class="inline-code">top</code> slot. You can use the prop <code class="inline-code"><a href="#props-all-search-props">search-props</a></code> to customize the <code class="inline-code">VTextField</code>.',
 			name: 'show-search',
 			type: 'boolean',
 		},
@@ -198,7 +217,6 @@ export const usePropsStore = defineStore('props', () => {
 		},
 	];
 
-
 	return {
 		allProps,
 		tableLoaderProps,

src/types/index.ts

@@ -3,7 +3,7 @@
 import { CSSProperties, JSXComponent, StyleValue, MaybeRef } from 'vue';
 import { IconOptions, ThemeInstance } from 'vuetify';
 import type { EventBusKey } from '@vueuse/core';
-import type { VTextField, VProgressCircular, VProgressLinear } from 'vuetify/components';
+import type { VProgressCircular, VProgressLinear } from 'vuetify/components';
 import type { VDataTable, VDataTableServer, VDataTableRow } from 'vuetify/labs/components';
 
 
@@ -97,7 +97,7 @@ export type RGBColor = [number, number, number];
 
 
 // -------------------------------------------------- Search //
-export type SearchPropCols = {
+export type SearchContainerCols = {
 	lg?: number;
 	md?: number;
 	sm?: number;
@@ -106,28 +106,30 @@ export type SearchPropCols = {
 	xxl?: number;
 };
 
-export type SearchProps = {
-	cols?: SearchPropCols;
-	density?: VTextField['$props']['density'];
-	variant?: VTextField['$props']['variant'];
+export type SearchEvents<T = any> = {
+	[key: string]: T;
+};
+
+export type SearchProps<T = any> = {
+	[key: string]: T;
 };
 
 
 // -------------------------------------------------- Cell Rendering //
 interface CellRender {
 	(
-		key?: string,
 		column?: object,
 		index?: number,
+		key?: string,
 	): void;
 };
 
 interface ItemCellRender {
 	(
-		itemValue?: string,
-		item?: object,
 		column?: object,
 		index?: number,
+		item?: object,
+		itemValue?: string,
 	): void;
 };
 
@@ -204,7 +206,9 @@ export interface Props {
 	page?: VDataTable['$props']['page'];
 	returnObject?: VDataTable['$props']['returnObject'];
 	search?: string | undefined;
+	searchContainerCols?: SearchContainerCols;
 	searchDebounce?: number | undefined | null;
+	searchEvents?: SearchEvents;
 	searchMaxWait?: number | undefined | null;
 	searchProps?: SearchProps;
 	separator?: 'default' | 'horizontal' | 'vertical' | 'cell' | undefined;
@@ -266,6 +270,8 @@ export interface TopSlotProps extends VDataTableSlotProps {
 	items: Props['items'];
 	level: Props['level'];
 	loading: Props['loading'];
+	searchContainerCols: SearchContainerCols;
+	searchEvents?: SearchEvents;
 	searchProps?: SearchProps;
 	showSearch: boolean;
 };