@visactor/vue-vtable
Version:
The vue version of VTable
248 lines (244 loc) • 11.9 kB
JavaScript
'use strict';
var vue = require('vue');
var VTable = require('@visactor/vtable');
var eventsUtils = require('../eventsUtils.js');
var useEditorRender = require('../hooks/useEditorRender.js');
var useCellRender = require('../hooks/useCellRender.js');
var _sfc_main = vue.defineComponent({
__name: 'base-table',
props: {
type: { type: String, required: false },
options: { type: null, required: false },
records: { type: Array, required: false },
width: { type: [Number, String], required: false, default: '100%' },
height: { type: [Number, String], required: false, default: '100%' },
onReady: { type: Function, required: false },
onError: { type: Function, required: false },
keepColumnWidthChange: { type: Boolean, required: false },
onClickCell: { type: null, required: false },
onDblClickCell: { type: null, required: false },
onMouseDownCell: { type: null, required: false },
onMouseUpCell: { type: null, required: false },
onSelectedCell: { type: null, required: false },
onKeyDown: { type: null, required: false },
onMouseEnterTable: { type: null, required: false },
onMouseLeaveTable: { type: null, required: false },
onMouseDownTable: { type: null, required: false },
onMouseMoveCell: { type: null, required: false },
onMouseEnterCell: { type: null, required: false },
onMouseLeaveCell: { type: null, required: false },
onContextMenuCell: { type: null, required: false },
onResizeColumn: { type: null, required: false },
onResizeColumnEnd: { type: null, required: false },
onChangeHeaderPosition: { type: null, required: false },
onChangeHeaderPositionStart: { type: null, required: false },
onChangeHeaderPositionFail: { type: null, required: false },
onSortClick: { type: null, required: false },
onFreezeClick: { type: null, required: false },
onScroll: { type: null, required: false },
onDropdownMenuClick: { type: null, required: false },
onMouseOverChartSymbol: { type: null, required: false },
onDragSelectEnd: { type: null, required: false },
onDropdownIconClick: { type: null, required: false },
onDropdownMenuClear: { type: null, required: false },
onTreeHierarchyStateChange: { type: null, required: false },
onShowMenu: { type: null, required: false },
onHideMenu: { type: null, required: false },
onIconClick: { type: null, required: false },
onLegendItemClick: { type: null, required: false },
onLegendItemHover: { type: null, required: false },
onLegendItemUnHover: { type: null, required: false },
onLegendChange: { type: null, required: false },
onMouseEnterAxis: { type: null, required: false },
onMouseLeaveAxis: { type: null, required: false },
onCheckboxStateChange: { type: null, required: false },
onRadioStateChange: { type: null, required: false },
onAfterRender: { type: null, required: false },
onInitialized: { type: null, required: false },
onPivotSortClick: { type: null, required: false },
onDrillMenuClick: { type: null, required: false },
onVChartEventType: { type: null, required: false },
onChangeCellValue: { type: null, required: false },
onMousedownFillHandle: { type: null, required: false },
onDragFillHandleEnd: { type: null, required: false },
onDblclickFillHandle: { type: null, required: false },
onScrollVerticalEnd: { type: null, required: false },
onScrollHorizontalEnd: { type: null, required: false },
onChangCellValue: { type: null, required: false },
onEmptyTipClick: { type: null, required: false },
onEmptyTipDblClick: { type: null, required: false },
onButtonClick: { type: null, required: false },
onBeforeCacheChartImage: { type: null, required: false },
onPastedData: { type: null, required: false }
},
emits: eventsUtils.TABLE_EVENTS_KEYS,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const vTableContainer = vue.ref(null);
const vTableInstance = vue.shallowRef(null);
const columnWidths = vue.ref(new Map());
const pivotColumnWidths = vue.ref([]);
const pivotHeaderColumnWidths = vue.ref([]);
useEditorRender.useEditorRender(props, vTableInstance);
useCellRender.useCellRender(props, vTableInstance);
__expose({ vTableInstance });
const containerWidth = vue.computed(() => (typeof props.width === 'number' ? `${props.width}px` : props.width));
const containerHeight = vue.computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height));
const emit = __emit;
const bindEvents = (instance) => {
eventsUtils.TABLE_EVENTS_KEYS.forEach(eventKey => {
const vueEventHandler = (event) => {
emit(eventKey, event);
};
instance.on(eventsUtils.TABLE_EVENTS[eventKey], vueEventHandler);
});
};
const createTableInstance = (Type, options) => {
const vtable = new Type(vTableContainer.value, options);
vTableInstance.value = vtable;
columnWidths.value.clear();
pivotColumnWidths.value = [];
pivotHeaderColumnWidths.value = [];
vtable.on('resize_column_end', (args) => {
if (!props.keepColumnWidthChange) {
return;
}
const { col, colWidths } = args;
const width = colWidths[col];
if (vtable.isPivotTable()) {
const path = vtable.getCellHeaderPaths(col, vtable.columnHeaderLevelCount);
let dimensions = null;
if (path.cellLocation === 'rowHeader') {
dimensions = path.rowHeaderPaths;
}
else {
dimensions = path.colHeaderPaths;
}
let found = false;
for (let i = 0; i < pivotColumnWidths.value.length; i++) {
const item = pivotColumnWidths.value[i];
if (JSON.stringify(item.dimensions) === JSON.stringify(dimensions)) {
item.width = width;
found = true;
}
}
if (!found) {
pivotColumnWidths.value.push({ dimensions, width });
}
}
else {
const define = vtable.getBodyColumnDefine(col, 0);
if (define === null || define === void 0 ? void 0 : define.key) {
columnWidths.value.set(define.key, width);
}
}
});
};
const createVTable = () => {
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;
};
try {
switch (props.type) {
case 'list':
createTableInstance(VTable.ListTable, Object.assign(Object.assign({}, props.options), { records: getRecords() }));
break;
case 'pivot':
createTableInstance(VTable.PivotTable, Object.assign(Object.assign({}, props.options), { records: getRecords() }));
break;
case 'chart':
createTableInstance(VTable.PivotChart, Object.assign(Object.assign({}, props.options), { records: getRecords() }));
break;
}
bindEvents(vTableInstance.value);
(_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) {
return;
}
try {
if (props.keepColumnWidthChange) {
const columnWidthConfig = updateWidthCache(columnWidths.value, pivotColumnWidths.value, vTableInstance.value);
newOptions = Object.assign(Object.assign({}, newOptions), { columnWidthConfig: columnWidthConfig, columnWidthConfigForRowHeader: columnWidthConfig });
}
switch (props.type) {
case 'list':
if (vTableInstance.value instanceof VTable.ListTable) {
vTableInstance.value.updateOption(newOptions);
}
break;
case 'pivot':
if (vTableInstance.value instanceof VTable.PivotTable) {
vTableInstance.value.updateOption(newOptions);
}
break;
case 'chart':
if (vTableInstance.value instanceof VTable.PivotChart) {
vTableInstance.value.updateOption(newOptions);
}
break;
}
}
catch (err) {
(_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, err);
}
};
vue.onMounted(createVTable);
vue.onBeforeUnmount(() => {
var _a;
(_a = vTableInstance.value) === null || _a === void 0 ? void 0 : _a.release();
});
vue.watch(() => props.options, (newOptions, oldOptions) => {
if (vTableInstance.value) {
updateVTable(newOptions);
}
else {
createVTable();
}
});
vue.watch(() => props.records, (newRecords, oldRecords) => {
if (vTableInstance.value) {
updateVTable(Object.assign(Object.assign({}, props.options), { records: newRecords }));
}
else {
createVTable();
}
}, { deep: true });
function updateWidthCache(columnWidths, pivotColumnWidths, table) {
if (table.isPivotTable()) {
return pivotColumnWidths;
}
const columnWidthConfig = [];
columnWidths.forEach((width, key) => {
columnWidthConfig.push({
key,
width
});
});
return columnWidthConfig;
}
return (_ctx, _cache) => {
return (vue.openBlock(), vue.createElementBlock("div", {
ref_key: "vTableContainer",
ref: vTableContainer,
style: vue.normalizeStyle([{ width: containerWidth.value, height: containerHeight.value }, { "position": "relative" }])
}, null, 4));
};
}
});
module.exports = _sfc_main;