remove the old slot

Author: danielmoessner

src/App.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup lang="ts">
-import CP1 from "./views/FormFieldsTest.vue";
+import CP1 from "./views/ModalFormTest.vue";
 </script>

src/components/FormCheckbox.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="ml-3 text-sm">
         <label
-          :for="option.name"
+          :for="`${id}-${index}`"
           class="font-medium text-gray-700 cursor-pointer"
         >
           {{ option.name }}

src/components/FormGenerator.vue

@@ -20,18 +20,17 @@
           <slot :name="name" v-bind="slotData" />
         </template>
       </FormFields>
-      <slot name="bottom" />
       <div class="flex items-center justify-end pt-2 print:hidden">
-        <ButtonBlue v-if="submit" type="submit" :loading="loading">
+        <ButtonNormal v-if="submit" type="submit" :loading="loading">
           {{ submit }}
-        </ButtonBlue>
+        </ButtonNormal>
       </div>
     </div>
   </form>
 </template>
 
 <script lang="ts" setup>
-import ButtonBlue from "./ButtonNormal.vue";
+import ButtonNormal from "./ButtonNormal.vue";
 import { ref, toRefs } from "vue";
 import { RequestFunction } from "../types/shared";
 import { FormField } from "../types/form";

src/components/ModalCreate.vue

@@ -16,8 +16,8 @@
       @cancel="$emit('update:modelValue', false)"
       @change="$emit('change', $event)"
     >
-      <template #bottom>
-        <slot name="bottom" />
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
       </template>
     </FormGenerator>
   </ModalFree>

src/components/ModalForm.vue

@@ -4,9 +4,6 @@
     :title="title"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <p v-if="$slots.default" class="mb-5 text-sm text-gray-500 break-words">
-      <slot />
-    </p>
     <FormGenerator
       :fields="fields"
       :data="data"
@@ -17,7 +14,11 @@
       @success="$emit('success', $event)"
       @cancel="$emit('update:modelValue', false)"
       @change="$emit('change', $event)"
-    />
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </FormGenerator>
   </ModalFree>
 </template>
 

src/components/ModalUpdate.vue

@@ -16,8 +16,8 @@
       @cancel="emit('update:modelValue', false)"
       @change="emit('change', $event)"
     >
-      <template #bottom>
-        <slot name="bottom" />
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
       </template>
     </FormGenerator>
   </ModalFree>

src/views/ModalFormTest.vue

@@ -20,11 +20,20 @@ const open = ref(true);
 
 const fields: FormField[] = [
   {
-    label: "Force Delete",
+    label: "Options",
     name: "force_delete",
     type: "checkbox",
-    helptext:
-      "If this checkbox is set the content inside the data sheets will be deleted as well.",
+    helptext: "These options add conditions on how to delete the object.",
+    options: [
+      {
+        name: "Force Delete",
+        value: "force_delete",
+      },
+      {
+        name: "Delete Instantly",
+        value: "delete_instantly",
+      },
+    ],
   },
 ];
 </script>