update ag-grid

Author: kchobantonov

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

@@ -11,7 +11,9 @@
             { "field": "date", "rowDrag": true },
             { "field": "message", "flex": 1 },
             { "field": "enum", "resizable": false }
-          ]
+          ],
+          "pagination": false,
+          "paginationPageSize": 4
         }
       }
     }

packages/jsonforms-vuetify-renderers/package.json

@@ -50,8 +50,9 @@
     "@jsonforms/vue-vuetify": "catalog:",
     "@monaco-editor/loader": "^1.4.0",
     "@vue/compiler-dom": "^3.5.0",
-    "ag-grid-community": "^34.0.0",
-    "ag-grid-vue3": "^34.0.0",
+    "ag-charts-types": "^12.2.0",
+    "ag-grid-community": "^34.2.0",
+    "ag-grid-vue3": "^34.2.0",
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "ajv-i18n": "^4.2.0",
@@ -73,8 +74,9 @@
     "@monaco-editor/loader": "^1.4.0",
     "@types/lodash": "^4.17.16",
     "@types/splitpanes": "^2.2.6",
-    "ag-grid-community": "^34.0.0",
-    "ag-grid-vue3": "^34.0.0",
+    "ag-charts-types": "^12.2.0",
+    "ag-grid-community": "^34.2.0",
+    "ag-grid-vue3": "^34.2.0",
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "ajv-i18n": "^4.2.0",

packages/jsonforms-vuetify-renderers/src/components/VAgGrid/VAgGrid.scss

@@ -0,0 +1,6 @@
+@use 'vuetify/tools' as tools;
+@use './themes/quartz/_index' as quartz;
+
+@include tools.layer('components') {
+  @include quartz.quartz-theme('.v-ag-grid');
+}

packages/jsonforms-vuetify-renderers/src/components/VAgGrid/VAgGrid.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup generic="TData = any">
+import type { GridApi } from 'ag-grid-community';
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onMounted,
+  ref,
+  useAttrs,
+  type CSSProperties,
+  type Ref,
+} from 'vue';
+import { useRtl, useTheme } from 'vuetify';
+import type { Props } from './utils';
+import { getProps } from './utils';
+
+import 'ag-grid-community/styles/ag-grid.css';
+import './VAgGrid.scss';
+
+type StyleValue =
+  | string
+  | CSSProperties
+  | Array<string | CSSProperties>
+  | undefined;
+
+const attrs = useAttrs();
+const props = withDefaults(defineProps<Props<TData>>(), { ...getProps() });
+const style = (attrs.style as StyleValue) || {};
+const theme = useTheme();
+
+const themeClass = computed(() =>
+  theme.current.value.dark ? 'ag-theme-quartz-dark' : 'ag-theme-quartz',
+);
+
+// RTL support
+const rtl = useRtl();
+
+// AG Grid API ref
+const api: Ref<GridApi | undefined> = ref(undefined);
+const gridRef = ref<any>(null);
+
+// Async load AG Grid Vue + modules
+const AgGridVue = defineAsyncComponent(() =>
+  Promise.all([import('ag-grid-vue3'), import('ag-grid-community')]).then(
+    ([vueModule, gridModule]) => {
+      const { ModuleRegistry, AllCommunityModule } = gridModule;
+
+      ModuleRegistry.registerModules([AllCommunityModule]);
+
+      return vueModule.AgGridVue;
+    },
+  ),
+);
+
+// Expose API
+defineExpose({
+  api,
+});
+
+// Bind the grid instance API once mounted
+onMounted(() => {
+  nextTick(() => {
+    if (gridRef.value?.api) {
+      api.value = gridRef.value.api;
+    }
+  });
+});
+</script>
+
+<template>
+  <Suspense>
+    <template #default>
+      <ag-grid-vue
+        ref="gridRef"
+        v-bind="{ ...props, ...attrs }"
+        class="v-ag-grid"
+        :class="themeClass"
+        :enableRtl="rtl.isRtl.value"
+        theme="legacy"
+      />
+    </template>
+
+    <template #fallback>
+      <div class="d-flex align-center justify-center" :style="style">
+        <v-progress-circular indeterminate color="primary" size="48" />
+      </div>
+    </template>
+  </Suspense>
+</template>

packages/jsonforms-vuetify-renderers/src/components/VAgGrid/index.ts

@@ -0,0 +1 @@
+export { default as VAgGrid } from './VAgGrid.vue';