add form properties and tailwind script

web/src/components/DynamicForm.vue

@@ -1,7 +1,8 @@
 <template>
-  <form @submit.prevent="handleSubmit" class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md mx-auto">
+  <form @submit.prevent="handleSubmit" class="">
+    <h3 v-if="!!formTitle" class="text-xl font-semibold mb-4">{{formTitle}}</h3>
     <div v-for="input in formInputs" :key="input.id" class="flex flex-col">
-<!--      if showLabel is undefined or set to true then show the label-->
+      <!-- if showLabel is undefined or set to true then show the label-->
       <label v-if="input.showLabel === undefined || input.showLabel" :for="input.id" class="mb-2 font-semibold text-gray-700">{{ input.label }}</label>
 
       <!-- Text, Email, Password, Number -->
@@ -95,13 +96,13 @@
 
     </div>
     <button type="submit" class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
-      Submit
+      {{ !!submitLabel ? submitLabel : 'Submit' }}
     </button>
   </form>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, defineEmits } from 'vue';
+import { reactive, ref } from 'vue';
 
 export interface FormInput {
   id: string;
@@ -116,7 +117,7 @@ export interface FormInput {
   options?: { label: string, value: string }[]; // For select, radio, and checkbox types
 }
 
-const props = defineProps<{ formInputs: FormInput[] }>();
+const props = defineProps<{ formInputs: FormInput[], submitLabel?: string, formTitle?: string }>();
 const emit = defineEmits(['send'])
 
 const formData = reactive<Record<string, any>>({});

web/src/components/FormBuilder.vue

@@ -2,12 +2,33 @@
   <div class="min-h-screen bg-gray-100 flex flex-row items-start p-4">
     <div class="flex-col flex-1 items-center justify-center p-4">
       <h2 class="text-xl font-bold mb-4">Form Builder</h2>
-      <DynamicForm :formInputs="formBuilderInputs" @send="handleFormBuilderSubmit" />
+      <div>
+        <DynamicForm
+            class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
+            :formInputs="formBuilderPropertiesInputs"
+            @send="handleFormPropertiesSubmit"
+            form-title="Form Properties"
+            submit-label="Update Form"
+        />
+      </div>
+      <div class="mt-6">
+        <DynamicForm
+            class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
+            :formInputs="formBuilderFieldInputs"
+            @send="handleFormBuilderSubmit"
+            form-title="Add a new field"
+        />
+      </div>
     </div>
 
     <div v-if="generatedFormInputs.length" class="flex-col flex-1 items-center justify-center p-4">
       <h2 class="text-xl font-bold mb-4">Generated Form</h2>
-      <DynamicForm :formInputs="generatedFormInputs" />
+      <DynamicForm
+          class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
+          :formInputs="generatedFormInputs"
+          :submitLabel="submitLabel"
+          :formTitle="formTitle"
+      />
     </div>
   </div>
 </template>
@@ -17,7 +38,32 @@ import { ref } from 'vue';
 import DynamicForm from './DynamicForm.vue';
 import type {FormInput} from "@/components/DynamicForm.vue";
 
-const formBuilderInputs = ref<FormInput[]>([
+const formBuilderPropertiesInputs = ref<FormInput[]>([
+  {
+    id: 'formTitle',
+    label: 'Form Title',
+    type: 'text',
+    required: false
+  },
+  {
+    id: 'formDescription',
+    label: 'Form Description',
+    type: 'textarea',
+    required: false
+  },
+  {
+    id: 'submitLabel',
+    label: 'Submit Button Label',
+    type: 'text',
+    required: false
+  }
+]);
+
+const formTitle = ref('');
+const formDescription = ref('');
+const submitLabel = ref('');
+
+const formBuilderFieldInputs = ref<FormInput[]>([
   {
     id: 'fieldType',
     label: 'Field Type',
@@ -107,6 +153,12 @@ const formBuilderInputs = ref<FormInput[]>([
 
 const generatedFormInputs = ref<FormInput[]>([]);
 
+const handleFormPropertiesSubmit = (formData: Record<string, any>) => {
+  formTitle.value = formData.formTitle;
+  formDescription.value = formData.formDescription;
+  submitLabel.value = formData.submitLabel;
+};
+
 const handleFormBuilderSubmit = (formData: Record<string, any>) => {
   const newField: FormInput = {
     id: formData.fieldID,
@@ -124,7 +176,7 @@ const handleFormBuilderSubmit = (formData: Record<string, any>) => {
   generatedFormInputs.value.push(newField);
 
   // Reset form builder fields
-  formBuilderInputs.value.forEach(input => {
+  formBuilderFieldInputs.value.forEach(input => {
     if (input.type === 'checkbox' || input.type === 'multi-input') {
       formData[input.id] = [];
       if (input.id === 'showLabel') { // showLabel should default to true