129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<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>
|