You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.0 KiB
54 lines
1.0 KiB
<template>
|
|
<BaseInputText
|
|
:id="id"
|
|
:is-invalid="vuelidateProperty.$error"
|
|
:label="labelWithRequiredIfNeeded"
|
|
:model-value="modelValue"
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|
>
|
|
<template #errors>
|
|
<p
|
|
v-for="error in vuelidateProperty.$errors"
|
|
:key="error.$uid"
|
|
class="mt-1 text-error"
|
|
>
|
|
{{ error.$message }}
|
|
</p>
|
|
</template>
|
|
</BaseInputText>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BaseInputText from "./BaseInputText.vue"
|
|
import { computed } from "vue"
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
require: true,
|
|
default: "",
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
default: "",
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
vuelidateProperty: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(["update:modelValue"])
|
|
|
|
const labelWithRequiredIfNeeded = computed(() => {
|
|
if (Object.hasOwn(props.vuelidateProperty, "required")) {
|
|
return `* ${props.label}`
|
|
}
|
|
return props.label
|
|
})
|
|
</script>
|
|
|