add initial implementation, update the monaco renderer to support map…

packages/example/package.json

@@ -34,6 +34,7 @@
     "json-refs": "^3.0.15",
     "lodash": "^4.17.15",
     "monaco-editor": "^0.49.0",
+    "ractive": "^1.4.4",
     "splitpanes": "^3.1.5",
     "vue": "^3.5.0",
     "vuetify": "^3.11.0"

packages/example/src/components/ExampleAppBar.vue

@@ -19,7 +19,7 @@ const { smAndUp } = useDisplay();
     <v-toolbar-title>
       <v-container fill-height fluid class="py-0 pr-0"
         ><v-row align="center" justify="center">
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <JsonFormsLogo
                 @click="appStore.exampleName = ''"
@@ -41,7 +41,7 @@ const { smAndUp } = useDisplay();
       <v-container fill-height fluid justify-end class="pa-0"
         ><v-row align="center" no-gutters class="fill-height">
           <v-col class="d-flex justify-center align-center" v-if="smAndUp">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn-toggle
                   v-bind="props"
@@ -67,7 +67,7 @@ const { smAndUp } = useDisplay();
             </v-tooltip>
           </v-col>
           <v-col class="d-flex justify-center align-center" v-if="smAndUp">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn-toggle
                   v-bind="props"
@@ -102,7 +102,7 @@ const { smAndUp } = useDisplay();
             v-if="smAndUp"
           ></v-divider>
           <v-col class="d-flex justify-center align-center">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn
                   icon
@@ -124,7 +124,7 @@ const { smAndUp } = useDisplay();
             <theme-switcher></theme-switcher>
           </v-col>
           <v-col class="d-flex justify-center align-center">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn
                   icon

packages/example/src/components/ExampleSettings.vue

