Wiki

resources/js/components/ui/input/Input.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
+import { ref } from "vue"
 import { cn } from "@/lib/utils"
 
 const props = defineProps<{
@@ -13,15 +13,22 @@ const emits = defineEmits<{
   (e: "update:modelValue", payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
+const inputElement = ref<HTMLInputElement | null>(null)
+
+defineExpose({ inputElement })
+
+function handleInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  emits("update:modelValue", input.value)
+}
 </script>
 
 <template>
   <input
-    v-model="modelValue"
+    ref="inputElement"
+    :value="modelValue ?? defaultValue ?? ''"
+    v-bind="$attrs"
+    @input="handleInput"
     data-slot="input"
     :class="cn(
       'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',