@cnamts/synapse 1.0.2 → 1.0.3

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, onMounted, nextTick, provide, ref, toRef, useAttrs, watch } from 'vue'
+	import { computed, nextTick, onMounted, provide, ref, toRef, useAttrs, watch } from 'vue'
 	import type { VDataTableServer } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 	import SyTableFilter from '../common/SyTableFilter.vue'
@@ -27,6 +27,8 @@
 		density: 'default',
 		striped: false,
 		showSelect: false,
+		multiSort: false,
+		mustSort: false,
 	})
 
 	const emit = defineEmits<{
@@ -137,7 +139,6 @@
 		accessibilityRowCheckboxes()
 	})
 
-	// Use the table checkbox composable
 	const { getItemValue, toggleAllRows } = useTableCheckbox({
 		items: tableItems,
 		modelValue: model,
@@ -214,6 +215,8 @@
 			:show-select="props.showSelect"
 			:item-selectable="(item) => true"
 			:item-value="getItemValue"
+			:multi-sort="props.multiSort"
+			:must-sort="props.mustSort"
 			@update:options="updateOptions"
 		>
 			<template #top>
@@ -350,6 +353,17 @@
 				</template>
 			</template>
 
+			<!-- Dynamically forward all slots to maintain flexibility -->
+			<template
+				v-for="slotName in Object.keys($slots)"
+				#[slotName]="slotProps"
+			>
+				<slot
+					:name="slotName"
+					v-bind="slotProps ?? {}"
+				/>
+			</template>
+
 			<template #bottom>
 				<div class="d-flex align-center pa-2">
 					<OrganizeColumns

package/src/components/Tables/SyTable/SyTable.mdx

@@ -24,9 +24,11 @@ Pour gérer individuellement le stockage des options pour différents tableaux,
 ### Tri des colonnes
 
 Le composant permet de trier les données par colonne en cliquant sur l'en-tête de la colonne.
-
 <Canvas story={{height: '550px'}} of={SyTable.SortBy} />
 
+Le multi-tri est également supporté. Vous pouvez activer cette fonctionnalité en utilisant la prop `multi-sort`.
+<Canvas story={{height: '550px'}} of={SyTable.MultiSort} />
+
 ### Filtres des colonnes
 
 Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.
@@ -47,6 +49,14 @@ Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
 <Canvas story={{height: '550px'}} of={SyTable.RowSelection} />
 
+### Slot item
+Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.
+<Canvas story={{height: '550px'}} of={SyTable.SlotItem} />
+
+### Slot headers
+Le composant permet de personnaliser l'affichage des en-têtes de colonnes en utilisant le slot `headers`. Vous pouvez définir la structure de chaque en-tête en fonction de vos besoins.
+<Canvas story={{height: '550px'}} of={SyTable.SlotHeaders} />
+
 ### Accessibilité
 
 Le composant améliore l'accessibilité en ajoutant automatiquement :

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

@@ -72,6 +72,33 @@ const meta = {
 		},
 		resizableColumns: {
 			description: 'Permet de redimensionner les colonnes du tableau',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+			},
+		},
+		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: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
+		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: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: {
+					summary: 'false',
+				},
+			},
 		},
 		caption: {
 			description: 'Texte de la légende du tableau',
@@ -422,6 +449,226 @@ export const SortBy: Story = {
 	},
 }
 
