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

Add: delete member in third step

This commit is contained in:
philipp lang 2024-06-18 01:48:52 +02:00
parent a4e9f3af0b
commit b76fc8133e
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Accordion.vue
View File

@ -1,9 +1,12 @@
<template> <template>
<box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type"> <box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type">
<a href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2"> <div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2">
<div v-text="title"></div> <div v-text="title"></div>
<div class="flex items-center space-x-2">
<slot name="buttons"></slot>
<chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron> <chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
</a> </div>
</div>
<div v-if="modelValue === index" class="p-2 pt-0"> <div v-if="modelValue === index" class="p-2 pt-0">
<slot /> <slot />
</div> </div>

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

@ -90,6 +90,11 @@
</p> </p>
<div class="grid gap-2 mt-6"> <div class="grid gap-2 mt-6">
<accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="info"> <accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="info">
<template #buttons>
<a @click.prevent.stop="deleteMember(index)" href="#">
<delete-icon class="w-3 h-3 text-red-700"></delete-icon>
</a>
</template>
<div class="mt-2" :class="containerClassesSm"> <div class="mt-2" :class="containerClassesSm">
<template v-for="(memberField, memberIndex) in memberFields"> <template v-for="(memberField, memberIndex) in memberFields">
<v-checkbox <v-checkbox
@ -206,6 +211,7 @@ import useEventMeta from '../../composables/useEventMeta.js';
import Pagination from '../Pagination.vue'; import Pagination from '../Pagination.vue';
import Accordion from '../Accordion.vue'; import Accordion from '../Accordion.vue';
import useColumns from '../../composables/useColumns.js'; import useColumns from '../../composables/useColumns.js';
import DeleteIcon from '../icons/DeleteIcon.vue';
const eventMeta = useEventMeta(); const eventMeta = useEventMeta();
const {colClassesForField, containerClassesSm} = useColumns(); const {colClassesForField, containerClassesSm} = useColumns();
@ -235,6 +241,10 @@ const step = computed(() => {
const openValue = ref(-1); const openValue = ref(-1);
function deleteMember(index) {
inner.value = inner.value.toSpliced(index, 1);
}
const membersAccepted = ref(false); const membersAccepted = ref(false);
const membersCompleted = ref(false); const membersCompleted = ref(false);
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);

1
src/components/icons/DeleteIcon.vue
View File

@ -9,6 +9,7 @@
viewBox="0 0 512 512" viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512" style="enable-background: new 0 0 512 512"
xml:space="preserve" xml:space="preserve"
fill="currentColor"
> >
<g> <g>
<g> <g>