@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/PaginatedTable/tests/__snapshots__/PaginatedTable.spec.ts.snap

@@ -0,0 +1,249 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PaginatedTable > render correctly in server mode 1`] = `
+"<div id="paginated-table">
+  <div class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
+    <!---->
+    <div class="v-table__wrapper">
+      <table>
+        <!---->
+        <thead>
+          <!---->
+        </thead>
+        <!---->
+        <tbody>
+          <!---->
+          <tr class="v-data-table-rows-no-data">
+            <td colspan="0">No data available</td>
+          </tr>
+          <!---->
+        </tbody>
+        <!---->
+        <!---->
+      </table>
+    </div>
+    <hr class="v-divider v-theme--light" aria-orientation="horizontal" role="separator">
+    <div class="v-data-table-footer">
+      <!---->
+      <div class="v-data-table-footer__items-per-page"><span>Items per page:</span>
+        <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected">
+          <!---->
+          <div class="v-input__control">
+            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-outlined v-theme--light v-locale--is-ltr" role="combobox">
+              <div class="v-field__overlay"></div>
+              <div class="v-field__loader">
+                <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                  <!---->
+                  <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+                  <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+                  <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                    <div class="v-progress-linear__indeterminate">
+                      <div class="v-progress-linear__indeterminate long"></div>
+                      <div class="v-progress-linear__indeterminate short"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class="v-field__field" data-no-activator="">
+                <!---->
+                <!---->
+                <!---->
+                <div class="v-field__input" data-no-activator="">
+                  <!---->
+                  <!---->
+                  <div class="v-select__selection"><span class="v-select__selection-text">10<!----></span></div><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" inputmode="none" aria-label="Open" title="Open" value="10">
+                </div>
+                <!---->
+              </div>
+              <!---->
+              <div class="v-field__append-inner">
+                <!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+              <div class="v-field__outline">
+                <div class="v-field__outline__start"></div>
+                <!---->
+                <div class="v-field__outline__end"></div>
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div class="v-data-table-footer__info">
+        <div>0-0 of 0</div>
+      </div>
+      <div class="v-data-table-footer__pagination">
+        <nav class="v-pagination v-theme--light" role="navigation" aria-label="Pagination Navigation" data-test="v-pagination-root">
+          <ul class="v-pagination__list">
+            <li class="v-pagination__first" data-test="v-pagination-first"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="First page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__prev" data-test="v-pagination-prev"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Previous page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__next" data-test="v-pagination-next"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Next page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__last" data-test="v-pagination-last"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Last page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`PaginatedTable > renders correctly in local mode 1`] = `
+"<div id="paginated-table" items="[object Object],[object Object],[object Object]" headers="[object Object],[object Object],[object Object]">
+  <div class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
+    <!---->
+    <div class="v-table__wrapper">
+      <table>
+        <!---->
+        <thead>
+          <tr>
+            <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+              <div class="v-data-table-header__content"><span>ID</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+            </th>
+            <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+              <div class="v-data-table-header__content"><span>Name</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+            </th>
+            <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+              <div class="v-data-table-header__content"><span>Age</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+            </th>
+          </tr>
+          <!---->
+        </thead>
+        <!---->
+        <tbody>
+          <!---->
+          <tr class="v-data-table__tr">
+            <td class="v-data-table__td v-data-table-column--align-start">1</td>
+            <td class="v-data-table__td v-data-table-column--align-start">John Doe</td>
+            <td class="v-data-table__td v-data-table-column--align-start">25</td>
+          </tr>
+          <!---->
+          <tr class="v-data-table__tr">
+            <td class="v-data-table__td v-data-table-column--align-start">2</td>
+            <td class="v-data-table__td v-data-table-column--align-start">Jane Doe</td>
+            <td class="v-data-table__td v-data-table-column--align-start">30</td>
+          </tr>
+          <!---->
+          <tr class="v-data-table__tr">
+            <td class="v-data-table__td v-data-table-column--align-start">3</td>
+            <td class="v-data-table__td v-data-table-column--align-start">John Smith</td>
+            <td class="v-data-table__td v-data-table-column--align-start">35</td>
+          </tr>
+          <!---->
+          <!---->
+        </tbody>
+        <!---->
+        <!---->
+      </table>
+    </div>
+    <hr class="v-divider v-theme--light" aria-orientation="horizontal" role="separator">
+    <div class="v-data-table-footer">
+      <!---->
+      <div class="v-data-table-footer__items-per-page"><span>Items per page:</span>
+        <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected">
+          <!---->
+          <div class="v-input__control">
+            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-outlined v-theme--light v-locale--is-ltr" role="combobox">
+              <div class="v-field__overlay"></div>
+              <div class="v-field__loader">
+                <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                  <!---->
+                  <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+                  <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+                  <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                    <div class="v-progress-linear__indeterminate">
+                      <div class="v-progress-linear__indeterminate long"></div>
+                      <div class="v-progress-linear__indeterminate short"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class="v-field__field" data-no-activator="">
+                <!---->
+                <!---->
+                <!---->
+                <div class="v-field__input" data-no-activator="">
+                  <!---->
+                  <!---->
+                  <div class="v-select__selection"><span class="v-select__selection-text">10<!----></span></div><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" inputmode="none" aria-label="Open" title="Open" value="10">
+                </div>
+                <!---->
+              </div>
+              <!---->
+              <div class="v-field__append-inner">
+                <!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+              <div class="v-field__outline">
+                <div class="v-field__outline__start"></div>
+                <!---->
+                <div class="v-field__outline__end"></div>
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div class="v-data-table-footer__info">
+        <div>1-3 of 3</div>
+      </div>
+      <div class="v-data-table-footer__pagination">
+        <nav class="v-pagination v-theme--light" role="navigation" aria-label="Pagination Navigation" data-test="v-pagination-root">
+          <ul class="v-pagination__list">
+            <li class="v-pagination__first" data-test="v-pagination-first"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="First page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__prev" data-test="v-pagination-prev"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Previous page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__next" data-test="v-pagination-next"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Next page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__last" data-test="v-pagination-last"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Last page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/src/components/PaginatedTable/types.ts

@@ -0,0 +1,30 @@
+export type SortOption = {
+	key: string
+	order: 'desc' | 'asc'
+}
+
+export type GroupOption = {
+	key: string
+	order: 'desc' | 'asc'
+}
+
+export interface DataOptions {
+	page: number
+	itemsPerPage: number
+	sortBy: SortOption[]
+	groupBy?: GroupOption[]
+	multiSort?: boolean
+	mustSort?: boolean
+}
+
+export interface PaginatedTableProps {
+	items: unknown[]
+	headers: DataTableHeaders
+	options: DataOptions
+}
+
+export type DataTableHeaders = {
+	title?: string
+	value?: string
+	key?: string
+}

package/src/components/PasswordField/PasswordField.mdx

@@ -1,70 +1,152 @@
-import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
-import * as PasswordFieldStories from './PasswordField.stories';
-import PasswordField from './PasswordField.vue';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
+import * as PasswordFieldStories from './PasswordField.stories'
 
-<Meta title="Composants/Formulaires/PasswordField" component={PasswordField}/>
+<Meta of={PasswordFieldStories} />
 
 # PasswordField
 
-Le composant `PasswordField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
-Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.
 
