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
eclipsesource · Aug 21, 2024 · fb965f9 · fb965f9
1 parent d1e562e
commit fb965f9
Show file tree

Hide file tree

Showing 13 changed files with 53 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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