@visactor/vue-vtable 1.17.1-alpha.9 → 1.17.2-alpha.0

package/cjs/components/custom/vtable-vue-attribute-plugin.d.ts

@@ -0,0 +1,37 @@
+import type { IGraphic, IPlugin, IStage } from '@visactor/vtable/es/vrender';
+import { HtmlAttributePlugin } from '@visactor/vtable/es/vrender';
+export declare class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPlugin {
+    htmlMap: Record<string, {
+        wrapContainer: HTMLElement;
+        nativeContainer: HTMLElement;
+        container: string | HTMLElement | null;
+        renderId: number;
+        graphic: IGraphic;
+        isInViewport: boolean;
+        lastPosition?: {
+            x: number;
+            y: number;
+        } | null;
+        lastStyle?: Record<string, any>;
+    }>;
+    private renderQueue;
+    private isRendering;
+    renderGraphicHTML(graphic: IGraphic): void;
+    private scheduleRender;
+    doRenderGraphic(graphic: IGraphic): void;
+    private getGraphicOptions;
+    checkNeedRender(graphic: IGraphic): boolean;
+    checkInViewport(graphic: IGraphic): boolean;
+    checkDom(dom: HTMLElement): boolean;
+    removeAllDom(g: IGraphic): void;
+    removeElement(id: string, clear?: boolean): void;
+    getWrapContainer(stage: IStage, userContainer?: string | HTMLElement | null, domParams?: any): {
+        wrapContainer: HTMLElement;
+        nativeContainer: HTMLElement;
+    };
+    updateStyleOfWrapContainer(graphic: IGraphic, stage: IStage, wrapContainer: HTMLElement, nativeContainer: HTMLElement): void;
+    private convertCellStyle;
+    private calculatePosition;
+    private calculateOffset;
+    private applyUserStyles;
+}

package/cjs/components/custom/vtable-vue-attribute-plugin.js