@@ -278,7 +278,7 @@ const darkModeValue = computed({
       <v-row><v-col>Options</v-col></v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.hideRequiredAsterisk"
@@ -292,7 +292,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.showUnfocusedDescription"
@@ -306,7 +306,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.restrict"
@@ -321,7 +321,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.readonly"
@@ -335,7 +335,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.collapseNewItems"
@@ -349,7 +349,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.hideArraySummaryValidation"
@@ -363,7 +363,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.initCollapsed"
@@ -377,7 +377,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.hideAvatar"
@@ -391,7 +391,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="
@@ -405,6 +405,45 @@ const darkModeValue = computed({
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-combobox
+                v-model="
+                  appStore.jsonforms.config.filterErrorKeywordsBeforeTouch
+                "
+                label="Filter Error Keywords Before Touch"
+                placeholder="e.g., required, minLength, pattern"
+                chips
+                closable-chips
+                multiple
+                clearable
+                v-bind="props"
+              ></v-combobox>
+            </template>
+            Hide specific AJV error keywords until the control is touched.
+            Requires "Enable Filter Errors Before Touch".
+          </v-tooltip>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-switch
+                v-model="
+                  appStore.jsonforms.config.allowAdditionalPropertiesIfMissing
+                "
+                label="Allow Additional Properties By Default"
+                v-bind="props"
+              ></v-switch>
+            </template>
+            Allow adding additional properties when the schema does not specify
+            explicitly the addtionalProperties
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-container>
 
     <v-divider />

packages/example/src/components/ThemeSwitcher.vue

@@ -56,7 +56,7 @@ function switchTheme(themeName: string) {
 <template>
   <v-menu offset-y>
     <template v-slot:activator="{ props: menuProps }">
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template v-slot:activator="{ props: tooltipProps }">
           <v-btn
             icon

packages/example/src/core/jsonschema/specification/uischema.json

@@ -364,6 +364,9 @@
         "template": {
           "type": "string"
         },
+        "lang": {
+          "type": "string"
+        },
         "elements": {
           "$ref": "#/definitions/elements"
         },

packages/example/src/examples/button/uischema.json

@@ -44,6 +44,7 @@
         {
           "type": "TemplateLayout",
           "template": "<v-container class='pa-0 ma-0'><v-btn-toggle density='compact' v-tooltip=\"context.uidata.alert ? 'Hide Alert' : 'Show Alert'\" v-model='context.uidata.alert'><v-btn :value='true' :icon='context.uidata.alert ? \"mdi-message-alert\" : \"mdi-message-outline\"'></v-btn></v-btn-toggle><slot name='button'></slot></v-container>",
+          "lang": "vue",
           "elements": [
             {
               "type": "Button",

packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <array-layout-renderer v-bind="$props">
     <template v-slot:toolbar-elements="actionsProps">
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template v-slot:activator="{ props }">
           <v-btn
             color="primary"

packages/example/src/examples/index.ts

@@ -7,6 +7,7 @@ import { input as anyOfSimple } from './anyOf-simple';
 import { input as anyOfWithProps } from './anyOf-with-props';
 import { input as array } from './array';
 import { input as arrayRestrict } from './array-restrict';
+import { input as arrayType } from './array-type';
 import { input as arrayWithReorder } from './array-with-reorder';
 import { input as basic } from './basic';
 import { input as basicTypes } from './basic-types';
@@ -64,6 +65,7 @@ import { input as templateSlot } from './template-slot';
 import { input as time } from './time';
 import { input as verticalLayout } from './vertical-layout';
 import { input as verticalSplitLayout } from './vertical-split-layout';
+import { input as vueTemplateLayout } from './vue-template-layout';
 
 export * from './register';
 
@@ -77,6 +79,7 @@ export {
   anyOfWithProps,
   array,
   arrayRestrict,
+  arrayType,
   arrayWithReorder,
   basic,
   basicTypes,
@@ -134,4 +137,5 @@ export {
   time,
   verticalLayout,
   verticalSplitLayout,
+  vueTemplateLayout,
 };

packages/example/src/examples/job/uischema.json

@@ -1,19 +1,23 @@
 {
   "type": "TemplateLayout",
   "template": "<v-card class=\"main-form\" flat><slot name=\"toolbar\"></slot><v-container style=\"pa-0\" fluid><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot v-if=\"element.name != 'toolbar'\" :name=\"element.name\"></slot></v-col></v-row></v-container></v-card>",
+  "lang": "vue",
   "elements": [
     {
       "type": "TemplateLayout",
       "template": "<v-toolbar><v-toolbar-title>{{translate('Job Application', 'Job Application')}}</v-toolbar-title><v-toolbar-items class='d-flex align-center'><div v-for=\"element in elements\" :key=\"element.name\"><slot :name=\"element.name\"></slot></div></v-toolbar-items></v-toolbar>",
+      "lang": "vue",
       "name": "toolbar",
       "elements": [
         {
           "type": "TemplateLayout",
-          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": context.translate(\"static-text.English\", \"English\"), \"value\": \"en\"}, {\"label\": context.translate(\"static-text.Bulgarian\", \"Bulgarian\"), \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>"
+          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": context.translate(\"static-text.English\", \"English\"), \"value\": \"en\"}, {\"label\": context.translate(\"static-text.Bulgarian\", \"Bulgarian\"), \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>",
+          "lang": "vue"
         },
         {
           "type": "TemplateLayout",
-          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>"
+          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>",
+          "lang": "vue"
         }
       ]
     },
@@ -27,6 +31,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Template",
@@ -43,6 +48,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Template",
@@ -59,6 +65,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Control",
@@ -75,6 +82,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "ListWithDetail",

packages/example/src/examples/job/uischemas.json

@@ -3,6 +3,7 @@
     "tester": "(jsonSchema, schemaPath, path) => { return NOT_APPLICABLE; }",
     "uischema": {
       "type": "TemplateLayout",
+      "lang": "vue",
       "name": "applicant",
       "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
       "elements": [
@@ -12,6 +13,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container class='align-stretch'><v-row><v-col><v-img :src='data.applicant.profilePicture' v-if='data.applicant && data.applicant.profilePicture'></v-img></v-col></v-row><v-row class='mt-auto'><v-col><slot name='upload'></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Control",
@@ -154,6 +156,7 @@
     "uischema": {
       "type": "TemplateLayout",
       "name": "jobDetails",
+      "lang": "vue",
       "template": "<v-container><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
       "elements": [
         {