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

The vue version of VTable

'use strict';

var VTable = require('@visactor/vtable');
var stringUtils = require('./stringUtils.js');
var vutils = require('@visactor/vutils');
var vue = require('vue');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);

function isEventProp(key, props) {
    return key.startsWith('on') && vutils.isFunction(props[key]);
}
function createCustomLayout(children, isHeader, args) {
    const componentMap = {
        Group: VTable__namespace.CustomLayout.Group,
        Image: VTable__namespace.CustomLayout.Image,
        Text: VTable__namespace.CustomLayout.Text,
        Tag: VTable__namespace.CustomLayout.Tag,
        Radio: VTable__namespace.CustomLayout.Radio,
        CheckBox: VTable__namespace.CustomLayout.CheckBox
    };
    function createComponent(child) {
        var _a, _b;
        if (!child) {
            return null;
        }
        const { type, children: childChildren } = child;
        const props = stringUtils.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 (vutils.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 (vue.isVNode(targetVNode)) {
                targetVNode = !targetVNode.key
                    ? vue.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 = stringUtils.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
        };
    };
}

exports.createCustomLayout = createCustomLayout;
exports.createCustomLayoutHandler = createCustomLayoutHandler;