Update docs

Author: webdevnerdstuff

src/documentation/DocsPage.vue

@@ -141,7 +141,9 @@ provide('classes', classes);
 </script>
 
 <style lang="scss" scoped>
+:deep(pre),
 :deep(code) {
+	&.ic,
 	&.inline-code {
 		background-color: rgba(255, 255, 255, 0.1) !important;
 		border-radius: 3px;
@@ -154,7 +156,9 @@ provide('classes', classes);
 
 <style lang="scss">
 .v-theme--light {
+	pre,
 	code {
+		&.ic,
 		&.inline-code {
 			background-color: rgba(0, 0, 0, 0.1) !important;
 		}

src/documentation/components/examples/ClientTable.vue

@@ -12,9 +12,12 @@
 		</h3>
 	</v-col>
 
+
+
+
 	<v-col cols="12">
 		<VDrilldownTable
-			:colors="tableSettings.colors"
+			:default-colors="tableSettings?.defaultColors ?? {}"
 			:density="tableSettings.density"
 			:drilldown-key="tableSettings.drilldownKey"
 			:elevation="tableSettings.elevation"
@@ -67,10 +70,6 @@ import tableDefaults from '@/playground/configs/templates/tableDefaults';
 
 
 const props = defineProps({
-	colors: {
-		default: () => { },
-		type: Object,
-	},
 	sectionId: {
 		default: 'example-data-table',
 		type: String,
@@ -87,8 +86,7 @@ const props = defineProps({
 
 
 const classes = inject('classes');
-const colorsProp = ref(props.colors);
-const tableSettings = ref({ ...props.settings, ...props.colors });
+const tableSettings = ref({ ...props.settings });
 
 const headers = {
 	comments: [
@@ -180,89 +178,6 @@ const headers = {
 		},
 	],
 };
-const footers = {
-	comments: [
-		{
-			align: 'start',
-			key: '',
-			title: '',
-			width: 100,
-		},
-		{
-			align: 'start',
-			key: 'postId',
-			title: 'Post ID',
-			width: 100,
-		},
-		{
-			align: 'start',
-			key: 'id',
-			title: 'Comment ID',
-			width: 150,
-		},
-		{
-			align: 'start',
-			key: 'name',
-			title: 'Comment',
-		},
-		{
-			key: 'data-table-expand',
-			title: '',
-		},
-	],
-	posts: [
-		{
-			align: 'start',
-			key: 'userId',
-			title: 'User ID',
-			width: 100,
-		},
-		{
-			align: 'start',
-			key: 'id',
-			title: 'Post ID',
-			width: 250,
-		},
-		{
-			align: 'start',
-			key: 'title',
-			title: 'Post',
-		},
-		{
-			key: 'data-table-expand',
-			title: '',
-		},
-	],
-	users: [
-		// {
-		// 	key: 'data-table-select',
-		// 	title: '',
-		// },
-		{
-			align: 'start',
-			key: 'id',
-			renderFooter() {
-				return '&nbsp;';
-			},
-			title: 'User ID',
-			width: 350,
-		},
-		{
-			align: 'start',
-			key: 'name',
-			title: 'Name',
-		},
-		{
-			align: 'start',
-			key: 'email',
-			title: 'Email',
-		},
-		{
-			key: 'data-table-expand',
-			title: '',
-		},
-	],
-};
 
 
 onMounted(() => {
@@ -300,9 +215,7 @@ function fetchClientData(drilldown = null) {
 		user.child = {};
 		user.child = {
 			...tableDefaults,
-			...colorsProp.value,
 			drilldownKey: 'id',
-			footers: footers.posts,
 			headers: headers.posts,
 			level: 2,
 			loading: true,
@@ -328,9 +241,7 @@ function fetchClientData(drilldown = null) {
 		post.child = {};
 		post.child = {
 			...tableDefaults,
-			...colorsProp.value,
 			drilldownKey: 'id',
-			footers: footers.comments,
 			headers: headers.comments,
 			itemsPerPage: tableSettings.value.itemsPerPage,
 			level: 3,

src/documentation/components/examples/ServerTable.vue

@@ -20,7 +20,6 @@
 
 	<v-col cols="12">
 		<VDrilldownTable
-			:colors="tableSettings.colors"
 			:density="tableSettings.density"
 			:drilldown-key="tableSettings.drilldownKey"
 			:elevation="tableSettings.elevation"
@@ -334,7 +333,6 @@ function getUserPosts(drilldown = null, updateCurrentLevel = false) {
 	user.child = Object.assign({}, {
 		...user.child,
 		...{
-			colors: null,
 			drilldownKey: 'id',
 			footers: footers.posts,
 			headers: headers.posts,
@@ -394,7 +392,6 @@ function getPostComments(drilldown = null, updateCurrentLevel = false) {
 	post.child = Object.assign({}, {
 		...post.child,
 		...{
-			colors: null,
 			drilldownKey: 'id',
 			footers: footers.comments,
 			headers: headers.comments,

src/documentation/sections/DrilldownEventSection.vue

@@ -184,7 +184,6 @@ const drilldownEventObject = `{
       "value": -1
     }
   ],
-  "colors": null,
   "density": "compact",
   "drilldownKey": "id",
   "elevation": 5,

src/documentation/sections/ExampleSection.vue

@@ -24,7 +24,6 @@
 
 
 		<ClientTable
-			:colors="{ colors: null }"
 			:settings="tableSettings"
 			title="Client Side Data Table"
 		/>
@@ -43,7 +42,7 @@ import {
 
 
 const classes = inject('classes');
-const tableSettings = ref({ ...tableDefaults, ...{ colors: null } });
-const tableSettingsServer = ref({ ...tableDefaults, ...{ colors: null, server: true } });
+const tableSettings = ref({ ...tableDefaults });
+const tableSettingsServer = ref({ ...tableDefaults, ...{ server: true } });
 
 </script>

src/documentation/sections/subSections/ColorsProp.vue

@@ -8,24 +8,22 @@
 				:class="classes.headerA"
 				href="#props-colors"
 			>#</a>
-			Colors Prop
+			Color Props
 		</h3>
 	</v-col>
 
 	<v-col cols="12">
-		To make things easier for the user to distinguish the different levels of a table, there is the
-		<a href="#props-all-colors"><code class="inline-code">colors</code></a> prop. While the main
-		<a href="#examples">examples</a> are a base configuration with no colors, it is suggested to add the colors to the
-		table to make it easier on the end user's readability.
+		To make things easier for the user to distinguish the different levels of a table, there are a few color props that
+		can be utilized. While the main <a href="#examples">examples</a> are a base configuration with no colors, it is
+		suggested to add the colors to the table to make it easier on the end user's readability.
 	</v-col>
 
 	<v-col cols="12">
-		With these settings you can adjust the percentage change of the header row <code class="inline-code">colors</code>
-		as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can also set the
-		percentage change to 0 to keep the same color for each level. Each level has the capability to have it's own <code
-			class="inline-code"
-		>colors</code> settings as well, you just have to adjust the settings being passed into the specific level inside of
-		the <code class="inline-code">child</code> object of the item being drilled down into.
+		With these settings you can adjust the percentage change of the header and footer row colors, as well as the bottom
+		border color as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can
+		also set the percentage change to 0 to keep the same color for each level. Each level has the capability to have it's
+		own <code class="inline-code">colors</code> settings as well, you just have to adjust the settings being passed into
+		the specific level inside of the <code class="inline-code">child</code> object of the item being drilled down into.
 	</v-col>
 
 	<v-col cols="12">
@@ -36,18 +34,17 @@
 	</v-col>
 
 	<v-col cols="12">
-		If you opt not to utilize the <a href="#props-all-colors"><code class="inline-code">colors</code></a> prop but still
-		wish to customize the table's appearance, you can take advantage of various CSS classes embedded within the tables.
-		These classes are designed with different levels, allowing you to selectively target specific elements within the
-		tables for styling purposes.
+		If you opt not to utilize the color props but still wish to customize the table's appearance, you can take advantage
+		of various CSS classes embedded within the tables. These classes are designed with different levels, allowing you to
+		selectively target specific elements within the tables for styling purposes.
 	</v-col>
 
 	<v-col cols="12">
 		Each of the color settings accept Vuetify theme color names or variables, HEX, RGB, HSL, and CSS color names.
 	</v-col>
 
 	<v-col cols="12">
-		The follow settings are the recommended settings to start with:
+		The following <code class="ic">default-colors</code> prop setting is recommended to start with:
 	</v-col>
 
 	<v-col cols="12">
@@ -60,12 +57,39 @@
 		/>
 	</v-col>
 
-	<ClientTable
-		:colors="colorsProp"
-		section-id="props-colors-example"
-		:settings="tableSettings"
-		title="Table with Colors Example"
-	/>
+	<v-col
+		id="props-colors-example"
+		cols="12"
+	>
+		<h3 :class="classes.h3">
+			<a
+				:class="classes.headerA"
+				href="#props-colors-example"
+			>#</a>
+			Table with Colors Example
+		</h3>
+	</v-col>
+
+	<v-col cols="12">
+		<v-btn-toggle
+			v-model="selectedColor"
+			density="compact"
+		>
+			<v-btn
+				v-for="color in colors"
+				:key="color"
+				:active="headerBackgroundColor === color"
+				:color="headerBackgroundColor === color ? color : ''"
+				size="small"
+				:value="color"
+				@click="updateColor(color)"
+			>
+				{{ color }}
+			</v-btn>
+		</v-btn-toggle>
+	</v-col>
+
+	<ClientTable :settings="tableSettings" />
 </template>
 
 
@@ -83,41 +107,33 @@ const props = defineProps({
 
 const classes = inject('classes');
 const codeBlockSettings = computed(() => props.codeBlockOptions);
-
-const colorsProp = {
-	colors: {
-		footer: {
-			background: '--v-theme-surface',
-			color: '--v-theme-on-surface',
-		},
-		header: {
-			background: 'primary',
-			color: 'on-primary',
-		},
-		percentageChange: 25,
-		percentageDirection: 'desc',
-		table: {
-			bottomBorder: 'primary',
-		},
-	}
+const colors = ref(['primary', 'secondary', 'success', 'info', 'warning', 'error']);
+const headerBackgroundColor = ref('primary');
+const selectedColor = ref('primary');
+
+const defaultColors = {
+	background: 'primary',
+	border: 'primary',
+	color: 'on-primary',
 };
 
-const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
-
-const colorsPropCode = `colors: {
-  footer: {
-    background: '--v-theme-surface',
-    text: '--v-theme-on-surface',
-  },
-  header: {
-    background: 'primary',
-    text: 'on-primary',
-  },
-  percentageChange: 25,
-  percentageDirection: 'desc',
-  table: {
-    bottomBorder: 'primary',
-  },
-}`;
+const tableSettings = ref({ ...tableDefaults, ...{ defaultColors } });
+
+const colorsPropCode = `{
+  background: 'primary',
+  border: 'primary',
+  color: 'on-primary',
+}"`;
+
+function updateColor(val) {
+	tableSettings.value.defaultColors.color = val;
+
+	if (val) {
+		tableSettings.value.defaultColors.color = `on-${val}`;
+	}
 
+	headerBackgroundColor.value = val;
+	tableSettings.value.defaultColors.background = val;
+	tableSettings.value.defaultColors.border = val ?? 'accent';
+}
 </script>