Some form generator stuff

ui/src/App.vue

@@ -3,6 +3,7 @@ import { RouterLink, RouterView } from 'vue-router';
 import Separator from './components/ui/separator/Separator.vue';
 import Button from './components/ui/button/Button.vue';
 import Application from './pages/Application.vue';
+import AutoForm from './components/form/AutoForm.vue';
 </script>
 
 <template>
@@ -15,6 +16,7 @@ import Application from './pages/Application.vue';
     </div>
     <Separator></Separator>
     <Application></Application>
+     <!-- <AutoForm class="max-w-3xl mx-auto my-20"></AutoForm> -->
   </div>
 </template>
 

ui/src/components/form/AutoForm.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue';
+import { toTypedSchema } from '@vee-validate/zod';
+import { Form } from 'vee-validate';
+import { onMounted, ref } from 'vue';
+import * as z from 'zod';
+import FormInput from './FormInput.vue';
+import FormCheckboxs from './FormCheckbox.vue';
+
+const formSchema = toTypedSchema(z.object({
+    name: z.string(),
+    other: z.boolean(),
+}))
+
+const initialValues = ref<Record<string, unknown> | null>(null);
+
+async function onSubmit(val: any) {
+    console.log(val);
+    // emit('submit', val);
+}
+
+enum FormTypes {
+    Checkbox = "FormCheckbox",
+    Text = "FormInput"
+}
+
+const schema = [
+    {
+        name: "name",
+        label: "What is your name?",
+        description: "Something something name name",
+        readOnly: false,
+        type: FormTypes.Text
+    },
+    {
+        name: "other",
+        label: "This is a checkbox",
+        description: "This is a description",
+        readOnly: false,
+        type: FormTypes.Checkbox
+    }
+]
+
+</script>
+
+<template>
+    <Form :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit" class="space-y-6">
+        <component v-for="field in schema" :is="field.type" :description="field.description" :label="field.label"
+            :read-only="field.readOnly" :name="field.name"></component>
+        <!-- <FormInput v-for="field in schema" :description="field.description" :label="field.label"
+            :read-only="field.readOnly" :name="field.name"></FormInput> -->
+        <div class="pt-2">
+            <Button type="submit" :onClick="() => console.log('hi')">Submit</Button>
+        </div>
+    </Form>
+</template>

ui/src/components/form/FormCheckbox.vue

@@ -0,0 +1,45 @@
+<script setup>
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form'
+import Input from '../ui/input/Input.vue';
+import Checkbox from '../ui/checkbox/Checkbox.vue';
+
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    readOnly: {
+        type: Boolean,
+        default: false
+    }
+});
+
+</script>
+
+<template>
+    <FormField :name="props.name" v-slot="{ value, handleChange }">
+        <FormItem>
+            <FormLabel>{{ props.label }}</FormLabel>
+            <FormDescription>{{ props.description }}</FormDescription>
+            <FormControl>
+                <Checkbox :checked="value ?? false" @update:checked="handleChange" :disabled="props.readOnly" />
+            </FormControl>
+            <FormMessage />
+        </FormItem>
+    </FormField>
+</template>

ui/src/components/form/FormInput.vue

@@ -0,0 +1,44 @@
+<script setup>
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form'
+import Input from '../ui/input/Input.vue';
+
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    readOnly: {
+        type: Boolean,
+        default: false
+    }
+});
+
+</script>
+
+<template>
+    <FormField :name="props.name" v-slot="{ value, handleChange }">
+        <FormItem>
+            <FormLabel>{{ props.label }}</FormLabel>
+            <FormDescription>{{ props.description }}</FormDescription>
+            <FormControl>
+                <Input :model-value="value" @update:model-value="handleChange" :disabled="props.readOnly" />
+            </FormControl>
+            <FormMessage />
+        </FormItem>
+    </FormField>
+</template>

ui/src/main.js

@@ -5,10 +5,15 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import FormCheckbox from './components/form/FormCheckbox.vue'
+import FormInput from './components/form/FormInput.vue'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 
+app.component("FormInput", FormInput)
+app.component("FormCheckbox", FormCheckbox)
+
 app.mount('#app')