@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/DataListGroup/DataListGroup.stories.ts

@@ -332,8 +332,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataListGroup } from '@cnamts/synapse'
+					import { ref } from 'vue'
 										
-					const items = [
+					const items = ref([
 						{
 							title: 'Informations patient',
 							items: [
@@ -374,7 +375,7 @@ export const ActionBtn: Story = {
 								},
 							],
 						},
-					]
+					])
 					
 					const updateBirthdate = (eventValue: object) => {
 						items.value[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'

package/src/components/DataListItem/DataListItem.vue

@@ -111,25 +111,25 @@
 
 <style lang="scss" scoped>
 .vd-row {
-  display: flex;
-  flex-wrap: wrap;
+	display: flex;
+	flex-wrap: wrap;
 
-  .vd-data-list-item-label {
-    align-self: center;
+	.vd-data-list-item-label {
+		align-self: center;
 
-    &::after {
-      content: ':';
-      margin: 0 4px;
-    }
-  }
+		&::after {
+			content: ':';
+			margin: 0 4px;
+		}
+	}
 }
 
 .vd-data-list-item-action-btn.v-btn {
-  min-width: 0;
-  margin: 0 -1px;
+	min-width: 0;
+	margin: 0 -1px;
 }
 
 .v-icon.v-theme--light {
-  color: rgba(0, 0, 0, 0.54);
+	color: rgb(0 0 0 / 54%);
 }
 </style>

package/src/components/DatePicker/DatePicker.mdx

@@ -0,0 +1,191 @@
+import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import * as DatePickerStories from "./DatePicker.stories.ts";
+
+<Meta of={DatePickerStories}/>
+
+# DatePicker
+
+Le composant `DatePicker` est un champ de saisie de date qui combine un champ de texte et un sélecteur de date. Il permet de saisir une date manuellement ou de la sélectionner via un calendrier, avec support pour les plages de dates.
+
+<Canvas story={{height: '550px'}} of={DatePickerStories.Default}/>
+
+# API
+
+<Controls of={DatePickerStories.Default}/>
+
+# Props
+
+## Valeur et contrôle
+
+### modelValue
+- **Type** : `string | string[]`
+- **Description** : La valeur du champ. Pour une plage de dates, utiliser un tableau de deux dates. La valeur doit être fournie dans le même format que celui spécifié dans la prop `format`.
+- **Défaut** : `undefined`
+
+### placeholder
+- **Type** : `string`
+- **Description** : Texte indicatif affiché quand le champ est vide
+- **Défaut** : `'Sélectionner une date'`
+
+### format
+- **Type** : `string`
+- **Description** : Format d'affichage et d'entrée de la date. Supporte les formats suivants :
+- `DD` : jour sur 2 chiffres
+- `MM` : mois sur 2 chiffres
+- `YYYY` : année sur 4 chiffres
+- `YY` : année sur 2 chiffres (assumé comme 20XX)
+Les séparateurs peuvent être `/`, `-` ou `.`
+- **Défaut** : `'DD/MM/YYYY'`
+
+### dateFormatReturn
+- **Type** : `string`
+- **Description** : Format de la date pour la valeur de retour. Utilise les mêmes tokens que la prop `format`. Si non spécifié, utilise le même format que `format`.
+- **Défaut** : `''`
+
+<div
+    style={{
+        border: '2px solid #FF0000',
+        padding: '1rem',
+        borderRadius: '4px',
+        marginBottom: '1rem',
+    }}
+>
+    <strong>Note importante sur les formats</strong>
+    <p>
+        Le composant utilise deux formats distincts :
+    </p>
+    <ol>
+        <li>
+            <strong>Format d'entrée/affichage</strong><br/>
+            Défini par la prop <code>format</code>, il détermine à la fois :
+            <ul>
+                <li>Le format dans lequel la date doit être fournie au composant</li>
+                <li>Comment la date est affichée visuellement dans le champ</li>
+            </ul>
+        </li>
+        <li>
+            <strong>Format de retour</strong><br/>
+            Défini par la prop <code>dateFormatReturn</code>, il détermine le format de la date émise
+        </li>
+    </ol>
+    <p>
+        Par exemple, avec <code>format="DD-MM-YY"</code> et <code>dateFormatReturn="YYYY/MM/DD"</code> :
+    </p>
+    <ul>
+        <li>Vous devez fournir la date au format : <code>24-12-25</code></li>
+        <li>Elle sera affichée comme : <code>24-12-25</code></li>
+        <li>Elle sera retournée comme : <code>2025/12/24</code></li>
+    </ul>
+</div>
+
+
+
+### required
+- **Type** : `boolean`
+- **Description** : Indique si le champ est obligatoire
+- **Défaut** : `false`
+
+### isDisabled
+- **Type** : `boolean`
+- **Description** : Désactive le champ
+- **Défaut** : `false`
+
+## Configuration du calendrier
+
+### isBirthDate
+- **Type** : `boolean`
+- **Description** : Active le mode date de naissance (commence par la sélection de l'année)
+- **Défaut** : `false`
+
+### isOutlined
+- **Type** : `boolean`
+- **Description** : Active le style de champ de saisie "outlined" (bordure) plutôt que "underlined" (fond)
+- **Défaut** : `true`
+
+### showWeekNumber
+- **Type** : `boolean`
+- **Description** : Affiche les numéros de semaine dans le calendrier
+- **Défaut** : `false`
+
+### displayRange
+- **Type** : `boolean`
+- **Description** : Active la sélection d'une plage de dates
+- **Défaut** : `false`
+
+### noCalendar
+- **Type** : `boolean`
+- **Description** : Désactive l'affichage du calendrier (saisie manuelle uniquement)
+- **Défaut** : `false`
+
+## Apparence
+
+### displayIcon
+- **Type** : `boolean`
+- **Description** : Affiche l'icône de calendrier
+- **Défaut** : `false`
+
+### displayAppendIcon
+- **Type** : `boolean`
+- **Description** : Affiche l'icône à la fin du champ plutôt qu'au début
+- **Défaut** : `false`
+
+### noIcon
+- **Type** : `boolean`
+- **Description** : Masque toutes les icônes
+- **Défaut** : `false`
+
+## Validation
+
+### customRules
+- **Type** : `{ type: string, options: RuleOptions }[]`
+- **Description** : Règles de validation personnalisées
+- **Défaut** : `[]`
+
+### customWarningRules
+- **Type** : `{ type: string, options: RuleOptions }[]`
+- **Description** : Règles d'avertissement personnalisées
+- **Défaut** : `[]`
+
+# Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+</script>
+
+<template>
+	<DatePicker
+		v-model="date"
+		placeholder="Sélectionner une date"
+		format="DD/MM/YYYY"
+		required
+	/>
+</template>
+`}
+/>
+
+## Exemple avec plage de dates
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const dateRange = ref(['', ''])
+</script>
+
+<template>
+	<DatePicker
+		v-model="dateRange"
+		placeholder="Sélectionner une période"
+		format="DD/MM/YYYY"
+		display-range
+	/>
+</template>
+`}
+/>