mirror of
https://github.com/web3privacy/explorer-app.git
synced 2024-10-15 16:46:26 +02:00
82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
|
<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>
|