@cnamts/synapse 1.0.6 → 1.0.7

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

@@ -61,6 +61,15 @@ const meta = {
 				type: { summary: 'DataOptions', detail: '{ page: number, itemsPerPage: number, sortBy: SortOptions[], groupBy?: SortOptions[], multiSort?: boolean, mustSort?: boolean, filters?: FilterOption[] }' },
 			},
 		},
+		itemsPerPageOptions: {
+			description: 'Limite les options disponibles dans le sélecteur "itemsPerPage"',
+			control: { type: 'object' },
+			table: {
+				category: 'props',
+				type: { summary: 'number[]' },
+				defaultValue: { summary: 'undefined' },
+			},
+		},
 		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' },
@@ -3359,3 +3368,236 @@ export const SlotHeaders: Story = {
 		}
 	},
 }
+
+export const ItemsPerPageOptions: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						:items-per-page-options="[5, 10, 15]"
+						suffix="items-per-page-options-table"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 5,
+					})
+					
+					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',
+			},
+		],
+		'options': {
+			itemsPerPage: 5,
+		},
+		'itemsPerPageOptions': [5, 10, 15],
+		'caption': '',
+		'suffix': 'default-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"
+				/>
+			`,
+		}
+	},
+}

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

@@ -29,6 +29,7 @@
 		showSelect: false,
 		multiSort: false,
 		mustSort: false,
+		itemsPerPageOptions: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -421,6 +422,7 @@
 						:items-per-page="itemsPerPageValue"
 						:page-count="pageCount"
 						:items-length="filteredItems.length"
+						:items-per-page-options="props.itemsPerPageOptions"
 						@update:page="page = $event"
 						@update:items-per-page="updateItemsPerPage"
 					/>

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

@@ -9,7 +9,10 @@
 
 	// Items per page options - standard options and current value
 	const itemsPerPageOptions = computed(() => {
-		const standardOptions = [5, 10, 25, 50, 100]
+		// Use provided itemsPerPageOptions or default standard options
+		const baseOptions = props.itemsPerPageOptions || [5, 10, 25, 50, 100]
+		// Filter out -1 from base options since we'll handle it separately
+		const standardOptions = [...baseOptions.filter(option => option !== -1)]
 
 		// Add the current itemsPerPage if it's not already in the standard options
 		// and it's not -1 (which represents "Tous")
@@ -25,11 +28,14 @@
 			value,
 		}))
 
-		// Add "Tous" option to display all elements
-		options.push({
-			text: locales.pagination.all,
-			value: -1,
-		})
+		// Add "Tous" option only if not limited by itemsPerPageOptions
+		// or if explicitly allowed (by including -1 in itemsPerPageOptions)
+		if (!props.itemsPerPageOptions || props.itemsPerPageOptions.includes(-1)) {
+			options.push({
+				text: locales.pagination.all,
+				value: -1,
+			})
+		}
 
 		return options
 	})
@@ -39,6 +45,7 @@
 		pageCount: number
 		itemsPerPage: number
 		itemsLength: number
+		itemsPerPageOptions?: number[]
 	}>()
 
 	const emit = defineEmits<{

package/src/components/Tables/common/tests/SyTablePagination.spec.ts

@@ -170,4 +170,161 @@ describe('SyTablePagination.vue', () => {
 		const labelText = wrapper.find('.rows-per-page-label').text()
 		expect(labelText).toContain('Lignes par page')
 	})
+
+	// Tests for itemsPerPageOptions functionality
+	describe('itemsPerPageOptions', () => {
+		it('should use default options when itemsPerPageOptions is not provided', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should have default options: 5, 10, 25, 50, 100, and "Tous" (-1)
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(6)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, 50, 100, -1])
+		})
+
+		it('should limit options when itemsPerPageOptions is provided', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should only have the limited options, no "Tous" option
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(3)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
+			expect(selectOptions.map(opt => opt.text)).toEqual(['5', '10', '25'])
+		})
+
+		it('should include "Tous" option when explicitly allowed in itemsPerPageOptions', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25, -1],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should have the limited options plus "Tous"
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(4)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, -1])
+
+			// Check that the last option is "Tous"
+			const lastOption = selectOptions[selectOptions.length - 1]
+			expect(lastOption.value).toBe(-1)
+			expect(lastOption.text).toBe('Tous')
+		})
+
+		it('should add current itemsPerPage to options if not already included', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 15, // Not in the itemsPerPageOptions
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should include the current itemsPerPage value and sort numerically
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(4)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 15, 25])
+		})
+
+		it('should not add current itemsPerPage if it is -1 (Tous)', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: -1, // "Tous" option
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should not add -1 to the options since itemsPerPageOptions doesn't include it
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(3)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
+			expect(selectOptions.find(opt => opt.value === -1)).toBeUndefined()
+		})
+
+		it('should work with very restrictive options', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 5,
+					itemsLength: 50,
+					itemsPerPageOptions: [5], // Only one option
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should only have one option
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(1)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5])
+			expect(selectOptions.map(opt => opt.text)).toEqual(['5'])
+		})
+
+		it('should handle empty itemsPerPageOptions array', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+					itemsPerPageOptions: [], // Empty array
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should only include the current itemsPerPage since base options are empty
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(1)
+			expect(selectOptions.map(opt => opt.value)).toEqual([10])
+		})
+	})
 })

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

@@ -76,6 +76,7 @@ export type SyTableProps = {
 	showSelect?: boolean
 	multiSort?: boolean
 	mustSort?: boolean
+	itemsPerPageOptions?: number[]
 }
 
 export type SyServerTableProps = {
@@ -93,4 +94,5 @@ export type SyServerTableProps = {
 	showSelect?: boolean
 	multiSort?: boolean
 	mustSort?: boolean
+	itemsPerPageOptions?: number[]
 }

package/src/components/index.ts

@@ -28,6 +28,7 @@ export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavi
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SyPagination } from './Customs/SyPagination/SyPagination.vue'
+export { default as SyTabs } from './Customs/SyTabs/SyTabs.vue'
 
 // ===========================
 // Boutons
@@ -117,15 +118,22 @@ export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 // Amelipro
 // ===========================
 export { default as AmeliproAccordion } from './Amelipro/AmeliproAccordion/AmeliproAccordion.vue'
+export { default as AmeliproAccordionGroup } from './Amelipro/AmeliproAccordionGroup/AmeliproAccordionGroup.vue'
+export { default as AmeliproAccordionList } from './Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue'
+export { default as AmeliproAccordionResult } from './Amelipro/AmeliproAccordionResult/AmeliproAccordionResult.vue'
+export { default as AmeliproAccordionResultList } from './Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue'
 export { default as AmeliproAutoCompleteField } from './Amelipro/AmeliproAutoCompleteField/AmeliproAutoCompleteField.vue'
+export { default as AmeliproBadge } from './Amelipro/AmeliproBadge/AmeliproBadge.vue'
 export { default as AmeliproBreadcrumb } from './Amelipro/AmeliproBreadcrumb/AmeliproBreadcrumb.vue'
 export { default as AmeliproBtn } from './Amelipro/AmeliproBtn/AmeliproBtn.vue'
 export { default as AmeliproCard } from './Amelipro/AmeliproCard/AmeliproCard.vue'
 export { default as AmeliproCallback } from './Amelipro/AmeliproCallback/AmeliproCallback.vue'
+export { default as AmeliproCarousel } from './Amelipro/AmeliproCarousel/AmeliproCarousel.vue'
 export { default as AmeliproCaptcha } from './Amelipro/AmeliproCaptcha/AmeliproCaptcha.vue'
 export { default as AmeliproCheckbox } from './Amelipro/AmeliproCheckbox/AmeliproCheckbox.vue'
 export { default as AmeliproCheckboxGroup } from './Amelipro/AmeliproCheckboxGroup/AmeliproCheckboxGroup.vue'
 export { default as AmeliproChips } from './Amelipro/AmeliproChips/AmeliproChips.vue'
+export { default as AmeliproClickableTile } from './Amelipro/AmeliproClickableTile/AmeliproClickableTile.vue'
 export { default as AmeliproCustomSelector } from './Amelipro/AmeliproCustomSelector/AmeliproCustomSelector.vue'
 export { default as AmeliproDialog } from './Amelipro/AmeliproDialog/AmeliproDialog.vue'
 export { default as AmeliproDisclosure } from './Amelipro/AmeliproDisclosure/AmeliproDisclosure.vue'
@@ -145,6 +153,7 @@ export { default as AmeliproPageLayout } from './Amelipro/AmeliproPageLayout/Ame
 export { default as AmeliproPagination } from './Amelipro/AmeliproPagination/AmeliproPagination.vue'
 export { default as AmeliproPatientBanner } from './Amelipro/AmeliproPatientBanner/AmeliproPatientBanner.vue'
 export { default as AmeliproRadioGroup } from './Amelipro/AmeliproRadioGroup/AmeliproRadioGroup.vue'
+export { default as AmeliproResultList } from './Amelipro/AmeliproResultList/AmeliproResultList.vue'
 export { default as AmeliproSelect } from './Amelipro/AmeliproSelect/AmeliproSelect.vue'
 export { default as AmeliproStateTile } from './Amelipro/AmeliproStateTile/AmeliproStateTile.vue'
 export { default as AmeliproStatus } from './Amelipro/AmeliproStatus/AmeliproStatus.vue'

package/src/composables/useFilterable/useFilterable.ts

@@ -173,6 +173,16 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				return
 			}
 
+			// Handle single select objects (VSelect with return-object but without multiple)
+			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined) && typedValue.value !== undefined
+			if (hasSelectStructure) {
+				// For single select objects, clear the entire value
+				filter.value = undefined
+				updateValue()
+				return
+			}
+
+			// For other object types, delete the specific property
 			delete typedValue[chipValue]
 			filter.value = typedValue
 		}

package/src/designTokens/tokens/amelipro/apColors.ts

@@ -1,4 +1,4 @@
-import type { IndexedObject } from '@/components/Amelipro/types'
+import type { IndexedObject } from '../../../components/Amelipro/types'
 
 export const apColorsTokens = {
 	apBlack: { base: '#000000' },

package/src/designTokens/tokens/cnam/cnamSemantic.ts

@@ -36,7 +36,7 @@ export const cnamSemanticTokens = {
 			accentOnDark: '#ffffff',
 			info: '#0c419a',
 			success: '#224e2d',
-			warning: '#60480e',
+			warning: '#906b15',
 			error: '#b33f2e',
 			onDark: 'rgba(255, 255, 255, 0.7)',
 			disabled: '#dddede',
@@ -49,7 +49,7 @@ export const cnamSemanticTokens = {
 			subdued: '#545859',
 			info: '#0c419a',
 			success: '#224e2d',
-			warning: '#60480e',
+			warning: '#906b15',
 			error: '#b33f2e',
 			disabled: '#989b9b',
 			onDark: '#ffffff',
@@ -64,7 +64,7 @@ export const cnamSemanticTokens = {
 			accentContrasted: '#07275c',
 			info: '#0c419a',
 			success: '#224e2d',
-			warning: '#60480e',
+			warning: '#906b15',
 			error: '#b33f2e',
 			onDark: '#ffffff',
 			disabled: '#989b9b',

package/src/stories/Components/Components.stories.ts

@@ -10,7 +10,7 @@ export const Header: StoryObj = {
 		return {
 			template: `
         <div class="mb-8">
-          <h1 class="text-h4 font-weight-bold mb-4">Composants</h1>
+          <h1 class="mb-4">Composants</h1>
           <p class="text-body-1">Découvrez notre collection de composants réutilisables conçus pour créer des interfaces utilisateur cohérentes et accessibles.</p>
         </div>
       `,