39 lines
896 B
Vue
39 lines
896 B
Vue
<template>
|
|
<div class="space-y-1">
|
|
<label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
|
|
<input
|
|
:id="id"
|
|
:value="props.modelValue"
|
|
:type="props.type"
|
|
:placeholder="props.placeholder"
|
|
class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
|
|
@input="onInput"
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
modelValue?: string
|
|
type?: string
|
|
label?: string
|
|
placeholder?: string
|
|
id?: string
|
|
}>(), {
|
|
modelValue: '',
|
|
type: 'text',
|
|
label: '',
|
|
placeholder: '',
|
|
id: undefined,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
function onInput(event: Event) {
|
|
const target = event.target as HTMLInputElement
|
|
emit('update:modelValue', target.value)
|
|
}
|
|
</script>
|