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

9
src/components/Accordion.vue
View File

@ -1,9 +1,12 @@
<template>
<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>
<chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
</a>
<div class="flex items-center space-x-2">
<slot name="buttons"></slot>
<chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
</div>
</div>
<div v-if="modelValue === index" class="p-2 pt-0">
<slot />
</div>

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

@ -90,6 +90,11 @@
</p>
<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">
<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">
<template v-for="(memberField, memberIndex) in memberFields">
<v-checkbox
@ -206,6 +211,7 @@ import useEventMeta from '../../composables/useEventMeta.js';
import Pagination from '../Pagination.vue';
import Accordion from '../Accordion.vue';
import useColumns from '../../composables/useColumns.js';
import DeleteIcon from '../icons/DeleteIcon.vue';
const eventMeta = useEventMeta();
const {colClassesForField, containerClassesSm} = useColumns();
@ -235,6 +241,10 @@ const step = computed(() => {
const openValue = ref(-1);
function deleteMember(index) {
inner.value = inner.value.toSpliced(index, 1);
}
const membersAccepted = ref(false);
const membersCompleted = ref(false);
const emit = defineEmits(['update:modelValue']);

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

@ -9,13 +9,14 @@
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
fill="currentColor"
>
<g>
<g>
<path
d="M486.4,102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36,0-25.6,10.24-25.6,25.6v76.8h-128
C10.24,102.4,0,112.64,0,128s10.24,25.6,25.6,25.6h460.8c15.36,0,25.6-10.24,25.6-25.6S501.76,102.4,486.4,102.4z M307.2,102.4
H204.8V51.2h102.4V102.4z"
C10.24,102.4,0,112.64,0,128s10.24,25.6,25.6,25.6h460.8c15.36,0,25.6-10.24,25.6-25.6S501.76,102.4,486.4,102.4z M307.2,102.4
H204.8V51.2h102.4V102.4z"
/>
</g>
</g>
@ -23,10 +24,10 @@
<g>
<path
d="M25.6,204.8l48.64,284.16c2.56,12.8,12.8,23.04,25.6,23.04h312.32c12.8,0,23.04-10.24,25.6-23.04L486.4,204.8H25.6z
M153.6,460.8c-15.36,0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6l25.6,153.6
C179.2,450.56,168.96,460.8,153.6,460.8z M281.6,435.2c0,15.36-10.24,25.6-25.6,25.6s-25.6-10.24-25.6-25.6V281.6
c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6V435.2z M384,435.2c0,15.36-10.24,25.6-25.6,25.6
c-15.36,0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6L384,435.2z"
M153.6,460.8c-15.36,0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6l25.6,153.6
C179.2,450.56,168.96,460.8,153.6,460.8z M281.6,435.2c0,15.36-10.24,25.6-25.6,25.6s-25.6-10.24-25.6-25.6V281.6
c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6V435.2z M384,435.2c0,15.36-10.24,25.6-25.6,25.6
c-15.36,0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6L384,435.2z"
/>
</g>
</g>