@visactor/vue-vtable/es/utils/customLayoutUtils.js

The vue version of VTable

import * as VTable from '@visactor/vtable';
import { convertPropsToCamelCase, toCamelCase } from './stringUtils.js';
import { isObject, isFunction } from '@visactor/vutils';
import { isVNode, cloneVNode } from 'vue';

function isEventProp(key, props) {
    return key.startsWith('on') && isFunction(props[key]);
}
function createCustomLayout(children, isHeader, args) {
    const componentMap = {
        Group: VTable.CustomLayout.Group,
        Image: VTable.CustomLayout.Image,
        Text: VTable.CustomLayout.Text,
        Tag: VTable.CustomLayout.Tag,
        Radio: VTable.CustomLayout.Radio,
        CheckBox: VTable.CustomLayout.CheckBox
    };
    function createComponent(child) {
        var _a, _b;
        if (!child) {
            return null;
        }
        const { type, children: childChildren } = child;
        const props = convertPropsToCamelCase(child.props);
        const componentName = (type === null || type === void 0 ? void 0 : type.symbol) || (type === null || type === void 0 ? void 0 : type.name);
        const ComponentClass = componentMap[componentName];
        if (!ComponentClass) {
            return null;
        }
        const component = new ComponentClass(Object.assign({}, props));
        bindComponentEvents(component, props);
        const subChildren = resolveChildren(childChildren);
        if (isObject(props === null || props === void 0 ? void 0 : props.vue)) {
            const { element } = props.vue;
            let targetVNode = element !== null && element !== void 0 ? element : subChildren.find(node => (node === null || node === void 0 ? void 0 : node.type) !== Symbol.for('v-cmt'));
            if (isVNode(targetVNode)) {
                targetVNode = !targetVNode.key
                    ? cloneVNode(targetVNode, { key: `row_${args.row}_col_${args.col}` })
                    : targetVNode;
            }
            else {
                targetVNode = null;
            }
            Object.assign(child.props.vue, {
                element: targetVNode,
                container: isHeader ? (_a = args === null || args === void 0 ? void 0 : args.table) === null || _a === void 0 ? void 0 : _a.headerDomContainer : (_b = args === null || args === void 0 ? void 0 : args.table) === null || _b === void 0 ? void 0 : _b.bodyDomContainer
            });
            return component;
        }
        subChildren.forEach((subChild) => {
            const subComponent = createComponent(subChild);
            if (subComponent) {
                component.add(subComponent);
            }
            else if (subChild.type === Symbol.for('v-fgt')) {
                subChild.children.forEach((nestedChild) => {
                    const nestedComponent = createComponent(nestedChild);
                    if (nestedComponent) {
                        component.add(nestedComponent);
                    }
                });
            }
        });
        return component;
    }
    function resolveChildren(childChildren) {
        var _a;
        return ((_a = childChildren === null || childChildren === void 0 ? void 0 : childChildren.default) === null || _a === void 0 ? void 0 : _a.call(childChildren)) || childChildren || [];
    }
    function bindComponentEvents(component, props) {
        Object.keys(props).forEach(key => {
            if (isEventProp(key, props)) {
                let eventName;
                if (key.startsWith('on')) {
                    eventName = key.slice(2).toLowerCase();
                }
                else {
                    eventName = toCamelCase(key.slice(2)).toLowerCase();
                }
                component.addEventListener(eventName, props[key]);
            }
        });
    }
    return { rootComponent: createComponent(children) };
}
function createCustomLayoutHandler(children, isHeader) {
    return (args) => {
        const { table, row, col, rect } = args;
        const record = table.getCellOriginRecord(col, row);
        const { height, width } = rect !== null && rect !== void 0 ? rect : table.getCellRect(col, row);
        const customLayoutKey = isHeader ? 'headerCustomLayout' : 'customLayout';
        if (!children[customLayoutKey]) {
            return null;
        }
        const rootContainer = children[customLayoutKey]({ table, row, col, rect, record, height, width })[0];
        const { rootComponent } = createCustomLayout(rootContainer, isHeader, args);
        return {
            rootContainer: rootComponent,
            renderDefault: false
        };
    };
}

export { createCustomLayout, createCustomLayoutHandler };