@revolist/vue3-datagrid 3.2.3 → 3.2.16

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

@@ -1,364 +1,50 @@
 import type { JSX } from '@revolist/revogrid';
-export declare const RevoGrid: import("vue").DefineComponent<JSX.RevoGrid & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    rowHeaders?: boolean | import("@revolist/revogrid/dist/types/interfaces").RevoGrid.RowHeaders;
-    frameSize?: number;
-    rowSize?: number;
-    colSize?: number;
-    range?: boolean;
-    readonly?: boolean;
-    resize?: boolean;
-    canFocus?: boolean;
-    useClipboard?: boolean;
-    columns?: (import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular | import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnGrouping)[];
-    source?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    pinnedTopSource?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    pinnedBottomSource?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    rowDefinitions?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.RowDefinition[];
-    editors?: import("@revolist/revogrid/dist/types/interfaces").Edition.EditorBase;
-    plugins?: import("@revolist/revogrid/dist/types/interfaces").RevoPlugin.Plugin;
-    columnTypes?: unknown;
-    theme?: import("@revolist/revogrid/dist/types/interfaces").ThemeSpace.Theme;
-    rowClass?: string;
-    autoSizeColumn?: boolean | import("@revolist/revogrid/dist/types/plugins/autoSizeColumn").AutoSizeColumnConfig;
-    filter?: boolean | import("@revolist/revogrid/dist/types/plugins/filter/filter.plugin").ColumnFilterConfig;
-    canMoveColumns?: boolean;
-    trimmedRows?: unknown;
-    exporting?: boolean;
-    grouping?: import("@revolist/revogrid/dist/types/plugins/groupingRow/grouping.row.types").GroupingOptions;
-    stretch?: string | boolean;
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    onAftercolumnresize?: (event: CustomEvent<Record<string | number, import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular>>) => void;
-    onAftercolumnsset?: (event: CustomEvent<{
-        columns: import("@revolist/revogrid/dist/types/services/column.data.provider").ColumnCollection;
-        order: Record<string | number, "asc" | "desc">;
-    }>) => void;
-    onAfteredit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails | import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeRangeSaveDataDetails>) => void;
-    onAftersourceset?: (event: CustomEvent<{
-        type: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DimensionRows;
-        source: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    }>) => void;
-    onAftertrimmed?: (event: CustomEvent<any>) => void;
-    onBeforeaange?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.ChangedRange>) => void;
-    onBeforeautofill?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.ChangedRange>) => void;
-    onBeforecellfocus?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onBeforecolumnapplied?: (event: CustomEvent<import("@revolist/revogrid/dist/types/services/column.data.provider").ColumnCollection>) => void;
-    onBeforecolumnsset?: (event: CustomEvent<import("@revolist/revogrid/dist/types/services/column.data.provider").ColumnCollection>) => void;
-    onBeforeedit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onBeforeeditstart?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onBeforeexport?: (event: CustomEvent<import("@revolist/revogrid/dist/types/plugins/export/types").DataInput>) => void;
-    onBeforefilterapply?: (event: CustomEvent<{
-        collection: Record<string | number, {
-            filter: import("@revolist/revogrid/dist/types/plugins/filter/filter.types").LogicFunction;
-            type: "none" | "empty" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";
-            value?: any;
-        }>;
-    }>) => void;
-    onBeforefiltertrimmed?: (event: CustomEvent<{
-        collection: Record<string | number, {
-            filter: import("@revolist/revogrid/dist/types/plugins/filter/filter.types").LogicFunction;
-            type: "none" | "empty" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";
-            value?: any;
-        }>;
-        itemsToFilter: Record<number, boolean>;
-    }>) => void;
-    onBeforefocuslost?: (event: CustomEvent<import("@revolist/revogrid/dist/types/components/revo-grid/viewport.service").FocusedData>) => void;
-    onBeforerangeedit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeRangeSaveDataDetails>) => void;
-    onBeforesorting?: (event: CustomEvent<{
-        column: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular;
-        order: "asc" | "desc";
-        additive: boolean;
-    }>) => void;
-    onBeforesortingapply?: (event: CustomEvent<{
-        column: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular;
-        order: "asc" | "desc";
-        additive: boolean;
-    }>) => void;
-    onBeforesourceset?: (event: CustomEvent<{
-        type: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DimensionRows;
-        source: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    }>) => void;
-    onBeforesourcesortingapply?: (event: CustomEvent<any>) => void;
-    onBeforetrimmed?: (event: CustomEvent<{
-        trimmed: Record<number, boolean>;
-        trimmedType: string;
-        type: string;
-    }>) => void;
-    onHeaderclick?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular>) => void;
-    onRowdragstart?: (event: CustomEvent<{
-        pos: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.PositionItem;
-        text: string;
-    }>) => void;
-    onRoworderchanged?: (event: CustomEvent<{
-        from: number;
-        to: number;
-    }>) => void;
-    onViewportscroll?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ViewPortScrollEvent>) => void;
-}>, {}>;
-export declare const RevogrClipboard: import("vue").DefineComponent<JSX.RevogrClipboard & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    onCopyRegion?: (event: CustomEvent<DataTransfer>) => void;
-    onPasteRegion?: (event: CustomEvent<string[][]>) => void;
-}>, {}>;
-export declare const RevogrData: import("vue").DefineComponent<JSX.RevogrData & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    rowSelectionStore: any;
-    viewportRow: any;
-    viewportCol: any;
-    dimensionRow: any;
-    colData: any;
-    dataStore: any;
-} & {
-    range?: boolean;
-    readonly?: boolean;
-    rowClass?: string;
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    canDrag?: boolean;
-    onDragStartCell?: (event: CustomEvent<MouseEvent>) => void;
-}>, {
-    rowSelectionStore: any;
-    viewportRow: any;
-    viewportCol: any;
+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;
-}>;
-export declare const RevogrEdit: import("vue").DefineComponent<JSX.RevogrEdit & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    editCell?: import("@revolist/revogrid/dist/types/interfaces").Edition.EditCell;
-    column?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular;
-    editor?: import("@revolist/revogrid/dist/types/interfaces").Edition.EditorBase;
-    onCellEdit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.SaveDataDetails>) => void;
-    onCloseEdit?: (event: CustomEvent<boolean>) => void;
-}>, {}>;
-export declare const RevogrFilterPanel: import("vue").DefineComponent<JSX.RevogrFilterPanel & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    uuid?: string;
-    filterItems?: unknown;
-    filterTypes?: unknown;
-    filterNames?: unknown;
-    filterEntities?: boolean;
-    filterCaptions?: import("@revolist/revogrid/dist/types/plugins/filter/filter.plugin").FilterCaptions;
-    disableDynamicFiltering?: boolean;
-    onFilterChange?: (event: CustomEvent<import("@revolist/revogrid/dist/types/plugins/filter/filter.pop").MultiFilterItem>) => void;
-}>, {}>;
-export declare const RevogrFocus: import("vue").DefineComponent<JSX.RevogrFocus & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    dimensionRow: any;
-    selectionStore: any;
-    dimensionCol: any;
-} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-}>, {
-    dimensionRow: any;
     selectionStore: any;
     dimensionCol: any;
 }>;
