Adding in binding props and events for the built in search field. Adding in binding props for the tableLoader

Author: webdevnerdstuff

src/playground/configs/templates/ClientTable.vue

@@ -29,6 +29,7 @@
 			:level="tableSettings.level"
 			:levels="tableSettings.levels"
 			:loader-height="tableSettings.loaderHeight"
+			:loader-props="tableSettings.loaderProps"
 			:loader-size="tableSettings.loaderSize"
 			:loader-type="tableSettings.loaderType"
 			:loading="tableSettings.loading"

src/playground/configs/templates/ServerTable.vue

@@ -29,14 +29,14 @@
 			:level="tableSettings.level"
 			:levels="tableSettings.levels"
 			:loader-height="tableSettings.loaderHeight"
+			:loader-props="tableSettings.loaderProps"
 			:loader-size="tableSettings.loaderSize"
 			:loader-type="tableSettings.loaderType"
 			:loading="tableSettings.loading"
 			:loading-text="tableSettings.loadingText"
 			:match-column-widths="tableSettings.matchColumnWidths"
 			:multi-sort="tableSettings.multiSort"
 			:next-icon="tableSettings.nextIcon"
-			:next-page-label="tableSettings.nextPageLabel"
 			:no-data-text="tableSettings.noDataText"
 			:page="tableSettings.page"
 			:page-text="tableSettings.pageText"

src/playground/configs/templates/tableDefaults.ts

@@ -21,13 +21,6 @@ export default {
 			bg: 'primary',
 			text: 'on-primary',
 		},
-		loader: {
-			// bg: '',
-			circular: 'primary',
-			color: 'primary',
-			linear: 'surface-variant',
-			text: 'surface-variant',
-		},
 		percentageChange: 25,
 		percentageDirection: 'desc',
 	},
