Updating playground examples with search stuff

Author: webdevnerdstuff

src/playground/configs/templates/ClientTable.vue

@@ -41,8 +41,11 @@
 			:page-text="tableSettings.pageText"
 			:prev-icon="tableSettings.prevIcon"
 			:search="tableSettings.search"
+			:search-container-cols="tableSettings.searchContainerCols"
 			:search-debounce="tableSettings.searchDebounce"
+			:search-events="tableSettings.searchEvents"
 			:search-max-wait="tableSettings.searchMaxWait"
+			:search-props="tableSettings.searchProps"
 			:select-strategy="tableSettings.selectStrategy"
 			:separator="tableSettings.separator"
 			:server="tableSettings.server"
@@ -70,7 +73,7 @@
 				[top Slot]
 			</template> -->
 
-			<!-- <template #[`top.left`]="{ props }">
+			<!-- <template #[`top.left`]="props">
 				<v-col
 					v-if="props.level === 1"
 					cols="4"

src/playground/configs/templates/ServerTable.vue

@@ -42,8 +42,10 @@
 			:page-text="tableSettings.pageText"
 			:prev-icon="tableSettings.prevIcon"
 			:search="tableSettings.search"
+			:search-container-cols="tableSettings.searchContainerCols"
 			:search-debounce="tableSettings.searchDebounce"
 			:search-max-wait="tableSettings.searchMaxWait"
+			:search-props="tableSettings.searchProps"
 			:select-strategy="tableSettings.selectStrategy"
 			:separator="tableSettings.separator"
 			:server="tableSettings.server"
@@ -72,7 +74,7 @@
 				[top Slot]
 			</template> -->
 
-			<!-- <template #[`top.left`]="{ props }">
+			<!-- <template #[`top.left`]="props">
 				<v-col
 					v-if="props.level === 1"
 					cols="4"

src/playground/configs/templates/tableDefaults.ts

@@ -109,18 +109,38 @@ export default {
 	// prevPageLabel: '$vuetify.dataFooter.prevPage',					// ? Doesn't seem to work - Vuetify prop
 	// rowHeight: undefined,																	// ? Doesn't seem to work - Vuetify prop
 	search: '',
+	searchContainerCols: {
+		lg: 3,
+		md: 6,
+		sm: 12,
+		xl: 3,
+		xs: 12,
+		xxl: 2,
+	},
 	searchDebounce: 750,
+	searchEvents: {
+		// 'input': (e: InputEvent) => {
+		// 	console.log('input event triggered', e);
+		// },
+		// 'click': (e: MouseEvent) => {
+		// 	console.log('click event triggered', e);
+		// },
+		// 'click:control': (e: MouseEvent) => {
+		// 	console.log('click:control event triggered', e);
+		// },
+		// 'mousedown:control': (e: MouseEvent) => {
+		// 	console.log('mousedown:control event triggered', e);
+		// },
+		// 'update:modelValue': (val: string) => {
+		// 	console.log('update:modelValue event triggered', val);
+		// },
+	},
 	searchMaxWait: 1000,
-	searchProps: {																						// ? Needs Testing
-		cols: {
-			lg: 3,
-			md: 6,
-			sm: 12,
-			xl: 3,
-			xs: 12,
-			xxl: 2,
-		},
+	searchProps: {
+		clearable: true,
+		color: 'primary',
 		density: 'compact',
+		prependInnerIcon: 'mdi mdi-magnify',
 		variant: 'underlined',
 	},
 	selectStrategy: 'page',
@@ -131,7 +151,7 @@ export default {
 	showExpand: false,
 	showFooterRow: false,
 	showSearch: false,
-	showSelect: true,
+	showSelect: false,
 	skeltonType: 'heading@1',
 	sortAscIcon: '$sortAsc',
 	sortBy: [],