chore: integrate jsonforms-vuetify-renderers

Integrate the JSON Forms Vuetify renderers into the core mono
repository including their example application.

README.md

@@ -68,6 +68,7 @@ In this case, you can try to clean the repository with `git clean -dfx`. Beware
 - Run React Material examples: `cd packages/material-renderers && pnpm run dev`
 - Run Angular Material examples: `cd packages/angular-material && pnpm run dev`
 - Run Vue Vanilla dev setup: `cd packages/vue-vanilla && pnpm run serve`
+- Run Vue Vuetify dev setup: `cd packages/vue-vuetify && pnpm run dev`
 
 ### Dependency & Release management
 

packages/examples-app/index.html

@@ -13,6 +13,7 @@ <h1>JSON Forms Examples</h1>
       <li><a href="react-material">React Material Renderers</a></li>
       <li><a href="angular-material">Angular Material Renderers</a></li>
       <li><a href="vue-vanilla">Vue Vanilla Renderers</a></li>
+      <li><a href="vue-vuetify">Vue Vuetify Renderers</a></li>
     </ul>
   </body>
 </html>

packages/examples-app/prepare-examples-app.js

@@ -15,6 +15,7 @@ const examples = {
   'react-material': join(packagesDir, 'material-renderers', 'example', 'dist'),
   'angular-material': join(packagesDir, 'angular-material', 'example', 'dist'),
   'vue-vanilla': join(packagesDir, 'vue-vanilla', 'example', 'dist'),
+  'vue-vuetify': join(packagesDir, 'vue-vuetify', 'example', 'dist'),
 };
 
 // Clean and recreate dist dir

packages/examples/package.json

@@ -43,7 +43,7 @@
     "doc": "typedoc --name 'JSON Forms Examples' --excludeExternals --out docs src"
   },
   "dependencies": {
-    "ajv-i18n": "^3.5.0",
+    "ajv-i18n": "^4.2.0",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {

packages/examples/src/examples/additional-properties.ts

@@ -0,0 +1,131 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  type: 'object',
+  properties: {
+    propertiesString: {
+      type: 'string',
+    },
+  },
+  propertyNames: {
+    minLength: 2,
+  },
+  patternProperties: {
+    '^string$': {
+      type: 'string',
+    },
+    '^number$': {
+      type: 'number',
+    },
+    '^integer$': {
+      type: 'integer',
+    },
+    '^object$': {
+      type: 'object',
+      properties: {
+        prop1: {
+          type: 'string',
+        },
+      },
+    },
+    '^boolean$': {
+      type: 'boolean',
+    },
+    '^stringArray$': {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+    },
+    '^numberArray$': {
+      type: 'array',
+      items: {
+        type: 'number',
+      },
+    },
+    '^integerArray$': {
+      type: 'array',
+      items: {
+        type: 'integer',
+      },
+    },
+    '^objectArray$': {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          prop1: {
+            type: 'string',
+          },
+        },
+      },
+    },
+    '^booleanArray$': {
+      type: 'array',
+      items: {
+        type: 'boolean',
+      },
+    },
+  },
+  additionalProperties: {
+    type: 'string',
+    title: 'Additional Properties',
+  },
+  maxProperties: 15,
+};
+
+export const uischema = {
+  type: 'Control',
+  scope: '#/',
+};
+
+const data = {
+  propertiesString: 'data',
+  string: 'string value',
+  number: 10.2,
+  integer: 11,
+  object: {
+    prop1: 'prop 1 value',
+  },
+  boolean: true,
+  stringArray: ['value1', 'value2'],
+  numberArray: [12.2],
+  integerArray: [33],
+  objectArray: [{ prop1: 'prop1 val' }, {}],
+  booleanArray: [false, true],
+};
+
+registerExamples([
+  {
+    name: 'additional-properties',
+    label: 'Additional Properties',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/examples/i18n.ts

@@ -32,9 +32,7 @@ import {
   Translator,
 } from '@jsonforms/core';
 import get from 'lodash/get';
-// TODO change import when types are available for ajv-i18n (from v4.x)
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const localize = require('ajv-i18n');
+import localize from 'ajv-i18n/localize';
 
 export const onChange =
   (dispatch: Dispatch<AnyAction>) =>
@@ -43,7 +41,8 @@ export const onChange =
     if (!extensionState) {
       return;
     }
-    const localiseFunc = localize[extensionState.locale.split('-')[0]];
+    const localiseFunc =
+      localize[extensionState.locale.split('-')[0] as keyof typeof localize];
     localiseFunc(errors);
     dispatch(updateErrors(errors));
   };

packages/examples/src/examples/login.ts

@@ -0,0 +1,78 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    username: {
+      type: 'string',
+      description: 'Login Name',
+    },
+    password: {
+      type: 'string',
+      format: 'password',
+      description: 'Login password',
+    },
+  },
+  required: ['username', 'password'],
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Label',
+      text: 'Login Information',
+    },
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/username',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/password',
+        },
+      ],
+    },
+  ],
+};
+
+const data = {
+  username: '[email protected]',
+};
+
+registerExamples([
+  {
+    name: 'login',
+    label: 'Login Form',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/examples/person.ts

@@ -126,16 +126,18 @@ export const uischema = {
         {
           type: 'Control',
           scope: '#/properties/occupation',
-          suggestion: [
-            'Accountant',
-            'Engineer',
-            'Freelancer',
-            'Journalism',
-            'Physician',
-            'Student',
-            'Teacher',
-            'Other',
-          ],
+          options: {
+            suggestion: [
+              'Accountant',
+              'Engineer',
+              'Freelancer',
+              'Journalism',
+              'Physician',
+              'Student',
+              'Teacher',
+              'Other',
+            ],
+          },
         },
       ],
     },

packages/examples/src/examples/string.ts

@@ -0,0 +1,48 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'string',
+  title: 'String',
+  description: 'The form output will be a string',
+};
+
+export const uischema = {
+  type: 'Control',
+  scope: '#/',
+};
+
+export const data = 'This is a test string';
+
+registerExamples([
+  {
+    name: 'string',
+    label: 'String',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/index.ts

@@ -73,6 +73,9 @@ import * as listWithDetailPrimitives from './examples/list-with-detail-primitive
 import * as conditionalSchemaComposition from './examples/conditional-schema-compositions';
 import * as additionalErrors from './examples/additional-errors';
 import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
+import * as additionalProperties from './examples/additional-properties';
+import * as login from './examples/login';
+import * as string from './examples/string';
 export * from './register';
 export * from './example';
 
@@ -129,6 +132,9 @@ export {
   listWithDetailPrimitives,
   conditionalSchemaComposition,
   additionalErrors,
+  additionalProperties,
+  login,
   issue_1884,
   arrayWithDefaults,
+  string,
 };

packages/vue-vuetify/.eslintrc.cjs

@@ -0,0 +1,27 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/tests', '!/example', '/example/dist'],
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting',
+    'plugin:vue-scoped-css/vue3-recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'no-console': 'warn',
+    'no-debugger': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
+};