@stonecrop/atable 0.6.3 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -10
- package/dist/atable.d.ts +10 -13
- package/dist/src/stores/table.d.ts +6 -6
- package/dist/src/types/index.d.ts +4 -7
- package/dist/src/types/index.d.ts.map +1 -1
- package/package.json +22 -22
- package/src/types/index.ts +4 -7
- package/dist/src/index.js +0 -27
- package/dist/src/stores/table.js +0 -403
- package/dist/src/types/index.js +0 -0
- package/dist/src/utils.js +0 -7
- package/dist/tests/display.d.ts +0 -2
- package/dist/tests/display.d.ts.map +0 -1
- package/dist/tests/display.js +0 -70
package/README.md
CHANGED
|
@@ -67,9 +67,9 @@ const config = {
|
|
|
67
67
|
|
|
68
68
|
The primary API for ATable is the column object.
|
|
69
69
|
|
|
70
|
-
- `
|
|
70
|
+
- `label`: String; optional (the display label for the column header)
|
|
71
71
|
- `name`: String; required (a reference to the column that must follow rules for valid JS variable naming)
|
|
72
|
-
- `
|
|
72
|
+
- `fieldtype`: String; optional (a valid field type, full list [below](#column-data-types))
|
|
73
73
|
- `align`: String; optional (one of `left`, `right` or `center`; defaults to `center`)
|
|
74
74
|
- `edit`: Boolean; optional (indicates if the field is editable; defaults to `false`)
|
|
75
75
|
- `width`: String; optional (used to indicate the width of the cell; defaults to `40ch`)
|
|
@@ -78,16 +78,16 @@ The primary API for ATable is the column object.
|
|
|
78
78
|
|
|
79
79
|
```js
|
|
80
80
|
{
|
|
81
|
-
|
|
81
|
+
label: 'Batch Name',
|
|
82
82
|
name: 'name',
|
|
83
|
-
|
|
83
|
+
fieldtype: 'Data',
|
|
84
84
|
align: 'right',
|
|
85
85
|
edit: false,
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
|
-
|
|
88
|
+
label: 'Species',
|
|
89
89
|
name: 'species',
|
|
90
|
-
|
|
90
|
+
fieldtype: 'Select',
|
|
91
91
|
align: 'left',
|
|
92
92
|
edit: true,
|
|
93
93
|
width: '30ch',
|
|
@@ -95,9 +95,9 @@ The primary API for ATable is the column object.
|
|
|
95
95
|
options: () => ['Rainbow Trout', 'Steelhead', 'Golden Trout', 'Pacific Salmon']
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
|
-
|
|
98
|
+
label: 'Date',
|
|
99
99
|
name: 'set_date',
|
|
100
|
-
|
|
100
|
+
fieldtype: 'Date',
|
|
101
101
|
align: 'center',
|
|
102
102
|
edit: true,
|
|
103
103
|
width: '30ch',
|
|
@@ -124,8 +124,8 @@ import { ref } from 'vue'
|
|
|
124
124
|
|
|
125
125
|
const tableData = ref([...])
|
|
126
126
|
const tableColumns = ref([
|
|
127
|
-
{ name: 'id', label: 'ID', width: '80px',
|
|
128
|
-
{ name: 'name', label: 'Name', width: '150px',
|
|
127
|
+
{ name: 'id', label: 'ID', width: '80px', fieldtype: 'Int' },
|
|
128
|
+
{ name: 'name', label: 'Name', width: '150px', fieldtype: 'Data' },
|
|
129
129
|
])
|
|
130
130
|
|
|
131
131
|
const onColumnsChange = (columns) => {
|
package/dist/atable.d.ts
CHANGED
|
@@ -180,7 +180,7 @@ name: string;
|
|
|
180
180
|
align?: CanvasTextAlign | undefined;
|
|
181
181
|
edit?: boolean | undefined;
|
|
182
182
|
label?: string | undefined;
|
|
183
|
-
|
|
183
|
+
fieldtype?: string | undefined;
|
|
184
184
|
width?: string | undefined;
|
|
185
185
|
pinned?: boolean | undefined;
|
|
186
186
|
resizable?: boolean | undefined;
|
|
@@ -204,7 +204,7 @@ name: string;
|
|
|
204
204
|
align?: CanvasTextAlign | undefined;
|
|
205
205
|
edit?: boolean | undefined;
|
|
206
206
|
label?: string | undefined;
|
|
207
|
-
|
|
207
|
+
fieldtype?: string | undefined;
|
|
208
208
|
width?: string | undefined;
|
|
209
209
|
pinned?: boolean | undefined;
|
|
210
210
|
resizable?: boolean | undefined;
|
|
@@ -474,7 +474,7 @@ name: string;
|
|
|
474
474
|
align?: CanvasTextAlign | undefined;
|
|
475
475
|
edit?: boolean | undefined;
|
|
476
476
|
label?: string | undefined;
|
|
477
|
-
|
|
477
|
+
fieldtype?: string | undefined;
|
|
478
478
|
width?: string | undefined;
|
|
479
479
|
pinned?: boolean | undefined;
|
|
480
480
|
resizable?: boolean | undefined;
|
|
@@ -498,7 +498,7 @@ name: string;
|
|
|
498
498
|
align?: CanvasTextAlign | undefined;
|
|
499
499
|
edit?: boolean | undefined;
|
|
500
500
|
label?: string | undefined;
|
|
501
|
-
|
|
501
|
+
fieldtype?: string | undefined;
|
|
502
502
|
width?: string | undefined;
|
|
503
503
|
pinned?: boolean | undefined;
|
|
504
504
|
resizable?: boolean | undefined;
|
|
@@ -768,7 +768,7 @@ name: string;
|
|
|
768
768
|
align?: CanvasTextAlign | undefined;
|
|
769
769
|
edit?: boolean | undefined;
|
|
770
770
|
label?: string | undefined;
|
|
771
|
-
|
|
771
|
+
fieldtype?: string | undefined;
|
|
772
772
|
width?: string | undefined;
|
|
773
773
|
pinned?: boolean | undefined;
|
|
774
774
|
resizable?: boolean | undefined;
|
|
@@ -792,7 +792,7 @@ name: string;
|
|
|
792
792
|
align?: CanvasTextAlign | undefined;
|
|
793
793
|
edit?: boolean | undefined;
|
|
794
794
|
label?: string | undefined;
|
|
795
|
-
|
|
795
|
+
fieldtype?: string | undefined;
|
|
796
796
|
width?: string | undefined;
|
|
797
797
|
pinned?: boolean | undefined;
|
|
798
798
|
resizable?: boolean | undefined;
|
|
@@ -1240,15 +1240,12 @@ export declare interface TableColumn {
|
|
|
1240
1240
|
*/
|
|
1241
1241
|
label?: string;
|
|
1242
1242
|
/**
|
|
1243
|
-
* The
|
|
1244
|
-
*
|
|
1245
|
-
* - `Select` - the column contains a select input
|
|
1246
|
-
* - `Date` - the column contains a date input
|
|
1247
|
-
* - `component` - the column contains a custom component
|
|
1243
|
+
* The semantic field type of the column. Uses the same StonecropFieldType enum as forms.
|
|
1244
|
+
* Common values: 'Data', 'Text', 'Int', 'Float', 'Date', 'Select', 'Link', 'Check', etc.
|
|
1248
1245
|
*
|
|
1249
|
-
* @
|
|
1246
|
+
* @public
|
|
1250
1247
|
*/
|
|
1251
|
-
|
|
1248
|
+
fieldtype?: string;
|
|
1252
1249
|
/**
|
|
1253
1250
|
* The width of the column. This can be a number (in pixels) or a string (in CSS units).
|
|
1254
1251
|
*
|
|
@@ -35,7 +35,7 @@ export declare const createTableStore: (initData: {
|
|
|
35
35
|
align?: CanvasTextAlign | undefined;
|
|
36
36
|
edit?: boolean | undefined;
|
|
37
37
|
label?: string | undefined;
|
|
38
|
-
|
|
38
|
+
fieldtype?: string | undefined;
|
|
39
39
|
width?: string | undefined;
|
|
40
40
|
pinned?: boolean | undefined;
|
|
41
41
|
resizable?: boolean | undefined;
|
|
@@ -59,7 +59,7 @@ export declare const createTableStore: (initData: {
|
|
|
59
59
|
align?: CanvasTextAlign | undefined;
|
|
60
60
|
edit?: boolean | undefined;
|
|
61
61
|
label?: string | undefined;
|
|
62
|
-
|
|
62
|
+
fieldtype?: string | undefined;
|
|
63
63
|
width?: string | undefined;
|
|
64
64
|
pinned?: boolean | undefined;
|
|
65
65
|
resizable?: boolean | undefined;
|
|
@@ -329,7 +329,7 @@ export declare const createTableStore: (initData: {
|
|
|
329
329
|
align?: CanvasTextAlign | undefined;
|
|
330
330
|
edit?: boolean | undefined;
|
|
331
331
|
label?: string | undefined;
|
|
332
|
-
|
|
332
|
+
fieldtype?: string | undefined;
|
|
333
333
|
width?: string | undefined;
|
|
334
334
|
pinned?: boolean | undefined;
|
|
335
335
|
resizable?: boolean | undefined;
|
|
@@ -353,7 +353,7 @@ export declare const createTableStore: (initData: {
|
|
|
353
353
|
align?: CanvasTextAlign | undefined;
|
|
354
354
|
edit?: boolean | undefined;
|
|
355
355
|
label?: string | undefined;
|
|
356
|
-
|
|
356
|
+
fieldtype?: string | undefined;
|
|
357
357
|
width?: string | undefined;
|
|
358
358
|
pinned?: boolean | undefined;
|
|
359
359
|
resizable?: boolean | undefined;
|
|
@@ -623,7 +623,7 @@ export declare const createTableStore: (initData: {
|
|
|
623
623
|
align?: CanvasTextAlign | undefined;
|
|
624
624
|
edit?: boolean | undefined;
|
|
625
625
|
label?: string | undefined;
|
|
626
|
-
|
|
626
|
+
fieldtype?: string | undefined;
|
|
627
627
|
width?: string | undefined;
|
|
628
628
|
pinned?: boolean | undefined;
|
|
629
629
|
resizable?: boolean | undefined;
|
|
@@ -647,7 +647,7 @@ export declare const createTableStore: (initData: {
|
|
|
647
647
|
align?: CanvasTextAlign | undefined;
|
|
648
648
|
edit?: boolean | undefined;
|
|
649
649
|
label?: string | undefined;
|
|
650
|
-
|
|
650
|
+
fieldtype?: string | undefined;
|
|
651
651
|
width?: string | undefined;
|
|
652
652
|
pinned?: boolean | undefined;
|
|
653
653
|
resizable?: boolean | undefined;
|
|
@@ -35,15 +35,12 @@ export interface TableColumn {
|
|
|
35
35
|
*/
|
|
36
36
|
label?: string;
|
|
37
37
|
/**
|
|
38
|
-
* The
|
|
39
|
-
*
|
|
40
|
-
* - `Select` - the column contains a select input
|
|
41
|
-
* - `Date` - the column contains a date input
|
|
42
|
-
* - `component` - the column contains a custom component
|
|
38
|
+
* The semantic field type of the column. Uses the same StonecropFieldType enum as forms.
|
|
39
|
+
* Common values: 'Data', 'Text', 'Int', 'Float', 'Date', 'Select', 'Link', 'Check', etc.
|
|
43
40
|
*
|
|
44
|
-
* @
|
|
41
|
+
* @public
|
|
45
42
|
*/
|
|
46
|
-
|
|
43
|
+
fieldtype?: string;
|
|
47
44
|
/**
|
|
48
45
|
* The width of the column. This can be a number (in pixels) or a string (in CSS units).
|
|
49
46
|
*
|
|
@@ -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;AACjD,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IAEvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/atable",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -38,33 +38,33 @@
|
|
|
38
38
|
"**/*.css"
|
|
39
39
|
],
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@vueuse/components": "^14.
|
|
42
|
-
"@vueuse/core": "^14.
|
|
43
|
-
"pinia": "^3.0.
|
|
44
|
-
"vue": "^3.5.
|
|
45
|
-
"@stonecrop/themes": "0.
|
|
46
|
-
"@stonecrop/utilities": "0.
|
|
41
|
+
"@vueuse/components": "^14.1.0",
|
|
42
|
+
"@vueuse/core": "^14.1.0",
|
|
43
|
+
"pinia": "^3.0.4",
|
|
44
|
+
"vue": "^3.5.26",
|
|
45
|
+
"@stonecrop/themes": "0.7.1",
|
|
46
|
+
"@stonecrop/utilities": "0.7.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@eslint/js": "^9.
|
|
50
|
-
"@microsoft/api-documenter": "^7.
|
|
51
|
-
"@rushstack/heft": "^1.1.
|
|
52
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
53
|
-
"@vitest/coverage-istanbul": "^4.0.
|
|
54
|
-
"@vitest/ui": "^4.0.
|
|
49
|
+
"@eslint/js": "^9.39.2",
|
|
50
|
+
"@microsoft/api-documenter": "^7.28.2",
|
|
51
|
+
"@rushstack/heft": "^1.1.7",
|
|
52
|
+
"@vitejs/plugin-vue": "^6.0.3",
|
|
53
|
+
"@vitest/coverage-istanbul": "^4.0.17",
|
|
54
|
+
"@vitest/ui": "^4.0.17",
|
|
55
55
|
"@vue/test-utils": "^2.4.6",
|
|
56
56
|
"eslint-config-prettier": "^10.1.8",
|
|
57
|
-
"eslint-plugin-vue": "^10.
|
|
58
|
-
"eslint": "^9.
|
|
59
|
-
"globals": "^
|
|
60
|
-
"jsdom": "^27.
|
|
57
|
+
"eslint-plugin-vue": "^10.6.2",
|
|
58
|
+
"eslint": "^9.39.2",
|
|
59
|
+
"globals": "^17.0.0",
|
|
60
|
+
"jsdom": "^27.4.0",
|
|
61
61
|
"typescript": "^5.9.3",
|
|
62
|
-
"typescript-eslint": "^8.
|
|
62
|
+
"typescript-eslint": "^8.53.0",
|
|
63
63
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
64
|
-
"vite": "^7.
|
|
65
|
-
"vitest": "^4.0.
|
|
66
|
-
"vue-router": "^4.6.
|
|
67
|
-
"stonecrop-rig": "0.
|
|
64
|
+
"vite": "^7.3.1",
|
|
65
|
+
"vitest": "^4.0.17",
|
|
66
|
+
"vue-router": "^4.6.4",
|
|
67
|
+
"stonecrop-rig": "0.7.0"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
package/src/types/index.ts
CHANGED
|
@@ -41,15 +41,12 @@ export interface TableColumn {
|
|
|
41
41
|
label?: string
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
|
-
* The
|
|
45
|
-
*
|
|
46
|
-
* - `Select` - the column contains a select input
|
|
47
|
-
* - `Date` - the column contains a date input
|
|
48
|
-
* - `component` - the column contains a custom component
|
|
44
|
+
* The semantic field type of the column. Uses the same StonecropFieldType enum as forms.
|
|
45
|
+
* Common values: 'Data', 'Text', 'Int', 'Float', 'Date', 'Select', 'Link', 'Check', etc.
|
|
49
46
|
*
|
|
50
|
-
* @
|
|
47
|
+
* @public
|
|
51
48
|
*/
|
|
52
|
-
|
|
49
|
+
fieldtype?: string
|
|
53
50
|
|
|
54
51
|
/**
|
|
55
52
|
* The width of the column. This can be a number (in pixels) or a string (in CSS units).
|
package/dist/src/index.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import ACell from './components/ACell.vue';
|
|
2
|
-
import AExpansionRow from './components/AExpansionRow.vue';
|
|
3
|
-
import AGanttCell from './components/AGanttCell.vue';
|
|
4
|
-
import ARow from './components/ARow.vue';
|
|
5
|
-
import ATable from './components/ATable.vue';
|
|
6
|
-
import ATableHeader from './components/ATableHeader.vue';
|
|
7
|
-
import ATableLoading from './components/ATableLoading.vue';
|
|
8
|
-
import ATableLoadingBar from './components/ATableLoadingBar.vue';
|
|
9
|
-
import ATableModal from './components/ATableModal.vue';
|
|
10
|
-
export { createTableStore } from './stores/table';
|
|
11
|
-
/**
|
|
12
|
-
* Install all ATable components
|
|
13
|
-
* @param app - Vue app instance
|
|
14
|
-
* @public
|
|
15
|
-
*/
|
|
16
|
-
function install(app /* options */) {
|
|
17
|
-
app.component('ACell', ACell);
|
|
18
|
-
app.component('AExpansionRow', AExpansionRow);
|
|
19
|
-
app.component('AGanttCell', AGanttCell);
|
|
20
|
-
app.component('ARow', ARow);
|
|
21
|
-
app.component('ATable', ATable);
|
|
22
|
-
app.component('ATableHeader', ATableHeader);
|
|
23
|
-
app.component('ATableLoading', ATableLoading);
|
|
24
|
-
app.component('ATableLoadingBar', ATableLoadingBar);
|
|
25
|
-
app.component('ATableModal', ATableModal);
|
|
26
|
-
}
|
|
27
|
-
export { ACell, AExpansionRow, AGanttCell, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal, install, };
|
package/dist/src/stores/table.js
DELETED
|
@@ -1,403 +0,0 @@
|
|
|
1
|
-
import { defineStore } from 'pinia';
|
|
2
|
-
import { computed, ref } from 'vue';
|
|
3
|
-
import { generateHash } from '../utils';
|
|
4
|
-
/**
|
|
5
|
-
* Create a table store
|
|
6
|
-
* @param initData - Initial data for the table store
|
|
7
|
-
* @returns table store instance
|
|
8
|
-
* @public
|
|
9
|
-
*/
|
|
10
|
-
export const createTableStore = (initData) => {
|
|
11
|
-
const id = initData.id || generateHash();
|
|
12
|
-
const createStore = defineStore(`table-${id}`, () => {
|
|
13
|
-
// util functions
|
|
14
|
-
const createTableObject = () => {
|
|
15
|
-
const table = {};
|
|
16
|
-
for (const [colIndex, column] of columns.value.entries()) {
|
|
17
|
-
for (const [rowIndex, row] of rows.value.entries()) {
|
|
18
|
-
table[`${colIndex}:${rowIndex}`] = row[column.name];
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return table;
|
|
22
|
-
};
|
|
23
|
-
const createDisplayObject = (forceRecalculate = false) => {
|
|
24
|
-
const defaultDisplay = [Object.assign({}, { rowModified: false })];
|
|
25
|
-
// Only use provided display on initial load, not on reactive updates
|
|
26
|
-
if (!forceRecalculate && initData.display) {
|
|
27
|
-
if ('0:0' in initData.display) {
|
|
28
|
-
return initData.display;
|
|
29
|
-
}
|
|
30
|
-
// else if ('default' in display) {
|
|
31
|
-
// // TODO: (typing) what is the possible input here for 'default'?
|
|
32
|
-
// defaultDisplay = display.default
|
|
33
|
-
// }
|
|
34
|
-
}
|
|
35
|
-
// TODO: (typing) is this type correct for the parent set?
|
|
36
|
-
const parents = new Set();
|
|
37
|
-
for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
|
|
38
|
-
const row = rows.value[rowIndex];
|
|
39
|
-
if (row.parent !== null && row.parent !== undefined) {
|
|
40
|
-
parents.add(row.parent);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
|
|
44
|
-
const row = rows.value[rowIndex];
|
|
45
|
-
defaultDisplay[rowIndex] = {
|
|
46
|
-
childrenOpen: false,
|
|
47
|
-
expanded: false,
|
|
48
|
-
indent: row.indent || 0,
|
|
49
|
-
isParent: parents.has(rowIndex),
|
|
50
|
-
isRoot: row.parent === null || row.parent === undefined,
|
|
51
|
-
rowModified: false,
|
|
52
|
-
open: row.parent === null || row.parent === undefined,
|
|
53
|
-
parent: row.parent,
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
return defaultDisplay;
|
|
57
|
-
};
|
|
58
|
-
// state
|
|
59
|
-
const columns = ref(initData.columns);
|
|
60
|
-
const rows = ref(initData.rows);
|
|
61
|
-
const config = ref(initData.config || {});
|
|
62
|
-
const table = ref(initData.table || createTableObject());
|
|
63
|
-
// Track row modifications and expand states separately from the computed display
|
|
64
|
-
const rowModifications = ref({});
|
|
65
|
-
const rowExpandStates = ref({});
|
|
66
|
-
// Use a ref instead of computed to have more control over reactivity
|
|
67
|
-
const displayData = ref([]);
|
|
68
|
-
const calculateDisplay = () => {
|
|
69
|
-
// Always force recalculation when this method is called
|
|
70
|
-
const baseDisplay = createDisplayObject(true);
|
|
71
|
-
// Apply persistent modifications and expand states
|
|
72
|
-
for (let i = 0; i < baseDisplay.length; i++) {
|
|
73
|
-
if (rowModifications.value[i]) {
|
|
74
|
-
baseDisplay[i].rowModified = rowModifications.value[i];
|
|
75
|
-
}
|
|
76
|
-
if (rowExpandStates.value[i]) {
|
|
77
|
-
if (rowExpandStates.value[i].childrenOpen !== undefined) {
|
|
78
|
-
baseDisplay[i].childrenOpen = rowExpandStates.value[i].childrenOpen;
|
|
79
|
-
}
|
|
80
|
-
if (rowExpandStates.value[i].expanded !== undefined) {
|
|
81
|
-
baseDisplay[i].expanded = rowExpandStates.value[i].expanded;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
// Calculate 'open' property for tree view based on parent's childrenOpen state
|
|
86
|
-
if (isTreeView.value) {
|
|
87
|
-
for (let i = 0; i < baseDisplay.length; i++) {
|
|
88
|
-
const row = baseDisplay[i];
|
|
89
|
-
if (!row.isRoot && row.parent !== null && row.parent !== undefined) {
|
|
90
|
-
// Child row is 'open' if its parent's childrenOpen is true
|
|
91
|
-
const parentIndex = row.parent;
|
|
92
|
-
if (parentIndex >= 0 && parentIndex < baseDisplay.length) {
|
|
93
|
-
baseDisplay[i].open = baseDisplay[parentIndex].childrenOpen || false;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
displayData.value = baseDisplay;
|
|
99
|
-
return baseDisplay;
|
|
100
|
-
};
|
|
101
|
-
const display = computed(() => displayData.value);
|
|
102
|
-
const modal = ref(initData.modal || { visible: false });
|
|
103
|
-
const updates = ref({});
|
|
104
|
-
const ganttBars = ref([]);
|
|
105
|
-
const connectionHandles = ref([]);
|
|
106
|
-
const connectionPaths = ref([]);
|
|
107
|
-
// getters
|
|
108
|
-
const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned));
|
|
109
|
-
const isGanttView = computed(() => config.value.view === 'gantt' || config.value.view === 'tree-gantt');
|
|
110
|
-
const isTreeView = computed(() => config.value.view === 'tree' || config.value.view === 'tree-gantt');
|
|
111
|
-
const numberedRowWidth = computed(() => {
|
|
112
|
-
const indent = Math.ceil(rows.value.length / 100 + 1);
|
|
113
|
-
return `${indent}ch`;
|
|
114
|
-
});
|
|
115
|
-
const zeroColumn = computed(() => config.value.view ? ['list', 'tree', 'tree-gantt', 'list-expansion'].includes(config.value.view) : false);
|
|
116
|
-
// Initialize display data after all computed properties are defined
|
|
117
|
-
calculateDisplay();
|
|
118
|
-
// actions
|
|
119
|
-
const getCellData = (colIndex, rowIndex) => table.value[`${colIndex}:${rowIndex}`];
|
|
120
|
-
const setCellData = (colIndex, rowIndex, value) => {
|
|
121
|
-
const index = `${colIndex}:${rowIndex}`;
|
|
122
|
-
const col = columns.value[colIndex];
|
|
123
|
-
if (table.value[index] !== value) {
|
|
124
|
-
rowModifications.value[rowIndex] = true;
|
|
125
|
-
}
|
|
126
|
-
table.value[index] = value;
|
|
127
|
-
// Create a new row object to ensure reactivity
|
|
128
|
-
rows.value[rowIndex] = {
|
|
129
|
-
...rows.value[rowIndex],
|
|
130
|
-
[col.name]: value,
|
|
131
|
-
};
|
|
132
|
-
// Recalculate display when rows change
|
|
133
|
-
calculateDisplay();
|
|
134
|
-
};
|
|
135
|
-
const updateRows = (newRows) => {
|
|
136
|
-
rows.value = newRows;
|
|
137
|
-
calculateDisplay();
|
|
138
|
-
};
|
|
139
|
-
const setCellText = (colIndex, rowIndex, value) => {
|
|
140
|
-
const index = `${colIndex}:${rowIndex}`;
|
|
141
|
-
if (table.value[index] !== value) {
|
|
142
|
-
rowModifications.value[rowIndex] = true;
|
|
143
|
-
updates.value[index] = value;
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
const getHeaderCellStyle = (column) => {
|
|
147
|
-
const isLastCol = columns.value.indexOf(column) === columns.value.length - 1;
|
|
148
|
-
// if the table is full width, the last column should not be resizable;
|
|
149
|
-
// ref: https://github.com/agritheory/stonecrop/pull/196#issuecomment-2503762641
|
|
150
|
-
const isResizable = config.value.fullWidth ? column.resizable && !isLastCol : column.resizable;
|
|
151
|
-
return {
|
|
152
|
-
width: column.width || '40ch',
|
|
153
|
-
textAlign: column.align || 'center',
|
|
154
|
-
...(isResizable && {
|
|
155
|
-
resize: 'horizontal',
|
|
156
|
-
overflow: 'hidden',
|
|
157
|
-
whiteSpace: 'nowrap',
|
|
158
|
-
}),
|
|
159
|
-
};
|
|
160
|
-
};
|
|
161
|
-
const resizeColumn = (colIndex, newWidth) => {
|
|
162
|
-
if (colIndex < 0 || colIndex >= columns.value.length)
|
|
163
|
-
return;
|
|
164
|
-
const minWidth = 40;
|
|
165
|
-
const finalWidth = Math.max(newWidth, minWidth);
|
|
166
|
-
columns.value[colIndex] = {
|
|
167
|
-
...columns.value[colIndex],
|
|
168
|
-
width: `${finalWidth}px`,
|
|
169
|
-
};
|
|
170
|
-
};
|
|
171
|
-
const isRowGantt = (rowIndex) => {
|
|
172
|
-
const row = rows.value[rowIndex];
|
|
173
|
-
return isGanttView.value && row.gantt !== undefined;
|
|
174
|
-
};
|
|
175
|
-
const isRowVisible = (rowIndex) => {
|
|
176
|
-
return !isTreeView.value || display.value[rowIndex].isRoot || display.value[rowIndex].open;
|
|
177
|
-
};
|
|
178
|
-
const getRowExpandSymbol = (rowIndex) => {
|
|
179
|
-
if (!isTreeView.value && config.value.view !== 'list-expansion') {
|
|
180
|
-
return '';
|
|
181
|
-
}
|
|
182
|
-
if (isTreeView.value && (display.value[rowIndex].isRoot || display.value[rowIndex].isParent)) {
|
|
183
|
-
return display.value[rowIndex].childrenOpen ? '▼' : '►';
|
|
184
|
-
}
|
|
185
|
-
if (config.value.view === 'list-expansion') {
|
|
186
|
-
return display.value[rowIndex].expanded ? '▼' : '►';
|
|
187
|
-
}
|
|
188
|
-
return '';
|
|
189
|
-
};
|
|
190
|
-
const toggleRowExpand = (rowIndex) => {
|
|
191
|
-
if (isTreeView.value) {
|
|
192
|
-
const currentState = rowExpandStates.value[rowIndex] || {};
|
|
193
|
-
const currentChildrenOpen = currentState.childrenOpen ?? display.value[rowIndex].childrenOpen;
|
|
194
|
-
const newChildrenOpen = !currentChildrenOpen;
|
|
195
|
-
rowExpandStates.value[rowIndex] = {
|
|
196
|
-
...currentState,
|
|
197
|
-
childrenOpen: newChildrenOpen
|
|
198
|
-
};
|
|
199
|
-
// If we're closing, recursively close all descendant nodes
|
|
200
|
-
if (!newChildrenOpen) {
|
|
201
|
-
for (let index = 0; index < rows.value.length; index++) {
|
|
202
|
-
if (display.value[index].parent === rowIndex) {
|
|
203
|
-
const childState = rowExpandStates.value[index] || {};
|
|
204
|
-
rowExpandStates.value[index] = {
|
|
205
|
-
...childState,
|
|
206
|
-
childrenOpen: false
|
|
207
|
-
};
|
|
208
|
-
toggleRowExpand(index);
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
else if (config.value.view === 'list-expansion') {
|
|
214
|
-
const currentState = rowExpandStates.value[rowIndex] || {};
|
|
215
|
-
const currentExpanded = currentState.expanded ?? display.value[rowIndex].expanded;
|
|
216
|
-
rowExpandStates.value[rowIndex] = {
|
|
217
|
-
...currentState,
|
|
218
|
-
expanded: !currentExpanded
|
|
219
|
-
};
|
|
220
|
-
}
|
|
221
|
-
};
|
|
222
|
-
const getCellDisplayValue = (colIndex, rowIndex) => {
|
|
223
|
-
const cellData = getCellData(colIndex, rowIndex);
|
|
224
|
-
return getFormattedValue(colIndex, rowIndex, cellData);
|
|
225
|
-
};
|
|
226
|
-
const getFormattedValue = (colIndex, rowIndex, value) => {
|
|
227
|
-
const column = columns.value[colIndex];
|
|
228
|
-
const row = rows.value[rowIndex];
|
|
229
|
-
const format = column.format;
|
|
230
|
-
if (!format) {
|
|
231
|
-
return value;
|
|
232
|
-
}
|
|
233
|
-
if (typeof format === 'function') {
|
|
234
|
-
return format(value, { table: table.value, row, column });
|
|
235
|
-
}
|
|
236
|
-
else if (typeof format === 'string') {
|
|
237
|
-
// parse format function from string
|
|
238
|
-
// eslint-disable-next-line @typescript-eslint/no-implied-eval
|
|
239
|
-
const formatFn = Function(`"use strict";return (${format})`)();
|
|
240
|
-
return formatFn(value, { table: table.value, row, column });
|
|
241
|
-
}
|
|
242
|
-
return value;
|
|
243
|
-
};
|
|
244
|
-
const closeModal = (event) => {
|
|
245
|
-
if (!(event.target instanceof Node)) {
|
|
246
|
-
// if the target is not a node, it's probably a custom click event to Document or Window
|
|
247
|
-
// err on the side of closing the modal in that case
|
|
248
|
-
if (modal.value.visible)
|
|
249
|
-
modal.value.visible = false;
|
|
250
|
-
}
|
|
251
|
-
else if (!modal.value.parent?.contains(event.target)) {
|
|
252
|
-
if (modal.value.visible)
|
|
253
|
-
modal.value.visible = false;
|
|
254
|
-
}
|
|
255
|
-
};
|
|
256
|
-
const getIndent = (colIndex, indentLevel) => {
|
|
257
|
-
if (indentLevel && colIndex === 0 && indentLevel > 0) {
|
|
258
|
-
return `${indentLevel}ch`;
|
|
259
|
-
}
|
|
260
|
-
else {
|
|
261
|
-
return 'inherit';
|
|
262
|
-
}
|
|
263
|
-
};
|
|
264
|
-
const updateGanttBar = (event) => {
|
|
265
|
-
// update the local gantt bar cache
|
|
266
|
-
const ganttBar = rows.value[event.rowIndex]?.gantt;
|
|
267
|
-
if (ganttBar) {
|
|
268
|
-
if (event.type === 'resize') {
|
|
269
|
-
if (event.edge === 'start') {
|
|
270
|
-
ganttBar.startIndex = event.newStart;
|
|
271
|
-
ganttBar.endIndex = event.end;
|
|
272
|
-
ganttBar.colspan = ganttBar.endIndex - ganttBar.startIndex;
|
|
273
|
-
}
|
|
274
|
-
else if (event.edge === 'end') {
|
|
275
|
-
ganttBar.startIndex = event.start;
|
|
276
|
-
ganttBar.endIndex = event.newEnd;
|
|
277
|
-
ganttBar.colspan = ganttBar.endIndex - ganttBar.startIndex;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
else if (event.type === 'bar') {
|
|
281
|
-
ganttBar.startIndex = event.newStart;
|
|
282
|
-
ganttBar.endIndex = event.newEnd;
|
|
283
|
-
ganttBar.colspan = ganttBar.endIndex - ganttBar.startIndex;
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
};
|
|
287
|
-
const registerGanttBar = (barInfo) => {
|
|
288
|
-
const existingIndex = ganttBars.value.findIndex(bar => bar.id === barInfo.id);
|
|
289
|
-
if (existingIndex >= 0) {
|
|
290
|
-
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
291
|
-
ganttBars.value[existingIndex] = barInfo;
|
|
292
|
-
}
|
|
293
|
-
else {
|
|
294
|
-
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
295
|
-
ganttBars.value.push(barInfo);
|
|
296
|
-
}
|
|
297
|
-
};
|
|
298
|
-
const unregisterGanttBar = (barId) => {
|
|
299
|
-
const index = ganttBars.value.findIndex(bar => bar.id === barId);
|
|
300
|
-
if (index >= 0) {
|
|
301
|
-
ganttBars.value.splice(index, 1);
|
|
302
|
-
}
|
|
303
|
-
};
|
|
304
|
-
const registerConnectionHandle = (handleInfo) => {
|
|
305
|
-
const existingIndex = connectionHandles.value.findIndex(handle => handle.id === handleInfo.id);
|
|
306
|
-
if (existingIndex >= 0) {
|
|
307
|
-
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
308
|
-
connectionHandles.value[existingIndex] = handleInfo;
|
|
309
|
-
}
|
|
310
|
-
else {
|
|
311
|
-
// @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
|
|
312
|
-
connectionHandles.value.push(handleInfo);
|
|
313
|
-
}
|
|
314
|
-
};
|
|
315
|
-
const unregisterConnectionHandle = (handleId) => {
|
|
316
|
-
const index = connectionHandles.value.findIndex(handle => handle.id === handleId);
|
|
317
|
-
if (index >= 0) {
|
|
318
|
-
connectionHandles.value.splice(index, 1);
|
|
319
|
-
}
|
|
320
|
-
};
|
|
321
|
-
const createConnection = (fromHandleId, toHandleId, options) => {
|
|
322
|
-
const fromHandle = connectionHandles.value.find(h => h.id === fromHandleId);
|
|
323
|
-
const toHandle = connectionHandles.value.find(h => h.id === toHandleId);
|
|
324
|
-
if (!fromHandle || !toHandle) {
|
|
325
|
-
console.warn('Cannot create connection: handle not found');
|
|
326
|
-
return null;
|
|
327
|
-
}
|
|
328
|
-
const connection = {
|
|
329
|
-
id: `connection-${fromHandleId}-${toHandleId}`,
|
|
330
|
-
from: {
|
|
331
|
-
barId: fromHandle.barId,
|
|
332
|
-
side: fromHandle.side,
|
|
333
|
-
},
|
|
334
|
-
to: {
|
|
335
|
-
barId: toHandle.barId,
|
|
336
|
-
side: toHandle.side,
|
|
337
|
-
},
|
|
338
|
-
style: options?.style,
|
|
339
|
-
label: options?.label,
|
|
340
|
-
};
|
|
341
|
-
connectionPaths.value.push(connection);
|
|
342
|
-
return connection;
|
|
343
|
-
};
|
|
344
|
-
const deleteConnection = (connectionId) => {
|
|
345
|
-
const index = connectionPaths.value.findIndex(conn => conn.id === connectionId);
|
|
346
|
-
if (index >= 0) {
|
|
347
|
-
connectionPaths.value.splice(index, 1);
|
|
348
|
-
return true;
|
|
349
|
-
}
|
|
350
|
-
return false;
|
|
351
|
-
};
|
|
352
|
-
const getConnectionsForBar = (barId) => {
|
|
353
|
-
return connectionPaths.value.filter(conn => conn.from.barId === barId || conn.to.barId === barId);
|
|
354
|
-
};
|
|
355
|
-
const getHandlesForBar = (barId) => {
|
|
356
|
-
return connectionHandles.value.filter(handle => handle.barId === barId);
|
|
357
|
-
};
|
|
358
|
-
return {
|
|
359
|
-
// state
|
|
360
|
-
columns,
|
|
361
|
-
config,
|
|
362
|
-
connectionHandles,
|
|
363
|
-
connectionPaths,
|
|
364
|
-
display,
|
|
365
|
-
ganttBars,
|
|
366
|
-
modal,
|
|
367
|
-
rows,
|
|
368
|
-
table,
|
|
369
|
-
updates,
|
|
370
|
-
// getters
|
|
371
|
-
hasPinnedColumns,
|
|
372
|
-
isGanttView,
|
|
373
|
-
isTreeView,
|
|
374
|
-
numberedRowWidth,
|
|
375
|
-
zeroColumn,
|
|
376
|
-
// actions
|
|
377
|
-
closeModal,
|
|
378
|
-
createConnection,
|
|
379
|
-
deleteConnection,
|
|
380
|
-
getCellData,
|
|
381
|
-
getCellDisplayValue,
|
|
382
|
-
getConnectionsForBar,
|
|
383
|
-
getFormattedValue,
|
|
384
|
-
getHandlesForBar,
|
|
385
|
-
getHeaderCellStyle,
|
|
386
|
-
getIndent,
|
|
387
|
-
getRowExpandSymbol,
|
|
388
|
-
isRowGantt,
|
|
389
|
-
isRowVisible,
|
|
390
|
-
registerConnectionHandle,
|
|
391
|
-
registerGanttBar,
|
|
392
|
-
resizeColumn,
|
|
393
|
-
setCellData,
|
|
394
|
-
setCellText,
|
|
395
|
-
toggleRowExpand,
|
|
396
|
-
unregisterConnectionHandle,
|
|
397
|
-
unregisterGanttBar,
|
|
398
|
-
updateGanttBar,
|
|
399
|
-
updateRows,
|
|
400
|
-
};
|
|
401
|
-
});
|
|
402
|
-
return createStore();
|
|
403
|
-
};
|
package/dist/src/types/index.js
DELETED
|
File without changes
|
package/dist/src/utils.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export const isHtmlString = (htmlString) => {
|
|
2
|
-
const $document = new DOMParser().parseFromString(htmlString, 'text/html');
|
|
3
|
-
return Array.from($document.body.childNodes).some(node => node.nodeType === 1);
|
|
4
|
-
};
|
|
5
|
-
export const generateHash = (length = 8) => {
|
|
6
|
-
return Array.from({ length }, () => Math.floor(Math.random() * 16).toString(16)).join('');
|
|
7
|
-
};
|
package/dist/tests/display.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../tests/display.ts"],"names":[],"mappings":""}
|
package/dist/tests/display.js
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect, beforeEach } from 'vitest';
|
|
2
|
-
import { setActivePinia, createPinia } from 'pinia';
|
|
3
|
-
import { createTableStore } from '../src/stores/table';
|
|
4
|
-
describe('Display reactivity fix', () => {
|
|
5
|
-
const mockColumns = [
|
|
6
|
-
{ name: 'id', label: 'ID' },
|
|
7
|
-
{ name: 'name', label: 'Name' }
|
|
8
|
-
];
|
|
9
|
-
beforeEach(() => {
|
|
10
|
-
setActivePinia(createPinia());
|
|
11
|
-
});
|
|
12
|
-
it('should update display properties when rows change', () => {
|
|
13
|
-
// Initial data with parent-child relationships
|
|
14
|
-
const initialRows = [
|
|
15
|
-
{ id: 1, name: 'Parent 1', parent: undefined },
|
|
16
|
-
{ id: 2, name: 'Child 1.1', parent: 0 },
|
|
17
|
-
{ id: 3, name: 'Child 1.2', parent: 0 }
|
|
18
|
-
];
|
|
19
|
-
const store = createTableStore({ columns: mockColumns, rows: initialRows });
|
|
20
|
-
// Check initial display state
|
|
21
|
-
expect(store.display[0].isRoot).toBe(true);
|
|
22
|
-
expect(store.display[0].isParent).toBe(true);
|
|
23
|
-
expect(store.display[1].isRoot).toBe(false);
|
|
24
|
-
expect(store.display[1].parent).toBe(0);
|
|
25
|
-
expect(store.display[2].isRoot).toBe(false);
|
|
26
|
-
expect(store.display[2].parent).toBe(0);
|
|
27
|
-
// Change the rows data - modify parent relationships
|
|
28
|
-
const newRows = [
|
|
29
|
-
{ id: 1, name: 'Parent 1', parent: undefined },
|
|
30
|
-
{ id: 2, name: 'Child 1.1', parent: 0 },
|
|
31
|
-
{ id: 3, name: 'New Root', parent: undefined }, // Changed from child to root
|
|
32
|
-
{ id: 4, name: 'New Child', parent: 2 } // New child of previous child
|
|
33
|
-
];
|
|
34
|
-
// Update rows using the new method
|
|
35
|
-
store.updateRows(newRows);
|
|
36
|
-
// Check that display state has been recalculated
|
|
37
|
-
expect(store.display[0].isRoot).toBe(true);
|
|
38
|
-
expect(store.display[0].isParent).toBe(true);
|
|
39
|
-
expect(store.display[1].isRoot).toBe(false);
|
|
40
|
-
expect(store.display[1].isParent).toBe(false); // No children
|
|
41
|
-
expect(store.display[1].parent).toBe(0);
|
|
42
|
-
expect(store.display[2].isRoot).toBe(true); // Now a root
|
|
43
|
-
expect(store.display[2].isParent).toBe(true); // Has a child (row 3)
|
|
44
|
-
expect(store.display[2].parent).toBeUndefined(); // No parent
|
|
45
|
-
expect(store.display[3].isRoot).toBe(false);
|
|
46
|
-
expect(store.display[3].parent).toBe(2);
|
|
47
|
-
});
|
|
48
|
-
it('should preserve row modifications and expand states across data changes', () => {
|
|
49
|
-
const initialRows = [
|
|
50
|
-
{ id: 1, name: 'Parent 1', parent: undefined },
|
|
51
|
-
{ id: 2, name: 'Child 1.1', parent: 0 }
|
|
52
|
-
];
|
|
53
|
-
const store = createTableStore({ columns: mockColumns, rows: initialRows });
|
|
54
|
-
// Modify a cell to mark row as modified
|
|
55
|
-
store.setCellData(1, 0, 'Modified Parent');
|
|
56
|
-
expect(store.display[0].rowModified).toBe(true);
|
|
57
|
-
// Toggle row expansion (for tree view)
|
|
58
|
-
store.toggleRowExpand(0);
|
|
59
|
-
// Now change the rows data but keep the same structure
|
|
60
|
-
const newRows = [
|
|
61
|
-
{ id: 1, name: 'Parent 1 Updated', parent: undefined },
|
|
62
|
-
{ id: 2, name: 'Child 1.1 Updated', parent: 0 }
|
|
63
|
-
];
|
|
64
|
-
store.updateRows(newRows);
|
|
65
|
-
// Row modifications and expand states should be preserved
|
|
66
|
-
expect(store.display[0].rowModified).toBe(true);
|
|
67
|
-
// The expansion state should be preserved too
|
|
68
|
-
expect(store.display[0].childrenOpen).toBeDefined();
|
|
69
|
-
});
|
|
70
|
-
});
|