add ag-grid demo

Author: kchobantonov

packages/example/src/examples/ag-grid/data.json

@@ -0,0 +1,12 @@
+{
+  "comments": [
+    {
+      "date": "2001-09-11",
+      "message": "This is an example message"
+    },
+    {
+      "date": "2021-08-13",
+      "message": "Get ready for booohay"
+    }
+  ]
+}

packages/example/src/examples/ag-grid/index.ts

@@ -0,0 +1,15 @@
+import type { ExampleInputDescription } from '@/core/types';
+import { registerExamples } from '../register';
+import data from './data.json';
+import schema from './schema.json';
+import uischema from './uischema.json';
+
+export const input: ExampleInputDescription = { schema, uischema, data };
+
+registerExamples([
+  {
+    name: 'ag-grid',
+    label: 'AG Grid',
+    input,
+  },
+]);

packages/example/src/examples/ag-grid/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "comments": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "date": {
+            "type": "string",
+            "format": "date"
+          },
+          "message": {
+            "type": "string",
+            "maxLength": 5
+          },
+          "enum": {
+            "type": "string",
+            "enum": ["foo", "bar"]
+          }
+        }
+      }
+    }
+  }
+}

packages/example/src/examples/ag-grid/uischema.json

@@ -0,0 +1,19 @@
+{
+  "type": "VerticalLayout",
+  "elements": [
+    {
+      "type": "Control",
+      "scope": "#/properties/comments",
+      "options": {
+        "variant": "ag-grid",
+        "agGridOptions": {
+          "columnDefs": [
+            { "field": "date", "rowDrag": true },
+            { "field": "message", "flex": 1 },
+            { "field": "enum", "resizable": false }
+          ]
+        }
+      }
+    }
+  ]
+}

packages/example/src/examples/index.ts

@@ -1,4 +1,5 @@
 import { input as additionalProperties } from './additionalProperties';
+import { input as agGrid } from './ag-grid';
 import { input as allOf } from './allOf';
 import { input as allOfWithProps } from './allOf-with-props';
 import { input as anyOf } from './anyOf';
@@ -67,6 +68,7 @@ export * from './register';
 
 export {
   additionalProperties,
+  agGrid,
   allOf,
   allOfWithProps,
   anyOf,

packages/jsonforms-vuetify-renderers/package.json

@@ -49,6 +49,8 @@
     "@jsonforms/vue-vuetify": "3.6.0",
     "@monaco-editor/loader": "^1.4.0",
     "@vue/compiler-dom": "^3.4.21",
+    "ag-grid-community": "^34.0.0",
+    "ag-grid-vue3": "^34.0.0",
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "ajv-i18n": "^4.2.0",
@@ -82,6 +84,8 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
+    "ag-grid-community": "^34.0.0",
+    "ag-grid-vue3": "^34.0.0",
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "ajv-i18n": "^4.2.0",

packages/jsonforms-vuetify-renderers/src/icons/index.ts

@@ -1,24 +1,25 @@
-import { IconSymbol } from '@jsonforms/vue-vuetify';
+import { IconSymbol, useIcons as baseUseIcons } from '@jsonforms/vue-vuetify';
 import { computed, inject } from 'vue';
 
 import { aliases as faIconAliases } from './fa';
 export * from './icons';
 import { aliases as mdiIconAliases } from './mdi';
 import type { IconAliases } from './icons';
+import type { IconAliases as BaseIconAliases } from '@jsonforms/vue-vuetify';
 
 export const useIcons = () => {
-  const iconSet = computed<IconAliases>(() => {
+  const iconSet = computed<IconAliases & BaseIconAliases>(() => {
     const icons = inject(IconSymbol);
     if (!icons) throw new Error('Missing Vuetify Icons provide!');
 
     let result = mdiIconAliases;
-    const overrides = icons.aliases;
+    const base = baseUseIcons().current.value;
 
     if (icons.defaultSet === 'fa') {
       result = faIconAliases;
     }
 
-    return overrides ? { ...result, ...overrides } : result;
+    return { ...base, ...result };
   });
 
   return {

packages/jsonforms-vuetify-renderers/src/renderers/AgGridArrayControlRenderer.entry.ts

@@ -0,0 +1,16 @@
+import {
+  and,
+  optionIs,
+  rankWith,
+  schemaTypeIs,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './AgGridArrayControlRenderer.vue';
+
+export const isArrayControl = and(uiTypeIs('Control'), schemaTypeIs('array'));
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(4, and(optionIs('variant', 'ag-grid'), isArrayControl)),
+};