Fixing documentation and examples

Author: webdevnerdstuff

src/documentation/components/examples/ClientTable.vue

@@ -90,6 +90,7 @@ const props = defineProps({
 
 
 const classes = inject('classes');
+const colorsProp = ref(props.colors);
 const tableSettings = ref({ ...props.settings, ...props.colors });
 
 const headers = {
@@ -136,7 +137,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 235,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -157,7 +158,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 345,
+			width: 350,
 		},
 		{
 			align: 'start',
@@ -302,7 +303,7 @@ function fetchClientData(drilldown = null) {
 		user.child = {};
 		user.child = {
 			...tableDefaults,
-			colors: null,
+			...colorsProp.value,
 			drilldownKey: 'id',
 			footers: footers.posts,
 			headers: headers.posts,
@@ -312,6 +313,7 @@ function fetchClientData(drilldown = null) {
 		};
 	}
 
+
 	// Comments Level 3 //
 	if (drilldown?.level === 2) {
 		userId = item.userId;
@@ -329,7 +331,7 @@ function fetchClientData(drilldown = null) {
 		post.child = {};
 		post.child = {
 			...tableDefaults,
-			colors: null,
+			...colorsProp.value,
 			drilldownKey: 'id',
 			footers: footers.comments,
 			headers: headers.comments,

src/documentation/components/examples/ServerTable.vue

@@ -136,7 +136,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 235,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -157,7 +157,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 345,
+			width: 350,
 		},
 		{
 			align: 'start',
@@ -345,6 +345,7 @@ function getUserPosts(drilldown = null, updateCurrentLevel = false) {
 			itemsPerPage: drilldown?.itemsPerPage ?? 0,
 			level: 2,
 			loading: true,
+			server: true,
 			sortBy: [],
 		},
 	});
@@ -404,6 +405,7 @@ function getPostComments(drilldown = null, updateCurrentLevel = false) {
 			itemsPerPage: drilldown?.itemsPerPage ?? 0,
 			level: 3,
 			loading: true,
+			server: true,
 			sortBy: [],
 		},
 	});

src/documentation/sections/ExampleSection.vue

@@ -24,6 +24,7 @@
 
 
 		<ClientTable
+			:colors="{ colors: null }"
 			:settings="tableSettings"
 			title="Client Side Data Table"
 		/>

src/documentation/sections/PropsSection.vue

@@ -124,7 +124,7 @@ const classes = inject('classes');
 const codeBlockSettings = computed(() => props.codeBlockOptions);
 const propsStore = usePropsStore();
 const store = useCoreStore();
-const tableSettings = ref({ ...tableDefaults });
+
 
 const colorsProp = {
 	colors: {
@@ -158,6 +158,8 @@ const colorsProp = {
 	}
 };
 
+const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
+
 const colorsPropCode = `colors: {
   body: {
     base: '--v-theme-surface',

src/playground/configs/templates/ClientTable.vue

@@ -268,7 +268,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 235,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -289,7 +289,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 345,
+			width: 350,
 		},
 		{
 			align: 'start',

src/playground/configs/templates/ServerTable.vue

@@ -130,7 +130,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 235,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -151,7 +151,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 345,
+			width: 350,
 		},
 		{
 			align: 'start',

src/playground/configs/templates/tableDefaults.ts

@@ -1,5 +1,6 @@
 export default {
 	// color: 'primary',																			// ? Doesn't seem to work
+	// colors: null,
 	colors: {
 		body: {
 			base: '--v-theme-surface',
@@ -123,13 +124,14 @@ export default {
 		variant: 'underlined',
 	},
 	selectStrategy: 'page',
+	separator: 'default',
 	server: false,
 	showCurrentPage: false,
 	showDrilldownWhenLoading: true,
 	showExpand: false,
-	showFooterRow: true,
+	showFooterRow: false,
 	showSearch: false,
-	showSelect: false,
+	showSelect: true,
 	skeltonType: 'heading@1',
 	sortAscIcon: '$sortAsc',
 	sortBy: [],