@@ -87,21 +80,37 @@ export default {
 	// lastPageLabel: '$vuetify.dataFooter.lastPage',					// ? Doesn't seem to work - Vuetify prop
 	level: 1,
 	levels: 3,
-	loaderHeight: '2px',
-	loaderSize: 'default',
+	loaderProps: {
+		circular: {
+			bgColor: 'theme-surface',
+			color: 'primary',
+			indeterminate: true,
+		},
+		linear: {
+			color: 'surface-variant',
+			height: '2px',
+			indeterminate: true,
+		},
+		skelton: {
+			type: 'heading@1',
+		},
+		text: {
+			color: 'surface-variant',
+		},
+	},
 	loaderType: [
 		'linear',
 		// 'circular',
 		// 'text',
 		// 'skelton',
 	],
 	loading: false,
-	loadingText: '$vuetify.dataIterator.loadingText',
+	loadingText: 'Loading',
 	matchColumnWidths: false,
 	multiSort: false,
 	mustSort: false,
 	nextIcon: '$next',
-	nextPageLabel: '$vuetify.dataFooter.nextPage',						// ? Doesn't seem to work - Vuetify prop
+	// nextPageLabel: '$vuetify.dataFooter.nextPage',					// ? Doesn't seem to work - Vuetify prop
 	noDataText: '$vuetify.noDataText',
 	page: 1,
 	pageText: '$vuetify.dataFooter.pageText',
@@ -152,7 +161,6 @@ export default {
 	showFooterRow: false,
 	showSearch: false,
 	showSelect: false,
-	skeltonType: 'heading@1',
 	sortAscIcon: '$sortAsc',
 	sortBy: [],
 	// sticky: false,																					// ? Doesn't seem to work - Vuetify prop

src/plugin/VDrilldownTable.vue

@@ -73,14 +73,12 @@
 				:density="loadedDrilldown.density"
 				:items="loadedDrilldown.items"
 				:level="level"
+				:loader-props="loadedDrilldown.loaderProps"
 				:loader-settings="{
 					colspan: props.columns.length,
-					height: loadedDrilldown.loaderHeight,
 					loaderType: loadedDrilldown.loaderType,
 					loading: loadedDrilldown.loading,
 					loadingText: loadingText,
-					size: loadedDrilldown.loaderSize,
-					skeltonType: loadedDrilldown.skeltonType,
 				}"
 				:match-column-widths="loadedDrilldown.matchColumnWidths"
 				:select-strategy="loadedDrilldown.selectStrategy"
@@ -215,16 +213,14 @@
 						:items-per-page="item.raw[itemChildrenKey]?.itemsPerPage"
 						:level="level + 1"
 						:levels="loadedDrilldown.levels"
-						:loaderHeight="item.raw[itemChildrenKey]?.loaderHeight"
-						:loaderSize="item.raw[itemChildrenKey]?.loaderSize"
+						:loaderProps="item.raw[itemChildrenKey]?.loaderProps"
 						: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"
 						:server="item.raw[itemChildrenKey]?.server"
-						:skeltonType="item.raw[itemChildrenKey]?.skeltonType"
 						:sort-by="loadedDrilldown.sortBy"
 						:table-type="tableType"
 						@update:drilldown="emitUpdatedExpanded($event)"

src/plugin/components/TableLoader.vue

@@ -18,24 +18,15 @@
 					class="pa-0 ma-0"
 					:order="getOrder('linear')"
 				>
-					<v-progress-linear
-						:color="linearColor"
-						:height="loaderHeight"
-						indeterminate
-					></v-progress-linear>
+					<v-progress-linear v-bind="boundLinearProps"></v-progress-linear>
 				</v-col>
 
 				<v-col
 					v-if="checkLoaderType('circular')"
 					class="pa-0 my-2"
 					:order="getOrder('circular')"
 				>
-					<v-progress-circular
-						:bg-color="circularBackgroundColor"
-						:color="circularColor"
-						indeterminate
-						:size="size"
-					></v-progress-circular>
+					<v-progress-circular v-bind="boundCircularProps"></v-progress-circular>
 				</v-col>
 
 				<v-col
@@ -44,8 +35,8 @@
 					:order="getOrder('skelton')"
 				>
 					<v-skeleton-loader
+						v-bind="boundSkeltonProps"
 						:loading="skeltonLoading"
-						:type="currentSkeltonType"
 					>
 					</v-skeleton-loader>
 				</v-col>
@@ -73,7 +64,7 @@ import {
 	useLoaderTrStyles,
 	useLoaderVRowClasses,
 } from '@/plugin/composables/loader';
-import { useGetLevelColors } from '@/plugin/composables/levelColors';
+import { getSingleColor } from '@/plugin/composables/levelColors';
 
 
 const theme = useTheme();
@@ -86,19 +77,8 @@ const props = withDefaults(defineProps<TableLoader>(), {
 	textLoader: true,
 });
 
-const baseColors = computed(() => {
-	if (typeof props.colors === 'object' && props.colors !== null) {
-		return useGetLevelColors({
-			colors: props.colors,
-			level: props.level,
-			prop: 'loader',
-			themeColors: theme,
-		});
-	}
-
-	return;
-});
 
+// -------------------------------------------------- Classes & Styles //
 const loaderTrStyles = computed<StyleValue>(() => useLoaderTrStyles({
 	isLinearOnly,
 	loaderHeight,
@@ -113,13 +93,13 @@ const loaderContainerClasses = computed(() => useLoaderContainerClasses({ isLine
 const loaderVRowClasses = computed(() => useLoaderVRowClasses());
 
 
-// v-progress-linear //
-const linearColor = computed<string | undefined>(() => {
-	return baseColors.value?.linear || '';
-});
+// -------------------------------------------------- v-progress-linear //
+const boundLinearProps = computed(() => props.loaderProps.linear);
 
 const loaderHeight = computed(() => {
-	return useLoaderHeight(props.height as string | number);
+	const height = props.loaderProps.linear?.height || '2px';
+
+	return useLoaderHeight(height as string | number);
 });
 
 const isLinearOnly = computed<boolean>(() => {
@@ -133,30 +113,25 @@ const isLinearOnly = computed<boolean>(() => {
 });
 
 
-// v-progress-circular //
-const circularBackgroundColor = computed<string | undefined>(() => {
-	return baseColors.value?.bg;
-});
-
-const circularColor = computed<string | undefined>(() => {
-	return baseColors.value?.circular;
-});
+// -------------------------------------------------- v-progress-circular //
+const boundCircularProps = computed(() => props.loaderProps.circular);
 
 
-// v-skeleton-loader //
-const currentSkeltonType = computed<string>(() => {
-	return props.skeltonType || 'heading@1';
-});
+// -------------------------------------------------- v-skeleton-loader //
+const boundSkeltonProps = computed(() => props.loaderProps.skelton);
 
 const skeltonLoading = computed(() => {
 	return props.loading as boolean;
 });
 
 
-// loadingText //
+// -------------------------------------------------- loadingText //
 const textStyles = computed<StyleValue>(() => {
+	let textColor = props.loaderProps.text?.color || 'surface-variant';
+	textColor = getSingleColor(textColor, theme);
+
 	const styles = {
-		color: baseColors.value?.text,
+		color: textColor,
 	};
 
 	return styles;
@@ -167,6 +142,8 @@ const computedLoadingText = computed<string>(() => {
 });
 
 
+// -------------------------------------------------- Methods //
+
 // Get the order of the loader type //
 const getOrder = (type: string): number => {
 	const loaderType = props.loaderType;

src/plugin/composables/levelColors.ts

@@ -1,3 +1,4 @@
+import { ThemeInstance } from 'vuetify';
 import {
 	ColorsObject,
 	ConvertLevelColors,
@@ -48,6 +49,48 @@ const levelPercentage: LevelPercentage = (colors, level, direction) => {
 };
 
 
+/**
+ * Checks
+ */
+function checkDoNotConvert(color: string) {
+	return color === 'transparent' || color === 'none' || color === 'inherit' || color === 'currentColor' || color === 'initial' || color === 'unset';
+}
+
+function checkIfThemeVarColor(color: string) {
+	return color.includes('--v-theme');
+}
+
+function checkIfThemeColor(color: string, theme: ThemeInstance) {
+	const themeColors = theme.global.current.value.colors;
+
+	return Object.entries(themeColors).find(([key]) => {
+		return key === color;
+	});
+}
+
+
+/**
+ * Converts single color
+ */
+export const getSingleColor = (color: string, theme: ThemeInstance): string => {
+	if (checkDoNotConvert(color)) {
+		return color;
+	}
+
+	if (checkIfThemeVarColor(color)) {
+		return `rgb(var(${color}))`;
+	}
+
+	const isThemeColor = checkIfThemeColor(color, theme);
+
+	if (isThemeColor) {
+		return `hsl(${convertToHSL(isThemeColor[1])})`;
+	}
+
+	return `hsl(${convertToHSL(color)})`;
+};
+
+
 /**
  * Converts the colors to HSL values
  */
@@ -75,7 +118,7 @@ const convertLevelColors: ConvertLevelColors = (options) => {
 			}
 
 			// If color is a property that should not be converted, return the value //
-			if (color === 'transparent' || color === 'none' || color === 'inherit' || color === 'currentColor' || color === 'initial' || color === 'unset') {
+			if (checkDoNotConvert(color)) {
 				propOptionResponse[key as keyof LevelColorResponse] = color;
 				return;
 			}
@@ -86,7 +129,7 @@ const convertLevelColors: ConvertLevelColors = (options) => {
 			}
 
 			// If color is a theme variable, return the RGB with variable //
-			if (color.includes('--v-theme')) {
+			if (checkIfThemeVarColor(color)) {
 				propOptionResponse[key as keyof LevelColorResponse] = `rgb(var(${color}))`;
 				return;
 			}
@@ -383,7 +426,7 @@ export const useGetLevelColors: UseGetLevelColors = (options) => {
 
 	if (typeof colors !== 'object' || colors === null) {
 		console.trace();
-		throw new Error('The "colors" prop is set to false. This function should no be called.');
+		throw new Error('The "colors" prop is set to false. This function should not be called.');
 	}
 
 	const levelColorOptions = convertLevelColors({

src/plugin/slots/HeadersSlot.vue

@@ -75,11 +75,12 @@
 		:colspan="loaderSettings.colspan"
 		:height="loaderSettings.height"
 		:level="level"
+		:loader-props="loaderProps"
+		:loader-settings="loaderSettings"
 		:loader-type="loaderSettings.loaderType"
 		:loading="loaderSettings.loading || false"
 		:loading-text="loaderSettings.loadingText"
 		:size="loaderSettings.size"
-		:skelton-type="loaderSettings.skeltonType"
 	/>
 </template>