53 lines
2.1 KiB
Vue
53 lines
2.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
modelValue: [String, Boolean, Number],
|
|
id: String,
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
label: String,
|
|
placeholder: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
textareaHeight: {
|
|
type: String,
|
|
default: null,
|
|
}
|
|
});
|
|
defineEmits(['update:model-value']);
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="['flex w-full', (type === 'checkbox' ? 'flex-row gap-2 items-center bg-gray-200 px-2 py-2 rounded-md' : 'flex-col gap-1')]">
|
|
<label v-if="id"
|
|
:for="id"
|
|
class="text-gray-500">{{ label }}</label>
|
|
<textarea v-if="type === 'textarea'"
|
|
:id="id"
|
|
:class="['w-full min-w-full max-w-full h-[200px] min-h-[200px] px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
|
|
:value="modelValue"
|
|
@input="$emit('update:model-value', $event.target.value)"
|
|
:placeholder="placeholder"></textarea>
|
|
<input v-else-if="type === 'checkbox'"
|
|
:id="id"
|
|
:checked="modelValue"
|
|
@input="$emit('update:model-value', $event.target.checked)"
|
|
:true-value="true"
|
|
:false-value="false"
|
|
type="checkbox" />
|
|
<input v-else
|
|
:id="id"
|
|
:class="['w-full px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
|
|
:type="type"
|
|
:value="modelValue"
|
|
@input="$emit('update:model-value', $event.target.value)"
|
|
:placeholder="placeholder" />
|
|
<span class="text-red-400" v-if="error">{{ error }}</span>
|
|
</div>
|
|
</template> |