virtua 0.52.4 → 0.52.6
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 +1 -1
- package/lib/angular/VGrid.d.ts +3 -0
- package/lib/angular/index.js +214 -194
- package/lib/angular/index.js.map +1 -1
- package/lib/core/index.cjs +176 -161
- package/lib/core/index.cjs.map +1 -1
- package/lib/core/index.d.ts +1 -1
- package/lib/core/index.js +171 -156
- package/lib/core/index.js.map +1 -1
- package/lib/index.cjs +407 -391
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +368 -353
- package/lib/index.js.map +1 -1
- package/lib/solid/index.cjs +459 -442
- package/lib/solid/index.cjs.map +1 -1
- package/lib/solid/index.js +453 -438
- package/lib/solid/index.js.map +1 -1
- package/lib/solid/index.jsx +59 -43
- package/lib/solid/index.jsx.map +1 -1
- package/lib/svelte/VGrid.svelte +7 -20
- package/lib/svelte/utils.d.ts +5 -0
- package/lib/svelte/utils.js.map +1 -1
- package/lib/vue/index.cjs +406 -389
- package/lib/vue/index.cjs.map +1 -1
- package/lib/vue/index.js +381 -366
- package/lib/vue/index.js.map +1 -1
- package/package.json +1 -1
package/lib/solid/index.jsx
CHANGED
|
@@ -425,7 +425,7 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
425
425
|
const findIndex = (offset) => itemSize + gap ? clamp(floor(offset / (itemSize + gap)), 0, length - 1) : 0;
|
|
426
426
|
const getItemOffset = (index) => index * (itemSize + gap);
|
|
427
427
|
const findRange = (startOffset, endOffset) => [findIndex(startOffset), findIndex(endOffset)];
|
|
428
|
-
|
|
428
|
+
const layout = {
|
|
429
429
|
$getRange: (startOffset, endOffset) => pinRange(findRange, getItemOffset, length, startOffset, endOffset),
|
|
430
430
|
$findIndex: findIndex,
|
|
431
431
|
$getItemOffset: getItemOffset,
|
|
@@ -442,8 +442,9 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
442
442
|
$setPinned: setPinned,
|
|
443
443
|
$getPinnedStart: () => getPinnedStart(length),
|
|
444
444
|
$getTrailStart: () => getTrailStart(length),
|
|
445
|
-
$
|
|
446
|
-
|
|
445
|
+
$getSizes: (_axis, nextSize) => typeof nextSize === "number" ? nextSize : null,
|
|
446
|
+
$setAxis: (nextSize, scrollOffset) => {
|
|
447
|
+
if (nextSize == null || nextSize === itemSize) {
|
|
447
448
|
return;
|
|
448
449
|
}
|
|
449
450
|
const jump = findIndex(scrollOffset) * (nextSize - itemSize);
|
|
@@ -451,13 +452,12 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
451
452
|
return jump;
|
|
452
453
|
}
|
|
453
454
|
};
|
|
455
|
+
return layout;
|
|
454
456
|
}
|
|
455
457
|
const isAuto = size === "auto";
|
|
456
|
-
let
|
|
457
|
-
let currentSize = size;
|
|
458
|
-
const length = getAxisLength(axis);
|
|
458
|
+
let currentSizes = null;
|
|
459
459
|
const autos = [];
|
|
460
|
-
const inner = createListLayout(
|
|
460
|
+
const inner = createListLayout(getAxisLength(axis), undefined, [[], 40 + gap]);
|
|
461
461
|
const isMeasurable = (index) => isAuto || !!autos[index];
|
|
462
462
|
const layout = {
|
|
463
463
|
$getRange: (startOffset, endOffset) => pinRange(inner.$getRange, inner.$getItemOffset, inner.$getLength(), startOffset, endOffset),
|
|
@@ -474,24 +474,22 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
474
474
|
$setPinned: setPinned,
|
|
475
475
|
$getPinnedStart: () => getPinnedStart(inner.$getLength()),
|
|
476
476
|
$getTrailStart: () => getTrailStart(inner.$getLength()),
|
|
477
|
-
$
|
|
478
|
-
|
|
477
|
+
$getSizes: (nextAxis, nextSize) => isAuto || typeof nextSize !== "string" || nextSize === "auto" ? null : nextAxis.map((item) => item != null ? item[nextSize] : null),
|
|
478
|
+
$setAxis: (nextSizes, scrollOffset) => {
|
|
479
|
+
if (!nextSizes) {
|
|
479
480
|
return;
|
|
480
481
|
}
|
|
481
|
-
const nextSize = typeof requestedSize === "number" || requestedSize === "auto" ? currentSize : requestedSize;
|
|
482
482
|
const length = inner.$getLength();
|
|
483
|
-
if (
|
|
483
|
+
if (nextSizes === currentSizes && length === autos.length) {
|
|
484
484
|
return;
|
|
485
485
|
}
|
|
486
|
-
|
|
487
|
-
currentSize = nextSize;
|
|
486
|
+
currentSizes = nextSizes;
|
|
488
487
|
autos.length = length;
|
|
489
488
|
const anchorIndex = inner.$findIndex(scrollOffset);
|
|
490
489
|
const prevOffset = inner.$getItemOffset(anchorIndex);
|
|
491
490
|
let changed;
|
|
492
491
|
for (let i = 0; i < length; i++) {
|
|
493
|
-
const
|
|
494
|
-
const itemSize = item !== null && typeof item === "object" ? item[nextSize] : null;
|
|
492
|
+
const itemSize = nextSizes[i];
|
|
495
493
|
const isAutoItem = typeof itemSize !== "number";
|
|
496
494
|
if (!isAutoItem || !autos[i]) {
|
|
497
495
|
autos[i] = isAutoItem;
|
|
@@ -508,25 +506,38 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
508
506
|
return inner.$getItemOffset(anchorIndex) - prevOffset;
|
|
509
507
|
}
|
|
510
508
|
};
|
|
511
|
-
layout.$setAxis(axis, size, 0);
|
|
512
509
|
return layout;
|
|
513
510
|
};
|
|
514
511
|
|
|
515
512
|
//#endregion
|
|
516
513
|
//#region src/core/grid.ts
|
|
517
|
-
var updateGridAxis = (store, layout, axis,
|
|
514
|
+
var updateGridAxis = (store, layout, axis, sizes, header, footer) => {
|
|
518
515
|
const length = getAxisLength(axis);
|
|
519
516
|
layout.$setPinned(header, footer);
|
|
520
517
|
if (length !== store.$getItemsLength()) {
|
|
521
518
|
store.$update(5, [length]);
|
|
522
519
|
}
|
|
523
|
-
const jump = layout.$setAxis(
|
|
520
|
+
const jump = layout.$setAxis(sizes, store.$getScrollOffset() - store.$getItemOffset(0));
|
|
524
521
|
if (jump != null) {
|
|
525
522
|
store.$update(9, jump);
|
|
526
523
|
}
|
|
527
524
|
};
|
|
528
525
|
var rowStatesCache = /*#__PURE__*/ new WeakMap();
|
|
529
|
-
var
|
|
526
|
+
var createGridSpanIndex = (spans = EMPTY) => {
|
|
527
|
+
const index = new Map();
|
|
528
|
+
for (const span of spans) {
|
|
529
|
+
const rowTo = span.rowIndex + (span.rowSpan || 1);
|
|
530
|
+
for (let rowIndex = span.rowIndex; rowIndex < rowTo; rowIndex++) {
|
|
531
|
+
const rowSpans = index.get(rowIndex);
|
|
532
|
+
if (rowSpans) {
|
|
533
|
+
rowSpans.push(span);
|
|
534
|
+
} else {
|
|
535
|
+
index.set(rowIndex, [span]);
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
return index;
|
|
540
|
+
};
|
|
530
541
|
var getSectionStarts = (sectionRows, pinnedStart, trailStart) => {
|
|
531
542
|
const starts = [];
|
|
532
543
|
for (const rowIndex of sectionRows) {
|
|
@@ -615,17 +626,17 @@ var gridStyleToString = (style) => {
|
|
|
615
626
|
}
|
|
616
627
|
return css;
|
|
617
628
|
};
|
|
618
|
-
var createGridPlan = (rowLayout, colLayout,
|
|
629
|
+
var createGridPlan = (rowLayout, colLayout, [rowRangeStart, rowRangeEnd], [colRangeStart, colRangeEnd], spanIndex, sectionRows = EMPTY, kept = EMPTY, sortedCell) => {
|
|
619
630
|
const totalRowCount = rowLayout.$getLength();
|
|
620
631
|
const totalColCount = colLayout.$getLength();
|
|
621
632
|
const rowPinnedStart = rowLayout.$getPinnedStart();
|
|
622
633
|
const rowTrailStart = rowLayout.$getTrailStart();
|
|
623
634
|
const colPinnedStart = colLayout.$getPinnedStart();
|
|
624
635
|
const colTrailStart = colLayout.$getTrailStart();
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
636
|
+
rowRangeStart = clamp(rowRangeStart, rowPinnedStart, rowTrailStart);
|
|
637
|
+
rowRangeEnd = min(rowRangeEnd, rowTrailStart - 1);
|
|
638
|
+
colRangeStart = clamp(colRangeStart, colPinnedStart, colTrailStart);
|
|
639
|
+
colRangeEnd = min(colRangeEnd, colTrailStart - 1);
|
|
629
640
|
const sectionStarts = getSectionStarts(sectionRows, rowPinnedStart, rowTrailStart);
|
|
630
641
|
const rowHeaderCol = max(colPinnedStart - 1, 0);
|
|
631
642
|
const extraRows = [];
|
|
@@ -634,28 +645,30 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EM
|
|
|
634
645
|
for (const cell of kept) {
|
|
635
646
|
if (cell.rowIndex < totalRowCount && cell.colIndex < totalColCount) {
|
|
636
647
|
extraCells.push(cell);
|
|
648
|
+
extraRows.push(cell.rowIndex);
|
|
637
649
|
}
|
|
638
650
|
}
|
|
639
651
|
const keptLength = extraCells.length;
|
|
640
|
-
const sectionLength = sectionStarts.length;
|
|
641
652
|
const firstSection = getSectionIndex(sectionStarts, rowRangeStart, rowTrailStart);
|
|
642
653
|
const firstSectionStart = firstSection < 0 ? -1 : sectionStarts[firstSection];
|
|
643
654
|
if (firstSectionStart >= 0) {
|
|
644
655
|
extraRows.push(firstSectionStart);
|
|
645
656
|
}
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
const
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
657
|
+
const seenRows = getTrackIndexes(sort(extraRows), totalRowCount, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart);
|
|
658
|
+
for (let s = 0; s < seenRows.length; s++) {
|
|
659
|
+
for (const span of spanIndex.get(seenRows[s]) || EMPTY) {
|
|
660
|
+
const { rowIndex, colIndex } = span;
|
|
661
|
+
const rowTo = getSpanRowEnd(span, totalRowCount);
|
|
662
|
+
const colTo = getSpanColEnd(span, totalColCount);
|
|
663
|
+
if ((s < 1 || seenRows[s - 1] < rowIndex) && colIndex < totalColCount && (rowTo - rowIndex > 1 || colTo - colIndex > 1)) {
|
|
664
|
+
let isLaid = (rowIndex < rowPinnedStart || max(rowIndex, rowRangeStart) < min(rowTo, rowRangeEnd + 1) || rowTrailStart < rowTo || firstSectionStart >= rowIndex && firstSectionStart < rowTo) && (colIndex < colPinnedStart || max(colIndex, colRangeStart) < min(colTo, colRangeEnd + 1) || colTrailStart < colTo);
|
|
665
|
+
for (let k = 0; !isLaid && k < keptLength; k++) {
|
|
666
|
+
const cell = extraCells[k];
|
|
667
|
+
isLaid = cell.rowIndex >= rowIndex && cell.rowIndex < rowTo && cell.colIndex >= colIndex && cell.colIndex < colTo;
|
|
668
|
+
}
|
|
669
|
+
if (isLaid) {
|
|
670
|
+
extraCells.push(span);
|
|
671
|
+
}
|
|
659
672
|
}
|
|
660
673
|
}
|
|
661
674
|
}
|
|
@@ -705,7 +718,7 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EM
|
|
|
705
718
|
const section = getSectionIndex(sectionStarts, rowIndex, rowTrailStart);
|
|
706
719
|
const groupStart = isRowPinnedStart ? 0 : isRowPinnedEnd ? rowTrailStart : section < 0 ? -1 : sectionStarts[section];
|
|
707
720
|
if (rowIndex === groupStart) {
|
|
708
|
-
const groupEnd = isRowPinnedStart ? rowPinnedStart : isRowPinnedEnd ? totalRowCount : section + 1 <
|
|
721
|
+
const groupEnd = isRowPinnedStart ? rowPinnedStart : isRowPinnedEnd ? totalRowCount : section + 1 < sectionStarts.length ? sectionStarts[section + 1] : rowTrailStart;
|
|
709
722
|
rowCuts.push(groupEnd);
|
|
710
723
|
const groupedRows = [];
|
|
711
724
|
groups.push({
|
|
@@ -746,7 +759,7 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EM
|
|
|
746
759
|
let measureColIndex;
|
|
747
760
|
rowEnd = max(rowEnd, rowTo);
|
|
748
761
|
const stickyStart = isColPinnedStart ? colLayout.$getItemOffset(colIndex) : null;
|
|
749
|
-
const stickyEnd = isColPinnedEnd ? colLayout.$
|
|
762
|
+
const stickyEnd = isColPinnedEnd ? colLayout.$getItemOffset(totalColCount) - colLayout.$getItemOffset(colTo) : null;
|
|
750
763
|
if (measuredRow === false && !isSpanningRows) {
|
|
751
764
|
measureRowIndex = rowIndex;
|
|
752
765
|
measuredRow = true;
|
|
@@ -1714,6 +1727,9 @@ var VGrid = (props) => {
|
|
|
1714
1727
|
]);
|
|
1715
1728
|
const rowLayout = createGridLayout(rows, rowHeight, gap);
|
|
1716
1729
|
const colLayout = createGridLayout(cols, colWidth, gap);
|
|
1730
|
+
const rowSizes = createMemo(() => rowLayout.$getSizes(props.rows, props.rowHeight));
|
|
1731
|
+
const colSizes = createMemo(() => colLayout.$getSizes(props.cols, props.colWidth));
|
|
1732
|
+
const spanIndex = createMemo(() => createGridSpanIndex(props.spans));
|
|
1717
1733
|
const rowStore = createVirtualStore(rowLayout);
|
|
1718
1734
|
const colStore = createVirtualStore(colLayout);
|
|
1719
1735
|
const driver = createContainerGridDriver(rowStore, colStore);
|
|
@@ -1740,16 +1756,16 @@ var VGrid = (props) => {
|
|
|
1740
1756
|
rowStore.$subscribe(8, notifyScrollEnd);
|
|
1741
1757
|
colStore.$subscribe(8, notifyScrollEnd);
|
|
1742
1758
|
createComputed(() => {
|
|
1743
|
-
updateGridAxis(rowStore, rowLayout, props.rows,
|
|
1759
|
+
updateGridAxis(rowStore, rowLayout, props.rows, rowSizes(), props.headerRows, props.footerRows);
|
|
1744
1760
|
});
|
|
1745
1761
|
createComputed(() => {
|
|
1746
|
-
updateGridAxis(colStore, colLayout, props.cols,
|
|
1762
|
+
updateGridAxis(colStore, colLayout, props.cols, colSizes(), props.headerCols, props.footerCols);
|
|
1747
1763
|
});
|
|
1748
1764
|
const rowCount = createMemo(() => stateVersion() && rowStore.$getItemsLength());
|
|
1749
1765
|
const colCount = createMemo(() => stateVersion() && colStore.$getItemsLength());
|
|
1750
1766
|
const plan = createMemo(() => {
|
|
1751
1767
|
stateVersion();
|
|
1752
|
-
return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize),
|
|
1768
|
+
return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), spanIndex(), props.sectionRows, props.keepMounted, props.ariaSort);
|
|
1753
1769
|
});
|
|
1754
1770
|
const keys = createMemo(() => plan().$groups.map((state) => "$rows" in state ? state.$key : state.$row));
|
|
1755
1771
|
const isScrolling = createMemo(() => stateVersion() && (rowStore.$isScrolling() || colStore.$isScrolling()));
|