first commit

pages/nested/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <IndexPage />
+</template>

pages/nested/menu1.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useFormTest } from '~/composables/forms/test'
+import { JsonForms } from '@jsonforms/vue'
+import { vuetifyRenderers } from '@jsonforms/vue-vuetify'
+
+definePageMeta({
+  title: 'Test Form',
+  icon: 'mdi-animation',
+})
+
+const { schema, uischema, data } = useFormTest()
+
+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>
+  <!-- <pre>{{ typeof schema }}</pre>
+  <pre>{{ schema }}</pre> -->
+</template>

pages/nested/menu2.vue

@@ -0,0 +1,31 @@
+<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>

pages/nested/menu3.vue

@@ -0,0 +1,7 @@
+<script>
+definePageMeta({
+  title: 'Menu 3',
+  icon: 'mdi-animation',
+})
+</script>
+<template></template>

pages/nested/menu3/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <IndexPage />
+</template>

pages/nested/menu3/menu1.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Menu1 Form',
+  icon: 'mdi-animation',
+})
+
+const api_data = useFetch('/api/forms/basic/data')
+const api_i18n = useFetch('/api/forms/basic/i18n')
+const api_schema = useFetch('/api/forms/basic/schema')
+const api_uischema = useFetch('/api/forms/basic/uischema')
+
+// In Vue 3, markRaw is used directly without needing to import it from a specific package
+// const renderers = markRaw([
+//   ...extendedVuetifyRenderers,
+//   // here you can add custom renderers
+// ]);
+
+// Using ref for reactive data in Vue 3
+const data = ref(api_data) // You'll need to replace this with your actual data
+const schema = ref(api_schema) // Replace with your actual schema
+const uischema = ref(api_uischema) // Replace with your actual UI schema
+
+// Event handlers are defined as functions in the setup
+// const onChange = (event) => {
+//   data.value = event.data;
+// };
+
+const demo = {
+  properties: {
+    firstName: {
+      type: 'string',
+      description: "The person's first name.",
+    },
+    lastName: {
+      type: 'string',
+      description: "The person's last name.",
+    },
+    age: {
+      description: 'Age in years which must be equal to or greater than zero.',
+      type: 'integer',
+      minimum: 0,
+    },
+  },
+}
+
+var form = document.getElementById('vuetify-json-forms')
+// form.setAttribute("schema", JSON.stringify(demo));
+
+// type="module"
+// src="https://cdn.jsdelivr.net/npm/@chobantonov/jsonforms-vuetify-webcomponent@3.5.1/dist/vuetify-json-forms.min.js"
+</script>
+
+<template>
+  <vuetify-json-forms id="vuetify-json-forms"></vuetify-json-forms>
+  <v-container fluid> {{ data.data }} </v-container>
+  <v-container fluid> {{ api_i18n.data }} </v-container>
+  <v-container fluid> {{ schema.data }} </v-container>
+  <v-container fluid> {{ uischema.data }} </v-container>
+</template>

pages/nested/menu3/menu2-2.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Menu 2-2',
+  icon: 'mdi-animation',
+})
+</script>
+<template>
+  <v-container fluid> empty page </v-container>
+</template>

pages/nested/menu3/vuetify-form.vue

@@ -0,0 +1,67 @@
+<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>