From 9dd7e615e97b6bf3c4c4096edd35a86ca3cfd53c Mon Sep 17 00:00:00 2001
From: Gerben Mulder <github.undergo381@passmail.net>
Date: Mon, 14 Oct 2024 12:45:15 +0200
Subject: [PATCH] feat(Input/Textarea): nullify model modifier (#2309)

---
 src/runtime/components/forms/Input.vue    | 8 ++++++--
 src/runtime/components/forms/Textarea.vue | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 73dacb9f..d9b37d92 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -158,7 +158,7 @@ export default defineComponent({
       default: () => ({})
     },
     modelModifiers: {
-      type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
+      type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean, nullify?: boolean }>,
       default: () => ({})
     }
   },
@@ -172,7 +172,7 @@ export default defineComponent({
 
     const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
 
-    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
+    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false, nullify: false }))
 
     const input = ref<HTMLInputElement | null>(null)
 
@@ -193,6 +193,10 @@ export default defineComponent({
         value = looseToNumber(value)
       }
 
+      if (modelModifiers.value.nullify) {
+        value ||= null
+      }
+
       emit('update:modelValue', value)
       emitFormInput()
     }
diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue
index 921f05e6..cded0721 100644
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -127,7 +127,7 @@ export default defineComponent({
       default: () => ({})
     },
     modelModifiers: {
-      type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
+      type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean, nullify?: boolean }>,
       default: () => ({})
     }
   },
@@ -137,7 +137,7 @@ export default defineComponent({
 
     const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config)
 
-    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
+    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false, nullify: false }))
 
     const textarea = ref<HTMLTextAreaElement | null>(null)
 
@@ -183,6 +183,10 @@ export default defineComponent({
         value = looseToNumber(value)
       }
 
+      if (modelModifiers.value.nullify) {
+        value ||= null
+      }
+
       emit('update:modelValue', value)
       emitFormInput()
     }