@revolist/vue3-datagrid 3.2.16 → 3.2.17

package/.github/ISSUE_TEMPLATE/issue-template.md

@@ -0,0 +1,19 @@
+---
+name: Issue template
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Check if issue exists**
+Search the repo and ensure your issue doesn't already exist. If so, it may:
+- Have already been fixed in an unreleased version.
+- Have been closed without a solution. Please create a new issue instead of commenting on the old one.
+
+**Describe the issue**
+A clear and concise description of what the issue is.
+
+**To Reproduce**
+Create a minimal reproduction to illustrate the issue. Here's a [template](https://codesandbox.io/s/revo-grid-vue3-thry7) to start you off.

package/dist/vgrid.d.ts

@@ -4,6 +4,10 @@ export declare const VGridPlugin: {
     install(app: App): void;
 };
 export declare const VGridVueTemplate: (vueConstructor: any) => (h: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.HyperFunc<import("@revolist/revogrid/dist/types/stencil-public-runtime").VNode>, p: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnDataSchemaModel) => JSX.Element;
-export declare const VGridVueTemplateConstructor: (vueConstructor: import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, e: HTMLElement, p: Record<string, any>) => any;
+export declare const VGridVueTemplateConstructor: (vueConstructor: import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, el: import("./vue-template").VueElement, p: Record<string, any>, appContext: any) => {
+    vueInstance: any;
+    destroy: () => void;
+    el: import("./vue-template").VueElement;
+};
 export declare const VGridVueEditor: (vueConstructor: any) => (column: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnDataSchemaModel, save: Function, close: Function) => import("./vue-editor-adapter").default;
 export default VGrid;

package/dist/vgrid.js

