From 9ebb40b46d3fdea48142abdce9bcd43d6a94b813 Mon Sep 17 00:00:00 2001
From: jeanvier <damien.grossfeld@gmail.com>
Date: Tue, 19 Nov 2024 17:16:58 +0100
Subject: [PATCH] fix: date validation

---
 package.json                              |  2 +-
 playground/app.vue                        | 21 +++++----------------
 src/runtime/composables/validator.ts      |  9 +++++++--
 src/runtime/utils/validators/validator.ts | 12 ++++++++----
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index f0654f2..1cc10c2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@wgr-sa/nuxt-form",
   "description": "Form builder for Nuxt",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "repository": "https://github.com/WGR-SA/nuxt-form.git",
   "author": "jeanvier",
   "license": "MIT",
diff --git a/playground/app.vue b/playground/app.vue
index 01c0222..e8499a6 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -3,10 +3,8 @@
 // watchEffect(() => {
 //   if testForm.value.isReady()
 //     testForm.value.submit()
-
-import { max } from 'class-validator';
-
 // })
+
 </script>
 
 <template>
@@ -15,21 +13,12 @@ import { max } from 'class-validator';
       ref="testForm"
       action="https://httpbin.org/post"
     >
-      <!-- <FormInput 
+      <FormInput 
         name="asdf"
-        :rules="[ 'isEmail']"
-      /> -->
-      <FormSelect 
-        name="yo"
-        :options="{ 'O': 'Oui', 'N': 'Non'}"
-        :rules="['isNotEmpty']"
-        empty="-- Select an option --"
+        type="date"
+        :rules="[ {minDate: [new Date()]}]"
       />
-      <!-- <FormInput label='yo <a href="#">ok</a>' type="checkbox" name="tosnlpd" :rules="[{ equals: [true], message: 'coucou' }]" />
-      <FormInput name="yo" type="number" :rules="['isNotEmpty', {min: [1]}, {max: [25]}]" /> -->
-      <!-- <FormTextarea  name="saffs" :rules="['isNotEmpty']" /> -->
-      <!-- <FormRadio :options="{'O': 'Oui', 'N': 'Non'}" name="yo" laebl="Yo" />
-      <FormRadio :options="{'O': 'Oui', 'N': 'Non'}" name="yos" label="Yos" :rules="['isNotEmpty']" :empty="true" /> -->
+
       <FormSubmit>
         Submit 
       </FormSubmit>
diff --git a/src/runtime/composables/validator.ts b/src/runtime/composables/validator.ts
index 6eefe37..7a87dff 100644
--- a/src/runtime/composables/validator.ts
+++ b/src/runtime/composables/validator.ts
@@ -1,4 +1,3 @@
-import { ref } from 'vue'
 import * as validators from 'class-validator'
 import { Form } from '#imports'
 
@@ -21,7 +20,7 @@ export const useFormValidator = () => {
     switch (expectedType) {
       case 'number': return Number(value)
       case 'boolean': return value.toLowerCase() === 'true'
-      case 'date': return new Date(value)
+      case 'date': return value !== '' ? new Date(value) : null
       case 'array': return tryParseJSON(value) ?? value.split(',').map(item => item.trim())
       default: return value
     }
@@ -57,6 +56,12 @@ export const useFormValidator = () => {
           const expectedType = getExpectedType(validatorName)
           const convertedValue = convertValue(fieldValue, expectedType)
 
+          if (expectedType === 'date') {
+            if (!(rule.$params.options[0] instanceof Date)) {
+              rule.$params.options[0] = new Date(rule.$params.options[0])
+            }
+          }
+
           if (!validator(convertedValue, ...(rule.$params.options || [])) &&
             (fieldValue.length > 0 && fieldValue !== 'false' || ['error', 'validate'].includes(form.state.status))) {
             errors.push(rule.custom_message ?? rule.$message)
diff --git a/src/runtime/utils/validators/validator.ts b/src/runtime/utils/validators/validator.ts
index 438ebb2..3e3648f 100644
--- a/src/runtime/utils/validators/validator.ts
+++ b/src/runtime/utils/validators/validator.ts
@@ -21,10 +21,14 @@ export class FormValidator {
         rule.$message = messages.get(rule.$params.type, 'validators') ?? rule.$message
 
         if (rule.$params.options) {
-          if (['minDate', 'maxDate'].includes(rule.$params.type))  {
-            rule.$params.options[0] = new Date().toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }).replace(',', '')
-          }
-          Object.keys(rule.$params.options).map((param) => rule.$message = rule.$message.replace(`{${param}}`, rule.$params.options[param]))
+          
+          Object.keys(rule.$params.options).map((param) => {
+            let validationLabelValue = rule.$params.options[param]
+            if (['minDate', 'maxDate'].includes(rule.$params.type)) {
+              validationLabelValue = new Date(rule.$params.options[param]).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(',', '')
+            }
+            rule.$message = rule.$message.replace(`{${param}}`, validationLabelValue)
+          })
         }
       })
     })