feat(Input/Textarea): nullify model modifier (#2309)

nuxt · Oct 14, 2024 · 9dd7e61 · 9dd7e61
1 parent 33b9a44
commit 9dd7e61
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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()
     }