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.
32 lines
1.1 KiB
32 lines
1.1 KiB
<template>
|
|
<label class="w-full border border-solid focus-within:border-primary rounded-lg relative flex">
|
|
<input
|
|
:id="id"
|
|
v-model="inner"
|
|
:name="name"
|
|
placeholder=" "
|
|
class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto"
|
|
/>
|
|
<span
|
|
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
|
|
>{{ label }} <span class="text-red-800 ml-1">*</span></span
|
|
>
|
|
</label>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from 'vue';
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const props = defineProps({
|
|
modelValue: {},
|
|
label: {},
|
|
id: {},
|
|
name: {},
|
|
});
|
|
|
|
const inner = computed({
|
|
get: () => props.modelValue,
|
|
set: (v) => emit('update:modelValue', v),
|
|
});
|
|
</script>
|