57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const id = useId();
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
}
|
|
});
|
|
|
|
// use `toRef` to create reactive references to `name` prop which is passed to `useField`
|
|
// this is important because vee-validte needs to know if the field name changes
|
|
// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
|
|
const name = toRef(props, 'name');
|
|
|
|
// we don't provide any rules here because we are using form-level validation
|
|
// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
|
|
const {
|
|
value: inputValue,
|
|
errorMessage,
|
|
handleBlur,
|
|
handleChange,
|
|
} = useField(name, undefined, {
|
|
initialValue: props.value,
|
|
});
|
|
|
|
const invalid = computed(() => errorMessage.value ? true : undefined);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-1 gap-2">
|
|
<FloatLabel variant="on">
|
|
<InputText
|
|
:id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur" @input="handleChange"
|
|
/>
|
|
<label :for="id">
|
|
{{ label }}
|
|
</label>
|
|
</FloatLabel>
|
|
<Message v-if="errorMessage" class="text-wrap">{{ errorMessage }}</Message>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |