chore: polish vue-vuetify integration

- adapt to latest 'master' state
- fix 'useJsonFormsLabel' composition
- align dependency versions over packages
- type improvement in core/schema
- fix example app
- integrate in publish action
- adapt bug and feature templates

.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: |

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

@@ -79,7 +79,7 @@
     ]
   },
   "dependencies": {
-    "@date-io/dayjs": "1.3.13",
+    "@date-io/dayjs": "^3.0.0",
     "dayjs": "1.10.7",
     "lodash": "^4.17.21"
   },

packages/vue-vuetify/dev/App.vue

@@ -36,10 +36,12 @@ const theme = computed(() => {
         <example-app-bar></example-app-bar>
         <example-drawer></example-drawer>
         <example-settings></example-settings>
-        <v-main>
-          <example-view v-if="example" :example="example"></example-view>
-          <home-view v-else></home-view>
-        </v-main>
+        <suspense>
+          <v-main>
+            <example-view v-if="example" :example="example"></example-view>
+            <home-view v-else></home-view>
+          </v-main>
+        </suspense>
       </v-app>
     </v-theme-provider>
   </v-locale-provider>

packages/vue-vuetify/dev/components/ExampleDrawer.vue

@@ -4,6 +4,10 @@ import examples from '../examples';
 import { useAppStore } from '../store';
 
 const appStore = useAppStore();
+
+const handleExampleClick = (exampleName: string) => {
+  appStore.exampleName = exampleName;
+};
 </script>
 
 <template>
@@ -28,10 +32,9 @@ const appStore = useAppStore();
         :value="example.name"
         link
         color="primary"
+        @click="handleExampleClick(example.name)"
       >
-        <v-list-item-title @click="appStore.exampleName = example.name">{{
-          example.label
-        }}</v-list-item-title>
+        <v-list-item-title>{{ example.label }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>

packages/vue-vuetify/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link

packages/vue-vuetify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vue-vuetify",
-  "version": "3.4.0-alpha.0",
+  "version": "3.4.0-alpha.2",
   "description": "Vue Vuetify renderers for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -58,8 +58,8 @@
     "type-check": "vue-tsc --build --force"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.4.0-alpha.0",
-    "@jsonforms/vue": "3.4.0-alpha.0",
+    "@jsonforms/core": "3.4.0-alpha.2",
+    "@jsonforms/vue": "3.4.0-alpha.2",
     "ajv": "^8.6.1",
     "dayjs": "^1.10.6",
     "lodash": "^4.17.21",

packages/vue-vuetify/src/complex/components/AdditionalProperties.vue

@@ -114,7 +114,7 @@ import {
   useJsonFormsControlWithDetail,
   type JsonFormsChangeEvent,
 } from '@jsonforms/vue';
-import { type ErrorObject } from 'ajv';
+import type { ErrorObject } from 'ajv';
 import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import startCase from 'lodash/startCase';

packages/vue-vuetify/src/util/composition.ts

@@ -13,7 +13,8 @@ import {
   type JsonSchema,
   type UISchemaElement,
 } from '@jsonforms/core';
-import Ajv, { type ErrorObject } from 'ajv';
+import type Ajv from 'ajv';
+import type { ErrorObject } from 'ajv';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 import get from 'lodash/get';
@@ -88,7 +89,6 @@ export const useComputedLabel = <
  */
 export const useVuetifyLabel = <
   T extends {
-    schema: JsonSchema;
     uischema: UISchemaElement;
     config: any;
   },

packages/vue-vuetify/src/util/validator.ts

@@ -1,5 +1,6 @@
 import { createAjv as createAjvCore } from '@jsonforms/core';
-import Ajv, { type Options } from 'ajv';
+import type Ajv from 'ajv';
+import { type Options } from 'ajv';
 
 export const createAjv = (options?: Options): Ajv => {
   const ajv = createAjvCore(options);