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/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/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": [
         {

packages/example/src/examples/template-layout/uischema.json

@@ -1,49 +1,31 @@
 {
   "type": "TemplateLayout",
-  "template": "<v-card class=\"mx-auto my-12\" flat><slot name=\"header\"></slot><slot name=\"title\"></slot><div v-for=\"element in elements\" :key=\"element.name\"><slot v-if=\"element.name != 'header' && element.name != 'title'\" :name=\"element.name\"></slot><v-divider class=\"mx-6\"></v-divider></div></v-card>",
+  "template": "<div class='mx-auto my-12'>{{> header}}{{> title}}<div>{{#each elements:i}}{{#if name !== 'header' && name !== 'title'}}{{> name}}{{/if}}{{/each}}</div></div>",
   "elements": [
     {
       "type": "TemplateLayout",
-      "template": "<v-card-title class=\"d-flex align-center\"><span>{{translate('Custom TemplateLayout with JSONForms and Vuetify', 'Custom TemplateLayout with JSONForms and Vuetify')}}</span><v-spacer /><slot v-for=\"element in elements\" :key=\"element.name\" :name=\"element.name\"></slot></v-card-title>",
+      "template": "<div class='d-flex align-center' style='margin: 0 20px;'><span>{{translate('Custom TemplateLayout with JSONForms and Vuetify','Custom TemplateLayout with JSONForms and Vuetify')}}</span><div style='flex:1'></div>{{#each elements:i}}{{> name}}{{/each}}</div>",
       "name": "title",
       "elements": [
         {
           "type": "Button",
           "label": "EN",
           "action": "changeLang",
-          "params": {
-            "lang": "en"
-          },
-          "options": {
-            "vuetify": {
-              "v-btn": {
-                "small": true,
-                "fab": true
-              }
-            }
-          }
+          "params": { "lang": "en" },
+          "options": { "vuetify": { "v-btn": { "small": true, "fab": true } } }
         },
         {
           "type": "Button",
           "label": "BG",
           "action": "changeLang",
-          "params": {
-            "lang": "bg"
-          },
-          "options": {
-            "vuetify": {
-              "v-btn": {
-                "small": true,
-                "fab": true
-              }
-            }
-          }
+          "params": { "lang": "bg" },
+          "options": { "vuetify": { "v-btn": { "small": true, "fab": true } } }
         }
       ]
     },
     {
       "type": "TemplateLayout",
-      "template": "<v-toolbar><v-row align=\"center\" justify=\"center\" no-gutters><v-col><v-img src=\"https://jsonforms.io/img/logo.svg\" max-width=\"50px\" max-height=\"50px\" style=\"filter: invert(1); margin-left: 20px;\"></v-img></v-col><v-spacer></v-spacer><v-col class=\"d-flex justify-end\"><v-img src=\"https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg\" max-width=\"200px\" max-height=\"200px\" style=\"margin-right: 20px;\"></v-img></v-col></v-row></v-toolbar>",
+      "template": "<div class='d-flex align-center'><div class='d-flex align-center' style='margin-left:20px;'><img src='https://jsonforms.io/img/logo.svg' style='max-width:50px; max-height:50px; filter:invert(1);' /></div><div style='flex:1'></div><div class='d-flex justify-end' style='margin-right:20px;'><img src='https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg' style='max-width:200px; max-height:200px;' /></div></div>",
       "name": "header"
     },
     {
@@ -52,23 +34,17 @@
         {
           "type": "HorizontalLayout",
           "elements": [
-            {
-              "type": "Control",
-              "scope": "#/properties/name"
-            },
+            { "type": "Control", "scope": "#/properties/name" },
             {
               "type": "Control",
               "scope": "#/properties/personalData/properties/age"
             },
-            {
-              "type": "Control",
-              "scope": "#/properties/birthDate"
-            }
+            { "type": "Control", "scope": "#/properties/birthDate" }
           ]
         },
         {
           "type": "TemplateLayout",
-          "template": "<div>{{translate('Additional Information For', 'Additional Information For')}} <strong>{{ data.name }}</strong></div>"
+          "template": "<div>{{translate('Additional Information For','Additional Information For')}} <strong>{{data.name}}</strong></div>"
         },
         {
           "type": "HorizontalLayout",
@@ -77,10 +53,7 @@
               "type": "Control",
               "scope": "#/properties/personalData/properties/height"
             },
-            {
-              "type": "Control",
-              "scope": "#/properties/nationality"
-            },
+            { "type": "Control", "scope": "#/properties/nationality" },
             {
               "type": "Control",
               "scope": "#/properties/occupation",
@@ -103,11 +76,25 @@
     },
     {
       "type": "TemplateLayout",
-      "template": "<v-card-text><v-card-title><div style='display: flex; gap: 1rem;'><span>JSON Data</span><validation-icon v-if='errors' :errors='errors'></validation-icon></div></v-card-title><slot name=\"0\"></slot></v-card-text>",
+      "template": "<div class='pa-4'><div class='d-flex align-center mb-2'><span>JSON Data</span>{{#if errors}}<span class='ml-2'><i class=\"mdi-alert-circle-outline mdi text-error\"></i></span>{{/if}}</div>{{> jsoneditor}}</div>",
       "elements": [
         {
-          "type": "TemplateLayout",
-          "template": "<v-container fluid><v-row><v-col><v-monaco-editor language='json' readonly :model-value='JSON.stringify(data, null, 2)' :autoGrow='true' :maxRows='15' :options='{ minimap: { enabled: false } }'></v-monaco-editor></v-col></v-row></v-container>"
+          "type": "Control",
+          "scope": "#",
+          "options": {
+            "format": "code",
+            "language": "json",
+            "convertJson": true,
+            "vuetify": {
+              "v-monaco-editor": {
+                "initActions": ["editor.action.formatDocument"],
+                "readonly": false,
+                "autoGrow": true,
+                "maxRows": 15
+              }
+            }
+          },
+          "name": "jsoneditor"
         }
       ]
     }

packages/example/src/examples/vue-template-layout/actions.ts

@@ -0,0 +1,20 @@
+import type { ActionEvent } from '@chobantonov/jsonforms-vuetify-renderers';
+
+const changeLang = (event: ActionEvent) => {
+  if (event.context.appStore) {
+    // demo app
+    event.context.appStore.jsonforms.locale = event.params.lang;
+  } else if (event.$el.getRootNode() instanceof ShadowRoot) {
+    // web component
+    const form = (event.$el.getRootNode() as ShadowRoot).host;
+    if (form) {
+      form.setAttribute('locale', event.params.lang);
+    }
+  }
+};
+
+export const onHandleAction = (event: ActionEvent) => {
+  if (event.action === 'changeLang') {
+    event.callback = changeLang;
+  }
+};

packages/example/src/examples/vue-template-layout/config.json

@@ -0,0 +1,3 @@
+{
+  "defaultTemplateLang": "vue"
+}

packages/example/src/examples/vue-template-layout/data.json

@@ -0,0 +1,10 @@
+{
+  "name": "John Doe",
+  "vegetarian": false,
+  "birthDate": "1985-06-02",
+  "personalData": {
+    "age": 34,
+    "drivingSkill": 7
+  },
+  "postalCode": "12345"
+}

packages/example/src/examples/vue-template-layout/i18n.json

@@ -0,0 +1,86 @@
+{
+  "en": {
+    "name": {
+      "label": "Name",
+      "description": "The name of the person"
+    },
+    "vegetarian": {
+      "label": "Vegetarian",
+      "description": "Whether the person is a vegetarian"
+    },
+    "birth": {
+      "label": "Birth Date",
+      "description": ""
+    },
+    "nationality": {
+      "label": "Nationality",
+      "description": ""
+    },
+    "personal-data": {
+      "age": {
+        "label": "Age"
+      },
+      "driving": {
+        "label": "Driving Skill",
+        "description": "Indicating experience level"
+      }
+    },
+    "height": {
+      "label": "Height"
+    },
+    "occupation": {
+      "label": "Occupation",
+      "description": ""
+    },
+    "postal-code": {
+      "label": "Postal Code"
+    },
+    "error": {
+      "required": "field is required"
+    }
+  },
+  "bg": {
+    "name": {
+      "label": "Име",
+      "description": "Името на лицето"
+    },
+    "vegetarian": {
+      "label": "Вегетарианец",
+      "description": "Дали човекът е вегетарианец"
+    },
+    "birth": {
+      "label": "Рождена дата",
+      "description": ""
+    },
+    "nationality": {
+      "label": "Националност",
+      "description": ""
+    },
+    "personal-data": {
+      "age": {
+        "label": "Възраст",
+        "description": "Моля, въведете вашата възраст."
+      },
+      "driving": {
+        "label": "Шофьорски умения",
+        "description": "Показва ниво на опит"
+      }
+    },
+    "height": {
+      "label": "Височина"
+    },
+    "occupation": {
+      "label": "Професия",
+      "description": ""
+    },
+    "postal-code": {
+      "label": "Пощенски код"
+    },
+    "error": {
+      "required": "полето е задължително"
+    },
+    "Additional Information": "Допълнителна информация",
+    "Custom TemplateLayout with JSONForms and Vuetify": "Персонализиран TemplateLayout с JSONForms и Vuetify",
+    "Additional Information For": "Допълнителна информация за"
+  }
+}