@cnamts/synapse 1.0.11 → 1.0.13

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

@@ -5,6 +5,7 @@ import SyTable from './SyTable.vue'
 import type { DataOptions, FilterType } from '../common/types'
 import type { VDataTable } from 'vuetify/components'
 import dayjs from 'dayjs'
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
 
 const meta = {
 	title: 'Composants/Tableaux/SyTable',
@@ -83,6 +84,13 @@ const meta = {
 			},
 			required: true,
 		},
+		showExpand: {
+			description: 'Affiche une colonne permettant d\'étendre les lignes pour afficher du contenu supplémentaire',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+			},
+		},
 		resizableColumns: {
 			description: 'Permet de redimensionner les colonnes du tableau',
 			control: { type: 'boolean' },
@@ -140,6 +148,15 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
+		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: {
+				category: 'props',
+				type: { summary: 'string' },
+				defaultValue: { summary: 'undefined (fallback: id | objet complet)' },
+			},
+		},
 	},
 } satisfies Meta<typeof SyTable & typeof VDataTable>
 
@@ -3013,6 +3030,217 @@ export const ColumnControls: Story = {
 	},
 }
 
+export const ExpandableRows: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						show-expand
+						caption="Tableau complexe"
+						suffix="expand-table"
+					>
+                      <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+                          <v-btn
+                            :append-icon="isExpanded(internalItem) ? mdiChevronUp : mdiChevronDown"
+                            :text="isExpanded(internalItem) ? 'Fermer' : \`Plus d'info\`"
+                            class="text-none"
+                            color="medium-emphasis"
+                            size="small"
+                            variant="text"
+                            width="105"
+                            border
+                            slim
+                            @click="toggleExpand(internalItem)"
+                          />
+                      </template>
+                
+                      <template #expanded-row="{ columns, item }">
+                        <tr>
+                          <td
+                            :colspan="columns.length"
+                            class="py-2"
+                          >
+                            <strong>Informations complémentaires :</strong>
+                             <p>Plus de détails pour {{ item.firstname }} {{ item.lastname }}.</p>
+                          </td>
+                        </tr>
+                      </template>
+                    </SyTable>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+					
+					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': '',
+		'showExpand': true,
+		'suffix': 'expandable-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args, mdiChevronDown, mdiChevronUp }
+			},
+			template: `
+              <SyTable
+                  v-model:options="args.options"
+                  v-bind="args"
+                  show-expand
+                  caption="Tableau complexe"
+                  suffix="expand-table"
+              >
+                  <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+                    <v-btn
+                        :append-icon="isExpanded(internalItem) ? mdiChevronUp : mdiChevronDown"
+                        :text="isExpanded(internalItem) ? 'Fermer' : \`Plus d'info\`"
+                        class="text-none"
+                        color="medium-emphasis"
+                        size="small"
+                        variant="text"
+                        width="105"
+                        border
+                        slim
+                        @click="toggleExpand(internalItem)"
+                    />
+                  </template>
+
+                  <template #expanded-row="{ columns, item }">
+                    <tr>
+                      <td
+                          :colspan="columns.length"
+                          class="py-2"
+                      >
+                        <strong>Informations complémentaires :</strong>
+                        <p>Plus de détails pour {{ item.firstname }} {{ item.lastname }}.</p>
+                      </td>
+                    </tr>
+                  </template>
+              </SyTable>
+            `,
+		}
+	},
+}
+
 export const SlotItem: Story = {
 	parameters: {
 		sourceCode: [

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

@@ -99,12 +99,25 @@
 
 	// Use the pagination composable
 	const itemsLength = computed(() => filteredItems.value.length)
-	const { page, pageCount, itemsPerPageValue, updateItemsPerPage } = usePagination({
+	const { page, pageCount, itemsPerPageValue, updateItemsPerPage, isUpdatingItemsPerPage } = usePagination({
 		options,
 		itemsLength,
-		table,
 	})
 
+	// Defines a function to handle updating the data table options
+	function onUpdateOptions(newOptions: Partial<DataOptions>) {
+		if (isUpdatingItemsPerPage.value && typeof newOptions.itemsPerPage !== 'undefined') {
+			// Creates a copy of the received options
+			const rest = { ...newOptions }
+			delete (rest as Record<string, unknown>).itemsPerPage
+			// Updates the other options without modifying itemsPerPage
+			updateOptions(rest)
+			return
+		}
+		// In all other cases, simply updates the options with the new values
+		updateOptions(newOptions)
+	}
+
 	// Use the table checkbox composable
 	const { toggleAllRows, getItemValue } = useTableCheckbox({
 		items: filteredItems,
@@ -112,6 +125,7 @@
 		updateModelValue: (value) => {
 			model.value = value
 		},
+		selectionKey: toRef(props, 'selectionKey'),
 	})
 
 	// Use the ARIA accessibility composable
@@ -231,7 +245,8 @@
 			:item-value="getItemValue"
 			:multi-sort="props.multiSort"
 			:must-sort="props.mustSort"
-			@update:options="updateOptions"
+			:show-expand="props.showExpand"
+			@update:options="onUpdateOptions"
 		>
 			<template #top>
 				<caption

package/src/components/Tables/SyTable/tests/SyTable.spec.ts

@@ -658,3 +658,66 @@ describe('SyTable', () => {
 		wrapper.unmount()
 	})
 })
+
+describe('SyTable selectionKey', () => {
+	it('uses custom selectionKey when provided', () => {
+		const items = [
+			{ id: 1, uuid: 'a-1', name: 'A' },
+			{ id: 2, uuid: 'a-2', name: 'B' },
+		]
+		const wrapper = mount(SyTable, {
+			props: {
+				headers,
+				items,
+				showSelect: true,
+				selectionKey: 'uuid',
+				suffix: '',
+			},
+		})
+
+		const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+		const itemValue = dataTable.props('itemValue') as (item: unknown) => unknown
+
+		expect(itemValue(items[0] as unknown as Record<string, unknown>)).toBe('a-1')
+		expect(itemValue(items[1] as unknown as Record<string, unknown>)).toBe('a-2')
+	})
+
+	it('falls back to id when selectionKey is missing on item', () => {
+		const items = [
+			{ id: 10, name: 'No UUID' },
+		]
+		const wrapper = mount(SyTable, {
+			props: {
+				headers,
+				items,
+				showSelect: true,
+				selectionKey: 'uuid',
+				suffix: '',
+			},
+		})
+
+		const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+		const itemValue = dataTable.props('itemValue') as (item: unknown) => unknown
+
+		expect(itemValue(items[0] as unknown as Record<string, unknown>)).toBe(10)
+	})
+
+	it('falls back to full object when neither selectionKey nor id are present', () => {
+		const item = { name: 'No keys' }
+		const wrapper = mount(SyTable, {
+			props: {
+				headers,
+				items: [item],
+				showSelect: true,
+				selectionKey: 'uuid',
+				suffix: '',
+			},
+		})
+
+		const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+		const itemValue = dataTable.props('itemValue') as (item: unknown) => unknown
+
+		const result = itemValue(item as unknown as Record<string, unknown>)
+		expect(result).toBe(item) // same object reference
+	})
+})

package/src/components/Tables/common/SyTablePagination.vue

@@ -67,6 +67,15 @@
 		emit('update:page', pageNumber)
 	}
 
+	/**
+	 * Handle change from the SySelect component directly
+	 * Ensure we emit a number for items-per-page, then reset to page 1
+	 */
+	function handleItemsPerPageChange(value: unknown) {
+		const numeric = typeof value === 'string' ? Number.parseInt(value, 10) : (value as number)
+		emit('update:items-per-page', numeric)
+	}
+
 	/**
 	 * Local items per page with two-way binding
 	 */
@@ -78,14 +87,6 @@
 		localItemsPerPage.value = newValue
 	})
 
