Untitled

<script setup>
import InputLabel from './InputLabel.vue'
import { ref } from 'vue'

const props = defineProps(['err'])

var data = ref('')
</script>

<template>
<div :class="{ 'c--field': true, 'err': props.err } ">
    <InputLabel :label="props.label"><slot /></InputLabel>
    <input type="text" />
    <span v-if="props.err">{{ props.err }}</span>
</div>
</template>

<style>
.c--field { 
    position: relative;
    height: 32px;
}
.c--field.err > input { 
    border-color: #ff4040;
    outline: none;
}
.c--field:has(input:focus) > label { color: #240488; }
.c--field > input {
    color: var(--clr--black);
    width: calc(100% - 24px);
    height: 28px;
    border: solid 2px var(--clr--black);
    border-radius: 5px;
    padding: 0 10px;
}
.c--field:has(input:focus):not(.err) > input { border-color: #240488; }
.c--field > span {
    color: #ff4040;
    font-size: 14px;
    padding: 0 10px;
}
</style>