stk-table-vue 0.6.7 → 0.6.9
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/README.md +0 -10
- package/lib/src/StkTable/StkTable.vue.d.ts +695 -506
- package/lib/src/StkTable/types/index.d.ts +1 -0
- package/lib/src/StkTable/useAutoResize.d.ts +1 -0
- package/lib/src/StkTable/useColResize.d.ts +1 -0
- package/lib/src/StkTable/useFixedCol.d.ts +1 -0
- package/lib/src/StkTable/useFixedStyle.d.ts +1 -0
- package/lib/src/StkTable/useGetFixedColPosition.d.ts +1 -0
- package/lib/src/StkTable/useHighlight.d.ts +1 -0
- package/lib/src/StkTable/useKeyboardArrowScroll.d.ts +1 -0
- package/lib/src/StkTable/useThDrag.d.ts +1 -0
- package/lib/src/StkTable/useTrDrag.d.ts +1 -0
- package/lib/src/StkTable/useVirtualScroll.d.ts +1 -0
- package/lib/src/StkTable/utils/constRefUtils.d.ts +1 -0
- package/lib/src/StkTable/utils/index.d.ts +1 -0
- package/lib/src/StkTable/utils/useTriggerRef.d.ts +1 -0
- package/lib/stk-table-vue.js +2374 -2363
- package/lib/style.css +395 -386
- package/package.json +2 -2
- package/src/StkTable/StkTable.vue +24 -9
- package/src/StkTable/style.less +34 -36
package/lib/stk-table-vue.js
CHANGED
|
@@ -1,2363 +1,2374 @@
|
|
|
1
|
-
import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
|
|
2
|
-
import { interpolateRgb } from "d3-interpolate";
|
|
3
|
-
const _export_sfc = (sfc, props) => {
|
|
4
|
-
const target = sfc.__vccOpts || sfc;
|
|
5
|
-
for (const [key, val] of props) {
|
|
6
|
-
target[key] = val;
|
|
7
|
-
}
|
|
8
|
-
return target;
|
|
9
|
-
};
|
|
10
|
-
const _sfc_main$2 = {};
|
|
11
|
-
const _hoisted_1$2 = {
|
|
12
|
-
class: "drag-row-handle",
|
|
13
|
-
draggable: "true"
|
|
14
|
-
};
|
|
15
|
-
function _sfc_render$1(_ctx, _cache) {
|
|
16
|
-
return openBlock(), createElementBlock("span", _hoisted_1$2, _cache[0] || (_cache[0] = [
|
|
17
|
-
createElementVNode("svg", {
|
|
18
|
-
viewBox: "0 0 1024 1024",
|
|
19
|
-
width: "16",
|
|
20
|
-
height: "16",
|
|
21
|
-
fill: "currentColor"
|
|
22
|
-
}, [
|
|
23
|
-
createElementVNode("path", { d: "M640 853.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3zM384 341.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z" })
|
|
24
|
-
], -1)
|
|
25
|
-
]));
|
|
26
|
-
}
|
|
27
|
-
const DragHandle = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
|
|
28
|
-
const _sfc_main$1 = {};
|
|
29
|
-
const _hoisted_1$1 = {
|
|
30
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
31
|
-
width: "16px",
|
|
32
|
-
height: "16px",
|
|
33
|
-
viewBox: "0 0 16 16"
|
|
34
|
-
};
|
|
35
|
-
function _sfc_render(_ctx, _cache) {
|
|
36
|
-
return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
|
|
37
|
-
createElementVNode("polygon", {
|
|
38
|
-
class: "arrow-up",
|
|
39
|
-
fill: "#757699",
|
|
40
|
-
points: "8 2 4.8 6 11.2 6"
|
|
41
|
-
}, null, -1),
|
|
42
|
-
createElementVNode("polygon", {
|
|
43
|
-
class: "arrow-down",
|
|
44
|
-
transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
|
|
45
|
-
points: "8 10 4.8 14 11.2 14"
|
|
46
|
-
}, null, -1)
|
|
47
|
-
]));
|
|
48
|
-
}
|
|
49
|
-
const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
|
|
50
|
-
function isEmptyValue(val, isNumber) {
|
|
51
|
-
let isEmpty = val === null || val === void 0;
|
|
52
|
-
if (isNumber) {
|
|
53
|
-
isEmpty = isEmpty || typeof val === "boolean" || Number.isNaN(+val);
|
|
54
|
-
}
|
|
55
|
-
return isEmpty;
|
|
56
|
-
}
|
|
57
|
-
function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {}) {
|
|
58
|
-
const { dataIndex, order } = sortState;
|
|
59
|
-
sortConfig = { emptyToBottom: false, ...sortConfig };
|
|
60
|
-
let { sortType } = sortState;
|
|
61
|
-
if (!sortType) sortType = typeof newItem[dataIndex];
|
|
62
|
-
const data = [...targetArray];
|
|
63
|
-
if (!order || !data.length) {
|
|
64
|
-
data.unshift(newItem);
|
|
65
|
-
return data;
|
|
66
|
-
}
|
|
67
|
-
if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
|
|
68
|
-
data.push(newItem);
|
|
69
|
-
}
|
|
70
|
-
const isNumber = sortType === "number";
|
|
71
|
-
const targetVal = newItem[dataIndex];
|
|
72
|
-
const sIndex = binarySearch(data, (midIndex) => {
|
|
73
|
-
const midVal = data[midIndex][dataIndex];
|
|
74
|
-
const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
|
|
75
|
-
return order === "asc" ? compareRes : -compareRes;
|
|
76
|
-
});
|
|
77
|
-
data.splice(sIndex, 0, newItem);
|
|
78
|
-
return data;
|
|
79
|
-
}
|
|
80
|
-
function binarySearch(searchArray, compareCallback) {
|
|
81
|
-
let sIndex = 0;
|
|
82
|
-
let eIndex = searchArray.length - 1;
|
|
83
|
-
while (sIndex <= eIndex) {
|
|
84
|
-
const midIndex = Math.floor((sIndex + eIndex) / 2);
|
|
85
|
-
const compareRes = compareCallback(midIndex);
|
|
86
|
-
if (compareRes === 0) {
|
|
87
|
-
sIndex = midIndex;
|
|
88
|
-
break;
|
|
89
|
-
} else if (compareRes < 0) {
|
|
90
|
-
sIndex = midIndex + 1;
|
|
91
|
-
} else {
|
|
92
|
-
eIndex = midIndex - 1;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
return sIndex;
|
|
96
|
-
}
|
|
97
|
-
function strCompare(a, b, isNumber, localeCompare = false) {
|
|
98
|
-
let _a = a;
|
|
99
|
-
let _b = b;
|
|
100
|
-
if (isNumber) {
|
|
101
|
-
_a = +a;
|
|
102
|
-
_b = +b;
|
|
103
|
-
} else if (localeCompare) {
|
|
104
|
-
return String(a).localeCompare(b);
|
|
105
|
-
}
|
|
106
|
-
if (_a > _b) return 1;
|
|
107
|
-
else if (_a === _b) return 0;
|
|
108
|
-
else return -1;
|
|
109
|
-
}
|
|
110
|
-
function separatedData(sortOption, targetDataSource, isNumber) {
|
|
111
|
-
const emptyArr = [];
|
|
112
|
-
const valueArr = [];
|
|
113
|
-
for (let i = 0; i < targetDataSource.length; i++) {
|
|
114
|
-
const row = targetDataSource[i];
|
|
115
|
-
const sortField = sortOption.sortField || sortOption.dataIndex;
|
|
116
|
-
const isEmpty = isEmptyValue(row == null ? void 0 : row[sortField], isNumber);
|
|
117
|
-
if (isEmpty) {
|
|
118
|
-
emptyArr.push(row);
|
|
119
|
-
} else {
|
|
120
|
-
valueArr.push(row);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
return [valueArr, emptyArr];
|
|
124
|
-
}
|
|
125
|
-
function tableSort(sortOption, order, dataSource, sortConfig = {}) {
|
|
126
|
-
if (!(dataSource == null ? void 0 : dataSource.length) || !sortOption) return dataSource || [];
|
|
127
|
-
sortConfig = { emptyToBottom: false, ...sortConfig };
|
|
128
|
-
let targetDataSource = [...dataSource];
|
|
129
|
-
let sortField = sortOption.sortField || sortOption.dataIndex;
|
|
130
|
-
if (!order && sortConfig.defaultSort) {
|
|
131
|
-
order = sortConfig.defaultSort.order;
|
|
132
|
-
sortField = sortConfig.defaultSort.dataIndex;
|
|
133
|
-
}
|
|
134
|
-
if (typeof sortOption.sorter === "function") {
|
|
135
|
-
const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
|
|
136
|
-
if (customSorterData) targetDataSource = customSorterData;
|
|
137
|
-
} else if (order) {
|
|
138
|
-
let { sortType } = sortOption;
|
|
139
|
-
if (!sortType) sortType = typeof dataSource[0][sortField];
|
|
140
|
-
const isNumber = sortType === "number";
|
|
141
|
-
const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, isNumber);
|
|
142
|
-
if (order === "asc") {
|
|
143
|
-
valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
|
|
144
|
-
} else {
|
|
145
|
-
valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
|
|
146
|
-
}
|
|
147
|
-
if (order === "desc" || sortConfig.emptyToBottom) {
|
|
148
|
-
targetDataSource = [...valueArr, ...emptyArr];
|
|
149
|
-
} else {
|
|
150
|
-
targetDataSource = [...emptyArr, ...valueArr];
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
return targetDataSource;
|
|
154
|
-
}
|
|
155
|
-
function howDeepTheHeader(arr, level = 0) {
|
|
156
|
-
const levels = [level];
|
|
157
|
-
arr.forEach((item) => {
|
|
158
|
-
var _a;
|
|
159
|
-
if ((_a = item.children) == null ? void 0 : _a.length) {
|
|
160
|
-
levels.push(howDeepTheHeader(item.children, level + 1));
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
return Math.max(...levels);
|
|
164
|
-
}
|
|
165
|
-
function transformWidthToStr(width) {
|
|
166
|
-
if (width === void 0) return;
|
|
167
|
-
const numberWidth = Number(width);
|
|
168
|
-
return width + (!Number.isNaN(numberWidth) ? "px" : "");
|
|
169
|
-
}
|
|
170
|
-
function getBrowsersVersion(browserName) {
|
|
171
|
-
try {
|
|
172
|
-
const reg = new RegExp(`${browserName}/\\d+`, "i");
|
|
173
|
-
const userAgent = navigator.userAgent.match(reg);
|
|
174
|
-
if (userAgent) {
|
|
175
|
-
return +userAgent[0].split("/")[1];
|
|
176
|
-
}
|
|
177
|
-
} catch (e) {
|
|
178
|
-
console.error("Cannot get version", e);
|
|
179
|
-
}
|
|
180
|
-
return 100;
|
|
181
|
-
}
|
|
182
|
-
const DEFAULT_COL_WIDTH = "100";
|
|
183
|
-
const DEFAULT_TABLE_HEIGHT = 100;
|
|
184
|
-
const DEFAULT_TABLE_WIDTH = 200;
|
|
185
|
-
const DEFAULT_ROW_HEIGHT = 28;
|
|
186
|
-
const HIGHLIGHT_COLOR = {
|
|
187
|
-
light: { from: "#71a2fd", to: "#fff" },
|
|
188
|
-
dark: { from: "#1e4c99", to: "#181c21" }
|
|
189
|
-
};
|
|
190
|
-
const HIGHLIGHT_DURATION = 2e3;
|
|
191
|
-
const HIGHLIGHT_FREQ = 1e3 / 30;
|
|
192
|
-
const HIGHLIGHT_ROW_CLASS = "highlight-row";
|
|
193
|
-
const HIGHLIGHT_CELL_CLASS = "highlight-cell";
|
|
194
|
-
const _chromeVersion = getBrowsersVersion("chrome");
|
|
195
|
-
const _firefoxVersion = getBrowsersVersion("firefox");
|
|
196
|
-
const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
|
|
197
|
-
const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
|
|
198
|
-
const STK_ID_PREFIX = "stk";
|
|
199
|
-
const EXPANDED_ROW_KEY_PREFIX = "expanded-";
|
|
200
|
-
var TagType = /* @__PURE__ */ ((TagType2) => {
|
|
201
|
-
TagType2[TagType2["TH"] = 0] = "TH";
|
|
202
|
-
TagType2[TagType2["TD"] = 1] = "TD";
|
|
203
|
-
return TagType2;
|
|
204
|
-
})(TagType || {});
|
|
205
|
-
function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }) {
|
|
206
|
-
let resizeObserver = null;
|
|
207
|
-
let isObserved = false;
|
|
208
|
-
watch(
|
|
209
|
-
() => props.virtual,
|
|
210
|
-
(v) => {
|
|
211
|
-
if (v) initResizeObserver();
|
|
212
|
-
else removeResizeObserver();
|
|
213
|
-
}
|
|
214
|
-
);
|
|
215
|
-
watch(
|
|
216
|
-
() => props.virtualX,
|
|
217
|
-
(v) => {
|
|
218
|
-
if (v) initResizeObserver();
|
|
219
|
-
else removeResizeObserver();
|
|
220
|
-
}
|
|
221
|
-
);
|
|
222
|
-
onMounted(() => {
|
|
223
|
-
if (props.virtual || props.virtualX) {
|
|
224
|
-
initResizeObserver();
|
|
225
|
-
}
|
|
226
|
-
});
|
|
227
|
-
onBeforeUnmount(() => {
|
|
228
|
-
removeResizeObserver();
|
|
229
|
-
});
|
|
230
|
-
function initResizeObserver() {
|
|
231
|
-
if (isObserved) {
|
|
232
|
-
removeResizeObserver();
|
|
233
|
-
}
|
|
234
|
-
if (window.ResizeObserver) {
|
|
235
|
-
if (!tableContainerRef.value) {
|
|
236
|
-
const watchDom = watch(
|
|
237
|
-
() => tableContainerRef,
|
|
238
|
-
() => {
|
|
239
|
-
initResizeObserver();
|
|
240
|
-
watchDom();
|
|
241
|
-
}
|
|
242
|
-
);
|
|
243
|
-
return;
|
|
244
|
-
}
|
|
245
|
-
resizeObserver = new ResizeObserver(resizeCallback);
|
|
246
|
-
resizeObserver.observe(tableContainerRef.value);
|
|
247
|
-
} else {
|
|
248
|
-
window.addEventListener("resize", resizeCallback);
|
|
249
|
-
}
|
|
250
|
-
isObserved = true;
|
|
251
|
-
}
|
|
252
|
-
function removeResizeObserver() {
|
|
253
|
-
if (!isObserved) return;
|
|
254
|
-
if (resizeObserver) {
|
|
255
|
-
resizeObserver.disconnect();
|
|
256
|
-
resizeObserver = null;
|
|
257
|
-
} else {
|
|
258
|
-
window.removeEventListener("resize", resizeCallback);
|
|
259
|
-
}
|
|
260
|
-
isObserved = false;
|
|
261
|
-
}
|
|
262
|
-
let debounceTime = 0;
|
|
263
|
-
function resizeCallback() {
|
|
264
|
-
if (debounceTime) {
|
|
265
|
-
window.clearTimeout(debounceTime);
|
|
266
|
-
}
|
|
267
|
-
debounceTime = window.setTimeout(() => {
|
|
268
|
-
if (props.autoResize) {
|
|
269
|
-
initVirtualScroll();
|
|
270
|
-
if (typeof props.autoResize === "function") {
|
|
271
|
-
props.autoResize();
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
debounceTime = 0;
|
|
275
|
-
}, debounceMs);
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
function getColWidth(col) {
|
|
279
|
-
const val = (col == null ? void 0 : col.minWidth) ?? (col == null ? void 0 : col.width) ?? DEFAULT_COL_WIDTH;
|
|
280
|
-
if (typeof val === "number") {
|
|
281
|
-
return Math.floor(val);
|
|
282
|
-
}
|
|
283
|
-
return parseInt(val);
|
|
284
|
-
}
|
|
285
|
-
function getCalculatedColWidth(col) {
|
|
286
|
-
return (col == null ? void 0 : col.__WIDTH__) ?? +DEFAULT_COL_WIDTH;
|
|
287
|
-
}
|
|
288
|
-
function createStkTableId() {
|
|
289
|
-
let id = window.__STK_TB_ID_COUNT__;
|
|
290
|
-
if (!id) id = 0;
|
|
291
|
-
id += 1;
|
|
292
|
-
window.__STK_TB_ID_COUNT__ = id;
|
|
293
|
-
return STK_ID_PREFIX + id.toString(36);
|
|
294
|
-
}
|
|
295
|
-
function useColResize({
|
|
296
|
-
tableContainerRef,
|
|
297
|
-
tableHeaderLast,
|
|
298
|
-
colResizeIndicatorRef,
|
|
299
|
-
props,
|
|
300
|
-
emits,
|
|
301
|
-
colKeyGen,
|
|
302
|
-
fixedCols
|
|
303
|
-
}) {
|
|
304
|
-
const isColResizing = ref(false);
|
|
305
|
-
let colResizeState = {
|
|
306
|
-
currentCol: null,
|
|
307
|
-
lastCol: null,
|
|
308
|
-
startX: 0,
|
|
309
|
-
startOffsetTableX: 0,
|
|
310
|
-
revertMoveX: false
|
|
311
|
-
};
|
|
312
|
-
const colResizeOn = computed(() => {
|
|
313
|
-
if (Object.prototype.toString.call(props.colResizable) === "[object Object]") {
|
|
314
|
-
return (col) => !props.colResizable.disabled(col);
|
|
315
|
-
}
|
|
316
|
-
return () => props.colResizable;
|
|
317
|
-
});
|
|
318
|
-
onMounted(() => {
|
|
319
|
-
initColResizeEvent();
|
|
320
|
-
});
|
|
321
|
-
onBeforeUnmount(() => {
|
|
322
|
-
clearColResizeEvent();
|
|
323
|
-
});
|
|
324
|
-
function initColResizeEvent() {
|
|
325
|
-
window.addEventListener("mousemove", onThResizeMouseMove);
|
|
326
|
-
window.addEventListener("mouseup", onThResizeMouseUp);
|
|
327
|
-
}
|
|
328
|
-
function clearColResizeEvent() {
|
|
329
|
-
window.removeEventListener("mousemove", onThResizeMouseMove);
|
|
330
|
-
window.removeEventListener("mouseup", onThResizeMouseUp);
|
|
331
|
-
}
|
|
332
|
-
function onThResizeMouseDown(e, col, leftHandle = false) {
|
|
333
|
-
if (!tableContainerRef.value) return;
|
|
334
|
-
e.stopPropagation();
|
|
335
|
-
e.preventDefault();
|
|
336
|
-
const { clientX } = e;
|
|
337
|
-
const { scrollLeft, scrollTop } = tableContainerRef.value;
|
|
338
|
-
const { left } = tableContainerRef.value.getBoundingClientRect();
|
|
339
|
-
const tableHeaderLastValue = tableHeaderLast.value;
|
|
340
|
-
let revertMoveX = false;
|
|
341
|
-
const colIndex = tableHeaderLastValue.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
|
|
342
|
-
const fixedIndex = fixedCols.value.indexOf(col);
|
|
343
|
-
const isFixed = fixedIndex !== -1;
|
|
344
|
-
if (leftHandle) {
|
|
345
|
-
if (isFixed && col.fixed === "right") {
|
|
346
|
-
revertMoveX = true;
|
|
347
|
-
} else {
|
|
348
|
-
if (colIndex - 1 >= 0) {
|
|
349
|
-
col = tableHeaderLastValue[colIndex - 1];
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
} else {
|
|
353
|
-
if (isFixed && col.fixed === "right") {
|
|
354
|
-
revertMoveX = true;
|
|
355
|
-
col = fixedCols.value[fixedIndex + 1] || col;
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
const offsetTableX = clientX - left + scrollLeft;
|
|
359
|
-
isColResizing.value = true;
|
|
360
|
-
Object.assign(colResizeState, {
|
|
361
|
-
currentCol: col,
|
|
362
|
-
lastCol: findLastChildCol(col),
|
|
363
|
-
startX: clientX,
|
|
364
|
-
startOffsetTableX: offsetTableX,
|
|
365
|
-
revertMoveX
|
|
366
|
-
});
|
|
367
|
-
if (colResizeIndicatorRef.value) {
|
|
368
|
-
const style = colResizeIndicatorRef.value.style;
|
|
369
|
-
style.display = "block";
|
|
370
|
-
style.left = offsetTableX + "px";
|
|
371
|
-
style.top = scrollTop + "px";
|
|
372
|
-
}
|
|
373
|
-
}
|
|
374
|
-
function onThResizeMouseMove(e) {
|
|
375
|
-
if (!isColResizing.value) return;
|
|
376
|
-
e.stopPropagation();
|
|
377
|
-
e.preventDefault();
|
|
378
|
-
const { lastCol, startX, startOffsetTableX } = colResizeState;
|
|
379
|
-
const { clientX } = e;
|
|
380
|
-
let moveX = clientX - startX;
|
|
381
|
-
const currentColWidth = getCalculatedColWidth(lastCol);
|
|
382
|
-
const minWidth = (lastCol == null ? void 0 : lastCol.minWidth) ?? props.colMinWidth;
|
|
383
|
-
if (currentColWidth + moveX < minWidth) {
|
|
384
|
-
moveX = -currentColWidth;
|
|
385
|
-
}
|
|
386
|
-
const offsetTableX = startOffsetTableX + moveX;
|
|
387
|
-
if (!colResizeIndicatorRef.value) return;
|
|
388
|
-
colResizeIndicatorRef.value.style.left = offsetTableX + "px";
|
|
389
|
-
}
|
|
390
|
-
function onThResizeMouseUp(e) {
|
|
391
|
-
if (!isColResizing.value) return;
|
|
392
|
-
const { startX, lastCol, revertMoveX } = colResizeState;
|
|
393
|
-
const { clientX } = e;
|
|
394
|
-
const moveX = revertMoveX ? startX - clientX : clientX - startX;
|
|
395
|
-
let width = getCalculatedColWidth(lastCol) + moveX;
|
|
396
|
-
if (width < props.colMinWidth) width = props.colMinWidth;
|
|
397
|
-
const curCol = tableHeaderLast.value.find((it) => colKeyGen.value(it) === colKeyGen.value(lastCol));
|
|
398
|
-
if (!curCol) return;
|
|
399
|
-
curCol.width = width + "px";
|
|
400
|
-
emits("update:columns", [...props.columns]);
|
|
401
|
-
emits("col-resize", { ...curCol });
|
|
402
|
-
if (colResizeIndicatorRef.value) {
|
|
403
|
-
const style = colResizeIndicatorRef.value.style;
|
|
404
|
-
style.display = "none";
|
|
405
|
-
style.left = "0";
|
|
406
|
-
style.top = "0";
|
|
407
|
-
}
|
|
408
|
-
isColResizing.value = false;
|
|
409
|
-
colResizeState = {
|
|
410
|
-
currentCol: null,
|
|
411
|
-
lastCol: null,
|
|
412
|
-
startX: 0,
|
|
413
|
-
startOffsetTableX: 0,
|
|
414
|
-
revertMoveX: false
|
|
415
|
-
};
|
|
416
|
-
}
|
|
417
|
-
function findLastChildCol(column) {
|
|
418
|
-
var _a;
|
|
419
|
-
if ((_a = column == null ? void 0 : column.children) == null ? void 0 : _a.length) {
|
|
420
|
-
const lastChild = column.children.at(-1);
|
|
421
|
-
return findLastChildCol(lastChild);
|
|
422
|
-
}
|
|
423
|
-
return column;
|
|
424
|
-
}
|
|
425
|
-
return {
|
|
426
|
-
colResizeOn,
|
|
427
|
-
isColResizing,
|
|
428
|
-
onThResizeMouseDown
|
|
429
|
-
};
|
|
430
|
-
}
|
|
431
|
-
function useFixedCol({
|
|
432
|
-
props,
|
|
433
|
-
colKeyGen,
|
|
434
|
-
getFixedColPosition,
|
|
435
|
-
tableHeaders,
|
|
436
|
-
tableHeadersForCalc,
|
|
437
|
-
tableContainerRef
|
|
438
|
-
}) {
|
|
439
|
-
const fixedShadowCols = shallowRef([]);
|
|
440
|
-
const fixedCols = shallowRef([]);
|
|
441
|
-
const fixedColClassMap = computed(() => {
|
|
442
|
-
const colMap = /* @__PURE__ */ new Map();
|
|
443
|
-
const fixedShadowColsValue = fixedShadowCols.value;
|
|
444
|
-
tableHeaders.value.forEach((cols) => {
|
|
445
|
-
cols.forEach((col) => {
|
|
446
|
-
const showShadow = props.fixedColShadow && col.fixed && fixedShadowColsValue.includes(col);
|
|
447
|
-
const classObj = {
|
|
448
|
-
"fixed-cell": col.fixed,
|
|
449
|
-
["fixed-cell--" + col.fixed]: col.fixed,
|
|
450
|
-
"fixed-cell--shadow": showShadow,
|
|
451
|
-
["fixed-cell--active"]: fixedCols.value.includes(col)
|
|
452
|
-
// 表示该列正在被固定
|
|
453
|
-
};
|
|
454
|
-
colMap.set(colKeyGen.value(col), classObj);
|
|
455
|
-
});
|
|
456
|
-
});
|
|
457
|
-
return colMap;
|
|
458
|
-
});
|
|
459
|
-
function updateFixedShadow(virtualScrollX) {
|
|
460
|
-
const fixedColsTemp = [];
|
|
461
|
-
let clientWidth, scrollLeft;
|
|
462
|
-
if (virtualScrollX == null ? void 0 : virtualScrollX.value) {
|
|
463
|
-
const {
|
|
464
|
-
containerWidth: cw,
|
|
465
|
-
/* scrollWidth: sw, */
|
|
466
|
-
scrollLeft: sl
|
|
467
|
-
} = virtualScrollX.value;
|
|
468
|
-
clientWidth = cw;
|
|
469
|
-
scrollLeft = sl;
|
|
470
|
-
} else {
|
|
471
|
-
const {
|
|
472
|
-
clientWidth: cw,
|
|
473
|
-
/* scrollWidth: sw, */
|
|
474
|
-
scrollLeft: sl
|
|
475
|
-
} = tableContainerRef.value;
|
|
476
|
-
clientWidth = cw;
|
|
477
|
-
scrollLeft = sl;
|
|
478
|
-
}
|
|
479
|
-
const leftShadowCol = [];
|
|
480
|
-
const rightShadowCol = [];
|
|
481
|
-
tableHeadersForCalc.value.forEach((row, level) => {
|
|
482
|
-
let left = 0;
|
|
483
|
-
row.forEach((col) => {
|
|
484
|
-
const position = getFixedColPosition.value(col);
|
|
485
|
-
const isFixedLeft = col.fixed === "left";
|
|
486
|
-
const isFixedRight = col.fixed === "right";
|
|
487
|
-
if (isFixedLeft && position + scrollLeft > left) {
|
|
488
|
-
fixedColsTemp.push(col);
|
|
489
|
-
leftShadowCol[level] = col;
|
|
490
|
-
}
|
|
491
|
-
left += getCalculatedColWidth(col);
|
|
492
|
-
if (isFixedRight && scrollLeft + clientWidth - left < position) {
|
|
493
|
-
fixedColsTemp.push(col);
|
|
494
|
-
if (!rightShadowCol[level]) {
|
|
495
|
-
rightShadowCol[level] = col;
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
});
|
|
499
|
-
});
|
|
500
|
-
if (props.fixedColShadow) {
|
|
501
|
-
fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean);
|
|
502
|
-
}
|
|
503
|
-
fixedCols.value = fixedColsTemp;
|
|
504
|
-
}
|
|
505
|
-
return {
|
|
506
|
-
/** 正在被固定的列 */
|
|
507
|
-
fixedCols,
|
|
508
|
-
/** 固定列class */
|
|
509
|
-
fixedColClassMap,
|
|
510
|
-
/** 滚动条变化时,更新需要展示阴影的列 */
|
|
511
|
-
updateFixedShadow
|
|
512
|
-
};
|
|
513
|
-
}
|
|
514
|
-
function useFixedStyle({
|
|
515
|
-
props,
|
|
516
|
-
isRelativeMode,
|
|
517
|
-
getFixedColPosition,
|
|
518
|
-
virtualScroll,
|
|
519
|
-
virtualScrollX,
|
|
520
|
-
virtualX_on,
|
|
521
|
-
virtualX_offsetRight
|
|
522
|
-
}) {
|
|
523
|
-
function getFixedStyle(tagType, col, depth = 0) {
|
|
524
|
-
const { fixed } = col;
|
|
525
|
-
if (tagType === TagType.TD && !fixed) return null;
|
|
526
|
-
const style = {};
|
|
527
|
-
const isFixedLeft = fixed === "left";
|
|
528
|
-
if (tagType === TagType.TH) {
|
|
529
|
-
if (isRelativeMode.value) {
|
|
530
|
-
style.top = virtualScroll.value.scrollTop + "px";
|
|
531
|
-
} else {
|
|
532
|
-
const rowHeight = props.headerRowHeight ?? props.rowHeight;
|
|
533
|
-
style.top = depth * rowHeight + "px";
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
|
|
537
|
-
const scrollRight = scrollWidth - containerWidth - scrollLeft;
|
|
538
|
-
if (fixed === "left" || fixed === "right") {
|
|
539
|
-
if (isRelativeMode.value) {
|
|
540
|
-
if (isFixedLeft) {
|
|
541
|
-
style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + "px";
|
|
542
|
-
} else {
|
|
543
|
-
style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + "px";
|
|
544
|
-
}
|
|
545
|
-
} else {
|
|
546
|
-
const lr = getFixedColPosition.value(col) + "px";
|
|
547
|
-
if (isFixedLeft) {
|
|
548
|
-
style.left = lr;
|
|
549
|
-
} else {
|
|
550
|
-
style.right = lr;
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
return style;
|
|
555
|
-
}
|
|
556
|
-
return getFixedStyle;
|
|
557
|
-
}
|
|
558
|
-
function useGetFixedColPosition({ tableHeadersForCalc, colKeyGen }) {
|
|
559
|
-
const getFixedColPosition = computed(() => {
|
|
560
|
-
const colKeyStore = {};
|
|
561
|
-
const refStore = /* @__PURE__ */ new WeakMap();
|
|
562
|
-
tableHeadersForCalc.value.forEach((cols) => {
|
|
563
|
-
let left = 0;
|
|
564
|
-
let rightStartIndex = 0;
|
|
565
|
-
for (let i = 0; i < cols.length; i++) {
|
|
566
|
-
const item = cols[i];
|
|
567
|
-
if (item.fixed === "left") {
|
|
568
|
-
const colKey = colKeyGen.value(item);
|
|
569
|
-
if (colKey) {
|
|
570
|
-
colKeyStore[colKey] = left;
|
|
571
|
-
} else {
|
|
572
|
-
refStore.set(item, left);
|
|
573
|
-
}
|
|
574
|
-
left += getCalculatedColWidth(item);
|
|
575
|
-
}
|
|
576
|
-
if (!rightStartIndex && item.fixed === "right") {
|
|
577
|
-
rightStartIndex = i;
|
|
578
|
-
}
|
|
579
|
-
}
|
|
580
|
-
let right = 0;
|
|
581
|
-
for (let i = cols.length - 1; i >= rightStartIndex; i--) {
|
|
582
|
-
const item = cols[i];
|
|
583
|
-
const colKey = colKeyGen.value(item);
|
|
584
|
-
if (item.fixed === "right") {
|
|
585
|
-
if (colKey) {
|
|
586
|
-
colKeyStore[colKey] = right;
|
|
587
|
-
} else {
|
|
588
|
-
refStore.set(item, right);
|
|
589
|
-
}
|
|
590
|
-
right += getCalculatedColWidth(item);
|
|
591
|
-
}
|
|
592
|
-
}
|
|
593
|
-
});
|
|
594
|
-
return (col) => {
|
|
595
|
-
const colKey = colKeyGen.value(col);
|
|
596
|
-
return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
|
|
597
|
-
};
|
|
598
|
-
});
|
|
599
|
-
return getFixedColPosition;
|
|
600
|
-
}
|
|
601
|
-
function useHighlight({ props, stkTableId, tableContainerRef }) {
|
|
602
|
-
const config = props.highlightConfig;
|
|
603
|
-
const highlightColor = {
|
|
604
|
-
light: HIGHLIGHT_COLOR.light,
|
|
605
|
-
dark: HIGHLIGHT_COLOR.dark
|
|
606
|
-
};
|
|
607
|
-
const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
|
|
608
|
-
const highlightFrequency = config.fps && config.fps > 0 ? 1e3 / config.fps : null;
|
|
609
|
-
const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
|
|
610
|
-
const highlightFrom = computed(() => highlightColor[props.theme].from);
|
|
611
|
-
const highlightTo = computed(() => highlightColor[props.theme].to);
|
|
612
|
-
const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
|
|
613
|
-
const highlightDimRowsJs = /* @__PURE__ */ new Map();
|
|
614
|
-
let calcHighlightDimLoopJs = false;
|
|
615
|
-
const highlightDimRowsAnimation = /* @__PURE__ */ new Map();
|
|
616
|
-
let calcHighlightDimLoopAnimation = false;
|
|
617
|
-
const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
|
|
618
|
-
const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
|
|
619
|
-
const defaultHighlightDimOption = (() => {
|
|
620
|
-
const keyframe = { backgroundColor: [highlightFrom.value, ""] };
|
|
621
|
-
if (highlightSteps) {
|
|
622
|
-
keyframe.easing = `steps(${highlightSteps})`;
|
|
623
|
-
}
|
|
624
|
-
return { duration: highlightDuration, keyframe };
|
|
625
|
-
})();
|
|
626
|
-
function calcRowHighlightLoop() {
|
|
627
|
-
if (calcHighlightDimLoopAnimation) return;
|
|
628
|
-
calcHighlightDimLoopAnimation = true;
|
|
629
|
-
const recursion = () => {
|
|
630
|
-
window.requestAnimationFrame(
|
|
631
|
-
() => {
|
|
632
|
-
const nowTs = Date.now();
|
|
633
|
-
highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
|
|
634
|
-
const { ts, duration } = store;
|
|
635
|
-
const timeOffset = nowTs - ts;
|
|
636
|
-
if (nowTs - ts < duration) {
|
|
637
|
-
updateRowAnimation(rowKeyValue, store, timeOffset);
|
|
638
|
-
} else {
|
|
639
|
-
highlightDimRowsAnimation.delete(rowKeyValue);
|
|
640
|
-
}
|
|
641
|
-
});
|
|
642
|
-
if (highlightDimRowsAnimation.size > 0) {
|
|
643
|
-
recursion();
|
|
644
|
-
} else {
|
|
645
|
-
calcHighlightDimLoopAnimation = false;
|
|
646
|
-
highlightDimRowsAnimation.clear();
|
|
647
|
-
}
|
|
648
|
-
}
|
|
649
|
-
);
|
|
650
|
-
};
|
|
651
|
-
recursion();
|
|
652
|
-
}
|
|
653
|
-
function calcRowHighlightLoopJs() {
|
|
654
|
-
if (calcHighlightDimLoopJs) return;
|
|
655
|
-
calcHighlightDimLoopJs = true;
|
|
656
|
-
const recursion = () => {
|
|
657
|
-
window.setTimeout(() => {
|
|
658
|
-
const nowTs = Date.now();
|
|
659
|
-
highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
|
|
660
|
-
const progress = (nowTs - highlightStart) / highlightDuration;
|
|
661
|
-
let bgc = "";
|
|
662
|
-
if (0 <= progress && progress <= 1) {
|
|
663
|
-
bgc = highlightInter.value(progress);
|
|
664
|
-
} else {
|
|
665
|
-
highlightDimRowsJs.delete(rowKeyValue);
|
|
666
|
-
}
|
|
667
|
-
updateRowBgcJs(rowKeyValue, bgc);
|
|
668
|
-
});
|
|
669
|
-
if (highlightDimRowsJs.size > 0) {
|
|
670
|
-
recursion();
|
|
671
|
-
} else {
|
|
672
|
-
calcHighlightDimLoopJs = false;
|
|
673
|
-
highlightDimRowsJs.clear();
|
|
674
|
-
}
|
|
675
|
-
}, highlightFrequency || HIGHLIGHT_FREQ);
|
|
676
|
-
};
|
|
677
|
-
recursion();
|
|
678
|
-
}
|
|
679
|
-
function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
|
|
680
|
-
var _a;
|
|
681
|
-
const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${rowKeyValue}--${colKeyValue}"]`);
|
|
682
|
-
const { className, method, duration, keyframe } = {
|
|
683
|
-
className: HIGHLIGHT_CELL_CLASS,
|
|
684
|
-
method: "animation",
|
|
685
|
-
...defaultHighlightDimOption,
|
|
686
|
-
...option
|
|
687
|
-
};
|
|
688
|
-
if (!cellEl) return;
|
|
689
|
-
if (method === "animation") {
|
|
690
|
-
cellEl.animate(keyframe, duration);
|
|
691
|
-
} else {
|
|
692
|
-
highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration);
|
|
693
|
-
}
|
|
694
|
-
}
|
|
695
|
-
function setHighlightDimRow(rowKeyValues, option = {}) {
|
|
696
|
-
if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
|
|
697
|
-
const { className, method, keyframe, duration } = {
|
|
698
|
-
className: HIGHLIGHT_ROW_CLASS,
|
|
699
|
-
method: "animation",
|
|
700
|
-
...defaultHighlightDimOption,
|
|
701
|
-
...option
|
|
702
|
-
};
|
|
703
|
-
if (method === "css") {
|
|
704
|
-
highlightRowsInCssKeyframe(rowKeyValues, className, duration);
|
|
705
|
-
} else if (method === "animation") {
|
|
706
|
-
if (props.virtual) {
|
|
707
|
-
const nowTs = Date.now();
|
|
708
|
-
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
709
|
-
const rowKeyValue = rowKeyValues[i];
|
|
710
|
-
const store = { ts: nowTs, visible: false, keyframe, duration };
|
|
711
|
-
highlightDimRowsAnimation.set(rowKeyValue, store);
|
|
712
|
-
updateRowAnimation(rowKeyValue, store, 0);
|
|
713
|
-
}
|
|
714
|
-
calcRowHighlightLoop();
|
|
715
|
-
} else {
|
|
716
|
-
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
717
|
-
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValues[i]));
|
|
718
|
-
if (!rowEl) continue;
|
|
719
|
-
rowEl.animate(keyframe, duration);
|
|
720
|
-
}
|
|
721
|
-
}
|
|
722
|
-
} else if (method === "js") {
|
|
723
|
-
const nowTs = Date.now();
|
|
724
|
-
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
725
|
-
const rowKeyValue = rowKeyValues[i];
|
|
726
|
-
highlightDimRowsJs.set(rowKeyValue, nowTs);
|
|
727
|
-
updateRowBgcJs(rowKeyValue, highlightFrom.value);
|
|
728
|
-
}
|
|
729
|
-
calcRowHighlightLoopJs();
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
function highlightRowsInCssKeyframe(rowKeyValues, className, duration) {
|
|
733
|
-
var _a;
|
|
734
|
-
let needRepaint = false;
|
|
735
|
-
const rowElTemp = [];
|
|
736
|
-
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
737
|
-
const rowKeyValue = rowKeyValues[i];
|
|
738
|
-
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
|
|
739
|
-
if (!rowEl) continue;
|
|
740
|
-
if (rowEl.classList.contains(className)) {
|
|
741
|
-
rowEl.classList.remove(className);
|
|
742
|
-
needRepaint = true;
|
|
743
|
-
}
|
|
744
|
-
rowElTemp.push(rowEl);
|
|
745
|
-
window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
|
|
746
|
-
highlightDimRowsTimeout.set(
|
|
747
|
-
rowKeyValue,
|
|
748
|
-
window.setTimeout(() => {
|
|
749
|
-
rowEl.classList.remove(className);
|
|
750
|
-
highlightDimRowsTimeout.delete(rowKeyValue);
|
|
751
|
-
}, duration)
|
|
752
|
-
);
|
|
753
|
-
}
|
|
754
|
-
if (needRepaint) {
|
|
755
|
-
void ((_a = tableContainerRef.value) == null ? void 0 : _a.offsetWidth);
|
|
756
|
-
}
|
|
757
|
-
rowElTemp.forEach((el) => el.classList.add(className));
|
|
758
|
-
}
|
|
759
|
-
function highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration) {
|
|
760
|
-
if (cellEl.classList.contains(className)) {
|
|
761
|
-
cellEl.classList.remove(className);
|
|
762
|
-
void cellEl.offsetHeight;
|
|
763
|
-
}
|
|
764
|
-
cellEl.classList.add(className);
|
|
765
|
-
window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
|
|
766
|
-
highlightDimCellsTimeout.set(
|
|
767
|
-
rowKeyValue,
|
|
768
|
-
window.setTimeout(() => {
|
|
769
|
-
cellEl.classList.remove(className);
|
|
770
|
-
highlightDimCellsTimeout.delete(rowKeyValue);
|
|
771
|
-
}, duration)
|
|
772
|
-
);
|
|
773
|
-
}
|
|
774
|
-
function updateRowAnimation(rowKeyValue, store, timeOffset) {
|
|
775
|
-
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
|
|
776
|
-
const { visible, keyframe, duration: initialDuration } = store;
|
|
777
|
-
if (!rowEl) {
|
|
778
|
-
if (visible) {
|
|
779
|
-
store.visible = false;
|
|
780
|
-
}
|
|
781
|
-
return;
|
|
782
|
-
}
|
|
783
|
-
if (!visible) {
|
|
784
|
-
store.visible = true;
|
|
785
|
-
const iterationStart = timeOffset / initialDuration;
|
|
786
|
-
rowEl.animate(keyframe, {
|
|
787
|
-
duration: initialDuration - timeOffset,
|
|
788
|
-
/** 从什么时候开始,0-1 */
|
|
789
|
-
iterationStart,
|
|
790
|
-
/** 持续多久 0-1 */
|
|
791
|
-
iterations: 1 - iterationStart
|
|
792
|
-
});
|
|
793
|
-
}
|
|
794
|
-
}
|
|
795
|
-
function updateRowBgcJs(rowKeyValue, color) {
|
|
796
|
-
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
|
|
797
|
-
if (!rowEl) return;
|
|
798
|
-
rowEl.style.backgroundColor = color;
|
|
799
|
-
}
|
|
800
|
-
return {
|
|
801
|
-
highlightSteps,
|
|
802
|
-
setHighlightDimRow,
|
|
803
|
-
setHighlightDimCell
|
|
804
|
-
};
|
|
805
|
-
}
|
|
806
|
-
var ScrollCodes = /* @__PURE__ */ ((ScrollCodes2) => {
|
|
807
|
-
ScrollCodes2["ArrowUp"] = "ArrowUp";
|
|
808
|
-
ScrollCodes2["ArrowRight"] = "ArrowRight";
|
|
809
|
-
ScrollCodes2["ArrowDown"] = "ArrowDown";
|
|
810
|
-
ScrollCodes2["ArrowLeft"] = "ArrowLeft";
|
|
811
|
-
ScrollCodes2["PageUp"] = "PageUp";
|
|
812
|
-
ScrollCodes2["PageDown"] = "PageDown";
|
|
813
|
-
return ScrollCodes2;
|
|
814
|
-
})(ScrollCodes || {});
|
|
815
|
-
const ScrollCodesValues = Object.values(ScrollCodes);
|
|
816
|
-
function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }) {
|
|
817
|
-
let isMouseOver = false;
|
|
818
|
-
watch(virtual_on, (val) => {
|
|
819
|
-
if (!val) {
|
|
820
|
-
removeListeners();
|
|
821
|
-
} else {
|
|
822
|
-
addEventListeners();
|
|
823
|
-
}
|
|
824
|
-
});
|
|
825
|
-
onMounted(addEventListeners);
|
|
826
|
-
onBeforeUnmount(removeListeners);
|
|
827
|
-
function addEventListeners() {
|
|
828
|
-
var _a, _b, _c;
|
|
829
|
-
window.addEventListener("keydown", handleKeydown);
|
|
830
|
-
(_a = targetElement.value) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnter);
|
|
831
|
-
(_b = targetElement.value) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeave);
|
|
832
|
-
(_c = targetElement.value) == null ? void 0 : _c.addEventListener("mousedown", handleMouseDown);
|
|
833
|
-
}
|
|
834
|
-
function removeListeners() {
|
|
835
|
-
var _a, _b, _c;
|
|
836
|
-
window.removeEventListener("keydown", handleKeydown);
|
|
837
|
-
(_a = targetElement.value) == null ? void 0 : _a.removeEventListener("mouseenter", handleMouseEnter);
|
|
838
|
-
(_b = targetElement.value) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
|
|
839
|
-
(_c = targetElement.value) == null ? void 0 : _c.removeEventListener("mousedown", handleMouseDown);
|
|
840
|
-
}
|
|
841
|
-
function handleKeydown(e) {
|
|
842
|
-
if (!virtual_on.value) return;
|
|
843
|
-
if (!ScrollCodesValues.includes(e.code)) return;
|
|
844
|
-
if (!isMouseOver) return;
|
|
845
|
-
e.preventDefault();
|
|
846
|
-
const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
|
|
847
|
-
const { scrollLeft } = virtualScrollX.value;
|
|
848
|
-
const { headless, headerRowHeight } = props;
|
|
849
|
-
const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
|
|
850
|
-
const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
|
|
851
|
-
if (e.code === "ArrowUp") {
|
|
852
|
-
scrollTo(scrollTop - rowHeight, null);
|
|
853
|
-
} else if (e.code === "ArrowRight") {
|
|
854
|
-
scrollTo(null, scrollLeft + rowHeight);
|
|
855
|
-
} else if (e.code === "ArrowDown") {
|
|
856
|
-
scrollTo(scrollTop + rowHeight, null);
|
|
857
|
-
} else if (e.code === "ArrowLeft") {
|
|
858
|
-
scrollTo(null, scrollLeft - rowHeight);
|
|
859
|
-
} else if (e.code === "PageUp") {
|
|
860
|
-
scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
|
|
861
|
-
} else if (e.code === "PageDown") {
|
|
862
|
-
scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
|
|
863
|
-
}
|
|
864
|
-
}
|
|
865
|
-
function handleMouseEnter() {
|
|
866
|
-
isMouseOver = true;
|
|
867
|
-
}
|
|
868
|
-
function handleMouseLeave() {
|
|
869
|
-
isMouseOver = false;
|
|
870
|
-
}
|
|
871
|
-
function handleMouseDown() {
|
|
872
|
-
if (!isMouseOver) isMouseOver = true;
|
|
873
|
-
}
|
|
874
|
-
}
|
|
875
|
-
function useThDrag({ props, emits, colKeyGen }) {
|
|
876
|
-
const findParentTH = (e) => e.target.closest("th");
|
|
877
|
-
const dragConfig = computed(() => {
|
|
878
|
-
const headerDrag = props.headerDrag;
|
|
879
|
-
const draggable = headerDrag !== false;
|
|
880
|
-
return {
|
|
881
|
-
draggable,
|
|
882
|
-
mode: "insert",
|
|
883
|
-
disabled: () => false,
|
|
884
|
-
...headerDrag
|
|
885
|
-
};
|
|
886
|
-
});
|
|
887
|
-
function onThDragStart(e) {
|
|
888
|
-
const th = findParentTH(e);
|
|
889
|
-
if (!th) return;
|
|
890
|
-
const dragStartKey = th.dataset.colKey || "";
|
|
891
|
-
const dt = e.dataTransfer;
|
|
892
|
-
if (dt) {
|
|
893
|
-
dt.effectAllowed = "move";
|
|
894
|
-
dt.setData("text/plain", dragStartKey);
|
|
895
|
-
}
|
|
896
|
-
emits("th-drag-start", dragStartKey);
|
|
897
|
-
}
|
|
898
|
-
function onThDragOver(e) {
|
|
899
|
-
const th = findParentTH(e);
|
|
900
|
-
if (!th) return;
|
|
901
|
-
const isHeaderDraggable = th.getAttribute("draggable") === "true";
|
|
902
|
-
if (!isHeaderDraggable) return;
|
|
903
|
-
const dt = e.dataTransfer;
|
|
904
|
-
if (dt) {
|
|
905
|
-
dt.dropEffect = "move";
|
|
906
|
-
}
|
|
907
|
-
e.preventDefault();
|
|
908
|
-
}
|
|
909
|
-
function onThDrop(e) {
|
|
910
|
-
var _a;
|
|
911
|
-
const th = findParentTH(e);
|
|
912
|
-
if (!th) return;
|
|
913
|
-
const dragStartKey = (_a = e.dataTransfer) == null ? void 0 : _a.getData("text");
|
|
914
|
-
if (dragStartKey !== th.dataset.colKey) {
|
|
915
|
-
handleColOrderChange(dragStartKey, th.dataset.colKey);
|
|
916
|
-
}
|
|
917
|
-
emits("th-drop", th.dataset.colKey);
|
|
918
|
-
}
|
|
919
|
-
function handleColOrderChange(dragStartKey, dragEndKey) {
|
|
920
|
-
if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
|
|
921
|
-
if (dragConfig.value.mode !== "none") {
|
|
922
|
-
const columns = [...props.columns];
|
|
923
|
-
const dragStartIndex = columns.findIndex((col) => colKeyGen.value(col) === dragStartKey);
|
|
924
|
-
const dragEndIndex = columns.findIndex((col) => colKeyGen.value(col) === dragEndKey);
|
|
925
|
-
if (dragStartIndex === -1 || dragEndIndex === -1) return;
|
|
926
|
-
const dragStartCol = columns[dragStartIndex];
|
|
927
|
-
if (dragConfig.value.mode === "swap") {
|
|
928
|
-
columns[dragStartIndex] = columns[dragEndIndex];
|
|
929
|
-
columns[dragEndIndex] = dragStartCol;
|
|
930
|
-
} else {
|
|
931
|
-
columns.splice(dragStartIndex, 1);
|
|
932
|
-
columns.splice(dragEndIndex, 0, dragStartCol);
|
|
933
|
-
}
|
|
934
|
-
emits("update:columns", columns);
|
|
935
|
-
}
|
|
936
|
-
emits("col-order-change", dragStartKey, dragEndKey);
|
|
937
|
-
}
|
|
938
|
-
return {
|
|
939
|
-
onThDragStart,
|
|
940
|
-
onThDragOver,
|
|
941
|
-
onThDrop,
|
|
942
|
-
/** 是否可拖拽 */
|
|
943
|
-
isHeaderDraggable: (col) => dragConfig.value.draggable && !dragConfig.value.disabled(col)
|
|
944
|
-
};
|
|
945
|
-
}
|
|
946
|
-
const TR_DRAGGING_CLASS = "tr-dragging";
|
|
947
|
-
const TR_DRAG_OVER_CLASS = "tr-dragging-over";
|
|
948
|
-
const DATA_TRANSFER_FORMAT = "text/plain";
|
|
949
|
-
function useTrDrag({ props, emits, dataSourceCopy }) {
|
|
950
|
-
let trDragFlag = false;
|
|
951
|
-
const dragRowConfig = computed(() => {
|
|
952
|
-
return { mode: "insert", ...props.dragRowConfig };
|
|
953
|
-
});
|
|
954
|
-
function getClosestTr(e) {
|
|
955
|
-
const target = e.target;
|
|
956
|
-
const tr = target == null ? void 0 : target.closest("tr");
|
|
957
|
-
return tr;
|
|
958
|
-
}
|
|
959
|
-
function onTrDragStart(e, rowIndex) {
|
|
960
|
-
var _a;
|
|
961
|
-
const tr = getClosestTr(e);
|
|
962
|
-
if (tr) {
|
|
963
|
-
const trRect = tr.getBoundingClientRect();
|
|
964
|
-
const x = e.clientX - (trRect.left ?? 0);
|
|
965
|
-
(_a = e.dataTransfer) == null ? void 0 : _a.setDragImage(tr, x, trRect.height / 2);
|
|
966
|
-
tr.classList.add(TR_DRAGGING_CLASS);
|
|
967
|
-
}
|
|
968
|
-
const dt = e.dataTransfer;
|
|
969
|
-
if (dt) {
|
|
970
|
-
dt.effectAllowed = "move";
|
|
971
|
-
dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
|
|
972
|
-
}
|
|
973
|
-
trDragFlag = true;
|
|
974
|
-
}
|
|
975
|
-
function onTrDragOver(e) {
|
|
976
|
-
if (!trDragFlag) return;
|
|
977
|
-
e.preventDefault();
|
|
978
|
-
const dt = e.dataTransfer;
|
|
979
|
-
if (dt) {
|
|
980
|
-
dt.dropEffect = "move";
|
|
981
|
-
}
|
|
982
|
-
}
|
|
983
|
-
let oldTr = null;
|
|
984
|
-
function onTrDragEnter(e) {
|
|
985
|
-
if (!trDragFlag) return;
|
|
986
|
-
e.preventDefault();
|
|
987
|
-
const tr = getClosestTr(e);
|
|
988
|
-
if (oldTr && oldTr !== tr) {
|
|
989
|
-
oldTr.classList.remove(TR_DRAG_OVER_CLASS);
|
|
990
|
-
}
|
|
991
|
-
if (tr) {
|
|
992
|
-
oldTr = tr;
|
|
993
|
-
tr.classList.add(TR_DRAG_OVER_CLASS);
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
function onTrDragEnd(e) {
|
|
997
|
-
if (!trDragFlag) return;
|
|
998
|
-
const tr = getClosestTr(e);
|
|
999
|
-
if (tr) {
|
|
1000
|
-
tr.classList.remove(TR_DRAGGING_CLASS);
|
|
1001
|
-
}
|
|
1002
|
-
if (oldTr) {
|
|
1003
|
-
oldTr.classList.remove(TR_DRAG_OVER_CLASS);
|
|
1004
|
-
oldTr = null;
|
|
1005
|
-
}
|
|
1006
|
-
trDragFlag = false;
|
|
1007
|
-
}
|
|
1008
|
-
function onTrDrop(e, rowIndex) {
|
|
1009
|
-
if (!trDragFlag) return;
|
|
1010
|
-
const dt = e.dataTransfer;
|
|
1011
|
-
if (!dt) return;
|
|
1012
|
-
const mode = dragRowConfig.value.mode;
|
|
1013
|
-
const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
|
|
1014
|
-
const endIndex = rowIndex;
|
|
1015
|
-
if (sourceIndex === endIndex) return;
|
|
1016
|
-
if (mode !== "none") {
|
|
1017
|
-
const dataSourceTemp = [...dataSourceCopy.value];
|
|
1018
|
-
const sourceRow = dataSourceTemp[sourceIndex];
|
|
1019
|
-
if (mode === "swap") {
|
|
1020
|
-
dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
|
|
1021
|
-
dataSourceTemp[endIndex] = sourceRow;
|
|
1022
|
-
} else {
|
|
1023
|
-
dataSourceTemp.splice(sourceIndex, 1);
|
|
1024
|
-
dataSourceTemp.splice(endIndex, 0, sourceRow);
|
|
1025
|
-
}
|
|
1026
|
-
dataSourceCopy.value = [...dataSourceTemp];
|
|
1027
|
-
}
|
|
1028
|
-
emits("row-order-change", sourceIndex, endIndex);
|
|
1029
|
-
}
|
|
1030
|
-
return {
|
|
1031
|
-
dragRowConfig,
|
|
1032
|
-
onTrDragStart,
|
|
1033
|
-
onTrDragEnter,
|
|
1034
|
-
onTrDragOver,
|
|
1035
|
-
onTrDrop,
|
|
1036
|
-
onTrDragEnd
|
|
1037
|
-
};
|
|
1038
|
-
}
|
|
1039
|
-
const VUE2_SCROLL_TIMEOUT_MS = 200;
|
|
1040
|
-
function useVirtualScroll({
|
|
1041
|
-
props,
|
|
1042
|
-
tableContainerRef,
|
|
1043
|
-
trRef,
|
|
1044
|
-
dataSourceCopy,
|
|
1045
|
-
tableHeaderLast,
|
|
1046
|
-
tableHeaders,
|
|
1047
|
-
rowKeyGen
|
|
1048
|
-
}) {
|
|
1049
|
-
const tableHeaderHeight = ref(props.headerRowHeight);
|
|
1050
|
-
const virtualScroll = ref({
|
|
1051
|
-
containerHeight: 0,
|
|
1052
|
-
rowHeight: props.rowHeight,
|
|
1053
|
-
pageSize: 10,
|
|
1054
|
-
startIndex: 0,
|
|
1055
|
-
endIndex: 0,
|
|
1056
|
-
offsetTop: 0,
|
|
1057
|
-
scrollTop: 0,
|
|
1058
|
-
scrollHeight: 0
|
|
1059
|
-
});
|
|
1060
|
-
const virtualScrollX = ref({
|
|
1061
|
-
containerWidth: 0,
|
|
1062
|
-
scrollWidth: 0,
|
|
1063
|
-
startIndex: 0,
|
|
1064
|
-
endIndex: 0,
|
|
1065
|
-
offsetLeft: 0,
|
|
1066
|
-
scrollLeft: 0
|
|
1067
|
-
});
|
|
1068
|
-
const hasExpandCol = computed(() => {
|
|
1069
|
-
return tableHeaderLast.value.some((col) => col.type === "expand");
|
|
1070
|
-
});
|
|
1071
|
-
const virtual_on = computed(() => {
|
|
1072
|
-
return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
|
|
1073
|
-
});
|
|
1074
|
-
const virtual_dataSourcePart = computed(() => {
|
|
1075
|
-
if (!virtual_on.value) return dataSourceCopy.value;
|
|
1076
|
-
const { startIndex, endIndex } = virtualScroll.value;
|
|
1077
|
-
return dataSourceCopy.value.slice(startIndex, endIndex + 1);
|
|
1078
|
-
});
|
|
1079
|
-
const virtual_offsetBottom = computed(() => {
|
|
1080
|
-
if (!virtual_on.value) return 0;
|
|
1081
|
-
const { startIndex, rowHeight } = virtualScroll.value;
|
|
1082
|
-
return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
|
|
1083
|
-
});
|
|
1084
|
-
const virtualX_on = computed(() => {
|
|
1085
|
-
return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalculatedColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
|
|
1086
|
-
});
|
|
1087
|
-
const virtualX_columnPart = computed(() => {
|
|
1088
|
-
const tableHeaderLastValue = tableHeaderLast.value;
|
|
1089
|
-
if (virtualX_on.value) {
|
|
1090
|
-
const leftCols = [];
|
|
1091
|
-
const rightCols = [];
|
|
1092
|
-
const { startIndex, endIndex } = virtualScrollX.value;
|
|
1093
|
-
for (let i = 0; i < startIndex; i++) {
|
|
1094
|
-
const col = tableHeaderLastValue[i];
|
|
1095
|
-
if ((col == null ? void 0 : col.fixed) === "left") leftCols.push(col);
|
|
1096
|
-
}
|
|
1097
|
-
for (let i = endIndex; i < tableHeaderLastValue.length; i++) {
|
|
1098
|
-
const col = tableHeaderLastValue[i];
|
|
1099
|
-
if ((col == null ? void 0 : col.fixed) === "right") rightCols.push(col);
|
|
1100
|
-
}
|
|
1101
|
-
const mainColumns = tableHeaderLastValue.slice(startIndex, endIndex);
|
|
1102
|
-
return leftCols.concat(mainColumns).concat(rightCols);
|
|
1103
|
-
}
|
|
1104
|
-
return tableHeaderLastValue;
|
|
1105
|
-
});
|
|
1106
|
-
const virtualX_offsetRight = computed(() => {
|
|
1107
|
-
if (!virtualX_on.value) return 0;
|
|
1108
|
-
let width = 0;
|
|
1109
|
-
const tableHeaderLastValue = tableHeaderLast.value;
|
|
1110
|
-
for (let i = virtualScrollX.value.endIndex; i < tableHeaderLastValue.length; i++) {
|
|
1111
|
-
const col = tableHeaderLastValue[i];
|
|
1112
|
-
if (col.fixed !== "right") {
|
|
1113
|
-
width += getCalculatedColWidth(col);
|
|
1114
|
-
}
|
|
1115
|
-
}
|
|
1116
|
-
return width;
|
|
1117
|
-
});
|
|
1118
|
-
function getTableHeaderHeight() {
|
|
1119
|
-
const { headerRowHeight } = props;
|
|
1120
|
-
return headerRowHeight * tableHeaders.value.length;
|
|
1121
|
-
}
|
|
1122
|
-
function initVirtualScroll(height) {
|
|
1123
|
-
initVirtualScrollY(height);
|
|
1124
|
-
initVirtualScrollX();
|
|
1125
|
-
}
|
|
1126
|
-
function initVirtualScrollY(height) {
|
|
1127
|
-
var _a;
|
|
1128
|
-
if (height !== void 0 && typeof height !== "number") {
|
|
1129
|
-
console.warn("initVirtualScrollY: height must be a number");
|
|
1130
|
-
height = 0;
|
|
1131
|
-
}
|
|
1132
|
-
if (!virtual_on.value) return;
|
|
1133
|
-
const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
|
|
1134
|
-
let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
|
|
1135
|
-
const { rowHeight } = virtualScroll.value;
|
|
1136
|
-
const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
|
|
1137
|
-
const { headless } = props;
|
|
1138
|
-
let pageSize = Math.ceil(containerHeight / rowHeight);
|
|
1139
|
-
const headerHeight = getTableHeaderHeight();
|
|
1140
|
-
tableHeaderHeight.value = headerHeight;
|
|
1141
|
-
if (!headless) {
|
|
1142
|
-
const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
|
|
1143
|
-
pageSize -= headerToBodyRowHeightCount;
|
|
1144
|
-
}
|
|
1145
|
-
const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
|
|
1146
|
-
if (scrollTop > maxScrollTop) {
|
|
1147
|
-
scrollTop = maxScrollTop;
|
|
1148
|
-
}
|
|
1149
|
-
Object.assign(virtualScroll.value, { containerHeight, pageSize, scrollHeight });
|
|
1150
|
-
updateVirtualScrollY(scrollTop);
|
|
1151
|
-
}
|
|
1152
|
-
function initVirtualScrollX() {
|
|
1153
|
-
const { clientWidth, scrollLeft, scrollWidth } = tableContainerRef.value || {};
|
|
1154
|
-
virtualScrollX.value.containerWidth = clientWidth || DEFAULT_TABLE_WIDTH;
|
|
1155
|
-
virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
|
|
1156
|
-
updateVirtualScrollX(scrollLeft);
|
|
1157
|
-
}
|
|
1158
|
-
let vue2ScrollYTimeout = null;
|
|
1159
|
-
const autoRowHeightMap = /* @__PURE__ */ new Map();
|
|
1160
|
-
const setAutoHeight = (rowKey, height) => {
|
|
1161
|
-
if (!height) {
|
|
1162
|
-
autoRowHeightMap.delete(rowKey);
|
|
1163
|
-
} else {
|
|
1164
|
-
autoRowHeightMap.set(rowKey, height);
|
|
1165
|
-
}
|
|
1166
|
-
};
|
|
1167
|
-
const clearAllAutoHeight = () => {
|
|
1168
|
-
autoRowHeightMap.clear();
|
|
1169
|
-
};
|
|
1170
|
-
const getAutoRowHeight = (row) => {
|
|
1171
|
-
var _a;
|
|
1172
|
-
const rowKey = String(rowKeyGen(row));
|
|
1173
|
-
const storedHeight = autoRowHeightMap.get(rowKey);
|
|
1174
|
-
let expectedHeight;
|
|
1175
|
-
if (storedHeight) {
|
|
1176
|
-
return storedHeight;
|
|
1177
|
-
}
|
|
1178
|
-
if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
|
|
1179
|
-
if (typeof expectedHeight === "function") {
|
|
1180
|
-
return expectedHeight(row);
|
|
1181
|
-
} else {
|
|
1182
|
-
return expectedHeight;
|
|
1183
|
-
}
|
|
1184
|
-
}
|
|
1185
|
-
return props.rowHeight || DEFAULT_ROW_HEIGHT;
|
|
1186
|
-
};
|
|
1187
|
-
const createGetRowHeightFn = () => {
|
|
1188
|
-
var _a;
|
|
1189
|
-
if (props.autoRowHeight) {
|
|
1190
|
-
return (row) => getAutoRowHeight(row);
|
|
1191
|
-
}
|
|
1192
|
-
if (hasExpandCol.value) {
|
|
1193
|
-
const { rowHeight } = virtualScroll.value;
|
|
1194
|
-
const expandedRowHeight = ((_a = props.expandConfig) == null ? void 0 : _a.height) || rowHeight;
|
|
1195
|
-
return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
|
|
1196
|
-
}
|
|
1197
|
-
return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
|
|
1198
|
-
};
|
|
1199
|
-
function updateVirtualScrollY(sTop = 0) {
|
|
1200
|
-
var _a;
|
|
1201
|
-
const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
|
|
1202
|
-
virtualScroll.value.scrollTop = sTop;
|
|
1203
|
-
if (!virtual_on.value) {
|
|
1204
|
-
return;
|
|
1205
|
-
}
|
|
1206
|
-
const dataSourceCopyTemp = dataSourceCopy.value;
|
|
1207
|
-
const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
|
|
1208
|
-
let startIndex = 0;
|
|
1209
|
-
let autoRowHeightTop = 0;
|
|
1210
|
-
let getRowHeight = null;
|
|
1211
|
-
const dataLength = dataSourceCopyTemp.length;
|
|
1212
|
-
if (autoRowHeight || hasExpandCol.value) {
|
|
1213
|
-
if (autoRowHeight) {
|
|
1214
|
-
(_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
|
|
1215
|
-
const { rowKey } = tr.dataset;
|
|
1216
|
-
if (!rowKey || autoRowHeightMap.has(rowKey)) return;
|
|
1217
|
-
autoRowHeightMap.set(rowKey, tr.offsetHeight);
|
|
1218
|
-
});
|
|
1219
|
-
}
|
|
1220
|
-
getRowHeight = createGetRowHeightFn();
|
|
1221
|
-
for (let i = 0; i < dataLength; i++) {
|
|
1222
|
-
const height = getRowHeight(dataSourceCopyTemp[i]);
|
|
1223
|
-
autoRowHeightTop += height;
|
|
1224
|
-
if (autoRowHeightTop >= sTop) {
|
|
1225
|
-
startIndex = i;
|
|
1226
|
-
autoRowHeightTop -= height;
|
|
1227
|
-
break;
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
} else {
|
|
1231
|
-
startIndex = Math.floor(sTop / rowHeight);
|
|
1232
|
-
}
|
|
1233
|
-
let endIndex = startIndex + pageSize;
|
|
1234
|
-
if (stripe && startIndex > 0 && startIndex % 2) {
|
|
1235
|
-
startIndex -= 1;
|
|
1236
|
-
if (autoRowHeight || hasExpandCol.value) {
|
|
1237
|
-
const height = getRowHeight(dataSourceCopyTemp[startIndex]);
|
|
1238
|
-
autoRowHeightTop -= height;
|
|
1239
|
-
}
|
|
1240
|
-
}
|
|
1241
|
-
startIndex = Math.max(0, startIndex);
|
|
1242
|
-
endIndex = Math.min(endIndex, dataLength);
|
|
1243
|
-
if (startIndex >= endIndex) {
|
|
1244
|
-
startIndex = endIndex - pageSize;
|
|
1245
|
-
}
|
|
1246
|
-
if (vue2ScrollYTimeout) {
|
|
1247
|
-
window.clearTimeout(vue2ScrollYTimeout);
|
|
1248
|
-
}
|
|
1249
|
-
let offsetTop = 0;
|
|
1250
|
-
if (autoRowHeight || hasExpandCol.value) {
|
|
1251
|
-
offsetTop = autoRowHeightTop;
|
|
1252
|
-
} else {
|
|
1253
|
-
if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
|
|
1254
|
-
return;
|
|
1255
|
-
}
|
|
1256
|
-
offsetTop = startIndex * rowHeight;
|
|
1257
|
-
}
|
|
1258
|
-
if (!optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
|
|
1259
|
-
Object.assign(virtualScroll.value, { startIndex, endIndex, offsetTop });
|
|
1260
|
-
} else {
|
|
1261
|
-
virtualScroll.value.endIndex = endIndex;
|
|
1262
|
-
vue2ScrollYTimeout = window.setTimeout(() => {
|
|
1263
|
-
Object.assign(virtualScroll.value, { startIndex, offsetTop });
|
|
1264
|
-
}, VUE2_SCROLL_TIMEOUT_MS);
|
|
1265
|
-
}
|
|
1266
|
-
}
|
|
1267
|
-
let vue2ScrollXTimeout = null;
|
|
1268
|
-
function updateVirtualScrollX(sLeft = 0) {
|
|
1269
|
-
if (!props.virtualX) return;
|
|
1270
|
-
const tableHeaderLastValue = tableHeaderLast.value;
|
|
1271
|
-
const headerLength = tableHeaderLastValue == null ? void 0 : tableHeaderLastValue.length;
|
|
1272
|
-
if (!headerLength) return;
|
|
1273
|
-
const { scrollLeft } = virtualScrollX.value;
|
|
1274
|
-
let startIndex = 0;
|
|
1275
|
-
let offsetLeft = 0;
|
|
1276
|
-
let colWidthSum = 0;
|
|
1277
|
-
let leftColWidthSum = 0;
|
|
1278
|
-
let leftFirstColRestWidth = 0;
|
|
1279
|
-
for (let colIndex = 0; colIndex < headerLength; colIndex++) {
|
|
1280
|
-
const col = tableHeaderLastValue[colIndex];
|
|
1281
|
-
const colWidth = getCalculatedColWidth(col);
|
|
1282
|
-
startIndex++;
|
|
1283
|
-
if (col.fixed === "left") {
|
|
1284
|
-
leftColWidthSum += colWidth;
|
|
1285
|
-
continue;
|
|
1286
|
-
}
|
|
1287
|
-
colWidthSum += colWidth;
|
|
1288
|
-
if (colWidthSum >= sLeft) {
|
|
1289
|
-
offsetLeft = colWidthSum - colWidth;
|
|
1290
|
-
startIndex--;
|
|
1291
|
-
leftFirstColRestWidth = colWidthSum - sLeft;
|
|
1292
|
-
break;
|
|
1293
|
-
}
|
|
1294
|
-
}
|
|
1295
|
-
colWidthSum = leftFirstColRestWidth;
|
|
1296
|
-
const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
|
|
1297
|
-
let endIndex = headerLength;
|
|
1298
|
-
for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
|
|
1299
|
-
const col = tableHeaderLastValue[colIndex];
|
|
1300
|
-
colWidthSum += getCalculatedColWidth(col);
|
|
1301
|
-
if (colWidthSum >= containerWidth) {
|
|
1302
|
-
endIndex = colIndex + 1;
|
|
1303
|
-
break;
|
|
1304
|
-
}
|
|
1305
|
-
}
|
|
1306
|
-
endIndex = Math.min(endIndex, headerLength);
|
|
1307
|
-
if (vue2ScrollXTimeout) {
|
|
1308
|
-
window.clearTimeout(vue2ScrollXTimeout);
|
|
1309
|
-
}
|
|
1310
|
-
if (!props.optimizeVue2Scroll || sLeft <= scrollLeft) {
|
|
1311
|
-
Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft, scrollLeft: sLeft });
|
|
1312
|
-
} else {
|
|
1313
|
-
Object.assign(virtualScrollX.value, { endIndex, scrollLeft: sLeft });
|
|
1314
|
-
vue2ScrollXTimeout = window.setTimeout(() => {
|
|
1315
|
-
Object.assign(virtualScrollX.value, { startIndex, offsetLeft });
|
|
1316
|
-
}, VUE2_SCROLL_TIMEOUT_MS);
|
|
1317
|
-
}
|
|
1318
|
-
}
|
|
1319
|
-
return {
|
|
1320
|
-
virtualScroll,
|
|
1321
|
-
virtualScrollX,
|
|
1322
|
-
virtual_on,
|
|
1323
|
-
virtual_dataSourcePart,
|
|
1324
|
-
virtual_offsetBottom,
|
|
1325
|
-
virtualX_on,
|
|
1326
|
-
virtualX_columnPart,
|
|
1327
|
-
virtualX_offsetRight,
|
|
1328
|
-
initVirtualScroll,
|
|
1329
|
-
initVirtualScrollY,
|
|
1330
|
-
initVirtualScrollX,
|
|
1331
|
-
updateVirtualScrollY,
|
|
1332
|
-
updateVirtualScrollX,
|
|
1333
|
-
setAutoHeight,
|
|
1334
|
-
clearAllAutoHeight
|
|
1335
|
-
};
|
|
1336
|
-
}
|
|
1337
|
-
const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
|
|
1338
|
-
const _hoisted_2 = {
|
|
1339
|
-
key: 1,
|
|
1340
|
-
class: "table-header-title"
|
|
1341
|
-
};
|
|
1342
|
-
const _hoisted_3 = { class: "table-header-title" };
|
|
1343
|
-
const _hoisted_4 = {
|
|
1344
|
-
key: 3,
|
|
1345
|
-
class: "table-header-sorter"
|
|
1346
|
-
};
|
|
1347
|
-
const _hoisted_5 = ["onMousedown"];
|
|
1348
|
-
const _hoisted_6 = ["onMousedown"];
|
|
1349
|
-
const _hoisted_7 = {
|
|
1350
|
-
key: 0,
|
|
1351
|
-
class: "vt-x-left"
|
|
1352
|
-
};
|
|
1353
|
-
const _hoisted_8 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
|
|
1354
|
-
const _hoisted_9 = {
|
|
1355
|
-
key: 0,
|
|
1356
|
-
class: "vt-x-left"
|
|
1357
|
-
};
|
|
1358
|
-
const _hoisted_10 = ["colspan"];
|
|
1359
|
-
const _hoisted_11 = { class: "table-cell-wrapper" };
|
|
1360
|
-
const _hoisted_12 = ["data-cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
|
|
1361
|
-
const _hoisted_13 = ["title"];
|
|
1362
|
-
const _hoisted_14 = { key: 1 };
|
|
1363
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
1364
|
-
__name: "StkTable",
|
|
1365
|
-
props: {
|
|
1366
|
-
width: { default: "" },
|
|
1367
|
-
minWidth: { default: "" },
|
|
1368
|
-
maxWidth: { default: "" },
|
|
1369
|
-
stripe: { type: Boolean, default: false },
|
|
1370
|
-
fixedMode: { type: Boolean, default: false },
|
|
1371
|
-
headless: { type: Boolean, default: false },
|
|
1372
|
-
theme: { default: "light" },
|
|
1373
|
-
rowHeight: { default: DEFAULT_ROW_HEIGHT },
|
|
1374
|
-
autoRowHeight: { type: Boolean, default: false },
|
|
1375
|
-
rowHover: { type: Boolean, default: true },
|
|
1376
|
-
rowActive: { type: Boolean, default: true },
|
|
1377
|
-
rowCurrentRevokable: { type: Boolean, default: true },
|
|
1378
|
-
headerRowHeight: { default: DEFAULT_ROW_HEIGHT },
|
|
1379
|
-
virtual: { type: Boolean, default: false },
|
|
1380
|
-
virtualX: { type: Boolean, default: false },
|
|
1381
|
-
columns: { default: () => [] },
|
|
1382
|
-
dataSource: { default: () => [] },
|
|
1383
|
-
rowKey: { type: [String, Number, Function], default: "" },
|
|
1384
|
-
colKey: { type: [String, Number, Function], default: "dataIndex" },
|
|
1385
|
-
emptyCellText: { type: [String, Function], default: "--" },
|
|
1386
|
-
noDataFull: { type: Boolean, default: false },
|
|
1387
|
-
showNoData: { type: Boolean, default: true },
|
|
1388
|
-
sortRemote: { type: Boolean, default: false },
|
|
1389
|
-
showHeaderOverflow: { type: Boolean, default: false },
|
|
1390
|
-
showOverflow: { type: Boolean, default: false },
|
|
1391
|
-
showTrHoverClass: { type: Boolean, default: false },
|
|
1392
|
-
cellHover: { type: Boolean, default: false },
|
|
1393
|
-
cellActive: { type: Boolean, default: false },
|
|
1394
|
-
selectedCellRevokable: { type: Boolean, default: true },
|
|
1395
|
-
headerDrag: { default: false },
|
|
1396
|
-
rowClassName: { type: Function, default: () => "" },
|
|
1397
|
-
colResizable: { type: Boolean, default: false },
|
|
1398
|
-
colMinWidth: { default: 10 },
|
|
1399
|
-
bordered: { type: [Boolean, String], default: true },
|
|
1400
|
-
autoResize: { type: [Boolean, Function], default: true },
|
|
1401
|
-
fixedColShadow: { type: Boolean, default: false },
|
|
1402
|
-
optimizeVue2Scroll: { type: Boolean, default: false },
|
|
1403
|
-
sortConfig: { default: () => ({
|
|
1404
|
-
emptyToBottom: false,
|
|
1405
|
-
stringLocaleCompare: false
|
|
1406
|
-
}) },
|
|
1407
|
-
hideHeaderTitle: { type: [Boolean, Array], default: false },
|
|
1408
|
-
highlightConfig: { default: () => ({}) },
|
|
1409
|
-
seqConfig: { default: () => ({}) },
|
|
1410
|
-
expandConfig: { default: () => ({}) },
|
|
1411
|
-
dragRowConfig: { default: () => ({}) },
|
|
1412
|
-
cellFixedMode: { default: "sticky" },
|
|
1413
|
-
smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL }
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
const
|
|
1419
|
-
const
|
|
1420
|
-
const
|
|
1421
|
-
const
|
|
1422
|
-
const
|
|
1423
|
-
const
|
|
1424
|
-
const
|
|
1425
|
-
const
|
|
1426
|
-
const
|
|
1427
|
-
const
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
let
|
|
1432
|
-
|
|
1433
|
-
const
|
|
1434
|
-
const
|
|
1435
|
-
const
|
|
1436
|
-
const
|
|
1437
|
-
const
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
const
|
|
1453
|
-
const {
|
|
1454
|
-
const {
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
const
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
() =>
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
() =>
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
() =>
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
(
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
() =>
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
const
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
let
|
|
1584
|
-
let
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
const
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
let
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
let
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
col,
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
const
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
const
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
const
|
|
1675
|
-
const
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
style.
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
style.
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
...
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
...
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
[TagType.
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
const
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
return;
|
|
1813
|
-
}
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
const
|
|
1819
|
-
|
|
1820
|
-
const {
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
const
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
}
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
}
|
|
1941
|
-
function
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
if (
|
|
1979
|
-
|
|
1980
|
-
}
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
*
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
*
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
*
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
*
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
*
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
*
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
*
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
*
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
*
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
*
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
*
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
*
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
*
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
*
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
*
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
"
|
|
2106
|
-
"
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
"
|
|
2110
|
-
"
|
|
2111
|
-
|
|
2112
|
-
"
|
|
2113
|
-
"
|
|
2114
|
-
"
|
|
2115
|
-
|
|
2116
|
-
"
|
|
2117
|
-
"
|
|
2118
|
-
"
|
|
2119
|
-
"
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
"
|
|
2123
|
-
"
|
|
2124
|
-
"
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
class:
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
},
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
col,
|
|
2313
|
-
row,
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
col
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
]
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
1
|
+
import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
|
|
2
|
+
import { interpolateRgb } from "d3-interpolate";
|
|
3
|
+
const _export_sfc = (sfc, props) => {
|
|
4
|
+
const target = sfc.__vccOpts || sfc;
|
|
5
|
+
for (const [key, val] of props) {
|
|
6
|
+
target[key] = val;
|
|
7
|
+
}
|
|
8
|
+
return target;
|
|
9
|
+
};
|
|
10
|
+
const _sfc_main$2 = {};
|
|
11
|
+
const _hoisted_1$2 = {
|
|
12
|
+
class: "drag-row-handle",
|
|
13
|
+
draggable: "true"
|
|
14
|
+
};
|
|
15
|
+
function _sfc_render$1(_ctx, _cache) {
|
|
16
|
+
return openBlock(), createElementBlock("span", _hoisted_1$2, _cache[0] || (_cache[0] = [
|
|
17
|
+
createElementVNode("svg", {
|
|
18
|
+
viewBox: "0 0 1024 1024",
|
|
19
|
+
width: "16",
|
|
20
|
+
height: "16",
|
|
21
|
+
fill: "currentColor"
|
|
22
|
+
}, [
|
|
23
|
+
createElementVNode("path", { d: "M640 853.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3zM384 341.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z" })
|
|
24
|
+
], -1)
|
|
25
|
+
]));
|
|
26
|
+
}
|
|
27
|
+
const DragHandle = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
|
|
28
|
+
const _sfc_main$1 = {};
|
|
29
|
+
const _hoisted_1$1 = {
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
31
|
+
width: "16px",
|
|
32
|
+
height: "16px",
|
|
33
|
+
viewBox: "0 0 16 16"
|
|
34
|
+
};
|
|
35
|
+
function _sfc_render(_ctx, _cache) {
|
|
36
|
+
return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
|
|
37
|
+
createElementVNode("polygon", {
|
|
38
|
+
class: "arrow-up",
|
|
39
|
+
fill: "#757699",
|
|
40
|
+
points: "8 2 4.8 6 11.2 6"
|
|
41
|
+
}, null, -1),
|
|
42
|
+
createElementVNode("polygon", {
|
|
43
|
+
class: "arrow-down",
|
|
44
|
+
transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
|
|
45
|
+
points: "8 10 4.8 14 11.2 14"
|
|
46
|
+
}, null, -1)
|
|
47
|
+
]));
|
|
48
|
+
}
|
|
49
|
+
const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
|
|
50
|
+
function isEmptyValue(val, isNumber) {
|
|
51
|
+
let isEmpty = val === null || val === void 0;
|
|
52
|
+
if (isNumber) {
|
|
53
|
+
isEmpty = isEmpty || typeof val === "boolean" || Number.isNaN(+val);
|
|
54
|
+
}
|
|
55
|
+
return isEmpty;
|
|
56
|
+
}
|
|
57
|
+
function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {}) {
|
|
58
|
+
const { dataIndex, order } = sortState;
|
|
59
|
+
sortConfig = { emptyToBottom: false, ...sortConfig };
|
|
60
|
+
let { sortType } = sortState;
|
|
61
|
+
if (!sortType) sortType = typeof newItem[dataIndex];
|
|
62
|
+
const data = [...targetArray];
|
|
63
|
+
if (!order || !data.length) {
|
|
64
|
+
data.unshift(newItem);
|
|
65
|
+
return data;
|
|
66
|
+
}
|
|
67
|
+
if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
|
|
68
|
+
data.push(newItem);
|
|
69
|
+
}
|
|
70
|
+
const isNumber = sortType === "number";
|
|
71
|
+
const targetVal = newItem[dataIndex];
|
|
72
|
+
const sIndex = binarySearch(data, (midIndex) => {
|
|
73
|
+
const midVal = data[midIndex][dataIndex];
|
|
74
|
+
const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
|
|
75
|
+
return order === "asc" ? compareRes : -compareRes;
|
|
76
|
+
});
|
|
77
|
+
data.splice(sIndex, 0, newItem);
|
|
78
|
+
return data;
|
|
79
|
+
}
|
|
80
|
+
function binarySearch(searchArray, compareCallback) {
|
|
81
|
+
let sIndex = 0;
|
|
82
|
+
let eIndex = searchArray.length - 1;
|
|
83
|
+
while (sIndex <= eIndex) {
|
|
84
|
+
const midIndex = Math.floor((sIndex + eIndex) / 2);
|
|
85
|
+
const compareRes = compareCallback(midIndex);
|
|
86
|
+
if (compareRes === 0) {
|
|
87
|
+
sIndex = midIndex;
|
|
88
|
+
break;
|
|
89
|
+
} else if (compareRes < 0) {
|
|
90
|
+
sIndex = midIndex + 1;
|
|
91
|
+
} else {
|
|
92
|
+
eIndex = midIndex - 1;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
return sIndex;
|
|
96
|
+
}
|
|
97
|
+
function strCompare(a, b, isNumber, localeCompare = false) {
|
|
98
|
+
let _a = a;
|
|
99
|
+
let _b = b;
|
|
100
|
+
if (isNumber) {
|
|
101
|
+
_a = +a;
|
|
102
|
+
_b = +b;
|
|
103
|
+
} else if (localeCompare) {
|
|
104
|
+
return String(a).localeCompare(b);
|
|
105
|
+
}
|
|
106
|
+
if (_a > _b) return 1;
|
|
107
|
+
else if (_a === _b) return 0;
|
|
108
|
+
else return -1;
|
|
109
|
+
}
|
|
110
|
+
function separatedData(sortOption, targetDataSource, isNumber) {
|
|
111
|
+
const emptyArr = [];
|
|
112
|
+
const valueArr = [];
|
|
113
|
+
for (let i = 0; i < targetDataSource.length; i++) {
|
|
114
|
+
const row = targetDataSource[i];
|
|
115
|
+
const sortField = sortOption.sortField || sortOption.dataIndex;
|
|
116
|
+
const isEmpty = isEmptyValue(row == null ? void 0 : row[sortField], isNumber);
|
|
117
|
+
if (isEmpty) {
|
|
118
|
+
emptyArr.push(row);
|
|
119
|
+
} else {
|
|
120
|
+
valueArr.push(row);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
return [valueArr, emptyArr];
|
|
124
|
+
}
|
|
125
|
+
function tableSort(sortOption, order, dataSource, sortConfig = {}) {
|
|
126
|
+
if (!(dataSource == null ? void 0 : dataSource.length) || !sortOption) return dataSource || [];
|
|
127
|
+
sortConfig = { emptyToBottom: false, ...sortConfig };
|
|
128
|
+
let targetDataSource = [...dataSource];
|
|
129
|
+
let sortField = sortOption.sortField || sortOption.dataIndex;
|
|
130
|
+
if (!order && sortConfig.defaultSort) {
|
|
131
|
+
order = sortConfig.defaultSort.order;
|
|
132
|
+
sortField = sortConfig.defaultSort.dataIndex;
|
|
133
|
+
}
|
|
134
|
+
if (typeof sortOption.sorter === "function") {
|
|
135
|
+
const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
|
|
136
|
+
if (customSorterData) targetDataSource = customSorterData;
|
|
137
|
+
} else if (order) {
|
|
138
|
+
let { sortType } = sortOption;
|
|
139
|
+
if (!sortType) sortType = typeof dataSource[0][sortField];
|
|
140
|
+
const isNumber = sortType === "number";
|
|
141
|
+
const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, isNumber);
|
|
142
|
+
if (order === "asc") {
|
|
143
|
+
valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
|
|
144
|
+
} else {
|
|
145
|
+
valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
|
|
146
|
+
}
|
|
147
|
+
if (order === "desc" || sortConfig.emptyToBottom) {
|
|
148
|
+
targetDataSource = [...valueArr, ...emptyArr];
|
|
149
|
+
} else {
|
|
150
|
+
targetDataSource = [...emptyArr, ...valueArr];
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
return targetDataSource;
|
|
154
|
+
}
|
|
155
|
+
function howDeepTheHeader(arr, level = 0) {
|
|
156
|
+
const levels = [level];
|
|
157
|
+
arr.forEach((item) => {
|
|
158
|
+
var _a;
|
|
159
|
+
if ((_a = item.children) == null ? void 0 : _a.length) {
|
|
160
|
+
levels.push(howDeepTheHeader(item.children, level + 1));
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
return Math.max(...levels);
|
|
164
|
+
}
|
|
165
|
+
function transformWidthToStr(width) {
|
|
166
|
+
if (width === void 0) return;
|
|
167
|
+
const numberWidth = Number(width);
|
|
168
|
+
return width + (!Number.isNaN(numberWidth) ? "px" : "");
|
|
169
|
+
}
|
|
170
|
+
function getBrowsersVersion(browserName) {
|
|
171
|
+
try {
|
|
172
|
+
const reg = new RegExp(`${browserName}/\\d+`, "i");
|
|
173
|
+
const userAgent = navigator.userAgent.match(reg);
|
|
174
|
+
if (userAgent) {
|
|
175
|
+
return +userAgent[0].split("/")[1];
|
|
176
|
+
}
|
|
177
|
+
} catch (e) {
|
|
178
|
+
console.error("Cannot get version", e);
|
|
179
|
+
}
|
|
180
|
+
return 100;
|
|
181
|
+
}
|
|
182
|
+
const DEFAULT_COL_WIDTH = "100";
|
|
183
|
+
const DEFAULT_TABLE_HEIGHT = 100;
|
|
184
|
+
const DEFAULT_TABLE_WIDTH = 200;
|
|
185
|
+
const DEFAULT_ROW_HEIGHT = 28;
|
|
186
|
+
const HIGHLIGHT_COLOR = {
|
|
187
|
+
light: { from: "#71a2fd", to: "#fff" },
|
|
188
|
+
dark: { from: "#1e4c99", to: "#181c21" }
|
|
189
|
+
};
|
|
190
|
+
const HIGHLIGHT_DURATION = 2e3;
|
|
191
|
+
const HIGHLIGHT_FREQ = 1e3 / 30;
|
|
192
|
+
const HIGHLIGHT_ROW_CLASS = "highlight-row";
|
|
193
|
+
const HIGHLIGHT_CELL_CLASS = "highlight-cell";
|
|
194
|
+
const _chromeVersion = getBrowsersVersion("chrome");
|
|
195
|
+
const _firefoxVersion = getBrowsersVersion("firefox");
|
|
196
|
+
const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
|
|
197
|
+
const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
|
|
198
|
+
const STK_ID_PREFIX = "stk";
|
|
199
|
+
const EXPANDED_ROW_KEY_PREFIX = "expanded-";
|
|
200
|
+
var TagType = /* @__PURE__ */ ((TagType2) => {
|
|
201
|
+
TagType2[TagType2["TH"] = 0] = "TH";
|
|
202
|
+
TagType2[TagType2["TD"] = 1] = "TD";
|
|
203
|
+
return TagType2;
|
|
204
|
+
})(TagType || {});
|
|
205
|
+
function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }) {
|
|
206
|
+
let resizeObserver = null;
|
|
207
|
+
let isObserved = false;
|
|
208
|
+
watch(
|
|
209
|
+
() => props.virtual,
|
|
210
|
+
(v) => {
|
|
211
|
+
if (v) initResizeObserver();
|
|
212
|
+
else removeResizeObserver();
|
|
213
|
+
}
|
|
214
|
+
);
|
|
215
|
+
watch(
|
|
216
|
+
() => props.virtualX,
|
|
217
|
+
(v) => {
|
|
218
|
+
if (v) initResizeObserver();
|
|
219
|
+
else removeResizeObserver();
|
|
220
|
+
}
|
|
221
|
+
);
|
|
222
|
+
onMounted(() => {
|
|
223
|
+
if (props.virtual || props.virtualX) {
|
|
224
|
+
initResizeObserver();
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
onBeforeUnmount(() => {
|
|
228
|
+
removeResizeObserver();
|
|
229
|
+
});
|
|
230
|
+
function initResizeObserver() {
|
|
231
|
+
if (isObserved) {
|
|
232
|
+
removeResizeObserver();
|
|
233
|
+
}
|
|
234
|
+
if (window.ResizeObserver) {
|
|
235
|
+
if (!tableContainerRef.value) {
|
|
236
|
+
const watchDom = watch(
|
|
237
|
+
() => tableContainerRef,
|
|
238
|
+
() => {
|
|
239
|
+
initResizeObserver();
|
|
240
|
+
watchDom();
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
resizeObserver = new ResizeObserver(resizeCallback);
|
|
246
|
+
resizeObserver.observe(tableContainerRef.value);
|
|
247
|
+
} else {
|
|
248
|
+
window.addEventListener("resize", resizeCallback);
|
|
249
|
+
}
|
|
250
|
+
isObserved = true;
|
|
251
|
+
}
|
|
252
|
+
function removeResizeObserver() {
|
|
253
|
+
if (!isObserved) return;
|
|
254
|
+
if (resizeObserver) {
|
|
255
|
+
resizeObserver.disconnect();
|
|
256
|
+
resizeObserver = null;
|
|
257
|
+
} else {
|
|
258
|
+
window.removeEventListener("resize", resizeCallback);
|
|
259
|
+
}
|
|
260
|
+
isObserved = false;
|
|
261
|
+
}
|
|
262
|
+
let debounceTime = 0;
|
|
263
|
+
function resizeCallback() {
|
|
264
|
+
if (debounceTime) {
|
|
265
|
+
window.clearTimeout(debounceTime);
|
|
266
|
+
}
|
|
267
|
+
debounceTime = window.setTimeout(() => {
|
|
268
|
+
if (props.autoResize) {
|
|
269
|
+
initVirtualScroll();
|
|
270
|
+
if (typeof props.autoResize === "function") {
|
|
271
|
+
props.autoResize();
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
debounceTime = 0;
|
|
275
|
+
}, debounceMs);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
function getColWidth(col) {
|
|
279
|
+
const val = (col == null ? void 0 : col.minWidth) ?? (col == null ? void 0 : col.width) ?? DEFAULT_COL_WIDTH;
|
|
280
|
+
if (typeof val === "number") {
|
|
281
|
+
return Math.floor(val);
|
|
282
|
+
}
|
|
283
|
+
return parseInt(val);
|
|
284
|
+
}
|
|
285
|
+
function getCalculatedColWidth(col) {
|
|
286
|
+
return (col == null ? void 0 : col.__WIDTH__) ?? +DEFAULT_COL_WIDTH;
|
|
287
|
+
}
|
|
288
|
+
function createStkTableId() {
|
|
289
|
+
let id = window.__STK_TB_ID_COUNT__;
|
|
290
|
+
if (!id) id = 0;
|
|
291
|
+
id += 1;
|
|
292
|
+
window.__STK_TB_ID_COUNT__ = id;
|
|
293
|
+
return STK_ID_PREFIX + id.toString(36);
|
|
294
|
+
}
|
|
295
|
+
function useColResize({
|
|
296
|
+
tableContainerRef,
|
|
297
|
+
tableHeaderLast,
|
|
298
|
+
colResizeIndicatorRef,
|
|
299
|
+
props,
|
|
300
|
+
emits,
|
|
301
|
+
colKeyGen,
|
|
302
|
+
fixedCols
|
|
303
|
+
}) {
|
|
304
|
+
const isColResizing = ref(false);
|
|
305
|
+
let colResizeState = {
|
|
306
|
+
currentCol: null,
|
|
307
|
+
lastCol: null,
|
|
308
|
+
startX: 0,
|
|
309
|
+
startOffsetTableX: 0,
|
|
310
|
+
revertMoveX: false
|
|
311
|
+
};
|
|
312
|
+
const colResizeOn = computed(() => {
|
|
313
|
+
if (Object.prototype.toString.call(props.colResizable) === "[object Object]") {
|
|
314
|
+
return (col) => !props.colResizable.disabled(col);
|
|
315
|
+
}
|
|
316
|
+
return () => props.colResizable;
|
|
317
|
+
});
|
|
318
|
+
onMounted(() => {
|
|
319
|
+
initColResizeEvent();
|
|
320
|
+
});
|
|
321
|
+
onBeforeUnmount(() => {
|
|
322
|
+
clearColResizeEvent();
|
|
323
|
+
});
|
|
324
|
+
function initColResizeEvent() {
|
|
325
|
+
window.addEventListener("mousemove", onThResizeMouseMove);
|
|
326
|
+
window.addEventListener("mouseup", onThResizeMouseUp);
|
|
327
|
+
}
|
|
328
|
+
function clearColResizeEvent() {
|
|
329
|
+
window.removeEventListener("mousemove", onThResizeMouseMove);
|
|
330
|
+
window.removeEventListener("mouseup", onThResizeMouseUp);
|
|
331
|
+
}
|
|
332
|
+
function onThResizeMouseDown(e, col, leftHandle = false) {
|
|
333
|
+
if (!tableContainerRef.value) return;
|
|
334
|
+
e.stopPropagation();
|
|
335
|
+
e.preventDefault();
|
|
336
|
+
const { clientX } = e;
|
|
337
|
+
const { scrollLeft, scrollTop } = tableContainerRef.value;
|
|
338
|
+
const { left } = tableContainerRef.value.getBoundingClientRect();
|
|
339
|
+
const tableHeaderLastValue = tableHeaderLast.value;
|
|
340
|
+
let revertMoveX = false;
|
|
341
|
+
const colIndex = tableHeaderLastValue.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
|
|
342
|
+
const fixedIndex = fixedCols.value.indexOf(col);
|
|
343
|
+
const isFixed = fixedIndex !== -1;
|
|
344
|
+
if (leftHandle) {
|
|
345
|
+
if (isFixed && col.fixed === "right") {
|
|
346
|
+
revertMoveX = true;
|
|
347
|
+
} else {
|
|
348
|
+
if (colIndex - 1 >= 0) {
|
|
349
|
+
col = tableHeaderLastValue[colIndex - 1];
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
} else {
|
|
353
|
+
if (isFixed && col.fixed === "right") {
|
|
354
|
+
revertMoveX = true;
|
|
355
|
+
col = fixedCols.value[fixedIndex + 1] || col;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
const offsetTableX = clientX - left + scrollLeft;
|
|
359
|
+
isColResizing.value = true;
|
|
360
|
+
Object.assign(colResizeState, {
|
|
361
|
+
currentCol: col,
|
|
362
|
+
lastCol: findLastChildCol(col),
|
|
363
|
+
startX: clientX,
|
|
364
|
+
startOffsetTableX: offsetTableX,
|
|
365
|
+
revertMoveX
|
|
366
|
+
});
|
|
367
|
+
if (colResizeIndicatorRef.value) {
|
|
368
|
+
const style = colResizeIndicatorRef.value.style;
|
|
369
|
+
style.display = "block";
|
|
370
|
+
style.left = offsetTableX + "px";
|
|
371
|
+
style.top = scrollTop + "px";
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
function onThResizeMouseMove(e) {
|
|
375
|
+
if (!isColResizing.value) return;
|
|
376
|
+
e.stopPropagation();
|
|
377
|
+
e.preventDefault();
|
|
378
|
+
const { lastCol, startX, startOffsetTableX } = colResizeState;
|
|
379
|
+
const { clientX } = e;
|
|
380
|
+
let moveX = clientX - startX;
|
|
381
|
+
const currentColWidth = getCalculatedColWidth(lastCol);
|
|
382
|
+
const minWidth = (lastCol == null ? void 0 : lastCol.minWidth) ?? props.colMinWidth;
|
|
383
|
+
if (currentColWidth + moveX < minWidth) {
|
|
384
|
+
moveX = -currentColWidth;
|
|
385
|
+
}
|
|
386
|
+
const offsetTableX = startOffsetTableX + moveX;
|
|
387
|
+
if (!colResizeIndicatorRef.value) return;
|
|
388
|
+
colResizeIndicatorRef.value.style.left = offsetTableX + "px";
|
|
389
|
+
}
|
|
390
|
+
function onThResizeMouseUp(e) {
|
|
391
|
+
if (!isColResizing.value) return;
|
|
392
|
+
const { startX, lastCol, revertMoveX } = colResizeState;
|
|
393
|
+
const { clientX } = e;
|
|
394
|
+
const moveX = revertMoveX ? startX - clientX : clientX - startX;
|
|
395
|
+
let width = getCalculatedColWidth(lastCol) + moveX;
|
|
396
|
+
if (width < props.colMinWidth) width = props.colMinWidth;
|
|
397
|
+
const curCol = tableHeaderLast.value.find((it) => colKeyGen.value(it) === colKeyGen.value(lastCol));
|
|
398
|
+
if (!curCol) return;
|
|
399
|
+
curCol.width = width + "px";
|
|
400
|
+
emits("update:columns", [...props.columns]);
|
|
401
|
+
emits("col-resize", { ...curCol });
|
|
402
|
+
if (colResizeIndicatorRef.value) {
|
|
403
|
+
const style = colResizeIndicatorRef.value.style;
|
|
404
|
+
style.display = "none";
|
|
405
|
+
style.left = "0";
|
|
406
|
+
style.top = "0";
|
|
407
|
+
}
|
|
408
|
+
isColResizing.value = false;
|
|
409
|
+
colResizeState = {
|
|
410
|
+
currentCol: null,
|
|
411
|
+
lastCol: null,
|
|
412
|
+
startX: 0,
|
|
413
|
+
startOffsetTableX: 0,
|
|
414
|
+
revertMoveX: false
|
|
415
|
+
};
|
|
416
|
+
}
|
|
417
|
+
function findLastChildCol(column) {
|
|
418
|
+
var _a;
|
|
419
|
+
if ((_a = column == null ? void 0 : column.children) == null ? void 0 : _a.length) {
|
|
420
|
+
const lastChild = column.children.at(-1);
|
|
421
|
+
return findLastChildCol(lastChild);
|
|
422
|
+
}
|
|
423
|
+
return column;
|
|
424
|
+
}
|
|
425
|
+
return {
|
|
426
|
+
colResizeOn,
|
|
427
|
+
isColResizing,
|
|
428
|
+
onThResizeMouseDown
|
|
429
|
+
};
|
|
430
|
+
}
|
|
431
|
+
function useFixedCol({
|
|
432
|
+
props,
|
|
433
|
+
colKeyGen,
|
|
434
|
+
getFixedColPosition,
|
|
435
|
+
tableHeaders,
|
|
436
|
+
tableHeadersForCalc,
|
|
437
|
+
tableContainerRef
|
|
438
|
+
}) {
|
|
439
|
+
const fixedShadowCols = shallowRef([]);
|
|
440
|
+
const fixedCols = shallowRef([]);
|
|
441
|
+
const fixedColClassMap = computed(() => {
|
|
442
|
+
const colMap = /* @__PURE__ */ new Map();
|
|
443
|
+
const fixedShadowColsValue = fixedShadowCols.value;
|
|
444
|
+
tableHeaders.value.forEach((cols) => {
|
|
445
|
+
cols.forEach((col) => {
|
|
446
|
+
const showShadow = props.fixedColShadow && col.fixed && fixedShadowColsValue.includes(col);
|
|
447
|
+
const classObj = {
|
|
448
|
+
"fixed-cell": col.fixed,
|
|
449
|
+
["fixed-cell--" + col.fixed]: col.fixed,
|
|
450
|
+
"fixed-cell--shadow": showShadow,
|
|
451
|
+
["fixed-cell--active"]: fixedCols.value.includes(col)
|
|
452
|
+
// 表示该列正在被固定
|
|
453
|
+
};
|
|
454
|
+
colMap.set(colKeyGen.value(col), classObj);
|
|
455
|
+
});
|
|
456
|
+
});
|
|
457
|
+
return colMap;
|
|
458
|
+
});
|
|
459
|
+
function updateFixedShadow(virtualScrollX) {
|
|
460
|
+
const fixedColsTemp = [];
|
|
461
|
+
let clientWidth, scrollLeft;
|
|
462
|
+
if (virtualScrollX == null ? void 0 : virtualScrollX.value) {
|
|
463
|
+
const {
|
|
464
|
+
containerWidth: cw,
|
|
465
|
+
/* scrollWidth: sw, */
|
|
466
|
+
scrollLeft: sl
|
|
467
|
+
} = virtualScrollX.value;
|
|
468
|
+
clientWidth = cw;
|
|
469
|
+
scrollLeft = sl;
|
|
470
|
+
} else {
|
|
471
|
+
const {
|
|
472
|
+
clientWidth: cw,
|
|
473
|
+
/* scrollWidth: sw, */
|
|
474
|
+
scrollLeft: sl
|
|
475
|
+
} = tableContainerRef.value;
|
|
476
|
+
clientWidth = cw;
|
|
477
|
+
scrollLeft = sl;
|
|
478
|
+
}
|
|
479
|
+
const leftShadowCol = [];
|
|
480
|
+
const rightShadowCol = [];
|
|
481
|
+
tableHeadersForCalc.value.forEach((row, level) => {
|
|
482
|
+
let left = 0;
|
|
483
|
+
row.forEach((col) => {
|
|
484
|
+
const position = getFixedColPosition.value(col);
|
|
485
|
+
const isFixedLeft = col.fixed === "left";
|
|
486
|
+
const isFixedRight = col.fixed === "right";
|
|
487
|
+
if (isFixedLeft && position + scrollLeft > left) {
|
|
488
|
+
fixedColsTemp.push(col);
|
|
489
|
+
leftShadowCol[level] = col;
|
|
490
|
+
}
|
|
491
|
+
left += getCalculatedColWidth(col);
|
|
492
|
+
if (isFixedRight && scrollLeft + clientWidth - left < position) {
|
|
493
|
+
fixedColsTemp.push(col);
|
|
494
|
+
if (!rightShadowCol[level]) {
|
|
495
|
+
rightShadowCol[level] = col;
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
});
|
|
499
|
+
});
|
|
500
|
+
if (props.fixedColShadow) {
|
|
501
|
+
fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean);
|
|
502
|
+
}
|
|
503
|
+
fixedCols.value = fixedColsTemp;
|
|
504
|
+
}
|
|
505
|
+
return {
|
|
506
|
+
/** 正在被固定的列 */
|
|
507
|
+
fixedCols,
|
|
508
|
+
/** 固定列class */
|
|
509
|
+
fixedColClassMap,
|
|
510
|
+
/** 滚动条变化时,更新需要展示阴影的列 */
|
|
511
|
+
updateFixedShadow
|
|
512
|
+
};
|
|
513
|
+
}
|
|
514
|
+
function useFixedStyle({
|
|
515
|
+
props,
|
|
516
|
+
isRelativeMode,
|
|
517
|
+
getFixedColPosition,
|
|
518
|
+
virtualScroll,
|
|
519
|
+
virtualScrollX,
|
|
520
|
+
virtualX_on,
|
|
521
|
+
virtualX_offsetRight
|
|
522
|
+
}) {
|
|
523
|
+
function getFixedStyle(tagType, col, depth = 0) {
|
|
524
|
+
const { fixed } = col;
|
|
525
|
+
if (tagType === TagType.TD && !fixed) return null;
|
|
526
|
+
const style = {};
|
|
527
|
+
const isFixedLeft = fixed === "left";
|
|
528
|
+
if (tagType === TagType.TH) {
|
|
529
|
+
if (isRelativeMode.value) {
|
|
530
|
+
style.top = virtualScroll.value.scrollTop + "px";
|
|
531
|
+
} else {
|
|
532
|
+
const rowHeight = props.headerRowHeight ?? props.rowHeight;
|
|
533
|
+
style.top = depth * rowHeight + "px";
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
|
|
537
|
+
const scrollRight = scrollWidth - containerWidth - scrollLeft;
|
|
538
|
+
if (fixed === "left" || fixed === "right") {
|
|
539
|
+
if (isRelativeMode.value) {
|
|
540
|
+
if (isFixedLeft) {
|
|
541
|
+
style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + "px";
|
|
542
|
+
} else {
|
|
543
|
+
style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + "px";
|
|
544
|
+
}
|
|
545
|
+
} else {
|
|
546
|
+
const lr = getFixedColPosition.value(col) + "px";
|
|
547
|
+
if (isFixedLeft) {
|
|
548
|
+
style.left = lr;
|
|
549
|
+
} else {
|
|
550
|
+
style.right = lr;
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
return style;
|
|
555
|
+
}
|
|
556
|
+
return getFixedStyle;
|
|
557
|
+
}
|
|
558
|
+
function useGetFixedColPosition({ tableHeadersForCalc, colKeyGen }) {
|
|
559
|
+
const getFixedColPosition = computed(() => {
|
|
560
|
+
const colKeyStore = {};
|
|
561
|
+
const refStore = /* @__PURE__ */ new WeakMap();
|
|
562
|
+
tableHeadersForCalc.value.forEach((cols) => {
|
|
563
|
+
let left = 0;
|
|
564
|
+
let rightStartIndex = 0;
|
|
565
|
+
for (let i = 0; i < cols.length; i++) {
|
|
566
|
+
const item = cols[i];
|
|
567
|
+
if (item.fixed === "left") {
|
|
568
|
+
const colKey = colKeyGen.value(item);
|
|
569
|
+
if (colKey) {
|
|
570
|
+
colKeyStore[colKey] = left;
|
|
571
|
+
} else {
|
|
572
|
+
refStore.set(item, left);
|
|
573
|
+
}
|
|
574
|
+
left += getCalculatedColWidth(item);
|
|
575
|
+
}
|
|
576
|
+
if (!rightStartIndex && item.fixed === "right") {
|
|
577
|
+
rightStartIndex = i;
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
let right = 0;
|
|
581
|
+
for (let i = cols.length - 1; i >= rightStartIndex; i--) {
|
|
582
|
+
const item = cols[i];
|
|
583
|
+
const colKey = colKeyGen.value(item);
|
|
584
|
+
if (item.fixed === "right") {
|
|
585
|
+
if (colKey) {
|
|
586
|
+
colKeyStore[colKey] = right;
|
|
587
|
+
} else {
|
|
588
|
+
refStore.set(item, right);
|
|
589
|
+
}
|
|
590
|
+
right += getCalculatedColWidth(item);
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
});
|
|
594
|
+
return (col) => {
|
|
595
|
+
const colKey = colKeyGen.value(col);
|
|
596
|
+
return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
|
|
597
|
+
};
|
|
598
|
+
});
|
|
599
|
+
return getFixedColPosition;
|
|
600
|
+
}
|
|
601
|
+
function useHighlight({ props, stkTableId, tableContainerRef }) {
|
|
602
|
+
const config = props.highlightConfig;
|
|
603
|
+
const highlightColor = {
|
|
604
|
+
light: HIGHLIGHT_COLOR.light,
|
|
605
|
+
dark: HIGHLIGHT_COLOR.dark
|
|
606
|
+
};
|
|
607
|
+
const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
|
|
608
|
+
const highlightFrequency = config.fps && config.fps > 0 ? 1e3 / config.fps : null;
|
|
609
|
+
const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
|
|
610
|
+
const highlightFrom = computed(() => highlightColor[props.theme].from);
|
|
611
|
+
const highlightTo = computed(() => highlightColor[props.theme].to);
|
|
612
|
+
const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
|
|
613
|
+
const highlightDimRowsJs = /* @__PURE__ */ new Map();
|
|
614
|
+
let calcHighlightDimLoopJs = false;
|
|
615
|
+
const highlightDimRowsAnimation = /* @__PURE__ */ new Map();
|
|
616
|
+
let calcHighlightDimLoopAnimation = false;
|
|
617
|
+
const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
|
|
618
|
+
const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
|
|
619
|
+
const defaultHighlightDimOption = (() => {
|
|
620
|
+
const keyframe = { backgroundColor: [highlightFrom.value, ""] };
|
|
621
|
+
if (highlightSteps) {
|
|
622
|
+
keyframe.easing = `steps(${highlightSteps})`;
|
|
623
|
+
}
|
|
624
|
+
return { duration: highlightDuration, keyframe };
|
|
625
|
+
})();
|
|
626
|
+
function calcRowHighlightLoop() {
|
|
627
|
+
if (calcHighlightDimLoopAnimation) return;
|
|
628
|
+
calcHighlightDimLoopAnimation = true;
|
|
629
|
+
const recursion = () => {
|
|
630
|
+
window.requestAnimationFrame(
|
|
631
|
+
() => {
|
|
632
|
+
const nowTs = Date.now();
|
|
633
|
+
highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
|
|
634
|
+
const { ts, duration } = store;
|
|
635
|
+
const timeOffset = nowTs - ts;
|
|
636
|
+
if (nowTs - ts < duration) {
|
|
637
|
+
updateRowAnimation(rowKeyValue, store, timeOffset);
|
|
638
|
+
} else {
|
|
639
|
+
highlightDimRowsAnimation.delete(rowKeyValue);
|
|
640
|
+
}
|
|
641
|
+
});
|
|
642
|
+
if (highlightDimRowsAnimation.size > 0) {
|
|
643
|
+
recursion();
|
|
644
|
+
} else {
|
|
645
|
+
calcHighlightDimLoopAnimation = false;
|
|
646
|
+
highlightDimRowsAnimation.clear();
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
);
|
|
650
|
+
};
|
|
651
|
+
recursion();
|
|
652
|
+
}
|
|
653
|
+
function calcRowHighlightLoopJs() {
|
|
654
|
+
if (calcHighlightDimLoopJs) return;
|
|
655
|
+
calcHighlightDimLoopJs = true;
|
|
656
|
+
const recursion = () => {
|
|
657
|
+
window.setTimeout(() => {
|
|
658
|
+
const nowTs = Date.now();
|
|
659
|
+
highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
|
|
660
|
+
const progress = (nowTs - highlightStart) / highlightDuration;
|
|
661
|
+
let bgc = "";
|
|
662
|
+
if (0 <= progress && progress <= 1) {
|
|
663
|
+
bgc = highlightInter.value(progress);
|
|
664
|
+
} else {
|
|
665
|
+
highlightDimRowsJs.delete(rowKeyValue);
|
|
666
|
+
}
|
|
667
|
+
updateRowBgcJs(rowKeyValue, bgc);
|
|
668
|
+
});
|
|
669
|
+
if (highlightDimRowsJs.size > 0) {
|
|
670
|
+
recursion();
|
|
671
|
+
} else {
|
|
672
|
+
calcHighlightDimLoopJs = false;
|
|
673
|
+
highlightDimRowsJs.clear();
|
|
674
|
+
}
|
|
675
|
+
}, highlightFrequency || HIGHLIGHT_FREQ);
|
|
676
|
+
};
|
|
677
|
+
recursion();
|
|
678
|
+
}
|
|
679
|
+
function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
|
|
680
|
+
var _a;
|
|
681
|
+
const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${rowKeyValue}--${colKeyValue}"]`);
|
|
682
|
+
const { className, method, duration, keyframe } = {
|
|
683
|
+
className: HIGHLIGHT_CELL_CLASS,
|
|
684
|
+
method: "animation",
|
|
685
|
+
...defaultHighlightDimOption,
|
|
686
|
+
...option
|
|
687
|
+
};
|
|
688
|
+
if (!cellEl) return;
|
|
689
|
+
if (method === "animation") {
|
|
690
|
+
cellEl.animate(keyframe, duration);
|
|
691
|
+
} else {
|
|
692
|
+
highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration);
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
function setHighlightDimRow(rowKeyValues, option = {}) {
|
|
696
|
+
if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
|
|
697
|
+
const { className, method, keyframe, duration } = {
|
|
698
|
+
className: HIGHLIGHT_ROW_CLASS,
|
|
699
|
+
method: "animation",
|
|
700
|
+
...defaultHighlightDimOption,
|
|
701
|
+
...option
|
|
702
|
+
};
|
|
703
|
+
if (method === "css") {
|
|
704
|
+
highlightRowsInCssKeyframe(rowKeyValues, className, duration);
|
|
705
|
+
} else if (method === "animation") {
|
|
706
|
+
if (props.virtual) {
|
|
707
|
+
const nowTs = Date.now();
|
|
708
|
+
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
709
|
+
const rowKeyValue = rowKeyValues[i];
|
|
710
|
+
const store = { ts: nowTs, visible: false, keyframe, duration };
|
|
711
|
+
highlightDimRowsAnimation.set(rowKeyValue, store);
|
|
712
|
+
updateRowAnimation(rowKeyValue, store, 0);
|
|
713
|
+
}
|
|
714
|
+
calcRowHighlightLoop();
|
|
715
|
+
} else {
|
|
716
|
+
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
717
|
+
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValues[i]));
|
|
718
|
+
if (!rowEl) continue;
|
|
719
|
+
rowEl.animate(keyframe, duration);
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
} else if (method === "js") {
|
|
723
|
+
const nowTs = Date.now();
|
|
724
|
+
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
725
|
+
const rowKeyValue = rowKeyValues[i];
|
|
726
|
+
highlightDimRowsJs.set(rowKeyValue, nowTs);
|
|
727
|
+
updateRowBgcJs(rowKeyValue, highlightFrom.value);
|
|
728
|
+
}
|
|
729
|
+
calcRowHighlightLoopJs();
|
|
730
|
+
}
|
|
731
|
+
}
|
|
732
|
+
function highlightRowsInCssKeyframe(rowKeyValues, className, duration) {
|
|
733
|
+
var _a;
|
|
734
|
+
let needRepaint = false;
|
|
735
|
+
const rowElTemp = [];
|
|
736
|
+
for (let i = 0; i < rowKeyValues.length; i++) {
|
|
737
|
+
const rowKeyValue = rowKeyValues[i];
|
|
738
|
+
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
|
|
739
|
+
if (!rowEl) continue;
|
|
740
|
+
if (rowEl.classList.contains(className)) {
|
|
741
|
+
rowEl.classList.remove(className);
|
|
742
|
+
needRepaint = true;
|
|
743
|
+
}
|
|
744
|
+
rowElTemp.push(rowEl);
|
|
745
|
+
window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
|
|
746
|
+
highlightDimRowsTimeout.set(
|
|
747
|
+
rowKeyValue,
|
|
748
|
+
window.setTimeout(() => {
|
|
749
|
+
rowEl.classList.remove(className);
|
|
750
|
+
highlightDimRowsTimeout.delete(rowKeyValue);
|
|
751
|
+
}, duration)
|
|
752
|
+
);
|
|
753
|
+
}
|
|
754
|
+
if (needRepaint) {
|
|
755
|
+
void ((_a = tableContainerRef.value) == null ? void 0 : _a.offsetWidth);
|
|
756
|
+
}
|
|
757
|
+
rowElTemp.forEach((el) => el.classList.add(className));
|
|
758
|
+
}
|
|
759
|
+
function highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration) {
|
|
760
|
+
if (cellEl.classList.contains(className)) {
|
|
761
|
+
cellEl.classList.remove(className);
|
|
762
|
+
void cellEl.offsetHeight;
|
|
763
|
+
}
|
|
764
|
+
cellEl.classList.add(className);
|
|
765
|
+
window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
|
|
766
|
+
highlightDimCellsTimeout.set(
|
|
767
|
+
rowKeyValue,
|
|
768
|
+
window.setTimeout(() => {
|
|
769
|
+
cellEl.classList.remove(className);
|
|
770
|
+
highlightDimCellsTimeout.delete(rowKeyValue);
|
|
771
|
+
}, duration)
|
|
772
|
+
);
|
|
773
|
+
}
|
|
774
|
+
function updateRowAnimation(rowKeyValue, store, timeOffset) {
|
|
775
|
+
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
|
|
776
|
+
const { visible, keyframe, duration: initialDuration } = store;
|
|
777
|
+
if (!rowEl) {
|
|
778
|
+
if (visible) {
|
|
779
|
+
store.visible = false;
|
|
780
|
+
}
|
|
781
|
+
return;
|
|
782
|
+
}
|
|
783
|
+
if (!visible) {
|
|
784
|
+
store.visible = true;
|
|
785
|
+
const iterationStart = timeOffset / initialDuration;
|
|
786
|
+
rowEl.animate(keyframe, {
|
|
787
|
+
duration: initialDuration - timeOffset,
|
|
788
|
+
/** 从什么时候开始,0-1 */
|
|
789
|
+
iterationStart,
|
|
790
|
+
/** 持续多久 0-1 */
|
|
791
|
+
iterations: 1 - iterationStart
|
|
792
|
+
});
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
function updateRowBgcJs(rowKeyValue, color) {
|
|
796
|
+
const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
|
|
797
|
+
if (!rowEl) return;
|
|
798
|
+
rowEl.style.backgroundColor = color;
|
|
799
|
+
}
|
|
800
|
+
return {
|
|
801
|
+
highlightSteps,
|
|
802
|
+
setHighlightDimRow,
|
|
803
|
+
setHighlightDimCell
|
|
804
|
+
};
|
|
805
|
+
}
|
|
806
|
+
var ScrollCodes = /* @__PURE__ */ ((ScrollCodes2) => {
|
|
807
|
+
ScrollCodes2["ArrowUp"] = "ArrowUp";
|
|
808
|
+
ScrollCodes2["ArrowRight"] = "ArrowRight";
|
|
809
|
+
ScrollCodes2["ArrowDown"] = "ArrowDown";
|
|
810
|
+
ScrollCodes2["ArrowLeft"] = "ArrowLeft";
|
|
811
|
+
ScrollCodes2["PageUp"] = "PageUp";
|
|
812
|
+
ScrollCodes2["PageDown"] = "PageDown";
|
|
813
|
+
return ScrollCodes2;
|
|
814
|
+
})(ScrollCodes || {});
|
|
815
|
+
const ScrollCodesValues = Object.values(ScrollCodes);
|
|
816
|
+
function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }) {
|
|
817
|
+
let isMouseOver = false;
|
|
818
|
+
watch(virtual_on, (val) => {
|
|
819
|
+
if (!val) {
|
|
820
|
+
removeListeners();
|
|
821
|
+
} else {
|
|
822
|
+
addEventListeners();
|
|
823
|
+
}
|
|
824
|
+
});
|
|
825
|
+
onMounted(addEventListeners);
|
|
826
|
+
onBeforeUnmount(removeListeners);
|
|
827
|
+
function addEventListeners() {
|
|
828
|
+
var _a, _b, _c;
|
|
829
|
+
window.addEventListener("keydown", handleKeydown);
|
|
830
|
+
(_a = targetElement.value) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnter);
|
|
831
|
+
(_b = targetElement.value) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeave);
|
|
832
|
+
(_c = targetElement.value) == null ? void 0 : _c.addEventListener("mousedown", handleMouseDown);
|
|
833
|
+
}
|
|
834
|
+
function removeListeners() {
|
|
835
|
+
var _a, _b, _c;
|
|
836
|
+
window.removeEventListener("keydown", handleKeydown);
|
|
837
|
+
(_a = targetElement.value) == null ? void 0 : _a.removeEventListener("mouseenter", handleMouseEnter);
|
|
838
|
+
(_b = targetElement.value) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
|
|
839
|
+
(_c = targetElement.value) == null ? void 0 : _c.removeEventListener("mousedown", handleMouseDown);
|
|
840
|
+
}
|
|
841
|
+
function handleKeydown(e) {
|
|
842
|
+
if (!virtual_on.value) return;
|
|
843
|
+
if (!ScrollCodesValues.includes(e.code)) return;
|
|
844
|
+
if (!isMouseOver) return;
|
|
845
|
+
e.preventDefault();
|
|
846
|
+
const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
|
|
847
|
+
const { scrollLeft } = virtualScrollX.value;
|
|
848
|
+
const { headless, headerRowHeight } = props;
|
|
849
|
+
const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
|
|
850
|
+
const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
|
|
851
|
+
if (e.code === "ArrowUp") {
|
|
852
|
+
scrollTo(scrollTop - rowHeight, null);
|
|
853
|
+
} else if (e.code === "ArrowRight") {
|
|
854
|
+
scrollTo(null, scrollLeft + rowHeight);
|
|
855
|
+
} else if (e.code === "ArrowDown") {
|
|
856
|
+
scrollTo(scrollTop + rowHeight, null);
|
|
857
|
+
} else if (e.code === "ArrowLeft") {
|
|
858
|
+
scrollTo(null, scrollLeft - rowHeight);
|
|
859
|
+
} else if (e.code === "PageUp") {
|
|
860
|
+
scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
|
|
861
|
+
} else if (e.code === "PageDown") {
|
|
862
|
+
scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
function handleMouseEnter() {
|
|
866
|
+
isMouseOver = true;
|
|
867
|
+
}
|
|
868
|
+
function handleMouseLeave() {
|
|
869
|
+
isMouseOver = false;
|
|
870
|
+
}
|
|
871
|
+
function handleMouseDown() {
|
|
872
|
+
if (!isMouseOver) isMouseOver = true;
|
|
873
|
+
}
|
|
874
|
+
}
|
|
875
|
+
function useThDrag({ props, emits, colKeyGen }) {
|
|
876
|
+
const findParentTH = (e) => e.target.closest("th");
|
|
877
|
+
const dragConfig = computed(() => {
|
|
878
|
+
const headerDrag = props.headerDrag;
|
|
879
|
+
const draggable = headerDrag !== false;
|
|
880
|
+
return {
|
|
881
|
+
draggable,
|
|
882
|
+
mode: "insert",
|
|
883
|
+
disabled: () => false,
|
|
884
|
+
...headerDrag
|
|
885
|
+
};
|
|
886
|
+
});
|
|
887
|
+
function onThDragStart(e) {
|
|
888
|
+
const th = findParentTH(e);
|
|
889
|
+
if (!th) return;
|
|
890
|
+
const dragStartKey = th.dataset.colKey || "";
|
|
891
|
+
const dt = e.dataTransfer;
|
|
892
|
+
if (dt) {
|
|
893
|
+
dt.effectAllowed = "move";
|
|
894
|
+
dt.setData("text/plain", dragStartKey);
|
|
895
|
+
}
|
|
896
|
+
emits("th-drag-start", dragStartKey);
|
|
897
|
+
}
|
|
898
|
+
function onThDragOver(e) {
|
|
899
|
+
const th = findParentTH(e);
|
|
900
|
+
if (!th) return;
|
|
901
|
+
const isHeaderDraggable = th.getAttribute("draggable") === "true";
|
|
902
|
+
if (!isHeaderDraggable) return;
|
|
903
|
+
const dt = e.dataTransfer;
|
|
904
|
+
if (dt) {
|
|
905
|
+
dt.dropEffect = "move";
|
|
906
|
+
}
|
|
907
|
+
e.preventDefault();
|
|
908
|
+
}
|
|
909
|
+
function onThDrop(e) {
|
|
910
|
+
var _a;
|
|
911
|
+
const th = findParentTH(e);
|
|
912
|
+
if (!th) return;
|
|
913
|
+
const dragStartKey = (_a = e.dataTransfer) == null ? void 0 : _a.getData("text");
|
|
914
|
+
if (dragStartKey !== th.dataset.colKey) {
|
|
915
|
+
handleColOrderChange(dragStartKey, th.dataset.colKey);
|
|
916
|
+
}
|
|
917
|
+
emits("th-drop", th.dataset.colKey);
|
|
918
|
+
}
|
|
919
|
+
function handleColOrderChange(dragStartKey, dragEndKey) {
|
|
920
|
+
if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
|
|
921
|
+
if (dragConfig.value.mode !== "none") {
|
|
922
|
+
const columns = [...props.columns];
|
|
923
|
+
const dragStartIndex = columns.findIndex((col) => colKeyGen.value(col) === dragStartKey);
|
|
924
|
+
const dragEndIndex = columns.findIndex((col) => colKeyGen.value(col) === dragEndKey);
|
|
925
|
+
if (dragStartIndex === -1 || dragEndIndex === -1) return;
|
|
926
|
+
const dragStartCol = columns[dragStartIndex];
|
|
927
|
+
if (dragConfig.value.mode === "swap") {
|
|
928
|
+
columns[dragStartIndex] = columns[dragEndIndex];
|
|
929
|
+
columns[dragEndIndex] = dragStartCol;
|
|
930
|
+
} else {
|
|
931
|
+
columns.splice(dragStartIndex, 1);
|
|
932
|
+
columns.splice(dragEndIndex, 0, dragStartCol);
|
|
933
|
+
}
|
|
934
|
+
emits("update:columns", columns);
|
|
935
|
+
}
|
|
936
|
+
emits("col-order-change", dragStartKey, dragEndKey);
|
|
937
|
+
}
|
|
938
|
+
return {
|
|
939
|
+
onThDragStart,
|
|
940
|
+
onThDragOver,
|
|
941
|
+
onThDrop,
|
|
942
|
+
/** 是否可拖拽 */
|
|
943
|
+
isHeaderDraggable: (col) => dragConfig.value.draggable && !dragConfig.value.disabled(col)
|
|
944
|
+
};
|
|
945
|
+
}
|
|
946
|
+
const TR_DRAGGING_CLASS = "tr-dragging";
|
|
947
|
+
const TR_DRAG_OVER_CLASS = "tr-dragging-over";
|
|
948
|
+
const DATA_TRANSFER_FORMAT = "text/plain";
|
|
949
|
+
function useTrDrag({ props, emits, dataSourceCopy }) {
|
|
950
|
+
let trDragFlag = false;
|
|
951
|
+
const dragRowConfig = computed(() => {
|
|
952
|
+
return { mode: "insert", ...props.dragRowConfig };
|
|
953
|
+
});
|
|
954
|
+
function getClosestTr(e) {
|
|
955
|
+
const target = e.target;
|
|
956
|
+
const tr = target == null ? void 0 : target.closest("tr");
|
|
957
|
+
return tr;
|
|
958
|
+
}
|
|
959
|
+
function onTrDragStart(e, rowIndex) {
|
|
960
|
+
var _a;
|
|
961
|
+
const tr = getClosestTr(e);
|
|
962
|
+
if (tr) {
|
|
963
|
+
const trRect = tr.getBoundingClientRect();
|
|
964
|
+
const x = e.clientX - (trRect.left ?? 0);
|
|
965
|
+
(_a = e.dataTransfer) == null ? void 0 : _a.setDragImage(tr, x, trRect.height / 2);
|
|
966
|
+
tr.classList.add(TR_DRAGGING_CLASS);
|
|
967
|
+
}
|
|
968
|
+
const dt = e.dataTransfer;
|
|
969
|
+
if (dt) {
|
|
970
|
+
dt.effectAllowed = "move";
|
|
971
|
+
dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
|
|
972
|
+
}
|
|
973
|
+
trDragFlag = true;
|
|
974
|
+
}
|
|
975
|
+
function onTrDragOver(e) {
|
|
976
|
+
if (!trDragFlag) return;
|
|
977
|
+
e.preventDefault();
|
|
978
|
+
const dt = e.dataTransfer;
|
|
979
|
+
if (dt) {
|
|
980
|
+
dt.dropEffect = "move";
|
|
981
|
+
}
|
|
982
|
+
}
|
|
983
|
+
let oldTr = null;
|
|
984
|
+
function onTrDragEnter(e) {
|
|
985
|
+
if (!trDragFlag) return;
|
|
986
|
+
e.preventDefault();
|
|
987
|
+
const tr = getClosestTr(e);
|
|
988
|
+
if (oldTr && oldTr !== tr) {
|
|
989
|
+
oldTr.classList.remove(TR_DRAG_OVER_CLASS);
|
|
990
|
+
}
|
|
991
|
+
if (tr) {
|
|
992
|
+
oldTr = tr;
|
|
993
|
+
tr.classList.add(TR_DRAG_OVER_CLASS);
|
|
994
|
+
}
|
|
995
|
+
}
|
|
996
|
+
function onTrDragEnd(e) {
|
|
997
|
+
if (!trDragFlag) return;
|
|
998
|
+
const tr = getClosestTr(e);
|
|
999
|
+
if (tr) {
|
|
1000
|
+
tr.classList.remove(TR_DRAGGING_CLASS);
|
|
1001
|
+
}
|
|
1002
|
+
if (oldTr) {
|
|
1003
|
+
oldTr.classList.remove(TR_DRAG_OVER_CLASS);
|
|
1004
|
+
oldTr = null;
|
|
1005
|
+
}
|
|
1006
|
+
trDragFlag = false;
|
|
1007
|
+
}
|
|
1008
|
+
function onTrDrop(e, rowIndex) {
|
|
1009
|
+
if (!trDragFlag) return;
|
|
1010
|
+
const dt = e.dataTransfer;
|
|
1011
|
+
if (!dt) return;
|
|
1012
|
+
const mode = dragRowConfig.value.mode;
|
|
1013
|
+
const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
|
|
1014
|
+
const endIndex = rowIndex;
|
|
1015
|
+
if (sourceIndex === endIndex) return;
|
|
1016
|
+
if (mode !== "none") {
|
|
1017
|
+
const dataSourceTemp = [...dataSourceCopy.value];
|
|
1018
|
+
const sourceRow = dataSourceTemp[sourceIndex];
|
|
1019
|
+
if (mode === "swap") {
|
|
1020
|
+
dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
|
|
1021
|
+
dataSourceTemp[endIndex] = sourceRow;
|
|
1022
|
+
} else {
|
|
1023
|
+
dataSourceTemp.splice(sourceIndex, 1);
|
|
1024
|
+
dataSourceTemp.splice(endIndex, 0, sourceRow);
|
|
1025
|
+
}
|
|
1026
|
+
dataSourceCopy.value = [...dataSourceTemp];
|
|
1027
|
+
}
|
|
1028
|
+
emits("row-order-change", sourceIndex, endIndex);
|
|
1029
|
+
}
|
|
1030
|
+
return {
|
|
1031
|
+
dragRowConfig,
|
|
1032
|
+
onTrDragStart,
|
|
1033
|
+
onTrDragEnter,
|
|
1034
|
+
onTrDragOver,
|
|
1035
|
+
onTrDrop,
|
|
1036
|
+
onTrDragEnd
|
|
1037
|
+
};
|
|
1038
|
+
}
|
|
1039
|
+
const VUE2_SCROLL_TIMEOUT_MS = 200;
|
|
1040
|
+
function useVirtualScroll({
|
|
1041
|
+
props,
|
|
1042
|
+
tableContainerRef,
|
|
1043
|
+
trRef,
|
|
1044
|
+
dataSourceCopy,
|
|
1045
|
+
tableHeaderLast,
|
|
1046
|
+
tableHeaders,
|
|
1047
|
+
rowKeyGen
|
|
1048
|
+
}) {
|
|
1049
|
+
const tableHeaderHeight = ref(props.headerRowHeight);
|
|
1050
|
+
const virtualScroll = ref({
|
|
1051
|
+
containerHeight: 0,
|
|
1052
|
+
rowHeight: props.rowHeight,
|
|
1053
|
+
pageSize: 10,
|
|
1054
|
+
startIndex: 0,
|
|
1055
|
+
endIndex: 0,
|
|
1056
|
+
offsetTop: 0,
|
|
1057
|
+
scrollTop: 0,
|
|
1058
|
+
scrollHeight: 0
|
|
1059
|
+
});
|
|
1060
|
+
const virtualScrollX = ref({
|
|
1061
|
+
containerWidth: 0,
|
|
1062
|
+
scrollWidth: 0,
|
|
1063
|
+
startIndex: 0,
|
|
1064
|
+
endIndex: 0,
|
|
1065
|
+
offsetLeft: 0,
|
|
1066
|
+
scrollLeft: 0
|
|
1067
|
+
});
|
|
1068
|
+
const hasExpandCol = computed(() => {
|
|
1069
|
+
return tableHeaderLast.value.some((col) => col.type === "expand");
|
|
1070
|
+
});
|
|
1071
|
+
const virtual_on = computed(() => {
|
|
1072
|
+
return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
|
|
1073
|
+
});
|
|
1074
|
+
const virtual_dataSourcePart = computed(() => {
|
|
1075
|
+
if (!virtual_on.value) return dataSourceCopy.value;
|
|
1076
|
+
const { startIndex, endIndex } = virtualScroll.value;
|
|
1077
|
+
return dataSourceCopy.value.slice(startIndex, endIndex + 1);
|
|
1078
|
+
});
|
|
1079
|
+
const virtual_offsetBottom = computed(() => {
|
|
1080
|
+
if (!virtual_on.value) return 0;
|
|
1081
|
+
const { startIndex, rowHeight } = virtualScroll.value;
|
|
1082
|
+
return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
|
|
1083
|
+
});
|
|
1084
|
+
const virtualX_on = computed(() => {
|
|
1085
|
+
return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalculatedColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
|
|
1086
|
+
});
|
|
1087
|
+
const virtualX_columnPart = computed(() => {
|
|
1088
|
+
const tableHeaderLastValue = tableHeaderLast.value;
|
|
1089
|
+
if (virtualX_on.value) {
|
|
1090
|
+
const leftCols = [];
|
|
1091
|
+
const rightCols = [];
|
|
1092
|
+
const { startIndex, endIndex } = virtualScrollX.value;
|
|
1093
|
+
for (let i = 0; i < startIndex; i++) {
|
|
1094
|
+
const col = tableHeaderLastValue[i];
|
|
1095
|
+
if ((col == null ? void 0 : col.fixed) === "left") leftCols.push(col);
|
|
1096
|
+
}
|
|
1097
|
+
for (let i = endIndex; i < tableHeaderLastValue.length; i++) {
|
|
1098
|
+
const col = tableHeaderLastValue[i];
|
|
1099
|
+
if ((col == null ? void 0 : col.fixed) === "right") rightCols.push(col);
|
|
1100
|
+
}
|
|
1101
|
+
const mainColumns = tableHeaderLastValue.slice(startIndex, endIndex);
|
|
1102
|
+
return leftCols.concat(mainColumns).concat(rightCols);
|
|
1103
|
+
}
|
|
1104
|
+
return tableHeaderLastValue;
|
|
1105
|
+
});
|
|
1106
|
+
const virtualX_offsetRight = computed(() => {
|
|
1107
|
+
if (!virtualX_on.value) return 0;
|
|
1108
|
+
let width = 0;
|
|
1109
|
+
const tableHeaderLastValue = tableHeaderLast.value;
|
|
1110
|
+
for (let i = virtualScrollX.value.endIndex; i < tableHeaderLastValue.length; i++) {
|
|
1111
|
+
const col = tableHeaderLastValue[i];
|
|
1112
|
+
if (col.fixed !== "right") {
|
|
1113
|
+
width += getCalculatedColWidth(col);
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
return width;
|
|
1117
|
+
});
|
|
1118
|
+
function getTableHeaderHeight() {
|
|
1119
|
+
const { headerRowHeight } = props;
|
|
1120
|
+
return headerRowHeight * tableHeaders.value.length;
|
|
1121
|
+
}
|
|
1122
|
+
function initVirtualScroll(height) {
|
|
1123
|
+
initVirtualScrollY(height);
|
|
1124
|
+
initVirtualScrollX();
|
|
1125
|
+
}
|
|
1126
|
+
function initVirtualScrollY(height) {
|
|
1127
|
+
var _a;
|
|
1128
|
+
if (height !== void 0 && typeof height !== "number") {
|
|
1129
|
+
console.warn("initVirtualScrollY: height must be a number");
|
|
1130
|
+
height = 0;
|
|
1131
|
+
}
|
|
1132
|
+
if (!virtual_on.value) return;
|
|
1133
|
+
const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
|
|
1134
|
+
let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
|
|
1135
|
+
const { rowHeight } = virtualScroll.value;
|
|
1136
|
+
const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
|
|
1137
|
+
const { headless } = props;
|
|
1138
|
+
let pageSize = Math.ceil(containerHeight / rowHeight);
|
|
1139
|
+
const headerHeight = getTableHeaderHeight();
|
|
1140
|
+
tableHeaderHeight.value = headerHeight;
|
|
1141
|
+
if (!headless) {
|
|
1142
|
+
const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
|
|
1143
|
+
pageSize -= headerToBodyRowHeightCount;
|
|
1144
|
+
}
|
|
1145
|
+
const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
|
|
1146
|
+
if (scrollTop > maxScrollTop) {
|
|
1147
|
+
scrollTop = maxScrollTop;
|
|
1148
|
+
}
|
|
1149
|
+
Object.assign(virtualScroll.value, { containerHeight, pageSize, scrollHeight });
|
|
1150
|
+
updateVirtualScrollY(scrollTop);
|
|
1151
|
+
}
|
|
1152
|
+
function initVirtualScrollX() {
|
|
1153
|
+
const { clientWidth, scrollLeft, scrollWidth } = tableContainerRef.value || {};
|
|
1154
|
+
virtualScrollX.value.containerWidth = clientWidth || DEFAULT_TABLE_WIDTH;
|
|
1155
|
+
virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
|
|
1156
|
+
updateVirtualScrollX(scrollLeft);
|
|
1157
|
+
}
|
|
1158
|
+
let vue2ScrollYTimeout = null;
|
|
1159
|
+
const autoRowHeightMap = /* @__PURE__ */ new Map();
|
|
1160
|
+
const setAutoHeight = (rowKey, height) => {
|
|
1161
|
+
if (!height) {
|
|
1162
|
+
autoRowHeightMap.delete(rowKey);
|
|
1163
|
+
} else {
|
|
1164
|
+
autoRowHeightMap.set(rowKey, height);
|
|
1165
|
+
}
|
|
1166
|
+
};
|
|
1167
|
+
const clearAllAutoHeight = () => {
|
|
1168
|
+
autoRowHeightMap.clear();
|
|
1169
|
+
};
|
|
1170
|
+
const getAutoRowHeight = (row) => {
|
|
1171
|
+
var _a;
|
|
1172
|
+
const rowKey = String(rowKeyGen(row));
|
|
1173
|
+
const storedHeight = autoRowHeightMap.get(rowKey);
|
|
1174
|
+
let expectedHeight;
|
|
1175
|
+
if (storedHeight) {
|
|
1176
|
+
return storedHeight;
|
|
1177
|
+
}
|
|
1178
|
+
if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
|
|
1179
|
+
if (typeof expectedHeight === "function") {
|
|
1180
|
+
return expectedHeight(row);
|
|
1181
|
+
} else {
|
|
1182
|
+
return expectedHeight;
|
|
1183
|
+
}
|
|
1184
|
+
}
|
|
1185
|
+
return props.rowHeight || DEFAULT_ROW_HEIGHT;
|
|
1186
|
+
};
|
|
1187
|
+
const createGetRowHeightFn = () => {
|
|
1188
|
+
var _a;
|
|
1189
|
+
if (props.autoRowHeight) {
|
|
1190
|
+
return (row) => getAutoRowHeight(row);
|
|
1191
|
+
}
|
|
1192
|
+
if (hasExpandCol.value) {
|
|
1193
|
+
const { rowHeight } = virtualScroll.value;
|
|
1194
|
+
const expandedRowHeight = ((_a = props.expandConfig) == null ? void 0 : _a.height) || rowHeight;
|
|
1195
|
+
return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
|
|
1196
|
+
}
|
|
1197
|
+
return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
|
|
1198
|
+
};
|
|
1199
|
+
function updateVirtualScrollY(sTop = 0) {
|
|
1200
|
+
var _a;
|
|
1201
|
+
const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
|
|
1202
|
+
virtualScroll.value.scrollTop = sTop;
|
|
1203
|
+
if (!virtual_on.value) {
|
|
1204
|
+
return;
|
|
1205
|
+
}
|
|
1206
|
+
const dataSourceCopyTemp = dataSourceCopy.value;
|
|
1207
|
+
const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
|
|
1208
|
+
let startIndex = 0;
|
|
1209
|
+
let autoRowHeightTop = 0;
|
|
1210
|
+
let getRowHeight = null;
|
|
1211
|
+
const dataLength = dataSourceCopyTemp.length;
|
|
1212
|
+
if (autoRowHeight || hasExpandCol.value) {
|
|
1213
|
+
if (autoRowHeight) {
|
|
1214
|
+
(_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
|
|
1215
|
+
const { rowKey } = tr.dataset;
|
|
1216
|
+
if (!rowKey || autoRowHeightMap.has(rowKey)) return;
|
|
1217
|
+
autoRowHeightMap.set(rowKey, tr.offsetHeight);
|
|
1218
|
+
});
|
|
1219
|
+
}
|
|
1220
|
+
getRowHeight = createGetRowHeightFn();
|
|
1221
|
+
for (let i = 0; i < dataLength; i++) {
|
|
1222
|
+
const height = getRowHeight(dataSourceCopyTemp[i]);
|
|
1223
|
+
autoRowHeightTop += height;
|
|
1224
|
+
if (autoRowHeightTop >= sTop) {
|
|
1225
|
+
startIndex = i;
|
|
1226
|
+
autoRowHeightTop -= height;
|
|
1227
|
+
break;
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
} else {
|
|
1231
|
+
startIndex = Math.floor(sTop / rowHeight);
|
|
1232
|
+
}
|
|
1233
|
+
let endIndex = startIndex + pageSize;
|
|
1234
|
+
if (stripe && startIndex > 0 && startIndex % 2) {
|
|
1235
|
+
startIndex -= 1;
|
|
1236
|
+
if (autoRowHeight || hasExpandCol.value) {
|
|
1237
|
+
const height = getRowHeight(dataSourceCopyTemp[startIndex]);
|
|
1238
|
+
autoRowHeightTop -= height;
|
|
1239
|
+
}
|
|
1240
|
+
}
|
|
1241
|
+
startIndex = Math.max(0, startIndex);
|
|
1242
|
+
endIndex = Math.min(endIndex, dataLength);
|
|
1243
|
+
if (startIndex >= endIndex) {
|
|
1244
|
+
startIndex = endIndex - pageSize;
|
|
1245
|
+
}
|
|
1246
|
+
if (vue2ScrollYTimeout) {
|
|
1247
|
+
window.clearTimeout(vue2ScrollYTimeout);
|
|
1248
|
+
}
|
|
1249
|
+
let offsetTop = 0;
|
|
1250
|
+
if (autoRowHeight || hasExpandCol.value) {
|
|
1251
|
+
offsetTop = autoRowHeightTop;
|
|
1252
|
+
} else {
|
|
1253
|
+
if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
|
|
1254
|
+
return;
|
|
1255
|
+
}
|
|
1256
|
+
offsetTop = startIndex * rowHeight;
|
|
1257
|
+
}
|
|
1258
|
+
if (!optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
|
|
1259
|
+
Object.assign(virtualScroll.value, { startIndex, endIndex, offsetTop });
|
|
1260
|
+
} else {
|
|
1261
|
+
virtualScroll.value.endIndex = endIndex;
|
|
1262
|
+
vue2ScrollYTimeout = window.setTimeout(() => {
|
|
1263
|
+
Object.assign(virtualScroll.value, { startIndex, offsetTop });
|
|
1264
|
+
}, VUE2_SCROLL_TIMEOUT_MS);
|
|
1265
|
+
}
|
|
1266
|
+
}
|
|
1267
|
+
let vue2ScrollXTimeout = null;
|
|
1268
|
+
function updateVirtualScrollX(sLeft = 0) {
|
|
1269
|
+
if (!props.virtualX) return;
|
|
1270
|
+
const tableHeaderLastValue = tableHeaderLast.value;
|
|
1271
|
+
const headerLength = tableHeaderLastValue == null ? void 0 : tableHeaderLastValue.length;
|
|
1272
|
+
if (!headerLength) return;
|
|
1273
|
+
const { scrollLeft } = virtualScrollX.value;
|
|
1274
|
+
let startIndex = 0;
|
|
1275
|
+
let offsetLeft = 0;
|
|
1276
|
+
let colWidthSum = 0;
|
|
1277
|
+
let leftColWidthSum = 0;
|
|
1278
|
+
let leftFirstColRestWidth = 0;
|
|
1279
|
+
for (let colIndex = 0; colIndex < headerLength; colIndex++) {
|
|
1280
|
+
const col = tableHeaderLastValue[colIndex];
|
|
1281
|
+
const colWidth = getCalculatedColWidth(col);
|
|
1282
|
+
startIndex++;
|
|
1283
|
+
if (col.fixed === "left") {
|
|
1284
|
+
leftColWidthSum += colWidth;
|
|
1285
|
+
continue;
|
|
1286
|
+
}
|
|
1287
|
+
colWidthSum += colWidth;
|
|
1288
|
+
if (colWidthSum >= sLeft) {
|
|
1289
|
+
offsetLeft = colWidthSum - colWidth;
|
|
1290
|
+
startIndex--;
|
|
1291
|
+
leftFirstColRestWidth = colWidthSum - sLeft;
|
|
1292
|
+
break;
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1295
|
+
colWidthSum = leftFirstColRestWidth;
|
|
1296
|
+
const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
|
|
1297
|
+
let endIndex = headerLength;
|
|
1298
|
+
for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
|
|
1299
|
+
const col = tableHeaderLastValue[colIndex];
|
|
1300
|
+
colWidthSum += getCalculatedColWidth(col);
|
|
1301
|
+
if (colWidthSum >= containerWidth) {
|
|
1302
|
+
endIndex = colIndex + 1;
|
|
1303
|
+
break;
|
|
1304
|
+
}
|
|
1305
|
+
}
|
|
1306
|
+
endIndex = Math.min(endIndex, headerLength);
|
|
1307
|
+
if (vue2ScrollXTimeout) {
|
|
1308
|
+
window.clearTimeout(vue2ScrollXTimeout);
|
|
1309
|
+
}
|
|
1310
|
+
if (!props.optimizeVue2Scroll || sLeft <= scrollLeft) {
|
|
1311
|
+
Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft, scrollLeft: sLeft });
|
|
1312
|
+
} else {
|
|
1313
|
+
Object.assign(virtualScrollX.value, { endIndex, scrollLeft: sLeft });
|
|
1314
|
+
vue2ScrollXTimeout = window.setTimeout(() => {
|
|
1315
|
+
Object.assign(virtualScrollX.value, { startIndex, offsetLeft });
|
|
1316
|
+
}, VUE2_SCROLL_TIMEOUT_MS);
|
|
1317
|
+
}
|
|
1318
|
+
}
|
|
1319
|
+
return {
|
|
1320
|
+
virtualScroll,
|
|
1321
|
+
virtualScrollX,
|
|
1322
|
+
virtual_on,
|
|
1323
|
+
virtual_dataSourcePart,
|
|
1324
|
+
virtual_offsetBottom,
|
|
1325
|
+
virtualX_on,
|
|
1326
|
+
virtualX_columnPart,
|
|
1327
|
+
virtualX_offsetRight,
|
|
1328
|
+
initVirtualScroll,
|
|
1329
|
+
initVirtualScrollY,
|
|
1330
|
+
initVirtualScrollX,
|
|
1331
|
+
updateVirtualScrollY,
|
|
1332
|
+
updateVirtualScrollX,
|
|
1333
|
+
setAutoHeight,
|
|
1334
|
+
clearAllAutoHeight
|
|
1335
|
+
};
|
|
1336
|
+
}
|
|
1337
|
+
const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
|
|
1338
|
+
const _hoisted_2 = {
|
|
1339
|
+
key: 1,
|
|
1340
|
+
class: "table-header-title"
|
|
1341
|
+
};
|
|
1342
|
+
const _hoisted_3 = { class: "table-header-title" };
|
|
1343
|
+
const _hoisted_4 = {
|
|
1344
|
+
key: 3,
|
|
1345
|
+
class: "table-header-sorter"
|
|
1346
|
+
};
|
|
1347
|
+
const _hoisted_5 = ["onMousedown"];
|
|
1348
|
+
const _hoisted_6 = ["onMousedown"];
|
|
1349
|
+
const _hoisted_7 = {
|
|
1350
|
+
key: 0,
|
|
1351
|
+
class: "vt-x-left"
|
|
1352
|
+
};
|
|
1353
|
+
const _hoisted_8 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
|
|
1354
|
+
const _hoisted_9 = {
|
|
1355
|
+
key: 0,
|
|
1356
|
+
class: "vt-x-left"
|
|
1357
|
+
};
|
|
1358
|
+
const _hoisted_10 = ["colspan"];
|
|
1359
|
+
const _hoisted_11 = { class: "table-cell-wrapper" };
|
|
1360
|
+
const _hoisted_12 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
|
|
1361
|
+
const _hoisted_13 = ["title"];
|
|
1362
|
+
const _hoisted_14 = { key: 1 };
|
|
1363
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
1364
|
+
__name: "StkTable",
|
|
1365
|
+
props: {
|
|
1366
|
+
width: { default: "" },
|
|
1367
|
+
minWidth: { default: "" },
|
|
1368
|
+
maxWidth: { default: "" },
|
|
1369
|
+
stripe: { type: Boolean, default: false },
|
|
1370
|
+
fixedMode: { type: Boolean, default: false },
|
|
1371
|
+
headless: { type: Boolean, default: false },
|
|
1372
|
+
theme: { default: "light" },
|
|
1373
|
+
rowHeight: { default: DEFAULT_ROW_HEIGHT },
|
|
1374
|
+
autoRowHeight: { type: Boolean, default: false },
|
|
1375
|
+
rowHover: { type: Boolean, default: true },
|
|
1376
|
+
rowActive: { type: Boolean, default: true },
|
|
1377
|
+
rowCurrentRevokable: { type: Boolean, default: true },
|
|
1378
|
+
headerRowHeight: { default: DEFAULT_ROW_HEIGHT },
|
|
1379
|
+
virtual: { type: Boolean, default: false },
|
|
1380
|
+
virtualX: { type: Boolean, default: false },
|
|
1381
|
+
columns: { default: () => [] },
|
|
1382
|
+
dataSource: { default: () => [] },
|
|
1383
|
+
rowKey: { type: [String, Number, Function], default: "" },
|
|
1384
|
+
colKey: { type: [String, Number, Function], default: "dataIndex" },
|
|
1385
|
+
emptyCellText: { type: [String, Function], default: "--" },
|
|
1386
|
+
noDataFull: { type: Boolean, default: false },
|
|
1387
|
+
showNoData: { type: Boolean, default: true },
|
|
1388
|
+
sortRemote: { type: Boolean, default: false },
|
|
1389
|
+
showHeaderOverflow: { type: Boolean, default: false },
|
|
1390
|
+
showOverflow: { type: Boolean, default: false },
|
|
1391
|
+
showTrHoverClass: { type: Boolean, default: false },
|
|
1392
|
+
cellHover: { type: Boolean, default: false },
|
|
1393
|
+
cellActive: { type: Boolean, default: false },
|
|
1394
|
+
selectedCellRevokable: { type: Boolean, default: true },
|
|
1395
|
+
headerDrag: { default: false },
|
|
1396
|
+
rowClassName: { type: Function, default: () => "" },
|
|
1397
|
+
colResizable: { type: Boolean, default: false },
|
|
1398
|
+
colMinWidth: { default: 10 },
|
|
1399
|
+
bordered: { type: [Boolean, String], default: true },
|
|
1400
|
+
autoResize: { type: [Boolean, Function], default: true },
|
|
1401
|
+
fixedColShadow: { type: Boolean, default: false },
|
|
1402
|
+
optimizeVue2Scroll: { type: Boolean, default: false },
|
|
1403
|
+
sortConfig: { default: () => ({
|
|
1404
|
+
emptyToBottom: false,
|
|
1405
|
+
stringLocaleCompare: false
|
|
1406
|
+
}) },
|
|
1407
|
+
hideHeaderTitle: { type: [Boolean, Array], default: false },
|
|
1408
|
+
highlightConfig: { default: () => ({}) },
|
|
1409
|
+
seqConfig: { default: () => ({}) },
|
|
1410
|
+
expandConfig: { default: () => ({}) },
|
|
1411
|
+
dragRowConfig: { default: () => ({}) },
|
|
1412
|
+
cellFixedMode: { default: "sticky" },
|
|
1413
|
+
smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
|
|
1414
|
+
scrollRowByRow: { type: Boolean, default: false }
|
|
1415
|
+
},
|
|
1416
|
+
emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "update:columns"],
|
|
1417
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
1418
|
+
const stkTableId = createStkTableId();
|
|
1419
|
+
const props = __props;
|
|
1420
|
+
const emits = __emit;
|
|
1421
|
+
const tableContainerRef = ref();
|
|
1422
|
+
const theadRef = ref();
|
|
1423
|
+
const colResizeIndicatorRef = ref();
|
|
1424
|
+
const trRef = ref();
|
|
1425
|
+
const isRelativeMode = ref(IS_LEGACY_MODE ? true : props.cellFixedMode === "relative");
|
|
1426
|
+
const currentRow = shallowRef();
|
|
1427
|
+
const currentRowKey = ref(void 0);
|
|
1428
|
+
const currentSelectedCellKey = ref(void 0);
|
|
1429
|
+
let currentHoverRow = null;
|
|
1430
|
+
const currentHoverRowKey = ref(null);
|
|
1431
|
+
let sortCol = ref();
|
|
1432
|
+
let sortOrderIndex = ref(0);
|
|
1433
|
+
const sortSwitchOrder = [null, "desc", "asc"];
|
|
1434
|
+
const tableHeaders = shallowRef([]);
|
|
1435
|
+
const tableHeaderLast = shallowRef([]);
|
|
1436
|
+
const tableHeadersForCalc = shallowRef([]);
|
|
1437
|
+
const dataSourceCopy = shallowRef([...props.dataSource]);
|
|
1438
|
+
const colKeyGen = computed(() => {
|
|
1439
|
+
if (typeof props.colKey === "function") {
|
|
1440
|
+
return (col) => props.colKey(col);
|
|
1441
|
+
} else {
|
|
1442
|
+
return (col) => col ? col[props.colKey] : null;
|
|
1443
|
+
}
|
|
1444
|
+
});
|
|
1445
|
+
const getEmptyCellText = computed(() => {
|
|
1446
|
+
if (typeof props.emptyCellText === "string") {
|
|
1447
|
+
return () => props.emptyCellText;
|
|
1448
|
+
} else {
|
|
1449
|
+
return (col, row) => props.emptyCellText({ row, col });
|
|
1450
|
+
}
|
|
1451
|
+
});
|
|
1452
|
+
const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
|
|
1453
|
+
const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
|
|
1454
|
+
const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
|
|
1455
|
+
const {
|
|
1456
|
+
virtualScroll,
|
|
1457
|
+
virtualScrollX,
|
|
1458
|
+
virtual_on,
|
|
1459
|
+
virtual_dataSourcePart,
|
|
1460
|
+
virtual_offsetBottom,
|
|
1461
|
+
virtualX_on,
|
|
1462
|
+
virtualX_columnPart,
|
|
1463
|
+
virtualX_offsetRight,
|
|
1464
|
+
initVirtualScroll,
|
|
1465
|
+
initVirtualScrollY,
|
|
1466
|
+
initVirtualScrollX,
|
|
1467
|
+
updateVirtualScrollY,
|
|
1468
|
+
updateVirtualScrollX,
|
|
1469
|
+
setAutoHeight,
|
|
1470
|
+
clearAllAutoHeight
|
|
1471
|
+
} = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen });
|
|
1472
|
+
const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
|
|
1473
|
+
const getFixedStyle = useFixedStyle({
|
|
1474
|
+
props,
|
|
1475
|
+
isRelativeMode,
|
|
1476
|
+
getFixedColPosition,
|
|
1477
|
+
virtualScroll,
|
|
1478
|
+
virtualScrollX,
|
|
1479
|
+
virtualX_on,
|
|
1480
|
+
virtualX_offsetRight
|
|
1481
|
+
});
|
|
1482
|
+
const { highlightSteps, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, stkTableId, tableContainerRef });
|
|
1483
|
+
if (props.autoResize) {
|
|
1484
|
+
useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs: 200 });
|
|
1485
|
+
}
|
|
1486
|
+
useKeyboardArrowScroll(tableContainerRef, {
|
|
1487
|
+
props,
|
|
1488
|
+
scrollTo,
|
|
1489
|
+
virtualScroll,
|
|
1490
|
+
virtualScrollX,
|
|
1491
|
+
tableHeaders,
|
|
1492
|
+
virtual_on
|
|
1493
|
+
});
|
|
1494
|
+
const { fixedCols, fixedColClassMap, updateFixedShadow } = useFixedCol({
|
|
1495
|
+
props,
|
|
1496
|
+
colKeyGen,
|
|
1497
|
+
getFixedColPosition,
|
|
1498
|
+
tableContainerRef,
|
|
1499
|
+
tableHeaders,
|
|
1500
|
+
tableHeadersForCalc
|
|
1501
|
+
});
|
|
1502
|
+
const { isColResizing, onThResizeMouseDown, colResizeOn } = useColResize({
|
|
1503
|
+
props,
|
|
1504
|
+
emits,
|
|
1505
|
+
colKeyGen,
|
|
1506
|
+
colResizeIndicatorRef,
|
|
1507
|
+
tableContainerRef,
|
|
1508
|
+
tableHeaderLast,
|
|
1509
|
+
fixedCols
|
|
1510
|
+
});
|
|
1511
|
+
watch(
|
|
1512
|
+
() => props.columns,
|
|
1513
|
+
() => {
|
|
1514
|
+
dealColumns();
|
|
1515
|
+
nextTick(() => {
|
|
1516
|
+
initVirtualScrollX();
|
|
1517
|
+
updateFixedShadow();
|
|
1518
|
+
});
|
|
1519
|
+
}
|
|
1520
|
+
);
|
|
1521
|
+
watch(
|
|
1522
|
+
() => props.virtual,
|
|
1523
|
+
() => {
|
|
1524
|
+
nextTick(() => {
|
|
1525
|
+
initVirtualScrollY();
|
|
1526
|
+
});
|
|
1527
|
+
}
|
|
1528
|
+
);
|
|
1529
|
+
watch(
|
|
1530
|
+
() => props.virtualX,
|
|
1531
|
+
() => {
|
|
1532
|
+
dealColumns();
|
|
1533
|
+
nextTick(() => {
|
|
1534
|
+
initVirtualScrollX();
|
|
1535
|
+
updateFixedShadow();
|
|
1536
|
+
});
|
|
1537
|
+
}
|
|
1538
|
+
);
|
|
1539
|
+
watch(
|
|
1540
|
+
() => props.dataSource,
|
|
1541
|
+
(val) => {
|
|
1542
|
+
if (!val) {
|
|
1543
|
+
console.warn("invalid dataSource");
|
|
1544
|
+
return;
|
|
1545
|
+
}
|
|
1546
|
+
let needInitVirtualScrollY = false;
|
|
1547
|
+
if (dataSourceCopy.value.length !== val.length) {
|
|
1548
|
+
needInitVirtualScrollY = true;
|
|
1549
|
+
}
|
|
1550
|
+
dataSourceCopy.value = [...val];
|
|
1551
|
+
if (needInitVirtualScrollY) {
|
|
1552
|
+
nextTick(() => initVirtualScrollY());
|
|
1553
|
+
}
|
|
1554
|
+
if (sortCol.value) {
|
|
1555
|
+
const column = tableHeaderLast.value.find((it) => colKeyGen.value(it) === sortCol.value);
|
|
1556
|
+
onColumnSort(column, false);
|
|
1557
|
+
}
|
|
1558
|
+
},
|
|
1559
|
+
{
|
|
1560
|
+
deep: false
|
|
1561
|
+
}
|
|
1562
|
+
);
|
|
1563
|
+
watch(
|
|
1564
|
+
() => props.fixedColShadow,
|
|
1565
|
+
() => updateFixedShadow()
|
|
1566
|
+
);
|
|
1567
|
+
dealColumns();
|
|
1568
|
+
onMounted(() => {
|
|
1569
|
+
initVirtualScroll();
|
|
1570
|
+
updateFixedShadow();
|
|
1571
|
+
dealDefaultSorter();
|
|
1572
|
+
});
|
|
1573
|
+
function dealDefaultSorter() {
|
|
1574
|
+
if (!props.sortConfig.defaultSort) return;
|
|
1575
|
+
const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
|
|
1576
|
+
setSorter(key || dataIndex, order, { force: false, silent });
|
|
1577
|
+
}
|
|
1578
|
+
function dealColumns() {
|
|
1579
|
+
const tableHeadersTemp = [];
|
|
1580
|
+
const tableHeadersForCalcTemp = [];
|
|
1581
|
+
let copyColumn = props.columns;
|
|
1582
|
+
if (isRelativeMode.value) {
|
|
1583
|
+
let leftCol = [];
|
|
1584
|
+
let centerCol = [];
|
|
1585
|
+
let rightCol = [];
|
|
1586
|
+
copyColumn.forEach((col) => {
|
|
1587
|
+
if (col.fixed === "left") {
|
|
1588
|
+
leftCol.push(col);
|
|
1589
|
+
} else if (col.fixed === "right") {
|
|
1590
|
+
rightCol.push(col);
|
|
1591
|
+
} else {
|
|
1592
|
+
centerCol.push(col);
|
|
1593
|
+
}
|
|
1594
|
+
});
|
|
1595
|
+
copyColumn = [...leftCol, ...centerCol, ...rightCol];
|
|
1596
|
+
}
|
|
1597
|
+
const maxDeep = howDeepTheHeader(copyColumn);
|
|
1598
|
+
const tempHeaderLast = [];
|
|
1599
|
+
if (maxDeep > 0 && props.virtualX) {
|
|
1600
|
+
console.error("多级表头不支持横向虚拟滚动");
|
|
1601
|
+
}
|
|
1602
|
+
for (let i = 0; i <= maxDeep; i++) {
|
|
1603
|
+
tableHeadersTemp[i] = [];
|
|
1604
|
+
tableHeadersForCalcTemp[i] = [];
|
|
1605
|
+
}
|
|
1606
|
+
function flat(arr, parent, depth = 0) {
|
|
1607
|
+
let allChildrenLen = 0;
|
|
1608
|
+
let allChildrenWidthSum = 0;
|
|
1609
|
+
arr.forEach((col) => {
|
|
1610
|
+
col.__PARENT__ = parent;
|
|
1611
|
+
let colChildrenLen = 1;
|
|
1612
|
+
let colWidth = 0;
|
|
1613
|
+
if (col.children) {
|
|
1614
|
+
const [len, widthSum] = flat(
|
|
1615
|
+
col.children,
|
|
1616
|
+
col,
|
|
1617
|
+
depth + 1
|
|
1618
|
+
/* , col.fixed */
|
|
1619
|
+
);
|
|
1620
|
+
colChildrenLen = len;
|
|
1621
|
+
colWidth = widthSum;
|
|
1622
|
+
tableHeadersForCalcTemp[depth].push(col);
|
|
1623
|
+
} else {
|
|
1624
|
+
colWidth = getColWidth(col);
|
|
1625
|
+
tempHeaderLast.push(col);
|
|
1626
|
+
for (let i = depth; i <= maxDeep; i++) {
|
|
1627
|
+
tableHeadersForCalcTemp[i].push(col);
|
|
1628
|
+
}
|
|
1629
|
+
}
|
|
1630
|
+
col.__WIDTH__ = colWidth;
|
|
1631
|
+
tableHeadersTemp[depth].push(col);
|
|
1632
|
+
const rowSpan = col.children ? 1 : maxDeep - depth + 1;
|
|
1633
|
+
const colSpan = colChildrenLen;
|
|
1634
|
+
if (rowSpan > 1) {
|
|
1635
|
+
col.rowSpan = rowSpan;
|
|
1636
|
+
}
|
|
1637
|
+
if (colSpan > 1) {
|
|
1638
|
+
col.colSpan = colSpan;
|
|
1639
|
+
}
|
|
1640
|
+
allChildrenLen += colChildrenLen;
|
|
1641
|
+
allChildrenWidthSum += colWidth;
|
|
1642
|
+
});
|
|
1643
|
+
return [allChildrenLen, allChildrenWidthSum];
|
|
1644
|
+
}
|
|
1645
|
+
flat(copyColumn, null);
|
|
1646
|
+
tableHeaders.value = tableHeadersTemp;
|
|
1647
|
+
tableHeaderLast.value = tempHeaderLast;
|
|
1648
|
+
tableHeadersForCalc.value = tableHeadersForCalcTemp;
|
|
1649
|
+
}
|
|
1650
|
+
function rowKeyGen(row) {
|
|
1651
|
+
if (!row) return row;
|
|
1652
|
+
let key = rowKeyGenStore.get(row);
|
|
1653
|
+
if (!key) {
|
|
1654
|
+
if (row.__ROW_KEY__) {
|
|
1655
|
+
key = row.__ROW_KEY__;
|
|
1656
|
+
} else {
|
|
1657
|
+
key = typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
|
|
1658
|
+
}
|
|
1659
|
+
if (key === void 0) {
|
|
1660
|
+
key = Math.random().toString();
|
|
1661
|
+
}
|
|
1662
|
+
rowKeyGenStore.set(row, key);
|
|
1663
|
+
}
|
|
1664
|
+
return key;
|
|
1665
|
+
}
|
|
1666
|
+
function cellKeyGen(row, col) {
|
|
1667
|
+
return rowKeyGen(row) + "--" + colKeyGen.value(col);
|
|
1668
|
+
}
|
|
1669
|
+
const cellStyleMap = computed(() => {
|
|
1670
|
+
const thMap = /* @__PURE__ */ new Map();
|
|
1671
|
+
const tdMap = /* @__PURE__ */ new Map();
|
|
1672
|
+
tableHeaders.value.forEach((cols, depth) => {
|
|
1673
|
+
cols.forEach((col) => {
|
|
1674
|
+
const colKey = colKeyGen.value(col);
|
|
1675
|
+
const width = props.virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
|
|
1676
|
+
const style = {
|
|
1677
|
+
width
|
|
1678
|
+
};
|
|
1679
|
+
if (props.colResizable) {
|
|
1680
|
+
style.minWidth = width;
|
|
1681
|
+
style.maxWidth = width;
|
|
1682
|
+
} else {
|
|
1683
|
+
style.minWidth = transformWidthToStr(col.minWidth) ?? width;
|
|
1684
|
+
style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
|
|
1685
|
+
}
|
|
1686
|
+
thMap.set(colKey, {
|
|
1687
|
+
...style,
|
|
1688
|
+
...getFixedStyle(TagType.TH, col, depth),
|
|
1689
|
+
textAlign: col.headerAlign
|
|
1690
|
+
});
|
|
1691
|
+
tdMap.set(colKey, {
|
|
1692
|
+
...style,
|
|
1693
|
+
...getFixedStyle(TagType.TD, col, depth),
|
|
1694
|
+
textAlign: col.align
|
|
1695
|
+
});
|
|
1696
|
+
});
|
|
1697
|
+
});
|
|
1698
|
+
return {
|
|
1699
|
+
[TagType.TH]: thMap,
|
|
1700
|
+
[TagType.TD]: tdMap
|
|
1701
|
+
};
|
|
1702
|
+
});
|
|
1703
|
+
function getHeaderTitle(col) {
|
|
1704
|
+
const colKey = colKeyGen.value(col);
|
|
1705
|
+
if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey)) {
|
|
1706
|
+
return "";
|
|
1707
|
+
}
|
|
1708
|
+
return col.title || "";
|
|
1709
|
+
}
|
|
1710
|
+
function onColumnSort(col, click = true, options = {}) {
|
|
1711
|
+
if (!col) {
|
|
1712
|
+
console.warn("onColumnSort: col is not found");
|
|
1713
|
+
return;
|
|
1714
|
+
}
|
|
1715
|
+
if (!col.sorter && click) {
|
|
1716
|
+
return;
|
|
1717
|
+
}
|
|
1718
|
+
options = { force: false, emit: false, ...options };
|
|
1719
|
+
const colKey = colKeyGen.value(col);
|
|
1720
|
+
if (sortCol.value !== colKey) {
|
|
1721
|
+
sortCol.value = colKey;
|
|
1722
|
+
sortOrderIndex.value = 0;
|
|
1723
|
+
}
|
|
1724
|
+
if (click) sortOrderIndex.value++;
|
|
1725
|
+
sortOrderIndex.value = sortOrderIndex.value % 3;
|
|
1726
|
+
let order = sortSwitchOrder[sortOrderIndex.value];
|
|
1727
|
+
const sortConfig = { ...props.sortConfig, ...col.sortConfig };
|
|
1728
|
+
const defaultSort = sortConfig.defaultSort;
|
|
1729
|
+
if (!order && defaultSort) {
|
|
1730
|
+
const colKey2 = defaultSort.key || defaultSort.dataIndex;
|
|
1731
|
+
if (!colKey2) {
|
|
1732
|
+
console.error("sortConfig.defaultSort key or dataIndex is required");
|
|
1733
|
+
return;
|
|
1734
|
+
}
|
|
1735
|
+
order = defaultSort.order || "desc";
|
|
1736
|
+
sortOrderIndex.value = sortSwitchOrder.indexOf(order);
|
|
1737
|
+
sortCol.value = colKey2;
|
|
1738
|
+
col = null;
|
|
1739
|
+
for (const row of tableHeaders.value) {
|
|
1740
|
+
const c = row.find((item) => colKeyGen.value(item) === colKey2);
|
|
1741
|
+
if (c) {
|
|
1742
|
+
col = c;
|
|
1743
|
+
break;
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
}
|
|
1747
|
+
if (!props.sortRemote || options.force) {
|
|
1748
|
+
const sortOption = col || defaultSort;
|
|
1749
|
+
if (sortOption) {
|
|
1750
|
+
dataSourceCopy.value = tableSort(sortOption, order, props.dataSource, sortConfig);
|
|
1751
|
+
}
|
|
1752
|
+
}
|
|
1753
|
+
if (click || options.emit) {
|
|
1754
|
+
emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
|
|
1755
|
+
}
|
|
1756
|
+
}
|
|
1757
|
+
function onRowClick(e, row) {
|
|
1758
|
+
emits("row-click", e, row);
|
|
1759
|
+
const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
|
|
1760
|
+
if (isCurrentRow) {
|
|
1761
|
+
if (!props.rowCurrentRevokable) {
|
|
1762
|
+
return;
|
|
1763
|
+
}
|
|
1764
|
+
currentRow.value = void 0;
|
|
1765
|
+
currentRowKey.value = void 0;
|
|
1766
|
+
emits("current-change", e, row, { select: false });
|
|
1767
|
+
} else {
|
|
1768
|
+
currentRow.value = row;
|
|
1769
|
+
currentRowKey.value = rowKeyGen(row);
|
|
1770
|
+
emits("current-change", e, row, { select: true });
|
|
1771
|
+
}
|
|
1772
|
+
}
|
|
1773
|
+
function onRowDblclick(e, row) {
|
|
1774
|
+
emits("row-dblclick", e, row);
|
|
1775
|
+
}
|
|
1776
|
+
function onHeaderMenu(e) {
|
|
1777
|
+
emits("header-row-menu", e);
|
|
1778
|
+
}
|
|
1779
|
+
function onRowMenu(e, row) {
|
|
1780
|
+
emits("row-menu", e, row);
|
|
1781
|
+
}
|
|
1782
|
+
function onCellClick(e, row, col) {
|
|
1783
|
+
if (props.cellActive) {
|
|
1784
|
+
const cellKey = cellKeyGen(row, col);
|
|
1785
|
+
if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
|
|
1786
|
+
currentSelectedCellKey.value = void 0;
|
|
1787
|
+
emits("cell-selected", e, { select: false, row, col });
|
|
1788
|
+
} else {
|
|
1789
|
+
currentSelectedCellKey.value = cellKey;
|
|
1790
|
+
emits("cell-selected", e, { select: true, row, col });
|
|
1791
|
+
}
|
|
1792
|
+
}
|
|
1793
|
+
emits("cell-click", e, row, col);
|
|
1794
|
+
}
|
|
1795
|
+
function onHeaderCellClick(e, col) {
|
|
1796
|
+
emits("header-cell-click", e, col);
|
|
1797
|
+
}
|
|
1798
|
+
function onCellMouseEnter(e, row, col) {
|
|
1799
|
+
emits("cell-mouseenter", e, row, col);
|
|
1800
|
+
}
|
|
1801
|
+
function onCellMouseLeave(e, row, col) {
|
|
1802
|
+
emits("cell-mouseleave", e, row, col);
|
|
1803
|
+
}
|
|
1804
|
+
function onCellMouseOver(e, row, col) {
|
|
1805
|
+
emits("cell-mouseover", e, row, col);
|
|
1806
|
+
}
|
|
1807
|
+
function onCellMouseDown(e, row, col) {
|
|
1808
|
+
emits("cell-mousedown", e, row, col);
|
|
1809
|
+
}
|
|
1810
|
+
function onTableWheel(e) {
|
|
1811
|
+
if (props.smoothScroll) {
|
|
1812
|
+
return;
|
|
1813
|
+
}
|
|
1814
|
+
if (isColResizing.value) {
|
|
1815
|
+
e.stopPropagation();
|
|
1816
|
+
return;
|
|
1817
|
+
}
|
|
1818
|
+
const dom = tableContainerRef.value;
|
|
1819
|
+
if (!dom) return;
|
|
1820
|
+
const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
|
|
1821
|
+
const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
|
|
1822
|
+
const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
|
|
1823
|
+
const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
|
|
1824
|
+
const { deltaY, deltaX } = e;
|
|
1825
|
+
if (virtual_on && deltaY) {
|
|
1826
|
+
if (deltaY > 0 && !isScrollBottom || deltaY < 0 && scrollTop > 0) {
|
|
1827
|
+
e.preventDefault();
|
|
1828
|
+
}
|
|
1829
|
+
dom.scrollTop += deltaY;
|
|
1830
|
+
}
|
|
1831
|
+
if (virtualX_on && deltaX) {
|
|
1832
|
+
if (deltaX > 0 && !isScrollRight || deltaX < 0 && scrollLeft > 0) {
|
|
1833
|
+
e.preventDefault();
|
|
1834
|
+
}
|
|
1835
|
+
dom.scrollLeft += deltaX;
|
|
1836
|
+
}
|
|
1837
|
+
}
|
|
1838
|
+
function onTableScroll(e) {
|
|
1839
|
+
if (!(e == null ? void 0 : e.target)) return;
|
|
1840
|
+
const { scrollTop, scrollLeft } = e.target;
|
|
1841
|
+
const { scrollTop: vScrollTop } = virtualScroll.value;
|
|
1842
|
+
const { scrollLeft: vScrollLeft } = virtualScrollX.value;
|
|
1843
|
+
const isYScroll = scrollTop !== vScrollTop;
|
|
1844
|
+
const isXScroll = scrollLeft !== vScrollLeft;
|
|
1845
|
+
if (isYScroll) {
|
|
1846
|
+
updateVirtualScrollY(scrollTop);
|
|
1847
|
+
}
|
|
1848
|
+
if (isXScroll) {
|
|
1849
|
+
if (virtualX_on.value) {
|
|
1850
|
+
updateVirtualScrollX(scrollLeft);
|
|
1851
|
+
} else {
|
|
1852
|
+
virtualScrollX.value.scrollLeft = scrollLeft;
|
|
1853
|
+
}
|
|
1854
|
+
updateFixedShadow(virtualScrollX);
|
|
1855
|
+
}
|
|
1856
|
+
const { startIndex, endIndex } = virtualScroll.value;
|
|
1857
|
+
const data = { startIndex, endIndex };
|
|
1858
|
+
if (isYScroll) {
|
|
1859
|
+
emits("scroll", e, data);
|
|
1860
|
+
}
|
|
1861
|
+
if (isXScroll) {
|
|
1862
|
+
emits("scroll-x", e);
|
|
1863
|
+
}
|
|
1864
|
+
}
|
|
1865
|
+
function onTrMouseOver(_e, row) {
|
|
1866
|
+
if (currentHoverRow === row) return;
|
|
1867
|
+
currentHoverRow = row;
|
|
1868
|
+
currentHoverRowKey.value = rowKeyGen(row);
|
|
1869
|
+
}
|
|
1870
|
+
function setCurrentRow(rowKeyOrRow, option = { silent: false }) {
|
|
1871
|
+
if (!dataSourceCopy.value.length) return;
|
|
1872
|
+
const select = rowKeyOrRow !== void 0;
|
|
1873
|
+
if (!select) {
|
|
1874
|
+
currentRow.value = void 0;
|
|
1875
|
+
currentRowKey.value = void 0;
|
|
1876
|
+
} else if (typeof rowKeyOrRow === "string") {
|
|
1877
|
+
const row = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKeyOrRow);
|
|
1878
|
+
if (!row) {
|
|
1879
|
+
console.warn("setCurrentRow failed.rowKey:", rowKeyOrRow);
|
|
1880
|
+
return;
|
|
1881
|
+
}
|
|
1882
|
+
currentRow.value = row;
|
|
1883
|
+
currentRowKey.value = rowKeyOrRow;
|
|
1884
|
+
} else {
|
|
1885
|
+
currentRow.value = rowKeyOrRow;
|
|
1886
|
+
currentRowKey.value = rowKeyGen(rowKeyOrRow);
|
|
1887
|
+
}
|
|
1888
|
+
if (!option.silent) {
|
|
1889
|
+
emits(
|
|
1890
|
+
"current-change",
|
|
1891
|
+
/** no Event */
|
|
1892
|
+
null,
|
|
1893
|
+
currentRow.value,
|
|
1894
|
+
{ select }
|
|
1895
|
+
);
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
function setSelectedCell(row, col, option = { silent: false }) {
|
|
1899
|
+
if (!dataSourceCopy.value.length) return;
|
|
1900
|
+
const select = row !== void 0 && col !== void 0;
|
|
1901
|
+
currentSelectedCellKey.value = select ? cellKeyGen(row, col) : void 0;
|
|
1902
|
+
if (!option.silent) {
|
|
1903
|
+
emits(
|
|
1904
|
+
"cell-selected",
|
|
1905
|
+
/** no Event */
|
|
1906
|
+
null,
|
|
1907
|
+
{ row, col, select }
|
|
1908
|
+
);
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
function setSorter(colKey, order, option = {}) {
|
|
1912
|
+
var _a;
|
|
1913
|
+
const newOption = { silent: true, sortOption: null, sort: true, ...option };
|
|
1914
|
+
sortCol.value = colKey;
|
|
1915
|
+
sortOrderIndex.value = sortSwitchOrder.indexOf(order);
|
|
1916
|
+
if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
|
|
1917
|
+
const column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGen.value(it) === sortCol.value);
|
|
1918
|
+
if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
|
|
1919
|
+
else console.warn("Can not find column by key:", sortCol.value);
|
|
1920
|
+
}
|
|
1921
|
+
return dataSourceCopy.value;
|
|
1922
|
+
}
|
|
1923
|
+
function resetSorter() {
|
|
1924
|
+
sortCol.value = void 0;
|
|
1925
|
+
sortOrderIndex.value = 0;
|
|
1926
|
+
dataSourceCopy.value = [...props.dataSource];
|
|
1927
|
+
}
|
|
1928
|
+
function scrollTo(top = 0, left = 0) {
|
|
1929
|
+
if (!tableContainerRef.value) return;
|
|
1930
|
+
if (top !== null) tableContainerRef.value.scrollTop = top;
|
|
1931
|
+
if (left !== null) tableContainerRef.value.scrollLeft = left;
|
|
1932
|
+
}
|
|
1933
|
+
function getTableData() {
|
|
1934
|
+
return toRaw(dataSourceCopy.value);
|
|
1935
|
+
}
|
|
1936
|
+
function getSortColumns() {
|
|
1937
|
+
const sortOrder = sortSwitchOrder[sortOrderIndex.value];
|
|
1938
|
+
if (!sortOrder) return [];
|
|
1939
|
+
return [{ key: sortCol.value, order: sortOrder }];
|
|
1940
|
+
}
|
|
1941
|
+
function toggleExpandRow(row, col) {
|
|
1942
|
+
const isExpand = (row == null ? void 0 : row.__EXPANDED__) === col ? !(row == null ? void 0 : row.__EXPANDED__) : true;
|
|
1943
|
+
setRowExpand(row, isExpand, { col });
|
|
1944
|
+
}
|
|
1945
|
+
function setRowExpand(rowKeyOrRow, expand, data) {
|
|
1946
|
+
let rowKey;
|
|
1947
|
+
if (typeof rowKeyOrRow === "string") {
|
|
1948
|
+
rowKey = rowKeyOrRow;
|
|
1949
|
+
} else {
|
|
1950
|
+
rowKey = rowKeyGen(rowKeyOrRow);
|
|
1951
|
+
}
|
|
1952
|
+
const tempData = [...dataSourceCopy.value];
|
|
1953
|
+
const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
|
|
1954
|
+
if (index === -1) {
|
|
1955
|
+
console.warn("expandRow failed.rowKey:", rowKey);
|
|
1956
|
+
return;
|
|
1957
|
+
}
|
|
1958
|
+
for (let i = index + 1; i < tempData.length; i++) {
|
|
1959
|
+
const item = tempData[i];
|
|
1960
|
+
const rowKey2 = item.__ROW_KEY__;
|
|
1961
|
+
if (rowKey2 == null ? void 0 : rowKey2.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
|
|
1962
|
+
tempData.splice(i, 1);
|
|
1963
|
+
i--;
|
|
1964
|
+
} else {
|
|
1965
|
+
break;
|
|
1966
|
+
}
|
|
1967
|
+
}
|
|
1968
|
+
const row = tempData[index];
|
|
1969
|
+
const col = (data == null ? void 0 : data.col) || null;
|
|
1970
|
+
if (expand) {
|
|
1971
|
+
const newExpandRow = {
|
|
1972
|
+
__ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
|
|
1973
|
+
__EXPANDED_ROW__: row,
|
|
1974
|
+
__EXPANDED_COL__: col
|
|
1975
|
+
};
|
|
1976
|
+
tempData.splice(index + 1, 0, newExpandRow);
|
|
1977
|
+
}
|
|
1978
|
+
if (row) {
|
|
1979
|
+
row.__EXPANDED__ = expand ? col : null;
|
|
1980
|
+
}
|
|
1981
|
+
dataSourceCopy.value = tempData;
|
|
1982
|
+
if (!(data == null ? void 0 : data.silent)) {
|
|
1983
|
+
emits("toggle-row-expand", { expanded: Boolean(expand), row, col });
|
|
1984
|
+
}
|
|
1985
|
+
}
|
|
1986
|
+
__expose({
|
|
1987
|
+
/**
|
|
1988
|
+
* 重新计算虚拟列表宽高
|
|
1989
|
+
*
|
|
1990
|
+
* en: calc virtual scroll x & y info
|
|
1991
|
+
* @see {@link initVirtualScroll}
|
|
1992
|
+
*/
|
|
1993
|
+
initVirtualScroll,
|
|
1994
|
+
/**
|
|
1995
|
+
* 重新计算虚拟列表宽度
|
|
1996
|
+
*
|
|
1997
|
+
* en: calc virtual scroll x
|
|
1998
|
+
* @see {@link initVirtualScrollX}
|
|
1999
|
+
*/
|
|
2000
|
+
initVirtualScrollX,
|
|
2001
|
+
/**
|
|
2002
|
+
* 重新计算虚拟列表高度
|
|
2003
|
+
*
|
|
2004
|
+
* en: calc virtual scroll y
|
|
2005
|
+
* @see {@link initVirtualScrollY}
|
|
2006
|
+
*/
|
|
2007
|
+
initVirtualScrollY,
|
|
2008
|
+
/**
|
|
2009
|
+
* 选中一行
|
|
2010
|
+
*
|
|
2011
|
+
* en:select a row
|
|
2012
|
+
* @see {@link setCurrentRow}
|
|
2013
|
+
*/
|
|
2014
|
+
setCurrentRow,
|
|
2015
|
+
/**
|
|
2016
|
+
* 取消选中单元格
|
|
2017
|
+
*
|
|
2018
|
+
* en: set highlight active cell (props.cellActive=true)
|
|
2019
|
+
* @see {@link setSelectedCell}
|
|
2020
|
+
*/
|
|
2021
|
+
setSelectedCell,
|
|
2022
|
+
/**
|
|
2023
|
+
* 设置高亮单元格
|
|
2024
|
+
*
|
|
2025
|
+
* en: Set highlight cell
|
|
2026
|
+
* @see {@link setHighlightDimCell}
|
|
2027
|
+
*/
|
|
2028
|
+
setHighlightDimCell,
|
|
2029
|
+
/**
|
|
2030
|
+
* 设置高亮行
|
|
2031
|
+
*
|
|
2032
|
+
* en: Set highlight row
|
|
2033
|
+
* @see {@link setHighlightDimRow}
|
|
2034
|
+
*/
|
|
2035
|
+
setHighlightDimRow,
|
|
2036
|
+
/**
|
|
2037
|
+
* 表格排序列colKey
|
|
2038
|
+
*
|
|
2039
|
+
* en: Table sort column colKey
|
|
2040
|
+
*/
|
|
2041
|
+
sortCol,
|
|
2042
|
+
/**
|
|
2043
|
+
* 表格排序列顺序
|
|
2044
|
+
*
|
|
2045
|
+
* en: get current sort info
|
|
2046
|
+
* @see {@link getSortColumns}
|
|
2047
|
+
*/
|
|
2048
|
+
getSortColumns,
|
|
2049
|
+
/**
|
|
2050
|
+
* 设置表头排序状态
|
|
2051
|
+
*
|
|
2052
|
+
* en: Set the sort status of the table header
|
|
2053
|
+
* @see {@link setSorter}
|
|
2054
|
+
*/
|
|
2055
|
+
setSorter,
|
|
2056
|
+
/**
|
|
2057
|
+
* 重置sorter状态
|
|
2058
|
+
*
|
|
2059
|
+
* en: Reset the sorter status
|
|
2060
|
+
* @see {@link resetSorter}
|
|
2061
|
+
*/
|
|
2062
|
+
resetSorter,
|
|
2063
|
+
/**
|
|
2064
|
+
* 滚动至
|
|
2065
|
+
*
|
|
2066
|
+
* en: Scroll to
|
|
2067
|
+
* @see {@link scrollTo}
|
|
2068
|
+
*/
|
|
2069
|
+
scrollTo,
|
|
2070
|
+
/**
|
|
2071
|
+
* 获取表格数据
|
|
2072
|
+
*
|
|
2073
|
+
* en: Get table data
|
|
2074
|
+
* @see {@link getTableData}
|
|
2075
|
+
*/
|
|
2076
|
+
getTableData,
|
|
2077
|
+
/**
|
|
2078
|
+
* 设置展开的行
|
|
2079
|
+
*
|
|
2080
|
+
* en: Set expanded rows
|
|
2081
|
+
* @see {@link setRowExpand}
|
|
2082
|
+
*/
|
|
2083
|
+
setRowExpand,
|
|
2084
|
+
/**
|
|
2085
|
+
* 不定行高时,如果行高有变化,则调用此方法更新行高。
|
|
2086
|
+
*
|
|
2087
|
+
* en: When the row height is not fixed, call this method to update the row height if the row height changes.
|
|
2088
|
+
* @see {@link setAutoHeight}
|
|
2089
|
+
*/
|
|
2090
|
+
setAutoHeight,
|
|
2091
|
+
/**
|
|
2092
|
+
* 清除所有行高
|
|
2093
|
+
*
|
|
2094
|
+
* en: Clear all row heights
|
|
2095
|
+
* @see {@link clearAllAutoHeight}
|
|
2096
|
+
*/
|
|
2097
|
+
clearAllAutoHeight
|
|
2098
|
+
});
|
|
2099
|
+
return (_ctx, _cache) => {
|
|
2100
|
+
return openBlock(), createElementBlock("div", {
|
|
2101
|
+
ref_key: "tableContainerRef",
|
|
2102
|
+
ref: tableContainerRef,
|
|
2103
|
+
class: normalizeClass(["stk-table", {
|
|
2104
|
+
virtual: _ctx.virtual,
|
|
2105
|
+
"virtual-x": _ctx.virtualX,
|
|
2106
|
+
"vt-on": unref(virtual_on),
|
|
2107
|
+
dark: _ctx.theme === "dark",
|
|
2108
|
+
headless: _ctx.headless,
|
|
2109
|
+
"is-col-resizing": unref(isColResizing),
|
|
2110
|
+
"col-resizable": props.colResizable,
|
|
2111
|
+
border: props.bordered,
|
|
2112
|
+
"border-h": props.bordered === "h",
|
|
2113
|
+
"border-v": props.bordered === "v",
|
|
2114
|
+
"border-body-v": props.bordered === "body-v",
|
|
2115
|
+
stripe: props.stripe,
|
|
2116
|
+
"cell-hover": props.cellHover,
|
|
2117
|
+
"cell-active": props.cellActive,
|
|
2118
|
+
"row-hover": props.rowHover,
|
|
2119
|
+
"row-active": props.rowActive,
|
|
2120
|
+
"text-overflow": props.showOverflow,
|
|
2121
|
+
"header-text-overflow": props.showHeaderOverflow,
|
|
2122
|
+
"fixed-relative-mode": isRelativeMode.value,
|
|
2123
|
+
"auto-row-height": props.autoRowHeight,
|
|
2124
|
+
"scroll-row-by-row": props.scrollRowByRow
|
|
2125
|
+
}]),
|
|
2126
|
+
style: normalizeStyle({
|
|
2127
|
+
"--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
|
|
2128
|
+
"--header-row-height": props.headerRowHeight + "px",
|
|
2129
|
+
"--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
|
|
2130
|
+
"--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
|
|
2131
|
+
}),
|
|
2132
|
+
onScroll: onTableScroll,
|
|
2133
|
+
onWheel: onTableWheel
|
|
2134
|
+
}, [
|
|
2135
|
+
props.scrollRowByRow && _ctx.virtual ? (openBlock(), createElementBlock("div", {
|
|
2136
|
+
key: 0,
|
|
2137
|
+
class: "row-by-row-table-height",
|
|
2138
|
+
style: normalizeStyle({ height: dataSourceCopy.value.length * unref(virtualScroll).rowHeight + "px" })
|
|
2139
|
+
}, null, 4)) : createCommentVNode("", true),
|
|
2140
|
+
_ctx.colResizable ? (openBlock(), createElementBlock("div", {
|
|
2141
|
+
key: 1,
|
|
2142
|
+
ref_key: "colResizeIndicatorRef",
|
|
2143
|
+
ref: colResizeIndicatorRef,
|
|
2144
|
+
class: "column-resize-indicator"
|
|
2145
|
+
}, null, 512)) : createCommentVNode("", true),
|
|
2146
|
+
createElementVNode("table", {
|
|
2147
|
+
class: normalizeClass(["stk-table-main", {
|
|
2148
|
+
"fixed-mode": props.fixedMode
|
|
2149
|
+
}]),
|
|
2150
|
+
style: normalizeStyle({ width: _ctx.width, minWidth: _ctx.minWidth, maxWidth: _ctx.maxWidth })
|
|
2151
|
+
}, [
|
|
2152
|
+
!_ctx.headless ? (openBlock(), createElementBlock("thead", {
|
|
2153
|
+
key: 0,
|
|
2154
|
+
ref_key: "theadRef",
|
|
2155
|
+
ref: theadRef
|
|
2156
|
+
}, [
|
|
2157
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
|
|
2158
|
+
return openBlock(), createElementBlock("tr", {
|
|
2159
|
+
key: rowIndex,
|
|
2160
|
+
onContextmenu: _cache[3] || (_cache[3] = (e) => onHeaderMenu(e))
|
|
2161
|
+
}, [
|
|
2162
|
+
unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
|
|
2163
|
+
key: 0,
|
|
2164
|
+
class: "vt-x-left",
|
|
2165
|
+
style: normalizeStyle(`min-width:${unref(virtualScrollX).offsetLeft}px;width:${unref(virtualScrollX).offsetLeft}px`)
|
|
2166
|
+
}, null, 4)) : createCommentVNode("", true),
|
|
2167
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
|
|
2168
|
+
return openBlock(), createElementBlock("th", {
|
|
2169
|
+
key: colKeyGen.value(col),
|
|
2170
|
+
"data-col-key": colKeyGen.value(col),
|
|
2171
|
+
draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
|
|
2172
|
+
rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
|
|
2173
|
+
colspan: col.colSpan,
|
|
2174
|
+
style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen.value(col))),
|
|
2175
|
+
title: getHeaderTitle(col),
|
|
2176
|
+
class: normalizeClass([
|
|
2177
|
+
col.sorter ? "sortable" : "",
|
|
2178
|
+
colKeyGen.value(col) === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
|
|
2179
|
+
col.headerClassName,
|
|
2180
|
+
unref(fixedColClassMap).get(colKeyGen.value(col))
|
|
2181
|
+
]),
|
|
2182
|
+
onClick: (e) => {
|
|
2183
|
+
onColumnSort(col);
|
|
2184
|
+
onHeaderCellClick(e, col);
|
|
2185
|
+
},
|
|
2186
|
+
onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
|
|
2187
|
+
(...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
|
|
2188
|
+
onDrop: _cache[1] || (_cache[1] = //@ts-ignore
|
|
2189
|
+
(...args) => unref(onThDrop) && unref(onThDrop)(...args)),
|
|
2190
|
+
onDragover: _cache[2] || (_cache[2] = //@ts-ignore
|
|
2191
|
+
(...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
|
|
2192
|
+
}, [
|
|
2193
|
+
createElementVNode("div", {
|
|
2194
|
+
class: "table-header-cell-wrapper",
|
|
2195
|
+
style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.rowSpan })
|
|
2196
|
+
}, [
|
|
2197
|
+
col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
|
|
2198
|
+
key: 0,
|
|
2199
|
+
col,
|
|
2200
|
+
colIndex,
|
|
2201
|
+
rowIndex
|
|
2202
|
+
}, null, 8, ["col", "colIndex", "rowIndex"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
|
|
2203
|
+
key: 2,
|
|
2204
|
+
col
|
|
2205
|
+
}, () => [
|
|
2206
|
+
createElementVNode("span", _hoisted_3, toDisplayString(col.title), 1)
|
|
2207
|
+
]),
|
|
2208
|
+
col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, [
|
|
2209
|
+
createVNode(SortIcon)
|
|
2210
|
+
])) : createCommentVNode("", true),
|
|
2211
|
+
unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
|
|
2212
|
+
key: 4,
|
|
2213
|
+
class: "table-header-resizer left",
|
|
2214
|
+
onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
|
|
2215
|
+
}, null, 40, _hoisted_5)) : createCommentVNode("", true),
|
|
2216
|
+
unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
|
|
2217
|
+
key: 5,
|
|
2218
|
+
class: "table-header-resizer right",
|
|
2219
|
+
onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
|
|
2220
|
+
}, null, 40, _hoisted_6)) : createCommentVNode("", true)
|
|
2221
|
+
], 4)
|
|
2222
|
+
], 46, _hoisted_1);
|
|
2223
|
+
}), 128)),
|
|
2224
|
+
unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
|
|
2225
|
+
key: 1,
|
|
2226
|
+
class: "vt-x-right",
|
|
2227
|
+
style: normalizeStyle(`min-width:${unref(virtualX_offsetRight)}px;width:${unref(virtualX_offsetRight)}px`)
|
|
2228
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
2229
|
+
], 32);
|
|
2230
|
+
}), 128))
|
|
2231
|
+
], 512)) : createCommentVNode("", true),
|
|
2232
|
+
createElementVNode("tbody", {
|
|
2233
|
+
class: "stk-tbody-main",
|
|
2234
|
+
onDragover: _cache[4] || (_cache[4] = //@ts-ignore
|
|
2235
|
+
(...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
|
|
2236
|
+
onDragenter: _cache[5] || (_cache[5] = //@ts-ignore
|
|
2237
|
+
(...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
|
|
2238
|
+
onDragend: _cache[6] || (_cache[6] = //@ts-ignore
|
|
2239
|
+
(...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
|
|
2240
|
+
}, [
|
|
2241
|
+
unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
|
|
2242
|
+
key: 0,
|
|
2243
|
+
style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
|
|
2244
|
+
class: "padding-top-tr"
|
|
2245
|
+
}, [
|
|
2246
|
+
unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
|
|
2247
|
+
_ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
|
|
2248
|
+
return openBlock(), createElementBlock("td", {
|
|
2249
|
+
key: colKeyGen.value(col),
|
|
2250
|
+
style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
|
|
2251
|
+
}, null, 4);
|
|
2252
|
+
}), 128)) : createCommentVNode("", true)
|
|
2253
|
+
], 4)) : createCommentVNode("", true),
|
|
2254
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
|
|
2255
|
+
var _a, _b;
|
|
2256
|
+
return openBlock(), createElementBlock("tr", {
|
|
2257
|
+
id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex),
|
|
2258
|
+
ref_for: true,
|
|
2259
|
+
ref_key: "trRef",
|
|
2260
|
+
ref: trRef,
|
|
2261
|
+
key: _ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
|
|
2262
|
+
"data-row-key": _ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
|
|
2263
|
+
class: normalizeClass({
|
|
2264
|
+
active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
|
|
2265
|
+
hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
|
|
2266
|
+
[_ctx.rowClassName(row, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)]: true,
|
|
2267
|
+
expanded: row == null ? void 0 : row.__EXPANDED__,
|
|
2268
|
+
"expanded-row": row && row.__EXPANDED_ROW__
|
|
2269
|
+
}),
|
|
2270
|
+
style: normalizeStyle({
|
|
2271
|
+
"--row-height": row && row.__EXPANDED_ROW__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
|
|
2272
|
+
}),
|
|
2273
|
+
onClick: (e) => onRowClick(e, row),
|
|
2274
|
+
onDblclick: (e) => onRowDblclick(e, row),
|
|
2275
|
+
onContextmenu: (e) => onRowMenu(e, row),
|
|
2276
|
+
onMouseover: (e) => onTrMouseOver(e, row),
|
|
2277
|
+
onDrop: (e) => unref(onTrDrop)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
|
|
2278
|
+
}, [
|
|
2279
|
+
unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
|
|
2280
|
+
row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
|
|
2281
|
+
key: 1,
|
|
2282
|
+
colspan: unref(virtualX_columnPart).length
|
|
2283
|
+
}, [
|
|
2284
|
+
createElementVNode("div", _hoisted_11, [
|
|
2285
|
+
renderSlot(_ctx.$slots, "expand", {
|
|
2286
|
+
row: row.__EXPANDED_ROW__,
|
|
2287
|
+
col: row.__EXPANDED_COL__
|
|
2288
|
+
}, () => {
|
|
2289
|
+
var _a2;
|
|
2290
|
+
return [
|
|
2291
|
+
createTextVNode(toDisplayString(((_a2 = row.__EXPANDED_ROW__) == null ? void 0 : _a2[row.__EXPANDED_COL__.dataIndex]) ?? ""), 1)
|
|
2292
|
+
];
|
|
2293
|
+
})
|
|
2294
|
+
])
|
|
2295
|
+
], 8, _hoisted_10)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
|
|
2296
|
+
return openBlock(), createElementBlock("td", {
|
|
2297
|
+
key: colKeyGen.value(col),
|
|
2298
|
+
"data-cell-key": cellKeyGen(row, col),
|
|
2299
|
+
style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col))),
|
|
2300
|
+
class: normalizeClass([
|
|
2301
|
+
col.className,
|
|
2302
|
+
unref(fixedColClassMap).get(colKeyGen.value(col)),
|
|
2303
|
+
{
|
|
2304
|
+
"seq-column": col.type === "seq",
|
|
2305
|
+
active: currentSelectedCellKey.value === cellKeyGen(row, col),
|
|
2306
|
+
"expand-cell": col.type === "expand",
|
|
2307
|
+
expanded: col.type === "expand" && colKeyGen.value(row == null ? void 0 : row.__EXPANDED__) === colKeyGen.value(col),
|
|
2308
|
+
"drag-row-cell": col.type === "dragRow"
|
|
2309
|
+
}
|
|
2310
|
+
]),
|
|
2311
|
+
onClick: (e) => {
|
|
2312
|
+
col.type === "expand" && toggleExpandRow(row, col);
|
|
2313
|
+
onCellClick(e, row, col);
|
|
2314
|
+
},
|
|
2315
|
+
onMousedown: (e) => onCellMouseDown(e, row, col),
|
|
2316
|
+
onMouseenter: (e) => onCellMouseEnter(e, row, col),
|
|
2317
|
+
onMouseleave: (e) => onCellMouseLeave(e, row, col),
|
|
2318
|
+
onMouseover: (e) => onCellMouseOver(e, row, col)
|
|
2319
|
+
}, [
|
|
2320
|
+
col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
|
|
2321
|
+
key: 0,
|
|
2322
|
+
class: "table-cell-wrapper",
|
|
2323
|
+
col,
|
|
2324
|
+
row,
|
|
2325
|
+
rowIndex: (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
|
|
2326
|
+
colIndex,
|
|
2327
|
+
cellValue: row == null ? void 0 : row[col.dataIndex],
|
|
2328
|
+
expanded: (row == null ? void 0 : row.__EXPANDED__) || null
|
|
2329
|
+
}, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded"])) : (openBlock(), createElementBlock("div", {
|
|
2330
|
+
key: 1,
|
|
2331
|
+
class: normalizeClass(["table-cell-wrapper", { "expanded-cell-wrapper": col.type === "expand" }]),
|
|
2332
|
+
title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
|
|
2333
|
+
}, [
|
|
2334
|
+
col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
2335
|
+
createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex + 1), 1)
|
|
2336
|
+
], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
2337
|
+
createVNode(DragHandle, {
|
|
2338
|
+
onDragstart: (e) => unref(onTrDragStart)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
|
|
2339
|
+
}, null, 8, ["onDragstart"]),
|
|
2340
|
+
createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
|
|
2341
|
+
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
|
|
2342
|
+
createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
|
|
2343
|
+
], 64))
|
|
2344
|
+
], 10, _hoisted_13))
|
|
2345
|
+
], 46, _hoisted_12);
|
|
2346
|
+
}), 128))
|
|
2347
|
+
], 46, _hoisted_8);
|
|
2348
|
+
}), 128)),
|
|
2349
|
+
unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
|
|
2350
|
+
key: 1,
|
|
2351
|
+
style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
|
|
2352
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
2353
|
+
], 32)
|
|
2354
|
+
], 6),
|
|
2355
|
+
(!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
|
|
2356
|
+
key: 2,
|
|
2357
|
+
class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
|
|
2358
|
+
}, [
|
|
2359
|
+
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
2360
|
+
_cache[7] || (_cache[7] = createTextVNode("暂无数据"))
|
|
2361
|
+
])
|
|
2362
|
+
], 2)) : createCommentVNode("", true),
|
|
2363
|
+
renderSlot(_ctx.$slots, "customBottom")
|
|
2364
|
+
], 38);
|
|
2365
|
+
};
|
|
2366
|
+
}
|
|
2367
|
+
});
|
|
2368
|
+
export {
|
|
2369
|
+
_sfc_main as StkTable,
|
|
2370
|
+
binarySearch,
|
|
2371
|
+
insertToOrderedArray,
|
|
2372
|
+
strCompare,
|
|
2373
|
+
tableSort
|
|
2374
|
+
};
|