Internal helper functions and utilities that support the Vue wrapper functionality. These are primarily used for internal component management and Vue-Handsontable integration.
Functions for processing and managing Handsontable settings within Vue components.
/**
* Rewrite settings object for Handsontable compatibility
* @param observerSettings - Settings object from Vue component
* @returns Processed settings compatible with Handsontable
*/
function rewriteSettings(observerSettings: any): any[] | object;
/**
* Prepare final settings object from component props
* @param props - Vue component props
* @param currentSettings - Optional current settings to merge
* @returns Complete Handsontable.GridSettings object
*/
function prepareSettings(props: any, currentSettings?: Handsontable.GridSettings): Handsontable.GridSettings;
/**
* Filter only assigned props from component props object
* @param props - Component props object
* @returns Filtered props with only assigned values
*/
function filterPassedProps(props: any): VueProps<HotTableProps>;Functions for creating and managing Vue component integration.
/**
* Generate Vue props schema from Handsontable configuration
* @param source - Source identifier ('HotTable' | 'HotColumn')
* @returns Vue props configuration object
*/
function propFactory(source: string): VueProps<HotTableProps>;
/**
* Create Vue component instance from VNode
* @param vNode - Vue VNode to instantiate
* @param parent - Parent component instance
* @param props - Props to pass to component
* @param data - Data to pass to component
* @returns EditorComponent instance
*/
function createVueComponent(vNode: VNode, parent: Vue, props?: any, data?: any): EditorComponent;Functions for working with Vue Virtual DOM nodes and component slots.
/**
* Find VNode by type attribute in component slots
* @param componentSlots - Component $slots object
* @param type - Type attribute to search for (e.g., 'hot-renderer', 'hot-editor')
* @returns Found VNode or null
*/
function findVNodeByType(componentSlots: any, type: string): VNode | null;
/**
* Get all HotColumn component instances from children
* @param children - Array of child components
* @returns Array of HotColumn component instances
*/
function getHotColumnComponents(children: any[]): Array<any>;Functions for managing Vue reactivity and preventing infinite update loops.
/**
* Prevent internal edit watches from triggering reactive updates
* @param component - Vue component instance
*/
function preventInternalEditWatch(component: Vue): void;Warning messages and constants used throughout the wrapper.
/**
* Warning message displayed when trying to access destroyed Handsontable instance
*/
const HOT_DESTROYED_WARNING: string;import { prepareSettings, filterPassedProps } from '@handsontable/vue/helpers';
// In component methods
export default {
methods: {
updateHotSettings() {
// Filter only assigned props
const assignedProps = filterPassedProps(this.$props);
// Prepare settings for Handsontable
const settings = prepareSettings(assignedProps, this.currentSettings);
// Update Handsontable instance
if (this.hotInstance) {
this.hotInstance.updateSettings(settings);
}
}
}
}import { createVueComponent, findVNodeByType } from '@handsontable/vue/helpers';
// Finding and creating editor component
export default {
methods: {
createCustomEditor() {
// Find editor VNode in slots
const editorVNode = findVNodeByType(this.$slots, 'hot-editor');
if (editorVNode) {
// Create component instance
const editorComponent = createVueComponent(
editorVNode,
this,
{ isEditor: true },
{ cellData: this.currentCellData }
);
return editorComponent;
}
}
}
}import { propFactory } from '@handsontable/vue/helpers';
// Generate props for HotTable component
const hotTableProps = propFactory('HotTable');
// Generated props include all Handsontable settings plus wrapper-specific props
console.log(hotTableProps);
// Output: { data: { type: Array }, licenseKey: { type: String }, ... }/**
* Vue props configuration type
*/
interface VueProps<T> {
[K in keyof T]: {
type: any;
default?: any;
required?: boolean;
validator?: Function;
};
}
/**
* Editor component interface
*/
interface EditorComponent extends Vue {
focus(): void;
open(event?: Event): void;
close(): void;
getValue(): any;
setValue(newValue?: any): void;
[additional: string]: any;
}
/**
* Hot table props interface extending Handsontable settings
*/
interface HotTableProps extends Handsontable.GridSettings {
id?: string;
settings?: Handsontable.GridSettings;
wrapperRendererCacheSize?: number;
}/**
* Settings processing result
*/
interface ProcessedSettings {
hotSettings: Handsontable.GridSettings;
vueOptions: any;
componentRefs: any;
}
/**
* Component slot information
*/
interface SlotInfo {
type: 'renderer' | 'editor';
vNode: VNode;
props: any;
columnIndex?: number;
}These helper functions are primarily for internal use by the wrapper components but understanding them can be helpful for advanced customization and debugging scenarios.