@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproTextArea/__tests__/__snapshots__/AmeliproTextArea.spec.ts.snap

@@ -0,0 +1,174 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTextArea > render correctly 1`] = `
+<div
+  class="
+    amelipro-textarea
+    d-flex
+    flex-column
+  "
+  id="my-textarea-id-container"
+  style="margin-bottom: 12px;"
+>
+  <div class="
+    align-start
+    d-inline-flex
+  ">
+    <label
+      class="
+        amelipro-textarea__label
+        mr-2
+      "
+      for="my-textarea-id"
+      id="my-textarea-id-label"
+    >
+      Mon label
+      <!-- v-if -->
+    </label>
+  </div>
+  <div class="
+    amelipro-textarea-input
+    v-input
+    v-input--density-default
+    v-input--horizontal
+    v-locale--is-ltr
+    v-text-field
+    v-textarea
+    v-textarea--auto-grow
+    v-textarea--no-resize
+    v-theme--light
+  ">
+    <!---->
+    <div class="v-input__control">
+      <div class="
+        bg-ap-white
+        v-field
+        v-field--has-background
+        v-field--no-label
+        v-field--variant-outlined
+        v-locale--is-ltr
+        v-theme--light
+      ">
+        <div class="v-field__overlay"></div>
+        <div class="v-field__loader">
+          <div
+            aria-hidden="true"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            class="
+              v-locale--is-ltr
+              v-progress-linear
+              v-theme--light
+            "
+            role="progressbar"
+            style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+          >
+            <!---->
+            <div
+              class="
+                bg-ap-blue-darken-1
+                v-progress-linear__background
+              "
+              style="opacity: NaN;"
+            ></div>
+            <div
+              class="
+                bg-ap-blue-darken-1
+                v-progress-linear__buffer
+              "
+              style="opacity: NaN; width: 0%;"
+            ></div>
+            <transition-stub
+              appear="false"
+              css="true"
+              name="fade-transition"
+              persisted="false"
+            >
+              <div class="v-progress-linear__indeterminate">
+                <div class="
+                  bg-ap-blue-darken-1
+                  long
+                  v-progress-linear__indeterminate
+                "></div>
+                <div class="
+                  bg-ap-blue-darken-1
+                  short
+                  v-progress-linear__indeterminate
+                "></div>
+              </div>
+            </transition-stub>
+            <!---->
+          </div>
+        </div>
+        <!---->
+        <div
+          class="v-field__field"
+          data-no-activator=""
+        >
+          <!---->
+          <!---->
+          <!---->
+          <textarea
+            aria-describedby="my-textarea-id-error"
+            aria-required="false"
+            class="v-field__input"
+            id="my-textarea-id"
+            rows="5"
+          ></textarea>
+          <textarea
+            aria-hidden="true"
+            class="
+              v-field__input
+              v-textarea__sizer
+            "
+            id="my-textarea-id-sizer"
+            readonly=""
+          ></textarea>
+          <!---->
+        </div>
+        <!---->
+        <!---->
+        <div class="v-field__outline">
+          <div class="v-field__outline__start"></div>
+          <!---->
+          <div class="v-field__outline__end"></div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+    <div
+      aria-live="polite"
+      class="v-input__details"
+      id="my-textarea-id-messages"
+      role="alert"
+    >
+      <transition-group-stub
+        appear="false"
+        class="v-messages"
+        css="true"
+        name="slide-y-transition"
+        persisted="false"
+        tag="div"
+      >
+        <!---->
+      </transition-group-stub>
+      <!---->
+      <span></span>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="slide-y-transition"
+        persisted="false"
+      >
+        <div
+          class="v-counter"
+          style="display: none;"
+        >
+          0 / 255
+        </div>
+      </transition-stub>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Amelipro/AmeliproTextArea/types.d.ts

@@ -0,0 +1,4 @@
+export interface InputTextArea {
+	errorMessages: string[]
+	isValid: boolean
+}

package/src/components/Amelipro/AmeliproTextField/AmeliproTextField.mdx

@@ -0,0 +1,35 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproTextFieldStories from './AmeliproTextField.stories';
+
+<Meta of={AmeliproTextFieldStories} />
+
+# AmeliproTextField
+
+L’élément `AmeliproTextField` est utilisé pour afficher les champs textes dans les formulaires.
+
+<Canvas of={AmeliproTextFieldStories.Default}  />
+
+## API
+
+<Controls of={AmeliproTextFieldStories.Default} />
+
+## Usages
+
+### Libellé
+
+Le libellé est obligatoire, il se trouve au-dessus du champ ou sur la gauche. Il est court (sans verbe) et indique clairement le type d’information à saisir.
+
+### Placeholder
+Le placeholder aide les utilisateurs à comprendre quel type d’information saisir dans le champ, cependant son usage doit être limité pour ne pas rendre l’interface chargée et confuse de plus, il ne peut en aucun cas remplacer le libellé du champ.
+
+### Champ de saisie
+Il est recommandé de donner une largeur au champ alignée avec le type de saisie, de limiter les caractères à saisir et d’utiliser des paramètres pertinents par défaut. Exemple*: lors de la saisie d’un numéro de téléphone, suggérez des indicatifs téléphoniques en fonction de l’adresse IP de l’internaute.
+
+### Aide à la saisie
+
+Si vous avez besoin d’utiliser des données susceptibles de provoquer une incompréhension chez l’utilisateur (exemple : numéro de série de carte vitale, email, numéro de téléphone), vous devez fournir des informations d’aide pour guider l’utilisateur (c’est quoi et où la trouver, quel est le format attendu).
+Si l'utilisateur fait une erreur, il faut donner un exemple respectant le format dans le message d'erreur pour l'aider.
+
+
+

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