@@ -1 +1 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("vue"),require("@revolist/revogrid/custom-element/")):"function"==typeof define&&define.amd?define("VGrid",["vue","@revolist/revogrid/custom-element/"],r):"object"==typeof exports?exports.VGrid=r(require("vue"),require("@revolist/revogrid/custom-element/")):e.VGrid=r(e.vue,e["@revolist/revogrid/custom-element/"])}(self,((e,r)=>(()=>{"use strict";var o={863:e=>{e.exports=r},748:r=>{r.exports=e}},t={};function n(e){var r=t[e];if(void 0!==r)return r.exports;var s=t[e]={exports:{}};return o[e](s,s.exports,n),s.exports}n.d=(e,r)=>{for(var o in r)n.o(r,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return(()=>{n.r(s),n.d(s,{VGrid:()=>f,VGridPlugin:()=>v,VGridVueEditor:()=>g,VGridVueTemplate:()=>m,VGridVueTemplateConstructor:()=>b,default:()=>h});var e=n(748);const r="update:modelValue",o=Symbol(),t={default:o},i=e=>(null==e?void 0:e.split(" "))||[],l=(e,r,o=[])=>{var t;return[...Array.from((null===(t=e.value)||void 0===t?void 0:t.classList)||[]),...o].filter(((e,o,t)=>!r.has(e)&&t.indexOf(e)===o))},a=(n,s,a=[],u,d,c)=>{void 0!==s&&s();const f=(0,e.defineComponent)(((t,{attrs:s,slots:a,emit:f})=>{var p;let v=t[u];const m=(0,e.ref)(),b=new Set(i(s.class)),g=e=>{e.el&&(Array.isArray(d)?d:[d]).forEach((o=>{e.el.addEventListener(o.toLowerCase(),(e=>{v=(null==e?void 0:e.target)[u],f(r,v),c&&f(c,e)}))}))},h=(0,e.getCurrentInstance)(),y=(null===(p=null==h?void 0:h.appContext)||void 0===p?void 0:p.provides.navManager)?(0,e.inject)("navManager"):void 0;return()=>{v=t[u],i(s.class).forEach((e=>{b.add(e)}));const r=t.onClick;let c={ref:m,class:l(m,b),onClick:e=>{void 0!==r&&r(e),e.defaultPrevented||(e=>{const{routerLink:r}=t;if(r!==o)if(void 0!==y){let r={event:e};for(const e in t){const n=t[e];t.hasOwnProperty(e)&&e.startsWith("router")&&n!==o&&(r[e]=n)}y.navigate(r)}else console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.")})(e)},onVnodeBeforeMount:d?g:void 0};for(const e in t){const r=t[e];t.hasOwnProperty(e)&&r!==o&&(c[e]=r)}return u&&(t.modelValue!==o?c=Object.assign(Object.assign({},c),{[u]:t.modelValue}):v!==o&&(c=Object.assign(Object.assign({},c),{[u]:v}))),(0,e.h)(n,c,a.default&&a.default())}}));return f.displayName=n,f.props={routerLink:t},a.forEach((e=>{f.props[e]=t})),u&&(f.props.modelValue=t,f.emits=[r,c]),f};n(863);const u=a("revo-grid",void 0,["rowHeaders","frameSize","rowSize","colSize","range","readonly","resize","canFocus","useClipboard","columns","source","pinnedTopSource","pinnedBottomSource","rowDefinitions","editors","plugins","columnTypes","theme","rowClass","autoSizeColumn","filter","canMoveColumns","trimmedRows","exporting","grouping","stretch","beforeedit","beforerangeedit","afteredit","beforeautofill","beforeaange","afterfocus","roworderchanged","beforesourcesortingapply","beforesortingapply","beforesorting","rowdragstart","headerclick","beforecellfocus","beforefocuslost","beforesourceset","aftersourceset","beforecolumnsset","beforecolumnapplied","aftercolumnsset","beforefilterapply","beforefiltertrimmed","beforetrimmed","aftertrimmed","viewportscroll","beforeexport","beforeeditstart","aftercolumnresize"]),d=(r,o,t)=>{if(!o)return null;let n;(null==o?void 0:o.childNodes.length)&&(n=o.childNodes[0]),n||(n=document.createElement("span"),o.appendChild(n));let s=n._vnode;if(s)for(const e in t)s.component.props[e]=t[e];else{const o=(0,e.createVNode)(r,t);(0,e.render)(o,n)}return s};class c{constructor(e,r,o,t){this.VueEditorConstructor=e,this.column=r,this.save=o,this.close=t,this.element=null,this.editCell=null}componentDidRender(){}disconnectedCallback(){var e;null===(e=this.vueEl)||void 0===e||e.$destroy(),this.vueEl=void 0}render(e){return e("span",{ref:e=>{this.vueEl=d(this.VueEditorConstructor,e,Object.assign(Object.assign({},this.editCell),{column:this.column,save:this.save,close:this.close}))}})}}const f=u;let p=!1;const v={install(e){p||(p=!0,e.component("vue-data-grid",f))}},m=e=>(r,o)=>r("span",{ref:r=>d(e,r,o)}),b=d,g=e=>function(r,o,t){return new c(e,r,o,t)},h=u})(),s})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue"),require("@revolist/revogrid/custom-element/")):"function"==typeof define&&define.amd?define("VGrid",["vue","@revolist/revogrid/custom-element/"],t):"object"==typeof exports?exports.VGrid=t(require("vue"),require("@revolist/revogrid/custom-element/")):e.VGrid=t(e.vue,e["@revolist/revogrid/custom-element/"])}(self,((e,t)=>(()=>{"use strict";var r={863:e=>{e.exports=t},748:t=>{t.exports=e}},o={};function n(e){var t=o[e];if(void 0!==t)return t.exports;var s=o[e]={exports:{}};return r[e](s,s.exports,n),s.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return(()=>{n.r(s),n.d(s,{VGrid:()=>f,VGridPlugin:()=>v,VGridVueEditor:()=>g,VGridVueTemplate:()=>m,VGridVueTemplateConstructor:()=>b,default:()=>h});var e=n(748);const t="update:modelValue",r=Symbol(),o={default:r},i=e=>(null==e?void 0:e.split(" "))||[],l=(e,t,r=[])=>{var o;return[...Array.from((null===(o=e.value)||void 0===o?void 0:o.classList)||[]),...r].filter(((e,r,o)=>!t.has(e)&&o.indexOf(e)===r))},a=(n,s,a=[],u,d,c)=>{void 0!==s&&s();const f=(0,e.defineComponent)(((o,{attrs:s,slots:a,emit:f})=>{var p;let v=o[u];const m=(0,e.ref)(),b=new Set(i(s.class)),g=e=>{e.el&&(Array.isArray(d)?d:[d]).forEach((r=>{e.el.addEventListener(r.toLowerCase(),(e=>{v=(null==e?void 0:e.target)[u],f(t,v),c&&f(c,e)}))}))},h=(0,e.getCurrentInstance)(),y=(null===(p=null==h?void 0:h.appContext)||void 0===p?void 0:p.provides.navManager)?(0,e.inject)("navManager"):void 0;return()=>{v=o[u],i(s.class).forEach((e=>{b.add(e)}));const t=o.onClick;let c={ref:m,class:l(m,b),onClick:e=>{void 0!==t&&t(e),e.defaultPrevented||(e=>{const{routerLink:t}=o;if(t!==r)if(void 0!==y){let t={event:e};for(const e in o){const n=o[e];o.hasOwnProperty(e)&&e.startsWith("router")&&n!==r&&(t[e]=n)}y.navigate(t)}else console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.")})(e)},onVnodeBeforeMount:d?g:void 0};for(const e in o){const t=o[e];o.hasOwnProperty(e)&&t!==r&&(c[e]=t)}return u&&(o.modelValue!==r?c=Object.assign(Object.assign({},c),{[u]:o.modelValue}):v!==r&&(c=Object.assign(Object.assign({},c),{[u]:v}))),(0,e.h)(n,c,a.default&&a.default())}}));return f.displayName=n,f.props={routerLink:o},a.forEach((e=>{f.props[e]=o})),u&&(f.props.modelValue=o,f.emits=[t,c]),f};n(863);const u=a("revo-grid",void 0,["rowHeaders","frameSize","rowSize","colSize","range","readonly","resize","canFocus","useClipboard","columns","source","pinnedTopSource","pinnedBottomSource","rowDefinitions","editors","plugins","columnTypes","theme","rowClass","autoSizeColumn","filter","canMoveColumns","trimmedRows","exporting","grouping","stretch","beforeedit","beforerangeedit","afteredit","beforeautofill","beforeaange","afterfocus","roworderchanged","beforesourcesortingapply","beforesortingapply","beforesorting","rowdragstart","headerclick","beforecellfocus","beforefocuslost","beforesourceset","aftersourceset","beforecolumnsset","beforecolumnapplied","aftercolumnsset","beforefilterapply","beforefiltertrimmed","beforetrimmed","aftertrimmed","viewportscroll","beforeexport","beforeeditstart","aftercolumnresize"]),d=(t,r,o,n)=>{if(!r)return null;let s=r._vnode;if(s){n&&(s.appContext=n);for(const e in o)s.component.props[e]=o[e]}else s=(0,e.createVNode)(t,o),n&&(s.appContext=n),(0,e.render)(s,r);return{vueInstance:s,destroy:()=>(0,e.render)(null,r),el:r}};class c{constructor(e,t,r,o,n){this.VueEditorConstructor=e,this.column=t,this.save=r,this.close=o,this.appContext=n,this.element=null,this.editCell=null}componentDidRender(){}disconnectedCallback(){this.vueEl&&(this.vueEl.destroy(),this.vueEl=void 0)}render(e){return e("span",{ref:e=>{this.vueEl=d(this.VueEditorConstructor,e,Object.assign(Object.assign({},this.editCell),{column:this.column,save:this.save,close:this.close}),this.appContext)}})}}const f=u;let p=!1;const v={install(e){p||(p=!0,e.component("vue-data-grid",f))}},m=t=>{const r=(0,e.getCurrentInstance)(),o=null==r?void 0:r.appContext;return(e,r)=>e("span",{ref:e=>d(t,e,r,o)})},b=d,g=t=>{const r=(0,e.getCurrentInstance)(),o=null==r?void 0:r.appContext;return function(e,r,n){return new c(t,e,r,n,o)}},h=u})(),s})()));

package/dist/vue-editor-adapter.d.ts

@@ -6,10 +6,11 @@ export default class VueEditorAdapter {
     column: RevoGrid.ColumnDataSchemaModel;
     private save;
     private close;
+    private appContext;
     element: Element | null;
     editCell: Edition.EditCell | null;
     private vueEl;
-    constructor(VueEditorConstructor: DefineComponent, column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function);
+    constructor(VueEditorConstructor: DefineComponent, column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function, appContext: Object);
     componentDidRender(): void;
     disconnectedCallback(): void;
     render(h: RevoGrid.HyperFunc<VNode>): JSX.Element;

package/dist/vue-template.d.ts

@@ -1,6 +1,13 @@
 import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces';
 import { VNode } from '@revolist/revogrid/dist/types/stencil-public-runtime';
-import { DefineComponent } from 'vue';
-export declare const vueTemplateConstructor: (vueConstructor: DefineComponent, e: HTMLElement | null, p: Record<string, any>) => any;
+import { ComponentPublicInstance, DefineComponent } from "vue";
+export interface VueElement extends HTMLElement {
+    _vnode?: ComponentPublicInstance<any>;
+}
+export declare const vueTemplateConstructor: (vueConstructor: DefineComponent, el: VueElement | null, p: Record<string, any>, appContext: any) => {
+    vueInstance: any;
+    destroy: () => void;
+    el: VueElement;
+};
 declare const vueTemplate: (vueConstructor: any) => (h: RevoGrid.HyperFunc<VNode>, p: RevoGrid.ColumnDataSchemaModel) => JSX.Element;
 export default vueTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/vue3-datagrid",
-  "version": "3.2.16",
+  "version": "3.2.17",
   "description": "Vue 3 DataGrid Spreadsheet",
   "main": "dist/vgrid.js",
   "types": "dist/vgrid.d.ts",

package/src/vgrid.ts

@@ -1,6 +1,6 @@
-import { App, defineAsyncComponent } from "vue";
-import {RevoGrid} from "./revogrid";
-import vueTemplate, {vueTemplateConstructor} from "./vue-template";
+import { App } from "vue";
+import { RevoGrid } from "./revogrid";
+import vueTemplate, { vueTemplateConstructor } from "./vue-template";
 import vueEditor from "./vue-editor";
 
 export const VGrid = RevoGrid;
@@ -13,8 +13,8 @@ export const VGridPlugin = {
       return;
     }
     installed = true;
-    app.component('vue-data-grid', VGrid);
-  }
+    app.component("vue-data-grid", VGrid);
+  },
 };
 
 // Vue template wrapper for virtual nodes
@@ -26,6 +26,4 @@ export const VGridVueTemplateConstructor = vueTemplateConstructor;
 // Vue editor wrapper
 export const VGridVueEditor = vueEditor;
 
-
 export default VGrid;
-

package/src/vue-editor-adapter.tsx

@@ -12,7 +12,8 @@ export default class VueEditorAdapter {
         private VueEditorConstructor: DefineComponent,
         public column: RevoGrid.ColumnDataSchemaModel,
         private save: Function,
-        private close: Function
+        private close: Function,
+        private appContext: Object
     ) {}
 
     // optional, called after editor rendered
@@ -20,8 +21,10 @@ export default class VueEditorAdapter {
 
     // optional, called after editor destroyed
     disconnectedCallback() {
-        this.vueEl?.$destroy();
-        this.vueEl = undefined;
+        if (this.vueEl) {
+          this.vueEl.destroy();
+          this.vueEl = undefined;
+        }
     }
 
     render(h: RevoGrid.HyperFunc<VNode>) {
@@ -31,6 +34,6 @@ export default class VueEditorAdapter {
             column: this.column,
             save: this.save,
             close: this.close
-        })}}/>;
+        }, this.appContext)}}/>;
     }
-}
+}

package/src/vue-editor.tsx

@@ -1,10 +1,13 @@
 import {RevoGrid} from "@revolist/revogrid/dist/types/interfaces";
+import { getCurrentInstance } from "vue";
 import VueEditorAdapter from './vue-editor-adapter';
 
   
 const vueEditor = (vueConstructor: any) => {
+    const current = getCurrentInstance();
+    const appContext = current?.appContext;
     return function(column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function) {
-        return new VueEditorAdapter(vueConstructor, column, save, close);
+        return new VueEditorAdapter(vueConstructor, column, save, close, appContext);
     }
 };
 

package/src/vue-template.tsx

@@ -1,43 +1,41 @@
 import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces';
 import { VNode } from '@revolist/revogrid/dist/types/stencil-public-runtime';
-import { ComponentPublicInstance, createVNode, DefineComponent, render } from 'vue';
+import { ComponentPublicInstance, createVNode, DefineComponent, render, getCurrentInstance } from "vue";
 
 
-interface VueElement extends HTMLElement {
+export interface VueElement extends HTMLElement {
     _vnode?: ComponentPublicInstance<any>;
 }
 export const vueTemplateConstructor =
-    (vueConstructor: DefineComponent, e: HTMLElement|null, p: Record<string, any>) => {
-        if (!e) {
-            return null;
-        }
-        let el: VueElement|undefined;
-        if (e?.childNodes.length) {
-            el = e.childNodes[0] as VueElement;
-        }
-        
-        if (!el) {
-            // create dom element wrapper for vue instance
-            el = document.createElement('span');
-            e.appendChild(el);
-        }
-        // check, probably vue instance already inited
-        let vueInstance = el._vnode;
-        // if exists, return
-        if (vueInstance) {
-            // if vue inited just update it's properties
-            for (const k in p) {
-                vueInstance.component.props[k] = p[k];
-            }
-        } else {
-            const vNode = createVNode(vueConstructor, p);
-            render(vNode, el);
+    (vueConstructor: DefineComponent, el: VueElement|null, p: Record<string, any>, appContext: any) => {
+    if (!el) {
+      return null;
+    }
+
+    // check, probably vue instance already inited
+    let vNode = el._vnode;
+    // if exists, return
+    if (vNode) {
+        if (appContext) vNode.appContext = appContext;
+        // if vue inited just update it's properties
+        for (const k in p) {
+            vNode.component.props[k] = p[k];
         }
-        return vueInstance;
-    };
+    } else {
+        vNode = createVNode(vueConstructor, p);
+        if (appContext) vNode.appContext = appContext;
+        render(vNode, el);
+    }
+
+    // useful hints: https://stackoverflow.com/questions/65163775/how-to-destroy-unmount-vue-js-3-components
+    const destroy = () => render(null, el);
+    return { vueInstance: vNode, destroy, el };
+};
 
 const vueTemplate = (vueConstructor: any) => {
-    return (h: RevoGrid.HyperFunc<VNode>, p: RevoGrid.ColumnDataSchemaModel) => <span ref={(el) => vueTemplateConstructor(vueConstructor, el as HTMLElement, p)}></span>;
+    const current = getCurrentInstance();
+    const appContext = current?.appContext;
+    return (h: RevoGrid.HyperFunc<VNode>, p: RevoGrid.ColumnDataSchemaModel) => <span ref={(el) => vueTemplateConstructor(vueConstructor, el as HTMLElement, p, appContext)}></span>;
 };
 
 export default vueTemplate;