-export declare const RevogrHeader: import("vue").DefineComponent<JSX.RevogrHeader & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    viewportCol: any;
-    selectionStore: any;
-    dimensionCol: any;
-} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    colData?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular[];
-    parent?: string;
-    groups?: unknown;
-    groupingDepth?: number;
-    canResize?: boolean;
-    columnFilter?: boolean;
-    onHeaderdblClick?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.InitialHeaderClick>) => void;
-    onHeaderresize?: (event: CustomEvent<Record<string, number>>) => void;
-    onInitialHeaderClick?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.InitialHeaderClick>) => void;
-}>, {
-    viewportCol: 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, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    dimensionRow: any;
-    dataStore: any;
-    dimensionCol: any;
-} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    parent?: HTMLElement;
-    onInitialRowDropped?: (event: CustomEvent<{
-        from: number;
-        to: number;
-    }>) => void;
-    onInternalRowDrag?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.PositionItem>) => void;
-    onInternalRowDragEnd?: (event: CustomEvent<any>) => void;
-    onInternalRowDragStart?: (event: CustomEvent<{
-        cell: import("@revolist/revogrid/dist/types/interfaces").Selection.Cell;
-        text: string;
-        pos: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.PositionItem;
-        event: MouseEvent;
-    }>) => void;
-    onInternalRowMouseMove?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.Cell>) => void;
-}>, {
-    dimensionRow: any;
-    dataStore: 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, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    dimensionRow: any;
-    colData: any;
-    dataStore: any;
-    selectionStore: any;
-    dimensionCol: any;
-} & {
-    range?: boolean;
-    readonly?: boolean;
-    useClipboard?: boolean;
-    editors?: import("@revolist/revogrid/dist/types/interfaces").Edition.EditorBase;
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    canDrag?: boolean;
-    lastCell?: import("@revolist/revogrid/dist/types/interfaces").Selection.Cell;
-    onFocusCell?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.FocusedCells>) => void;
-    onInternalCellEdit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onInternalCopy?: (event: CustomEvent<any>) => void;
-    onInternalFocusCell?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onInternalPaste?: (event: CustomEvent<any>) => void;
-    onInternalRangeDataApply?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeRangeSaveDataDetails>) => void;
-    onInternalSelectionChanged?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.ChangedRange>) => void;
-    onSetEdit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeEdit>) => void;
-    onSetRange?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.RangeArea>) => void;
-    onSetTempRange?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.TempRange>) => void;
-}>, {
-    dimensionRow: any;
-    colData: any;
-    dataStore: any;
-    selectionStore: 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, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    resize?: boolean;
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    height?: number;
-    dataPorts?: import("@revolist/revogrid/dist/types/components/revo-grid/viewport.interfaces").ViewportData[];
-    headerProp?: unknown;
-    uiid?: string;
-    rowHeaderColumn?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.RowHeaders;
-    onElementToScroll?: (event: CustomEvent<import("@revolist/revogrid/dist/types/components/revo-grid/viewport.scrolling.service").ElementScroll>) => void;
-    onScrollViewport?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ViewPortScrollEvent>) => void;
-}>, {}>;
-export declare const RevogrScrollVirtual: import("vue").DefineComponent<JSX.RevogrScrollVirtual & import("./vue-component-lib/utils").InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    viewportStore: any;
-    dimensionStore: any;
-} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    dimension?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DimensionType;
-    onScrollVirtual?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ViewPortScrollEvent>) => void;
-}>, {
-    viewportStore: any;
-    dimensionStore: 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, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    dimensionRow: any;
-    selectionStore: any;
-    dimensionCol: any;
-} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-}>, {
-    dimensionRow: any;
-    selectionStore: any;
-    dimensionCol: 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, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    onScrollViewport?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ViewPortScrollEvent>) => void;
-    contentWidth?: number;
-    contentHeight?: number;
-    onResizeViewport?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ViewPortResizeEvent>) => void;
-    onScrollchange?: (event: CustomEvent<{
-        type: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DimensionType;
-        hasScroll: boolean;
-    }>) => void;
-}>, {}>;
+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

