<script setup lang="ts">
interface Prop
{
    error?: string | boolean;
    title: string;
}
const props = defineProps<Prop>();
const model = defineModel<string>();

const err = ref<string | boolean | undefined>(props.error);

watchEffect(() => err.value = props.error);
</script>

<template>
    <div class="input-group">
        <label v-if="title" class="input-label">{{ title }}</label>
        <input @input="err = false" class="input-input" :class="{ 'input-has-error': !!err }" v-model="model"
            v-bind="$attrs" />
        <span v-if="err && typeof err === 'string'" class="input-error">{{ err }}</span>
    </div>
</template>