@visactor/vue-vtable 1.10.3 → 1.10.4

package/cjs/index.d.ts

@@ -2,4 +2,4 @@ import * as VTable from '@visactor/vtable';
 export * from './tables';
 export * from './components';
 export { VTable };
-export declare const version = "1.10.3";
+export declare const version = "1.10.4";

package/cjs/index.js

@@ -40,7 +40,7 @@ function _interopNamespaceDefault(e) {
 
 var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
 
-const version = "1.10.3";
+const version = "1.10.4";
 
 exports.VTable = VTable__namespace;
 Object.defineProperty(exports, 'register', {

package/cjs/tables/base-table.vue.js

@@ -79,18 +79,21 @@ var _sfc_main = vue.defineComponent({
                 instance.on(eventsUtils.TABLE_EVENTS[eventKey], vueEventHandler);
             });
         };
+        const createTableInstance = (Type, options) => {
+            vTableInstance.value = new Type(vTableContainer.value, options);
+        };
         const createVTable = () => {
-            var _a;
-            if (!vTableContainer.value)
+            var _a, _b;
+            if (!vTableContainer.value) {
                 return;
+            }
             if (vTableInstance.value) {
                 vTableInstance.value.release();
             }
             const getRecords = () => {
-                return props.records !== undefined && props.records !== null && props.records.length > 0 ? props.records : props.options.records;
-            };
-            const createTableInstance = (Type, options) => {
-                vTableInstance.value = new Type(vTableContainer.value, options);
+                return props.records !== undefined && props.records !== null && props.records.length > 0
+                    ? props.records
+                    : props.options.records;
             };
             try {
                 switch (props.type) {
@@ -108,12 +111,14 @@ var _sfc_main = vue.defineComponent({
                 (_a = props.onReady) === null || _a === void 0 ? void 0 : _a.call(props, vTableInstance.value, true);
             }
             catch (err) {
+                (_b = props.onError) === null || _b === void 0 ? void 0 : _b.call(props, err);
             }
         };
         const updateVTable = (newOptions) => {
             var _a;
-            if (!vTableInstance.value)
+            if (!vTableInstance.value) {
                 return;
+            }
             try {
                 switch (props.type) {
                     case 'list':
@@ -139,14 +144,14 @@ var _sfc_main = vue.defineComponent({
         };
         vue.onMounted(createVTable);
         vue.onBeforeUnmount(() => { var _a; return (_a = vTableInstance.value) === null || _a === void 0 ? void 0 : _a.release(); });
-        vue.watch(() => props.options, (newOptions) => {
+        vue.watch(() => props.options, newOptions => {
             if (vTableInstance.value) {
                 updateVTable(newOptions);
             }
             else {
                 createVTable();
             }
-        }, { deep: true });
+        });
         vue.watch(() => props.records, (newRecords, oldRecords) => {
             if (vTableInstance.value) {
                 updateVTable(Object.assign(Object.assign({}, props.options), { records: newRecords }));

package/cjs/tables/list-table.vue.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var vue = require('vue');
-var utils = require('./utils.js');
+var vnodeUtils = require('../utils/vnodeUtils.js');
+require('@visactor/vtable');
+require('@visactor/vutils');
+var slotUtils = require('../utils/slotUtils.js');
 var baseTable_vue_vue_type_script_setup_true_lang = require('./base-table.vue.js');
 
 var _sfc_main = vue.defineComponent({
@@ -18,53 +21,10 @@ var _sfc_main = vue.defineComponent({
         const slots = vue.useSlots();
         const computedOptions = vue.computed(() => {
             var _a;
-            const flattenedSlots = utils.flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
-            const slotOptions = extractSlotOptions(flattenedSlots);
+            const flattenedSlots = vnodeUtils.flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
+            const slotOptions = slotUtils.extractListSlotOptions(flattenedSlots);
             return Object.assign(Object.assign({}, props.options), { columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns, tooltip: slotOptions.tooltip || props.options.tooltip, menu: slotOptions.menu || props.options.menu });
         });
-        function extractSlotOptions(vnodes) {
-            const options = {
-                columns: [],
-                tooltip: {},
-                menu: {},
-            };
-            const typeMapping = {
-                ListColumn: 'columns',
-                Tooltip: 'tooltip',
-                Menu: 'menu',
-            };
-            vnodes.forEach(vnode => {
-                var _a, _b;
-                vnode.props = utils.convertPropsToCamelCase(vnode.props);
-                const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
-                const optionKey = typeMapping[typeName];
-                if (optionKey) {
-                    if (optionKey === 'columns' && vnode.children) {
-                        vnode.props.customLayout = createCustomLayoutHandler(vnode.children);
-                    }
-                    if (Array.isArray(options[optionKey])) {
-                        options[optionKey].push(vnode.props);
-                    }
-                    else {
-                        options[optionKey] = vnode.props;
-                    }
-                }
-            });
-            return options;
-        }
-        function createCustomLayoutHandler(children) {
-            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 rootContainer = children.customLayout({ table, row, col, rect, record, height, width })[0];
-                const { rootComponent } = utils.createCustomLayout(rootContainer);
-                return {
-                    rootContainer: rootComponent,
-                    renderDefault: false,
-                };
-            };
-        }
         __expose({
             vTableInstance: vue.computed(() => { var _a; return ((_a = baseTableRef.value) === null || _a === void 0 ? void 0 : _a.vTableInstance) || null; }),
         });

package/cjs/tables/pivot-chart.vue.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var vue = require('vue');
-var utils = require('./utils.js');
+var vnodeUtils = require('../utils/vnodeUtils.js');
+require('@visactor/vtable');
+require('@visactor/vutils');
+var slotUtils = require('../utils/slotUtils.js');
 var baseTable_vue_vue_type_script_setup_true_lang = require('./base-table.vue.js');
 
 var _sfc_main = vue.defineComponent({
@@ -18,47 +21,9 @@ var _sfc_main = vue.defineComponent({
         const slots = vue.useSlots();
         const computedOptions = vue.computed(() => {
             var _a;
-            const flattenedSlots = utils.flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
-            const options = {
-                columns: [],
-                columnHeaderTitle: [],
-                rows: [],
-                rowHeaderTitle: [],
-                indicators: [],
-                corner: Object,
-                tooltip: Object,
-                menu: Object,
-            };
-            const typeMapping = {
-                'PivotColumnDimension': 'columns',
-                'PivotColumnHeaderTitle': 'columnHeaderTitle',
-                'PivotRowDimension': 'rows',
-                'PivotRowHeaderTitle': 'rowHeaderTitle',
-                'PivotCorner': 'corner',
-                'PivotIndicator': 'indicators',
-                'Tooltip': 'tooltip',
-                'Menu': 'menu',
-            };
-            flattenedSlots.forEach(vnode => {
-                var _a, _b;
-                vnode.props = utils.convertPropsToCamelCase(vnode.props);
-                const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
-                const optionKey = typeMapping[typeName];
-                if (optionKey) {
-                    if (Array.isArray(options[optionKey])) {
-                        if (vnode.props.hasOwnProperty('objectHandler')) {
-                            options[optionKey].push(vnode.props.objectHandler);
-                        }
-                        else {
-                            options[optionKey].push(vnode.props);
-                        }
-                    }
-                    else {
-                        options[optionKey] = vnode.props;
-                    }
-                }
-            });
-            return Object.assign(Object.assign({}, props.options), { columns: options.columns.length ? options.columns : props.options.columns, columnHeaderTitle: options.columnHeaderTitle.length ? options.columnHeaderTitle : props.options.columnHeaderTitle, rows: options.rows.length ? options.rows : props.options.rows, rowHeaderTitle: options.rowHeaderTitle.length ? options.rowHeaderTitle : props.options.rowHeaderTitle, indicators: options.indicators.length ? options.indicators : props.options.indicators, corner: options.corner || props.options.corner, tooltip: options.tooltip || props.options.tooltip, menu: options.menu || props.options.menu });
+            const flattenedSlots = vnodeUtils.flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
+            const slotOptions = slotUtils.extractPivotSlotOptions(flattenedSlots);
+            return Object.assign(Object.assign({}, props.options), { columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns, columnHeaderTitle: slotOptions.columnHeaderTitle.length ? slotOptions.columnHeaderTitle : props.options.columnHeaderTitle, rows: slotOptions.rows.length ? slotOptions.rows : props.options.rows, rowHeaderTitle: slotOptions.rowHeaderTitle.length ? slotOptions.rowHeaderTitle : props.options.rowHeaderTitle, indicators: slotOptions.indicators.length ? slotOptions.indicators : props.options.indicators, corner: props.options.corner || slotOptions.corner, tooltip: props.options.tooltip || slotOptions.tooltip, menu: props.options.menu || slotOptions.menu });
         });
         __expose({ vTableInstance: vue.computed(() => { var _a; return ((_a = baseTableRef.value) === null || _a === void 0 ? void 0 : _a.vTableInstance) || null; }) });
         return (_ctx, _cache) => {

package/cjs/tables/pivot-table.vue.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var vue = require('vue');
-var utils = require('./utils.js');
+var vnodeUtils = require('../utils/vnodeUtils.js');
+require('@visactor/vtable');
+require('@visactor/vutils');
+var slotUtils = require('../utils/slotUtils.js');
 var baseTable_vue_vue_type_script_setup_true_lang = require('./base-table.vue.js');
 
 var _sfc_main = vue.defineComponent({
@@ -18,42 +21,9 @@ var _sfc_main = vue.defineComponent({
         const slots = vue.useSlots();
         const computedOptions = vue.computed(() => {
             var _a;
-            const flattenedSlots = utils.flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
-            const options = {
-                columns: [],
-                columnHeaderTitle: [],
-                rows: [],
-                rowHeaderTitle: [],
-                indicators: [],
-                corner: Object,
-                tooltip: Object,
-                menu: Object,
-            };
-            const typeMapping = {
-                'PivotColumnDimension': 'columns',
-                'PivotColumnHeaderTitle': 'columnHeaderTitle',
-                'PivotRowDimension': 'rows',
-                'PivotRowHeaderTitle': 'rowHeaderTitle',
-                'PivotCorner': 'corner',
-                'PivotIndicator': 'indicators',
-                'Tooltip': 'tooltip',
-                'Menu': 'menu',
-            };
-            flattenedSlots.forEach(vnode => {
-                var _a, _b;
-                vnode.props = utils.convertPropsToCamelCase(vnode.props);
-                const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
-                const optionKey = typeMapping[typeName];
-                if (optionKey) {
-                    if (Array.isArray(options[optionKey])) {
-                        options[optionKey].push(vnode.props);
-                    }
-                    else {
-                        options[optionKey] = vnode.props;
-                    }
-                }
-            });
-            return Object.assign(Object.assign({}, props.options), { columns: options.columns.length ? options.columns : props.options.columns, columnHeaderTitle: options.columnHeaderTitle.length ? options.columnHeaderTitle : props.options.columnHeaderTitle, rows: options.rows.length ? options.rows : props.options.rows, rowHeaderTitle: options.rowHeaderTitle.length ? options.rowHeaderTitle : props.options.rowHeaderTitle, indicators: options.indicators.length ? options.indicators : props.options.indicators, corner: props.options.corner || options.corner, tooltip: props.options.tooltip || options.tooltip, menu: props.options.menu || options.menu });
+            const flattenedSlots = vnodeUtils.flattenVNodes(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
+            const slotOptions = slotUtils.extractPivotSlotOptions(flattenedSlots);
+            return Object.assign(Object.assign({}, props.options), { columns: slotOptions.columns.length ? slotOptions.columns : props.options.columns, columnHeaderTitle: slotOptions.columnHeaderTitle.length ? slotOptions.columnHeaderTitle : props.options.columnHeaderTitle, rows: slotOptions.rows.length ? slotOptions.rows : props.options.rows, rowHeaderTitle: slotOptions.rowHeaderTitle.length ? slotOptions.rowHeaderTitle : props.options.rowHeaderTitle, indicators: slotOptions.indicators.length ? slotOptions.indicators : props.options.indicators, corner: props.options.corner || slotOptions.corner, tooltip: props.options.tooltip || slotOptions.tooltip, menu: props.options.menu || slotOptions.menu });
         });
         __expose({ vTableInstance: vue.computed(() => { var _a; return ((_a = baseTableRef.value) === null || _a === void 0 ? void 0 : _a.vTableInstance) || null; }) });
         return (_ctx, _cache) => {

package/cjs/tables/utils.d.ts

@@ -1,4 +1,22 @@
+import * as VTable from '@visactor/vtable';
+import type { TooltipProps } from '../components/component/tooltip';
+import type { MenuProps } from '../components/component/menu';
 export declare function flattenVNodes(vnodes: any[]): any[];
 export declare function toCamelCase(str: string): string;
 export declare function convertPropsToCamelCase(props: Record<string, any>): Record<string, any>;
 export declare function createCustomLayout(children: any): any;
+export declare function extractPivotSlotOptions(vnodes: any[]): {
+    columns: VTable.TYPES.ColumnDefine[];
+    columnHeaderTitle: VTable.TYPES.ITitleDefine[];
+    rows: VTable.TYPES.IDimension[];
+    rowHeaderTitle: VTable.TYPES.ITitleDefine[];
+    indicators: VTable.TYPES.IIndicator[];
+    corner: VTable.TYPES.ICornerDefine;
+    tooltip: TooltipProps;
+    menu: MenuProps;
+};
+export declare function extractListSlotOptions(vnodes: any[]): {
+    columns: VTable.TYPES.ColumnDefine[];
+    tooltip: TooltipProps;
+    menu: MenuProps;
+};

package/cjs/utils/customLayoutUtils.d.ts

@@ -0,0 +1,5 @@
+export declare function createCustomLayout(children: any): any;
+export declare function createCustomLayoutHandler(children: any): (args: any) => {
+    rootContainer: any;
+    renderDefault: boolean;
+};

package/cjs/{tables/utils.js → utils/customLayoutUtils.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var VTable = require('@visactor/vtable');
+var stringUtils = require('./stringUtils.js');
 var vutils = require('@visactor/vutils');
 
 function _interopNamespaceDefault(e) {
@@ -22,22 +23,6 @@ function _interopNamespaceDefault(e) {
 
 var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
 
-function flattenVNodes(vnodes) {
-    return vnodes.flatMap(vnode => (Array.isArray(vnode.children) ? flattenVNodes(vnode.children) : vnode));
-}
-function toCamelCase(str) {
-    return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
-}
-function convertPropsToCamelCase(props) {
-    const newProps = {};
-    for (const key in props) {
-        if (props.hasOwnProperty(key)) {
-            const camelCaseKey = toCamelCase(key);
-            newProps[camelCaseKey] = props[key];
-        }
-    }
-    return newProps;
-}
 function isEventProp(key, props) {
     return key.startsWith('on') && vutils.isFunction(props[key]);
 }
@@ -55,7 +40,7 @@ function createCustomLayout(children) {
             return null;
         }
         const { type, children: childChildren } = child;
-        const props = convertPropsToCamelCase(child.props);
+        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) {
@@ -92,16 +77,27 @@ function createCustomLayout(children) {
                     eventName = key.slice(2).toLowerCase();
                 }
                 else {
-                    eventName = toCamelCase(key.slice(2)).toLowerCase();
+                    eventName = stringUtils.toCamelCase(key.slice(2)).toLowerCase();
                 }
                 component.addEventListener(eventName, props[key]);
             }
         });
     }
     return { rootComponent: createComponent(children) };
+}
+function createCustomLayoutHandler(children) {
+    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 rootContainer = children.customLayout({ table, row, col, rect, record, height, width })[0];
+        const { rootComponent } = createCustomLayout(rootContainer);
+        return {
+            rootContainer: rootComponent,
+            renderDefault: false
+        };
+    };
 }
 
-exports.convertPropsToCamelCase = convertPropsToCamelCase;
 exports.createCustomLayout = createCustomLayout;
-exports.flattenVNodes = flattenVNodes;
-exports.toCamelCase = toCamelCase;
+exports.createCustomLayoutHandler = createCustomLayoutHandler;

package/cjs/utils/slotUtils.d.ts

@@ -0,0 +1,18 @@
+import type { ColumnDefine, ICornerDefine, IIndicator, IDimension, ITitleDefine } from '@visactor/vtable';
+import type { TooltipProps } from '../components/component/tooltip';
+import type { MenuProps } from '../components/component/menu';
+export declare function extractPivotSlotOptions(vnodes: any[]): {
+    columns: ColumnDefine[];
+    columnHeaderTitle: ITitleDefine[];
+    rows: IDimension[];
+    rowHeaderTitle: ITitleDefine[];
+    indicators: IIndicator[];
+    corner: ICornerDefine;
+    tooltip: TooltipProps;
+    menu: MenuProps;
+};
+export declare function extractListSlotOptions(vnodes: any[]): {
+    columns: ColumnDefine[];
+    tooltip: TooltipProps;
+    menu: MenuProps;
+};

package/cjs/utils/slotUtils.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var stringUtils = require('./stringUtils.js');
+var customLayoutUtils = require('./customLayoutUtils.js');
+
+function extractPivotSlotOptions(vnodes) {
+    const options = {
+        columns: [],
+        columnHeaderTitle: [],
+        rows: [],
+        rowHeaderTitle: [],
+        indicators: [],
+        corner: {},
+        tooltip: {},
+        menu: {}
+    };
+    const typeMapping = {
+        PivotColumnDimension: 'columns',
+        PivotColumnHeaderTitle: 'columnHeaderTitle',
+        PivotRowDimension: 'rows',
+        PivotRowHeaderTitle: 'rowHeaderTitle',
+        PivotCorner: 'corner',
+        PivotIndicator: 'indicators',
+        Tooltip: 'tooltip',
+        Menu: 'menu'
+    };
+    vnodes.forEach(vnode => {
+        var _a, _b;
+        vnode.props = stringUtils.convertPropsToCamelCase(vnode.props);
+        const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
+        const optionKey = typeMapping[typeName];
+        if (optionKey) {
+            if (Array.isArray(options[optionKey])) {
+                if (vnode.props.hasOwnProperty('objectHandler')) {
+                    options[optionKey].push(vnode.props.objectHandler);
+                }
+                else {
+                    options[optionKey].push(vnode.props);
+                }
+            }
+            else {
+                options[optionKey] = vnode.props;
+            }
+        }
+    });
+    return options;
+}
+function extractListSlotOptions(vnodes) {
+    const options = {
+        columns: [],
+        tooltip: {},
+        menu: {}
+    };
+    const typeMapping = {
+        ListColumn: 'columns',
+        Tooltip: 'tooltip',
+        Menu: 'menu'
+    };
+    vnodes.forEach(vnode => {
+        var _a, _b;
+        vnode.props = stringUtils.convertPropsToCamelCase(vnode.props);
+        const typeName = ((_a = vnode.type) === null || _a === void 0 ? void 0 : _a.symbol) || ((_b = vnode.type) === null || _b === void 0 ? void 0 : _b.name);
+        const optionKey = typeMapping[typeName];
+        if (optionKey) {
+            if (optionKey === 'columns' && vnode.children) {
+                vnode.props.customLayout = customLayoutUtils.createCustomLayoutHandler(vnode.children);
+            }
+            if (Array.isArray(options[optionKey])) {
+                options[optionKey].push(vnode.props);
+            }
+            else {
+                options[optionKey] = vnode.props;
+            }
+        }
+    });
+    return options;
+}
+
+exports.extractListSlotOptions = extractListSlotOptions;
+exports.extractPivotSlotOptions = extractPivotSlotOptions;

package/cjs/utils/stringUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function toCamelCase(str: string): string;
+export declare function convertPropsToCamelCase(props: Record<string, any>): Record<string, any>;

package/cjs/utils/stringUtils.js

@@ -0,0 +1,18 @@
+'use strict';
+
+function toCamelCase(str) {
+    return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+}
+function convertPropsToCamelCase(props) {
+    const newProps = {};
+    for (const key in props) {
+        if (props.hasOwnProperty(key)) {
+            const camelCaseKey = toCamelCase(key);
+            newProps[camelCaseKey] = props[key];
+        }
+    }
+    return newProps;
+}
+
+exports.convertPropsToCamelCase = convertPropsToCamelCase;
+exports.toCamelCase = toCamelCase;

package/cjs/utils/vnodeUtils.d.ts

@@ -0,0 +1 @@
+export declare function flattenVNodes(vnodes: any[]): any[];

package/cjs/utils/vnodeUtils.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function flattenVNodes(vnodes) {
+    return vnodes.flatMap(vnode => (Array.isArray(vnode.children) ? flattenVNodes(vnode.children) : vnode));
+}
+
+exports.flattenVNodes = flattenVNodes;

package/cjs/utils.d.ts

@@ -0,0 +1,4 @@
+export * from './utils/stringUtils';
+export * from './utils/vnodeUtils';
+export * from './utils/customLayoutUtils';
+export * from './utils/slotUtils';