@cnamts/synapse 1.0.14 → 1.0.16

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -5,10 +5,9 @@
 	import SyTableFilter from '../common/SyTableFilter.vue'
 	import TableHeader from '../common/TableHeader.vue'
 	import SyTablePagination from '../common/SyTablePagination.vue'
-	import { processItems } from '../common/formatters'
 	import { locales } from '../common/locales'
 	import { useTableProps } from '../common/tableProps'
-	import type { DataOptions, SyServerTableProps } from '../common/types'
+	import type { DataOptions, Items, SyServerTableProps } from '../common/types'
 	import { useTableFilter } from '../common/useTableFilter'
 	import { usePagination } from '../common/usePagination'
 	import { useTableOptions } from '../common/useTableOptions'
@@ -87,9 +86,6 @@
 		filterInputConfig: props.filterInputConfig,
 	})
 
-	// Create a reactive reference for items
-	const itemsRef = computed<Record<string, unknown>[]>(() => displayedItems.value)
-
 	// Use the pagination composable with displayedItemsLength (stable during refetch)
 	const itemsLength = computed(() => displayedItemsLength.value)
 	const { page, pageCount, itemsPerPageValue, updateItemsPerPage, isUpdatingItemsPerPage } = usePagination({
@@ -113,10 +109,10 @@
 
 	// Create a computed property for items to ensure reactivity
 	// Bind to displayedItems so it is always an array
-	const tableItems = computed<Record<string, unknown>[]>(() => displayedItems.value)
+	const tableItems = computed<Items>(() => displayedItems.value)
 
 	// Keep last non-undefined items to avoid clearing the table during refetches
-	const lastNonUndefinedItems = ref<Record<string, unknown>[]>([])
+	const lastNonUndefinedItems = ref<Items>([])
 	const isRefetching = ref(false)
 	watch(() => props.items, (newVal) => {
 		if (Array.isArray(newVal)) {
@@ -129,7 +125,7 @@
 		}
 	}, { immediate: true })
 
-	const displayedItems = computed<Record<string, unknown>[]>(() => {
+	const displayedItems = computed<Items>(() => {
 		return Array.isArray(props.items) ? props.items : lastNonUndefinedItems.value
 	})
 
@@ -221,7 +217,7 @@
 		setupAria,
 	} = useTableAria({
 		table,
-		items: itemsRef,
+		items: computed(() => displayedItems.value),
 		totalItemsCount: itemsLength,
 		options,
 		uniqueTableId: uniqueTableId.value,
@@ -280,7 +276,7 @@
 			v-model="model"
 			:headers="displayHeaders"
 			color="primary"
-			:items="processItems(displayedItems)"
+			:items="displayedItems"
 			:items-length="displayedItemsLength || 0"
 			:density="props.density"
 			:show-select="props.showSelect || props.showSelectSingle"
@@ -306,7 +302,7 @@
 					<tr class="headers">
 						<template
 							v-for="column in slotProps.columns"
-							:key="column.key"
+							:key="column.key!"
 						>
 							<th
 								:class="{ 'checkbox-column': column.key === 'data-table-select' }"
@@ -340,7 +336,17 @@
 										:column="column"
 										:header-props-raw="getHeaderForColumn(column)?.headerProps as any"
 										:resizable-columns="props.resizableColumns"
-									/>
+									>
+										<template
+											v-for="slotName in Object.keys($slots)"
+											#[slotName]="currentSlotProps"
+										>
+											<slot
+												:name="slotName"
+												v-bind="currentSlotProps ?? {}"
+											/>
+										</template>
+									</TableHeader>
 								</template>
 							</th>
 						</template>
@@ -352,7 +358,7 @@
 						<th v-if="props.showSelect || props.showSelectSingle" />
 						<template
 							v-for="column in slotProps.columns.filter(c => c.key !== 'data-table-select')"
-							:key="column.key"
+							:key="column.key!"
 						>
 							<th
 								:style="{

package/src/components/Tables/SyTable/SyTable.stories.ts

@@ -19,14 +19,14 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
-		headers: {
+		'headers': {
 			description: 'Liste des colonnes du tableau (voir : https://vuetifyjs.com/en/api/v-data-table/#props-headers)',
 			control: { type: 'object' },
 			table: {
 				category: 'props',
 			},
 		},
-		items: {
+		'items': {
 			description: 'Liste des éléments à afficher dans le tableau',
 			control: { type: 'object' },
 			table: {
@@ -36,7 +36,7 @@ const meta = {
 				},
 			},
 		},
-		density: {
+		'density': {
 			description: 'Définit la densité du tableau',
 			control: { type: 'select' },
 			options: ['default', 'comfortable', 'compact'],
@@ -45,7 +45,7 @@ const meta = {
 				type: { summary: 'string', detail: `'default' | 'comfortable' | 'compact'` },
 			},
 		},
-		striped: {
+		'striped': {
 			description: 'Affiche les lignes du tableau avec un fond rayé',
 			control: { type: 'boolean' },
 			table: {
@@ -53,7 +53,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		options: {
+		'options': {
 			description: 'Options de configuration du tableau',
 			name: 'v-model:options',
 			control: { type: 'object' },
@@ -62,7 +62,7 @@ const meta = {
 				type: { summary: 'DataOptions', detail: '{ page: number, itemsPerPage: number, sortBy: SortOptions[], groupBy?: SortOptions[], multiSort?: boolean, mustSort?: boolean, filters?: FilterOption[] }' },
 			},
 		},
-		itemsPerPageOptions: {
+		'itemsPerPageOptions': {
 			description: 'Limite les options disponibles dans le sélecteur "itemsPerPage"',
 			control: { type: 'object' },
 			table: {
@@ -71,11 +71,11 @@ const meta = {
 				defaultValue: { summary: 'undefined' },
 			},
 		},
-		saveState: {
+		'saveState': {
 			description: 'Permet d\'activer ou non la sauvegarde des options (pagination, tris, ordre des colonnes) du tableau dans le localStorage. Par défaut, cette fonctionnalité est activée.',
 			control: { type: 'boolean' },
 		},
-		suffix: {
+		'suffix': {
 			description: 'Suffixe permettant de gérer individuellement le stockage des options d\'un tableau d\'une page à l\'autre. Ce prop est obligatoire pour garantir un stockage unique pour chaque tableau.',
 			control: { type: 'text' },
 			table: {
@@ -84,14 +84,14 @@ const meta = {
 			},
 			required: true,
 		},
-		showExpand: {
+		'showExpand': {
 			description: 'Affiche une colonne permettant d\'étendre les lignes pour afficher du contenu supplémentaire',
 			control: { type: 'boolean' },
 			table: {
 				category: 'props',
 			},
 		},
-		resizableColumns: {
+		'resizableColumns': {
 			description: 'Permet de redimensionner les colonnes du tableau',
 			control: { type: 'boolean' },
 			table: {
@@ -99,7 +99,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		multiSort: {
+		'multiSort': {
 			description: 'Permet de trier sur plusieurs colonnes simultanément. Lorsque activé, des indicateurs numériques apparaissent à côté des icônes de tri pour montrer l\'ordre de priorité.',
 			control: { type: 'boolean' },
 			table: {
@@ -110,7 +110,7 @@ const meta = {
 				},
 			},
 		},
-		mustSort: {
+		'mustSort': {
 			description: 'Force au moins une colonne à être toujours triée. Si désactivé, toutes les colonnes peuvent être non triées.',
 			control: { type: 'boolean' },
 			table: {
@@ -121,15 +121,15 @@ const meta = {
 				},
 			},
 		},
-		caption: {
+		'caption': {
 			description: 'Texte de la légende du tableau',
 			control: { type: 'text' },
 		},
-		showFilters: {
+		'showFilters': {
 			description: 'Affiche les filtres au-dessus du tableau',
 			control: { type: 'boolean' },
 		},
-		enableColumnControls: {
+		'enableColumnControls': {
 			description: 'Allow the users to re-organize the columns',
 			table: {
 				defaultValue: {
@@ -140,7 +140,7 @@ const meta = {
 			},
 			control: { type: 'boolean' },
 		},
-		showSelect: {
+		'showSelect': {
 			description: 'Affiche des cases à cocher pour sélectionner des lignes',
 			control: { type: 'boolean' },
 			table: {
@@ -148,7 +148,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		showSelectSingle: {
+		'showSelectSingle': {
 			description: 'Affiche des cases à cocher pour sélectionner une seule ligne à la fois',
 			control: { type: 'boolean' },
 			table: {
@@ -156,7 +156,7 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
-		selectionKey: {
+		'selectionKey': {
 			description: 'Clé utilisée pour identifier chaque ligne lors de la sélection. Par défaut, utilise "id" si présent, sinon l\'objet complet.',
 			control: { type: 'text' },
 			table: {
@@ -165,6 +165,27 @@ const meta = {
 				defaultValue: { summary: 'undefined (fallback: id | objet complet)' },
 			},
 		},
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore - 'cookie-description-${cookieName}' storybook can't infer dynamic slot name
+		'header.<columnKey>': {
+			description: 'Slot permettant de personnaliser le rendu de l\'en-tête d\'une colonne spécifique. Remplacer `<columnKey>` par la clé de la colonne souhaitée.',
+			control: undefined,
+			table: {
+				category: 'slots',
+				type: {
+					summary: 'slot',
+					detail: `{
+						column: HeaderColumn,
+						headers: HeaderColumn[][],
+						columns: HeaderColumn[],
+						locales: Record<string, string | ((...args: any[]) => string)>,
+						sortBy: DataOptions['sortBy'],
+						someSelected: boolean,
+						allSelected: boolean
+					}`,
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof SyTable & typeof VDataTable>
 
@@ -3787,6 +3808,237 @@ export const SlotHeaders: Story = {
 	},
 }
 
+export const SlotHeader: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						:headers="headers"
+						:items="items"
+					>
+						<template #header.lastname>
+							<span class="text-primary font-weight-bold">
+								Nom de famille
+							</span>
+						</template>
+					</SyTable>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'lastname',
+						},
+						{
+							title: 'Prénom',
+							key: 'firstname',
+						},
+						{
+                            title: 'Email',
+							value: 'email',
+						},
+					])
+						
+					const items = ref([
+						{
+							firstname: 'Virginie',
+							lastname: 'Beauchesne',
+							email: 'virginie.beauchesne@example.com',
+						},
+						{
+							firstname: 'Simone',
+							lastname: 'Bellefeuille',
+							email: 'simone.bellefeuille@example.com',
+						},
+						{
+							firstname: 'Étienne',
+							lastname: 'Salois',
+							email: 'etienne.salois@example.com',
+						},
+						{
+							firstname: 'Thierry',
+							lastname: 'Bobu',
+							email: 'thierry.bobu@example.com',
+						},
+						{
+							firstname: 'Bernadette',
+							lastname: 'Langelier',
+							email: 'bernadette.langelier@exemple.com',
+						},
+						{
+							firstname: 'Agate',
+							lastname: 'Roy',
+							email: 'agate.roy@exemple.com',
+						},
+						{
+                            firstname: 'Théo',
+							lastname: 'Garnier',
+							email: 'theo.garnier@exemple.com',
+						},
+						{
+                            firstname: 'Clara',
+							lastname: 'Moreau',
+							email: 'clara.moreau@exemple.com',
+						},
+						{
+							firstname: 'Lucas',
+							lastname: 'Lefebvre',
+							email: 'lucas.lefebre@exemple.com',
+						},
+						{
+							firstname: 'Emma',
+							lastname: 'Dubois',
+							email: 'emma.dubois@exemple.com',
+						},
+						{
+							firstname: 'Julien',
+							lastname: 'Martin',
+							email: 'julien.martin@exemple.com',
+						},
+						{
+							firstname: 'Sophie',
+							lastname: 'Bernard',
+							email: 'sophie.bernard@exemple.com',
+						},
+						{
+							firstname: 'Antoine',
+							lastname: 'Lemoine',
+							email: 'antoine.lemoine@exemple.com',
+						},
+						{
+							firstname: 'Camille',
+							lastname: 'Rousseau',
+							email: 'camille.rousseau@exemple.com',
+						},
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'lastname',
+			},
+			{
+				title: 'Prénom',
+				key: 'firstname',
+			},
+			{
+				title: 'Email',
+				value: 'email',
+			},
+		],
+		'items': [
+			{
+				firstname: 'Virginie',
+				lastname: 'Beauchesne',
+				email: 'virginie.beauchesne@example.com',
+			},
+			{
+				firstname: 'Simone',
+				lastname: 'Bellefeuille',
+				email: 'simone.bellefeuille@example.com',
+			},
+			{
+				firstname: 'Étienne',
+				lastname: 'Salois',
+				email: 'etienne.salois@example.com',
+			},
+			{
+				firstname: 'Thierry',
+				lastname: 'Bobu',
+				email: 'thierry.bobu@example.com',
+			},
+			{
+				firstname: 'Bernadette',
+				lastname: 'Langelier',
+				email: 'bernadette.langelier@exemple.com',
+			},
+			{
+				firstname: 'Agate',
+				lastname: 'Roy',
+				email: 'agate.roy@exemple.com',
+			},
+			{
+				firstname: 'Théo',
+				lastname: 'Garnier',
+				email: 'theo.garnier@exemple.com',
+			},
+			{
+				firstname: 'Clara',
+				lastname: 'Moreau',
+				email: 'clara.moreau@exemple.com',
+			},
+			{
+				firstname: 'Lucas',
+				lastname: 'Lefebvre',
+				email: 'lucas.lefebre@exemple.com',
+			},
+			{
+				firstname: 'Emma',
+				lastname: 'Dubois',
+				email: 'emma.dubois@exemple.com',
+			},
+			{
+				firstname: 'Julien',
+				lastname: 'Martin',
+				email: 'julien.martin@exemple.com',
+			},
+			{
+				firstname: 'Sophie',
+				lastname: 'Bernard',
+				email: 'sophie.bernard@exemple.com',
+			},
+			{
+				firstname: 'Antoine',
+				lastname: 'Lemoine',
+				email: 'antoine.lemoine@exemple.com',
+			},
+			{
+				firstname: 'Camille',
+				lastname: 'Rousseau',
+				email: 'camille.rousseau@exemple.com',
+			},
+		],
+		'suffix': 'slot-header-table',
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+				>
+					<template #header.lastname>
+						<span class="text-primary font-weight-bold">
+							Nom de famille
+						</span>
+					</template>
+				</SyTable>
+			`,
+		}
+	},
+}
+
 export const ItemsPerPageOptions: Story = {
 	parameters: {
 		sourceCode: [
@@ -4019,3 +4271,124 @@ export const ItemsPerPageOptions: Story = {
 		}
 	},
 }
+
+export const ComplexItemsDisplay: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						:headers="headers"
+						:items="items"
+						suffix="items-per-page-options-table"
+					>
+						<template #[\`item.period\`]="{ item }">
+							Depuis le {{ item.period.start }} jusqu'au {{ item.period.end }}
+						</template>
+					</SyTable>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const headers = ref([
+						{
+							title: 'Titre',
+							key: 'title',
+						},
+						{
+							title: 'Période',
+							key: 'period',
+						},
+					])
+						
+					const items = ref([
+						{
+							title: 'Projet Alpha',
+							period: {
+								start: '01/01/2023',
+								end: '30/06/2023',
+							},
+						},
+						{
+							title: 'Projet Beta',
+							period: {
+								start: '15/02/2023',
+								end: '15/08/2023',
+							},
+						},
+						{
+							title: 'Projet Gamma',
+							period: {
+								start: '01/03/2023',
+								end: '31/12/2023',
+							},
+						},
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		headers: [
+			{
+				title: 'Titre',
+				key: 'title',
+			},
+			{
+				title: 'Période',
+				key: 'period',
+			},
+		],
+		items: [
+			{
+				title: 'Projet Alpha',
+				period: {
+					start: '01/01/2023',
+					end: '30/06/2023',
+				},
+			},
+			{
+				title: 'Projet Beta',
+				period: {
+					start: '15/02/2023',
+					end: '15/08/2023',
+				},
+			},
+			{
+				title: 'Projet Gamma',
+				period: {
+					start: '01/03/2023',
+					end: '31/12/2023',
+				},
+			},
+		],
+		caption: 'Périodes des projets en cours',
+		suffix: 'items-display-cell-table',
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyTable
+					v-bind="args"
+				>
+					<template #[\`item.period\`]="{ item }">
+						Depuis le {{ item.period.start }} jusqu'au {{ item.period.end }}
+					</template>
+				</SyTable>
+			`,
+		}
+	},
+}

package/src/components/Tables/SyTable/SyTable.vue

@@ -5,7 +5,6 @@
 	import SyTableFilter from '../common/SyTableFilter.vue'
 	import TableHeader from '../common/TableHeader.vue'
 	import SyTablePagination from '../common/SyTablePagination.vue'
-	import { processItems } from '../common/formatters'
 	import { locales } from '../common/locales'
 	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
 	import { useTableProps } from '../common/tableProps'
@@ -86,12 +85,8 @@
 		filterInputConfig: props.filterInputConfig,
 	})
 
-	// Create a reactive reference for items
-	const itemsRef = computed(() => props.items)
-
-	// Use the table items composable
 	const { filteredItems } = useTableItems({
-		items: itemsRef,
+		items: computed(() => props.items),
 		headers,
 		filters,
 		options,
@@ -245,7 +240,7 @@
 			color="primary"
 			:headers="displayHeaders"
 			v-bind="propsFacade"
-			:items="processItems(filteredItems)"
+			:items="filteredItems"
 			:density="props.density"
 			:show-select="props.showSelect || props.showSelectSingle"
 			:select-strategy="props.showSelectSingle ? 'single' : 'page'"
@@ -270,7 +265,7 @@
 					<tr class="headers">
 						<template
 							v-for="column in slotProps.columns"
-							:key="column.key"
+							:key="column.key!"
 						>
 							<th
 								:class="{ 'checkbox-column': column.key === 'data-table-select' }"
@@ -302,9 +297,19 @@
 										:table="table"
 										:header-params="slotProps"
 										:column="column"
-										:header-props-raw="getHeaderForColumn(column)?.headerProps as any"
+										:header-props-raw="(getHeaderForColumn(column)?.headerProps as any)"
 										:resizable-columns="props.resizableColumns"
-									/>
+									>
+										<template
+											v-for="slotName in Object.keys($slots)"
+											#[slotName]="currentSlotProps"
+										>
+											<slot
+												:name="slotName"
+												v-bind="currentSlotProps ?? {}"
+											/>
+										</template>
+									</TableHeader>
 								</template>
 							</th>
 						</template>
@@ -316,7 +321,7 @@
 						<th v-if="props.showSelect || props.showSelectSingle" />
 						<template
 							v-for="column in slotProps.columns.filter(c => c.key !== 'data-table-select')"
-							:key="column.key"
+							:key="column.key!"
 						>
 							<th
 								:style="{