[Feature]: add support for .lazy modifier in the input filed

[vince844]

Describe the feature

I'm trying to use the library https://github.com/jonathanpmartins/v-money3 with the Input field and I've noticed the library v-money3 uses v-model.lazy for binding like here <input :model-modifiers="{ number: true }" v-model.lazy="amount" v-money3="config" /> so maybe it would be helpful to add support for .lazy modifier in the input filed?

Can this be a possible solution?

<script setup lang="ts">
import { cn } from '@/lib/utils';
import { useVModel } from '@vueuse/core';
import type { HTMLAttributes } from 'vue';

const props = defineProps<{
    defaultValue?: string | number;
    modelValue?: string | number;
    class?: HTMLAttributes['class'];
    lazy?: boolean; // Aggiungi questa prop
}>();

const emits = defineEmits<{
    (e: 'update:modelValue', payload: string | number): void;
}>();

const modelValue = useVModel(props, 'modelValue', emits, {
    passive: true,
    defaultValue: props.defaultValue,
});

// Add lazy support
const handleInput = (event: Event) => {
    if (!props.lazy) {
        const target = event.target as HTMLInputElement;
        modelValue.value = target.value;
    }
};

const handleChange = (event: Event) => {
    if (props.lazy) {
        const target = event.target as HTMLInputElement;
        modelValue.value = target.value;
    }
};
</script>

<template>
    <input
        :value="modelValue"
        :class="
            cn(
                'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
                props.class,
            )
        "
        @input="handleInput"
        @change="handleChange"
    />
</template>

Additional information

• [ ] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[sadeghbarati]

Related PRs

• https://github.com/unovue/shadcn-vue/pull/190 (bad PR 😄)
• https://github.com/vuejs/core/pull/12913
• https://stackblitz.com/edit/vitejs-vite-cga23nxl?file=src%2Fcomponents%2FInputWithVueuseVModel.vue

Hi, I'm waiting for the Vue PR to be merged because with that PR, we don't need to redefine, predefined (built-in) Vue modifiers like lazy, trim and number in the component again