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

Add VRadio for nami

This commit is contained in:
philipp lang 2024-06-18 01:24:18 +02:00
parent fd02bdee18
commit 0aba0c8035
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/fields/Nami.vue
View File

@ -154,12 +154,24 @@
:intro="memberField.intro" :intro="memberField.intro"
:options="memberField.options" :options="memberField.options"
:label="memberField.name" :label="memberField.name"
:name="memberField.key" :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:id="memberField.key" :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:hint="memberField.hint" :hint="memberField.hint"
:class="colClassesForField(memberField)" :class="colClassesForField(memberField)"
v-model="member[memberField.key]" v-model="member[memberField.key]"
></v-checkboxes> ></v-checkboxes>
<v-radio
v-if="memberField.type === 'RadioField'"
:intro="memberField.intro"
:id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:required="memberField.required"
:allowcustom="memberField.allowcustom"
:options="memberField.options"
:label="memberField.name"
:hint="memberField.hint"
:class="colClassesForField(memberField)"
v-model="member[memberField.key]"
></v-radio>
</template> </template>
</div> </div>
</accordion> </accordion>
@ -187,6 +199,7 @@ import useFields from '../../composables/useFieldsWithoutNami.js';
import Info from '../Info.vue'; import Info from '../Info.vue';
import VBtn from '../VBtn.vue'; import VBtn from '../VBtn.vue';
import VCheckbox from './VCheckbox.vue'; import VCheckbox from './VCheckbox.vue';
import VRadio from './VRadio.vue';
import Spinner from '../Spinner.vue'; import Spinner from '../Spinner.vue';
import useAdremaLogin from '../../composables/useAdremaLogin.js'; import useAdremaLogin from '../../composables/useAdremaLogin.js';
import useEventMeta from '../../composables/useEventMeta.js'; import useEventMeta from '../../composables/useEventMeta.js';

8
src/components/fields/VRadio.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="relative"> <div class="relative">
<field-label :name="label" :required="required" :hint="hint" :button="modelValue === null ? '' : 'Auswahl löschen'" @buttonclick="selected = null" inline></field-label> <field-label :name="label" :required="required" :hint="hint" :button="modelValue === null ? '' : 'Auswahl löschen'" @buttonclick="selected = null" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1"> <div class="grid grid-cols-1 gap-2 group-[.box]:gap-0 pt-1">
<div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div> <div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
<label v-for="(option, index) in innerOptions" :key="index" :for="`${id}-${index}`" class="block relative flex items-center"> <label v-for="(option, index) in innerOptions" :key="index" :for="`${id}-${index}`" class="block relative flex items-center">
<input :id="`${id}-${index}`" v-model="selected" type="radio" :name="id" :value="option.id" class="peer absolute invisible" /> <input :id="`${id}-${index}`" v-model="selected" type="radio" :name="id" :value="option.id" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span> <span
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span> class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded-full block top-0"
></span>
<span class="peer-checked:bg-primary left-2 group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded-full block"></span>
<span v-if="option.iscustom" class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6"> <span v-if="option.iscustom" class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
<input <input
:id="`${id}-custom-value`" :id="`${id}-custom-value`"