@stonecrop/atable 0.4.22 → 0.4.24
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/dist/assets/index.css +1 -1
- package/dist/atable.d.ts +511 -25
- package/dist/atable.js +1327 -1060
- package/dist/atable.js.map +1 -1
- package/dist/atable.umd.cjs +2 -2
- package/dist/atable.umd.cjs.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/stores/table.d.ts +370 -16
- package/dist/src/stores/table.d.ts.map +1 -1
- package/dist/src/types/index.d.ts +138 -10
- package/dist/src/types/index.d.ts.map +1 -1
- package/dist/stores/table.js +116 -14
- package/package.json +3 -3
- package/src/components/AGanttCell.vue +444 -170
- package/src/components/AGanttConnection.vue +164 -0
- package/src/components/ARow.vue +1 -1
- package/src/components/ATable.vue +107 -77
- package/src/components/ATableHeader.vue +1 -1
- package/src/index.ts +4 -0
- package/src/stores/table.ts +134 -14
- package/src/types/index.ts +159 -10
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useElementBounding } from '@vueuse/core';
|
|
2
|
+
import type { Ref, ShallowRef } from 'vue';
|
|
2
3
|
import { createTableStore } from '../stores/table';
|
|
3
4
|
/**
|
|
4
5
|
* Table column definition.
|
|
@@ -115,8 +116,8 @@ export interface TableColumn {
|
|
|
115
116
|
*/
|
|
116
117
|
ganttComponent?: string;
|
|
117
118
|
/**
|
|
118
|
-
* The colspan of the Gantt
|
|
119
|
-
* the Gantt
|
|
119
|
+
* The colspan of the Gantt bar for the column. This determines how many columns
|
|
120
|
+
* the Gantt bar should span across.
|
|
120
121
|
*
|
|
121
122
|
* Only applicable for Gantt tables.
|
|
122
123
|
*
|
|
@@ -124,8 +125,8 @@ export interface TableColumn {
|
|
|
124
125
|
*/
|
|
125
126
|
colspan?: number;
|
|
126
127
|
/**
|
|
127
|
-
* The
|
|
128
|
-
* evaluated automatically while rendering the table.
|
|
128
|
+
* The original column index for the Gantt bar, excluding any pinned columns.
|
|
129
|
+
* This is evaluated automatically while rendering the table.
|
|
129
130
|
*
|
|
130
131
|
* Only applicable for Gantt tables.
|
|
131
132
|
*
|
|
@@ -164,8 +165,10 @@ export interface TableConfig {
|
|
|
164
165
|
* - `list` - row numbers are displayed in the table
|
|
165
166
|
* - `list-expansion` - carets are displayed in the number column that expand/collapse the row inline
|
|
166
167
|
* - `tree` - carets are displayed in the number column that expand/collapse grouped rows
|
|
168
|
+
* - `gantt` - view that allows specific rows to be displayed with Gantt functionality
|
|
169
|
+
* - `tree-gantt` - similar to `gantt`, but allows for tree functionality as well
|
|
167
170
|
*/
|
|
168
|
-
view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt';
|
|
171
|
+
view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt' | 'tree-gantt';
|
|
169
172
|
/**
|
|
170
173
|
* Control whether the table should be allowed to use the full width of its container.
|
|
171
174
|
*
|
|
@@ -268,26 +271,30 @@ export interface TableRow {
|
|
|
268
271
|
gantt?: GanttOptions;
|
|
269
272
|
}
|
|
270
273
|
/**
|
|
271
|
-
*
|
|
274
|
+
* Gantt chart options for table rows.
|
|
272
275
|
* @public
|
|
273
276
|
*/
|
|
274
277
|
export interface GanttOptions {
|
|
275
278
|
/**
|
|
276
|
-
* The
|
|
279
|
+
* The color to be applied to the row's gantt bar.
|
|
280
|
+
*
|
|
281
|
+
* @defaultValue '#cccccc'
|
|
277
282
|
*/
|
|
278
283
|
color?: string;
|
|
279
284
|
/**
|
|
280
285
|
* The starting column index for the gantt bar.
|
|
286
|
+
*
|
|
287
|
+
* @defaultValue 0
|
|
281
288
|
*/
|
|
282
289
|
startIndex?: number;
|
|
283
290
|
/**
|
|
284
|
-
* The ending column index for the gantt bar. If
|
|
291
|
+
* The ending column index for the gantt bar. If endIndex and colspan are not provided,
|
|
285
292
|
* the bar will stretch to the end of the table.
|
|
286
293
|
*/
|
|
287
294
|
endIndex?: number;
|
|
288
295
|
/**
|
|
289
|
-
* The length of the gantt bar. Useful when only the start index is provided.
|
|
290
|
-
* colspan and endIndex are not provided, the bar will stretch to the end of the table.
|
|
296
|
+
* The length of the gantt bar in columns. Useful when only the start index is provided.
|
|
297
|
+
* If colspan and endIndex are not provided, the bar will stretch to the end of the table.
|
|
291
298
|
*/
|
|
292
299
|
colspan?: number;
|
|
293
300
|
}
|
|
@@ -409,4 +416,125 @@ export interface TableModalProps {
|
|
|
409
416
|
*/
|
|
410
417
|
store: ReturnType<typeof createTableStore>;
|
|
411
418
|
}
|
|
419
|
+
/**
|
|
420
|
+
* Gantt bar information for VueFlow integration.
|
|
421
|
+
* @public
|
|
422
|
+
*/
|
|
423
|
+
export interface GanttBarInfo {
|
|
424
|
+
/**
|
|
425
|
+
* Unique identifier for the gantt bar.
|
|
426
|
+
*/
|
|
427
|
+
id: string;
|
|
428
|
+
/**
|
|
429
|
+
* The row index of the gantt bar.
|
|
430
|
+
*/
|
|
431
|
+
rowIndex: number;
|
|
432
|
+
/**
|
|
433
|
+
* The primary column index of the gantt bar (typically the start index).
|
|
434
|
+
*/
|
|
435
|
+
colIndex: number;
|
|
436
|
+
/**
|
|
437
|
+
* Starting column index of the gantt bar.
|
|
438
|
+
*/
|
|
439
|
+
startIndex: Ref<number>;
|
|
440
|
+
/**
|
|
441
|
+
* Ending column index of the gantt bar.
|
|
442
|
+
*/
|
|
443
|
+
endIndex: Ref<number>;
|
|
444
|
+
/**
|
|
445
|
+
* Color of the gantt bar.
|
|
446
|
+
*/
|
|
447
|
+
color: Ref<string>;
|
|
448
|
+
/**
|
|
449
|
+
* The position of the gantt bar in the ATable component.
|
|
450
|
+
*/
|
|
451
|
+
position: {
|
|
452
|
+
x: ShallowRef<number>;
|
|
453
|
+
y: ShallowRef<number>;
|
|
454
|
+
};
|
|
455
|
+
/**
|
|
456
|
+
* Display label for the gantt bar.
|
|
457
|
+
*/
|
|
458
|
+
label?: string;
|
|
459
|
+
}
|
|
460
|
+
/**
|
|
461
|
+
* Connection handle information for gantt bar connections.
|
|
462
|
+
* @public
|
|
463
|
+
*/
|
|
464
|
+
export interface ConnectionHandle {
|
|
465
|
+
/**
|
|
466
|
+
* Unique identifier for the connection handle.
|
|
467
|
+
*/
|
|
468
|
+
id: string;
|
|
469
|
+
/**
|
|
470
|
+
* The row index of the gantt bar this handle belongs to.
|
|
471
|
+
*/
|
|
472
|
+
rowIndex: number;
|
|
473
|
+
/**
|
|
474
|
+
* The column index of the gantt bar this handle belongs to.
|
|
475
|
+
*/
|
|
476
|
+
colIndex: number;
|
|
477
|
+
/**
|
|
478
|
+
* The side of the gantt bar where this handle is located.
|
|
479
|
+
*/
|
|
480
|
+
side: 'left' | 'right';
|
|
481
|
+
/**
|
|
482
|
+
* The position of the connection handle.
|
|
483
|
+
*/
|
|
484
|
+
position: {
|
|
485
|
+
x: ShallowRef<number>;
|
|
486
|
+
y: ShallowRef<number>;
|
|
487
|
+
};
|
|
488
|
+
/**
|
|
489
|
+
* Whether the handle is currently visible (on hover).
|
|
490
|
+
*/
|
|
491
|
+
visible: Ref<boolean>;
|
|
492
|
+
/**
|
|
493
|
+
* Reference to the gantt bar this handle belongs to.
|
|
494
|
+
*/
|
|
495
|
+
barId: string;
|
|
496
|
+
}
|
|
497
|
+
/**
|
|
498
|
+
* Connection path between two gantt bars.
|
|
499
|
+
* @public
|
|
500
|
+
*/
|
|
501
|
+
export interface ConnectionPath {
|
|
502
|
+
/**
|
|
503
|
+
* Unique identifier for the connection path.
|
|
504
|
+
*/
|
|
505
|
+
id: string;
|
|
506
|
+
/**
|
|
507
|
+
* The source connection handle.
|
|
508
|
+
*/
|
|
509
|
+
from: {
|
|
510
|
+
barId: string;
|
|
511
|
+
side: 'left' | 'right';
|
|
512
|
+
};
|
|
513
|
+
/**
|
|
514
|
+
* The target connection handle.
|
|
515
|
+
*/
|
|
516
|
+
to: {
|
|
517
|
+
barId: string;
|
|
518
|
+
side: 'left' | 'right';
|
|
519
|
+
};
|
|
520
|
+
/**
|
|
521
|
+
* Optional styling for the connection path.
|
|
522
|
+
*/
|
|
523
|
+
style?: {
|
|
524
|
+
color?: string;
|
|
525
|
+
width?: number;
|
|
526
|
+
};
|
|
527
|
+
/**
|
|
528
|
+
* Optional label for the connection.
|
|
529
|
+
*/
|
|
530
|
+
label?: string;
|
|
531
|
+
}
|
|
532
|
+
/**
|
|
533
|
+
* Connection event for handling connection creation/deletion.
|
|
534
|
+
* @public
|
|
535
|
+
*/
|
|
536
|
+
export type ConnectionEvent = {
|
|
537
|
+
type: 'create' | 'delete';
|
|
538
|
+
connection: ConnectionPath;
|
|
539
|
+
};
|
|
412
540
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
package/dist/stores/table.js
CHANGED
|
@@ -34,11 +34,14 @@ export const createTableStore = (initData) => {
|
|
|
34
34
|
}
|
|
35
35
|
// TODO: (typing) is this type correct for the parent set?
|
|
36
36
|
const parents = new Set();
|
|
37
|
-
for (let rowIndex = rows.value.length
|
|
37
|
+
for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
|
|
38
38
|
const row = rows.value[rowIndex];
|
|
39
|
-
if (row.parent) {
|
|
39
|
+
if (row.parent !== null && row.parent !== undefined) {
|
|
40
40
|
parents.add(row.parent);
|
|
41
41
|
}
|
|
42
|
+
}
|
|
43
|
+
for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
|
|
44
|
+
const row = rows.value[rowIndex];
|
|
42
45
|
defaultDisplay[rowIndex] = {
|
|
43
46
|
childrenOpen: false,
|
|
44
47
|
expanded: false,
|
|
@@ -60,13 +63,18 @@ export const createTableStore = (initData) => {
|
|
|
60
63
|
const display = ref(createDisplayObject(initData.display));
|
|
61
64
|
const modal = ref(initData.modal || { visible: false });
|
|
62
65
|
const updates = ref({});
|
|
66
|
+
const ganttBars = ref([]);
|
|
67
|
+
const connectionHandles = ref([]);
|
|
68
|
+
const connectionPaths = ref([]);
|
|
63
69
|
// getters
|
|
64
70
|
const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned));
|
|
71
|
+
const isGanttView = computed(() => config.value.view === 'gantt' || config.value.view === 'tree-gantt');
|
|
72
|
+
const isTreeView = computed(() => config.value.view === 'tree' || config.value.view === 'tree-gantt');
|
|
65
73
|
const numberedRowWidth = computed(() => {
|
|
66
74
|
const indent = Math.ceil(rows.value.length / 100 + 1);
|
|
67
75
|
return `${indent}ch`;
|
|
68
76
|
});
|
|
69
|
-
const zeroColumn = computed(() => config.value.view ? ['list', 'tree', 'list-expansion'].includes(config.value.view) : false);
|
|
77
|
+
const zeroColumn = computed(() => config.value.view ? ['list', 'tree', 'tree-gantt', 'list-expansion'].includes(config.value.view) : false);
|
|
70
78
|
// actions
|
|
71
79
|
const getCellData = (colIndex, rowIndex) => table.value[`${colIndex}:${rowIndex}`];
|
|
72
80
|
const setCellData = (colIndex, rowIndex, value) => {
|
|
@@ -76,7 +84,11 @@ export const createTableStore = (initData) => {
|
|
|
76
84
|
display.value[rowIndex].rowModified = true;
|
|
77
85
|
}
|
|
78
86
|
table.value[index] = value;
|
|
79
|
-
|
|
87
|
+
// Create a new row object to ensure reactivity
|
|
88
|
+
rows.value[rowIndex] = {
|
|
89
|
+
...rows.value[rowIndex],
|
|
90
|
+
[col.name]: value,
|
|
91
|
+
};
|
|
80
92
|
};
|
|
81
93
|
const setCellText = (colIndex, rowIndex, value) => {
|
|
82
94
|
const index = `${colIndex}:${rowIndex}`;
|
|
@@ -112,27 +124,33 @@ export const createTableStore = (initData) => {
|
|
|
112
124
|
};
|
|
113
125
|
const isRowGantt = (rowIndex) => {
|
|
114
126
|
const row = rows.value[rowIndex];
|
|
115
|
-
return
|
|
127
|
+
return isGanttView.value && row.gantt !== undefined;
|
|
116
128
|
};
|
|
117
129
|
const isRowVisible = (rowIndex) => {
|
|
118
|
-
return
|
|
130
|
+
return !isTreeView.value || display.value[rowIndex].isRoot || display.value[rowIndex].open;
|
|
119
131
|
};
|
|
120
132
|
const getRowExpandSymbol = (rowIndex) => {
|
|
121
|
-
if (config.value.view !== '
|
|
133
|
+
if (!isTreeView.value && config.value.view !== 'list-expansion') {
|
|
122
134
|
return '';
|
|
123
135
|
}
|
|
124
|
-
if (display.value[rowIndex].isRoot || display.value[rowIndex].isParent) {
|
|
125
|
-
return display.value[rowIndex].childrenOpen ? '
|
|
136
|
+
if (isTreeView.value && (display.value[rowIndex].isRoot || display.value[rowIndex].isParent)) {
|
|
137
|
+
return display.value[rowIndex].childrenOpen ? '▼' : '►';
|
|
138
|
+
}
|
|
139
|
+
if (config.value.view === 'list-expansion') {
|
|
140
|
+
return display.value[rowIndex].expanded ? '▼' : '►';
|
|
126
141
|
}
|
|
127
142
|
return '';
|
|
128
143
|
};
|
|
129
144
|
const toggleRowExpand = (rowIndex) => {
|
|
130
|
-
if (
|
|
145
|
+
if (isTreeView.value) {
|
|
131
146
|
display.value[rowIndex].childrenOpen = !display.value[rowIndex].childrenOpen;
|
|
132
|
-
|
|
147
|
+
const isOpen = display.value[rowIndex].childrenOpen;
|
|
148
|
+
for (let index = 0; index < rows.value.length; index++) {
|
|
133
149
|
if (display.value[index].parent === rowIndex) {
|
|
134
|
-
display.value[index].open =
|
|
135
|
-
if (
|
|
150
|
+
display.value[index].open = isOpen;
|
|
151
|
+
if (!isOpen) {
|
|
152
|
+
// If we're closing, also close any children recursively
|
|
153
|
+
display.value[index].childrenOpen = false;
|
|
136
154
|
toggleRowExpand(index);
|
|
137
155
|
}
|
|
138
156
|
}
|
|
@@ -207,33 +225,117 @@ export const createTableStore = (initData) => {
|
|
|
207
225
|
}
|
|
208
226
|
}
|
|
209
227
|
};
|
|
228
|
+
const registerGanttBar = (barInfo) => {
|
|
229
|
+
const existingIndex = ganttBars.value.findIndex(bar => bar.id === barInfo.id);
|
|
230
|
+
if (existingIndex >= 0) {
|
|
231
|
+
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
232
|
+
ganttBars.value[existingIndex] = barInfo;
|
|
233
|
+
}
|
|
234
|
+
else {
|
|
235
|
+
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
236
|
+
ganttBars.value.push(barInfo);
|
|
237
|
+
}
|
|
238
|
+
};
|
|
239
|
+
const unregisterGanttBar = (barId) => {
|
|
240
|
+
const index = ganttBars.value.findIndex(bar => bar.id === barId);
|
|
241
|
+
if (index >= 0) {
|
|
242
|
+
ganttBars.value.splice(index, 1);
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
const registerConnectionHandle = (handleInfo) => {
|
|
246
|
+
const existingIndex = connectionHandles.value.findIndex(handle => handle.id === handleInfo.id);
|
|
247
|
+
if (existingIndex >= 0) {
|
|
248
|
+
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
249
|
+
connectionHandles.value[existingIndex] = handleInfo;
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
253
|
+
connectionHandles.value.push(handleInfo);
|
|
254
|
+
}
|
|
255
|
+
};
|
|
256
|
+
const unregisterConnectionHandle = (handleId) => {
|
|
257
|
+
const index = connectionHandles.value.findIndex(handle => handle.id === handleId);
|
|
258
|
+
if (index >= 0) {
|
|
259
|
+
connectionHandles.value.splice(index, 1);
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
const createConnection = (fromHandleId, toHandleId, options) => {
|
|
263
|
+
const fromHandle = connectionHandles.value.find(h => h.id === fromHandleId);
|
|
264
|
+
const toHandle = connectionHandles.value.find(h => h.id === toHandleId);
|
|
265
|
+
if (!fromHandle || !toHandle) {
|
|
266
|
+
console.warn('Cannot create connection: handle not found');
|
|
267
|
+
return null;
|
|
268
|
+
}
|
|
269
|
+
const connection = {
|
|
270
|
+
id: `connection-${fromHandleId}-${toHandleId}`,
|
|
271
|
+
from: {
|
|
272
|
+
barId: fromHandle.barId,
|
|
273
|
+
side: fromHandle.side,
|
|
274
|
+
},
|
|
275
|
+
to: {
|
|
276
|
+
barId: toHandle.barId,
|
|
277
|
+
side: toHandle.side,
|
|
278
|
+
},
|
|
279
|
+
style: options?.style,
|
|
280
|
+
label: options?.label,
|
|
281
|
+
};
|
|
282
|
+
connectionPaths.value.push(connection);
|
|
283
|
+
return connection;
|
|
284
|
+
};
|
|
285
|
+
const deleteConnection = (connectionId) => {
|
|
286
|
+
const index = connectionPaths.value.findIndex(conn => conn.id === connectionId);
|
|
287
|
+
if (index >= 0) {
|
|
288
|
+
connectionPaths.value.splice(index, 1);
|
|
289
|
+
return true;
|
|
290
|
+
}
|
|
291
|
+
return false;
|
|
292
|
+
};
|
|
293
|
+
const getConnectionsForBar = (barId) => {
|
|
294
|
+
return connectionPaths.value.filter(conn => conn.from.barId === barId || conn.to.barId === barId);
|
|
295
|
+
};
|
|
296
|
+
const getHandlesForBar = (barId) => {
|
|
297
|
+
return connectionHandles.value.filter(handle => handle.barId === barId);
|
|
298
|
+
};
|
|
210
299
|
return {
|
|
211
300
|
// state
|
|
212
301
|
columns,
|
|
213
302
|
config,
|
|
303
|
+
connectionHandles,
|
|
304
|
+
connectionPaths,
|
|
214
305
|
display,
|
|
306
|
+
ganttBars,
|
|
215
307
|
modal,
|
|
216
308
|
rows,
|
|
217
309
|
table,
|
|
218
310
|
updates,
|
|
219
311
|
// getters
|
|
220
312
|
hasPinnedColumns,
|
|
313
|
+
isGanttView,
|
|
314
|
+
isTreeView,
|
|
221
315
|
numberedRowWidth,
|
|
222
316
|
zeroColumn,
|
|
223
317
|
// actions
|
|
224
318
|
closeModal,
|
|
319
|
+
createConnection,
|
|
320
|
+
deleteConnection,
|
|
225
321
|
getCellData,
|
|
226
322
|
getCellDisplayValue,
|
|
323
|
+
getConnectionsForBar,
|
|
227
324
|
getFormattedValue,
|
|
325
|
+
getHandlesForBar,
|
|
228
326
|
getHeaderCellStyle,
|
|
229
|
-
resizeColumn,
|
|
230
327
|
getIndent,
|
|
231
328
|
getRowExpandSymbol,
|
|
232
329
|
isRowGantt,
|
|
233
330
|
isRowVisible,
|
|
331
|
+
registerConnectionHandle,
|
|
332
|
+
registerGanttBar,
|
|
333
|
+
resizeColumn,
|
|
234
334
|
setCellData,
|
|
235
335
|
setCellText,
|
|
236
336
|
toggleRowExpand,
|
|
337
|
+
unregisterConnectionHandle,
|
|
338
|
+
unregisterGanttBar,
|
|
237
339
|
updateGanttBar,
|
|
238
340
|
};
|
|
239
341
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/atable",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.24",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@vueuse/core": "^13.4.0",
|
|
39
39
|
"pinia": "^3.0.3",
|
|
40
40
|
"vue": "^3.5.17",
|
|
41
|
-
"@stonecrop/themes": "0.4.
|
|
42
|
-
"@stonecrop/utilities": "0.4.
|
|
41
|
+
"@stonecrop/themes": "0.4.24",
|
|
42
|
+
"@stonecrop/utilities": "0.4.24"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@microsoft/api-documenter": "^7.26.29",
|