@alaarab/ogrid-vue-vuetify 2.0.3 → 2.0.4
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, ref, computed, h, Teleport } from 'vue';
|
|
2
2
|
import { VCheckbox, VProgressCircular, VBtn } from 'vuetify/components';
|
|
3
|
-
import { useDataGridState, useColumnResize, useColumnReorder, useVirtualScroll, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, buildHeaderRows, flattenColumns, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-vue';
|
|
3
|
+
import { useDataGridState, useColumnResize, useColumnReorder, useVirtualScroll, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, buildHeaderRows, flattenColumns, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-vue';
|
|
4
4
|
import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
|
|
5
5
|
import { InlineCellEditor } from './InlineCellEditor';
|
|
6
6
|
import { StatusBar } from './StatusBar';
|
|
@@ -68,7 +68,10 @@ export const DataGridTable = defineComponent({
|
|
|
68
68
|
const interaction = state.interaction.value;
|
|
69
69
|
const ctxMenu = state.contextMenu.value;
|
|
70
70
|
const viewModels = state.viewModels.value;
|
|
71
|
-
const { visibleCols, hasCheckboxCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = layout;
|
|
71
|
+
const { visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = layout;
|
|
72
|
+
const currentPage = props.gridProps.currentPage ?? 1;
|
|
73
|
+
const pageSize = props.gridProps.pageSize ?? 25;
|
|
74
|
+
const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * pageSize : 0;
|
|
72
75
|
const { selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
|
|
73
76
|
const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
|
|
74
77
|
const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, } = interaction;
|
|
@@ -340,6 +343,28 @@ export const DataGridTable = defineComponent({
|
|
|
340
343
|
style: { width: `${CHECKBOX_COLUMN_WIDTH}px`, minWidth: `${CHECKBOX_COLUMN_WIDTH}px`, padding: '0' },
|
|
341
344
|
}),
|
|
342
345
|
] : []),
|
|
346
|
+
// Row numbers header cell (last leaf row only)
|
|
347
|
+
...(rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [
|
|
348
|
+
h('th', {
|
|
349
|
+
style: {
|
|
350
|
+
width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
|
|
351
|
+
minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
|
|
352
|
+
maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
|
|
353
|
+
textAlign: 'center',
|
|
354
|
+
fontWeight: '600',
|
|
355
|
+
padding: '6px',
|
|
356
|
+
backgroundColor: 'rgba(0,0,0,0.04)',
|
|
357
|
+
color: 'rgba(0,0,0,0.6)',
|
|
358
|
+
},
|
|
359
|
+
}, '#'),
|
|
360
|
+
] : []),
|
|
361
|
+
// Empty placeholder for row numbers in first group row
|
|
362
|
+
...(rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [
|
|
363
|
+
h('th', {
|
|
364
|
+
rowSpan: headerRows.length - 1,
|
|
365
|
+
style: { width: `${ROW_NUMBER_COLUMN_WIDTH}px`, minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`, padding: '0' },
|
|
366
|
+
}),
|
|
367
|
+
] : []),
|
|
343
368
|
// Header cells
|
|
344
369
|
...row.map((cell, cellIdx) => {
|
|
345
370
|
if (cell.isGroup) {
|
|
@@ -431,6 +456,22 @@ export const DataGridTable = defineComponent({
|
|
|
431
456
|
'onUpdate:modelValue': (checked) => handleRowCheckboxChange(rowIdStr, checked, rowIndex, lastMouseShift.value),
|
|
432
457
|
}))),
|
|
433
458
|
] : []),
|
|
459
|
+
// Row numbers cell
|
|
460
|
+
...(hasRowNumbersCol ? [
|
|
461
|
+
h('td', {
|
|
462
|
+
style: {
|
|
463
|
+
width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
|
|
464
|
+
minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
|
|
465
|
+
maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
|
|
466
|
+
textAlign: 'center',
|
|
467
|
+
fontWeight: '600',
|
|
468
|
+
fontVariantNumeric: 'tabular-nums',
|
|
469
|
+
padding: '6px',
|
|
470
|
+
backgroundColor: 'rgba(0,0,0,0.04)',
|
|
471
|
+
color: 'rgba(0,0,0,0.6)',
|
|
472
|
+
},
|
|
473
|
+
}, String(rowNumberOffset + rowIndex + 1)),
|
|
474
|
+
] : []),
|
|
434
475
|
// Data cells
|
|
435
476
|
...columnLayouts.map((cl, colIdx) => h('td', {
|
|
436
477
|
key: cl.col.columnId,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-vue-vuetify",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"description": "OGrid Vuetify – Vuetify-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"files": ["dist", "README.md", "LICENSE"],
|
|
23
23
|
"engines": { "node": ">=18" },
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@alaarab/ogrid-vue": "2.0.
|
|
25
|
+
"@alaarab/ogrid-vue": "2.0.4"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"vue": "^3.3.0",
|