feat: upgrade ag-grid to 32 (#4410)

* feat: upgrade ag-grid to 32

* fix(ag-grid): improve UI and build

* chore(ag-grid): bump 1.2.0

Author: m0ksem

packages/ag-grid-theme/.npmignore

@@ -1,2 +1,2 @@
-demo.html
-rollup.config.js
+build.ts
+playground

packages/ag-grid-theme/README.md

@@ -1,87 +1,6 @@
 <h1 align="center">AG Theme Vuestic</h1>
 <p align="center"><img src="https://img.shields.io/npm/v/@vuestic/ag-grid-theme?label=ag-grid-theme"></p>
-Custom theme with Vuestic UI styles for AG Grid Vue 3.
-
-## Installation
-
-#### npm
-```
-npm i @vuestic/ag-grid-theme
-```
-#### yarn
-```
-yarn add @vuestic/ag-grid-theme
-```
-Import styles to project via entry js/ts file:
-
-```js
-// main.js
-
-import '@vuestic/ag-grid-theme/index.scss'
-```
-or via a scss:
-```scss
-// *.scss or <styles lang="scss">
-
-@import "~@vuestic/ag-grid-theme";
-```
-
-## Usage
-```vue
-<template>
-  <div>
-    <ag-grid-vue
-      class="ag-theme-vuestic"
-      style="width: 100%; height: 100%;"
-      :columnDefs="columnDefs"
-      :rowData="rowData"
-      :modules="modules"
-    />
-  </div>
-</template>
-```
-
-```js
-<script>
-  import { AgGridVue } from '@ag-grid-community/vue3'
-  import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'
-
-export default {
-  components: { AgGridVue },
-  data () {
-    return {
-      modules: [ClientSideRowModelModule],
-      rowData: null,
-      columnDefs: [
-        { field: 'athlete' },
-        { field: 'age' },
-        { field: 'country' },
-        { field: 'year' },
-        { field: 'date' },
-        { field: 'sport' },
-        { field: 'gold' },
-        { field: 'silver' },
-        { field: 'bronze' },
-        { field: 'total' },
-      ],
-    }
-  },
-  beforeMount () {
-    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
-      .then(result => result.json())
-      .then(rowData => { this.rowData = rowData })
-  },
-}
-</script>
-```
-
-```scss
-<style lang="scss">
-@import "~@vuestic/ag-grid-theme";
-</style>
-```
-
-
+Vuestic UI styles for AG Grid Vue 3.
 
 ## Documentation
 
@@ -90,6 +9,27 @@ on [vuestic.dev](https://vuestic.dev/en/extensions/ag-grid)
 
 For more information about AG Grid for Vue 3, visit [ag-grid.com](https://www.ag-grid.com/vue-data-grid/getting-started/)
 
+
+## Installation
+
+1. Install package
+    #### npm
+    ```
+    npm i @vuestic/ag-grid-theme
+    ```
+    #### yarn
+    ```
+    yarn add @vuestic/ag-grid-theme
+    ```
+2. Import styles to project via entry js/ts file:
+    ```js
+    import '@vuestic/ag-grid-theme'
+    ```
+    or via a scss:
+    ```scss
+    @import "@vuestic/ag-grid-theme";
+    ```
+
 ## License
 
 [MIT](https://github.com/epicmaxco/vuestic-ui/blob/develop/LICENSE.MD) license

packages/ag-grid-theme/build.ts

@@ -0,0 +1,42 @@
+import { dirname } from 'pathe';
+import { compileAsync, FileImporter } from 'sass'
+import { writeFile, stat, mkdir } from 'fs/promises'
+import { existsSync } from 'fs';
+
+const nodeImporter: FileImporter = {
+  findFileUrl(url, context) {
+    if (url.startsWith('.') || url.startsWith('url') || url.startsWith('http')) {
+      return null
+    }
+
+    try {
+      const resolved = import.meta.resolve(url)
+      return new URL(resolved)
+    } catch (e) {
+      return null
+    }
+  },
+}
+
+const compileScss = async (inputPath: string, outputPath: string) => {
+  const result = await compileAsync(inputPath, {
+    style: 'compressed',
+    importers: [nodeImporter],
+  })
+
+  const dirName = dirname(outputPath)
+
+  if (!existsSync(dirName)) {
+    await mkdir(dirName, { recursive: true })
+  }
+
+  // Write result to output file
+  await writeFile(outputPath, result.css, {
+    flag: 'w',
+  })
+}
+
+Promise.all([
+  compileScss('./src/styles/index.scss', './dist/ag-theme-vuestic.css'),
+  compileScss('./src/styles/theme.scss', './dist/ag-theme-vuestic-clean.css'),
+])

packages/ag-grid-theme/demo.html

@@ -1,23 +1,24 @@
 {
   "name": "@vuestic/ag-grid-theme",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Custom theme with Vuestic UI styles for AG Grid Vue 3.",
   "homepage": "https://vuestic.dev",
   "repository": "https://github.com/epicmaxco/vuestic-ui",
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "rollup --config rollup.config.js --bundleConfigAsCjs",
-    "prepack": "npm run build"
+    "build": "tsx ./build.ts",
+    "prepack": "npm run build",
+    "play": "cd playground && npm run dev"
   },
   "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"
+    "vuestic-ui": "^1.10.0"
   },
   "devDependencies": {
     "sass": "^1.57.1",
@@ -35,6 +36,8 @@
   "main": "dist/ag-theme-vuestic.css",
   "exports": {
     ".": "./dist/ag-theme-vuestic.css",
-    "./scss": "./src/styles/index.scss"
+    "./scss": "./src/styles/index.scss",
+    "./clean": "./dist/ag-theme-vuestic-clean.css",
+    "./clean/scss": "./src/styles/clean.scss"
   }
 }