explorer-app/components/Project/Create/Components/Input.vue

82 lines
1.7 KiB
Vue
Raw Normal View History

2024-09-12 18:03:06 +02:00
<script setup lang="ts">
export interface SelectProps {
label?: string
hint?: string
placeholder?: string
required?: boolean
modelValue?: any
textarea?: boolean
textareaRows?: number
lgWidth?: string
error?: string
}
defineProps<SelectProps>()
const model = defineModel<string>()
</script>
<template>
<div
class="w-full!"
flex
flex-col
gap-8px
>
<label
v-if="label"
font-400
text-14px
lg:text-16px
text-app-white
>
{{ label }}
<span
v-if="required"
text-app-danger
text-16px
>*</span>
</label>
<div
w-full
flex
flex-col
gap-8px
lg="flex flex-row gap-24px"
relative
>
<div v-bind="$attrs">
<textarea
v-if="textarea"
v-model="model"
:rows="textareaRows"
:placeholder="placeholder"
class="relative w-full p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6 focus:ring-0 focus:outline-none"
:class="error ? 'border-app-danger/50' : 'border-white/30'"
/>
<input
v-else
v-model="model"
:placeholder="placeholder"
type="text"
class="relative w-full p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6 focus:ring-0 focus:outline-none"
:class="error ? 'border-app-danger/50' : 'border-white/30'"
>
</div>
<span
v-if="hint"
lg="left-1/2 self-center"
v-bind="$attrs"
font-400
italic
lg:text-14px
text-12px
text-app-white
opacity-50
>
{{ hint }}
</span>
</div>
</div>
</template>