@@ -1,110 +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, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    rowHeaders?: boolean | import("@revolist/revogrid/dist/types/interfaces").RevoGrid.RowHeaders;
-    frameSize?: number;
-    rowSize?: number;
-    colSize?: number;
-    range?: boolean;
-    readonly?: boolean;
-    resize?: boolean;
-    canFocus?: boolean;
-    useClipboard?: boolean;
-    columns?: (import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular | import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnGrouping)[];
-    source?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    pinnedTopSource?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    pinnedBottomSource?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    rowDefinitions?: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.RowDefinition[];
-    editors?: import("@revolist/revogrid/dist/types/interfaces").Edition.EditorBase;
-    plugins?: import("@revolist/revogrid/dist/types/interfaces").RevoPlugin.Plugin;
-    columnTypes?: unknown;
-    theme?: import("@revolist/revogrid/dist/types/interfaces").ThemeSpace.Theme;
-    rowClass?: string;
-    autoSizeColumn?: boolean | import("@revolist/revogrid/dist/types/plugins/autoSizeColumn").AutoSizeColumnConfig;
-    filter?: boolean | import("@revolist/revogrid/dist/types/plugins/filter/filter.plugin").ColumnFilterConfig;
-    canMoveColumns?: boolean;
-    trimmedRows?: unknown;
-    exporting?: boolean;
-    grouping?: import("@revolist/revogrid/dist/types/plugins/groupingRow/grouping.row.types").GroupingOptions;
-    stretch?: string | boolean;
-    toString?: string;
-    toLocaleString?: string;
-    modelValue?: string | boolean;
-    constructor?: Function;
-    valueOf?: unknown;
-    hasOwnProperty?: (v: string | number | symbol) => boolean;
-    isPrototypeOf?: (v: Object) => boolean;
-    propertyIsEnumerable?: (v: string | number | symbol) => boolean;
-    onAftercolumnresize?: (event: CustomEvent<Record<string | number, import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular>>) => void;
-    onAftercolumnsset?: (event: CustomEvent<{
-        columns: import("@revolist/revogrid/dist/types/services/column.data.provider").ColumnCollection;
-        order: Record<string | number, "asc" | "desc">;
-    }>) => void;
-    onAfteredit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails | import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeRangeSaveDataDetails>) => void;
-    onAftersourceset?: (event: CustomEvent<{
-        type: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DimensionRows;
-        source: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    }>) => void;
-    onAftertrimmed?: (event: CustomEvent<any>) => void;
-    onBeforeaange?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.ChangedRange>) => void;
-    onBeforeautofill?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Selection.ChangedRange>) => void;
-    onBeforecellfocus?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onBeforecolumnapplied?: (event: CustomEvent<import("@revolist/revogrid/dist/types/services/column.data.provider").ColumnCollection>) => void;
-    onBeforecolumnsset?: (event: CustomEvent<import("@revolist/revogrid/dist/types/services/column.data.provider").ColumnCollection>) => void;
-    onBeforeedit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onBeforeeditstart?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeSaveDataDetails>) => void;
-    onBeforeexport?: (event: CustomEvent<import("@revolist/revogrid/dist/types/plugins/export/types").DataInput>) => void;
-    onBeforefilterapply?: (event: CustomEvent<{
-        collection: Record<string | number, {
-            filter: import("@revolist/revogrid/dist/types/plugins/filter/filter.types").LogicFunction;
-            type: "none" | "empty" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";
-            value?: any;
-        }>;
-    }>) => void;
-    onBeforefiltertrimmed?: (event: CustomEvent<{
-        collection: Record<string | number, {
-            filter: import("@revolist/revogrid/dist/types/plugins/filter/filter.types").LogicFunction;
-            type: "none" | "empty" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";
-            value?: any;
-        }>;
-        itemsToFilter: Record<number, boolean>;
-    }>) => void;
-    onBeforefocuslost?: (event: CustomEvent<import("@revolist/revogrid/dist/types/components/revo-grid/viewport.service").FocusedData>) => void;
-    onBeforerangeedit?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").Edition.BeforeRangeSaveDataDetails>) => void;
-    onBeforesorting?: (event: CustomEvent<{
-        column: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular;
-        order: "asc" | "desc";
-        additive: boolean;
-    }>) => void;
-    onBeforesortingapply?: (event: CustomEvent<{
-        column: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular;
-        order: "asc" | "desc";
-        additive: boolean;
-    }>) => void;
-    onBeforesourceset?: (event: CustomEvent<{
-        type: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DimensionRows;
-        source: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.DataType[];
-    }>) => void;
-    onBeforesourcesortingapply?: (event: CustomEvent<any>) => void;
-    onBeforetrimmed?: (event: CustomEvent<{
-        trimmed: Record<number, boolean>;
-        trimmedType: string;
-        type: string;
-    }>) => void;
-    onHeaderclick?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnRegular>) => void;
-    onRowdragstart?: (event: CustomEvent<{
-        pos: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.PositionItem;
-        text: string;
-    }>) => void;
-    onRoworderchanged?: (event: CustomEvent<{
-        from: number;
-        to: number;
-    }>) => void;
-    onViewportscroll?: (event: CustomEvent<import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ViewPortScrollEvent>) => void;
-}>, {}>;
+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<{}, {}, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {}>, {}>, 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<{}>>, {}>, 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,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})()));

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