-	// Watch for local changes and emit events
-	watch(localItemsPerPage, (newValue) => {
-		// First reset to page 1 when changing items per page
-		emit('update:page', 1)
-		// Then update the items per page
-		emit('update:items-per-page', newValue)
-	})
-
 	// Remove aria-describedby attribute after component is mounted
 	onMounted(() => {
 		// Use nextTick to ensure the DOM is fully rendered
@@ -149,6 +150,7 @@
 				:label="''"
 				style="width: 90px;"
 				:clearable="false"
+				@update:model-value="handleItemsPerPageChange"
 			/>
 		</div>
 	</div>

package/src/components/Tables/common/types.ts

@@ -90,6 +90,8 @@ export type SyTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	showExpand?: boolean
+	selectionKey?: string
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
@@ -109,6 +111,8 @@ export type SyServerTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	showExpand?: boolean
+	selectionKey?: string
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]

package/src/components/Tables/common/usePagination.ts

@@ -1,4 +1,4 @@
-import { computed, nextTick, type Ref } from 'vue'
+import { computed, nextTick, ref, type Ref } from 'vue'
 import type { DataOptions } from './types'
 
 /**
@@ -6,18 +6,17 @@ import type { DataOptions } from './types'
  *
  * @param options - Reactive reference to table options
  * @param itemsLength - Total number of items (for client-side) or serverItemsLength (for server-side)
- * @param table - Reference to the table component
  * @returns Pagination utilities and computed properties
  */
 export function usePagination({
 	options,
 	itemsLength,
-	table,
 }: {
 	options: Ref<Partial<DataOptions>>
 	itemsLength: Ref<number>
-	table: Ref<unknown>
 }) {
+	// Flag to indicate an ongoing items-per-page update cycle
+	const isUpdatingItemsPerPage = ref(false)
 	// Current page with getter/setter
 	const page = computed({
 		get: () => options.value.page || 1,
@@ -47,25 +46,16 @@ export function usePagination({
 	/**
    * Update items per page from pagination component
    */
-	function updateItemsPerPage(newItemsPerPage: number) {
-		// Create a completely new options object to force reactivity
-		const newOptions = {
+	async function updateItemsPerPage(newItemsPerPage: number) {
+		isUpdatingItemsPerPage.value = true
+		await nextTick()
+		options.value = {
 			...options.value,
 			itemsPerPage: newItemsPerPage,
-			page: 1, // Reset to first page when changing items per page
+			page: 1,
 		}
-
-		// Update options with the new object
-		options.value = newOptions
-
-		// Force a refresh of the table
-		nextTick(() => {
-			// Try to force update if the table has that method
-			const tableValue = table.value as { $forceUpdate?: () => void }
-			if (tableValue && typeof tableValue.$forceUpdate === 'function') {
-				tableValue.$forceUpdate()
-			}
-		})
+		await nextTick()
+		isUpdatingItemsPerPage.value = false
 	}
 
 	return {
@@ -73,5 +63,6 @@ export function usePagination({
 		pageCount,
 		itemsPerPageValue,
 		updateItemsPerPage,
+		isUpdatingItemsPerPage,
 	}
 }

package/src/components/Tables/common/useTableCheckbox.ts

@@ -3,29 +3,41 @@ import { toRef } from 'vue'
 
 interface UseTableCheckboxOptions {
 	/**
-   * The items to be displayed in the table
-   */
+	 * The items to be displayed in the table
+	 */
 	items: MaybeRefOrGetter<Record<string, unknown>[]>
 	/**
-   * The model value for selected items
-   */
+	 * The model value for selected items
+	 */
 	modelValue: MaybeRefOrGetter<unknown[]>
 	/**
-   * Function to update the model value
-   */
+	 * Function to update the model value
+	 */
 	updateModelValue: (value: unknown[]) => void
+	/**
+	 * Optional key to use for item selection value. If not provided, falls back to `id` then the full object.
+	 */
+	selectionKey?: MaybeRefOrGetter<string | undefined>
 }
 export function useTableCheckbox(options: UseTableCheckboxOptions) {
 	const itemsRef = toRef(options.items)
 	const modelValueRef = toRef(options.modelValue)
+	const selectionKeyRef = toRef(options as { selectionKey?: MaybeRefOrGetter<string | undefined> }, 'selectionKey')
 
 	/**
-   * Function to get a unique identifier for each item
-   */
+	 * Function to get a unique identifier for each item
+	 */
 	const getItemValue = (item: Record<string, unknown>) => {
-		// If the item has an id field, use that
-		if ((item as Record<string, unknown>).id !== undefined) {
-			return (item as Record<string, unknown>).id
+		// 1) If a custom selectionKey is provided and exists on item, use it
+		const key = (typeof selectionKeyRef?.value === 'function'
+			? (selectionKeyRef.value as unknown as () => string | undefined)()
+			: selectionKeyRef?.value) as string | undefined
+		if (key && typeof key === 'string' && item[key] !== undefined) {
+			return item[key]
+		}
+		// 2) Otherwise, if the item has an id field, use that
+		if (item.id !== undefined) {
+			return item.id
 		}
 		// Otherwise, return the full object instead of a JSON string
 		// so v-model contains real objects

package/src/components/index.ts

@@ -63,6 +63,7 @@ export { default as SySelect } from './Customs/Selects/SySelect/SySelect.vue'
 export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
 export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
+export { default as Captcha } from './Captcha/Captcha.vue'
 export { default as SyForm } from './Customs/SyForm/SyForm.vue'
 
 // ===========================

package/src/composables/validation/AvecVosComposants.mdx.old

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/blocks';
 
-<Meta title="Composables/ValidationSystem/Avec Vos Composants" />
+<Meta title="Guide Du Dev/SyForm/Avec Vos Composants" />
 
 <div className="header">
   <h1>Etendre le système à vos propres composants</h1>

package/src/composables/validation/FormValidation.stories.ts.old

@@ -11,7 +11,7 @@ import { VBtn, VTextField } from 'vuetify/components'
  * La documentation sur le système de validation en cascade de Synapse Design System.
  */
 export default {
-	title: 'Composables/ValidationSystem',
+	title: 'Guide Du Dev/SyForm',
 	component: SyForm,
 	argTypes: {
 		validateOnSubmit: {
@@ -32,7 +32,7 @@ export default {
 type Story = StoryObj<typeof SyForm>
 
 // Exemple de base
-export const SimpleForm: Story = {
+export const FormulaireSimple: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -100,7 +100,7 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 // Exemple de formulaire avec composants mixtes
-export const MixedComponentsForm: Story = {
+export const FormulaireMixte: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, SySelect, SyCheckbox, DatePicker, VBtn, VTextField },
 		setup() {
@@ -216,7 +216,7 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 // Exemple de formulaire imbriqué
-export const NestedForm: Story = {
+export const FormulaireImbrique: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -313,7 +313,7 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 // Exemple d'implémentation personnalisée
-export const CustomImplementation: Story = {
+export const ImplementationPersonnalisee: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {