adapt the slot field

Author: danielmoessner

src/App.vue

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

src/components/FormFields.vue

@@ -63,8 +63,8 @@ const nestedGetError = (field: string) => {
         :placeholder="field.placeholder"
         @update:model-value="onUpdate([field.name], $event)"
       />
-      <template v-else-if="field.type === 'custom'">
-        <slot name="custom" :data="internalData" />
+      <template v-else-if="field.type === 'slot'">
+        <slot :name="field.name" :data="internalData" />
       </template>
       <FormSelect
         v-else-if="field.type === 'select'"

src/tests/FormFields.test.ts

@@ -0,0 +1,44 @@
+import FormFields from "../components/FormFields.vue";
+import { FormField } from "../types/form";
+import { mount } from "@vue/test-utils";
+
+const fields: FormField[] = [
+  {
+    name: "test01",
+    label: "Test 01",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "test02",
+    label: "Test 02",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "slot03",
+    type: "slot",
+  },
+];
+
+describe("form fields", () => {
+  it("has slot fields", async () => {
+    const text = "My Custom Slot Content";
+
+    const formfields = mount(FormFields, {
+      props: {
+        fields: fields,
+        onUpdate: () => {
+          /* do nothing */
+        },
+        data: {},
+        getError: () => undefined,
+      },
+      slots: {
+        slot03: text,
+      },
+    });
+
+    expect(formfields.text()).toContain(text);
+  });
+});

src/types/form.ts

@@ -13,23 +13,24 @@ export type FormOption = {
   value: string;
 };
 
-export interface IRawFormField {
+type BaseField = {
   label: string;
   name: string;
+  autocomplete?: string;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  helptext?: string;
+};
+
+type InputField = BaseField & {
   type:
-    | "multiple" // form multiple
-    | "list" // form list
-    | "select" // form select
     | "textarea" // form textarea
     | "toggle" // form checkbox
     | "file" // form file
     | "files" // form files
-    | "combobox" // form combobox
-    | "searchselect" // form searchselect
-    | "datalist" // form datalist
     | "custom"
     // form input
-    | "checkbox"
     | "button"
     | "color"
     | "date"
@@ -50,15 +51,22 @@ export interface IRawFormField {
     | "time"
     | "url"
     | "week";
-  autocomplete?: string;
-  disabled?: boolean;
-  required?: boolean;
-  placeholder?: string;
-  options?: FormOptionInput[];
-  room?: string;
-  helptext?: string;
-}
+};
+
+type OptionsField = BaseField & {
+  type:
+    | "multiple" // form multiple
+    | "list" // form list
+    | "select" // form select
+    | "combobox" // form combobox
+    | "searchselect" // form searchselect
+    | "datalist" // form datalist
+    | "checkbox";
+  options: FormOptionInput[];
+};
+
+type NestedField = { type: "fields"; name: string; fields: FormField[] };
+
+type SlotField = { type: "slot"; name: string };
 
-export type FormField =
-  | IRawFormField
-  | { type: "fields"; name: string; fields: FormField[] };
+export type FormField = InputField | OptionsField | NestedField | SlotField;

src/views/FormFieldsTest.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import FormFields from "../components/FormFields.vue";
+import { FormField } from "../types/form";
+
+const fields: FormField[] = [
+  {
+    name: "test01",
+    label: "Test 01",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "test02",
+    label: "Test 02",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "slot03",
+    type: "slot",
+  },
+];
+</script>
+
+<template>
+  <div class="max-w-md p-10">
+    <FormFields
+      :fields="fields"
+      :data="{}"
+      :on-update="() => {}"
+      :get-error="() => undefined"
+    >
+      <template #slot03>
+        <div class="bg-red-500">Slot 03</div>
+      </template>
+    </FormFields>
+  </div>
+</template>

src/views/ModalCreate.vue

@@ -5,7 +5,7 @@ import { ref } from "vue";
 import ModalCreate from "../components/ModalCreate.vue";
 
 const data = ref({});
-const request = (d) => Promise.reject({ title: "Command Not Found" });
+const request = () => Promise.reject({ title: "Command Not Found" });
 const modalOpen = ref(false);
 
 const fields: FormField[] = [