initial commit

web/src/App.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+import DynamicForm from './components/DynamicForm.vue';
+import { ref } from 'vue';
+import FormBuilder from "@/components/FormBuilder.vue";
+
+// const formInputs = ref([
+//   {
+//     id: 'username',
+//     label: 'Username',
+//     type: 'text',
+//     defaultValue: '',
+//     required: true
+//   },
+//   {
+//     id: 'email',
+//     label: 'Email',
+//     type: 'email',
+//     defaultValue: '',
+//     required: true
+//   },
+//   {
+//     id: 'password',
+//     label: 'Password',
+//     type: 'password',
+//     defaultValue: '',
+//     required: true
+//   },
+//   {
+//     id: 'bio',
+//     label: 'Bio',
+//     type: 'textarea',
+//     defaultValue: '',
+//     required: false
+//   },
+//   {
+//     id: 'age',
+//     label: 'Age',
+//     type: 'number',
+//     defaultValue: '18',
+//     required: true,
+//     min: '18',
+//     max: '100'
+//   },
+//   {
+//     id: 'favoriteColor',
+//     label: 'Favorite Color',
+//     type: 'color',
+//     defaultValue: '#000000',
+//     required: false
+//   },
+//   {
+//     id: 'birthDate',
+//     label: 'Birth Date',
+//     type: 'date',
+//     defaultValue: '',
+//     required: true
+//   },
+//   {
+//     id: 'appointmentTime',
+//     label: 'Appointment Time',
+//     type: 'time',
+//     defaultValue: '',
+//     required: true
+//   },
+//   {
+//     id: 'category',
+//     label: 'Category',
+//     type: 'select',
+//     required: true,
+//     options: [
+//       { label: 'Option 1', value: 'option1' },
+//       { label: 'Option 2', value: 'option2' },
+//       { label: 'Option 3', value: 'option3' }
+//     ]
+//   },
+//   {
+//     id: 'interests',
+//     label: 'Interests',
+//     type: 'checkbox',
+//     required: false,
+//     options: [
+//       { label: 'Interest 1', value: 'interest1' },
+//       { label: 'Interest 2', value: 'interest2' },
+//       { label: 'Interest 3', value: 'interest3' }
+//     ]
+//   },
+//   {
+//     id: 'preferredContactMethod',
+//     label: 'Preferred Contact Method',
+//     type: 'radio',
+//     required: true,
+//     options: [
+//       { label: 'Email', value: 'email' },
+//       { label: 'Phone', value: 'phone' }
+//     ]
+//   },
+//   {
+//     id: 'tags',
+//     label: 'Tags',
+//     type: 'multi-input',
+//     defaultValue: '',
+//     required: false
+//   }
+// ]);
+</script>
+
+<template>
+  <header>
+
+    <div class="wrapper">
+<!--      <HelloWorld msg="You did it!" />-->
+<!--      <DynamicForm :formInputs="formInputs" />-->
+      <FormBuilder />
+
+<!--      <nav>-->
+<!--        <RouterLink to="/">Home</RouterLink>-->
+<!--        <RouterLink to="/about">About</RouterLink>-->
+<!--      </nav>-->
+    </div>
+  </header>
+
+<!--  <RouterView />-->
+</template>
+
+<style scoped>
+</style>