feat(form): add required notice (#600)

Author: manuelodelain

app/components/VForm.vue

@@ -221,6 +221,14 @@ const formattedSchema = computed(() => {
     return schema
 })
 
+// REQUIRED FIELDS
+const hasRequiredFields = computed(() => {
+    const required = formattedSchema.value?.required
+    if (required === true) return true
+
+    return Array.isArray(required) && required.length > 0
+})
+
 // CAPTCHA
 const captchaInputKey = computed(() => {
     const fieldKeys = Object.keys(toValue(formattedSchema.value?.properties) || {})
@@ -266,6 +274,13 @@ const isDisabled = computed(() => props.disabled || isPending.value || displayUs
             </button>
         </dialog>
         <slot name="beforeFields" />
+        <p
+            v-if="hasRequiredFields"
+            :class="$style['required-notice']"
+            class="text-body-xs"
+        >
+            {{ $t('form.required_fields_notice') }}
+        </p>
         <VFormElementFactory
             :id="id"
             v-model="model"
@@ -324,6 +339,11 @@ const isDisabled = computed(() => props.disabled || isPending.value || displayUs
     z-index: 1;
 }
 
+.required-notice {
+    color: rgb(117 117 117);
+    margin-block: 16px;
+}
+
 .error {
     margin-block: 18px;
 }

stories/app/components/VForm/NoRequiredFields.stories.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { JsonSchemaExtended } from '~~/types/json-schema'
+
+const schema = {
+    title: 'test',
+    type: 'object',
+    properties: {
+        'texte': {
+            type: 'string',
+            title: 'Texte',
+        },
+        'mail': {
+            type: 'string',
+            title: 'Votre mail',
+            attr: {
+                'data-group': null,
+            },
+            description: 'mais votre vrai mail',
+            widget: 'email',
+            propertyOrder: 2,
+        },
+        'frc-captcha-response': {
+            type: 'string',
+            title: 'captcha',
+        },
+    },
+    required: [],
+}
+</script>
+
+<template>
+    <NuxtStory>
+        <VForm
+            :schema="(schema as JsonSchemaExtended)"
+            :gdpr="false"
+            novalidate
+        />
+    </NuxtStory>
+</template>