Adjusting colors prop

Author: webdevnerdstuff

src/plugin/composables/levelColors.ts

@@ -123,8 +123,8 @@ const convertLevelColors: ConvertLevelColors = (options) => {
 				return;
 			}
 
-			// Top Level and text should always be set to 100% //
-			if (key === 'text' || level === 0 && (direction === 'asc' as keyof ColorsObject)) {
+			// Top Level and text color should always be set to 100% //
+			if (key === 'color' || level === 0 && (direction === 'asc' as keyof ColorsObject)) {
 				percentage = 100;
 			}
 

src/plugin/composables/styles.ts

@@ -10,13 +10,13 @@ import {
 // -------------------------------------------------- VDrilldownTable //
 export const useTableStyles: UseTableStyles = (options) => {
 	const { colors, level, theme } = options;
-	let baseColors: { border?: string; } = {};
+	let baseColors: { bottomBorder?: string; } = {};
 
 	if (typeof colors === 'object' && colors !== null) {
 		baseColors = useGetLevelColors({
 			colors,
 			level,
-			prop: 'default',
+			prop: 'table',
 			themeColors: theme,
 		});
 	}
@@ -25,8 +25,8 @@ export const useTableStyles: UseTableStyles = (options) => {
 		borderBottom: 'none',
 	};
 
-	if (baseColors.border) {
-		styles.borderBottom = `1px solid ${baseColors.border}`;
+	if (baseColors.bottomBorder) {
+		styles.borderBottom = `1px solid ${baseColors.bottomBorder}`;
 	}
 
 	return styles;
@@ -62,8 +62,8 @@ export const useHeaderCellStyles: UseHeaderCellStyles = (options) => {
 		themeColors: theme,
 	});
 
-	styles.backgroundColor = headerColors.bg;
-	styles.color = headerColors.text;
+	styles.backgroundColor = headerColors.background;
+	styles.color = headerColors.color;
 
 	return styles as CSSProperties;
 };
@@ -85,8 +85,8 @@ export const useTFootCellStyles: UseTFootCellStyles = (options) => {
 	});
 
 	const styles = {
-		backgroundColor: baseColors.bg,
-		color: baseColors.text,
+		backgroundColor: baseColors.background,
+		color: baseColors.color,
 	};
 
 	return styles as CSSProperties;

src/plugin/utils/props.ts

@@ -4,21 +4,24 @@ export const AllProps = {
 	// color: 'primary',															// ? Doesn't seem to work
 	colors: () => ({
 		default: {
+			background: 'primary',
 			base: 'primary',
-			bg: 'primary',
 			border: 'primary',
-			text: 'on-primary',
+			color: 'on-primary',
 		},
 		footer: {
-			bg: '--v-theme-surface',
-			text: '--v-theme-on-surface',
+			background: '--v-theme-surface',
+			color: '--v-theme-on-surface',
 		},
 		header: {
-			bg: 'primary',
-			text: 'on-primary',
+			background: 'primary',
+			color: 'on-primary',
 		},
 		percentageChange: 15,
 		percentageDirection: 'desc',
+		table: {
+			bottomBorder: 'primary',
+		},
 	}) as const,
 	columnWidths: () => ([]),
 	// customFilter: undefined, 											// ? Needs Testing

src/types/index.ts

@@ -60,29 +60,32 @@ export interface TableColors<T = any> {
 export type ColorsObject = {
 	default?: {
 		base?: string;
-		bg?: string;
+		background?: string;
 		border?: string | null;
-		text?: string;
+		color?: string;
 	};
 	footer?: {
-		bg?: string;
-		text?: string;
+		background?: string;
+		color?: string;
 	};
 	header?: {
-		bg?: string;
-		text?: string;
+		background?: string;
+		color?: string;
 	};
 	percentageChange?: number;
 	percentageDirection?: 'asc' | 'desc';
+	table?: {
+		bottomBorder?: string;
+	};
 };
 
 export type LevelColorResponse = {
+	background?: string;
 	base?: string;
-	bg?: string;
-	border?: string;
+	bottomBorder?: string;
 	circular?: string;
+	color?: string;
 	linear?: string;
-	text?: string;
 };
 
 export type HEXColor = string;