-<Canvas story={{height: '150px'}} of={PasswordFieldStories.Default}/>
+## Utilisation basique
 
-# API
+La version de base du composant avec le style outlined par défaut.
 
-<Controls of={PasswordFieldStories.Default}/>
+<Canvas of={PasswordFieldStories.Default} />
 
-## Utilisation de base
+## Fonctionnalités principales
+
+- **Masquage/affichage du mot de passe** : Une icône permet de basculer entre l'affichage en clair et masqué
+- **Validation personnalisable** : Support des messages d'erreur, d'avertissement et de succès
+- **Styles configurables** : Choix entre les styles `outlined` et `underlined`
+- **États spéciaux** : Support des états désactivé et lecture seule
+- **Validation automatique** : Validation à la perte de focus configurable
+
+## API
+
+<Controls of={PasswordFieldStories.Default} />
+
+<Source
+    dark code={`
+<template>
+	<PasswordField
+		v-model="password"
+		label="Mot de passe"
+	/>
+</template>
 
-    <Source
-        dark
-        code={`
 <script setup lang="ts">
-    import { ref } from 'vue'
-    import { PasswordField } from '@cnamts/synapse'
-
-    const password = ref('')
-    const passwordFieldRef = ref() // Référence Vue pour accéder au composant enfant
-
-    function handleSubmit() {
-    // Appeler la méthode exposée validateOnSubmit via la référence
-    const isValid = passwordFieldRef.value?.validateOnSubmit()
-    if (!isValid) {
-    alert('Veuillez corriger les erreurs avant de soumettre.')
-} else {
-    alert('Formulaire soumis avec succès !')
-}
-}
-</script>
+import { ref } from 'vue'
+import { PasswordField } from '@cnamts/synapse'
 
-    <template>
-      <form @submit.prevent="handleSubmit">
-        <PasswordField
-          ref="passwordFieldRef"
-          v-model="password"
-          outlined
-          :is-validate-on-blur="true"
-        />
-        <button type="submit">Soumettre</button>
-      </form>
-    </template>
+const password = ref('')
+</script>
 `}
 />
 
-## Gestion de la validation
+## Validation
+
+### Validation simple
+
+Le composant peut être requis et afficher un message d'erreur si le champ est vide.
+
+<Canvas of={PasswordFieldStories.Required} />
+
+### Validation avancée
+
+Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).
+
+<Canvas of={PasswordFieldStories.WithValidation} />
+
+### Exemples d'états de validation
+
+<div className="sb-grid">
+  <div>
+    <h4>Avec erreur</h4>
+    <Canvas of={PasswordFieldStories.WithError} />
+  </div>
+  <div>
+    <h4>Avec avertissement</h4>
+    <Canvas of={PasswordFieldStories.WithWarning} />
+  </div>
+  <div>
+    <h4>Avec succès</h4>
+    <Canvas of={PasswordFieldStories.WithSuccess} />
+  </div>
+</div>
+
+### Validation de formulaire
+
+Le composant expose une méthode `validateOnSubmit` pour valider le champ lors de la soumission d'un formulaire.
+
+<Canvas of={PasswordFieldStories.WithFormValidation} />
+
+<Source
+    dark code={`
+<template>
+	<form @submit.prevent="handleSubmit">
+		<PasswordField
+			ref="passwordFieldRef"
+			v-model="password"
+			required
+			:custom-rules="customRules"
+		/>
+		<button type="submit">Valider</button>
+	</form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PasswordField } from '@cnamts/synapse'
+
+const password = ref('')
+const passwordFieldRef = ref()
+
+const customRules = [{
+	type: 'custom',
+	options: {
+		message: 'Le mot de passe doit contenir au moins 8 caractères',
+		validate: (value: string) => value.length >= 8
+	}
+}]
+
+function handleSubmit() {
+	const isValid = passwordFieldRef.value?.validateOnSubmit()
+	if (!isValid) {
+		// Gérer l'erreur
+		return
+	}
+	// Continuer avec la soumission
+}
+</script>
+`}
+/>
 
-### Validation par défaut
+### Méthodes exposées
 
-- **required** : Si `true`, le champ est obligatoire et affiche une erreur si le champ est vide.
-- **isValidateOnBlur** : Si `true`, la validation se déclenche automatiquement lors du blur (perte de focus).
+Le composant expose les méthodes et propriétés suivantes via `defineExpose` :
 
-### Règles de validation personnalisées (props `customRules`)
+- **showEyeIcon** : (ref) Contrôle l'affichage du mot de passe
+- **errors** : (ref) Liste des erreurs de validation actuelles
+- **warnings** : (ref) Liste des avertissements actuels
+- **successes** : (ref) Liste des messages de succès actuels
+- **validateOnSubmit** : () => boolean - Méthode pour valider le champ, retourne true si valide
 
-Vous pouvez définir des règles de validation personnalisées sous forme de tableau d’objets.
+## Bonnes pratiques
 
-Pour savoir comment utiliser les règles personnalisées, veuillez consulter la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).
+1. **Validation progressive** :
+   - Utilisez `isValidateOnBlur` pour une validation en temps réel
+   - Combinez erreurs, avertissements et succès pour guider l'utilisateur
 
+2. **Messages clairs** :
+   - Utilisez des messages d'erreur explicites
+   - Fournissez des suggestions d'amélioration via les warnings
+   - Confirmez les bonnes pratiques avec les messages de succès
 
+3. **Accessibilité** :
+   - Toujours fournir un label explicite
+   - Utiliser la prop `required` quand nécessaire
+   - Considérer l'utilisation de `displayAsterisk` pour les champs requis
 
+## En savoir plus
 
+Pour plus d'informations sur l'utilisation des règles de validation, consultez la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).