input

1<script setup lang="ts">
2import type { HTMLAttributes } from "vue"
3import { useVModel } from "@vueuse/core"
4import { cn } from "@/lib/utils"
5 
6const props = defineProps<{
7  defaultValue?: string | number
8  modelValue?: string | number
9  class?: HTMLAttributes["class"]
10}>()
11 
12const emits = defineEmits<{
13  (e: "update:modelValue", payload: string | number): void
14}>()
15 
16const modelValue = useVModel(props, "modelValue", emits, {
17  passive: true,
18  defaultValue: props.defaultValue,
19})
20</script>
21 
22<template>
23  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
24</template>