@revolist/vue3-datagrid 3.2.1 → 3.2.5

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, '../src/vgrid')
+      '@revolist/vue-datagrid': path.resolve(__dirname, '../dist/vgrid')
     }
   },
   module: {

package/dist/revogrid.d.ts

@@ -0,0 +1,46 @@
+import type { JSX } from '@revolist/revogrid';
+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;
+    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>>, {}>;

package/dist/vgrid.d.ts

@@ -0,0 +1,9 @@
+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 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 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,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,(function(e,t){return(()=>{"use strict";var r={556:(e,t,r)=>{r.r(t),r.d(t,{VGrid:()=>f,VGridPlugin:()=>m,VGridVueEditor:()=>g,VGridVueTemplate:()=>v,VGridVueTemplateConstructor:()=>b,default:()=>h});var o=r(103),n=r(12);const s="update:modelValue",i=e=>{var t;return(null===(t=e)||void 0===t?void 0:t.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))},u=((e,t=[],r={})=>{const{modelProp:n,modelUpdateEvent:u}=r,a=(0,o.defineComponent)(((t,{attrs:r,slots:a,emit:d})=>{var c;let f=t[n];const p=(0,o.ref)(),m=new Set(i(r.class)),v=e=>{e.el&&e.el.addEventListener(u.toLowerCase(),(e=>{f=(null==e?void 0:e.target)[n],d(s,f),d(u,e),e.stopImmediatePropagation()}))},b=(0,o.getCurrentInstance)(),g=(null===(c=null==b?void 0:b.appContext)||void 0===c?void 0:c.provides.navManager)?(0,o.inject)("navManager"):void 0;return()=>{i(r.class).forEach((e=>{m.add(e)}));const s=t.onClick;let d=Object.assign(Object.assign({},t),{ref:p,class:l(p,m),onClick:e=>{void 0!==s&&s(e),e.defaultPrevented||(e=>{const{routerLink:r}=t;if(!r)return;const o=Object.keys(t).filter((e=>e.startsWith("router")));if(void 0!==g){let r={event:e};o.forEach((e=>{r[e]=t[e]})),g.navigate(r)}else console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.")})(e)},onVnodeBeforeMount:u?v:void 0});return n&&(d=Object.assign(Object.assign({},d),{[n]:t.hasOwnProperty("modelValue")?t.modelValue:f})),(0,o.h)(e,d,a.default&&a.default())}}));return a.displayName=e,a.props=[...t,"routerLink"],n&&(a.props.push("modelValue"),a.emits=[s,u]),a})("revo-grid",["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"]),a=(e,t,r)=>{if(!t)return null;let n;(null==t?void 0:t.childNodes.length)&&(n=t.childNodes[0]),n||(n=document.createElement("span"),t.appendChild(n));let s=n._vnode;if(s)for(const e in r)s.component.props[e]=r[e];else{const t=(0,o.createVNode)(e,r);(0,o.render)(t,n)}return s};class d{constructor(e,t,r,o){this.VueEditorConstructor=e,this.column=t,this.save=r,this.close=o,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=a(this.VueEditorConstructor,e,Object.assign(Object.assign({},this.editCell),{column:this.column,save:this.save,close:this.close}))}})}}let c=!1;const f=(0,o.defineAsyncComponent)((()=>new Promise((e=>(!c&&n&&(n.defineCustomElements(),c=!0),e(u))))));let p=!1;const m={install(e){p||(p=!0,e.component("vue-data-grid",f))}},v=e=>(t,r)=>t("span",{ref:t=>a(e,t,r)}),b=a,g=e=>function(t,r,o){return new d(e,t,r,o)},h=f},12:e=>{e.exports=t},103:t=>{t.exports=e}},o={};function n(e){if(o[e])return o[e].exports;var t=o[e]={exports:{}};return r[e](t,t.exports,n),t.exports}return 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})},n(556)})()}));
+!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})()));

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

@@ -0,0 +1,20 @@
+export interface InputProps<T> {
+    modelValue?: T;
+}
+/**
+* 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 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>>>;

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

@@ -0,0 +1,16 @@
+import { Edition, RevoGrid } from '@revolist/revogrid/dist/types/interfaces';
+import { VNode } from '@revolist/revogrid/dist/types/stencil-public-runtime';
+import { DefineComponent } from 'vue';
+export default class VueEditorAdapter {
+    private VueEditorConstructor;
+    column: RevoGrid.ColumnDataSchemaModel;
+    private save;
+    private close;
+    element: Element | null;
+    editCell: Edition.EditCell | null;
+    private vueEl;
+    constructor(VueEditorConstructor: DefineComponent, column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function);
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(h: RevoGrid.HyperFunc<VNode>): JSX.Element;
+}

package/dist/vue-editor.d.ts

@@ -0,0 +1,4 @@
+import { RevoGrid } from "@revolist/revogrid/dist/types/interfaces";
+import VueEditorAdapter from './vue-editor-adapter';
+declare const vueEditor: (vueConstructor: any) => (column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function) => VueEditorAdapter;
+export default vueEditor;

package/dist/vue-template.d.ts

@@ -0,0 +1,6 @@
+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;
+declare const vueTemplate: (vueConstructor: any) => (h: RevoGrid.HyperFunc<VNode>, p: RevoGrid.ColumnDataSchemaModel) => JSX.Element;
+export default vueTemplate;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@revolist/vue3-datagrid",
-  "version": "3.2.1",
-  "description": "Vue 3 data grid spreadsheet",
+  "version": "3.2.5",
+  "description": "Vue 3 DataGrid Spreadsheet",
   "main": "dist/vgrid.js",
+  "types": "dist/vgrid.d.ts",
   "scripts": {
     "build": "webpack --config ./.webpack/webpack.config.js --mode production",
     "serve": "webpack serve --config ./.webpack/webpack.dev.js"
@@ -33,24 +34,24 @@
   "homepage": "https://github.com/revolist/vue3-datagrid#readme",
   "license": "MIT",
   "dependencies": {
-    "@revolist/revogrid": "^3.2.0",
-    "@stencil/core": "^2.6.0"
+    "@revolist/revogrid": "^3.2.6",
+    "@stencil/core": "^2.17.3"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.5",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.1",
-    "html-webpack-plugin": "^4.5.0",
-    "sass": "^1.53.0",
+    "@vue/compiler-sfc": "^3.2.37",
+    "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": "^2.0.0",
-    "ts-loader": "^8.0.6",
-    "typescript": "^4.0.3",
-    "vue": "^3.0.5",
-    "vue-loader": "^16.1.2",
-    "vue-style-loader": "^4.1.2",
-    "webpack": "^5.1.3",
-    "webpack-cli": "^4.1.0",
-    "webpack-dev-server": "^3.11.0"
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
+    "vue": "^3.2.37",
+    "vue-loader": "^17.0.0",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0"
   }
 }

package/src/revogrid.ts

@@ -8,7 +8,7 @@ import type { JSX } from '@revolist/revogrid';
 
 
 
-export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid', [
+export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid', undefined, [
   'rowHeaders',
   'frameSize',
   'rowSize',
@@ -64,13 +64,13 @@ export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid',
 ]);
 
 
-export const RevogrClipboard = /*@__PURE__*/ defineContainer<JSX.RevogrClipboard>('revogr-clipboard', [
+export const RevogrClipboard = /*@__PURE__*/ defineContainer<JSX.RevogrClipboard>('revogr-clipboard', undefined, [
   'copyRegion',
   'pasteRegion'
 ]);
 
 
-export const RevogrData = /*@__PURE__*/ defineContainer<JSX.RevogrData>('revogr-data', [
+export const RevogrData = /*@__PURE__*/ defineContainer<JSX.RevogrData>('revogr-data', undefined, [
   'readonly',
   'range',
   'canDrag',
@@ -85,7 +85,7 @@ export const RevogrData = /*@__PURE__*/ defineContainer<JSX.RevogrData>('revogr-
 ]);
 
 
-export const RevogrEdit = /*@__PURE__*/ defineContainer<JSX.RevogrEdit>('revogr-edit', [
+export const RevogrEdit = /*@__PURE__*/ defineContainer<JSX.RevogrEdit>('revogr-edit', undefined, [
   'editCell',
   'column',
   'editor',
@@ -94,7 +94,7 @@ export const RevogrEdit = /*@__PURE__*/ defineContainer<JSX.RevogrEdit>('revogr-
 ]);
 
 
-export const RevogrFilterPanel = /*@__PURE__*/ defineContainer<JSX.RevogrFilterPanel>('revogr-filter-panel', [
+export const RevogrFilterPanel = /*@__PURE__*/ defineContainer<JSX.RevogrFilterPanel>('revogr-filter-panel', undefined, [
   'uuid',
   'filterItems',
   'filterTypes',
@@ -106,14 +106,14 @@ export const RevogrFilterPanel = /*@__PURE__*/ defineContainer<JSX.RevogrFilterP
 ]);
 
 
-export const RevogrFocus = /*@__PURE__*/ defineContainer<JSX.RevogrFocus>('revogr-focus', [
+export const RevogrFocus = /*@__PURE__*/ defineContainer<JSX.RevogrFocus>('revogr-focus', undefined, [
   'selectionStore',
   'dimensionRow',
   'dimensionCol'
 ]);
 
 
-export const RevogrHeader = /*@__PURE__*/ defineContainer<JSX.RevogrHeader>('revogr-header', [
+export const RevogrHeader = /*@__PURE__*/ defineContainer<JSX.RevogrHeader>('revogr-header', undefined, [
   'viewportCol',
   'dimensionCol',
   'selectionStore',
@@ -129,7 +129,7 @@ export const RevogrHeader = /*@__PURE__*/ defineContainer<JSX.RevogrHeader>('rev
 ]);
 
 
-export const RevogrOrderEditor = /*@__PURE__*/ defineContainer<JSX.RevogrOrderEditor>('revogr-order-editor', [
+export const RevogrOrderEditor = /*@__PURE__*/ defineContainer<JSX.RevogrOrderEditor>('revogr-order-editor', undefined, [
   'parent',
   'dimensionRow',
   'dimensionCol',
@@ -142,7 +142,7 @@ export const RevogrOrderEditor = /*@__PURE__*/ defineContainer<JSX.RevogrOrderEd
 ]);
 
 
-export const RevogrOverlaySelection = /*@__PURE__*/ defineContainer<JSX.RevogrOverlaySelection>('revogr-overlay-selection', [
+export const RevogrOverlaySelection = /*@__PURE__*/ defineContainer<JSX.RevogrOverlaySelection>('revogr-overlay-selection', undefined, [
   'readonly',
   'range',
   'canDrag',
@@ -167,7 +167,7 @@ export const RevogrOverlaySelection = /*@__PURE__*/ defineContainer<JSX.RevogrOv
 ]);
 
 
-export const RevogrRowHeaders = /*@__PURE__*/ defineContainer<JSX.RevogrRowHeaders>('revogr-row-headers', [
+export const RevogrRowHeaders = /*@__PURE__*/ defineContainer<JSX.RevogrRowHeaders>('revogr-row-headers', undefined, [
   'height',
   'dataPorts',
   'headerProp',
@@ -179,7 +179,7 @@ export const RevogrRowHeaders = /*@__PURE__*/ defineContainer<JSX.RevogrRowHeade
 ]);
 
 
-export const RevogrScrollVirtual = /*@__PURE__*/ defineContainer<JSX.RevogrScrollVirtual>('revogr-scroll-virtual', [
+export const RevogrScrollVirtual = /*@__PURE__*/ defineContainer<JSX.RevogrScrollVirtual>('revogr-scroll-virtual', undefined, [
   'dimension',
   'viewportStore',
   'dimensionStore',
@@ -187,14 +187,14 @@ export const RevogrScrollVirtual = /*@__PURE__*/ defineContainer<JSX.RevogrScrol
 ]);
 
 
-export const RevogrTempRange = /*@__PURE__*/ defineContainer<JSX.RevogrTempRange>('revogr-temp-range', [
+export const RevogrTempRange = /*@__PURE__*/ defineContainer<JSX.RevogrTempRange>('revogr-temp-range', undefined, [
   'selectionStore',
   'dimensionRow',
   'dimensionCol'
 ]);
 
 
-export const RevogrViewportScroll = /*@__PURE__*/ defineContainer<JSX.RevogrViewportScroll>('revogr-viewport-scroll', [
+export const RevogrViewportScroll = /*@__PURE__*/ defineContainer<JSX.RevogrViewportScroll>('revogr-viewport-scroll', undefined, [
   'contentWidth',
   'contentHeight',
   'scrollViewport',

package/src/vue-component-lib/utils.ts

@@ -1,24 +1,31 @@
 import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
-export interface InputProps extends Object {
-  modelValue: string | boolean;
+export interface InputProps<T> {
+  modelValue?: T;
 }
 
 const UPDATE_VALUE_EVENT = 'update:modelValue';
 const MODEL_VALUE = 'modelValue';
 const ROUTER_LINK_VALUE = 'routerLink';
 const NAV_MANAGER = 'navManager';
-const ROUTER_PROP_REFIX = 'router';
+const ROUTER_PROP_PREFIX = 'router';
+
+/**
+ * Starting in Vue 3.1.0, all properties are
+ * added as keys to the props object, even if
+ * they are not being used. In order to correctly
+ * account for both value props and v-model props,
+ * we need to check if the key exists for Vue <3.1.0
+ * and then check if it is not undefined for Vue >= 3.1.0.
+ * See https://github.com/vuejs/vue-next/issues/3889
+ */
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
 
 interface NavManager<T = any> {
   navigate: (options: T) => void;
 }
 
-interface ComponentOptions {
-  modelProp?: string;
-  modelUpdateEvent?: string;
-}
-
 const getComponentClasses = (classes: unknown) => {
   return (classes as string)?.split(' ') || [];
 };
@@ -35,39 +42,56 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 * @prop componentProps - An array of properties on the
 * component. These usually match up with the @Prop definitions
 * in each component's TSX file.
-* @prop componentOptions - An object that defines additional
-* options for the component such as router or v-model
-* integrations.
+* @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>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
-  const { modelProp, modelUpdateEvent } = componentOptions;
-
+export const defineContainer = <Props, VModelType=string|number|boolean>(
+  name: string,
+  defineCustomElement: any,
+  componentProps: string[] = [],
+  modelProp?: string,
+  modelUpdateEvent?: string,
+  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.
   */
-  const Container = defineComponent<Props & InputProps>((props, { attrs, slots, emit }) => {
-    let modelPropValue = (props as any)[modelProp];
+
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+
+  const Container = defineComponent<Props & InputProps<VModelType>>((props: any, { attrs, slots, emit }) => {
+    let modelPropValue = props[modelProp];
     const containerRef = ref<HTMLElement>();
     const classes = new Set(getComponentClasses(attrs.class));
     const onVnodeBeforeMount = (vnode: VNode) => {
       // Add a listener to tell Vue to update the v-model
       if (vnode.el) {
-        vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
-          modelPropValue = (e?.target as any)[modelProp];
-          emit(UPDATE_VALUE_EVENT, modelPropValue);
-
-          /**
-           * We need to emit the change event here
-           * rather than on the web component to ensure
-           * that any v-model bindings have been updated.
-           * Otherwise, the developer will listen on the
-           * native web component, but the v-model will
-           * not have been updated yet.
-           */
-          emit(modelUpdateEvent, e);
-          e.stopImmediatePropagation();
+        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+        eventsNames.forEach((eventName: string) => {
+          vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => {
+            modelPropValue = (e?.target as any)[modelProp];
+            emit(UPDATE_VALUE_EVENT, modelPropValue);
+
+            /**
+             * We need to emit the change event here
+             * rather than on the web component to ensure
+             * that any v-model bindings have been updated.
+             * Otherwise, the developer will listen on the
+             * native web component, but the v-model will
+             * not have been updated yet.
+             */
+            if (externalModelUpdateEvent) {
+              emit(externalModelUpdateEvent, e);
+            }
+          });
         });
       }
     };
@@ -76,16 +100,18 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
     const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
     const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
     const handleRouterLink = (ev: Event) => {
-      const { routerLink } = props as any;
-      if (!routerLink) return;
-
-      const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));
+      const { routerLink } = props;
+      if (routerLink === EMPTY_PROP) return;
 
       if (navManager !== undefined) {
         let navigationPayload: any = { event: ev };
-        routerProps.forEach(prop => {
-          navigationPayload[prop] = (props as any)[prop];
-        });
+        for (const key in props) {
+          const value = props[key];
+          if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+            navigationPayload[key] = value;
+          }
+        }
+
         navManager.navigate(navigationPayload);
       } else {
         console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
@@ -93,11 +119,13 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
     }
 
     return () => {
+      modelPropValue = props[modelProp];
+
       getComponentClasses(attrs.class).forEach(value => {
         classes.add(value);
       });
 
-      const oldClick = (props as any).onClick;
+      const oldClick = props.onClick;
       const handleClick = (ev: Event) => {
         if (oldClick !== undefined) {
           oldClick(ev);
@@ -107,18 +135,43 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
         }
       }
 
-      let propsToAdd = {
-        ...props,
+      let propsToAdd: any = {
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
         onClick: handleClick,
         onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
       };
 
+      /**
+       * We can use Object.entries here
+       * to avoid the hasOwnProperty check,
+       * but that would require 2 iterations
+       * where as this only requires 1.
+       */
+      for (const key in props) {
+        const value = props[key];
+        if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+          propsToAdd[key] = value;
+        }
+      }
+
       if (modelProp) {
-        propsToAdd = {
-          ...propsToAdd,
-          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue
+        /**
+         * If form value property was set using v-model
+         * then we should use that value.
+         * Otherwise, check to see if form value property
+         * was set as a static value (i.e. no v-model).
+         */
+        if (props[MODEL_VALUE] !== EMPTY_PROP) {
+          propsToAdd = {
+            ...propsToAdd,
+            [modelProp]: props[MODEL_VALUE]
+          }
+        } else if (modelPropValue !== EMPTY_PROP) {
+          propsToAdd = {
+            ...propsToAdd,
+            [modelProp]: modelPropValue
+          }
         }
       }
 
@@ -127,10 +180,18 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
   });
 
   Container.displayName = name;
-  Container.props = [...componentProps, ROUTER_LINK_VALUE];
+
+  Container.props = {
+    [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
+  };
+
+  componentProps.forEach(componentProp => {
+    Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+  });
+
   if (modelProp) {
-    Container.props.push(MODEL_VALUE);
-    Container.emits = [UPDATE_VALUE_EVENT, modelUpdateEvent];
+    Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+    Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
   }
 
   return Container;

package/tsconfig.json

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