68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
title: 'Vuetify Form',
|
|
icon: 'mdi-animation',
|
|
})
|
|
|
|
import { ref, provide, onBeforeMount } from 'vue'
|
|
import { JsonForms } from '@jsonforms/vue'
|
|
|
|
import {
|
|
vuetifyRenderers,
|
|
defaultStyles,
|
|
mergeStyles,
|
|
} from '@jsonforms/vue-vuetify'
|
|
|
|
const renderers = Object.freeze([
|
|
...vuetifyRenderers,
|
|
// here you can add custom renderers
|
|
])
|
|
|
|
var uischema = useFetch('/api/forms/example/uischema').data
|
|
var schema = useFetch('/api/forms/example/schema').data
|
|
|
|
console.log(JSON.parse(schema.trim))
|
|
|
|
// onBeforeMount(async () => {
|
|
// uischema = JSON.stringify(useFetch('/api/forms/example/uischema').data)
|
|
// console.log(uischema)
|
|
// // schema = JSON.stringify(useFetch('/api/forms/example/schema'))
|
|
// // console.log(schema)
|
|
// })
|
|
|
|
const data = ref({
|
|
name: 'Send email to Adrian',
|
|
description: 'Confirm if you have passed the subject\nHereby ...',
|
|
done: true,
|
|
recurrence: 'Daily',
|
|
rating: 3,
|
|
})
|
|
|
|
const onChange = (event: JsonFormsChangeEvent) => {
|
|
data.value = event.data
|
|
}
|
|
|
|
// mergeStyles combines all classes from both styles definitions into one
|
|
const myStyles = mergeStyles(defaultStyles, { control: { label: 'mylabel' } })
|
|
|
|
// Provide styles to child components
|
|
provide('styles', myStyles)
|
|
</script>
|
|
|
|
<template>
|
|
<img alt="Vue logo" src="./assets/logo.png" />
|
|
<h1>JSON Forms Vue 3</h1>
|
|
<!-- <div class="myform">
|
|
<json-forms
|
|
:data="data"
|
|
:renderers="renderers"
|
|
:schema="schema"
|
|
:uischema="uischema"
|
|
@change="onChange"
|
|
/>
|
|
</div> -->
|
|
<pre>{{ data }}</pre>
|
|
<pre>{{ typeof schema }}</pre>
|
|
<pre>{{ schema }}</pre>
|
|
</template>
|