silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dropdown options

This commit is contained in:
philipp lang 2024-04-17 20:33:09 +02:00
parent 846f2697d3
commit e495031999
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/fields/VDropdown.vue
View File

@ -2,23 +2,23 @@
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
<select
v-if="!allowcustom"
:name="name"
:id="id"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
v-model="inner"
:name="name"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
>
<option :value="null">-- kein --</option>
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
</select>
<input
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
v-if="allowcustom"
v-model="inner"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
type="text"
:list="`${id}-list`"
v-model="inner"
/>
<datalist v-if="allowcustom" :id="`${id}-list`">
<option>lala</option>
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
</datalist>
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
<hint :value="hint"></hint>