Home Original page

feat: add categorization renderer to Vue Vanilla by davewwww · Pull Request #2270 · eclipsesource/jsonforms

Hi @davewwww , thanks for the rework and your ongoing efforts! The new structure is much better IMO :)

Could you move the two new renderers to the layouts instead of the complex folder, please? I have some further comments inline. Please have a look.

now i don't know if this is a bug or if the behavior is intentional and "only" the example is not configured correctly.

I investigated this a bit and found the following: If there is a label property, it is resolved as i18n and if nothing is found it's put out as is. If however, the same happens for an i18n prop, nothing is returned as you already noticed. I think that is fine behavior but arguably it would be easier to find missing translations if the keys are put out. If you'd like you can raise an issue for that but I do not think the behavior should be touched as part of this PR.

Furthermore, I found out that the vue-vanilla example app indeed configures i18n for the examples differently than the other renderer sets. Namely, it does not use the i18n configured in the examples but configures its own based on the I18n translations text field.

If you change packages/vue-vanilla/dev/components/App.vue like the following, the i18n is used from the examples until the I18n translations text field contains a parsable i18n config

diff --git a/packages/vue-vanilla/dev/components/App.vue b/packages/vue-vanilla/dev/components/App.vue
index f734171e..d063c8b0 100644
--- a/packages/vue-vanilla/dev/components/App.vue
+++ b/packages/vue-vanilla/dev/components/App.vue
@@ -3,7 +3,6 @@ import { defineComponent } from 'vue';
 import { JsonForms, JsonFormsChangeEvent } from '../../config/jsonforms';
 import { vanillaRenderers, mergeStyles, defaultStyles } from '../../src';
 import '../../vanilla.css';
-import { JsonFormsI18nState } from '@jsonforms/core';
 import { ErrorObject } from 'ajv';
 
 import { getExamples } from '../../../examples';
@@ -27,14 +26,13 @@ export default defineComponent({
     };
   },
   data: function () {
-    const i18n: Partial<JsonFormsI18nState> = { locale: 'en' };
     const additionalErrors: ErrorObject[] = [];
     return {
       data: {},
       renderers: Object.freeze(vanillaRenderers),
       currentExampleName: examples[0].name,
       examples,
-      i18n,
+      i18n: examples[0].i18n,
       additionalErrors,
     };
   },
@@ -141,7 +139,7 @@ export default defineComponent({
           :uischema="example.uischema"
           :renderers="renderers"
           :config="config"
-          :i18n="i18n"
+          :i18n="example.i18n"
           :additional-errors="additionalErrors"
           @change="onChange"
         >