@svgrid/grid 2.6.23 → 3.0.0
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/CHANGELOG.md +88 -88
- package/README.md +199 -199
- package/dist/FlexRender.svelte +96 -96
- package/dist/GridFooter.svelte +181 -181
- package/dist/SvAutoComplete.svelte +169 -169
- package/dist/SvAvatar.svelte +75 -75
- package/dist/SvCalendar.svelte +503 -503
- package/dist/SvCarousel.svelte +141 -141
- package/dist/SvCheckBox.svelte +102 -102
- package/dist/SvCircularProgress.svelte +109 -109
- package/dist/SvColorInput.svelte +181 -181
- package/dist/SvComboBox.svelte +279 -279
- package/dist/SvContextMenu.svelte +116 -116
- package/dist/SvCountryInput.svelte +163 -163
- package/dist/SvDrawer.svelte +254 -254
- package/dist/SvDropDownList.svelte +378 -378
- package/dist/SvDurationInput.svelte +126 -126
- package/dist/SvField.svelte +293 -293
- package/dist/SvForm.svelte +437 -437
- package/dist/SvGridCellEditor.svelte +744 -744
- package/dist/SvGridChart.svelte +1716 -1716
- package/dist/SvGridChartPanel.svelte +485 -485
- package/dist/SvGridChartView.svelte +70 -70
- package/dist/SvGridDropdown.svelte +728 -728
- package/dist/SvGridSelect.svelte +270 -270
- package/dist/SvGroupCell.svelte +116 -116
- package/dist/SvListBox.svelte +334 -334
- package/dist/SvMaskedInput.svelte +122 -122
- package/dist/SvMenu.svelte +124 -124
- package/dist/SvMenuList.svelte +146 -146
- package/dist/SvMultiSelect.svelte +293 -293
- package/dist/SvNumberInput.svelte +172 -172
- package/dist/SvOtpInput.svelte +158 -158
- package/dist/SvPasswordInput.svelte +151 -151
- package/dist/SvPhoneInput.svelte +133 -133
- package/dist/SvPopover.svelte +197 -197
- package/dist/SvProgress.svelte +116 -116
- package/dist/SvRadioGroup.svelte +107 -107
- package/dist/SvRating.svelte +112 -112
- package/dist/SvResult.svelte +73 -73
- package/dist/SvRichText.svelte +211 -211
- package/dist/SvRowGroupPanel.svelte +170 -170
- package/dist/SvScrollArea.svelte +61 -61
- package/dist/SvSlider.svelte +203 -203
- package/dist/SvSwitchButton.svelte +108 -108
- package/dist/SvTagsInput.svelte +115 -115
- package/dist/SvTextInput.svelte +147 -147
- package/dist/SvTimePicker.svelte +245 -245
- package/dist/SvToaster.svelte +159 -159
- package/dist/SvToggleButton.svelte +85 -85
- package/dist/SvTooltip.svelte +161 -161
- package/dist/SvTour.svelte +208 -208
- package/dist/SvTree.svelte +444 -444
- package/dist/SvTreeSelect.svelte +239 -239
- package/dist/cdn/{GridMenus-BzWXQjv3.js → GridMenus-DMihUtma.js} +3 -3
- package/dist/cdn/{GridMenus-xr_rHx8F.js → GridMenus-nmNDj1a3.js} +3 -3
- package/dist/cdn/{SvDateRangeInput-DMLKmGEc.js → SvDateRangeInput-Bh0A0JkF.js} +1 -1
- package/dist/cdn/{SvDateRangeInput-CaOuMs8O.js → SvDateRangeInput-DflbiP7N.js} +1 -1
- package/dist/cdn/{SvDateTimePicker-sonaH0oh.js → SvDateTimePicker-BWwpfB_o.js} +1 -1
- package/dist/cdn/{SvDateTimePicker-CCbDZNZB.js → SvDateTimePicker-Bivn8dAP.js} +1 -1
- package/dist/cdn/{SvGridCellEditor-BAPSC7EL.js → SvGridCellEditor-AXL8cHGO.js} +1 -1
- package/dist/cdn/{SvGridCellEditor-BwzmUWtL.js → SvGridCellEditor-Ba7rY3eu.js} +1 -1
- package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
- package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
- package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
- package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
- package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
- package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
- package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
- package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
- package/dist/cdn/{date-format-BnnHlqGw.js → date-format-CcP1tafP.js} +2 -2
- package/dist/cdn/{date-format-BNii4zeD.js → date-format-DZT7T1wf.js} +2 -2
- package/dist/cdn/{row-drag-touch-Ddaa-QeB.js → row-drag-touch-CycRR65n.js} +12 -10
- package/dist/cdn/{src-skQN5eqh.js → src-B_YS5AOc.js} +45 -45
- package/dist/cdn/{src-DGo7IHug.js → src-DYXXpuSk.js} +44 -44
- package/dist/cdn/svgrid.js +7 -7
- package/dist/cdn/svgrid.svelte-external.js +7 -7
- package/dist/chart-export.js +8 -8
- package/dist/row-drag-touch.d.ts +5 -1
- package/dist/row-drag-touch.js +15 -4
- package/dist/row-drag.js +7 -3
- package/package.json +11 -11
- package/src/FlexRender.svelte +96 -96
- package/src/GridFooter.svelte +181 -181
- package/src/SvAutoComplete.svelte +169 -169
- package/src/SvAvatar.svelte +75 -75
- package/src/SvCalendar.svelte +503 -503
- package/src/SvCalendar.test.ts +226 -226
- package/src/SvCarousel.svelte +141 -141
- package/src/SvCheckBox.svelte +102 -102
- package/src/SvCircularProgress.svelte +109 -109
- package/src/SvColorInput.svelte +181 -181
- package/src/SvComboBox.svelte +279 -279
- package/src/SvContextMenu.svelte +116 -116
- package/src/SvCountryInput.svelte +163 -163
- package/src/SvDrawer.svelte +254 -254
- package/src/SvDropDownList.svelte +378 -378
- package/src/SvDurationInput.svelte +126 -126
- package/src/SvField.svelte +293 -293
- package/src/SvForm.svelte +437 -437
- package/src/SvForm.test.ts +411 -411
- package/src/SvGrid.types.ts +2092 -2092
- package/src/SvGridCellEditor.svelte +744 -744
- package/src/SvGridChart.svelte +1716 -1716
- package/src/SvGridChartPanel.svelte +485 -485
- package/src/SvGridChartView.svelte +70 -70
- package/src/SvGridDropdown.svelte +728 -728
- package/src/SvGridSelect.svelte +270 -270
- package/src/SvGroupCell.svelte +116 -116
- package/src/SvListBox.svelte +334 -334
- package/src/SvMaskedInput.svelte +122 -122
- package/src/SvMenu.svelte +124 -124
- package/src/SvMenu.test.ts +97 -97
- package/src/SvMenuList.svelte +146 -146
- package/src/SvMultiSelect.svelte +293 -293
- package/src/SvNumberInput.svelte +172 -172
- package/src/SvOtpInput.svelte +158 -158
- package/src/SvPasswordInput.svelte +151 -151
- package/src/SvPhoneInput.svelte +133 -133
- package/src/SvPopover.svelte +197 -197
- package/src/SvProgress.svelte +116 -116
- package/src/SvRadioGroup.svelte +107 -107
- package/src/SvRating.svelte +112 -112
- package/src/SvResult.svelte +73 -73
- package/src/SvRichText.svelte +211 -211
- package/src/SvRowGroupPanel.svelte +170 -170
- package/src/SvScrollArea.svelte +61 -61
- package/src/SvSlider.svelte +203 -203
- package/src/SvSwitchButton.svelte +108 -108
- package/src/SvTagsInput.svelte +115 -115
- package/src/SvTextInput.svelte +147 -147
- package/src/SvTimePicker.svelte +245 -245
- package/src/SvToaster.svelte +159 -159
- package/src/SvToaster.test.ts +95 -95
- package/src/SvToggleButton.svelte +85 -85
- package/src/SvTooltip.svelte +161 -161
- package/src/SvTour.svelte +208 -208
- package/src/SvTree.svelte +444 -444
- package/src/SvTreeSelect.svelte +239 -239
- package/src/a11y/dismissable.test.ts +119 -119
- package/src/a11y/dismissable.ts +114 -114
- package/src/a11y.contract.test.ts +49 -49
- package/src/a11y.test.ts +59 -59
- package/src/a11y.ts +61 -61
- package/src/ai.test.ts +502 -502
- package/src/ai.ts +1419 -1419
- package/src/build-api.coverage.test.ts +633 -633
- package/src/build-api.ts +846 -846
- package/src/builtin-editors.grid.test.ts +83 -83
- package/src/cell-formatting.ts +171 -171
- package/src/cell-render.test.ts +513 -513
- package/src/cell-render.ts +496 -496
- package/src/cell-values.ts +148 -148
- package/src/chart-export.ts +202 -202
- package/src/chart-view.svelte.ts +36 -36
- package/src/chart.ts +2321 -2321
- package/src/collaboration.test.ts +104 -104
- package/src/collaboration.ts +167 -167
- package/src/column-groups.ts +78 -78
- package/src/core.performance.test.ts +30 -30
- package/src/core.ts +1865 -1865
- package/src/createAutocomplete.svelte.ts +132 -132
- package/src/createCombobox.svelte.ts +191 -191
- package/src/createCountryInput.svelte.ts +157 -157
- package/src/createDropdownList.svelte.ts +168 -168
- package/src/createForm.svelte.ts +386 -386
- package/src/createGrid.svelte.ts +42 -42
- package/src/createGrid.test.ts +10 -10
- package/src/createGridState.svelte.ts +17 -17
- package/src/createListbox.svelte.ts +250 -250
- package/src/createMenu.svelte.ts +224 -224
- package/src/createPopoverSelect.svelte.ts +213 -213
- package/src/createSlider.svelte.ts +191 -191
- package/src/createTooltip.svelte.ts +144 -144
- package/src/createTree.svelte.ts +322 -322
- package/src/datetime/date-core.ts +206 -206
- package/src/datetime/date-restrict.ts +61 -61
- package/src/datetime/timezone.ts +135 -135
- package/src/dock-manager-model.ts +596 -596
- package/src/dock-model.ts +374 -374
- package/src/editing.test.ts +974 -974
- package/src/editing.ts +609 -609
- package/src/editor-contract.ts +171 -171
- package/src/editor-registry.grid.test.ts +144 -144
- package/src/editor-registry.ts +122 -122
- package/src/export-data-api.test.ts +126 -126
- package/src/export-format.test.ts +107 -107
- package/src/export-format.ts +601 -601
- package/src/filter-operators.ts +160 -160
- package/src/filtering/excel-filters.ts +325 -325
- package/src/flex-render.ts +3 -3
- package/src/form-field.ts +127 -127
- package/src/group-display.test.ts +167 -167
- package/src/group-display.ts +200 -200
- package/src/headless.ts +87 -87
- package/src/js-scroller.svelte.ts +173 -173
- package/src/keyboard-handlers.ts +270 -270
- package/src/keyboard.test.ts +59 -59
- package/src/keyboard.ts +97 -97
- package/src/list-nav.test.ts +49 -49
- package/src/list-nav.ts +29 -29
- package/src/list-option.test.ts +56 -56
- package/src/list-option.ts +179 -179
- package/src/menus.ts +597 -597
- package/src/merge-objects.ts +48 -48
- package/src/overlays.test.ts +90 -90
- package/src/positioning.ts +268 -268
- package/src/render-component.ts +28 -28
- package/src/row-drag-touch.ts +20 -5
- package/src/row-drag.test.ts +401 -353
- package/src/row-drag.ts +419 -415
- package/src/row-resize.test.ts +524 -524
- package/src/row-resize.ts +228 -228
- package/src/scheduler-ical.ts +181 -181
- package/src/scheduler-model.test.ts +562 -562
- package/src/scheduler-model.ts +873 -873
- package/src/selection.test.ts +885 -885
- package/src/server-data-source.test.ts +383 -383
- package/src/server-data-source.ts +469 -469
- package/src/sparkline.test.ts +68 -68
- package/src/sparkline.ts +169 -169
- package/src/spreadsheet.test.ts +488 -488
- package/src/spreadsheet.ts +312 -312
- package/src/static-functions.ts +11 -11
- package/src/subscribe.ts +38 -38
- package/src/summaries.ts +113 -113
- package/src/svgrid-wrapper.types.ts +563 -563
- package/src/svgrid.async-editor-options.test.ts +273 -273
- package/src/svgrid.auto-row-height.test.ts +204 -204
- package/src/svgrid.behavior.test.ts +910 -910
- package/src/svgrid.charting.test.ts +534 -534
- package/src/svgrid.comments-autocomplete.test.ts +127 -127
- package/src/svgrid.context-menu.test.ts +147 -147
- package/src/svgrid.features.test.ts +157 -157
- package/src/svgrid.filter-depth.test.ts +163 -163
- package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -377
- package/src/svgrid.filter-menu-scroll.test.ts +112 -112
- package/src/svgrid.grand-total.test.ts +188 -188
- package/src/svgrid.group-display-mode.test.ts +171 -171
- package/src/svgrid.group-footers.test.ts +121 -121
- package/src/svgrid.group-pagination.test.ts +153 -153
- package/src/svgrid.new-features.wrapper.test.ts +251 -251
- package/src/svgrid.tree-data.test.ts +186 -186
- package/src/svgrid.wrapper.test.ts +63 -63
- package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
- package/src/test-setup.ts +62 -62
- package/src/themes/index.ts +288 -288
- package/src/toast-store.svelte.ts +250 -250
- package/src/toast-store.test.ts +147 -147
- package/src/tree-row-model.test.ts +168 -168
- package/src/ui-buttons.test.ts +144 -144
- package/src/ui-inputs.test.ts +118 -118
- package/src/ui-localization.test.ts +113 -113
- package/src/ui-range.test.ts +70 -70
- package/src/ui-selection.test.ts +155 -155
- package/src/ui-tier1.test.ts +142 -142
- package/src/virtual.test.ts +88 -88
- package/src/virtualization/column-virtualizer.test.ts +27 -27
- package/src/virtualization/column-virtualizer.ts +30 -30
- package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
- package/src/virtualization/types.ts +30 -30
- package/src/virtualization/virtualizer.test.ts +47 -47
- package/src/virtualization/virtualizer.ts +322 -322
package/src/row-resize.test.ts
CHANGED
|
@@ -1,524 +1,524 @@
|
|
|
1
|
-
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
2
|
-
import { rowResize } from './row-resize'
|
|
3
|
-
|
|
4
|
-
const STRIP_CLASS = 'sv-grid-row-resize-handle'
|
|
5
|
-
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Helpers
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
|
-
|
|
10
|
-
/** Build a host `<table>` with `rows` body rows. Each row carries the
|
|
11
|
-
* `tr.sv-grid-row` class + a `.sv-row-gutter` cell holding a
|
|
12
|
-
* `data-svgrid-row` marker, matching what SvGrid renders. Extra classes
|
|
13
|
-
* let individual tests opt rows out (header / spacer / no-gutter). */
|
|
14
|
-
function buildGrid(
|
|
15
|
-
specs: Array<{ rowClasses?: string[]; gutter?: boolean; rowIndex?: number }>,
|
|
16
|
-
): { host: HTMLElement; rows: HTMLTableRowElement[] } {
|
|
17
|
-
const host = document.createElement('div')
|
|
18
|
-
const table = document.createElement('table')
|
|
19
|
-
const tbody = document.createElement('tbody')
|
|
20
|
-
const rows: HTMLTableRowElement[] = []
|
|
21
|
-
specs.forEach((spec, i) => {
|
|
22
|
-
const tr = document.createElement('tr')
|
|
23
|
-
tr.className = ['sv-grid-row', ...(spec.rowClasses ?? [])].join(' ')
|
|
24
|
-
const cell = document.createElement('td')
|
|
25
|
-
cell.className = 'sv-grid-cell'
|
|
26
|
-
if (spec.gutter !== false) cell.classList.add('sv-row-gutter')
|
|
27
|
-
const marker = document.createElement('span')
|
|
28
|
-
marker.setAttribute('data-svgrid-row', String(spec.rowIndex ?? i))
|
|
29
|
-
cell.appendChild(marker)
|
|
30
|
-
tr.appendChild(cell)
|
|
31
|
-
tbody.appendChild(tr)
|
|
32
|
-
rows.push(tr)
|
|
33
|
-
})
|
|
34
|
-
table.appendChild(tbody)
|
|
35
|
-
host.appendChild(table)
|
|
36
|
-
document.body.appendChild(host)
|
|
37
|
-
return { host, rows }
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function gutterOf(tr: HTMLTableRowElement): HTMLTableCellElement {
|
|
41
|
-
return tr.querySelector<HTMLTableCellElement>('.sv-row-gutter')!
|
|
42
|
-
}
|
|
43
|
-
function stripOf(tr: HTMLTableRowElement): HTMLElement | null {
|
|
44
|
-
return tr.querySelector<HTMLElement>(`.${STRIP_CLASS}`)
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/** Mock getBoundingClientRect so a TR reports a real height in jsdom
|
|
48
|
-
* (which otherwise returns all-zero rects). */
|
|
49
|
-
function mockRowHeight(tr: HTMLTableRowElement, height: number): void {
|
|
50
|
-
tr.getBoundingClientRect = () =>
|
|
51
|
-
({ height, width: 100, top: 0, left: 0, right: 100, bottom: height, x: 0, y: 0, toJSON() {} }) as DOMRect
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function pointer(type: string, init: Partial<PointerEvent> = {}): PointerEvent {
|
|
55
|
-
return new PointerEvent(type, { bubbles: true, cancelable: true, pointerId: 1, ...init } as PointerEventInit)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const hosts: HTMLElement[] = []
|
|
59
|
-
function track(host: HTMLElement): HTMLElement {
|
|
60
|
-
hosts.push(host)
|
|
61
|
-
return host
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
beforeEach(() => {
|
|
65
|
-
// jsdom lacks pointer-capture methods on elements; stub them so the action's
|
|
66
|
-
// try/catch wrapped calls have something to invoke.
|
|
67
|
-
if (!HTMLElement.prototype.setPointerCapture) {
|
|
68
|
-
HTMLElement.prototype.setPointerCapture = function () {}
|
|
69
|
-
}
|
|
70
|
-
if (!HTMLElement.prototype.releasePointerCapture) {
|
|
71
|
-
HTMLElement.prototype.releasePointerCapture = function () {}
|
|
72
|
-
}
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
afterEach(() => {
|
|
76
|
-
while (hosts.length) hosts.pop()!.remove()
|
|
77
|
-
document.body.innerHTML = ''
|
|
78
|
-
document.body.style.cursor = ''
|
|
79
|
-
})
|
|
80
|
-
|
|
81
|
-
// ---------------------------------------------------------------------------
|
|
82
|
-
// decorate()
|
|
83
|
-
// ---------------------------------------------------------------------------
|
|
84
|
-
|
|
85
|
-
describe('rowResize - strip injection', () => {
|
|
86
|
-
it('injects a resize strip into every gutter cell', () => {
|
|
87
|
-
const { host, rows } = buildGrid([{}, {}, {}])
|
|
88
|
-
track(host)
|
|
89
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
90
|
-
for (const tr of rows) {
|
|
91
|
-
const strip = stripOf(tr)
|
|
92
|
-
expect(strip).not.toBeNull()
|
|
93
|
-
expect(strip!.getAttribute('role')).toBe('separator')
|
|
94
|
-
expect(strip!.getAttribute('aria-orientation')).toBe('horizontal')
|
|
95
|
-
expect(strip!.getAttribute('aria-label')).toBe('Resize row')
|
|
96
|
-
expect(strip!.style.cursor).toBe('row-resize')
|
|
97
|
-
}
|
|
98
|
-
// Gutter cells become a positioning context with visible overflow.
|
|
99
|
-
expect(gutterOf(rows[0]!).style.position).toBe('relative')
|
|
100
|
-
expect(gutterOf(rows[0]!).style.overflow).toBe('visible')
|
|
101
|
-
action.destroy()
|
|
102
|
-
})
|
|
103
|
-
|
|
104
|
-
it('does not double-inject a strip on re-decorate', async () => {
|
|
105
|
-
const { host, rows } = buildGrid([{}])
|
|
106
|
-
track(host)
|
|
107
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
108
|
-
expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
|
|
109
|
-
// Trigger the MutationObserver by appending an unrelated node.
|
|
110
|
-
gutterOf(rows[0]!).appendChild(document.createElement('span'))
|
|
111
|
-
await Promise.resolve()
|
|
112
|
-
await new Promise((r) => setTimeout(r, 0))
|
|
113
|
-
expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
|
|
114
|
-
action.destroy()
|
|
115
|
-
})
|
|
116
|
-
|
|
117
|
-
it('skips header rows, spacer rows, and rows without a gutter cell', () => {
|
|
118
|
-
const { host, rows } = buildGrid([
|
|
119
|
-
{ rowClasses: ['sv-grid-header-row'] },
|
|
120
|
-
{ rowClasses: ['sv-grid-row-spacer'] },
|
|
121
|
-
{ gutter: false },
|
|
122
|
-
{}, // normal row gets a strip
|
|
123
|
-
])
|
|
124
|
-
track(host)
|
|
125
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
126
|
-
expect(stripOf(rows[0]!)).toBeNull()
|
|
127
|
-
expect(stripOf(rows[1]!)).toBeNull()
|
|
128
|
-
expect(stripOf(rows[2]!)).toBeNull()
|
|
129
|
-
expect(stripOf(rows[3]!)).not.toBeNull()
|
|
130
|
-
action.destroy()
|
|
131
|
-
})
|
|
132
|
-
|
|
133
|
-
it("anchor 'row' falls back to the first body cell when there is no gutter", () => {
|
|
134
|
-
// What `<SvGrid rowResize>` relies on: most grids have no row-number
|
|
135
|
-
// column, and without the fallback the prop would be inert on them.
|
|
136
|
-
const { host, rows } = buildGrid([{ gutter: false }, { gutter: false }])
|
|
137
|
-
track(host)
|
|
138
|
-
const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
|
|
139
|
-
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
140
|
-
expect(stripOf(rows[1]!)).not.toBeNull()
|
|
141
|
-
// The strip hangs off the row's first cell, since that is all there is.
|
|
142
|
-
expect(stripOf(rows[0]!)!.parentElement).toBe(rows[0]!.querySelector('.sv-grid-cell'))
|
|
143
|
-
action.destroy()
|
|
144
|
-
})
|
|
145
|
-
|
|
146
|
-
it("anchor 'row' still prefers a real gutter when the row has one", () => {
|
|
147
|
-
const { host, rows } = buildGrid([{ gutter: true }])
|
|
148
|
-
track(host)
|
|
149
|
-
const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
|
|
150
|
-
expect(stripOf(rows[0]!)!.parentElement).toBe(gutterOf(rows[0]!))
|
|
151
|
-
action.destroy()
|
|
152
|
-
})
|
|
153
|
-
|
|
154
|
-
it("defaults to anchor 'gutter', leaving gutterless rows alone", () => {
|
|
155
|
-
// The exported action's existing contract. Adding the fallback must not
|
|
156
|
-
// start decorating rows for consumers who never asked for it.
|
|
157
|
-
const { host, rows } = buildGrid([{ gutter: false }])
|
|
158
|
-
track(host)
|
|
159
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
160
|
-
expect(stripOf(rows[0]!)).toBeNull()
|
|
161
|
-
action.destroy()
|
|
162
|
-
})
|
|
163
|
-
|
|
164
|
-
it('also injects a strip into the built-in row-number gutter (showRowNumbers)', () => {
|
|
165
|
-
// The native gutter cell is `.sv-grid-cell.sv-grid-row-number-cell`, NOT
|
|
166
|
-
// `.sv-row-gutter`; the action must recognise it so `showRowNumbers` grids
|
|
167
|
-
// are row-resizable without a custom gutter column.
|
|
168
|
-
const host = document.createElement('div')
|
|
169
|
-
const table = document.createElement('table')
|
|
170
|
-
const tbody = document.createElement('tbody')
|
|
171
|
-
const tr = document.createElement('tr')
|
|
172
|
-
tr.className = 'sv-grid-row'
|
|
173
|
-
const gutter = document.createElement('td')
|
|
174
|
-
gutter.className = 'sv-grid-cell sv-grid-row-number-cell'
|
|
175
|
-
const marker = document.createElement('span')
|
|
176
|
-
marker.setAttribute('data-svgrid-row', '0')
|
|
177
|
-
gutter.appendChild(marker)
|
|
178
|
-
tr.appendChild(gutter)
|
|
179
|
-
tbody.appendChild(tr)
|
|
180
|
-
table.appendChild(tbody)
|
|
181
|
-
host.appendChild(table)
|
|
182
|
-
document.body.appendChild(host)
|
|
183
|
-
track(host)
|
|
184
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
185
|
-
expect(tr.querySelector(`.${STRIP_CLASS}`)).not.toBeNull()
|
|
186
|
-
action.destroy()
|
|
187
|
-
})
|
|
188
|
-
|
|
189
|
-
it('does not override an already-positioned gutter cell', () => {
|
|
190
|
-
const { host, rows } = buildGrid([{}])
|
|
191
|
-
track(host)
|
|
192
|
-
gutterOf(rows[0]!).style.position = 'sticky'
|
|
193
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
194
|
-
expect(gutterOf(rows[0]!).style.position).toBe('sticky')
|
|
195
|
-
action.destroy()
|
|
196
|
-
})
|
|
197
|
-
|
|
198
|
-
it('injects no strips when created disabled', () => {
|
|
199
|
-
const { host, rows } = buildGrid([{}, {}])
|
|
200
|
-
track(host)
|
|
201
|
-
const action = rowResize(host, { onResize: vi.fn(), disabled: true })
|
|
202
|
-
expect(stripOf(rows[0]!)).toBeNull()
|
|
203
|
-
expect(stripOf(rows[1]!)).toBeNull()
|
|
204
|
-
action.destroy()
|
|
205
|
-
})
|
|
206
|
-
})
|
|
207
|
-
|
|
208
|
-
// ---------------------------------------------------------------------------
|
|
209
|
-
// Drag lifecycle
|
|
210
|
-
// ---------------------------------------------------------------------------
|
|
211
|
-
|
|
212
|
-
describe('rowResize - drag', () => {
|
|
213
|
-
it('reports the new height on pointerup and fires move callbacks', () => {
|
|
214
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
215
|
-
track(host)
|
|
216
|
-
mockRowHeight(rows[0]!, 32)
|
|
217
|
-
const onResize = vi.fn()
|
|
218
|
-
const onResizeMove = vi.fn()
|
|
219
|
-
const action = rowResize(host, { onResize, onResizeMove })
|
|
220
|
-
const strip = stripOf(rows[0]!)!
|
|
221
|
-
|
|
222
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
|
|
223
|
-
expect(strip.classList.contains('is-resizing')).toBe(true)
|
|
224
|
-
expect(document.body.style.cursor).toBe('row-resize')
|
|
225
|
-
|
|
226
|
-
// Drag down 20px -> 52.
|
|
227
|
-
window.dispatchEvent(pointer('pointermove', { clientY: 120 }))
|
|
228
|
-
expect(onResizeMove).toHaveBeenLastCalledWith(0, 52)
|
|
229
|
-
expect(rows[0]!.style.height).toBe('52px')
|
|
230
|
-
|
|
231
|
-
window.dispatchEvent(pointer('pointerup', { clientY: 120 }))
|
|
232
|
-
expect(onResize).toHaveBeenCalledWith(0, 52)
|
|
233
|
-
expect(strip.classList.contains('is-resizing')).toBe(false)
|
|
234
|
-
expect(document.body.style.cursor).toBe('')
|
|
235
|
-
action.destroy()
|
|
236
|
-
})
|
|
237
|
-
|
|
238
|
-
it('clamps the height to the min bound', () => {
|
|
239
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
240
|
-
track(host)
|
|
241
|
-
mockRowHeight(rows[0]!, 32)
|
|
242
|
-
const onResize = vi.fn()
|
|
243
|
-
const action = rowResize(host, { onResize, min: 24 })
|
|
244
|
-
const strip = stripOf(rows[0]!)!
|
|
245
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
|
|
246
|
-
// Drag far up -> would be negative, clamps to 24.
|
|
247
|
-
window.dispatchEvent(pointer('pointerup', { clientY: 0 }))
|
|
248
|
-
expect(onResize).toHaveBeenCalledWith(0, 24)
|
|
249
|
-
action.destroy()
|
|
250
|
-
})
|
|
251
|
-
|
|
252
|
-
it('clamps the height to the max bound', () => {
|
|
253
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
254
|
-
track(host)
|
|
255
|
-
mockRowHeight(rows[0]!, 32)
|
|
256
|
-
const onResize = vi.fn()
|
|
257
|
-
const action = rowResize(host, { onResize, max: 50 })
|
|
258
|
-
const strip = stripOf(rows[0]!)!
|
|
259
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
|
|
260
|
-
window.dispatchEvent(pointer('pointerup', { clientY: 1000 }))
|
|
261
|
-
expect(onResize).toHaveBeenCalledWith(0, 50)
|
|
262
|
-
action.destroy()
|
|
263
|
-
})
|
|
264
|
-
|
|
265
|
-
it('works without an onResizeMove callback (optional)', () => {
|
|
266
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
267
|
-
track(host)
|
|
268
|
-
mockRowHeight(rows[0]!, 30)
|
|
269
|
-
const onResize = vi.fn()
|
|
270
|
-
const action = rowResize(host, { onResize })
|
|
271
|
-
const strip = stripOf(rows[0]!)!
|
|
272
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 50 }))
|
|
273
|
-
expect(() => window.dispatchEvent(pointer('pointermove', { clientY: 60 }))).not.toThrow()
|
|
274
|
-
window.dispatchEvent(pointer('pointerup', { clientY: 60 }))
|
|
275
|
-
expect(onResize).toHaveBeenCalledWith(0, 40)
|
|
276
|
-
action.destroy()
|
|
277
|
-
})
|
|
278
|
-
|
|
279
|
-
it('ignores pointermove / pointerup when no drag is active', () => {
|
|
280
|
-
const { host } = buildGrid([{ rowIndex: 0 }])
|
|
281
|
-
track(host)
|
|
282
|
-
const onResize = vi.fn()
|
|
283
|
-
const onResizeMove = vi.fn()
|
|
284
|
-
const action = rowResize(host, { onResize, onResizeMove })
|
|
285
|
-
// No pointerdown first - listeners were only attached on down, so these
|
|
286
|
-
// shouldn't do anything even if dispatched.
|
|
287
|
-
window.dispatchEvent(pointer('pointermove', { clientY: 10 }))
|
|
288
|
-
window.dispatchEvent(pointer('pointerup', { clientY: 10 }))
|
|
289
|
-
expect(onResize).not.toHaveBeenCalled()
|
|
290
|
-
expect(onResizeMove).not.toHaveBeenCalled()
|
|
291
|
-
action.destroy()
|
|
292
|
-
})
|
|
293
|
-
})
|
|
294
|
-
|
|
295
|
-
// ---------------------------------------------------------------------------
|
|
296
|
-
// pointerdown guards
|
|
297
|
-
// ---------------------------------------------------------------------------
|
|
298
|
-
|
|
299
|
-
describe('rowResize - pointerdown guards', () => {
|
|
300
|
-
it('ignores pointerdown when disabled', () => {
|
|
301
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
302
|
-
track(host)
|
|
303
|
-
mockRowHeight(rows[0]!, 32)
|
|
304
|
-
const onResize = vi.fn()
|
|
305
|
-
// Start enabled so a strip exists, then disable via update.
|
|
306
|
-
const action = rowResize(host, { onResize })
|
|
307
|
-
const strip = stripOf(rows[0]!)!
|
|
308
|
-
action.update({ onResize, disabled: true })
|
|
309
|
-
// update removes strips, but dispatch on the (now-detached) strip anyway:
|
|
310
|
-
// even if it were still in the DOM, current.disabled short-circuits.
|
|
311
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
312
|
-
window.dispatchEvent(pointer('pointerup', { clientY: 50 }))
|
|
313
|
-
expect(onResize).not.toHaveBeenCalled()
|
|
314
|
-
action.destroy()
|
|
315
|
-
})
|
|
316
|
-
|
|
317
|
-
it('ignores pointerdown on a non-strip target', () => {
|
|
318
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
319
|
-
track(host)
|
|
320
|
-
const onResize = vi.fn()
|
|
321
|
-
const action = rowResize(host, { onResize })
|
|
322
|
-
gutterOf(rows[0]!).dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
323
|
-
expect(document.body.style.cursor).toBe('')
|
|
324
|
-
action.destroy()
|
|
325
|
-
})
|
|
326
|
-
|
|
327
|
-
it('ignores a strip whose row has a non-finite row index', () => {
|
|
328
|
-
const { host, rows } = buildGrid([{}])
|
|
329
|
-
track(host)
|
|
330
|
-
// Remove the data-svgrid-row marker so rowIndexOf returns NaN.
|
|
331
|
-
rows[0]!.querySelector('[data-svgrid-row]')!.removeAttribute('data-svgrid-row')
|
|
332
|
-
const onResize = vi.fn()
|
|
333
|
-
const action = rowResize(host, { onResize })
|
|
334
|
-
const strip = stripOf(rows[0]!)!
|
|
335
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
336
|
-
expect(document.body.style.cursor).toBe('')
|
|
337
|
-
expect(strip.classList.contains('is-resizing')).toBe(false)
|
|
338
|
-
action.destroy()
|
|
339
|
-
})
|
|
340
|
-
|
|
341
|
-
it('ignores a strip not inside a tr.sv-grid-row', () => {
|
|
342
|
-
const host = track(document.createElement('div'))
|
|
343
|
-
document.body.appendChild(host)
|
|
344
|
-
// A loose strip with no matching ancestor row.
|
|
345
|
-
const strip = document.createElement('div')
|
|
346
|
-
strip.className = STRIP_CLASS
|
|
347
|
-
host.appendChild(strip)
|
|
348
|
-
const onResize = vi.fn()
|
|
349
|
-
const action = rowResize(host, { onResize })
|
|
350
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
351
|
-
expect(document.body.style.cursor).toBe('')
|
|
352
|
-
action.destroy()
|
|
353
|
-
})
|
|
354
|
-
})
|
|
355
|
-
|
|
356
|
-
// ---------------------------------------------------------------------------
|
|
357
|
-
// update() + destroy()
|
|
358
|
-
// ---------------------------------------------------------------------------
|
|
359
|
-
|
|
360
|
-
describe('rowResize - update + destroy', () => {
|
|
361
|
-
it('removes strips when toggled to disabled and restores when re-enabled', () => {
|
|
362
|
-
const { host, rows } = buildGrid([{}, {}])
|
|
363
|
-
track(host)
|
|
364
|
-
const onResize = vi.fn()
|
|
365
|
-
const action = rowResize(host, { onResize, disabled: false })
|
|
366
|
-
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
367
|
-
|
|
368
|
-
action.update({ onResize, disabled: true })
|
|
369
|
-
expect(stripOf(rows[0]!)).toBeNull()
|
|
370
|
-
expect(stripOf(rows[1]!)).toBeNull()
|
|
371
|
-
|
|
372
|
-
action.update({ onResize, disabled: false })
|
|
373
|
-
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
374
|
-
action.destroy()
|
|
375
|
-
})
|
|
376
|
-
|
|
377
|
-
it('does not repaint when disabled flag is unchanged on update', () => {
|
|
378
|
-
const { host, rows } = buildGrid([{}])
|
|
379
|
-
track(host)
|
|
380
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
381
|
-
const firstStrip = stripOf(rows[0]!)
|
|
382
|
-
// Same disabled value -> decorate is NOT called, strip stays the same node.
|
|
383
|
-
action.update({ onResize: vi.fn() })
|
|
384
|
-
expect(stripOf(rows[0]!)).toBe(firstStrip)
|
|
385
|
-
action.destroy()
|
|
386
|
-
})
|
|
387
|
-
|
|
388
|
-
it('destroy removes all strips and detaches listeners', () => {
|
|
389
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
390
|
-
track(host)
|
|
391
|
-
mockRowHeight(rows[0]!, 32)
|
|
392
|
-
const onResize = vi.fn()
|
|
393
|
-
const action = rowResize(host, { onResize })
|
|
394
|
-
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
395
|
-
|
|
396
|
-
action.destroy()
|
|
397
|
-
expect(stripOf(rows[0]!)).toBeNull()
|
|
398
|
-
|
|
399
|
-
// After destroy the pointerdown listener is gone; re-create a strip
|
|
400
|
-
// manually and confirm no drag starts.
|
|
401
|
-
const strip = document.createElement('div')
|
|
402
|
-
strip.className = STRIP_CLASS
|
|
403
|
-
gutterOf(rows[0]!).appendChild(strip)
|
|
404
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
405
|
-
expect(document.body.style.cursor).toBe('')
|
|
406
|
-
})
|
|
407
|
-
|
|
408
|
-
it('uses default min=20 / max=320 when bounds are omitted', () => {
|
|
409
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
410
|
-
track(host)
|
|
411
|
-
mockRowHeight(rows[0]!, 100)
|
|
412
|
-
const onResize = vi.fn()
|
|
413
|
-
const action = rowResize(host, { onResize })
|
|
414
|
-
const strip = stripOf(rows[0]!)!
|
|
415
|
-
strip.dispatchEvent(pointer('pointerdown', { clientY: 0 }))
|
|
416
|
-
// Drag way past max -> clamps to 320.
|
|
417
|
-
window.dispatchEvent(pointer('pointermove', { clientY: 10000 }))
|
|
418
|
-
expect(rows[0]!.style.height).toBe('320px')
|
|
419
|
-
// Drag way below min -> clamps to 20.
|
|
420
|
-
window.dispatchEvent(pointer('pointerup', { clientY: -10000 }))
|
|
421
|
-
expect(onResize).toHaveBeenCalledWith(0, 20)
|
|
422
|
-
action.destroy()
|
|
423
|
-
})
|
|
424
|
-
})
|
|
425
|
-
|
|
426
|
-
// ---------------------------------------------------------------------------
|
|
427
|
-
// Keyboard resize (#79)
|
|
428
|
-
// ---------------------------------------------------------------------------
|
|
429
|
-
|
|
430
|
-
describe('rowResize - keyboard', () => {
|
|
431
|
-
function key(k: string, init: Partial<KeyboardEvent> = {}): KeyboardEvent {
|
|
432
|
-
return new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true, ...init })
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
it('makes the strip focusable', () => {
|
|
436
|
-
const { host, rows } = buildGrid([{}])
|
|
437
|
-
track(host)
|
|
438
|
-
const action = rowResize(host, { onResize: vi.fn() })
|
|
439
|
-
expect(stripOf(rows[0]!)!.tabIndex).toBe(0)
|
|
440
|
-
action.destroy()
|
|
441
|
-
})
|
|
442
|
-
|
|
443
|
-
it('ArrowDown grows the row by 10px and reports the new height', () => {
|
|
444
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
445
|
-
track(host)
|
|
446
|
-
mockRowHeight(rows[0]!, 32)
|
|
447
|
-
const onResize = vi.fn()
|
|
448
|
-
const action = rowResize(host, { onResize })
|
|
449
|
-
stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
|
|
450
|
-
expect(rows[0]!.style.height).toBe('42px')
|
|
451
|
-
expect(onResize).toHaveBeenCalledWith(0, 42)
|
|
452
|
-
action.destroy()
|
|
453
|
-
})
|
|
454
|
-
|
|
455
|
-
it('ArrowUp shrinks the row and Shift gives a 1px step', () => {
|
|
456
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
457
|
-
track(host)
|
|
458
|
-
mockRowHeight(rows[0]!, 60)
|
|
459
|
-
const onResize = vi.fn()
|
|
460
|
-
const action = rowResize(host, { onResize })
|
|
461
|
-
const strip = stripOf(rows[0]!)!
|
|
462
|
-
strip.dispatchEvent(key('ArrowUp'))
|
|
463
|
-
expect(onResize).toHaveBeenLastCalledWith(0, 50)
|
|
464
|
-
strip.dispatchEvent(key('ArrowUp', { shiftKey: true }))
|
|
465
|
-
expect(onResize).toHaveBeenLastCalledWith(0, 59)
|
|
466
|
-
action.destroy()
|
|
467
|
-
})
|
|
468
|
-
|
|
469
|
-
it('clamps to the configured min and max', () => {
|
|
470
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
471
|
-
track(host)
|
|
472
|
-
mockRowHeight(rows[0]!, 42)
|
|
473
|
-
const onResize = vi.fn()
|
|
474
|
-
const action = rowResize(host, { onResize, min: 40, max: 44 })
|
|
475
|
-
const strip = stripOf(rows[0]!)!
|
|
476
|
-
strip.dispatchEvent(key('ArrowUp'))
|
|
477
|
-
expect(onResize).toHaveBeenLastCalledWith(0, 40)
|
|
478
|
-
strip.dispatchEvent(key('ArrowDown'))
|
|
479
|
-
expect(onResize).toHaveBeenLastCalledWith(0, 44)
|
|
480
|
-
action.destroy()
|
|
481
|
-
})
|
|
482
|
-
|
|
483
|
-
it('ignores keys other than the arrows and consumes the ones it handles', () => {
|
|
484
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
485
|
-
track(host)
|
|
486
|
-
mockRowHeight(rows[0]!, 32)
|
|
487
|
-
const onResize = vi.fn()
|
|
488
|
-
const action = rowResize(host, { onResize })
|
|
489
|
-
const strip = stripOf(rows[0]!)!
|
|
490
|
-
const other = key('Enter')
|
|
491
|
-
strip.dispatchEvent(other)
|
|
492
|
-
expect(onResize).not.toHaveBeenCalled()
|
|
493
|
-
expect(other.defaultPrevented).toBe(false)
|
|
494
|
-
const handled = key('ArrowDown')
|
|
495
|
-
strip.dispatchEvent(handled)
|
|
496
|
-
expect(handled.defaultPrevented).toBe(true)
|
|
497
|
-
action.destroy()
|
|
498
|
-
})
|
|
499
|
-
|
|
500
|
-
it('does nothing while disabled, and stops after destroy', () => {
|
|
501
|
-
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
502
|
-
track(host)
|
|
503
|
-
mockRowHeight(rows[0]!, 32)
|
|
504
|
-
const onResize = vi.fn()
|
|
505
|
-
const action = rowResize(host, { onResize, disabled: true })
|
|
506
|
-
// Disabled removes the strips entirely, so drive a hand-made one.
|
|
507
|
-
const strip = document.createElement('div')
|
|
508
|
-
strip.className = STRIP_CLASS
|
|
509
|
-
gutterOf(rows[0]!).appendChild(strip)
|
|
510
|
-
strip.dispatchEvent(key('ArrowDown'))
|
|
511
|
-
expect(onResize).not.toHaveBeenCalled()
|
|
512
|
-
|
|
513
|
-
action.update({ onResize })
|
|
514
|
-
stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
|
|
515
|
-
expect(onResize).toHaveBeenCalledTimes(1)
|
|
516
|
-
|
|
517
|
-
action.destroy()
|
|
518
|
-
const orphan = document.createElement('div')
|
|
519
|
-
orphan.className = STRIP_CLASS
|
|
520
|
-
gutterOf(rows[0]!).appendChild(orphan)
|
|
521
|
-
orphan.dispatchEvent(key('ArrowDown'))
|
|
522
|
-
expect(onResize).toHaveBeenCalledTimes(1)
|
|
523
|
-
})
|
|
524
|
-
})
|
|
1
|
+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
2
|
+
import { rowResize } from './row-resize'
|
|
3
|
+
|
|
4
|
+
const STRIP_CLASS = 'sv-grid-row-resize-handle'
|
|
5
|
+
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
// Helpers
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
|
|
10
|
+
/** Build a host `<table>` with `rows` body rows. Each row carries the
|
|
11
|
+
* `tr.sv-grid-row` class + a `.sv-row-gutter` cell holding a
|
|
12
|
+
* `data-svgrid-row` marker, matching what SvGrid renders. Extra classes
|
|
13
|
+
* let individual tests opt rows out (header / spacer / no-gutter). */
|
|
14
|
+
function buildGrid(
|
|
15
|
+
specs: Array<{ rowClasses?: string[]; gutter?: boolean; rowIndex?: number }>,
|
|
16
|
+
): { host: HTMLElement; rows: HTMLTableRowElement[] } {
|
|
17
|
+
const host = document.createElement('div')
|
|
18
|
+
const table = document.createElement('table')
|
|
19
|
+
const tbody = document.createElement('tbody')
|
|
20
|
+
const rows: HTMLTableRowElement[] = []
|
|
21
|
+
specs.forEach((spec, i) => {
|
|
22
|
+
const tr = document.createElement('tr')
|
|
23
|
+
tr.className = ['sv-grid-row', ...(spec.rowClasses ?? [])].join(' ')
|
|
24
|
+
const cell = document.createElement('td')
|
|
25
|
+
cell.className = 'sv-grid-cell'
|
|
26
|
+
if (spec.gutter !== false) cell.classList.add('sv-row-gutter')
|
|
27
|
+
const marker = document.createElement('span')
|
|
28
|
+
marker.setAttribute('data-svgrid-row', String(spec.rowIndex ?? i))
|
|
29
|
+
cell.appendChild(marker)
|
|
30
|
+
tr.appendChild(cell)
|
|
31
|
+
tbody.appendChild(tr)
|
|
32
|
+
rows.push(tr)
|
|
33
|
+
})
|
|
34
|
+
table.appendChild(tbody)
|
|
35
|
+
host.appendChild(table)
|
|
36
|
+
document.body.appendChild(host)
|
|
37
|
+
return { host, rows }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function gutterOf(tr: HTMLTableRowElement): HTMLTableCellElement {
|
|
41
|
+
return tr.querySelector<HTMLTableCellElement>('.sv-row-gutter')!
|
|
42
|
+
}
|
|
43
|
+
function stripOf(tr: HTMLTableRowElement): HTMLElement | null {
|
|
44
|
+
return tr.querySelector<HTMLElement>(`.${STRIP_CLASS}`)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/** Mock getBoundingClientRect so a TR reports a real height in jsdom
|
|
48
|
+
* (which otherwise returns all-zero rects). */
|
|
49
|
+
function mockRowHeight(tr: HTMLTableRowElement, height: number): void {
|
|
50
|
+
tr.getBoundingClientRect = () =>
|
|
51
|
+
({ height, width: 100, top: 0, left: 0, right: 100, bottom: height, x: 0, y: 0, toJSON() {} }) as DOMRect
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function pointer(type: string, init: Partial<PointerEvent> = {}): PointerEvent {
|
|
55
|
+
return new PointerEvent(type, { bubbles: true, cancelable: true, pointerId: 1, ...init } as PointerEventInit)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const hosts: HTMLElement[] = []
|
|
59
|
+
function track(host: HTMLElement): HTMLElement {
|
|
60
|
+
hosts.push(host)
|
|
61
|
+
return host
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
beforeEach(() => {
|
|
65
|
+
// jsdom lacks pointer-capture methods on elements; stub them so the action's
|
|
66
|
+
// try/catch wrapped calls have something to invoke.
|
|
67
|
+
if (!HTMLElement.prototype.setPointerCapture) {
|
|
68
|
+
HTMLElement.prototype.setPointerCapture = function () {}
|
|
69
|
+
}
|
|
70
|
+
if (!HTMLElement.prototype.releasePointerCapture) {
|
|
71
|
+
HTMLElement.prototype.releasePointerCapture = function () {}
|
|
72
|
+
}
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
afterEach(() => {
|
|
76
|
+
while (hosts.length) hosts.pop()!.remove()
|
|
77
|
+
document.body.innerHTML = ''
|
|
78
|
+
document.body.style.cursor = ''
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
// ---------------------------------------------------------------------------
|
|
82
|
+
// decorate()
|
|
83
|
+
// ---------------------------------------------------------------------------
|
|
84
|
+
|
|
85
|
+
describe('rowResize - strip injection', () => {
|
|
86
|
+
it('injects a resize strip into every gutter cell', () => {
|
|
87
|
+
const { host, rows } = buildGrid([{}, {}, {}])
|
|
88
|
+
track(host)
|
|
89
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
90
|
+
for (const tr of rows) {
|
|
91
|
+
const strip = stripOf(tr)
|
|
92
|
+
expect(strip).not.toBeNull()
|
|
93
|
+
expect(strip!.getAttribute('role')).toBe('separator')
|
|
94
|
+
expect(strip!.getAttribute('aria-orientation')).toBe('horizontal')
|
|
95
|
+
expect(strip!.getAttribute('aria-label')).toBe('Resize row')
|
|
96
|
+
expect(strip!.style.cursor).toBe('row-resize')
|
|
97
|
+
}
|
|
98
|
+
// Gutter cells become a positioning context with visible overflow.
|
|
99
|
+
expect(gutterOf(rows[0]!).style.position).toBe('relative')
|
|
100
|
+
expect(gutterOf(rows[0]!).style.overflow).toBe('visible')
|
|
101
|
+
action.destroy()
|
|
102
|
+
})
|
|
103
|
+
|
|
104
|
+
it('does not double-inject a strip on re-decorate', async () => {
|
|
105
|
+
const { host, rows } = buildGrid([{}])
|
|
106
|
+
track(host)
|
|
107
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
108
|
+
expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
|
|
109
|
+
// Trigger the MutationObserver by appending an unrelated node.
|
|
110
|
+
gutterOf(rows[0]!).appendChild(document.createElement('span'))
|
|
111
|
+
await Promise.resolve()
|
|
112
|
+
await new Promise((r) => setTimeout(r, 0))
|
|
113
|
+
expect(rows[0]!.querySelectorAll(`.${STRIP_CLASS}`).length).toBe(1)
|
|
114
|
+
action.destroy()
|
|
115
|
+
})
|
|
116
|
+
|
|
117
|
+
it('skips header rows, spacer rows, and rows without a gutter cell', () => {
|
|
118
|
+
const { host, rows } = buildGrid([
|
|
119
|
+
{ rowClasses: ['sv-grid-header-row'] },
|
|
120
|
+
{ rowClasses: ['sv-grid-row-spacer'] },
|
|
121
|
+
{ gutter: false },
|
|
122
|
+
{}, // normal row gets a strip
|
|
123
|
+
])
|
|
124
|
+
track(host)
|
|
125
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
126
|
+
expect(stripOf(rows[0]!)).toBeNull()
|
|
127
|
+
expect(stripOf(rows[1]!)).toBeNull()
|
|
128
|
+
expect(stripOf(rows[2]!)).toBeNull()
|
|
129
|
+
expect(stripOf(rows[3]!)).not.toBeNull()
|
|
130
|
+
action.destroy()
|
|
131
|
+
})
|
|
132
|
+
|
|
133
|
+
it("anchor 'row' falls back to the first body cell when there is no gutter", () => {
|
|
134
|
+
// What `<SvGrid rowResize>` relies on: most grids have no row-number
|
|
135
|
+
// column, and without the fallback the prop would be inert on them.
|
|
136
|
+
const { host, rows } = buildGrid([{ gutter: false }, { gutter: false }])
|
|
137
|
+
track(host)
|
|
138
|
+
const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
|
|
139
|
+
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
140
|
+
expect(stripOf(rows[1]!)).not.toBeNull()
|
|
141
|
+
// The strip hangs off the row's first cell, since that is all there is.
|
|
142
|
+
expect(stripOf(rows[0]!)!.parentElement).toBe(rows[0]!.querySelector('.sv-grid-cell'))
|
|
143
|
+
action.destroy()
|
|
144
|
+
})
|
|
145
|
+
|
|
146
|
+
it("anchor 'row' still prefers a real gutter when the row has one", () => {
|
|
147
|
+
const { host, rows } = buildGrid([{ gutter: true }])
|
|
148
|
+
track(host)
|
|
149
|
+
const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
|
|
150
|
+
expect(stripOf(rows[0]!)!.parentElement).toBe(gutterOf(rows[0]!))
|
|
151
|
+
action.destroy()
|
|
152
|
+
})
|
|
153
|
+
|
|
154
|
+
it("defaults to anchor 'gutter', leaving gutterless rows alone", () => {
|
|
155
|
+
// The exported action's existing contract. Adding the fallback must not
|
|
156
|
+
// start decorating rows for consumers who never asked for it.
|
|
157
|
+
const { host, rows } = buildGrid([{ gutter: false }])
|
|
158
|
+
track(host)
|
|
159
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
160
|
+
expect(stripOf(rows[0]!)).toBeNull()
|
|
161
|
+
action.destroy()
|
|
162
|
+
})
|
|
163
|
+
|
|
164
|
+
it('also injects a strip into the built-in row-number gutter (showRowNumbers)', () => {
|
|
165
|
+
// The native gutter cell is `.sv-grid-cell.sv-grid-row-number-cell`, NOT
|
|
166
|
+
// `.sv-row-gutter`; the action must recognise it so `showRowNumbers` grids
|
|
167
|
+
// are row-resizable without a custom gutter column.
|
|
168
|
+
const host = document.createElement('div')
|
|
169
|
+
const table = document.createElement('table')
|
|
170
|
+
const tbody = document.createElement('tbody')
|
|
171
|
+
const tr = document.createElement('tr')
|
|
172
|
+
tr.className = 'sv-grid-row'
|
|
173
|
+
const gutter = document.createElement('td')
|
|
174
|
+
gutter.className = 'sv-grid-cell sv-grid-row-number-cell'
|
|
175
|
+
const marker = document.createElement('span')
|
|
176
|
+
marker.setAttribute('data-svgrid-row', '0')
|
|
177
|
+
gutter.appendChild(marker)
|
|
178
|
+
tr.appendChild(gutter)
|
|
179
|
+
tbody.appendChild(tr)
|
|
180
|
+
table.appendChild(tbody)
|
|
181
|
+
host.appendChild(table)
|
|
182
|
+
document.body.appendChild(host)
|
|
183
|
+
track(host)
|
|
184
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
185
|
+
expect(tr.querySelector(`.${STRIP_CLASS}`)).not.toBeNull()
|
|
186
|
+
action.destroy()
|
|
187
|
+
})
|
|
188
|
+
|
|
189
|
+
it('does not override an already-positioned gutter cell', () => {
|
|
190
|
+
const { host, rows } = buildGrid([{}])
|
|
191
|
+
track(host)
|
|
192
|
+
gutterOf(rows[0]!).style.position = 'sticky'
|
|
193
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
194
|
+
expect(gutterOf(rows[0]!).style.position).toBe('sticky')
|
|
195
|
+
action.destroy()
|
|
196
|
+
})
|
|
197
|
+
|
|
198
|
+
it('injects no strips when created disabled', () => {
|
|
199
|
+
const { host, rows } = buildGrid([{}, {}])
|
|
200
|
+
track(host)
|
|
201
|
+
const action = rowResize(host, { onResize: vi.fn(), disabled: true })
|
|
202
|
+
expect(stripOf(rows[0]!)).toBeNull()
|
|
203
|
+
expect(stripOf(rows[1]!)).toBeNull()
|
|
204
|
+
action.destroy()
|
|
205
|
+
})
|
|
206
|
+
})
|
|
207
|
+
|
|
208
|
+
// ---------------------------------------------------------------------------
|
|
209
|
+
// Drag lifecycle
|
|
210
|
+
// ---------------------------------------------------------------------------
|
|
211
|
+
|
|
212
|
+
describe('rowResize - drag', () => {
|
|
213
|
+
it('reports the new height on pointerup and fires move callbacks', () => {
|
|
214
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
215
|
+
track(host)
|
|
216
|
+
mockRowHeight(rows[0]!, 32)
|
|
217
|
+
const onResize = vi.fn()
|
|
218
|
+
const onResizeMove = vi.fn()
|
|
219
|
+
const action = rowResize(host, { onResize, onResizeMove })
|
|
220
|
+
const strip = stripOf(rows[0]!)!
|
|
221
|
+
|
|
222
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
|
|
223
|
+
expect(strip.classList.contains('is-resizing')).toBe(true)
|
|
224
|
+
expect(document.body.style.cursor).toBe('row-resize')
|
|
225
|
+
|
|
226
|
+
// Drag down 20px -> 52.
|
|
227
|
+
window.dispatchEvent(pointer('pointermove', { clientY: 120 }))
|
|
228
|
+
expect(onResizeMove).toHaveBeenLastCalledWith(0, 52)
|
|
229
|
+
expect(rows[0]!.style.height).toBe('52px')
|
|
230
|
+
|
|
231
|
+
window.dispatchEvent(pointer('pointerup', { clientY: 120 }))
|
|
232
|
+
expect(onResize).toHaveBeenCalledWith(0, 52)
|
|
233
|
+
expect(strip.classList.contains('is-resizing')).toBe(false)
|
|
234
|
+
expect(document.body.style.cursor).toBe('')
|
|
235
|
+
action.destroy()
|
|
236
|
+
})
|
|
237
|
+
|
|
238
|
+
it('clamps the height to the min bound', () => {
|
|
239
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
240
|
+
track(host)
|
|
241
|
+
mockRowHeight(rows[0]!, 32)
|
|
242
|
+
const onResize = vi.fn()
|
|
243
|
+
const action = rowResize(host, { onResize, min: 24 })
|
|
244
|
+
const strip = stripOf(rows[0]!)!
|
|
245
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
|
|
246
|
+
// Drag far up -> would be negative, clamps to 24.
|
|
247
|
+
window.dispatchEvent(pointer('pointerup', { clientY: 0 }))
|
|
248
|
+
expect(onResize).toHaveBeenCalledWith(0, 24)
|
|
249
|
+
action.destroy()
|
|
250
|
+
})
|
|
251
|
+
|
|
252
|
+
it('clamps the height to the max bound', () => {
|
|
253
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
254
|
+
track(host)
|
|
255
|
+
mockRowHeight(rows[0]!, 32)
|
|
256
|
+
const onResize = vi.fn()
|
|
257
|
+
const action = rowResize(host, { onResize, max: 50 })
|
|
258
|
+
const strip = stripOf(rows[0]!)!
|
|
259
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 100 }))
|
|
260
|
+
window.dispatchEvent(pointer('pointerup', { clientY: 1000 }))
|
|
261
|
+
expect(onResize).toHaveBeenCalledWith(0, 50)
|
|
262
|
+
action.destroy()
|
|
263
|
+
})
|
|
264
|
+
|
|
265
|
+
it('works without an onResizeMove callback (optional)', () => {
|
|
266
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
267
|
+
track(host)
|
|
268
|
+
mockRowHeight(rows[0]!, 30)
|
|
269
|
+
const onResize = vi.fn()
|
|
270
|
+
const action = rowResize(host, { onResize })
|
|
271
|
+
const strip = stripOf(rows[0]!)!
|
|
272
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 50 }))
|
|
273
|
+
expect(() => window.dispatchEvent(pointer('pointermove', { clientY: 60 }))).not.toThrow()
|
|
274
|
+
window.dispatchEvent(pointer('pointerup', { clientY: 60 }))
|
|
275
|
+
expect(onResize).toHaveBeenCalledWith(0, 40)
|
|
276
|
+
action.destroy()
|
|
277
|
+
})
|
|
278
|
+
|
|
279
|
+
it('ignores pointermove / pointerup when no drag is active', () => {
|
|
280
|
+
const { host } = buildGrid([{ rowIndex: 0 }])
|
|
281
|
+
track(host)
|
|
282
|
+
const onResize = vi.fn()
|
|
283
|
+
const onResizeMove = vi.fn()
|
|
284
|
+
const action = rowResize(host, { onResize, onResizeMove })
|
|
285
|
+
// No pointerdown first - listeners were only attached on down, so these
|
|
286
|
+
// shouldn't do anything even if dispatched.
|
|
287
|
+
window.dispatchEvent(pointer('pointermove', { clientY: 10 }))
|
|
288
|
+
window.dispatchEvent(pointer('pointerup', { clientY: 10 }))
|
|
289
|
+
expect(onResize).not.toHaveBeenCalled()
|
|
290
|
+
expect(onResizeMove).not.toHaveBeenCalled()
|
|
291
|
+
action.destroy()
|
|
292
|
+
})
|
|
293
|
+
})
|
|
294
|
+
|
|
295
|
+
// ---------------------------------------------------------------------------
|
|
296
|
+
// pointerdown guards
|
|
297
|
+
// ---------------------------------------------------------------------------
|
|
298
|
+
|
|
299
|
+
describe('rowResize - pointerdown guards', () => {
|
|
300
|
+
it('ignores pointerdown when disabled', () => {
|
|
301
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
302
|
+
track(host)
|
|
303
|
+
mockRowHeight(rows[0]!, 32)
|
|
304
|
+
const onResize = vi.fn()
|
|
305
|
+
// Start enabled so a strip exists, then disable via update.
|
|
306
|
+
const action = rowResize(host, { onResize })
|
|
307
|
+
const strip = stripOf(rows[0]!)!
|
|
308
|
+
action.update({ onResize, disabled: true })
|
|
309
|
+
// update removes strips, but dispatch on the (now-detached) strip anyway:
|
|
310
|
+
// even if it were still in the DOM, current.disabled short-circuits.
|
|
311
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
312
|
+
window.dispatchEvent(pointer('pointerup', { clientY: 50 }))
|
|
313
|
+
expect(onResize).not.toHaveBeenCalled()
|
|
314
|
+
action.destroy()
|
|
315
|
+
})
|
|
316
|
+
|
|
317
|
+
it('ignores pointerdown on a non-strip target', () => {
|
|
318
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
319
|
+
track(host)
|
|
320
|
+
const onResize = vi.fn()
|
|
321
|
+
const action = rowResize(host, { onResize })
|
|
322
|
+
gutterOf(rows[0]!).dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
323
|
+
expect(document.body.style.cursor).toBe('')
|
|
324
|
+
action.destroy()
|
|
325
|
+
})
|
|
326
|
+
|
|
327
|
+
it('ignores a strip whose row has a non-finite row index', () => {
|
|
328
|
+
const { host, rows } = buildGrid([{}])
|
|
329
|
+
track(host)
|
|
330
|
+
// Remove the data-svgrid-row marker so rowIndexOf returns NaN.
|
|
331
|
+
rows[0]!.querySelector('[data-svgrid-row]')!.removeAttribute('data-svgrid-row')
|
|
332
|
+
const onResize = vi.fn()
|
|
333
|
+
const action = rowResize(host, { onResize })
|
|
334
|
+
const strip = stripOf(rows[0]!)!
|
|
335
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
336
|
+
expect(document.body.style.cursor).toBe('')
|
|
337
|
+
expect(strip.classList.contains('is-resizing')).toBe(false)
|
|
338
|
+
action.destroy()
|
|
339
|
+
})
|
|
340
|
+
|
|
341
|
+
it('ignores a strip not inside a tr.sv-grid-row', () => {
|
|
342
|
+
const host = track(document.createElement('div'))
|
|
343
|
+
document.body.appendChild(host)
|
|
344
|
+
// A loose strip with no matching ancestor row.
|
|
345
|
+
const strip = document.createElement('div')
|
|
346
|
+
strip.className = STRIP_CLASS
|
|
347
|
+
host.appendChild(strip)
|
|
348
|
+
const onResize = vi.fn()
|
|
349
|
+
const action = rowResize(host, { onResize })
|
|
350
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
351
|
+
expect(document.body.style.cursor).toBe('')
|
|
352
|
+
action.destroy()
|
|
353
|
+
})
|
|
354
|
+
})
|
|
355
|
+
|
|
356
|
+
// ---------------------------------------------------------------------------
|
|
357
|
+
// update() + destroy()
|
|
358
|
+
// ---------------------------------------------------------------------------
|
|
359
|
+
|
|
360
|
+
describe('rowResize - update + destroy', () => {
|
|
361
|
+
it('removes strips when toggled to disabled and restores when re-enabled', () => {
|
|
362
|
+
const { host, rows } = buildGrid([{}, {}])
|
|
363
|
+
track(host)
|
|
364
|
+
const onResize = vi.fn()
|
|
365
|
+
const action = rowResize(host, { onResize, disabled: false })
|
|
366
|
+
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
367
|
+
|
|
368
|
+
action.update({ onResize, disabled: true })
|
|
369
|
+
expect(stripOf(rows[0]!)).toBeNull()
|
|
370
|
+
expect(stripOf(rows[1]!)).toBeNull()
|
|
371
|
+
|
|
372
|
+
action.update({ onResize, disabled: false })
|
|
373
|
+
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
374
|
+
action.destroy()
|
|
375
|
+
})
|
|
376
|
+
|
|
377
|
+
it('does not repaint when disabled flag is unchanged on update', () => {
|
|
378
|
+
const { host, rows } = buildGrid([{}])
|
|
379
|
+
track(host)
|
|
380
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
381
|
+
const firstStrip = stripOf(rows[0]!)
|
|
382
|
+
// Same disabled value -> decorate is NOT called, strip stays the same node.
|
|
383
|
+
action.update({ onResize: vi.fn() })
|
|
384
|
+
expect(stripOf(rows[0]!)).toBe(firstStrip)
|
|
385
|
+
action.destroy()
|
|
386
|
+
})
|
|
387
|
+
|
|
388
|
+
it('destroy removes all strips and detaches listeners', () => {
|
|
389
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
390
|
+
track(host)
|
|
391
|
+
mockRowHeight(rows[0]!, 32)
|
|
392
|
+
const onResize = vi.fn()
|
|
393
|
+
const action = rowResize(host, { onResize })
|
|
394
|
+
expect(stripOf(rows[0]!)).not.toBeNull()
|
|
395
|
+
|
|
396
|
+
action.destroy()
|
|
397
|
+
expect(stripOf(rows[0]!)).toBeNull()
|
|
398
|
+
|
|
399
|
+
// After destroy the pointerdown listener is gone; re-create a strip
|
|
400
|
+
// manually and confirm no drag starts.
|
|
401
|
+
const strip = document.createElement('div')
|
|
402
|
+
strip.className = STRIP_CLASS
|
|
403
|
+
gutterOf(rows[0]!).appendChild(strip)
|
|
404
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 10 }))
|
|
405
|
+
expect(document.body.style.cursor).toBe('')
|
|
406
|
+
})
|
|
407
|
+
|
|
408
|
+
it('uses default min=20 / max=320 when bounds are omitted', () => {
|
|
409
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
410
|
+
track(host)
|
|
411
|
+
mockRowHeight(rows[0]!, 100)
|
|
412
|
+
const onResize = vi.fn()
|
|
413
|
+
const action = rowResize(host, { onResize })
|
|
414
|
+
const strip = stripOf(rows[0]!)!
|
|
415
|
+
strip.dispatchEvent(pointer('pointerdown', { clientY: 0 }))
|
|
416
|
+
// Drag way past max -> clamps to 320.
|
|
417
|
+
window.dispatchEvent(pointer('pointermove', { clientY: 10000 }))
|
|
418
|
+
expect(rows[0]!.style.height).toBe('320px')
|
|
419
|
+
// Drag way below min -> clamps to 20.
|
|
420
|
+
window.dispatchEvent(pointer('pointerup', { clientY: -10000 }))
|
|
421
|
+
expect(onResize).toHaveBeenCalledWith(0, 20)
|
|
422
|
+
action.destroy()
|
|
423
|
+
})
|
|
424
|
+
})
|
|
425
|
+
|
|
426
|
+
// ---------------------------------------------------------------------------
|
|
427
|
+
// Keyboard resize (#79)
|
|
428
|
+
// ---------------------------------------------------------------------------
|
|
429
|
+
|
|
430
|
+
describe('rowResize - keyboard', () => {
|
|
431
|
+
function key(k: string, init: Partial<KeyboardEvent> = {}): KeyboardEvent {
|
|
432
|
+
return new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true, ...init })
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
it('makes the strip focusable', () => {
|
|
436
|
+
const { host, rows } = buildGrid([{}])
|
|
437
|
+
track(host)
|
|
438
|
+
const action = rowResize(host, { onResize: vi.fn() })
|
|
439
|
+
expect(stripOf(rows[0]!)!.tabIndex).toBe(0)
|
|
440
|
+
action.destroy()
|
|
441
|
+
})
|
|
442
|
+
|
|
443
|
+
it('ArrowDown grows the row by 10px and reports the new height', () => {
|
|
444
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
445
|
+
track(host)
|
|
446
|
+
mockRowHeight(rows[0]!, 32)
|
|
447
|
+
const onResize = vi.fn()
|
|
448
|
+
const action = rowResize(host, { onResize })
|
|
449
|
+
stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
|
|
450
|
+
expect(rows[0]!.style.height).toBe('42px')
|
|
451
|
+
expect(onResize).toHaveBeenCalledWith(0, 42)
|
|
452
|
+
action.destroy()
|
|
453
|
+
})
|
|
454
|
+
|
|
455
|
+
it('ArrowUp shrinks the row and Shift gives a 1px step', () => {
|
|
456
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
457
|
+
track(host)
|
|
458
|
+
mockRowHeight(rows[0]!, 60)
|
|
459
|
+
const onResize = vi.fn()
|
|
460
|
+
const action = rowResize(host, { onResize })
|
|
461
|
+
const strip = stripOf(rows[0]!)!
|
|
462
|
+
strip.dispatchEvent(key('ArrowUp'))
|
|
463
|
+
expect(onResize).toHaveBeenLastCalledWith(0, 50)
|
|
464
|
+
strip.dispatchEvent(key('ArrowUp', { shiftKey: true }))
|
|
465
|
+
expect(onResize).toHaveBeenLastCalledWith(0, 59)
|
|
466
|
+
action.destroy()
|
|
467
|
+
})
|
|
468
|
+
|
|
469
|
+
it('clamps to the configured min and max', () => {
|
|
470
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
471
|
+
track(host)
|
|
472
|
+
mockRowHeight(rows[0]!, 42)
|
|
473
|
+
const onResize = vi.fn()
|
|
474
|
+
const action = rowResize(host, { onResize, min: 40, max: 44 })
|
|
475
|
+
const strip = stripOf(rows[0]!)!
|
|
476
|
+
strip.dispatchEvent(key('ArrowUp'))
|
|
477
|
+
expect(onResize).toHaveBeenLastCalledWith(0, 40)
|
|
478
|
+
strip.dispatchEvent(key('ArrowDown'))
|
|
479
|
+
expect(onResize).toHaveBeenLastCalledWith(0, 44)
|
|
480
|
+
action.destroy()
|
|
481
|
+
})
|
|
482
|
+
|
|
483
|
+
it('ignores keys other than the arrows and consumes the ones it handles', () => {
|
|
484
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
485
|
+
track(host)
|
|
486
|
+
mockRowHeight(rows[0]!, 32)
|
|
487
|
+
const onResize = vi.fn()
|
|
488
|
+
const action = rowResize(host, { onResize })
|
|
489
|
+
const strip = stripOf(rows[0]!)!
|
|
490
|
+
const other = key('Enter')
|
|
491
|
+
strip.dispatchEvent(other)
|
|
492
|
+
expect(onResize).not.toHaveBeenCalled()
|
|
493
|
+
expect(other.defaultPrevented).toBe(false)
|
|
494
|
+
const handled = key('ArrowDown')
|
|
495
|
+
strip.dispatchEvent(handled)
|
|
496
|
+
expect(handled.defaultPrevented).toBe(true)
|
|
497
|
+
action.destroy()
|
|
498
|
+
})
|
|
499
|
+
|
|
500
|
+
it('does nothing while disabled, and stops after destroy', () => {
|
|
501
|
+
const { host, rows } = buildGrid([{ rowIndex: 0 }])
|
|
502
|
+
track(host)
|
|
503
|
+
mockRowHeight(rows[0]!, 32)
|
|
504
|
+
const onResize = vi.fn()
|
|
505
|
+
const action = rowResize(host, { onResize, disabled: true })
|
|
506
|
+
// Disabled removes the strips entirely, so drive a hand-made one.
|
|
507
|
+
const strip = document.createElement('div')
|
|
508
|
+
strip.className = STRIP_CLASS
|
|
509
|
+
gutterOf(rows[0]!).appendChild(strip)
|
|
510
|
+
strip.dispatchEvent(key('ArrowDown'))
|
|
511
|
+
expect(onResize).not.toHaveBeenCalled()
|
|
512
|
+
|
|
513
|
+
action.update({ onResize })
|
|
514
|
+
stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
|
|
515
|
+
expect(onResize).toHaveBeenCalledTimes(1)
|
|
516
|
+
|
|
517
|
+
action.destroy()
|
|
518
|
+
const orphan = document.createElement('div')
|
|
519
|
+
orphan.className = STRIP_CLASS
|
|
520
|
+
gutterOf(rows[0]!).appendChild(orphan)
|
|
521
|
+
orphan.dispatchEvent(key('ArrowDown'))
|
|
522
|
+
expect(onResize).toHaveBeenCalledTimes(1)
|
|
523
|
+
})
|
|
524
|
+
})
|