feat(Input): use defineModel (#61)

src/runtime/components/Input.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { InputHTMLAttributes } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
-import { defu } from 'defu'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input'
@@ -18,12 +17,6 @@ export interface InputProps extends UseComponentIconsProps {
   id?: string
   name?: string
   type?: InputHTMLAttributes['type']
-  modelValue?: string
-  modelModifiers?: {
-    trim?: boolean
-    lazy?: boolean
-    number?: boolean
-  }
   placeholder?: string
   color?: InputVariants['color']
   variant?: InputVariants['variant']
@@ -37,7 +30,6 @@ export interface InputProps extends UseComponentIconsProps {
 }
 
 export interface InputEmits {
-  (e: 'update:modelValue', value: string): void
   (e: 'blur', event: FocusEvent): void
 }
 
@@ -59,6 +51,9 @@ const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
   autofocusDelay: 100
 })
+
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
 const emit = defineEmits<InputEmits>()
 defineSlots<InputSlots>()
 
@@ -77,8 +72,6 @@ const ui = computed(() => tv({ extend: input, slots: props.ui })({
   trailing: isTrailing.value
 }))
 
-const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
-
 const inputRef = ref<HTMLInputElement | null>(null)
 
 function autoFocus () {
@@ -89,20 +82,20 @@ function autoFocus () {
 
 // Custom function to handle the v-model properties
 function updateInput (value: string) {
-  if (modelModifiers.value.trim) {
+  if (modelModifiers.trim) {
     value = value.trim()
   }
 
-  if (modelModifiers.value.number || props.type === 'number') {
+  if (modelModifiers.number || props.type === 'number') {
     value = looseToNumber(value)
   }
 
-  emit('update:modelValue', value)
+  modelValue.value = value
   emitFormInput()
 }
 
 function onInput (event: Event) {
-  if (!modelModifiers.value.lazy) {
+  if (!modelModifiers.lazy) {
     updateInput((event.target as HTMLInputElement).value)
   }
 }
@@ -110,12 +103,12 @@ function onInput (event: Event) {
 function onChange (event: Event) {
   const value = (event.target as HTMLInputElement).value
 
-  if (modelModifiers.value.lazy) {
+  if (modelModifiers.lazy) {
     updateInput(value)
   }
 
   // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
-  if (modelModifiers.value.trim) {
+  if (modelModifiers.trim) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 }

test/components/Input.spec.ts

@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import Input, { type InputProps } from '../../src/runtime/components/Input.vue'
 import ComponentRender from '../component-render'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 
 describe('Input', () => {
   it.each([
@@ -30,4 +31,36 @@ describe('Input', () => {
     const html = await ComponentRender(nameOrHtml, options, Input)
     expect(html).toMatchSnapshot()
   })
+
+  // See: https://github.com/nuxt/test-utils/issues/572
+  it.skip.each([
+    ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input  ', expected: 'input' } ],
+    ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 } ],
+    ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' } ]
+  ])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
+    const wrapper = await mountSuspended(Input, {
+      ...options
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue(spec.input)
+
+    expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[spec.expected]] })
+  })
+
+  // See: https://github.com/nuxt/test-utils/issues/572
+  test.skip('with .lazy modifier updates on change only', async () => {
+    const wrapper = await mountSuspended(Input, {
+      props: {
+        modelModifiers: { lazy: true }
+      }
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('update')
+    expect(wrapper.emitted()).toMatchObject({ })
+
+    await input.trigger('change')
+    expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['']] })
+  })
 })