23 lines
998 B
Vue
23 lines
998 B
Vue
<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>
|
|
<template></template>
|
|
<div class="m-1">
|
|
<label v-if="title" class="pe-4">{{ title }}</label>
|
|
<input @input="err = false" class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" :class="{ 'input-has-error': !!err }" v-model="model"
|
|
v-bind="$attrs" />
|
|
<span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
|
|
</div>
|
|
</template> |