<script setup lang="ts">
import { ref } from 'vue'
import { DynamicForm } from '@quickflo/quickforms-vue'
import { createQuasarRegistry } from '@quickflo/quickforms-quasar'
import type { JSONSchema } from '@quickflo/quickforms'

const registry = createQuasarRegistry()

const schema: JSONSchema = {
  type: 'object',
  properties: {
    name: { 
      type: 'string', 
      title: 'Full Name',
      minLength: 2 
    },
    email: { 
      type: 'string', 
      format: 'email', 
      title: 'Email' 
    },
    age: {
      type: 'number',
      title: 'Age',
      minimum: 18
    }
  },
  required: ['name', 'email']
}

const formData = ref({})

// formData updates automatically as user types!
// Use it however you want: display, send to API, etc.
</script>

<template>
  <DynamicForm 
    :schema="schema" 
    v-model="formData"
    :options="{ registry }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DynamicForm } from '@quickflo/quickforms-vue'
import type { JSONSchema } from '@quickflo/quickforms'

const schema: JSONSchema = { /* same schema as above */ }
const formData = ref({})
</script>

<template>
  <DynamicForm 
    :schema="schema" 
    v-model="formData"
  />
</template>