@@ -0,0 +1,307 @@
+'use strict';
+
+var tslib = require('tslib');
+var vrender = require('@visactor/vtable/es/vrender');
+var vutils = require('@visactor/vutils');
+var vue = require('vue');
+
+class VTableVueAttributePlugin extends vrender.HtmlAttributePlugin {
+    constructor() {
+        super(...arguments);
+        this.renderQueue = new Set();
+        this.isRendering = false;
+    }
+    renderGraphicHTML(graphic) {
+        if (!this.checkNeedRender(graphic)) {
+            return;
+        }
+        this.renderQueue.add(graphic);
+        this.scheduleRender();
+    }
+    scheduleRender() {
+        if (this.isRendering) {
+            return;
+        }
+        this.isRendering = true;
+        requestAnimationFrame(() => {
+            this.renderQueue.forEach(graphic => {
+                try {
+                    this.doRenderGraphic(graphic);
+                }
+                catch (error) {
+                    const { id } = this.getGraphicOptions(graphic) || {};
+                    this.removeElement(id, true);
+                }
+            });
+            this.renderQueue.clear();
+            this.isRendering = false;
+        });
+    }
+    doRenderGraphic(graphic) {
+        var _a;
+        const { id, options } = this.getGraphicOptions(graphic);
+        const stage = graphic.stage;
+        const { element, container: expectedContainer } = options;
+        const actualContainer = expectedContainer ? checkFrozenContainer(graphic) : expectedContainer;
+        let targetMap = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
+        if (targetMap && actualContainer && actualContainer !== targetMap.container) {
+            this.removeElement(id);
+            targetMap = null;
+        }
+        if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
+            const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options });
+            if (wrapContainer) {
+                vue.render(element, wrapContainer);
+                targetMap = {
+                    wrapContainer,
+                    nativeContainer,
+                    container: actualContainer,
+                    renderId: this.renderId,
+                    graphic,
+                    isInViewport: true,
+                    lastPosition: null,
+                    lastStyle: {}
+                };
+                this.htmlMap[id] = targetMap;
+            }
+        }
+        else {
+            vue.render(element, targetMap.wrapContainer);
+        }
+        if (targetMap) {
+            this.updateStyleOfWrapContainer(graphic, stage, targetMap.wrapContainer, targetMap.nativeContainer);
+            targetMap.renderId = this.renderId;
+        }
+    }
+    getGraphicOptions(graphic) {
+        var _a;
+        const { vue } = graphic.attribute;
+        if (!vue) {
+            return null;
+        }
+        const id = vutils.isNil(vue.id) ? `${(_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid}_vue` : vue.id;
+        return { id, options: vue };
+    }
+    checkNeedRender(graphic) {
+        const { id, options } = this.getGraphicOptions(graphic) || {};
+        if (!id) {
+            return false;
+        }
+        const stage = graphic.stage;
+        if (!stage) {
+            return false;
+        }
+        const { element } = options;
+        if (!element) {
+            return false;
+        }
+        const isInViewport = this.checkInViewport(graphic);
+        return isInViewport;
+    }
+    checkInViewport(graphic) {
+        const { stage, globalAABBBounds: cBounds } = graphic;
+        if (!stage) {
+            return false;
+        }
+        const BUFFER = 100;
+        const { AABBBounds: vBounds } = stage;
+        const eBounds = {
+            x1: vBounds.x1 - BUFFER,
+            x2: vBounds.x2 + BUFFER,
+            y1: vBounds.y1 - BUFFER,
+            y2: vBounds.y2 + BUFFER
+        };
+        const isIntersecting = cBounds.x1 < eBounds.x2 && cBounds.x2 > eBounds.x1 && cBounds.y1 < eBounds.y2 && cBounds.y2 > eBounds.y1;
+        return isIntersecting;
+    }
+    checkDom(dom) {
+        if (!dom) {
+            return false;
+        }
+        return document.contains(dom);
+    }
+    removeAllDom(g) {
+        if (this.htmlMap) {
+            Object.keys(this.htmlMap).forEach(key => {
+                this.removeElement(key, true);
+            });
+            this.htmlMap = null;
+        }
+    }
+    removeElement(id, clear) {
+        var _a;
+        const record = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
+        if (!record) {
+            return;
+        }
+        const { wrapContainer } = record;
+        if (!wrapContainer) {
+            return;
+        }
+        vue.render(null, wrapContainer);
+        if (!clear) {
+            wrapContainer.remove();
+            record.isInViewport = false;
+        }
+        else {
+            this.checkDom(wrapContainer) && super.removeElement(id);
+            delete this.htmlMap[id];
+        }
+        this.removeWrapContainerEventListener(wrapContainer);
+    }
+    getWrapContainer(stage, userContainer, domParams) {
+        var _a;
+        let nativeContainer;
+        if (userContainer) {
+            nativeContainer =
+                typeof userContainer === 'string' ? vrender.application.global.getElementById(userContainer) : userContainer;
+        }
+        else {
+            nativeContainer = stage.window.getContainer();
+        }
+        const { id } = domParams || {};
+        const record = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
+        if (record && !record.isInViewport) {
+            const { wrapContainer } = record;
+            if (!this.checkDom(wrapContainer)) {
+                nativeContainer.appendChild(wrapContainer);
+            }
+            return {
+                wrapContainer,
+                nativeContainer
+            };
+        }
+        return {
+            wrapContainer: vrender.application.global.createDom({ tagName: 'div', parent: nativeContainer }),
+            nativeContainer
+        };
+    }
+    updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer) {
+        const { attribute, type } = graphic;
+        const _a = attribute || {}, { vue: options, width, height, visible, display } = _a, rest = tslib.__rest(_a, ["vue", "width", "height", "visible", "display"]);
+        const { x: left, y: top } = this.calculatePosition(graphic, options.anchorType);
+        const { left: offsetX, top: offsetTop } = this.calculateOffset(stage, nativeContainer, left, top);
+        const { id } = this.getGraphicOptions(graphic) || {};
+        const record = id ? this.htmlMap[id] : null;
+        if (!record) {
+            return;
+        }
+        const positionChanged = !record.lastPosition || record.lastPosition.x !== offsetX || record.lastPosition.y !== offsetTop;
+        if (!positionChanged) {
+            return;
+        }
+        const { pointerEvents = true, penetrateEventList = ['wheel'] } = options;
+        const calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
+        const style = this.convertCellStyle(graphic);
+        Object.assign(calculateStyle, Object.assign(Object.assign(Object.assign({ overflow: 'hidden' }, (style || {})), (rest || {})), { transform: `translate(${offsetX}px, ${offsetTop}px)`, boxSizing: 'border-box', display: visible !== false ? display || 'block' : 'none', pointerEvents: pointerEvents === true ? 'all' : pointerEvents || 'none', position: 'absolute' }));
+        if (calculateStyle.pointerEvents !== 'none') {
+            this.removeWrapContainerEventListener(wrapContainer);
+            vutils.uniqArray(penetrateEventList).forEach((event) => {
+                if (event === 'wheel') {
+                    wrapContainer.addEventListener('wheel', this.onWheel);
+                    wrapContainer.addEventListener('wheel', e => e.preventDefault(), true);
+                }
+            });
+        }
+        if (type === 'text' && options.anchorType === 'position') {
+            Object.assign(calculateStyle, this.getTransformOfText(graphic));
+        }
+        this.applyUserStyles(options, calculateStyle, { offsetX, offsetTop, graphic, wrapContainer });
+        const styleChanged = !vutils.isEqual(record.lastStyle, calculateStyle);
+        if (styleChanged) {
+            vrender.application.global.updateDom(wrapContainer, {
+                width,
+                height,
+                style: calculateStyle
+            });
+            record.lastStyle = calculateStyle;
+        }
+    }
+    convertCellStyle(graphic) {
+        var _a;
+        const { col, row, stage } = getTargetGroup(graphic);
+        const style = (_a = stage === null || stage === void 0 ? void 0 : stage.table) === null || _a === void 0 ? void 0 : _a.getCellStyle(col, row);
+        if (!vutils.isObject(style)) {
+            return;
+        }
+        const _b = style, { lineHeight, padding } = _b, rest = tslib.__rest(_b, ["lineHeight", "padding"]);
+        return Object.assign(Object.assign({}, rest), { padding: vutils.isArray(padding) ? padding.map(value => `${value}px`).join(' ') : padding });
+    }
+    calculatePosition(graphic, anchorType) {
+        const bounds = graphic.globalAABBBounds;
+        if (anchorType === 'position' || bounds.empty()) {
+            const matrix = graphic.globalTransMatrix;
+            return { x: matrix.e, y: matrix.f };
+        }
+        return vutils.calculateAnchorOfBounds(bounds, anchorType || 'top-left');
+    }
+    calculateOffset(stage, nativeContainer, x, y) {
+        const containerTL = vrender.application.global.getElementTopLeft(nativeContainer, false);
+        const windowTL = stage.window.getTopLeft(false);
+        return {
+            left: x + windowTL.left - containerTL.left,
+            top: y + windowTL.top - containerTL.top
+        };
+    }
+    applyUserStyles(options, baseStyle, context) {
+        if (vutils.isFunction(options.style)) {
+            const userStyle = options.style({
+                top: context.offsetTop,
+                left: context.offsetX,
+                width: context.graphic.globalAABBBounds.width(),
+                height: context.graphic.globalAABBBounds.height()
+            }, context.graphic, context.wrapContainer);
+            Object.assign(baseStyle, userStyle);
+        }
+        else if (vutils.isObject(options.style)) {
+            Object.assign(baseStyle, options.style);
+        }
+        else if (vutils.isString(options.style)) {
+            Object.assign(baseStyle, vutils.styleStringToObject(options.style));
+        }
+    }
+}
+function checkFrozenContainer(graphic) {
+    var _a;
+    const { col, row, stage } = getTargetGroup(graphic);
+    let container = (_a = graphic.attribute.vue) === null || _a === void 0 ? void 0 : _a.container;
+    const { table } = stage;
+    if (container === table.bodyDomContainer) {
+        if (col < table.frozenColCount && row >= table.rowCount - table.bottomFrozenRowCount) {
+            container = table.bottomFrozenBodyDomContainer;
+        }
+        else if (col >= table.colCount - table.rightFrozenColCount &&
+            row >= table.rowCount - table.bottomFrozenRowCount) {
+            container = table.rightFrozenBottomDomContainer;
+        }
+        else if (row >= table.rowCount - table.bottomFrozenRowCount) {
+            container = table.bottomFrozenBodyDomContainer;
+        }
+        else if (col < table.frozenColCount) {
+            container = table.frozenBodyDomContainer;
+        }
+        else if (col >= table.colCount - table.rightFrozenColCount) {
+            container = table.rightFrozenBodyDomContainer;
+        }
+    }
+    else if (container === table.headerDomContainer) {
+        if (col < table.frozenColCount) {
+            container = table.frozenHeaderDomContainer;
+        }
+        else if (col >= table.colCount - table.rightFrozenColCount) {
+            container = table.rightFrozenHeaderDomContainer;
+        }
+    }
+    return container;
+}
+function getTargetGroup(target) {
+    while (target === null || target === void 0 ? void 0 : target.parent) {
+        if (target.name === 'custom-container') {
+            return target;
+        }
+        target = target.parent;
+    }
+    return { col: -1, row: -1, stage: null };
+}
+
+exports.VTableVueAttributePlugin = VTableVueAttributePlugin;

