fix(KtTable): fix styling issues with the table

- add spacing to header to make it properly center-aligned if sorting indicator is present - show inline loading state if rows are present - mark selected rows - improve layout of row actions
3YOURMIND · Dec 28, 2024 · a41b24f · a41b24f
1 parent e554f4c
commit a41b24f
Show file tree

Hide file tree

Showing 14 changed files with 209 additions and 105 deletions.
diff --git a/packages/documentation/components/YocoPreview.vue b/packages/documentation/components/YocoPreview.vue
@@ -95,6 +95,10 @@ export default defineComponent({
 	background: #f8f8f8;
 	box-shadow: 0 2px 2px #ddd;
 
+	.yoco {
+		border: 1px dashed var(--gray-20);
+	}
+
 	.size-1,
 	.size-3 {
 		opacity: 1;

diff --git a/packages/documentation/pages/usage/components/table.vue b/packages/documentation/pages/usage/components/table.vue
@@ -61,17 +61,13 @@
 				v-if="booleanFlags.isEmpty && booleanFlags.showEmptySlot"
 				#empty
 			>
-				<img
-					src="https://usagif.com/wp-content/uploads/2021/4fh5wi/pepefrg-33.gif"
-				/>
+				<img src="https://picsum.photos/400/150" />
 			</template>
 			<template
 				v-if="booleanFlags.isLoading && booleanFlags.showLoadingSlot"
 				#loading
 			>
-				<img
-					src="https://usagif.com/wp-content/uploads/2021/4fh5wi/pepefrg-54.gif"
-				/>
+				<img src="https://picsum.photos/400/150" />
 			</template>
 			<template #expanded-row>
 				<div>Expanded content</div>
@@ -87,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, defineComponent, h, ref, watch } from 'vue'
 
 import {
 	createColumnContext,
@@ -109,6 +105,7 @@ import ComponentInfo from '~/components/ComponentInfo.vue'
 type ColumnId =
 	| 'age'
 	| 'bestSkill'
+	| 'id'
 	| 'isAlive'
 	| 'lifespan'
 	| 'name'
@@ -254,20 +251,27 @@ export default defineComponent({
 			computed(() => ({
 				columns: [
 					createColumn({
-						// display: getCustomDisplay<TableRow>({
-						// 	align: 'left',
-						// 	disableCellClick: true,
-						// 	isNumeric: false,
-						// 	render: (value) => {
-						// 		return h('div', {}, [
-						// 			h('em', { style: { color: 'green' } }, value.id),
-						// 			` ${value.name} is `,
-						// 			h('b', {}, value.age),
-						// 		])
-						// 	},
-						// }),
-						display: getDisplay({ minimumDecimalPlaces: 1, type: 'numerical' }),
-						getData: (row) => row.age,
+						display: getDisplay({ type: 'integer' }),
+						getData: (row) => row.id,
+						id: 'id',
+						isSortable: true,
+						label: '# Id',
+					}),
+					createColumn({
+						display: getCustomDisplay<TableRow>({
+							align: 'left',
+							disableCellClick: true,
+							isNumeric: false,
+							render: (value) => {
+								return h('div', {}, [
+									h('em', { style: { color: 'green' } }, value.id),
+									` ${value.name} is `,
+									h('b', {}, value.age),
+								])
+							},
+							sortBehavior: 'asc-desc',
+						}),
+						getData: (row) => row,
 						id: 'age',
 						isSortable: true,
 						label: 'age (click disabled)',
@@ -282,49 +286,46 @@ export default defineComponent({
 					}),
 					createColumn({
 						display: getCustomDisplay({
-							align: 'right',
+							align: 'center',
 							disableCellClick: false,
 							isNumeric: false,
 							render: (value: string) => value.replaceAll('e', 'x'),
+							sortBehavior: 'asc-desc',
 						}),
 						getData: (row) => row.lifespan,
 						id: 'lifespan',
 						isSortable: true,
 						label: 'Lifespan (click allowed)',
-						maxWidth: '100px',
 					}),
-					...(booleanFlags.value.hasDragAndDrop
-						? [
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.name,
-									id: 'name',
-									isSortable: true,
-									label: 'Name',
-								}),
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.purpose,
-									id: 'purpose',
-									isSortable: true,
-									label: 'Primary Purpose',
-								}),
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.speed,
-									id: 'speed',
-									isSortable: true,
-									label: 'Speed',
-								}),
-								createColumn({
-									display: dateDisplay,
-									getData: (row) => new Date(row.someDate),
-									id: 'randomDate',
-									isSortable: true,
-									label: 'Random Date',
-								}),
-							]
-						: []),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.name,
+						id: 'name',
+						isSortable: true,
+						label: 'Name',
+					}),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.purpose,
+						id: 'purpose',
+						isSortable: true,
+						label: 'Primary Purpose',
+					}),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.speed,
+						id: 'speed',
+						isSortable: true,
+						label: 'Speed',
+						maxWidth: '120px',
+					}),
+					createColumn({
+						display: dateDisplay,
+						getData: (row) => new Date(row.someDate),
+						id: 'randomDate',
+						isSortable: true,
+						label: 'Random Date',
+					}),
 					createColumn({
 						display: textDisplay,
 						getData: (row) => row.bestSkill,
@@ -400,6 +401,7 @@ export default defineComponent({
 				age: (mode) => getNumericalSorter<TableRow>((row) => row.age, mode),
 				bestSkill: (mode) =>
 					getTextSorter<TableRow>((row) => row.bestSkill, mode),
+				id: (mode) => getNumericalSorter<TableRow>((row) => row.id, mode),
 				isAlive: (mode) =>
 					getNumericalSorter<TableRow>((row) => (row.isAlive ? 1 : 0), mode),
 				lifespan: (mode) =>
@@ -449,7 +451,6 @@ export default defineComponent({
 					label: 'table has drag and drop',
 				},
 				{
-					isDisabled: booleanFlags.value.isLoading,
 					key: 'isEmpty',
 					label: 'table is empty',
 				},
@@ -462,11 +463,10 @@ export default defineComponent({
 						]
 					: []),
 				{
-					isDisabled: booleanFlags.value.isEmpty,
 					key: 'isLoading',
 					label: 'table is loading',
 				},
-				...(booleanFlags.value.isLoading
+				...(booleanFlags.value.isLoading && booleanFlags.value.isEmpty
 					? [
 							{
 								key: 'showLoadingSlot',

diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
@@ -5,7 +5,7 @@
 	},
 	"dependencies": {
 		"@3yourmind/vue-use-tippy": "3.x",
-		"@3yourmind/yoco": "^2.8.0",
+		"@3yourmind/yoco": "^2.9.0",
 		"@metatypes/typography": "^0.5.0",
 		"@tanstack/table-core": "^8.20.5",
 		"big.js": "^6.2.1",

diff --git a/packages/kotti-ui/source/globals.d.ts b/packages/kotti-ui/source/globals.d.ts
@@ -18,6 +18,7 @@ declare module '@tanstack/table-core' {
 		cellClasses: Record<string, boolean> | string
 		disableCellClick: boolean
 		headerClasses: Record<string, boolean> | string
+		sortBehavior: 'asc-desc' | 'desc-asc'
 		style?: Record<string, string>
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-style/_loadings.scss b/packages/kotti-ui/source/kotti-style/_loadings.scss
@@ -14,6 +14,20 @@
 	}
 }
 
+@keyframes skeleton-loading-reduced {
+	0% {
+		background: $lightgray-300;
+	}
+
+	50% {
+		background: $lightgray-400;
+	}
+
+	100% {
+		background: $lightgray-300;
+	}
+}
+
 %skeleton-style {
 	box-sizing: border-box;
 	display: block;
@@ -65,6 +79,12 @@
 	}
 }
 
+@media (prefers-reduced-motion) {
+	.skeleton {
+		animation-name: skeleton-loading-reduced !important;
+	}
+}
+
 // Spin Loading
 
 @keyframes loading {