56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<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> |