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

Add datalist for dropdown

This commit is contained in:
philipp lang 2024-04-17 20:23:42 +02:00
parent 4db01b7bc6
commit 846f2697d3
1 changed files with 18 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,34 +1,34 @@
<template> <template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id"> <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
<select <select
v-if="selected !== 'custom-value-selected'" v-if="!allowcustom"
:name="name" :name="name"
:id="id" :id="id"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left peer 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" 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="selected" v-model="inner"
> >
<option :value="null">-- kein --</option> <option :value="null">-- kein --</option>
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option> <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
<option v-if="allowcustom" value="custom-value-selected">eigene Eingabe</option>
</select> </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"
type="text"
:list="`${id}-list`"
v-model="inner"
/>
<datalist v-if="allowcustom" :id="`${id}-list`">
<option>lala</option>
</datalist>
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full"> <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
<hint :value="hint"></hint> <hint :value="hint"></hint>
</div> </div>
<field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label> <field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
<input
v-if="selected === 'custom-value-selected'"
:id="`${id}-custom-value`"
v-model="customValue"
:name="`${id}-custom-value`"
placeholder="eigener Wert"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
/>
</label> </label>
</template> </template>
<script setup> <script setup>
import {computed, ref, watch} from 'vue'; import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue'; import FieldLabel from '../FieldLabel.vue';
import Hint from '../Hint.vue'; import Hint from '../Hint.vue';
@ -66,25 +66,12 @@ const props = defineProps({
}, },
allowcustom: { allowcustom: {
required: true, required: true,
validator: (value) => typeof value === 'boolean', type: Boolean,
}, },
}); });
const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected'); const inner = computed({
watch(selected, (newValue) => { get: () => props.modelValue,
customValue.value = newValue === 'custom-value-selected' ? '' : newValue; set: (v) => emit('update:modelValue', v),
});
const customValue = computed({
get: () => {
if (selected.value === 'custom-value-selected') {
return props.modelValue;
}
return '';
},
set: (v) => {
return emit('update:modelValue', v);
},
}); });
</script> </script>