@@ -0,0 +1,238 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import AmeliproTextField from './AmeliproTextField.vue'
+
+const meta = {
+	argTypes: {
+		'append': { description: 'Permet d\'ajouter un élément juste après le champ' },
+		'ariaRequired': {
+			default: false,
+			description: 'Défini que le champ est obligatoire',
+			name: 'aria-required',
+			type: 'boolean',
+		},
+		'classes': { description: 'Classes à appliquer à la racine du composant' },
+		'clearable': { description: 'Affiche un bouton permettant de vider le champ' },
+		'counter': { description: 'Défini la valeur du compteur de caractères' },
+		'disabled': {	description: 'Désactive le champ de texte' },
+		'fullWidthErrorMsg': { description: 'Donne au messages d’erreurs la largeur totale du composant au lieu de la limiter à la largeur du champ' },
+		'globalMaxWidth': { description: 'Gère la largeur maximale du composant, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'globalMinWidth': { description: 'Gère la largeur minimale du composant, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'globalWidth': { description: 'Gère la largeur du composant, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'hideErrorMessage': { description: 'Masque ou affiche le message d’erreur, si la valeur est à "auto" le message ne sera rendu que s’il y en a un' },
+		'horizontal': { description: 'Passe le champ au format horizontal' },
+		'inputMaxWidth': { description: 'Gère la largeur maximale du champ, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'inputMinWidth': { description: 'Gère la largeur minimale du champ, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'label': { description: 'Défini le label du champ' },
+		'labelInfo': { description: 'Permet d\'ajouter des infos à la suite du libellé du champ' },
+		'labelMaxWidth': { description: 'Gère la largeur maximale du label, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'labelMinWidth': { description: 'Gère la largeur minimale du label, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
+		'maxDate': { description: 'Date limite maximale pour le champ (uniquement si type date), format attendu YYYY-MM-DD' },
+		'maxNumber': { description: 'Nombre maximal pour le champ (uniquement si type number)' },
+		'messagesToDisplay': { description: 'Messages à afficher' },
+		'minDate': { description: 'Date limite minimale pour le champ (uniquement si type date), format attendu YYYY-MM-DD' },
+		'minNumber': { description: 'Nombre minimal pour le champ (uniquement si type number)' },
+		'modelValue': { description: 'Défini la valeur du champ' },
+		'placeholder': { description: 'Placeholder du champ' },
+		'readonly': { description: 'Passe le champ de texte en lecture seule' },
+		'rules': {
+			description: 'Liste des règles à respecter pour valider le champ',
+			table: { type: 'ValidationRule[]' },
+		},
+		'type': { description: 'Type du champ' },
+		'uniqueId': { description: 'Défini un id pour le champ' },
+		'update:model-value': { description: 'Événement émis au changement du v-model' },
+		'validateOn': { description: 'Défini le moment où la validation du champ se fait, voir la documentation de Vuetify pour plus d’informtations' },
+	},
+	component: AmeliproTextField,
+	title: 'Composants/Amelipro/Formulaires/AmeliproTextField',
+} as Meta<typeof AmeliproTextField>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproTextField>
+
+export const Default: Story = {
+	args: {
+		label: 'Mon label',
+		modelValue: '',
+		uniqueId: 'text-example',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproTextField
+		v-model="model"
+		label="Label"
+		unique-id="text-example"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+			<AmeliproTextField
+				v-bind="args"
+				v-model="model"
+			/>
+		`,
+	}),
+}
+
+export const Date: Story = {
+	args: {
+		ariaRequired: true,
+		label: 'Mon label',
+		maxDate: '2024-02-20',
+		minDate: '2024-01-20',
+		modelValue: '',
+		type: 'date',
+		uniqueId: 'date-example',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproTextField
+		v-model="model"
+		aria-required
+		class="mt-2"
+		label="Mon label"
+		max-date="2024-02-20"
+		min-date="2024-01-20"
+		type="date"
+		unique-id="date-example"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+			<AmeliproTextField
+				:aria-required="args.ariaRequired"
+				class="mt-2"
+				:label="args.label"
+				:max-date="args.maxDate"
+				:min-date="args.minDate"
+				:type="args.type"
+				:unique-id="args.id"
+				v-bind="args"
+				v-model="model"
+			/>
+		`,
+	}),
+}
+
+export const Number: Story = {
+	args: {
+		ariaRequired: true,
+		label: 'Mon label',
+		maxNumber: '10',
+		minNumber: '0',
+		modelValue: '',
+		type: 'number',
+		uniqueId: 'number-example',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproTextField
+		v-model="model"
+		aria-required
+		class="mt-2"
+		label="Mon label"
+		max-number="10"
+		min-number="0"
+		type="number"
+		unique-id="number-example"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+			<AmeliproTextField
+				v-bind="args"
+				:aria-required="args.ariaRequired"
+				class="mt-2"
+				:label="args.label"
+				:max-number="args.maxNumber"
+				:min-number="args.minNumber"
+				:type="args.type"
+				:uniqueId="args.id"
+				v-model="model"
+			/>
+		`,
+	}),
+}