package/cjs/edit/editor.d.ts

@@ -0,0 +1,44 @@
+export interface DynamicRenderEditorParams {
+    row: number;
+    col: number;
+    value: any;
+    table: any;
+    onChange: (value: any) => void;
+}
+export interface DynamicRenderEditorConfig {
+    editBefore?: (editorContext?: any) => boolean | Promise<boolean>;
+    disablePrompt?: string;
+    validateValue?: (params?: ValidateValueParams) => boolean | Promise<boolean>;
+    invalidPrompt?: string;
+}
+export interface ValidateValueParams {
+    row: number;
+    col: number;
+    value?: any;
+    oldValue?: any;
+    table?: any;
+}
+export declare class DynamicRenderEditor {
+    wrapContainer: HTMLElement;
+    tableContainer: HTMLElement | null;
+    currentValue: string | null;
+    nodeMap?: Map<string | number, Map<string | number, (params: DynamicRenderEditorParams) => any>>;
+    constructor();
+    registerNode(tableId?: string | number, key?: string | number, getNode?: () => (params: DynamicRenderEditorParams) => any): void;
+    getNode(tableId?: string | number, key?: string | number): (params: DynamicRenderEditorParams) => any;
+    removeNode(tableId: string | number): void;
+    release(tableId?: string | number): void;
+    onStart(editorContext: any): Promise<void>;
+    createElement(editorContext: any): Promise<boolean>;
+    getColumnKeyField(column: any): any;
+    getValue(): string;
+    setValue(value: any): void;
+    adjustPosition(rect: DOMRect): void;
+    validateValue(value?: any, oldValue?: any, editCell?: {
+        col: number;
+        row: number;
+    }, table?: any): Promise<boolean>;
+    onEnd(): void;
+    isEditorElement(target: HTMLElement): boolean;
+    isClickEditorElement(target: HTMLElement): boolean;
+}

