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

Add VDropdown for Group

This commit is contained in:
philipp lang 2024-06-17 00:22:33 +02:00
parent 039fd21969
commit 900690e0c5
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/fields/Group.vue
View File

@ -1,23 +1,19 @@
<template> <template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key"> <v-dropdown
<select
:id="innerId"
v-model="inner" v-model="inner"
:disabled="disabled" :label="field.name"
:id="field.key"
:name="field.key" :name="field.key"
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full" :options="options"
> :required="field.required"
<option :value="null">-- keine Angabe --</option> :allowcustom="false"
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option> :empty-option-value="field.empty_option_value"
<option v-if="field.has_empty_option" :value="-1" v-text="field.empty_option_value"></option> ></v-dropdown>
</select>
<field-label :name="field.name" :required="field.required"></field-label>
</label>
</template> </template>
<script setup> <script setup>
import {computed, ref, watch} from 'vue'; import {computed, ref, watch} from 'vue';
import FieldLabel from '../FieldLabel.vue'; import VDropdown from './VDropdown.vue';
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const props = defineProps({ const props = defineProps({
@ -44,8 +40,6 @@ const props = defineProps({
}, },
}); });
const innerId = computed(() => (props.id ? props.id : props.field.key));
const inner = computed({ const inner = computed({
get: () => props.modelValue, get: () => props.modelValue,
set: (v) => emit('update:modelValue', v), set: (v) => emit('update:modelValue', v),

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

@ -11,6 +11,7 @@
> >
<option :value="null">-- keine Angabe --</option> <option :value="null">-- keine Angabe --</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="emptyOptionValue" :value="-1" v-text="emptyOptionValue"></option>
</select> </select>
<input <input
v-if="allowcustom" v-if="allowcustom"
@ -25,7 +26,7 @@
<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" :required="required"></field-label>
</label> </label>
</div> </div>
</template> </template>
@ -39,7 +40,7 @@ const emit = defineEmits(['update:modelValue']);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
required: true, required: true,
validator: (value) => value === null || typeof value === 'string', validator: (value) => value === null || typeof value === 'string' || typeof value === 'number',
}, },
required: { required: {
required: false, required: false,
@ -50,6 +51,10 @@ const props = defineProps({
required: true, required: true,
type: String, type: String,
}, },
emptyOptionValue: {
required: false,
default: () => '',
},
id: { id: {
required: true, required: true,
type: String, type: String,