@visactor/vue-vtable 1.16.0-alpha.1 → 1.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/tables/base-table.vue.d.ts +10 -0
- package/cjs/tables/base-table.vue.js +60 -1
- package/dist/vue-vtable.js +65 -2
- package/dist/vue-vtable.min.js +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/tables/base-table.vue.d.ts +10 -0
- package/es/tables/base-table.vue.js +60 -1
- package/package.json +5 -5
package/cjs/index.d.ts
CHANGED
package/cjs/index.js
CHANGED
|
@@ -40,7 +40,7 @@ function _interopNamespaceDefault(e) {
|
|
|
40
40
|
|
|
41
41
|
var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
|
|
42
42
|
|
|
43
|
-
const version = "1.16.
|
|
43
|
+
const version = "1.16.1";
|
|
44
44
|
|
|
45
45
|
exports.VTable = VTable__namespace;
|
|
46
46
|
Object.defineProperty(exports, 'register', {
|
|
@@ -10,6 +10,7 @@ export interface BaseTableProps extends EventsProps {
|
|
|
10
10
|
height?: number | string;
|
|
11
11
|
onReady?: (instance: IVTable, isInitial: boolean) => void;
|
|
12
12
|
onError?: (err: Error) => void;
|
|
13
|
+
keepColumnWidthChange?: boolean;
|
|
13
14
|
}
|
|
14
15
|
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
16
|
type: {
|
|
@@ -42,6 +43,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
42
43
|
type: FunctionConstructor;
|
|
43
44
|
required: false;
|
|
44
45
|
};
|
|
46
|
+
keepColumnWidthChange: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
required: false;
|
|
49
|
+
};
|
|
45
50
|
onClickCell: {
|
|
46
51
|
type: any;
|
|
47
52
|
required: false;
|
|
@@ -271,6 +276,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
271
276
|
type: FunctionConstructor;
|
|
272
277
|
required: false;
|
|
273
278
|
};
|
|
279
|
+
keepColumnWidthChange: {
|
|
280
|
+
type: BooleanConstructor;
|
|
281
|
+
required: false;
|
|
282
|
+
};
|
|
274
283
|
onClickCell: {
|
|
275
284
|
type: any;
|
|
276
285
|
required: false;
|
|
@@ -473,6 +482,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
473
482
|
options: any;
|
|
474
483
|
width: string | number;
|
|
475
484
|
height: string | number;
|
|
485
|
+
keepColumnWidthChange: boolean;
|
|
476
486
|
onClickCell: any;
|
|
477
487
|
onDblClickCell: any;
|
|
478
488
|
onMouseDownCell: any;
|
|
@@ -14,6 +14,7 @@ var _sfc_main = vue.defineComponent({
|
|
|
14
14
|
height: { type: [Number, String], required: false, default: '100%' },
|
|
15
15
|
onReady: { type: Function, required: false },
|
|
16
16
|
onError: { type: Function, required: false },
|
|
17
|
+
keepColumnWidthChange: { type: Boolean, required: false },
|
|
17
18
|
onClickCell: { type: null, required: false },
|
|
18
19
|
onDblClickCell: { type: null, required: false },
|
|
19
20
|
onMouseDownCell: { type: null, required: false },
|
|
@@ -69,6 +70,9 @@ var _sfc_main = vue.defineComponent({
|
|
|
69
70
|
const props = __props;
|
|
70
71
|
const vTableContainer = vue.ref(null);
|
|
71
72
|
const vTableInstance = vue.shallowRef(null);
|
|
73
|
+
const columnWidths = vue.ref(new Map());
|
|
74
|
+
const pivotColumnWidths = vue.ref([]);
|
|
75
|
+
const pivotHeaderColumnWidths = vue.ref([]);
|
|
72
76
|
__expose({ vTableInstance });
|
|
73
77
|
const containerWidth = vue.computed(() => (typeof props.width === 'number' ? `${props.width}px` : props.width));
|
|
74
78
|
const containerHeight = vue.computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height));
|
|
@@ -82,7 +86,45 @@ var _sfc_main = vue.defineComponent({
|
|
|
82
86
|
});
|
|
83
87
|
};
|
|
84
88
|
const createTableInstance = (Type, options) => {
|
|
85
|
-
|
|
89
|
+
const vtable = new Type(vTableContainer.value, options);
|
|
90
|
+
vTableInstance.value = vtable;
|
|
91
|
+
columnWidths.value.clear();
|
|
92
|
+
pivotColumnWidths.value = [];
|
|
93
|
+
pivotHeaderColumnWidths.value = [];
|
|
94
|
+
vtable.on('resize_column_end', (args) => {
|
|
95
|
+
if (!props.keepColumnWidthChange) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
const { col, colWidths } = args;
|
|
99
|
+
const width = colWidths[col];
|
|
100
|
+
if (vtable.isPivotTable()) {
|
|
101
|
+
const path = vtable.getCellHeaderPaths(col, vtable.columnHeaderLevelCount);
|
|
102
|
+
let dimensions = null;
|
|
103
|
+
if (path.cellLocation === 'rowHeader') {
|
|
104
|
+
dimensions = path.rowHeaderPaths;
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
dimensions = path.colHeaderPaths;
|
|
108
|
+
}
|
|
109
|
+
let found = false;
|
|
110
|
+
for (let i = 0; i < pivotColumnWidths.value.length; i++) {
|
|
111
|
+
const item = pivotColumnWidths.value[i];
|
|
112
|
+
if (JSON.stringify(item.dimensions) === JSON.stringify(dimensions)) {
|
|
113
|
+
item.width = width;
|
|
114
|
+
found = true;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
if (!found) {
|
|
118
|
+
pivotColumnWidths.value.push({ dimensions, width });
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
const define = vtable.getBodyColumnDefine(col, 0);
|
|
123
|
+
if (define === null || define === void 0 ? void 0 : define.key) {
|
|
124
|
+
columnWidths.value.set(define.key, width);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
});
|
|
86
128
|
};
|
|
87
129
|
const createVTable = () => {
|
|
88
130
|
var _a, _b;
|
|
@@ -122,6 +164,10 @@ var _sfc_main = vue.defineComponent({
|
|
|
122
164
|
return;
|
|
123
165
|
}
|
|
124
166
|
try {
|
|
167
|
+
if (props.keepColumnWidthChange) {
|
|
168
|
+
const columnWidthConfig = updateWidthCache(columnWidths.value, pivotColumnWidths.value, vTableInstance.value);
|
|
169
|
+
newOptions = Object.assign(Object.assign({}, newOptions), { columnWidthConfig: columnWidthConfig, columnWidthConfigForRowHeader: columnWidthConfig });
|
|
170
|
+
}
|
|
125
171
|
switch (props.type) {
|
|
126
172
|
case 'list':
|
|
127
173
|
if (vTableInstance.value instanceof VTable.ListTable) {
|
|
@@ -162,6 +208,19 @@ var _sfc_main = vue.defineComponent({
|
|
|
162
208
|
createVTable();
|
|
163
209
|
}
|
|
164
210
|
}, { deep: true });
|
|
211
|
+
function updateWidthCache(columnWidths, pivotColumnWidths, table) {
|
|
212
|
+
if (table.isPivotTable()) {
|
|
213
|
+
return pivotColumnWidths;
|
|
214
|
+
}
|
|
215
|
+
const columnWidthConfig = [];
|
|
216
|
+
columnWidths.forEach((width, key) => {
|
|
217
|
+
columnWidthConfig.push({
|
|
218
|
+
key,
|
|
219
|
+
width
|
|
220
|
+
});
|
|
221
|
+
});
|
|
222
|
+
return columnWidthConfig;
|
|
223
|
+
}
|
|
165
224
|
return (_ctx, _cache) => {
|
|
166
225
|
return (vue.openBlock(), vue.createElementBlock("div", {
|
|
167
226
|
ref_key: "vTableContainer",
|
package/dist/vue-vtable.js
CHANGED
|
@@ -273,6 +273,7 @@
|
|
|
273
273
|
height: { type: [Number, String], required: false, default: '100%' },
|
|
274
274
|
onReady: { type: Function, required: false },
|
|
275
275
|
onError: { type: Function, required: false },
|
|
276
|
+
keepColumnWidthChange: { type: Boolean, required: false },
|
|
276
277
|
onClickCell: { type: null, required: false },
|
|
277
278
|
onDblClickCell: { type: null, required: false },
|
|
278
279
|
onMouseDownCell: { type: null, required: false },
|
|
@@ -328,6 +329,9 @@
|
|
|
328
329
|
const props = __props;
|
|
329
330
|
const vTableContainer = vue.ref(null);
|
|
330
331
|
const vTableInstance = vue.shallowRef(null);
|
|
332
|
+
const columnWidths = vue.ref(new Map());
|
|
333
|
+
const pivotColumnWidths = vue.ref([]);
|
|
334
|
+
const pivotHeaderColumnWidths = vue.ref([]);
|
|
331
335
|
__expose({ vTableInstance });
|
|
332
336
|
const containerWidth = vue.computed(() => (typeof props.width === 'number' ? `${props.width}px` : props.width));
|
|
333
337
|
const containerHeight = vue.computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height));
|
|
@@ -341,7 +345,45 @@
|
|
|
341
345
|
});
|
|
342
346
|
};
|
|
343
347
|
const createTableInstance = (Type, options) => {
|
|
344
|
-
|
|
348
|
+
const vtable = new Type(vTableContainer.value, options);
|
|
349
|
+
vTableInstance.value = vtable;
|
|
350
|
+
columnWidths.value.clear();
|
|
351
|
+
pivotColumnWidths.value = [];
|
|
352
|
+
pivotHeaderColumnWidths.value = [];
|
|
353
|
+
vtable.on('resize_column_end', (args) => {
|
|
354
|
+
if (!props.keepColumnWidthChange) {
|
|
355
|
+
return;
|
|
356
|
+
}
|
|
357
|
+
const { col, colWidths } = args;
|
|
358
|
+
const width = colWidths[col];
|
|
359
|
+
if (vtable.isPivotTable()) {
|
|
360
|
+
const path = vtable.getCellHeaderPaths(col, vtable.columnHeaderLevelCount);
|
|
361
|
+
let dimensions = null;
|
|
362
|
+
if (path.cellLocation === 'rowHeader') {
|
|
363
|
+
dimensions = path.rowHeaderPaths;
|
|
364
|
+
}
|
|
365
|
+
else {
|
|
366
|
+
dimensions = path.colHeaderPaths;
|
|
367
|
+
}
|
|
368
|
+
let found = false;
|
|
369
|
+
for (let i = 0; i < pivotColumnWidths.value.length; i++) {
|
|
370
|
+
const item = pivotColumnWidths.value[i];
|
|
371
|
+
if (JSON.stringify(item.dimensions) === JSON.stringify(dimensions)) {
|
|
372
|
+
item.width = width;
|
|
373
|
+
found = true;
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
if (!found) {
|
|
377
|
+
pivotColumnWidths.value.push({ dimensions, width });
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
else {
|
|
381
|
+
const define = vtable.getBodyColumnDefine(col, 0);
|
|
382
|
+
if (define?.key) {
|
|
383
|
+
columnWidths.value.set(define.key, width);
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
});
|
|
345
387
|
};
|
|
346
388
|
const createVTable = () => {
|
|
347
389
|
if (!vTableContainer.value) {
|
|
@@ -388,6 +430,14 @@
|
|
|
388
430
|
return;
|
|
389
431
|
}
|
|
390
432
|
try {
|
|
433
|
+
if (props.keepColumnWidthChange) {
|
|
434
|
+
const columnWidthConfig = updateWidthCache(columnWidths.value, pivotColumnWidths.value, vTableInstance.value);
|
|
435
|
+
newOptions = {
|
|
436
|
+
...newOptions,
|
|
437
|
+
columnWidthConfig: columnWidthConfig,
|
|
438
|
+
columnWidthConfigForRowHeader: columnWidthConfig
|
|
439
|
+
};
|
|
440
|
+
}
|
|
391
441
|
switch (props.type) {
|
|
392
442
|
case 'list':
|
|
393
443
|
if (vTableInstance.value instanceof VTable.ListTable) {
|
|
@@ -428,6 +478,19 @@
|
|
|
428
478
|
createVTable();
|
|
429
479
|
}
|
|
430
480
|
}, { deep: true });
|
|
481
|
+
function updateWidthCache(columnWidths, pivotColumnWidths, table) {
|
|
482
|
+
if (table.isPivotTable()) {
|
|
483
|
+
return pivotColumnWidths;
|
|
484
|
+
}
|
|
485
|
+
const columnWidthConfig = [];
|
|
486
|
+
columnWidths.forEach((width, key) => {
|
|
487
|
+
columnWidthConfig.push({
|
|
488
|
+
key,
|
|
489
|
+
width
|
|
490
|
+
});
|
|
491
|
+
});
|
|
492
|
+
return columnWidthConfig;
|
|
493
|
+
}
|
|
431
494
|
return (_ctx, _cache) => {
|
|
432
495
|
return (vue.openBlock(), vue.createElementBlock("div", {
|
|
433
496
|
ref_key: "vTableContainer",
|
|
@@ -624,7 +687,7 @@
|
|
|
624
687
|
}
|
|
625
688
|
CheckBox.symbol = 'CheckBox';
|
|
626
689
|
|
|
627
|
-
const version = "1.16.
|
|
690
|
+
const version = "1.16.1";
|
|
628
691
|
|
|
629
692
|
exports.VTable = VTable__namespace;
|
|
630
693
|
Object.defineProperty(exports, 'register', {
|
package/dist/vue-vtable.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@visactor/vtable"),require("vue"),require("@visactor/vutils")):"function"==typeof define&&define.amd?define(["exports","@visactor/vtable","vue","@visactor/vutils"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).VueVTable={},e.VTable,e.vue,e.vutils)}(this,(function(e,o,n,t){"use strict";function r(e){var o=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),o.default=e,Object.freeze(o)}var l=r(o);function i(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function u(e){const o={};for(const n in e)if(e.hasOwnProperty(n)){o[i(n)]=e[n]}return o}function a(e){return e.flatMap((e=>Array.isArray(e.children)?a(e.children):e))}function s(e){const o={Group:l.CustomLayout.Group,Image:l.CustomLayout.Image,Text:l.CustomLayout.Text,Tag:l.CustomLayout.Tag,Radio:l.CustomLayout.Radio,CheckBox:l.CustomLayout.CheckBox};return{rootComponent:function e(n){if(!n)return null;const{type:r,children:l}=n,a=u(n.props),s=o[r?.symbol||r?.name];if(!s)return null;const c=new s({...a});!function(e,o){Object.keys(o).forEach((n=>{if(function(e,o){return e.startsWith("on")&&t.isFunction(o[e])}(n,o)){let t;t=n.startsWith("on")?n.slice(2).toLowerCase():i(n.slice(2)).toLowerCase(),e.addEventListener(t,o[n])}}))}(c,a);return function(e){return e?.default?.()||e||[]}(l).forEach((o=>{const n=e(o);n?c.add(n):o.type===Symbol.for("v-fgt")&&o.children.forEach((o=>{const n=e(o);n&&c.add(n)}))})),c}(e)}}function c(e){const o={columns:[],columnHeaderTitle:[],rows:[],rowHeaderTitle:[],indicators:[],corner:{},tooltip:{},menu:{}},n={PivotColumnDimension:"columns",PivotColumnHeaderTitle:"columnHeaderTitle",PivotRowDimension:"rows",PivotRowHeaderTitle:"rowHeaderTitle",PivotCorner:"corner",PivotIndicator:"indicators",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=u(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];r&&(Array.isArray(o[r])?e.props.hasOwnProperty("objectHandler")?o[r].push(e.props.objectHandler):o[r].push(e.props):o[r]=e.props)})),o}function d(e){const o={columns:[],tooltip:{},menu:{}},n={ListColumn:"columns",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=u(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];var l;r&&("columns"===r&&e.children&&(e.props.customLayout=(l=e.children,e=>{const{table:o,row:n,col:t,rect:r}=e,i=o.getCellOriginRecord(t,n),{height:u,width:a}=r??o.getCellRect(t,n),c=l.customLayout({table:o,row:n,col:t,rect:r,record:i,height:u,width:a})[0],{rootComponent:d}=s(c);return{rootContainer:d,renderDefault:!1}})),Array.isArray(o[r])?o[r].push(e.props):o[r]=e.props)})),o}function p(e,o){return{...e,columns:o.columns&&o.columns.length?o.columns:e.columns,columnHeaderTitle:o.columnHeaderTitle&&o.columnHeaderTitle.length?o.columnHeaderTitle:e.columnHeaderTitle,rows:o.rows&&o.rows.length?o.rows:e.rows,rowHeaderTitle:o.rowHeaderTitle&&o.rowHeaderTitle.length?o.rowHeaderTitle:e.rowHeaderTitle,indicators:o.indicators&&o.indicators.length?o.indicators:e.indicators,corner:Object.keys(e.corner||{}).length?e.corner:o.corner,tooltip:Object.keys(o.tooltip||{}).length?o.tooltip:e.tooltip,menu:Object.keys(o.menu||{}).length?o.menu:e.menu}}const C={...o.ListTable.EVENT_TYPE,...o.PivotTable.EVENT_TYPE,...o.PivotChart.EVENT_TYPE},E={onClickCell:C.CLICK_CELL,onDblClickCell:C.DBLCLICK_CELL,onMouseDownCell:C.MOUSEDOWN_CELL,onMouseUpCell:C.MOUSEUP_CELL,onSelectedCell:C.SELECTED_CELL,onKeyDown:C.KEYDOWN,onMouseEnterTable:C.MOUSEENTER_TABLE,onMouseLeaveTable:C.MOUSELEAVE_TABLE,onMouseDownTable:C.MOUSEDOWN_TABLE,onMouseMoveCell:C.MOUSEMOVE_CELL,onMouseEnterCell:C.MOUSEENTER_CELL,onMouseLeaveCell:C.MOUSELEAVE_CELL,onContextMenuCell:C.CONTEXTMENU_CELL,onResizeColumn:C.RESIZE_COLUMN,onResizeColumnEnd:C.RESIZE_COLUMN_END,onChangeHeaderPosition:C.CHANGE_HEADER_POSITION,onChangeHeaderPositionStart:C.CHANGE_HEADER_POSITION_START,onChangeHeaderPositionFail:C.CHANGE_HEADER_POSITION_FAIL,onSortClick:C.SORT_CLICK,onFreezeClick:C.FREEZE_CLICK,onScroll:C.SCROLL,onDropdownMenuClick:C.DROPDOWN_MENU_CLICK,onMouseOverChartSymbol:C.MOUSEOVER_CHART_SYMBOL,onDragSelectEnd:C.DRAG_SELECT_END,onDropdownIconClick:C.DROPDOWN_ICON_CLICK,onDropdownMenuClear:C.DROPDOWN_MENU_CLEAR,onTreeHierarchyStateChange:C.TREE_HIERARCHY_STATE_CHANGE,onShowMenu:C.SHOW_MENU,onHideMenu:C.HIDE_MENU,onIconClick:C.ICON_CLICK,onLegendItemClick:C.LEGEND_ITEM_CLICK,onLegendItemHover:C.LEGEND_ITEM_HOVER,onLegendItemUnHover:C.LEGEND_ITEM_UNHOVER,onLegendChange:C.LEGEND_CHANGE,onMouseEnterAxis:C.MOUSEENTER_AXIS,onMouseLeaveAxis:C.MOUSELEAVE_AXIS,onCheckboxStateChange:C.CHECKBOX_STATE_CHANGE,onRadioStateChange:C.RADIO_STATE_CHANGE,onAfterRender:C.AFTER_RENDER,onInitialized:C.INITIALIZED,onPivotSortClick:C.PIVOT_SORT_CLICK,onDrillMenuClick:C.DRILLMENU_CLICK,onVChartEventType:C.VCHART_EVENT_TYPE,onChangeCellValue:C.CHANGE_CELL_VALUE,onMousedownFillHandle:C.MOUSEDOWN_FILL_HANDLE,onDragFillHandleEnd:C.DRAG_FILL_HANDLE_END,onDblclickFillHandle:C.DBLCLICK_FILL_HANDLE,onScrollVerticalEnd:C.SCROLL_VERTICAL_END,onScrollHorizontalEnd:C.SCROLL_HORIZONTAL_END,onChangCellValue:C.CHANGE_CELL_VALUE},y=Object.keys(E);var h=n.defineComponent({__name:"base-table",props:{type:{type:String,required:!1},options:{type:null,required:!1},records:{type:Array,required:!1},width:{type:[Number,String],required:!1,default:"100%"},height:{type:[Number,String],required:!1,default:"100%"},onReady:{type:Function,required:!1},onError:{type:Function,required:!1},onClickCell:{type:null,required:!1},onDblClickCell:{type:null,required:!1},onMouseDownCell:{type:null,required:!1},onMouseUpCell:{type:null,required:!1},onSelectedCell:{type:null,required:!1},onKeyDown:{type:null,required:!1},onMouseEnterTable:{type:null,required:!1},onMouseLeaveTable:{type:null,required:!1},onMouseDownTable:{type:null,required:!1},onMouseMoveCell:{type:null,required:!1},onMouseEnterCell:{type:null,required:!1},onMouseLeaveCell:{type:null,required:!1},onContextMenuCell:{type:null,required:!1},onResizeColumn:{type:null,required:!1},onResizeColumnEnd:{type:null,required:!1},onChangeHeaderPosition:{type:null,required:!1},onChangeHeaderPositionStart:{type:null,required:!1},onChangeHeaderPositionFail:{type:null,required:!1},onSortClick:{type:null,required:!1},onFreezeClick:{type:null,required:!1},onScroll:{type:null,required:!1},onDropdownMenuClick:{type:null,required:!1},onMouseOverChartSymbol:{type:null,required:!1},onDragSelectEnd:{type:null,required:!1},onDropdownIconClick:{type:null,required:!1},onDropdownMenuClear:{type:null,required:!1},onTreeHierarchyStateChange:{type:null,required:!1},onShowMenu:{type:null,required:!1},onHideMenu:{type:null,required:!1},onIconClick:{type:null,required:!1},onLegendItemClick:{type:null,required:!1},onLegendItemHover:{type:null,required:!1},onLegendItemUnHover:{type:null,required:!1},onLegendChange:{type:null,required:!1},onMouseEnterAxis:{type:null,required:!1},onMouseLeaveAxis:{type:null,required:!1},onCheckboxStateChange:{type:null,required:!1},onRadioStateChange:{type:null,required:!1},onAfterRender:{type:null,required:!1},onInitialized:{type:null,required:!1},onPivotSortClick:{type:null,required:!1},onDrillMenuClick:{type:null,required:!1},onVChartEventType:{type:null,required:!1},onChangeCellValue:{type:null,required:!1},onMousedownFillHandle:{type:null,required:!1},onDragFillHandleEnd:{type:null,required:!1},onDblclickFillHandle:{type:null,required:!1},onScrollVerticalEnd:{type:null,required:!1},onScrollHorizontalEnd:{type:null,required:!1}},emits:y,setup(e,{expose:t,emit:r}){const l=e,i=n.ref(null),u=n.shallowRef(null);t({vTableInstance:u});const a=n.computed((()=>"number"==typeof l.width?`${l.width}px`:l.width)),s=n.computed((()=>"number"==typeof l.height?`${l.height}px`:l.height)),c=r,d=(e,o)=>{u.value=new e(i.value,o)},p=()=>{if(!i.value)return;u.value&&u.value.release();const e=()=>void 0!==l.records&&null!==l.records&&l.records.length>0?l.records:l.options.records;try{switch(l.type){case"list":d(o.ListTable,{...l.options,records:e()});break;case"pivot":d(o.PivotTable,{...l.options,records:e()});break;case"chart":d(o.PivotChart,{...l.options,records:e()})}n=u.value,y.forEach((e=>{n.on(E[e],(o=>{c(e,o)}))})),l.onReady?.(u.value,!0)}catch(e){l.onError?.(e)}var n},C=e=>{if(u.value)try{switch(l.type){case"list":u.value instanceof o.ListTable&&u.value.updateOption(e);break;case"pivot":u.value instanceof o.PivotTable&&u.value.updateOption(e);break;case"chart":u.value instanceof o.PivotChart&&u.value.updateOption(e)}}catch(e){l.onError?.(e)}};return n.onMounted(p),n.onBeforeUnmount((()=>u.value?.release())),n.watch((()=>l.options),(e=>{u.value?C(e):p()})),n.watch((()=>l.records),((e,o)=>{u.value?C({...l.options,records:e}):p()}),{deep:!0}),(e,o)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:i,style:n.normalizeStyle([{width:a.value,height:s.value},{position:"relative"}])},null,4))}}),m=n.defineComponent({__name:"list-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:o}){const t=e,r=n.ref(null),l=n.useSlots(),i=n.computed((()=>{const e=d(a(l.default?.()||[]));return p(t.options,e)}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(h,n.mergeProps({type:"list",options:i.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),T=n.defineComponent({__name:"pivot-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),i=n.computed((()=>{const e=c(a(l.default?.()||[]));return p(t.options,e)}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(h,n.mergeProps({type:"pivot",options:i.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),v=n.defineComponent({__name:"pivot-chart",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),i=n.computed((()=>{const e=c(a(l.default?.()||[]));return p(t.options,e)}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(h,n.mergeProps({type:"chart",options:i.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}});function L(e){return null}function f(e){return null}function b(e){return null}function g(e){return null}function _(e){return null}function S(e){return null}function O(e){return null}function q(e){return null}function w(e){return null}function M(){return null}function H(){return null}function I(){return null}function D(e){return null}function N(e){return null}function R(e){return null}L.symbol="ListColumn",f.symbol="PivotColumnDimension",b.symbol="PivotRowDimension",g.symbol="PivotColumnHeaderTitle",_.symbol="PivotRowHeaderTitle",S.symbol="PivotIndicator",O.symbol="PivotCorner",q.symbol="Menu",w.symbol="Tooltip",M.symbol="Group",H.symbol="Image",I.symbol="Text",D.symbol="Tag",N.symbol="Radio",R.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return o.register}}),e.CheckBox=R,e.Group=M,e.Image=H,e.ListColumn=L,e.ListTable=m,e.Menu=q,e.PivotChart=v,e.PivotColumnDimension=f,e.PivotColumnHeaderTitle=g,e.PivotCorner=O,e.PivotIndicator=S,e.PivotRowDimension=b,e.PivotRowHeaderTitle=_,e.PivotTable=T,e.Radio=N,e.Tag=D,e.Text=I,e.Tooltip=w,e.registerChartModule=(e,o)=>{l.register.chartModule(e,o)},e.version="1.16.0-alpha.1"}));
|
|
1
|
+
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@visactor/vtable"),require("vue"),require("@visactor/vutils")):"function"==typeof define&&define.amd?define(["exports","@visactor/vtable","vue","@visactor/vutils"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).VueVTable={},e.VTable,e.vue,e.vutils)}(this,(function(e,o,n,t){"use strict";function r(e){var o=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),o.default=e,Object.freeze(o)}var l=r(o);function i(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function u(e){const o={};for(const n in e)if(e.hasOwnProperty(n)){o[i(n)]=e[n]}return o}function a(e){return e.flatMap((e=>Array.isArray(e.children)?a(e.children):e))}function s(e){const o={Group:l.CustomLayout.Group,Image:l.CustomLayout.Image,Text:l.CustomLayout.Text,Tag:l.CustomLayout.Tag,Radio:l.CustomLayout.Radio,CheckBox:l.CustomLayout.CheckBox};return{rootComponent:function e(n){if(!n)return null;const{type:r,children:l}=n,a=u(n.props),s=o[r?.symbol||r?.name];if(!s)return null;const c=new s({...a});!function(e,o){Object.keys(o).forEach((n=>{if(function(e,o){return e.startsWith("on")&&t.isFunction(o[e])}(n,o)){let t;t=n.startsWith("on")?n.slice(2).toLowerCase():i(n.slice(2)).toLowerCase(),e.addEventListener(t,o[n])}}))}(c,a);return function(e){return e?.default?.()||e||[]}(l).forEach((o=>{const n=e(o);n?c.add(n):o.type===Symbol.for("v-fgt")&&o.children.forEach((o=>{const n=e(o);n&&c.add(n)}))})),c}(e)}}function c(e){const o={columns:[],columnHeaderTitle:[],rows:[],rowHeaderTitle:[],indicators:[],corner:{},tooltip:{},menu:{}},n={PivotColumnDimension:"columns",PivotColumnHeaderTitle:"columnHeaderTitle",PivotRowDimension:"rows",PivotRowHeaderTitle:"rowHeaderTitle",PivotCorner:"corner",PivotIndicator:"indicators",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=u(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];r&&(Array.isArray(o[r])?e.props.hasOwnProperty("objectHandler")?o[r].push(e.props.objectHandler):o[r].push(e.props):o[r]=e.props)})),o}function d(e){const o={columns:[],tooltip:{},menu:{}},n={ListColumn:"columns",Tooltip:"tooltip",Menu:"menu"};return e.forEach((e=>{e.props=u(e.props);const t=e.type?.symbol||e.type?.name,r=n[t];var l;r&&("columns"===r&&e.children&&(e.props.customLayout=(l=e.children,e=>{const{table:o,row:n,col:t,rect:r}=e,i=o.getCellOriginRecord(t,n),{height:u,width:a}=r??o.getCellRect(t,n),c=l.customLayout({table:o,row:n,col:t,rect:r,record:i,height:u,width:a})[0],{rootComponent:d}=s(c);return{rootContainer:d,renderDefault:!1}})),Array.isArray(o[r])?o[r].push(e.props):o[r]=e.props)})),o}function p(e,o){return{...e,columns:o.columns&&o.columns.length?o.columns:e.columns,columnHeaderTitle:o.columnHeaderTitle&&o.columnHeaderTitle.length?o.columnHeaderTitle:e.columnHeaderTitle,rows:o.rows&&o.rows.length?o.rows:e.rows,rowHeaderTitle:o.rowHeaderTitle&&o.rowHeaderTitle.length?o.rowHeaderTitle:e.rowHeaderTitle,indicators:o.indicators&&o.indicators.length?o.indicators:e.indicators,corner:Object.keys(e.corner||{}).length?e.corner:o.corner,tooltip:Object.keys(o.tooltip||{}).length?o.tooltip:e.tooltip,menu:Object.keys(o.menu||{}).length?o.menu:e.menu}}const C={...o.ListTable.EVENT_TYPE,...o.PivotTable.EVENT_TYPE,...o.PivotChart.EVENT_TYPE},y={onClickCell:C.CLICK_CELL,onDblClickCell:C.DBLCLICK_CELL,onMouseDownCell:C.MOUSEDOWN_CELL,onMouseUpCell:C.MOUSEUP_CELL,onSelectedCell:C.SELECTED_CELL,onKeyDown:C.KEYDOWN,onMouseEnterTable:C.MOUSEENTER_TABLE,onMouseLeaveTable:C.MOUSELEAVE_TABLE,onMouseDownTable:C.MOUSEDOWN_TABLE,onMouseMoveCell:C.MOUSEMOVE_CELL,onMouseEnterCell:C.MOUSEENTER_CELL,onMouseLeaveCell:C.MOUSELEAVE_CELL,onContextMenuCell:C.CONTEXTMENU_CELL,onResizeColumn:C.RESIZE_COLUMN,onResizeColumnEnd:C.RESIZE_COLUMN_END,onChangeHeaderPosition:C.CHANGE_HEADER_POSITION,onChangeHeaderPositionStart:C.CHANGE_HEADER_POSITION_START,onChangeHeaderPositionFail:C.CHANGE_HEADER_POSITION_FAIL,onSortClick:C.SORT_CLICK,onFreezeClick:C.FREEZE_CLICK,onScroll:C.SCROLL,onDropdownMenuClick:C.DROPDOWN_MENU_CLICK,onMouseOverChartSymbol:C.MOUSEOVER_CHART_SYMBOL,onDragSelectEnd:C.DRAG_SELECT_END,onDropdownIconClick:C.DROPDOWN_ICON_CLICK,onDropdownMenuClear:C.DROPDOWN_MENU_CLEAR,onTreeHierarchyStateChange:C.TREE_HIERARCHY_STATE_CHANGE,onShowMenu:C.SHOW_MENU,onHideMenu:C.HIDE_MENU,onIconClick:C.ICON_CLICK,onLegendItemClick:C.LEGEND_ITEM_CLICK,onLegendItemHover:C.LEGEND_ITEM_HOVER,onLegendItemUnHover:C.LEGEND_ITEM_UNHOVER,onLegendChange:C.LEGEND_CHANGE,onMouseEnterAxis:C.MOUSEENTER_AXIS,onMouseLeaveAxis:C.MOUSELEAVE_AXIS,onCheckboxStateChange:C.CHECKBOX_STATE_CHANGE,onRadioStateChange:C.RADIO_STATE_CHANGE,onAfterRender:C.AFTER_RENDER,onInitialized:C.INITIALIZED,onPivotSortClick:C.PIVOT_SORT_CLICK,onDrillMenuClick:C.DRILLMENU_CLICK,onVChartEventType:C.VCHART_EVENT_TYPE,onChangeCellValue:C.CHANGE_CELL_VALUE,onMousedownFillHandle:C.MOUSEDOWN_FILL_HANDLE,onDragFillHandleEnd:C.DRAG_FILL_HANDLE_END,onDblclickFillHandle:C.DBLCLICK_FILL_HANDLE,onScrollVerticalEnd:C.SCROLL_VERTICAL_END,onScrollHorizontalEnd:C.SCROLL_HORIZONTAL_END,onChangCellValue:C.CHANGE_CELL_VALUE},h=Object.keys(y);var E=n.defineComponent({__name:"base-table",props:{type:{type:String,required:!1},options:{type:null,required:!1},records:{type:Array,required:!1},width:{type:[Number,String],required:!1,default:"100%"},height:{type:[Number,String],required:!1,default:"100%"},onReady:{type:Function,required:!1},onError:{type:Function,required:!1},keepColumnWidthChange:{type:Boolean,required:!1},onClickCell:{type:null,required:!1},onDblClickCell:{type:null,required:!1},onMouseDownCell:{type:null,required:!1},onMouseUpCell:{type:null,required:!1},onSelectedCell:{type:null,required:!1},onKeyDown:{type:null,required:!1},onMouseEnterTable:{type:null,required:!1},onMouseLeaveTable:{type:null,required:!1},onMouseDownTable:{type:null,required:!1},onMouseMoveCell:{type:null,required:!1},onMouseEnterCell:{type:null,required:!1},onMouseLeaveCell:{type:null,required:!1},onContextMenuCell:{type:null,required:!1},onResizeColumn:{type:null,required:!1},onResizeColumnEnd:{type:null,required:!1},onChangeHeaderPosition:{type:null,required:!1},onChangeHeaderPositionStart:{type:null,required:!1},onChangeHeaderPositionFail:{type:null,required:!1},onSortClick:{type:null,required:!1},onFreezeClick:{type:null,required:!1},onScroll:{type:null,required:!1},onDropdownMenuClick:{type:null,required:!1},onMouseOverChartSymbol:{type:null,required:!1},onDragSelectEnd:{type:null,required:!1},onDropdownIconClick:{type:null,required:!1},onDropdownMenuClear:{type:null,required:!1},onTreeHierarchyStateChange:{type:null,required:!1},onShowMenu:{type:null,required:!1},onHideMenu:{type:null,required:!1},onIconClick:{type:null,required:!1},onLegendItemClick:{type:null,required:!1},onLegendItemHover:{type:null,required:!1},onLegendItemUnHover:{type:null,required:!1},onLegendChange:{type:null,required:!1},onMouseEnterAxis:{type:null,required:!1},onMouseLeaveAxis:{type:null,required:!1},onCheckboxStateChange:{type:null,required:!1},onRadioStateChange:{type:null,required:!1},onAfterRender:{type:null,required:!1},onInitialized:{type:null,required:!1},onPivotSortClick:{type:null,required:!1},onDrillMenuClick:{type:null,required:!1},onVChartEventType:{type:null,required:!1},onChangeCellValue:{type:null,required:!1},onMousedownFillHandle:{type:null,required:!1},onDragFillHandleEnd:{type:null,required:!1},onDblclickFillHandle:{type:null,required:!1},onScrollVerticalEnd:{type:null,required:!1},onScrollHorizontalEnd:{type:null,required:!1}},emits:h,setup(e,{expose:t,emit:r}){const l=e,i=n.ref(null),u=n.shallowRef(null),a=n.ref(new Map),s=n.ref([]),c=n.ref([]);t({vTableInstance:u});const d=n.computed((()=>"number"==typeof l.width?`${l.width}px`:l.width)),p=n.computed((()=>"number"==typeof l.height?`${l.height}px`:l.height)),C=r,E=(e,o)=>{const n=new e(i.value,o);u.value=n,a.value.clear(),s.value=[],c.value=[],n.on("resize_column_end",(e=>{if(!l.keepColumnWidthChange)return;const{col:o,colWidths:t}=e,r=t[o];if(n.isPivotTable()){const e=n.getCellHeaderPaths(o,n.columnHeaderLevelCount);let t=null;t="rowHeader"===e.cellLocation?e.rowHeaderPaths:e.colHeaderPaths;let l=!1;for(let e=0;e<s.value.length;e++){const o=s.value[e];JSON.stringify(o.dimensions)===JSON.stringify(t)&&(o.width=r,l=!0)}l||s.value.push({dimensions:t,width:r})}else{const e=n.getBodyColumnDefine(o,0);e?.key&&a.value.set(e.key,r)}}))},m=()=>{if(!i.value)return;u.value&&u.value.release();const e=()=>void 0!==l.records&&null!==l.records&&l.records.length>0?l.records:l.options.records;try{switch(l.type){case"list":E(o.ListTable,{...l.options,records:e()});break;case"pivot":E(o.PivotTable,{...l.options,records:e()});break;case"chart":E(o.PivotChart,{...l.options,records:e()})}n=u.value,h.forEach((e=>{n.on(y[e],(o=>{C(e,o)}))})),l.onReady?.(u.value,!0)}catch(e){l.onError?.(e)}var n},f=e=>{if(u.value)try{if(l.keepColumnWidthChange){const o=function(e,o,n){if(n.isPivotTable())return o;const t=[];return e.forEach(((e,o)=>{t.push({key:o,width:e})})),t}(a.value,s.value,u.value);e={...e,columnWidthConfig:o,columnWidthConfigForRowHeader:o}}switch(l.type){case"list":u.value instanceof o.ListTable&&u.value.updateOption(e);break;case"pivot":u.value instanceof o.PivotTable&&u.value.updateOption(e);break;case"chart":u.value instanceof o.PivotChart&&u.value.updateOption(e)}}catch(e){l.onError?.(e)}};return n.onMounted(m),n.onBeforeUnmount((()=>u.value?.release())),n.watch((()=>l.options),(e=>{u.value?f(e):m()})),n.watch((()=>l.records),((e,o)=>{u.value?f({...l.options,records:e}):m()}),{deep:!0}),(e,o)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"vTableContainer",ref:i,style:n.normalizeStyle([{width:d.value,height:p.value},{position:"relative"}])},null,4))}}),m=n.defineComponent({__name:"list-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:o}){const t=e,r=n.ref(null),l=n.useSlots(),i=n.computed((()=>{const e=d(a(l.default?.()||[]));return p(t.options,e)}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(E,n.mergeProps({type:"list",options:i.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),f=n.defineComponent({__name:"pivot-table",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),i=n.computed((()=>{const e=c(a(l.default?.()||[]));return p(t.options,e)}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(E,n.mergeProps({type:"pivot",options:i.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}}),v=n.defineComponent({__name:"pivot-chart",props:{options:{type:Object,required:!0},records:{type:Array,required:!1},width:{type:[String,Number],required:!1},height:{type:[String,Number],required:!1}},setup(e,{expose:o}){const t=e,r=n.shallowRef(null),l=n.useSlots(),i=n.computed((()=>{const e=c(a(l.default?.()||[]));return p(t.options,e)}));return o({vTableInstance:n.computed((()=>r.value?.vTableInstance||null))}),(e,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(E,n.mergeProps({type:"chart",options:i.value,records:e.records,width:e.width,height:e.height,ref_key:"baseTableRef",ref:r},e.$attrs),null,16,["options","records","width","height"]),n.renderSlot(e.$slots,"default")],64))}});function T(e){return null}function L(e){return null}function g(e){return null}function b(e){return null}function _(e){return null}function w(e){return null}function S(e){return null}function H(e){return null}function O(e){return null}function q(){return null}function M(){return null}function I(){return null}function D(e){return null}function N(e){return null}function R(e){return null}T.symbol="ListColumn",L.symbol="PivotColumnDimension",g.symbol="PivotRowDimension",b.symbol="PivotColumnHeaderTitle",_.symbol="PivotRowHeaderTitle",w.symbol="PivotIndicator",S.symbol="PivotCorner",H.symbol="Menu",O.symbol="Tooltip",q.symbol="Group",M.symbol="Image",I.symbol="Text",D.symbol="Tag",N.symbol="Radio",R.symbol="CheckBox";e.VTable=l,Object.defineProperty(e,"register",{enumerable:!0,get:function(){return o.register}}),e.CheckBox=R,e.Group=q,e.Image=M,e.ListColumn=T,e.ListTable=m,e.Menu=H,e.PivotChart=v,e.PivotColumnDimension=L,e.PivotColumnHeaderTitle=b,e.PivotCorner=S,e.PivotIndicator=w,e.PivotRowDimension=g,e.PivotRowHeaderTitle=_,e.PivotTable=f,e.Radio=N,e.Tag=D,e.Text=I,e.Tooltip=O,e.registerChartModule=(e,o)=>{l.register.chartModule(e,o)},e.version="1.16.1"}));
|
package/es/index.d.ts
CHANGED
package/es/index.js
CHANGED
|
@@ -21,6 +21,6 @@ export { default as Tag } from './components/custom/tag.js';
|
|
|
21
21
|
export { default as Radio } from './components/custom/radio.js';
|
|
22
22
|
export { default as CheckBox } from './components/custom/checkBox.js';
|
|
23
23
|
|
|
24
|
-
const version = "1.16.
|
|
24
|
+
const version = "1.16.1";
|
|
25
25
|
|
|
26
26
|
export { version };
|
|
@@ -10,6 +10,7 @@ export interface BaseTableProps extends EventsProps {
|
|
|
10
10
|
height?: number | string;
|
|
11
11
|
onReady?: (instance: IVTable, isInitial: boolean) => void;
|
|
12
12
|
onError?: (err: Error) => void;
|
|
13
|
+
keepColumnWidthChange?: boolean;
|
|
13
14
|
}
|
|
14
15
|
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
16
|
type: {
|
|
@@ -42,6 +43,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
42
43
|
type: FunctionConstructor;
|
|
43
44
|
required: false;
|
|
44
45
|
};
|
|
46
|
+
keepColumnWidthChange: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
required: false;
|
|
49
|
+
};
|
|
45
50
|
onClickCell: {
|
|
46
51
|
type: any;
|
|
47
52
|
required: false;
|
|
@@ -271,6 +276,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
271
276
|
type: FunctionConstructor;
|
|
272
277
|
required: false;
|
|
273
278
|
};
|
|
279
|
+
keepColumnWidthChange: {
|
|
280
|
+
type: BooleanConstructor;
|
|
281
|
+
required: false;
|
|
282
|
+
};
|
|
274
283
|
onClickCell: {
|
|
275
284
|
type: any;
|
|
276
285
|
required: false;
|
|
@@ -473,6 +482,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
473
482
|
options: any;
|
|
474
483
|
width: string | number;
|
|
475
484
|
height: string | number;
|
|
485
|
+
keepColumnWidthChange: boolean;
|
|
476
486
|
onClickCell: any;
|
|
477
487
|
onDblClickCell: any;
|
|
478
488
|
onMouseDownCell: any;
|
|
@@ -12,6 +12,7 @@ var _sfc_main = defineComponent({
|
|
|
12
12
|
height: { type: [Number, String], required: false, default: '100%' },
|
|
13
13
|
onReady: { type: Function, required: false },
|
|
14
14
|
onError: { type: Function, required: false },
|
|
15
|
+
keepColumnWidthChange: { type: Boolean, required: false },
|
|
15
16
|
onClickCell: { type: null, required: false },
|
|
16
17
|
onDblClickCell: { type: null, required: false },
|
|
17
18
|
onMouseDownCell: { type: null, required: false },
|
|
@@ -67,6 +68,9 @@ var _sfc_main = defineComponent({
|
|
|
67
68
|
const props = __props;
|
|
68
69
|
const vTableContainer = ref(null);
|
|
69
70
|
const vTableInstance = shallowRef(null);
|
|
71
|
+
const columnWidths = ref(new Map());
|
|
72
|
+
const pivotColumnWidths = ref([]);
|
|
73
|
+
const pivotHeaderColumnWidths = ref([]);
|
|
70
74
|
__expose({ vTableInstance });
|
|
71
75
|
const containerWidth = computed(() => (typeof props.width === 'number' ? `${props.width}px` : props.width));
|
|
72
76
|
const containerHeight = computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height));
|
|
@@ -80,7 +84,45 @@ var _sfc_main = defineComponent({
|
|
|
80
84
|
});
|
|
81
85
|
};
|
|
82
86
|
const createTableInstance = (Type, options) => {
|
|
83
|
-
|
|
87
|
+
const vtable = new Type(vTableContainer.value, options);
|
|
88
|
+
vTableInstance.value = vtable;
|
|
89
|
+
columnWidths.value.clear();
|
|
90
|
+
pivotColumnWidths.value = [];
|
|
91
|
+
pivotHeaderColumnWidths.value = [];
|
|
92
|
+
vtable.on('resize_column_end', (args) => {
|
|
93
|
+
if (!props.keepColumnWidthChange) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const { col, colWidths } = args;
|
|
97
|
+
const width = colWidths[col];
|
|
98
|
+
if (vtable.isPivotTable()) {
|
|
99
|
+
const path = vtable.getCellHeaderPaths(col, vtable.columnHeaderLevelCount);
|
|
100
|
+
let dimensions = null;
|
|
101
|
+
if (path.cellLocation === 'rowHeader') {
|
|
102
|
+
dimensions = path.rowHeaderPaths;
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
dimensions = path.colHeaderPaths;
|
|
106
|
+
}
|
|
107
|
+
let found = false;
|
|
108
|
+
for (let i = 0; i < pivotColumnWidths.value.length; i++) {
|
|
109
|
+
const item = pivotColumnWidths.value[i];
|
|
110
|
+
if (JSON.stringify(item.dimensions) === JSON.stringify(dimensions)) {
|
|
111
|
+
item.width = width;
|
|
112
|
+
found = true;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
if (!found) {
|
|
116
|
+
pivotColumnWidths.value.push({ dimensions, width });
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
const define = vtable.getBodyColumnDefine(col, 0);
|
|
121
|
+
if (define === null || define === void 0 ? void 0 : define.key) {
|
|
122
|
+
columnWidths.value.set(define.key, width);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
});
|
|
84
126
|
};
|
|
85
127
|
const createVTable = () => {
|
|
86
128
|
var _a, _b;
|
|
@@ -120,6 +162,10 @@ var _sfc_main = defineComponent({
|
|
|
120
162
|
return;
|
|
121
163
|
}
|
|
122
164
|
try {
|
|
165
|
+
if (props.keepColumnWidthChange) {
|
|
166
|
+
const columnWidthConfig = updateWidthCache(columnWidths.value, pivotColumnWidths.value, vTableInstance.value);
|
|
167
|
+
newOptions = Object.assign(Object.assign({}, newOptions), { columnWidthConfig: columnWidthConfig, columnWidthConfigForRowHeader: columnWidthConfig });
|
|
168
|
+
}
|
|
123
169
|
switch (props.type) {
|
|
124
170
|
case 'list':
|
|
125
171
|
if (vTableInstance.value instanceof ListTable) {
|
|
@@ -160,6 +206,19 @@ var _sfc_main = defineComponent({
|
|
|
160
206
|
createVTable();
|
|
161
207
|
}
|
|
162
208
|
}, { deep: true });
|
|
209
|
+
function updateWidthCache(columnWidths, pivotColumnWidths, table) {
|
|
210
|
+
if (table.isPivotTable()) {
|
|
211
|
+
return pivotColumnWidths;
|
|
212
|
+
}
|
|
213
|
+
const columnWidthConfig = [];
|
|
214
|
+
columnWidths.forEach((width, key) => {
|
|
215
|
+
columnWidthConfig.push({
|
|
216
|
+
key,
|
|
217
|
+
width
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
return columnWidthConfig;
|
|
221
|
+
}
|
|
163
222
|
return (_ctx, _cache) => {
|
|
164
223
|
return (openBlock(), createElementBlock("div", {
|
|
165
224
|
ref_key: "vTableContainer",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vue-vtable",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.1",
|
|
4
4
|
"description": "The vue version of VTable",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@visactor/
|
|
47
|
-
"@visactor/
|
|
46
|
+
"@visactor/vutils": "~0.19.1",
|
|
47
|
+
"@visactor/vtable": "1.16.1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@arco-design/web-vue": "^2.11.0",
|
|
@@ -87,9 +87,9 @@
|
|
|
87
87
|
"axios": "^1.4.0",
|
|
88
88
|
"eslint-plugin-vue": "^9.26.0",
|
|
89
89
|
"vue-eslint-parser": "^9.4.2",
|
|
90
|
+
"@internal/ts-config": "0.0.1",
|
|
90
91
|
"@internal/bundler": "0.0.1",
|
|
91
|
-
"@internal/eslint-config": "0.0.1"
|
|
92
|
-
"@internal/ts-config": "0.0.1"
|
|
92
|
+
"@internal/eslint-config": "0.0.1"
|
|
93
93
|
},
|
|
94
94
|
"scripts": {
|
|
95
95
|
"start": "vite ./demo",
|