package/cjs/edit/editor.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var tslib = require('tslib');
+var vutils = require('@visactor/vutils');
+var vue = require('vue');
+var VTable = require('@visactor/vtable');
+
+class DynamicRenderEditor {
+    constructor() {
+        this.tableContainer = null;
+        this.currentValue = null;
+        this.wrapContainer = null;
+        this.nodeMap = new Map();
+    }
+    registerNode(tableId, key, getNode) {
+        if (!vutils.isValid(tableId) || !vutils.isValid(key) || typeof getNode !== 'function') {
+            return;
+        }
+        if (!this.nodeMap.has(tableId)) {
+            this.nodeMap.set(tableId, new Map());
+        }
+        this.nodeMap.get(tableId).set(key, getNode);
+    }
+    getNode(tableId, key) {
+        var _a;
+        return (_a = this.nodeMap.get(tableId)) === null || _a === void 0 ? void 0 : _a.get(key);
+    }
+    removeNode(tableId) {
+        this.nodeMap.delete(tableId);
+    }
+    release(tableId) {
+        if (!vutils.isValid(tableId)) {
+            this.nodeMap.clear();
+        }
+        else {
+            this.removeNode(tableId);
+        }
+    }
+    onStart(editorContext) {
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            const { value } = editorContext;
+            this.setValue(value);
+            if (!(yield this.createElement(editorContext))) {
+                return;
+            }
+        });
+    }
+    createElement(editorContext) {
+        var _a, _b;
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            const { row, col, value, table, container, referencePosition } = editorContext;
+            if (!container) {
+                return false;
+            }
+            const define = table.getBodyColumnDefine(col, row);
+            const { editConfig } = define || {};
+            const { id } = table;
+            const key = this.getColumnKeyField(define);
+            if (!vutils.isValid(key) || !vutils.isValid(id)) {
+                return false;
+            }
+            if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.editBefore) === 'function') {
+                const v = yield editConfig.editBefore(editorContext);
+                if (!v) {
+                    table.showTooltip(col, row, {
+                        content: editConfig.disablePrompt || 'This field is not allowed to be edited',
+                        referencePosition: { rect: referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect, placement: VTable.TYPES.Placement.top },
+                        style: {
+                            bgColor: 'black',
+                            color: 'white',
+                            arrowMark: true
+                        },
+                        disappearDelay: 1000
+                    });
+                    return false;
+                }
+            }
+            const vnode = (_b = (_a = this.getNode(id, key)) === null || _a === void 0 ? void 0 : _a({
+                row,
+                col,
+                value,
+                table,
+                onChange: (value) => this.setValue(value)
+            })) === null || _b === void 0 ? void 0 : _b[0];
+            if (!vnode || !vue.isVNode(vnode)) {
+                return false;
+            }
+            const wrapContainer = document.createElement('div');
+            wrapContainer.style.position = 'absolute';
+            wrapContainer.style.width = '100%';
+            wrapContainer.style.boxSizing = 'border-box';
+            const { bgColor } = table.getCellStyle(col, row) || {};
+            wrapContainer.style.backgroundColor = bgColor || '#FFFFFF';
+            this.wrapContainer = wrapContainer;
+            this.tableContainer = container;
+            this.tableContainer.appendChild(wrapContainer);
+            vue.render(vnode, wrapContainer);
+            if (referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect) {
+                this.adjustPosition(referencePosition.rect);
+            }
+            return true;
+        });
+    }
+    getColumnKeyField(column) {
+        const { field, key } = column || {};
+        return vutils.isValid(key) ? key : field;
+    }
+    getValue() {
+        return this.currentValue;
+    }
+    setValue(value) {
+        this.currentValue = value;
+    }
+    adjustPosition(rect) {
+        if (this.wrapContainer) {
+            this.wrapContainer.style.top = `${rect.top}px`;
+            this.wrapContainer.style.left = `${rect.left}px`;
+            this.wrapContainer.style.width = `${rect.width}px`;
+            this.wrapContainer.style.height = `${rect.height}px`;
+        }
+    }
+    validateValue(value, oldValue, editCell, table) {
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            const { col, row } = editCell || {};
+            if (!vutils.isValid(col) || !vutils.isValid(row)) {
+                return true;
+            }
+            const define = table.getBodyColumnDefine(col, row);
+            const { editConfig } = define || {};
+            if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.validateValue) === 'function') {
+                const validate = yield editConfig.validateValue({ col, row, value, oldValue, table });
+                if (validate === false) {
+                    const rect = table.getVisibleCellRangeRelativeRect({ col, row });
+                    table.showTooltip(col, row, {
+                        content: editConfig.invalidPrompt || 'invalid',
+                        referencePosition: { rect, placement: VTable.TYPES.Placement.top },
+                        style: {
+                            bgColor: 'red',
+                            color: 'white',
+                            arrowMark: true
+                        },
+                        disappearDelay: 1000
+                    });
+                    return false;
+                }
+                return validate;
+            }
+            return true;
+        });
+    }
+    onEnd() {
+        if (this.wrapContainer && this.tableContainer) {
+            vue.render(null, this.wrapContainer);
+            this.tableContainer.removeChild(this.wrapContainer);
+        }
+        this.wrapContainer = null;
+        this.tableContainer = null;
+    }
+    isEditorElement(target) {
+        var _a;
+        return ((_a = this.wrapContainer) === null || _a === void 0 ? void 0 : _a.contains(target)) || this.isClickEditorElement(target);
+    }
+    isClickEditorElement(target) {
+        while (target) {
+            if (target.classList && target.classList.contains('table-editor-element')) {
+                return true;
+            }
+            target = target.parentNode;
+        }
+        return false;
+    }
+}
+
+exports.DynamicRenderEditor = DynamicRenderEditor;

