@revolist/vue3-datagrid 3.2.16 → 3.6.16

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/.webpack/webpack.dev.js

@@ -33,7 +33,7 @@ module.exports = {
     extensions: [ '.tsx', '.ts', '.js', '.vue' ],
     alias: {
       'vue$': 'vue/dist/vue.esm-bundler.js',
-      '@revolist/vue-datagrid': path.resolve(__dirname, '../dist/vgrid')
+      '@revolist/vue-datagrid': path.resolve(__dirname, '../src/vgrid')
     }
   },
   module: {

package/dist/revogrid.d.ts

@@ -1,50 +1,14 @@
 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>>, {
-    rowSelectionStore?: any;
-    viewportRow?: any;
-    viewportCol?: any;
-    dimensionRow?: any;
-    colData?: any;
-    dataStore?: any;
-}>;
-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;
-    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;
-    selectionStore?: any;
-    dimensionCol?: any;
-}>;
-export declare const RevogrOrderEditor: import("vue").DefineComponent<JSX.RevogrOrderEditor & 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.RevogrOrderEditor & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
-    dimensionRow?: any;
-    dataStore?: any;
-    dimensionCol?: any;
-}>;
-export declare const RevogrOverlaySelection: import("vue").DefineComponent<JSX.RevogrOverlaySelection & 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.RevogrOverlaySelection & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
-    dimensionRow?: any;
-    colData?: any;
-    dataStore?: any;
-    selectionStore?: any;
-    dimensionCol?: any;
-}>;
-export declare const RevogrRowHeaders: import("vue").DefineComponent<JSX.RevogrRowHeaders & 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.RevogrRowHeaders & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
-export declare const RevogrScrollVirtual: import("vue").DefineComponent<JSX.RevogrScrollVirtual & 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.RevogrScrollVirtual & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
-    viewportStore?: any;
-    dimensionStore?: any;
-}>;
-export declare const RevogrTempRange: import("vue").DefineComponent<JSX.RevogrTempRange & 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.RevogrTempRange & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
-    dimensionRow?: any;
-    selectionStore?: any;
-    dimensionCol?: any;
-}>;
-export declare const RevogrViewportScroll: import("vue").DefineComponent<JSX.RevogrViewportScroll & 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.RevogrViewportScroll & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
+export declare const RevoGrid: (props: JSX.RevoGrid & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrClipboard: (props: JSX.RevogrClipboard & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrData: (props: JSX.RevogrData & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrEdit: (props: JSX.RevogrEdit & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrFilterPanel: (props: JSX.RevogrFilterPanel & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrFocus: (props: JSX.RevogrFocus & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrHeader: (props: JSX.RevogrHeader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrOrderEditor: (props: JSX.RevogrOrderEditor & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrOverlaySelection: (props: JSX.RevogrOverlaySelection & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrRowHeaders: (props: JSX.RevogrRowHeaders & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrScrollVirtual: (props: JSX.RevogrScrollVirtual & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrTempRange: (props: JSX.RevogrTempRange & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
+export declare const RevogrViewportScroll: (props: JSX.RevogrViewportScroll & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;

package/dist/vgrid.d.ts

@@ -1,9 +1,13 @@
 import { App } from "vue";
-export declare const VGrid: import("vue").DefineComponent<import("@revolist/revogrid/dist/types/components").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<import("@revolist/revogrid/dist/types/components").JSX.RevoGrid & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
+export declare const VGrid: (props: import("@revolist/revogrid/dist/types/components").JSX.RevoGrid & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}) => any;
 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, 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,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("vue"),require("@revolist/revogrid/loader")):"function"==typeof define&&define.amd?define("VGrid",["vue","@revolist/revogrid/loader"],r):"object"==typeof exports?exports.VGrid=r(require("vue"),require("@revolist/revogrid/loader")):e.VGrid=r(e.vue,e["@revolist/revogrid/loader"])}(self,((e,r)=>(()=>{"use strict";var t,o,n,s,a={941:(e,r,t)=>{t.a(e,(async(e,o)=>{try{t.d(r,{d_:()=>e});var n=t(638),s=t(829);await(0,s.defineCustomElements)();const e=(0,n.j)("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"]);o()}catch(e){o(e)}}),1)},846:(e,r,t)=>{t.a(e,(async(e,o)=>{try{t.r(r),t.d(r,{VGrid:()=>l,VGridPlugin:()=>d,VGridVueEditor:()=>p,VGridVueTemplate:()=>c,VGridVueTemplateConstructor:()=>f,default:()=>v});var n=t(941),s=t(258),a=t(210),i=e([n]);const l=(n=(i.then?(await i)():i)[0]).d_;let u=!1;const d={install(e){u||(u=!0,e.component("vue-data-grid",l))}},c=s.Z,f=s.k,p=a.Z,v=l;o()}catch(e){o(e)}}))},638:(e,r,t)=>{t.d(r,{j:()=>c});var o=t(748);const n="update:modelValue",s="modelValue",a="navManager",i=Symbol(),l={default:i},u=e=>(null==e?void 0:e.split(" "))||[],d=(e,r,t=[])=>{var o;return[...Array.from((null===(o=e.value)||void 0===o?void 0:o.classList)||[]),...t].filter(((e,t,o)=>!r.has(e)&&o.indexOf(e)===t))},c=(e,r,t=[],c,f,p)=>{void 0!==r&&r();const v=(0,o.defineComponent)(((r,{attrs:t,slots:l,emit:v})=>{var m;let b=r[c];const h=(0,o.ref)(),y=new Set(u(t.class)),g=e=>{e.el&&(Array.isArray(f)?f:[f]).forEach((r=>{e.el.addEventListener(r.toLowerCase(),(e=>{b=(null==e?void 0:e.target)[c],v(n,b),p&&v(p,e)}))}))},w=(0,o.getCurrentInstance)(),C=(null===(m=null==w?void 0:w.appContext)||void 0===m?void 0:m.provides[a])?(0,o.inject)(a):void 0;return()=>{b=r[c],u(t.class).forEach((e=>{y.add(e)}));const n=r.onClick;let a={ref:h,class:d(h,y),onClick:e=>{void 0!==n&&n(e),e.defaultPrevented||(e=>{const{routerLink:t}=r;if(t!==i)if(void 0!==C){let t={event:e};for(const e in r){const o=r[e];r.hasOwnProperty(e)&&e.startsWith("router")&&o!==i&&(t[e]=o)}C.navigate(t)}else console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.")})(e)},onVnodeBeforeMount:f?g:void 0};for(const e in r){const t=r[e];(r.hasOwnProperty(e)&&t!==i||e.startsWith("aria"))&&(a[e]=t)}return c&&(r[s]!==i?a=Object.assign(Object.assign({},a),{[c]:r[s]}):b!==i&&(a=Object.assign(Object.assign({},a),{[c]:b}))),(0,o.h)(e,a,l.default&&l.default())}}));return"function"!=typeof v&&(v.name=e,v.props={routerLink:l},t.forEach((e=>{v.props[e]=l})),c&&(v.props[s]=l,v.emits=[n,p])),v}},210:(e,r,t)=>{t.d(r,{Z:()=>a});var o=t(748),n=t(258);class s{constructor(e,r,t,o,n){this.VueEditorConstructor=e,this.column=r,this.save=t,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=(0,n.k)(this.VueEditorConstructor,e,Object.assign(Object.assign({},this.editCell),{column:this.column,save:this.save,close:this.close}),this.appContext)}})}}const a=e=>{const r=(0,o.getCurrentInstance)(),t=null==r?void 0:r.appContext;return function(r,o,n){return new s(e,r,o,n,t)}}},258:(e,r,t)=>{t.d(r,{Z:()=>s,k:()=>n});var o=t(748);const n=(e,r,t,n)=>{if(!r)return null;let s=r._vnode;if(s){n&&(s.appContext=n);for(const e in t)s.component.props[e]=t[e]}else s=(0,o.createVNode)(e,t),n&&(s.appContext=n),(0,o.render)(s,r);return{vueInstance:s,destroy:()=>(0,o.render)(null,r),el:r}},s=e=>{const r=(0,o.getCurrentInstance)(),t=null==r?void 0:r.appContext;return(r,o)=>r("span",{ref:r=>n(e,r,o,t)})}},829:e=>{e.exports=r},748:r=>{r.exports=e}},i={};function l(e){var r=i[e];if(void 0!==r)return r.exports;var t=i[e]={exports:{}};return a[e](t,t.exports,l),t.exports}return t="function"==typeof Symbol?Symbol("webpack queues"):"__webpack_queues__",o="function"==typeof Symbol?Symbol("webpack exports"):"__webpack_exports__",n="function"==typeof Symbol?Symbol("webpack error"):"__webpack_error__",s=e=>{e&&e.d<1&&(e.d=1,e.forEach((e=>e.r--)),e.forEach((e=>e.r--?e.r++:e())))},l.a=(e,r,a)=>{var i;a&&((i=[]).d=-1);var l,u,d,c=new Set,f=e.exports,p=new Promise(((e,r)=>{d=r,u=e}));p[o]=f,p[t]=e=>(i&&e(i),c.forEach(e),p.catch((e=>{}))),e.exports=p,r((e=>{var r;l=(e=>e.map((e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){var r=[];r.d=0,e.then((e=>{a[o]=e,s(r)}),(e=>{a[n]=e,s(r)}));var a={};return a[t]=e=>e(r),a}}var i={};return i[t]=e=>{},i[o]=e,i})))(e);var a=()=>l.map((e=>{if(e[n])throw e[n];return e[o]})),u=new Promise((e=>{(r=()=>e(a)).r=0;var o=e=>e!==i&&!c.has(e)&&(c.add(e),e&&!e.d&&(r.r++,e.push(r)));l.map((e=>e[t](o)))}));return r.r?u:a()}),(e=>(e?d(p[n]=e):u(f),s(i)))),i&&i.d<0&&(i.d=0)},l.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return l.d(r,{a:r}),r},l.d=(e,r)=>{for(var t in r)l.o(r,t)&&!l.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},l.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l(846)})()));

package/dist/vue-component-lib/utils.d.ts

@@ -15,6 +15,4 @@ export interface InputProps<T> {
 * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
 * correctly updated when a user's event callback fires.
 */
-export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => import("vue").DefineComponent<Props & InputProps<VModelType>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<Props & InputProps<VModelType> extends infer T ? T extends Props & InputProps<VModelType> ? T extends import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}> ? import("vue").ExtractPropTypes<T> : T : never : never>, import("vue").ExtractDefaultPropTypes<Props & InputProps<VModelType>>>;
+export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => (props: Props & InputProps<VModelType> & {}) => any;

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.6.16",
   "description": "Vue 3 DataGrid Spreadsheet",
   "main": "dist/vgrid.js",
   "types": "dist/vgrid.d.ts",
@@ -34,24 +34,24 @@
   "homepage": "https://github.com/revolist/vue3-datagrid#readme",
   "license": "MIT",
   "dependencies": {
-    "@revolist/revogrid": "^3.2.16",
+    "@revolist/revogrid": "^3.6.16",
     "@stencil/core": "^2.17.3"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-sfc": "^3.3.4",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.1",
-    "html-webpack-plugin": "^5.5.0",
-    "sass": "^1.54.4",
-    "sass-loader": "^13.0.2",
-    "style-loader": "^3.3.1",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "vue": "^3.2.37",
-    "vue-loader": "^17.0.0",
+    "html-webpack-plugin": "^5.5.3",
+    "sass": "^1.64.2",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "vue": "^3.3.4",
+    "vue-loader": "^17.2.2",
     "vue-style-loader": "^4.1.3",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.0"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }

package/public/App.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="tile large">
       <v-grid
-        ref="grid"
-        readonly="false"
+        :readonly="false"
         :source="source"
-        resize="false"
+        :resize="false"
         :columns="headers"
         :editors="gridEditors"
         theme="material"
@@ -16,8 +15,7 @@
 <script lang="ts">
 // beforeCellFocus
 import {defineComponent, ref} from 'vue';
-import {Components} from '@revolist/revogrid';
-import VGrid, { VGridVueEditor, VGridVueTemplate } from '@revolist/vue-datagrid';
+import VGrid, { VGridVueEditor, VGridVueTemplate } from '../src/vgrid';
 import Editor from './Editor.vue';
 import Cell from './Cell.vue';
 import {generateFakeDataObject} from './dataService';
@@ -34,8 +32,7 @@ export default defineComponent({
   setup() {
     const button = VGridVueEditor(Editor);
     const gridEditors = { button };
-    const grid = ref<Components.RevoGrid|null>(null);
-    return { grid, gridEditors };
+    return { gridEditors };
   },
   methods: {
     test(e: CustomEvent) {

package/public/dataService.ts

@@ -18,7 +18,7 @@ function naturalSort(prop,a,b) {
 }
 
 export function generateFakeDataObject(rowsNumber: number, colsNumber: number, cellTemplate: any) {
-    const result: Record<any, any> = [];
+    const result: any[] = [];
     const columns: Record<number, any> = {};
     const all = colsNumber * rowsNumber;
     for (let j = 0; j < all; j++) {

package/src/revogrid.ts

@@ -5,9 +5,9 @@ import { defineContainer } from './vue-component-lib/utils';
 
 import type { JSX } from '@revolist/revogrid';
 
-import { RevoGrid as RevoGridComponent } from '@revolist/revogrid/custom-element/';
+import { defineCustomElements } from '@revolist/revogrid/loader';
 
-export {RevoGridComponent};
+await defineCustomElements();
 
 export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid', undefined, [
   'rowHeaders',
@@ -164,6 +164,7 @@ export const RevogrOverlaySelection = /*@__PURE__*/ defineContainer<JSX.RevogrOv
   'internalCellEdit',
   'internalFocusCell',
   'setEdit',
+  'cancelEdit',
   'setRange',
   'setTempRange',
   'focusCell',

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-component-lib/utils.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
 import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
 export interface InputProps<T> {
@@ -9,7 +11,7 @@ const MODEL_VALUE = 'modelValue';
 const ROUTER_LINK_VALUE = 'routerLink';
 const NAV_MANAGER = 'navManager';
 const ROUTER_PROP_PREFIX = 'router';
-
+const ARIA_PROP_PREFIX = 'aria';
 /**
  * Starting in Vue 3.1.0, all properties are
  * added as keys to the props object, even if
@@ -30,26 +32,31 @@ const getComponentClasses = (classes: unknown) => {
   return (classes as string)?.split(' ') || [];
 };
 
-const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses: Set<string>, defaultClasses: string[] = []) => {
-  return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ]
-    .filter((c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+const getElementClasses = (
+  ref: Ref<HTMLElement | undefined>,
+  componentClasses: Set<string>,
+  defaultClasses: string[] = []
+) => {
+  return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter(
+    (c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
+  );
 };
 
 /**
-* Create a callback to define a Vue component wrapper around a Web Component.
-*
-* @prop name - The component tag name (i.e. `ion-button`)
-* @prop componentProps - An array of properties on the
-* component. These usually match up with the @Prop definitions
-* in each component's TSX file.
-* @prop customElement - An option custom element instance to pass
-* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
-* @prop modelProp - The prop that v-model binds to (i.e. value)
-* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
-* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
-* correctly updated when a user's event callback fires.
-*/
-export const defineContainer = <Props, VModelType=string|number|boolean>(
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
+ * correctly updated when a user's event callback fires.
+ */
+export const defineContainer = <Props, VModelType = string | number | boolean>(
   name: string,
   defineCustomElement: any,
   componentProps: string[] = [],
@@ -58,16 +65,16 @@ export const defineContainer = <Props, VModelType=string|number|boolean>(
   externalModelUpdateEvent?: string
 ) => {
   /**
-  * Create a Vue component wrapper around a Web Component.
-  * Note: The `props` here are not all properties on a component.
-  * They refer to whatever properties are set on an instance of a component.
-  */
+   * Create a Vue component wrapper around a Web Component.
+   * Note: The `props` here are not all properties on a component.
+   * They refer to whatever properties are set on an instance of a component.
+   */
 
   if (defineCustomElement !== undefined) {
     defineCustomElement();
   }
 
-  const Container = defineComponent<Props & InputProps<VModelType>>((props: any, { attrs, slots, emit }) => {
+  const Container = defineComponent<Props & InputProps<VModelType>>((props, { attrs, slots, emit }) => {
     let modelPropValue = props[modelProp];
     const containerRef = ref<HTMLElement>();
     const classes = new Set(getComponentClasses(attrs.class));
@@ -116,12 +123,12 @@ export const defineContainer = <Props, VModelType=string|number|boolean>(
       } else {
         console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
       }
-    }
+    };
 
     return () => {
       modelPropValue = props[modelProp];
 
-      getComponentClasses(attrs.class).forEach(value => {
+      getComponentClasses(attrs.class).forEach((value) => {
         classes.add(value);
       });
 
@@ -133,13 +140,13 @@ export const defineContainer = <Props, VModelType=string|number|boolean>(
         if (!ev.defaultPrevented) {
           handleRouterLink(ev);
         }
-      }
+      };
 
       let propsToAdd: any = {
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
         onClick: handleClick,
-        onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
+        onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
       };
 
       /**
@@ -150,7 +157,7 @@ export const defineContainer = <Props, VModelType=string|number|boolean>(
        */
       for (const key in props) {
         const value = props[key];
-        if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+        if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
           propsToAdd[key] = value;
         }
       }
@@ -165,33 +172,35 @@ export const defineContainer = <Props, VModelType=string|number|boolean>(
         if (props[MODEL_VALUE] !== EMPTY_PROP) {
           propsToAdd = {
             ...propsToAdd,
-            [modelProp]: props[MODEL_VALUE]
-          }
+            [modelProp]: props[MODEL_VALUE],
+          };
         } else if (modelPropValue !== EMPTY_PROP) {
           propsToAdd = {
             ...propsToAdd,
-            [modelProp]: modelPropValue
-          }
+            [modelProp]: modelPropValue,
+          };
         }
       }
 
       return h(name, propsToAdd, slots.default && slots.default());
-    }
+    };
   });
 
-  Container.displayName = name;
+  if (typeof Container !== 'function') {
+    Container.name = name;
 
-  Container.props = {
-    [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
-  };
+    Container.props = {
+      [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
+    };
 
-  componentProps.forEach(componentProp => {
-    Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-  });
+    componentProps.forEach((componentProp) => {
+      Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+    });
 
-  if (modelProp) {
-    Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-    Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+    if (modelProp) {
+      Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+      Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+    }
   }
 
   return Container;

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,11 +1,14 @@
-import {RevoGrid} from "@revolist/revogrid/dist/types/interfaces";
+import {RevoGrid, Edition} from "@revolist/revogrid/dist/types/interfaces";
+import { getCurrentInstance } from "vue";
 import VueEditorAdapter from './vue-editor-adapter';
 
   
-const vueEditor = (vueConstructor: any) => {
+const vueEditor = (vueConstructor: any): Edition.EditorCtr => {
+    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);
+    } as unknown as Edition.EditorCtr;
 };
 
 export default vueEditor;

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;

package/tsconfig.json

@@ -3,7 +3,6 @@
     "outDir": "./dist/",
     "baseUrl": "./",
     "allowSyntheticDefaultImports": true,
-    "declaration": true,
     "experimentalDecorators": true,
     "lib": ["dom", "es2017"],
     "moduleResolution": "node",