Files
site/resources/js/Shared/Form/TextInput.vue

46 lines
1.0 KiB
Vue
Executable File

<template>
<label v-if="label" class="text-gray-light text-lg mb-2"
:for="id"
>{{ label }}:</label>
<input :id="id" ref="input"
v-bind="$attrs" :class="{ error: error }"
:type="type" :value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
<div v-if="error" class="text-red text-sm">
{{ error }}
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
default() {
return `select-input-${Math.random() * 1000}`
},
},
type: {
type: String,
default: 'text',
},
modelValue: [String, Number],
label: String,
error: String,
},
emits: ['update:modelValue'],
methods: {
focus() {
this.$refs.input.focus()
},
select() {
this.$refs.input.select()
},
setSelectionRange(start, end) {
this.$refs.input.setSelectionRange(start, end)
},
},
}
</script>