package/cjs/edit/index.d.ts

@@ -0,0 +1,2 @@
+export * from './editor';
+export * from './util';

package/cjs/edit/util.d.ts

@@ -0,0 +1,4 @@
+import { DynamicRenderEditor } from './editor';
+export declare function checkRenderEditor(column: any, getEditCustomNode?: any): boolean;
+export declare function getRenderEditorColumnKeyField(column: any): any;
+export declare function getRenderEditor(create?: boolean): DynamicRenderEditor;

package/cjs/edit/util.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var VTable = require('@visactor/vtable');
+var editor = require('./editor.js');
+var vutils = require('@visactor/vutils');
+
+const DYNAMIC_RENDER_EDITOR = 'dynamic-render-editor';
+function checkRenderEditor(column, getEditCustomNode) {
+    const { editor } = column || {};
+    const key = getRenderEditorColumnKeyField(column);
+    if (!vutils.isValid(key) || editor !== DYNAMIC_RENDER_EDITOR) {
+        return false;
+    }
+    if (typeof getEditCustomNode === 'function') {
+        column.getEditCustomNode = getEditCustomNode;
+        return true;
+    }
+    return typeof column.getEditCustomNode === 'function';
+}
+function getRenderEditorColumnKeyField(column) {
+    const { field, key } = column || {};
+    return vutils.isValid(key) ? key : field;
+}
+function getRenderEditor(create) {
+    let renderEditor = VTable.register.editor(DYNAMIC_RENDER_EDITOR);
+    if (!renderEditor && !!create) {
+        renderEditor = new editor.DynamicRenderEditor();
+        VTable.register.editor(DYNAMIC_RENDER_EDITOR, renderEditor);
+    }
+    return renderEditor;
+}
+
+exports.checkRenderEditor = checkRenderEditor;
+exports.getRenderEditor = getRenderEditor;
+exports.getRenderEditorColumnKeyField = getRenderEditorColumnKeyField;

package/cjs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useEditorRender';
+export * from './useCellRender';

package/cjs/hooks/useCellRender.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'vue';
+export declare function useCellRender(props: any, tableRef: Ref): void;

package/cjs/hooks/useCellRender.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var vue = require('vue');
+var vtableVueAttributePlugin = require('../components/custom/vtable-vue-attribute-plugin.js');
+
+function useCellRender(props, tableRef) {
+    vue.watchEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.createReactContainer)) {
+            return;
+        }
+        if (!tableRef.value) {
+            return;
+        }
+        tableRef.value.scenegraph.stage.pluginService.register(new vtableVueAttributePlugin.VTableVueAttributePlugin());
+    });
+}
+
+exports.useCellRender = useCellRender;

package/cjs/hooks/useEditorRender.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'vue';
+export declare function useEditorRender(props: any, tableRef: Ref): void;