@stonecrop/atable 0.4.25 → 0.4.27
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 +47 -1
- package/dist/assets/index.css +1 -1
- package/dist/atable.js +1141 -1129
- 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/stores/table.d.ts.map +1 -1
- package/dist/stores/table.js +33 -16
- package/package.json +3 -3
- package/src/components/ATable.vue +29 -13
- package/src/stores/table.ts +38 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EACX,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,UAAU,CAAA;AAGjB;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"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"}
|
package/dist/stores/table.js
CHANGED
|
@@ -70,14 +70,27 @@ export const createTableStore = (initData) => {
|
|
|
70
70
|
}
|
|
71
71
|
// Calculate 'open' property for tree view based on parent's childrenOpen state
|
|
72
72
|
if (isTreeView.value) {
|
|
73
|
+
// Helper function to check if all ancestors are open
|
|
74
|
+
const isNodeOpen = (rowIndex, display) => {
|
|
75
|
+
const row = display[rowIndex];
|
|
76
|
+
if (row.isRoot) {
|
|
77
|
+
return true; // Root nodes are always open
|
|
78
|
+
}
|
|
79
|
+
if (row.parent === null || row.parent === undefined) {
|
|
80
|
+
return true;
|
|
81
|
+
}
|
|
82
|
+
const parentIndex = row.parent;
|
|
83
|
+
if (parentIndex < 0 || parentIndex >= display.length) {
|
|
84
|
+
return false;
|
|
85
|
+
}
|
|
86
|
+
const parent = display[parentIndex];
|
|
87
|
+
// Node is open if parent's children are open AND parent itself is open
|
|
88
|
+
return (parent.childrenOpen || false) && isNodeOpen(parentIndex, display);
|
|
89
|
+
};
|
|
73
90
|
for (let i = 0; i < baseDisplay.length; i++) {
|
|
74
91
|
const row = baseDisplay[i];
|
|
75
|
-
if (!row.isRoot
|
|
76
|
-
|
|
77
|
-
const parentIndex = row.parent;
|
|
78
|
-
if (parentIndex >= 0 && parentIndex < baseDisplay.length) {
|
|
79
|
-
baseDisplay[i].open = baseDisplay[parentIndex].childrenOpen || false;
|
|
80
|
-
}
|
|
92
|
+
if (!row.isRoot) {
|
|
93
|
+
baseDisplay[i].open = isNodeOpen(i, baseDisplay);
|
|
81
94
|
}
|
|
82
95
|
}
|
|
83
96
|
}
|
|
@@ -184,16 +197,7 @@ export const createTableStore = (initData) => {
|
|
|
184
197
|
};
|
|
185
198
|
// If we're closing, recursively close all descendant nodes
|
|
186
199
|
if (!newChildrenOpen) {
|
|
187
|
-
|
|
188
|
-
if (display.value[index].parent === rowIndex) {
|
|
189
|
-
const childState = rowExpandStates.value[index] || {};
|
|
190
|
-
rowExpandStates.value[index] = {
|
|
191
|
-
...childState,
|
|
192
|
-
childrenOpen: false,
|
|
193
|
-
};
|
|
194
|
-
toggleRowExpand(index);
|
|
195
|
-
}
|
|
196
|
-
}
|
|
200
|
+
closeDescendants(rowIndex);
|
|
197
201
|
}
|
|
198
202
|
}
|
|
199
203
|
else if (config.value.view === 'list-expansion') {
|
|
@@ -205,6 +209,19 @@ export const createTableStore = (initData) => {
|
|
|
205
209
|
};
|
|
206
210
|
}
|
|
207
211
|
};
|
|
212
|
+
const closeDescendants = (parentRowIndex) => {
|
|
213
|
+
for (let index = 0; index < rows.value.length; index++) {
|
|
214
|
+
if (display.value[index].parent === parentRowIndex) {
|
|
215
|
+
const childState = rowExpandStates.value[index] || {};
|
|
216
|
+
rowExpandStates.value[index] = {
|
|
217
|
+
...childState,
|
|
218
|
+
childrenOpen: false,
|
|
219
|
+
};
|
|
220
|
+
// Recursively close this child's descendants
|
|
221
|
+
closeDescendants(index);
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
};
|
|
208
225
|
const getCellDisplayValue = (colIndex, rowIndex) => {
|
|
209
226
|
const cellData = getCellData(colIndex, rowIndex);
|
|
210
227
|
return getFormattedValue(colIndex, rowIndex, cellData);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/atable",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.27",
|
|
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/utilities": "0.4.
|
|
42
|
-
"@stonecrop/themes": "0.4.
|
|
41
|
+
"@stonecrop/utilities": "0.4.27",
|
|
42
|
+
"@stonecrop/themes": "0.4.27"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@microsoft/api-documenter": "^7.26.29",
|
|
@@ -86,15 +86,11 @@ import ATableModal from './ATableModal.vue'
|
|
|
86
86
|
import { createTableStore } from '../stores/table'
|
|
87
87
|
import type { ConnectionEvent, ConnectionPath, GanttDragEvent, TableColumn, TableConfig, TableRow } from '../types'
|
|
88
88
|
|
|
89
|
-
const
|
|
89
|
+
const rows = defineModel<TableRow[]>('rows', { required: true })
|
|
90
|
+
const columns = defineModel<TableColumn[]>('columns', { required: true })
|
|
90
91
|
|
|
91
|
-
const {
|
|
92
|
-
id,
|
|
93
|
-
columns,
|
|
94
|
-
config = new Object(),
|
|
95
|
-
} = defineProps<{
|
|
92
|
+
const { id, config = new Object() } = defineProps<{
|
|
96
93
|
id?: string
|
|
97
|
-
columns: TableColumn[]
|
|
98
94
|
config?: TableConfig
|
|
99
95
|
}>()
|
|
100
96
|
|
|
@@ -102,18 +98,19 @@ const emit = defineEmits<{
|
|
|
102
98
|
cellUpdate: [{ colIndex: number; rowIndex: number; newValue: any; oldValue: any }]
|
|
103
99
|
'gantt:drag': [event: GanttDragEvent]
|
|
104
100
|
'connection:event': [event: ConnectionEvent]
|
|
101
|
+
'columns:update': [columns: TableColumn[]]
|
|
105
102
|
}>()
|
|
106
103
|
|
|
107
104
|
const tableRef = useTemplateRef<HTMLTableElement>('table')
|
|
108
|
-
const store = createTableStore({ columns, rows:
|
|
105
|
+
const store = createTableStore({ columns: columns.value, rows: rows.value, id, config })
|
|
109
106
|
|
|
110
107
|
store.$onAction(({ name, store, args, after }) => {
|
|
111
108
|
if (name === 'setCellData' || name === 'setCellText') {
|
|
112
109
|
const [colIndex, rowIndex, newValue] = args
|
|
113
110
|
const oldValue = store.getCellData(colIndex, rowIndex)
|
|
114
111
|
after(() => {
|
|
115
|
-
// Update
|
|
116
|
-
|
|
112
|
+
// Update rows model to trigger update:rows event
|
|
113
|
+
rows.value = [...store.rows]
|
|
117
114
|
emit('cellUpdate', { colIndex, rowIndex, newValue, oldValue })
|
|
118
115
|
})
|
|
119
116
|
} else if (name === 'updateGanttBar') {
|
|
@@ -130,12 +127,18 @@ store.$onAction(({ name, store, args, after }) => {
|
|
|
130
127
|
emit('gantt:drag', event)
|
|
131
128
|
})
|
|
132
129
|
}
|
|
130
|
+
} else if (name === 'resizeColumn') {
|
|
131
|
+
after(() => {
|
|
132
|
+
// Update columns model
|
|
133
|
+
columns.value = [...store.columns]
|
|
134
|
+
emit('columns:update', [...store.columns])
|
|
135
|
+
})
|
|
133
136
|
}
|
|
134
137
|
})
|
|
135
138
|
|
|
136
|
-
// Watch for external changes to
|
|
139
|
+
// Watch for external changes to rows and sync to store
|
|
137
140
|
watch(
|
|
138
|
-
() =>
|
|
141
|
+
() => rows.value,
|
|
139
142
|
newRows => {
|
|
140
143
|
// Only update if the rows have actually changed (avoid infinite loops)
|
|
141
144
|
if (JSON.stringify(newRows) !== JSON.stringify(store.rows)) {
|
|
@@ -145,8 +148,21 @@ watch(
|
|
|
145
148
|
{ deep: true }
|
|
146
149
|
)
|
|
147
150
|
|
|
151
|
+
// Watch for changes to columns and sync to store
|
|
152
|
+
watch(
|
|
153
|
+
columns,
|
|
154
|
+
newColumns => {
|
|
155
|
+
// Only update if the columns have actually changed (avoid infinite loops)
|
|
156
|
+
if (JSON.stringify(newColumns) !== JSON.stringify(store.columns)) {
|
|
157
|
+
store.columns = [...newColumns]
|
|
158
|
+
emit('columns:update', [...newColumns] as TableColumn[])
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
{ deep: true }
|
|
162
|
+
)
|
|
163
|
+
|
|
148
164
|
onMounted(() => {
|
|
149
|
-
if (columns.some(column => column.pinned)) {
|
|
165
|
+
if (columns.value.some(column => column.pinned)) {
|
|
150
166
|
assignStickyCellWidths()
|
|
151
167
|
|
|
152
168
|
// in tree views, also add a mutation observer to capture and adjust expanded rows
|
package/src/stores/table.ts
CHANGED
|
@@ -99,14 +99,31 @@ export const createTableStore = (initData: {
|
|
|
99
99
|
|
|
100
100
|
// Calculate 'open' property for tree view based on parent's childrenOpen state
|
|
101
101
|
if (isTreeView.value) {
|
|
102
|
+
// Helper function to check if all ancestors are open
|
|
103
|
+
const isNodeOpen = (rowIndex: number, display: TableDisplay[]): boolean => {
|
|
104
|
+
const row = display[rowIndex]
|
|
105
|
+
if (row.isRoot) {
|
|
106
|
+
return true // Root nodes are always open
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
if (row.parent === null || row.parent === undefined) {
|
|
110
|
+
return true
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const parentIndex = row.parent
|
|
114
|
+
if (parentIndex < 0 || parentIndex >= display.length) {
|
|
115
|
+
return false
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
const parent = display[parentIndex]
|
|
119
|
+
// Node is open if parent's children are open AND parent itself is open
|
|
120
|
+
return (parent.childrenOpen || false) && isNodeOpen(parentIndex, display)
|
|
121
|
+
}
|
|
122
|
+
|
|
102
123
|
for (let i = 0; i < baseDisplay.length; i++) {
|
|
103
124
|
const row = baseDisplay[i]
|
|
104
|
-
if (!row.isRoot
|
|
105
|
-
|
|
106
|
-
const parentIndex = row.parent
|
|
107
|
-
if (parentIndex >= 0 && parentIndex < baseDisplay.length) {
|
|
108
|
-
baseDisplay[i].open = baseDisplay[parentIndex].childrenOpen || false
|
|
109
|
-
}
|
|
125
|
+
if (!row.isRoot) {
|
|
126
|
+
baseDisplay[i].open = isNodeOpen(i, baseDisplay)
|
|
110
127
|
}
|
|
111
128
|
}
|
|
112
129
|
}
|
|
@@ -241,16 +258,7 @@ export const createTableStore = (initData: {
|
|
|
241
258
|
|
|
242
259
|
// If we're closing, recursively close all descendant nodes
|
|
243
260
|
if (!newChildrenOpen) {
|
|
244
|
-
|
|
245
|
-
if (display.value[index].parent === rowIndex) {
|
|
246
|
-
const childState = rowExpandStates.value[index] || {}
|
|
247
|
-
rowExpandStates.value[index] = {
|
|
248
|
-
...childState,
|
|
249
|
-
childrenOpen: false,
|
|
250
|
-
}
|
|
251
|
-
toggleRowExpand(index)
|
|
252
|
-
}
|
|
253
|
-
}
|
|
261
|
+
closeDescendants(rowIndex)
|
|
254
262
|
}
|
|
255
263
|
} else if (config.value.view === 'list-expansion') {
|
|
256
264
|
const currentState = rowExpandStates.value[rowIndex] || {}
|
|
@@ -262,6 +270,20 @@ export const createTableStore = (initData: {
|
|
|
262
270
|
}
|
|
263
271
|
}
|
|
264
272
|
|
|
273
|
+
const closeDescendants = (parentRowIndex: number) => {
|
|
274
|
+
for (let index = 0; index < rows.value.length; index++) {
|
|
275
|
+
if (display.value[index].parent === parentRowIndex) {
|
|
276
|
+
const childState = rowExpandStates.value[index] || {}
|
|
277
|
+
rowExpandStates.value[index] = {
|
|
278
|
+
...childState,
|
|
279
|
+
childrenOpen: false,
|
|
280
|
+
}
|
|
281
|
+
// Recursively close this child's descendants
|
|
282
|
+
closeDescendants(index)
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
265
287
|
const getCellDisplayValue = (colIndex: number, rowIndex: number) => {
|
|
266
288
|
const cellData = getCellData(colIndex, rowIndex)
|
|
267
289
|
return getFormattedValue(colIndex, rowIndex, cellData)
|