<script setup lang="ts">
import { JsonForms } from '@jsonforms/vue'
import { vuetifyRenderers } from '@jsonforms/vue-vuetify'
import { useFormBasic } from '~/composables/forms/basic'

definePageMeta({
  title: 'Basic Form',
  icon: 'mdi-animation',
})

const { schema, uischema, data } = useFormBasic()

const onChange = (event: JsonFormsChangeEvent) => {
  data.value = event.data
}
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>JSON Forms Vue 3</h1>
  <div class="myform">
    <json-forms
      :data="data"
      :renderers="vuetifyRenderers"
      :schema="schema"
      :uischema="uischema"
      @change="onChange"
    />
  </div>
  <pre>{{ data }}</pre>
</template>
