@revolist/vue3-datagrid 3.2.5 → 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/revogrid.d.ts

@@ -1,4 +1,6 @@
 import type { JSX } from '@revolist/revogrid';
+import { RevoGrid as RevoGridComponent } from '@revolist/revogrid/custom-element/';
+export { RevoGridComponent };
 export declare const RevoGrid: import("vue").DefineComponent<JSX.RevoGrid & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevoGrid & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
 export declare const RevogrClipboard: import("vue").DefineComponent<JSX.RevogrClipboard & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevogrClipboard & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
 export declare const RevogrData: import("vue").DefineComponent<JSX.RevogrData & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevogrData & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
@@ -12,9 +14,11 @@ export declare const RevogrData: import("vue").DefineComponent<JSX.RevogrData &
 export declare const RevogrEdit: import("vue").DefineComponent<JSX.RevogrEdit & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevogrEdit & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
 export declare const RevogrFilterPanel: import("vue").DefineComponent<JSX.RevogrFilterPanel & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevogrFilterPanel & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
 export declare const RevogrFocus: import("vue").DefineComponent<JSX.RevogrFocus & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevogrFocus & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
-    dimensionRow?: any;
-    selectionStore?: any;
-    dimensionCol?: any;
+    dimensionRow: any;
+    colData: any;
+    dataStore: any;
+    selectionStore: any;
+    dimensionCol: any;
 }>;
 export declare const RevogrHeader: import("vue").DefineComponent<JSX.RevogrHeader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.RevogrHeader & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
     viewportCol?: any;

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,o){"object"==typeof exports&&"object"==typeof module?module.exports=o(require("vue"),require("@revolist/revogrid/custom-element")):"function"==typeof define&&define.amd?define("VGrid",["vue","@revolist/revogrid/custom-element"],o):"object"==typeof exports?exports.VGrid=o(require("vue"),require("@revolist/revogrid/custom-element")):e.VGrid=o(e.vue,e["@revolist/revogrid/custom-element"])}(self,((e,o)=>(()=>{"use strict";var r={239:e=>{e.exports=o},748:o=>{o.exports=e}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var s=t[e]={exports:{}};return r[e](s,s.exports,n),s.exports}n.d=(e,o)=>{for(var r in o)n.o(o,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},n.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),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:()=>p,VGridPlugin:()=>m,VGridVueEditor:()=>h,VGridVueTemplate:()=>b,VGridVueTemplateConstructor:()=>g,default:()=>y});var e=n(748),o=n(239);const r="update:modelValue",t=Symbol(),i={default:t},l=e=>(null==e?void 0:e.split(" "))||[],a=(e,o,r=[])=>{var t;return[...Array.from((null===(t=e.value)||void 0===t?void 0:t.classList)||[]),...r].filter(((e,r,t)=>!o.has(e)&&t.indexOf(e)===r))},d=((o,n,s=[],d,u,c)=>{void 0!==n&&n();const f=(0,e.defineComponent)(((n,{attrs:s,slots:i,emit:f})=>{var p;let v=n[d];const m=(0,e.ref)(),b=new Set(l(s.class)),g=e=>{e.el&&(Array.isArray(u)?u:[u]).forEach((o=>{e.el.addEventListener(o.toLowerCase(),(e=>{v=(null==e?void 0:e.target)[d],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=n[d],l(s.class).forEach((e=>{b.add(e)}));const r=n.onClick;let c={ref:m,class:a(m,b),onClick:e=>{void 0!==r&&r(e),e.defaultPrevented||(e=>{const{routerLink:o}=n;if(o!==t)if(void 0!==y){let o={event:e};for(const e in n){const r=n[e];n.hasOwnProperty(e)&&e.startsWith("router")&&r!==t&&(o[e]=r)}y.navigate(o)}else console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.")})(e)},onVnodeBeforeMount:u?g:void 0};for(const e in n){const o=n[e];n.hasOwnProperty(e)&&o!==t&&(c[e]=o)}return d&&(n.modelValue!==t?c=Object.assign(Object.assign({},c),{[d]:n.modelValue}):v!==t&&(c=Object.assign(Object.assign({},c),{[d]:v}))),(0,e.h)(o,c,i.default&&i.default())}}));return f.displayName=o,f.props={routerLink:i},s.forEach((e=>{f.props[e]=i})),d&&(f.props.modelValue=i,f.emits=[r,c]),f})("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","roworderchanged","beforesourcesortingapply","beforesortingapply","beforesorting","rowdragstart","headerclick","beforecellfocus","beforefocuslost","beforesourceset","aftersourceset","beforecolumnsset","beforecolumnapplied","aftercolumnsset","beforefilterapply","beforefiltertrimmed","beforetrimmed","aftertrimmed","viewportscroll","beforeexport","beforeeditstart","aftercolumnresize"]),u=(o,r,t)=>{if(!r)return null;let n;(null==r?void 0:r.childNodes.length)&&(n=r.childNodes[0]),n||(n=document.createElement("span"),r.appendChild(n));let s=n._vnode;if(s)for(const e in t)s.component.props[e]=t[e];else{const r=(0,e.createVNode)(o,t);(0,e.render)(r,n)}return s};class c{constructor(e,o,r,t){this.VueEditorConstructor=e,this.column=o,this.save=r,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=u(this.VueEditorConstructor,e,Object.assign(Object.assign({},this.editCell),{column:this.column,save:this.save,close:this.close}))}})}}let f=!1;const p=(0,e.defineAsyncComponent)((()=>new Promise((e=>(!f&&o&&(o.defineCustomElements(),f=!0),e(d))))));let v=!1;const m={install(e){v||(v=!0,e.component("vue-data-grid",p))}},b=e=>(o,r)=>o("span",{ref:o=>u(e,o,r)}),g=u,h=e=>function(o,r,t){return new c(e,o,r,t)},y=p})(),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.5",
+  "version": "3.2.17",
   "description": "Vue 3 DataGrid Spreadsheet",
   "main": "dist/vgrid.js",
   "types": "dist/vgrid.d.ts",
@@ -34,7 +34,7 @@
   "homepage": "https://github.com/revolist/vue3-datagrid#readme",
   "license": "MIT",
   "dependencies": {
-    "@revolist/revogrid": "^3.2.6",
+    "@revolist/revogrid": "^3.2.16",
     "@stencil/core": "^2.17.3"
   },
   "devDependencies": {

package/src/revogrid.ts

@@ -5,8 +5,9 @@ import { defineContainer } from './vue-component-lib/utils';
 
 import type { JSX } from '@revolist/revogrid';
 
+import { RevoGrid as RevoGridComponent } from '@revolist/revogrid/custom-element/';
 
-
+export {RevoGridComponent};
 
 export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid', undefined, [
   'rowHeaders',
@@ -40,6 +41,7 @@ export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid',
   'afteredit',
   'beforeautofill',
   'beforeaange',
+  'afterfocus',
   'roworderchanged',
   'beforesourcesortingapply',
   'beforesortingapply',
@@ -107,9 +109,12 @@ export const RevogrFilterPanel = /*@__PURE__*/ defineContainer<JSX.RevogrFilterP
 
 
 export const RevogrFocus = /*@__PURE__*/ defineContainer<JSX.RevogrFocus>('revogr-focus', undefined, [
+  'dataStore',
+  'colData',
   'selectionStore',
   'dimensionRow',
-  'dimensionCol'
+  'dimensionCol',
+  'afterfocus'
 ]);
 
 

package/src/vgrid.ts

@@ -1,19 +1,9 @@
-import { App, defineAsyncComponent } from "vue";
-import * as loader from "@revolist/revogrid/custom-element";
-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";
 
-let isDefined = false;
-export const VGrid = defineAsyncComponent(
-  () => new Promise<typeof RevoGrid>((resolve) => {
-    if (!isDefined && loader) {
-      loader.defineCustomElements();
-      isDefined = true;
-    }
-    return resolve(RevoGrid);
-  })
-);
+export const VGrid = RevoGrid;
 
 let installed = false;
 
@@ -23,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
@@ -36,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;