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

Add intro for dropdown

This commit is contained in:
philipp lang 2024-06-10 16:51:21 +02:00
parent 3907395506
commit 3848b79d08
2 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/fields/Dropdown.vue
View File

@ -1,5 +1,15 @@
<template> <template>
<v-dropdown v-model="inner" :label="field.name" :id="innerId" :name="innerId" :options="innerOptions" :required="field.required" :hint="field.hint" :allowcustom="field.allowcustom"></v-dropdown> <v-dropdown
v-model="inner"
:label="field.name"
:id="innerId"
:name="innerId"
:options="innerOptions"
:required="field.required"
:hint="field.hint"
:allowcustom="field.allowcustom"
:intro="field.intro"
></v-dropdown>
</template> </template>
<script setup> <script setup>

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

@ -1,30 +1,33 @@
<template> <template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id"> <div>
<select <div class="text-sm text-gray-600 pb-3" v-text="intro" v-if="intro"></div>
v-if="!allowcustom" <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
:id="id" <select
v-model="inner" 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"
<option :value="null">-- keine Angabe --</option> 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 v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option> >
</select> <option :value="null">-- keine Angabe --</option>
<input <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
v-if="allowcustom" </select>
v-model="inner" <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"
type="text" v-model="inner"
:list="`${id}-list`" 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"
<datalist v-if="allowcustom" :id="`${id}-list`"> :list="`${id}-list`"
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option> />
</datalist> <datalist v-if="allowcustom" :id="`${id}-list`">
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full"> <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
<hint :value="hint"></hint> </datalist>
</div> <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
<field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label> <hint :value="hint"></hint>
</label> </div>
<field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
</label>
</div>
</template> </template>
<script setup> <script setup>
@ -68,6 +71,10 @@ const props = defineProps({
required: true, required: true,
type: Boolean, type: Boolean,
}, },
intro: {
required: false,
default: () => '',
},
}); });
const inner = computed({ const inner = computed({