Add: delete member in third step

src/components/Accordion.vue

@@ -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>
+            <div class="flex items-center space-x-2">
+                <slot name="buttons"></slot>
                 <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">
             <slot />
         </div>

src/components/fields/Nami.vue

@@ -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']);

src/components/icons/DeleteIcon.vue

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