initial contribution for vue-vuetify renderer set

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -44,21 +44,18 @@ body:
       placeholder: v3.0.0
   - type: dropdown
     attributes:
-      label: Framework
+      label: Package
       multiple: true
       options:
         - Core
-        - React
-        - Angular
-        - Vue
-        - Other (please specify in the Additional context field)
-  - type: dropdown
-    attributes:
-      label: RendererSet
-      multiple: true
-      options:
-        - Material
-        - Vanilla
+        - React Bindings
+        - React Material Renderers
+        - React Vanilla Renderers
+        - Angular Bindings
+        - Angular Material Renderers
+        - Vue Bindings
+        - Vue Vanilla Renderers
+        - Vue Vuetify Renderers
         - Other (please specify in the Additional context field)
   - type: textarea
     attributes:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -33,21 +33,18 @@ body:
         ## Describe for which setup you like to have the improvement
   - type: dropdown
     attributes:
-      label: Framework
+      label: Package
       multiple: true
       options:
         - Core
-        - React
-        - Angular
-        - Vue
-        - Other (please specify in the Additional context field)
-  - type: dropdown
-    attributes:
-      label: RendererSet
-      multiple: true
-      options:
-        - Material
-        - Vanilla
+        - React Bindings
+        - React Material Renderers
+        - React Vanilla Renderers
+        - Angular Bindings
+        - Angular Material Renderers
+        - Vue Bindings
+        - Vue Vanilla Renderers
+        - Vue Vuetify Renderers
         - Other (please specify in the Additional context field)
   - type: textarea
     attributes:

.github/workflows/publish.yaml

@@ -71,6 +71,7 @@ jobs:
           cd ../vanilla-renderers && pnpm pkg set peerDependencies.@jsonforms/core="${{ github.event.inputs.next_version }}" && pnpm pkg set peerDependencies.@jsonforms/react="${{ github.event.inputs.next_version }}"
           cd ../vue && pnpm pkg set peerDependencies.@jsonforms/core="${{ github.event.inputs.next_version }}"
           cd ../vue-vanilla && pnpm pkg set peerDependencies.@jsonforms/core="${{ github.event.inputs.next_version }}" && pnpm pkg set peerDependencies.@jsonforms/vue="${{ github.event.inputs.next_version }}"
+          cd ../vue-vuetify && pnpm pkg set peerDependencies.@jsonforms/core="${{ github.event.inputs.next_version }}" && pnpm pkg set peerDependencies.@jsonforms/vue="${{ github.event.inputs.next_version }}"
 
       - name: "Tag and Commit"
         run: |

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/angular-material/package.json

@@ -70,7 +70,7 @@
     "@angular/router": "^17.0.0 || ^18.0.0",
     "@jsonforms/angular": "3.4.0-alpha.2",
     "@jsonforms/core": "3.4.0-alpha.2",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.10",
     "rxjs": "^6.6.0 || ^7.4.0"
   },
   "dependencies": {

packages/core/src/mappers/renderer.ts

@@ -1249,6 +1249,7 @@ export const mapStateToLabelProps = (
     config: getConfig(state),
     renderers: props.renderers || getRenderers(state),
     cells: props.cells || getCells(state),
+    uischema,
   };
 };
 

packages/core/src/util/schema.ts

@@ -26,16 +26,27 @@
 import find from 'lodash/find';
 import type { JsonSchema } from '../models';
 
-export const getFirstPrimitiveProp = (schema: any) => {
-  if (schema.properties) {
-    return find(Object.keys(schema.properties), (propName) => {
-      const prop = schema.properties[propName];
-      return (
-        prop.type === 'string' ||
-        prop.type === 'number' ||
-        prop.type === 'integer'
-      );
-    });
+export const getFirstPrimitiveProp = (schema: unknown) => {
+  if (
+    schema &&
+    typeof schema === 'object' &&
+    'properties' in schema &&
+    schema.properties
+  ) {
+    return find(
+      Object.keys(schema.properties),
+      (propName: keyof typeof schema.properties) => {
+        const prop: unknown = schema.properties[propName];
+        return (
+          prop &&
+          typeof prop === 'object' &&
+          'type' in prop &&
+          (prop.type === 'string' ||
+            prop.type === 'number' ||
+            prop.type === 'integer')
+        );
+      }
+    );
   }
   return undefined;
 };

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: 'john.doe@email.com',
+};
+
+registerExamples([
+  {
+    name: 'login',
+    label: 'Login Form',
+    data,
+    schema,
+    uischema,
+  },
+]);