+export const MultiSort: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<p class="mb-4">
+							Cet exemple montre le tri multiple avec des indicateurs d'ordre de priorité.
+							Les chiffres à côté des icônes de tri indiquent l'ordre de priorité du tri.
+						</p>
+						<SyTable
+							v-model:options="options"
+							:headers="headers"
+							:items="items"
+							:multi-sort="true"
+							suffix="multi-sort-table"
+						/>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 4,
+						multiSort: true,
+						sortBy: [
+							{
+								key: 'lastname',
+								order: 'desc',
+							},
+							{
+								key: 'firstname',
+								order: 'asc',
+							},
+						],
+					})
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'lastname',
+						},
+						{
+							title: 'Prénom',
+							key: 'firstname',
+						},
+						{
+                            title: 'Email',
+							value: 'email',
+						},
+						{
+                            title: 'Ville',
+							key: 'city',
+						},
+					])
+						
+					const items = ref([
+						{
+							firstname: 'Virginie',
+							lastname: 'Beauchesne',
+							email: 'virginie.beauchesne@example.com',
+							city: 'Paris',
+						},
+						{
+							firstname: 'Simone',
+							lastname: 'Bellefeuille',
+							email: 'simone.bellefeuille@example.com',
+							city: 'Lyon',
+						},
+						{
+							firstname: 'Étienne',
+							lastname: 'Salois',
+							email: 'etienne.salois@example.com',
+							city: 'Marseille',
+						},
+						{
+							firstname: 'Thierry',
+							lastname: 'Bobu',
+							email: 'thierry.bobu@example.com',
+							city: 'Toulouse',
+						},
+						{
+							firstname: 'Bernadette',
+							lastname: 'Langelier',
+							email: 'bernadette.langelier@exemple.com',
+							city: 'Nice',
+						},
+						{
+							firstname: 'Agate',
+							lastname: 'Roy',
+							email: 'agate.roy@exemple.com',
+							city: 'Bordeaux',
+						},
+						{
+							firstname: 'Agate',
+							lastname: 'Beauchesne',
+							email: 'agate.beauchesne@exemple.com',
+							city: 'Lille',
+						}
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'lastname',
+			},
+			{
+				title: 'Prénom',
+				key: 'firstname',
+			},
+			{
+				title: 'Email',
+				value: 'email',
+			},
+			{
+				title: 'Ville',
+				key: 'city',
+			},
+		],
+		'items': [
+			{
+				firstname: 'Virginie',
+				lastname: 'Beauchesne',
+				email: 'virginie.beauchesne@example.com',
+				city: 'Paris',
+			},
+			{
+				firstname: 'Simone',
+				lastname: 'Bellefeuille',
+				email: 'simone.bellefeuille@example.com',
+				city: 'Lyon',
+			},
+			{
+				firstname: 'Étienne',
+				lastname: 'Salois',
+				email: 'etienne.salois@example.com',
+				city: 'Marseille',
+			},
+			{
+				firstname: 'Thierry',
+				lastname: 'Bobu',
+				email: 'thierry.bobu@example.com',
+				city: 'Toulouse',
+			},
+			{
+				firstname: 'Bernadette',
+				lastname: 'Langelier',
+				email: 'bernadette.langelier@exemple.com',
+				city: 'Nice',
+			},
+			{
+				firstname: 'Agate',
+				lastname: 'Roy',
+				email: 'agate.roy@exemple.com',
+				city: 'Bordeaux',
+			},
+			{
+				firstname: 'Agate',
+				lastname: 'Beauchesne',
+				email: 'agate.beauchesne@exemple.com',
+				city: 'Lille',
+			},
+		],
+		'caption': '',
+		'options': {
+			itemsPerPage: 4,
+			multiSort: true,
+			sortBy: [
+				{
+					key: 'lastname',
+					order: 'desc',
+				},
+				{
+					key: 'firstname',
+					order: 'asc',
+				},
+			],
+		},
+		'suffix': 'multi-sort-table',
+		'density': 'default',
+		'striped': false,
+		'multiSort': true,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div>
+					<p class="mb-4">
+						Cet exemple montre le tri multiple avec des indicateurs d'ordre de priorité.
+						Les chiffres à côté des icônes de tri indiquent l'ordre de priorité du tri.
+					</p>
+					<SyTable
+						v-model:options="args.options"
+						v-bind="args"
+						suffix="multi-sort-table"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const FilterByText: Story = {
 	parameters: {
 		sourceCode: [
@@ -2752,3 +2999,363 @@ export const ColumnControls: Story = {
 		}
 	},
 }
+
+export const SlotItem: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						suffix="slot-item-table"
+					>
+						<template #item="{ item }">
+							<tr>
+								<td>{{ item.lastname }}</td>
+								<td>
+									<a
+										href="#"
+										class="text-primary"
+									>
+										{{ item.firstname }}
+									</a>
+								</td>
+								<td>{{ item.email }}</td>
+							</tr>
+						</template>
+					</SyTable>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 4,
+					})
+					
+					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'
+						}
+					])
+				</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',
+			},
+		],
+		'options': {
+			itemsPerPage: 4,
+		},
+		'caption': '',
+		'suffix': 'slot-item-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="slot-item-table"
+				>
+					<template #item="{ item }">
+						<tr>
+							<td>{{ item.lastname }}</td>
+							<td>
+								<a
+									href="#"
+									class="text-primary"
+								>
+									{{ item.firstname }}
+								</a>
+							</td>
+							<td>{{ item.email }}</td>
+						</tr>
+					</template>
+				</SyTable>
+			`,
+		}
+	},
+}
+
+export const SlotHeaders: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						suffix="slot-item-table"
+					>
+						<template #headers="{ columns }">
+						  <tr>
+							<th 
+							  v-for="column in columns" 
+							  :key="column.key"
+							>
+							  <span class="font-weight-bold text-primary">
+								{{ column.title }}
+							  </span>
+							</th>
+						  </tr>
+						</template>
+					</SyTable>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 4,
+					})
+					
+					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'
+						}
+					])
+				</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',
+			},
+		],
+		'options': {
+			itemsPerPage: 4,
+		},
+		'caption': '',
+		'suffix': 'slot-item-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="slot-item-table"
+				>
+					<template #headers="{ columns }">
+						<tr>
+							<th
+								v-for="column in columns"
+								:key="column.key"
+							>
+								<span class="font-weight-bold text-primary">
+								{{ column.title }}
+							  </span>
+							</th>
+						</tr>
+					</template>
+				</SyTable>
+			`,
+		}
+	},
+}