@ag-grid-community/vue3 - npm Package Compare versions

Comparing version 30.2.1 to 31.0.0

lib/AgGridVue.d.ts

 import { PropType } from 'vue';
-import { GridOptions, Module } from '@ag-grid-community/core';
+import { GridApi, GridOptions, Module } from '@ag-grid-community/core';
+import { Properties } from './Utils';
 export declare const AgGridVue: import("vue").DefineComponent<{
@@ -27,8 +28,9 @@ gridOptions: {
 }, unknown, {
+    api: GridApi | undefined;
     gridCreated: boolean;
     isDestroyed: boolean;
     gridReadyFired: boolean;
-    emitRowModel: (() => void | null) | undefined;
-}, {}, {
-    globalEventListenerFactory(restrictToSyncOnly?: boolean | undefined): (eventType: string, event: any) => void;
+    emitRowModel?: (() => void | null) | undefined;
+}, Properties, {
+    globalEventListenerFactory(restrictToSyncOnly?: boolean): (eventType: string, event: any) => void;
     processChanges(propertyName: string, currentValue: any, previousValue: any): void;
@@ -66,2 +68,3 @@ checkForBindingConflicts(): void;
 }>>, {
+    modelValue: unknown[];
     gridOptions: GridOptions<any>;
@@ -71,3 +74,2 @@ autoParamsRefresh: boolean;
     modules: Module[];
-    modelValue: unknown[];
 }, {}>;

lib/AgGridVue.js

 import { defineComponent, getCurrentInstance, h } from 'vue';
 import { markRaw, toRaw } from '@vue/reactivity';
-import { ComponentUtil, Grid, Events } from '@ag-grid-community/core';
+import { ComponentUtil, createGrid, Events } from '@ag-grid-community/core';
+import { getAgGridProperties } from './Utils';
 import { VueFrameworkComponentWrapper } from './VueFrameworkComponentWrapper';
-import { getAgGridProperties } from './Utils';
 import { VueFrameworkOverrides } from './VueFrameworkOverrides';
-const ROW_DATA_EVENTS = new Set(['rowDataChanged', 'rowDataUpdated', 'cellValueChanged', 'rowValueChanged']);
+const ROW_DATA_EVENTS = new Set(['rowDataUpdated', 'cellValueChanged', 'rowValueChanged']);
 const ALWAYS_SYNC_GLOBAL_EVENTS = new Set([Events.EVENT_GRID_PRE_DESTROYED]);
 const DATA_MODEL_ATTR_NAME = 'onUpdate:modelValue'; // emit name would be update:ModelValue
 const DATA_MODEL_EMIT_NAME = 'update:modelValue';
-const [props, watch] = getAgGridProperties();
+const [props, computed, watch] = getAgGridProperties();
 export const AgGridVue = defineComponent({
@@ -35,2 +35,3 @@ render() {
         return {
+            api: undefined,
             gridCreated: false,
@@ -42,8 +43,4 @@ isDestroyed: false,
     },
-    watch: Object.assign({ modelValue: {
-            handler(currentValue, previousValue) {
-                this.processChanges('rowData', currentValue, previousValue);
-            },
-            deep: true
-        } }, watch),
+    computed,
+    watch,
     methods: {
@@ -70,10 +67,8 @@ globalEventListenerFactory(restrictToSyncOnly) {
                 }
-                const changes = {};
-                changes[propertyName] = {
-                    // decouple the row data - if we don't when the grid changes row data directly that'll trigger this component to react to rowData changes,
-                    // which can reset grid state (ie row selection)
-                    currentValue: propertyName === 'rowData' ? (Object.isFrozen(currentValue) ? currentValue : markRaw(toRaw(currentValue))) : currentValue,
-                    previousValue,
+                const options = {
+                    [propertyName]: propertyName === 'rowData' ? (Object.isFrozen(currentValue) ? currentValue : markRaw(toRaw(currentValue))) : currentValue,
                 };
-                ComponentUtil.processOnChange(changes, this.gridOptions.api);
+                // decouple the row data - if we don't when the grid changes row data directly that'll trigger this component to react to rowData changes,
+                // which can reset grid state (ie row selection)
+                ComponentUtil.processOnChange(options, this.api);
             }
@@ -89,4 +84,5 @@ },
         getRowData() {
+            var _a;
             const rowData = [];
-            this.gridOptions.api.forEachNode((rowNode) => {
+            (_a = this.api) === null || _a === void 0 ? void 0 : _a.forEachNode((rowNode) => {
                 rowData.push(rowNode.data);
@@ -168,6 +164,8 @@ });
         // with mergeDeep for example
-        const gridOptions = markRaw(ComponentUtil.copyAttributesToGridOptions(toRaw(this.gridOptions), this, true));
+        const gridOptions = markRaw(ComponentUtil.combineAttributesAndGridOptions(toRaw(this.gridOptions), this));
         this.checkForBindingConflicts();
         const rowData = this.getRowDataBasedOnBindings();
-        gridOptions.rowData = rowData ? (Object.isFrozen(rowData) ? rowData : markRaw(toRaw(rowData))) : rowData;
+        if (rowData !== ComponentUtil.VUE_OMITTED_PROPERTY) {
+            gridOptions.rowData = rowData ? (Object.isFrozen(rowData) ? rowData : markRaw(toRaw(rowData))) : rowData;
+        }
         const gridParams = {
@@ -182,10 +180,9 @@ globalEventListener: this.globalEventListenerFactory().bind(this),
         };
-        new Grid(this.$el, gridOptions, gridParams);
+        this.api = createGrid(this.$el, gridOptions, gridParams);
         this.gridCreated = true;
     },
     unmounted() {
+        var _a;
         if (this.gridCreated) {
-            if (this.gridOptions.api) {
-                this.gridOptions.api.destroy();
-            }
+            (_a = this.api) === null || _a === void 0 ? void 0 : _a.destroy();
             this.isDestroyed = true;
@@ -192,0 +189,0 @@ }

lib/Utils.d.ts

@@ -6,2 +6,2 @@ export declare const kebabProperty: (property: string) => string;
 }
-export declare const getAgGridProperties: () => [Properties, Properties];
+export declare const getAgGridProperties: () => [Properties, Properties, Properties];

lib/Utils.js

@@ -16,15 +16,64 @@ import { ComponentUtil } from '@ag-grid-community/core';
     eventNameAsProps.forEach((eventName) => props[eventName] = undefined);
-    const watch = {};
+    const computed = {
+        props() {
+            const options = {};
+            ComponentUtil.ALL_PROPERTIES.forEach((propertyName) => {
+                var _a;
+                if (this[propertyName] === ComponentUtil.VUE_OMITTED_PROPERTY) {
+                    return;
+                }
+                if (propertyName in this || propertyName in this.gridOptions) {
+                    options[propertyName] = (_a = this[propertyName]) !== null && _a !== void 0 ? _a : this.gridOptions[propertyName];
+                }
+            });
+            return options;
+        },
+    };
+    const watch = {
+        modelValue: {
+            handler(currentValue, previousValue) {
+                if (!this.gridCreated || !this.api) {
+                    return;
+                }
+                /*
+                 * Prevents an infinite loop when using v-model for the rowData
+                 */
+                if (currentValue === previousValue) {
+                    return;
+                }
+                if (currentValue && previousValue) {
+                    if (currentValue.length === previousValue.length) {
+                        if (currentValue.every((item, index) => item === previousValue[index])) {
+                            return;
+                        }
+                    }
+                }
+                ComponentUtil.processOnChange({ rowData: currentValue }, this.api);
+            },
+            deep: true
+        },
+        props: {
+            handler(currentValue, previousValue) {
+                if (!this.gridCreated || !this.api) {
+                    return;
+                }
+                const changes = {};
+                Object.entries(currentValue).forEach(([key, value]) => {
+                    if (previousValue[key] === value)
+                        return;
+                    changes[key] = value;
+                });
+                ComponentUtil.processOnChange(changes, this.api);
+            },
+            deep: true,
+        },
+    };
     ComponentUtil.ALL_PROPERTIES
         .filter((propertyName) => propertyName != 'gridOptions') // dealt with in AgGridVue itself
         .forEach((propertyName) => {
-        props[propertyName] = {};
-        watch[propertyName] = {
-            handler(currentValue, previousValue) {
-                this.processChanges(propertyName, currentValue, previousValue);
-            },
-            deep: propertyName !== 'popupParent' && propertyName !== 'context'
+        props[propertyName] = {
+            default: ComponentUtil.VUE_OMITTED_PROPERTY,
         };
     });
-    return [props, watch];
+    return [props, computed, watch];
 };

lib/VueComponentFactory.js

@@ -76,3 +76,9 @@ import { createVNode, defineComponent, render } from 'vue';
             const currentParentAsThis = currentParent;
-            componentInstance = currentParentAsThis.$options && currentParentAsThis.$options.components ? currentParentAsThis.$options.components[component] : null;
+            if (currentParentAsThis.$options && currentParentAsThis.$options.components && currentParentAsThis.$options.components[component]) {
+                componentInstance = currentParentAsThis.$options.components[component];
+            }
+            else if (currentParentAsThis[component]) {
+                componentInstance = currentParentAsThis[component];
+            }
+            // componentInstance =  : null;
             currentParent = currentParent.$parent;
@@ -79,0 +85,0 @@ }

lib/VueFrameworkComponentWrapper.js

@@ -20,8 +20,20 @@ import { BaseComponentWrapper } from '@ag-grid-community/core';
             hasMethod(name) {
-                return wrapper.getFrameworkComponentInstance()[name] != null;
+                const componentInstance = wrapper.getFrameworkComponentInstance();
+                if (!componentInstance[name]) {
+                    return componentInstance.$.setupState[name] !== null;
+                }
+                else {
+                    return true;
+                }
             }
             callMethod(name, args) {
+                var _a;
                 const componentInstance = this.getFrameworkComponentInstance();
                 const frameworkComponentInstance = wrapper.getFrameworkComponentInstance();
-                return frameworkComponentInstance[name].apply(componentInstance, args);
+                if (frameworkComponentInstance[name]) {
+                    return frameworkComponentInstance[name].apply(componentInstance, args);
+                }
+                else {
+                    return (_a = frameworkComponentInstance.$.setupState[name]) === null || _a === void 0 ? void 0 : _a.apply(componentInstance, args);
+                }
             }
@@ -85,2 +97,3 @@ addMethod(name, callback) {
     init(params) {
+        var _a;
         const { componentInstance, element, destroy: unmount } = this.createComponent(params);
@@ -91,4 +104,4 @@ this.componentInstance = componentInstance;
         // the first child is the user supplied component
-        this.element = element.firstElementChild;
+        this.element = (_a = element.firstElementChild) !== null && _a !== void 0 ? _a : element;
     }
 }

lib/VueFrameworkOverrides.js

@@ -5,3 +5,3 @@ import { VanillaFrameworkOverrides } from '@ag-grid-community/core';
     constructor(parent) {
-        super();
+        super('vue');
         this.parent = parent;
@@ -8,0 +8,0 @@ }

package.json

 {
   "name": "@ag-grid-community/vue3",
   "description": "AG Grid Vue 3 Component",
-  "version": "30.2.1",
+  "version": "31.0.0",
   "author": "Sean Landsman <[e-mail]>",
@@ -25,3 +25,3 @@ "license": "MIT",
   "scripts": {
-    "clean": "rimraf dist lib .hash",
+    "clean": "rimraf dist lib",
     "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --target lib src/AgGridVue.ts && npx tsc && rm ./dist/demo.html",
@@ -34,3 +34,3 @@ "build-docs": "npm run build",
   "dependencies": {
-    "@ag-grid-community/core": "~30.2.1",
+    "@ag-grid-community/core": "~31.0.0",
     "vue": "^3.0.0"
@@ -46,3 +46,3 @@ },
     "@vue/test-utils": "^2.0.0-0",
-    "typescript": "~4.3.5",
+    "typescript": "~4.7.4",
     "vue-jest": "^5.0.0-0",
@@ -49,0 +49,0 @@ "rimraf": "3.0.2"

README.md

@@ -74,3 +74,3 @@ ![AG Grid HTML5 Grid trusted by the community, built for enterprise](./github-banner.png "AG Grid")
 import "@ag-grid-community/styles/ag-grid.css";
-import "@ag-grid-community/styles/ag-theme-alpine.css";
+import "@ag-grid-community/styles/ag-theme-quartz.css";
 ```
@@ -108,3 +108,3 @@
     style="width: 500px; height: 200px"
-    class="ag-theme-alpine"
+    class="ag-theme-quartz"
     :columnDefs="columnDefs"
@@ -121,3 +121,3 @@ :rowData="rowData">
     style="width: 500px; height: 200px"
-    class="ag-theme-alpine"
+    class="ag-theme-quartz"
     :columnDefs="columnDefs"
@@ -131,3 +131,3 @@ :rowData="rowData"
 import "@ag-grid-community/styles/ag-grid.css";
-import "@ag-grid-community/styles/ag-theme-alpine.css";
+import "@ag-grid-community/styles/ag-theme-quartz.css";
 import { AgGridVue } from "@ag-grid-community/vue3";
@@ -134,0 +134,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14653101

increased by4.86%

Lines of code

108226

increased by5.13%

Dependency changes

• + Added@ag-grid-community/core@31.0.3(transitive)

• - Removed@ag-grid-community/core@30.2.1(transitive)

• Updated@ag-grid-community/core@~31.0.0