@cnamts/synapse 1.0.8 → 1.0.9

package/src/components/Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproAccordionResultList from './AmeliproAccordionResultList.vue'
 import type { IDataListItem } from '../types'
+import { computed, ref } from 'vue'
 
 const meta = {
 	argTypes: {
@@ -271,3 +272,564 @@ export const Default: Story = {
 	</AmeliproAccordionResultList>`,
 	}),
 }
+
+// --- Liste simple ---
+export const ListeSimple: Story = {
+	name: 'Liste simple',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+			{ id: 3, accordionTitle: 'Troisième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-simple',
+		title: 'Liste simple',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Affichage d’une liste de résultats dépliants simples.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-simple"
+    title="Liste simple"
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+    { id: 3, accordionTitle: 'Troisième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Affichage d’une liste de résultats dépliants simples.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Premier panneau ouvert par défaut ---
+export const PremierOuvert: Story = {
+	name: 'Premier ouvert',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+			{ id: 3, accordionTitle: 'Troisième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-first-open',
+		title: 'Premier ouvert',
+		defaultItemOpened: 0,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le premier panneau est ouvert par défaut grâce à la prop <code>defaultItemOpened</code>.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-first-open"
+    title="Premier ouvert"
+    :default-item-opened="0"
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+    { id: 3, accordionTitle: 'Troisième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le premier panneau est ouvert par défaut grâce à la prop <code>defaultItemOpened</code>.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Pagination et tri (avec gestion de l'événement de tri) ---
+export const PaginationEtTri: Story = {
+	name: 'Pagination et tri',
+	args: {
+		items: Array.from({ length: 12 }, (_, i) => ({
+			id: i + 1,
+			accordionTitle: `Résultat ${i + 1}`,
+		})),
+		uniqueId: 'amelipro-accordion-result-list-pagination',
+		title: 'Avec pagination et tri',
+		itemsToDisplayDesktop: 4,
+		itemsToDisplayMobile: 2,
+		sortSelectItems: [
+			{ title: 'Ordre croissant', value: 'asc' },
+			{ title: 'Ordre décroissant', value: 'desc' },
+		],
+		sortSelectLabel: 'Trier par :',
+		sortSelectPlaceholder: 'Choisir un ordre',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Pagination et tri sont activés grâce aux props <code>itemsToDisplayDesktop</code>, <code>itemsToDisplayMobile</code> et <code>sortSelectItems</code>. Le tri est effectif grâce à la gestion de l’événement <code>change:sort-select</code>.</p>
+  <AmeliproAccordionResultList
+    :items="sortedItems"
+    unique-id="amelipro-accordion-result-list-pagination"
+    title="Avec pagination et tri"
+    :items-to-display-desktop="4"
+    :items-to-display-mobile="2"
+    :sort-select-items="[
+      { title: 'Ordre croissant', value: 'asc' },
+      { title: 'Ordre décroissant', value: 'desc' }
+    ]"
+    sort-select-label="Trier par :"
+    sort-select-placeholder="Choisir un ordre"
+    @change:sort-select="onSortChange"
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { AmeliproAccordionResultList } from '@cnamts/synapse'
+
+const items = Array.from({ length: 12 }, (_, i) => ({
+  id: i + 1,
+  accordionTitle: \`Résultat \${i + 1}\`,
+}))
+
+const sortOrder = ref<'asc' | 'desc'>('asc')
+const sortedItems = computed(() => {
+  return [...items].sort((a, b) =>
+    sortOrder.value === 'asc' ? a.id - b.id : b.id - a.id
+  )
+})
+
+function onSortChange(val: 'asc' | 'desc') {
+  sortOrder.value = val
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() {
+			const items = Array.from({ length: 12 }, (_, i) => ({
+				id: i + 1,
+				accordionTitle: `Résultat ${i + 1}`,
+			}))
+			const sortOrder = ref<'asc' | 'desc'>('asc')
+			const sortedItems = computed(() =>
+				[...items].sort((a, b) =>
+					sortOrder.value === 'asc' ? a.id - b.id : b.id - a.id,
+				),
+			)
+			function onSortChange(val: 'asc' | 'desc') {
+				sortOrder.value = val
+			}
+			return { args, sortedItems, onSortChange }
+		},
+		template: `
+<p class="mb-2">Pagination et tri sont activés grâce aux props <code>itemsToDisplayDesktop</code>, <code>itemsToDisplayMobile</code> et <code>sortSelectItems</code>. Le tri est effectif grâce à la gestion de l’événement <code>change:sort-select</code>.</p>
+<AmeliproAccordionResultList
+  v-bind="args"
+  :items="sortedItems"
+  @change:sort-select="onSortChange"
+>
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Bordure et couleur personnalisées ---
+export const BordureEtCouleur: Story = {
+	name: 'Bordure et couleur',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+			{ id: 3, accordionTitle: 'Troisième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-colored',
+		title: 'Bordure et couleur',
+		groupBordered: true,
+		groupBorderColor: '#1976d2',
+		groupColor: '#e3f2fd',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Les panneaux dépliants ont une bordure et une couleur de fond personnalisées grâce aux props <code>groupBordered</code>, <code>groupBorderColor</code> et <code>groupColor</code>.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-colored"
+    title="Bordure et couleur"
+    group-bordered
+    group-border-color="#1976d2"
+    group-color="#e3f2fd"
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+    { id: 3, accordionTitle: 'Troisième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Les panneaux dépliants ont une bordure et une couleur de fond personnalisées grâce aux props <code>groupBordered</code>, <code>groupBorderColor</code> et <code>groupColor</code>.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Séparateur masqué ---
+export const SansSeparateur: Story = {
+	name: 'Sans séparateur',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+			{ id: 3, accordionTitle: 'Troisième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-nosep',
+		title: 'Sans séparateur',
+		hideSeparator: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le séparateur entre le titre et le contenu est masqué grâce à la prop <code>hideSeparator</code>.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-nosep"
+    title="Sans séparateur"
+    hide-separator
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+    { id: 3, accordionTitle: 'Troisième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le séparateur entre le titre et le contenu est masqué grâce à la prop <code>hideSeparator</code>.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Slot headingContent individuel ---
+export const HeaderIndividuel: Story = {
+	name: 'Header individuel',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-heading-per-item',
+		title: 'Header individuel',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le slot <code>headingContent-1</code> permet d’ajouter un contenu spécifique à la partie droite du header du premier accordéon.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-heading-per-item"
+    title="Header individuel"
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #headingContent-1>
+      <span style="color: #1976d2;">Header personnalisé pour le résultat 1</span>
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le slot <code>headingContent-1</code> permet d’ajouter un contenu spécifique à la partie droite du header du premier accordéon.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #headingContent-1>
+    <span style="color: #1976d2;">Header personnalisé pour le résultat 1</span>
+  </template>
+  <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Slot accordionContent individuel ---
+export const ContenuIndividuel: Story = {
+	name: 'Contenu individuel',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-content-per-item',
+		title: 'Contenu individuel',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le slot <code>accordionContent-2</code> permet d’ajouter un contenu spécifique au deuxième accordéon.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-content-per-item"
+    title="Contenu individuel"
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent-2>
+      <strong>Contenu spécifique pour le résultat 2</strong>
+    </template>
+    <template #accordionContent="{ id }">
+      <span v-if="id !== 2">Contenu générique pour le résultat {{ id }}</span>
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le slot <code>accordionContent-2</code> permet d’ajouter un contenu spécifique au deuxième accordéon.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+    Header du {{ accordionTitle }}
+  </template>
+  <template #accordionContent-2>
+    <strong>Contenu spécifique pour le résultat 2</strong>
+  </template>
+    <template #accordionContent="{ id }">
+    <span v-if="id !== 2">Contenu générique pour le résultat {{ id }}</span>
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}
+
+// --- Masquage des labels ---
+export const LabelsCaches: Story = {
+	name: 'Labels cachés',
+	args: {
+		items: [
+			{ id: 1, accordionTitle: 'Premier résultat' },
+			{ id: 2, accordionTitle: 'Deuxième résultat' },
+		],
+		uniqueId: 'amelipro-accordion-result-list-hidden-labels',
+		title: 'Labels cachés',
+		hiddenLabels: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Les labels des champs select sont masqués grâce à la prop <code>hiddenLabels</code>.</p>
+  <AmeliproAccordionResultList
+    :items="items"
+    unique-id="amelipro-accordion-result-list-hidden-labels"
+    title="Labels cachés"
+    hidden-labels
+  >
+    <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+      Contenu du résultat {{ id }}
+    </template>
+  </AmeliproAccordionResultList>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordionResultList } from '@cnamts/synapse'
+  const items = [
+    { id: 1, accordionTitle: 'Premier résultat' },
+    { id: 2, accordionTitle: 'Deuxième résultat' },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordionResultList },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Les labels des champs select sont masqués grâce à la prop <code>hiddenLabels</code>.</p>
+<AmeliproAccordionResultList v-bind="args">
+  <template #headingContent="{ accordionTitle }">
+      Header du {{ accordionTitle }}
+    </template>
+    <template #accordionContent="{ id }">
+    Contenu du résultat {{ id }}
+  </template>
+</AmeliproAccordionResultList>
+`,
+	}),
+}