library/frontend/components/Form/Input.vue
2023-05-23 10:48:57 -07:00

39 lines
852 B
Vue

<script setup lang="ts">
defineProps<{label?: string, name:string, type?: string, modelValue: any}>()
defineEmits(['update:modelValue'])
</script>
<!----------------------------------------------------------------------------------- TEMPLATE ---->
<template>
<div>
<label v-if="label" :for="name">{{ label }}</label>
<!--suppress RequiredAttributes -->
<input
:id="name"
:type="type ?? 'text'"
:value="modelValue"
:name="name"
v-bind="$attrs"
@input="$emit('update:modelValue', $event.target.value)"
>
</div>
</template>
<!-------------------------------------------------------------------------------------- STYLE ---->
<style scoped lang="postcss">
div {
@apply mb-4 last:mb-0;
}
label {
@apply block;
}
input {
@apply bg-white bg-opacity-30;
@apply border-gradient;
}
</style>