feat: upgrade ag-grid to 32

epicmaxco · Oct 26, 2024 · 2ea1409 · 2ea1409
1 parent 9ba04aa
commit 2ea1409
Show file tree

Hide file tree

Showing 15 changed files with 466 additions and 645 deletions.
diff --git a/packages/ag-grid-theme/demo.html b/packages/ag-grid-theme/demo.html
diff --git a/packages/ag-grid-theme/package.json b/packages/ag-grid-theme/package.json
@@ -11,10 +11,10 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^29.0.0",
-    "@ag-grid-community/core": "^29.0.0",
-    "@ag-grid-community/styles": "^29.0.0",
-    "@ag-grid-community/vue3": "^29.0.0"
+    "@ag-grid-community/client-side-row-model": "^32.2.2",
+    "@ag-grid-community/core": "^32.2.2",
+    "@ag-grid-community/styles": "^32.2.2",
+    "@ag-grid-community/vue3": "^32.2.2"
   },
   "peerDependencies": {
     "vuestic-ui": "^1.3.0"

diff --git a/packages/ag-grid-theme/playground/.gitignore b/packages/ag-grid-theme/playground/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+yarn.lock
diff --git a/packages/ag-grid-theme/playground/index.html b/packages/ag-grid-theme/playground/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/ag-grid-theme/playground/package.json b/packages/ag-grid-theme/playground/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "playground",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ag-grid-vue3": "^32.2.2",
+    "vue": "^3.2.47",
+    "vuestic-ui": "^1.9.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "vite": "^4.1.3"
+  }
+}
diff --git a/packages/ag-grid-theme/playground/src/App.vue b/packages/ag-grid-theme/playground/src/App.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <VaButton @click="toggleTheme">Toggle theme</VaButton>
+  </div>
+  <!-- The AG Grid component -->
+  <ag-grid-vue
+    :rowData="rowData"
+    :columnDefs="colDefs"
+    style="height: 500px"
+    :default-col-def="defaultColDef"
+    :pagination-auto-page-size="true"
+    :pagination="true"
+    :pinned-bottom-row-data="[rowData.at(-1)]"
+    :rowSelection="{  mode: 'multiRow' }"
+    class="ag-theme-vuestic"
+  >
+  </ag-grid-vue>
+ </template>
+
+<script>
+import { ref } from 'vue';
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
+import "../../src/styles/index.scss"
+// import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional: Theme
+import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component
+import { useColors, VaButton } from 'vuestic-ui'
+
+export default {
+  name: "App",
+  components: {
+    VaButton,
+    AgGridVue, // Add Vue Data Grid component
+  },
+  setup() {
+    const defaultColDef = {
+      filter: true,
+      floatingFilter: true,
+
+      sortable: true,
+    }
+
+    // Row Data: The data to be displayed.
+    const rowData = ref([]);
+
+    // Column Definitions: Defines the columns to be displayed.
+    const colDefs = ref([
+      {
+        headerName: 'Athlete (With Tooltip)',
+        field: 'athlete',
+        tooltipField: "country",
+        headerTooltip: "Tooltip for Athlete Column Header",
+      },
+      { headerName: 'Age (Editable)', field: 'age', editable: true },
+      { field: 'country' },
+      { field: 'year' },
+      { field: 'date' },
+      { field: 'sport' },
+      { field: 'gold' },
+      { field: 'silver' },
+      { field: 'bronze' },
+      { field: 'total' },
+    ]);
+
+    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+      .then(response => response.json())
+      .then(data => {
+        rowData.value = data;
+      });
+
+    const { applyPreset, currentPresetName } = useColors()
+
+    const toggleTheme = () => {
+      applyPreset(currentPresetName.value === 'light' ? 'dark' : 'light')
+    }
+
+    return {
+      defaultColDef,
+      rowData,
+      colDefs,
+      toggleTheme,
+    };
+  },
+};
+</script>
diff --git a/packages/ag-grid-theme/playground/src/main.js b/packages/ag-grid-theme/playground/src/main.js
@@ -0,0 +1,6 @@
+import { createVuestic } from 'vuestic-ui'
+import 'vuestic-ui/css'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).use(createVuestic()).mount('#app')
diff --git a/packages/ag-grid-theme/playground/vite.config.js b/packages/ag-grid-theme/playground/vite.config.js
@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
diff --git a/packages/ag-grid-theme/src/styles/_variables.scss b/packages/ag-grid-theme/src/styles/_variables.scss