From fb965f90e041102830a437b45cb2ecf939c48956 Mon Sep 17 00:00:00 2001
From: Stefan Dirix <sdirix@eclipsesource.com>
Date: Wed, 21 Aug 2024 13:15:24 +0200
Subject: [PATCH] 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
---
 packages/angular-material/package.json        |  2 +-
 packages/core/src/mappers/renderer.ts         |  1 +
 packages/core/src/util/schema.ts              | 31 +++++++++++++------
 packages/material-renderers/package.json      |  2 +-
 packages/vue-vuetify/dev/App.vue              | 10 +++---
 .../dev/components/ExampleDrawer.vue          |  9 ++++--
 .../vue-vuetify/example/index.bundled.html    | 17 ----------
 packages/vue-vuetify/index.html               |  1 -
 packages/vue-vuetify/package.json             |  4 +--
 .../components/AdditionalProperties.vue       |  2 +-
 packages/vue-vuetify/src/util/composition.ts  |  4 +--
 packages/vue-vuetify/src/util/validator.ts    |  3 +-
 pnpm-lock.yaml                                | 17 +++++-----
 13 files changed, 53 insertions(+), 50 deletions(-)
 delete mode 100644 packages/vue-vuetify/example/index.bundled.html

diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
index 5e7841859..c99131690 100644
--- a/packages/angular-material/package.json
+++ b/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": {
diff --git a/packages/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts
index a3ba1a034..2a80de8e6 100644
--- a/packages/core/src/mappers/renderer.ts
+++ b/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,
   };
 };
 
diff --git a/packages/core/src/util/schema.ts b/packages/core/src/util/schema.ts
index 26161b588..72be3dd7e 100644
--- a/packages/core/src/util/schema.ts
+++ b/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;
 };
diff --git a/packages/material-renderers/package.json b/packages/material-renderers/package.json
index 626210e29..f60af769b 100644
--- a/packages/material-renderers/package.json
+++ b/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"
   },
diff --git a/packages/vue-vuetify/dev/App.vue b/packages/vue-vuetify/dev/App.vue
index e3434f232..eab6fa09b 100644
--- a/packages/vue-vuetify/dev/App.vue
+++ b/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>
diff --git a/packages/vue-vuetify/dev/components/ExampleDrawer.vue b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
index 6c7378a1e..c662f1281 100644
--- a/packages/vue-vuetify/dev/components/ExampleDrawer.vue
+++ b/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>
diff --git a/packages/vue-vuetify/example/index.bundled.html b/packages/vue-vuetify/example/index.bundled.html
deleted file mode 100644
index 19cd2d30d..000000000
--- a/packages/vue-vuetify/example/index.bundled.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
-    />
-    <title>JSON Forms Vue 3 Vuetify</title>
-    <script type="module" crossorigin src="bundle.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
diff --git a/packages/vue-vuetify/index.html b/packages/vue-vuetify/index.html
index a8f0512cd..05c4e10c5 100644
--- a/packages/vue-vuetify/index.html
+++ b/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
diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index ecea88e27..b201355f5 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -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",
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index 29b11ee69..b58964891 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/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';
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index dbb7b17e4..2b72c9264 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/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;
   },
diff --git a/packages/vue-vuetify/src/util/validator.ts b/packages/vue-vuetify/src/util/validator.ts
index 01ce38ed3..bc4a2f76b 100644
--- a/packages/vue-vuetify/src/util/validator.ts
+++ b/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);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9733264b8..b00efab54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -608,8 +608,8 @@ importers:
   packages/material-renderers:
     dependencies:
       '@date-io/dayjs':
-        specifier: 1.3.13
-        version: 1.3.13(dayjs@1.10.7)
+        specifier: ^3.0.0
+        version: 3.0.0(dayjs@1.10.7)
       dayjs:
         specifier: 1.10.7
         version: 1.10.7
@@ -4312,16 +4312,19 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@date-io/core@1.3.13:
-    resolution: {integrity: sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==}
+  /@date-io/core@3.0.0:
+    resolution: {integrity: sha512-S3j+IAQVBYNkQzchVVhX40eBkGDreBpScy9RXwTS5j2+k07+62pMVPisQ44Gq76Rqy5AOG/EZXCwBpY/jbemvA==}
     dev: false
 
-  /@date-io/dayjs@1.3.13(dayjs@1.10.7):
-    resolution: {integrity: sha512-nD39xWYwQjDMIdpUzHIcADHxY9m1hm1DpOaRn3bc2rBdgmwQC0PfW0WYaHyGGP/6LEzEguINRbHuotMhf+T9Sg==}
+  /@date-io/dayjs@3.0.0(dayjs@1.10.7):
+    resolution: {integrity: sha512-vy7DSwoQiPA2L0stRqW3le7lcEBMjoMMEmbpCNkyoX3xXizKInFvhbnOBmCyusIQ7tL/WsNC4X5bVgdNWX0JLA==}
     peerDependencies:
       dayjs: ^1.8.17
+    peerDependenciesMeta:
+      dayjs:
+        optional: true
     dependencies:
-      '@date-io/core': 1.3.13
+      '@date-io/core': 3.0.0
       dayjs: 1.10.7
     dev: false