@@ -1,9 +1,5 @@
-export interface InputProps extends Object {
-    modelValue: string | boolean;
-}
-interface ComponentOptions {
-    modelProp?: string;
-    modelUpdateEvent?: string;
+export interface InputProps<T> {
+    modelValue?: T;
 }
 /**
 * Create a callback to define a Vue component wrapper around a Web Component.
@@ -12,9 +8,13 @@ interface ComponentOptions {
 * @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 declare const defineContainer: <Props>(name: string, componentProps?: string[], componentOptions?: ComponentOptions) => import("vue").DefineComponent<Props & InputProps, object, {}, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Props & InputProps>>, import("vue").ExtractDefaultPropTypes<Props & InputProps>>;
-export {};
+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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@revolist/vue3-datagrid",
-  "version": "3.2.3",
-  "description": "Vue 3 data grid spreadsheet",
+  "version": "3.2.16",
+  "description": "Vue 3 DataGrid Spreadsheet",
   "main": "dist/vgrid.js",
   "types": "dist/vgrid.d.ts",
   "scripts": {
@@ -34,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.16",
+    "@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

@@ -5,10 +5,11 @@ 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', [
+export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid', undefined, [
   'rowHeaders',
   'frameSize',
   'rowSize',
@@ -40,6 +41,7 @@ export const RevoGrid = /*@__PURE__*/ defineContainer<JSX.RevoGrid>('revo-grid',
   'afteredit',
   'beforeautofill',
   'beforeaange',
+  'afterfocus',
   'roworderchanged',
   'beforesourcesortingapply',
   'beforesortingapply',
@@ -64,13 +66,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 +87,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 +96,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 +108,17 @@ 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, [
+  'dataStore',
+  'colData',
   'selectionStore',
   'dimensionRow',
-  'dimensionCol'
+  'dimensionCol',
+  'afterfocus'
 ]);
 
 
-export const RevogrHeader = /*@__PURE__*/ defineContainer<JSX.RevogrHeader>('revogr-header', [
+export const RevogrHeader = /*@__PURE__*/ defineContainer<JSX.RevogrHeader>('revogr-header', undefined, [
   'viewportCol',
   'dimensionCol',
   'selectionStore',
@@ -129,7 +134,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 +147,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 +172,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 +184,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 +192,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/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 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;
 

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;