@svgrid/grid 2.7.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (264) hide show
  1. package/CHANGELOG.md +116 -88
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/SvAutoComplete.svelte +169 -169
  6. package/dist/SvAvatar.svelte +75 -75
  7. package/dist/SvCalendar.svelte +503 -503
  8. package/dist/SvCarousel.svelte +141 -141
  9. package/dist/SvCheckBox.svelte +102 -102
  10. package/dist/SvCircularProgress.svelte +109 -109
  11. package/dist/SvColorInput.svelte +181 -181
  12. package/dist/SvComboBox.svelte +279 -279
  13. package/dist/SvContextMenu.svelte +116 -116
  14. package/dist/SvCountryInput.svelte +163 -163
  15. package/dist/SvDrawer.svelte +254 -254
  16. package/dist/SvDropDownList.svelte +378 -378
  17. package/dist/SvDurationInput.svelte +126 -126
  18. package/dist/SvField.svelte +293 -293
  19. package/dist/SvForm.svelte +437 -437
  20. package/dist/SvGridCellEditor.svelte +748 -744
  21. package/dist/SvGridChart.svelte +1716 -1716
  22. package/dist/SvGridChartPanel.svelte +485 -485
  23. package/dist/SvGridChartView.svelte +70 -70
  24. package/dist/SvGridDropdown.svelte +728 -728
  25. package/dist/SvGridSelect.svelte +270 -270
  26. package/dist/SvGroupCell.svelte +116 -116
  27. package/dist/SvListBox.svelte +334 -334
  28. package/dist/SvMaskedInput.svelte +122 -122
  29. package/dist/SvMenu.svelte +124 -124
  30. package/dist/SvMenuList.svelte +146 -146
  31. package/dist/SvMultiSelect.svelte +293 -293
  32. package/dist/SvNumberInput.svelte +172 -172
  33. package/dist/SvOtpInput.svelte +158 -158
  34. package/dist/SvPasswordInput.svelte +151 -151
  35. package/dist/SvPhoneInput.svelte +133 -133
  36. package/dist/SvPopover.svelte +197 -197
  37. package/dist/SvProgress.svelte +116 -116
  38. package/dist/SvRadioGroup.svelte +107 -107
  39. package/dist/SvRating.svelte +112 -112
  40. package/dist/SvResult.svelte +73 -73
  41. package/dist/SvRichText.svelte +211 -211
  42. package/dist/SvRowGroupPanel.svelte +170 -170
  43. package/dist/SvScrollArea.svelte +61 -61
  44. package/dist/SvSlider.svelte +203 -203
  45. package/dist/SvSwitchButton.svelte +108 -108
  46. package/dist/SvTagsInput.svelte +115 -115
  47. package/dist/SvTextInput.svelte +147 -147
  48. package/dist/SvTimePicker.svelte +245 -245
  49. package/dist/SvToaster.svelte +159 -159
  50. package/dist/SvToggleButton.svelte +85 -85
  51. package/dist/SvTooltip.svelte +161 -161
  52. package/dist/SvTour.svelte +208 -208
  53. package/dist/SvTree.svelte +444 -444
  54. package/dist/SvTreeSelect.svelte +239 -239
  55. package/dist/cdn/{GridMenus-C4oLsJyj.js → GridMenus-CYzOvmNQ.js} +3 -3
  56. package/dist/cdn/{GridMenus-yEivjNwl.js → GridMenus-DFB6iwF8.js} +3 -3
  57. package/dist/cdn/{SvDateRangeInput-DflbiP7N.js → SvDateRangeInput-CaOuMs8O.js} +1 -1
  58. package/dist/cdn/{SvDateRangeInput-Bh0A0JkF.js → SvDateRangeInput-DMLKmGEc.js} +1 -1
  59. package/dist/cdn/{SvDateTimePicker-Bivn8dAP.js → SvDateTimePicker-CCbDZNZB.js} +1 -1
  60. package/dist/cdn/{SvDateTimePicker-BWwpfB_o.js → SvDateTimePicker-sonaH0oh.js} +1 -1
  61. package/dist/cdn/{SvGridCellEditor-Ba7rY3eu.js → SvGridCellEditor-BWnTi2N7.js} +2 -2
  62. package/dist/cdn/{SvGridCellEditor-AXL8cHGO.js → SvGridCellEditor-CjEJMJKc.js} +2 -2
  63. package/dist/cdn/{SvGridChart-CwhFz7GV.js → SvGridChart-BEJmNNx9.js} +1 -1
  64. package/dist/cdn/{SvGridChart-Bs2GIR2Q.js → SvGridChart-BwVos976.js} +1 -1
  65. package/dist/cdn/{SvGridChartPanel-1WXuStzM.js → SvGridChartPanel-BOknOkrP.js} +1 -1
  66. package/dist/cdn/{SvGridChartPanel-e5_nqNP9.js → SvGridChartPanel-D2PjII4O.js} +1 -1
  67. package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-00LPUHL1.js} +1 -1
  68. package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-BhUEJ5ki.js} +1 -1
  69. package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
  70. package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
  71. package/dist/cdn/{date-format-DZT7T1wf.js → date-format-BNii4zeD.js} +2 -2
  72. package/dist/cdn/{date-format-CcP1tafP.js → date-format-BnnHlqGw.js} +2 -2
  73. package/dist/cdn/{row-drag-touch-Ddaa-QeB.js → row-drag-touch-CycRR65n.js} +12 -10
  74. package/dist/cdn/{src-COC0vnpg.js → src-C8QjSaq-.js} +53 -55
  75. package/dist/cdn/{src-pYGV2rMR.js → src-D0hO2eYN.js} +52 -54
  76. package/dist/cdn/svgrid.js +7 -7
  77. package/dist/cdn/svgrid.svelte-external.js +7 -7
  78. package/dist/chart-export.js +8 -8
  79. package/dist/editing.js +22 -13
  80. package/dist/row-drag-touch.d.ts +5 -1
  81. package/dist/row-drag-touch.js +15 -4
  82. package/dist/row-drag.js +7 -3
  83. package/package.json +11 -11
  84. package/src/FlexRender.svelte +96 -96
  85. package/src/GridFooter.svelte +181 -181
  86. package/src/SvAutoComplete.svelte +169 -169
  87. package/src/SvAvatar.svelte +75 -75
  88. package/src/SvCalendar.svelte +503 -503
  89. package/src/SvCalendar.test.ts +226 -226
  90. package/src/SvCarousel.svelte +141 -141
  91. package/src/SvCheckBox.svelte +102 -102
  92. package/src/SvCircularProgress.svelte +109 -109
  93. package/src/SvColorInput.svelte +181 -181
  94. package/src/SvComboBox.svelte +279 -279
  95. package/src/SvContextMenu.svelte +116 -116
  96. package/src/SvCountryInput.svelte +163 -163
  97. package/src/SvDrawer.svelte +254 -254
  98. package/src/SvDropDownList.svelte +378 -378
  99. package/src/SvDurationInput.svelte +126 -126
  100. package/src/SvField.svelte +293 -293
  101. package/src/SvForm.svelte +437 -437
  102. package/src/SvForm.test.ts +411 -411
  103. package/src/SvGrid.types.ts +2092 -2092
  104. package/src/SvGridCellEditor.svelte +748 -744
  105. package/src/SvGridChart.svelte +1716 -1716
  106. package/src/SvGridChartPanel.svelte +485 -485
  107. package/src/SvGridChartView.svelte +70 -70
  108. package/src/SvGridDropdown.svelte +728 -728
  109. package/src/SvGridSelect.svelte +270 -270
  110. package/src/SvGroupCell.svelte +116 -116
  111. package/src/SvListBox.svelte +334 -334
  112. package/src/SvMaskedInput.svelte +122 -122
  113. package/src/SvMenu.svelte +124 -124
  114. package/src/SvMenu.test.ts +97 -97
  115. package/src/SvMenuList.svelte +146 -146
  116. package/src/SvMultiSelect.svelte +293 -293
  117. package/src/SvNumberInput.svelte +172 -172
  118. package/src/SvOtpInput.svelte +158 -158
  119. package/src/SvPasswordInput.svelte +151 -151
  120. package/src/SvPhoneInput.svelte +133 -133
  121. package/src/SvPopover.svelte +197 -197
  122. package/src/SvProgress.svelte +116 -116
  123. package/src/SvRadioGroup.svelte +107 -107
  124. package/src/SvRating.svelte +112 -112
  125. package/src/SvResult.svelte +73 -73
  126. package/src/SvRichText.svelte +211 -211
  127. package/src/SvRowGroupPanel.svelte +170 -170
  128. package/src/SvScrollArea.svelte +61 -61
  129. package/src/SvSlider.svelte +203 -203
  130. package/src/SvSwitchButton.svelte +108 -108
  131. package/src/SvTagsInput.svelte +115 -115
  132. package/src/SvTextInput.svelte +147 -147
  133. package/src/SvTimePicker.svelte +245 -245
  134. package/src/SvToaster.svelte +159 -159
  135. package/src/SvToaster.test.ts +95 -95
  136. package/src/SvToggleButton.svelte +85 -85
  137. package/src/SvTooltip.svelte +161 -161
  138. package/src/SvTour.svelte +208 -208
  139. package/src/SvTree.svelte +444 -444
  140. package/src/SvTreeSelect.svelte +239 -239
  141. package/src/a11y/dismissable.test.ts +119 -119
  142. package/src/a11y/dismissable.ts +114 -114
  143. package/src/a11y.contract.test.ts +49 -49
  144. package/src/a11y.test.ts +59 -59
  145. package/src/a11y.ts +61 -61
  146. package/src/ai.test.ts +502 -502
  147. package/src/ai.ts +1419 -1419
  148. package/src/build-api.coverage.test.ts +633 -633
  149. package/src/build-api.ts +846 -846
  150. package/src/builtin-editors.grid.test.ts +83 -83
  151. package/src/cell-formatting.ts +171 -171
  152. package/src/cell-render.test.ts +513 -513
  153. package/src/cell-render.ts +496 -496
  154. package/src/cell-values.ts +148 -148
  155. package/src/chart-export.ts +202 -202
  156. package/src/chart-view.svelte.ts +36 -36
  157. package/src/chart.ts +2321 -2321
  158. package/src/collaboration.test.ts +104 -104
  159. package/src/collaboration.ts +167 -167
  160. package/src/column-groups.ts +78 -78
  161. package/src/core.performance.test.ts +30 -30
  162. package/src/core.ts +1865 -1865
  163. package/src/createAutocomplete.svelte.ts +132 -132
  164. package/src/createCombobox.svelte.ts +191 -191
  165. package/src/createCountryInput.svelte.ts +157 -157
  166. package/src/createDropdownList.svelte.ts +168 -168
  167. package/src/createForm.svelte.ts +386 -386
  168. package/src/createGrid.svelte.ts +42 -42
  169. package/src/createGrid.test.ts +10 -10
  170. package/src/createGridState.svelte.ts +17 -17
  171. package/src/createListbox.svelte.ts +250 -250
  172. package/src/createMenu.svelte.ts +224 -224
  173. package/src/createPopoverSelect.svelte.ts +213 -213
  174. package/src/createSlider.svelte.ts +191 -191
  175. package/src/createTooltip.svelte.ts +144 -144
  176. package/src/createTree.svelte.ts +322 -322
  177. package/src/datetime/date-core.ts +206 -206
  178. package/src/datetime/date-restrict.ts +61 -61
  179. package/src/datetime/timezone.ts +135 -135
  180. package/src/dock-manager-model.ts +596 -596
  181. package/src/dock-model.ts +374 -374
  182. package/src/editing.test.ts +974 -974
  183. package/src/editing.ts +618 -609
  184. package/src/editor-contract.ts +171 -171
  185. package/src/editor-registry.grid.test.ts +144 -144
  186. package/src/editor-registry.ts +122 -122
  187. package/src/export-data-api.test.ts +126 -126
  188. package/src/export-format.test.ts +107 -107
  189. package/src/export-format.ts +601 -601
  190. package/src/filter-operators.ts +160 -160
  191. package/src/filtering/excel-filters.ts +325 -325
  192. package/src/flex-render.ts +3 -3
  193. package/src/form-field.ts +127 -127
  194. package/src/group-display.test.ts +167 -167
  195. package/src/group-display.ts +200 -200
  196. package/src/headless.ts +87 -87
  197. package/src/js-scroller.svelte.ts +173 -173
  198. package/src/keyboard-handlers.ts +270 -270
  199. package/src/keyboard.test.ts +59 -59
  200. package/src/keyboard.ts +97 -97
  201. package/src/list-nav.test.ts +49 -49
  202. package/src/list-nav.ts +29 -29
  203. package/src/list-option.test.ts +56 -56
  204. package/src/list-option.ts +179 -179
  205. package/src/menus.ts +597 -597
  206. package/src/merge-objects.ts +48 -48
  207. package/src/overlays.test.ts +90 -90
  208. package/src/positioning.ts +268 -268
  209. package/src/render-component.ts +28 -28
  210. package/src/row-drag-touch.ts +226 -211
  211. package/src/row-drag.test.ts +401 -353
  212. package/src/row-drag.ts +419 -415
  213. package/src/row-resize.test.ts +524 -524
  214. package/src/row-resize.ts +228 -228
  215. package/src/scheduler-ical.ts +181 -181
  216. package/src/scheduler-model.test.ts +562 -562
  217. package/src/scheduler-model.ts +873 -873
  218. package/src/selection.test.ts +885 -885
  219. package/src/server-data-source.test.ts +383 -383
  220. package/src/server-data-source.ts +469 -469
  221. package/src/sparkline.test.ts +68 -68
  222. package/src/sparkline.ts +169 -169
  223. package/src/spreadsheet.test.ts +488 -488
  224. package/src/spreadsheet.ts +312 -312
  225. package/src/static-functions.ts +11 -11
  226. package/src/subscribe.ts +38 -38
  227. package/src/summaries.ts +113 -113
  228. package/src/svgrid-wrapper.types.ts +563 -563
  229. package/src/svgrid.async-editor-options.test.ts +273 -273
  230. package/src/svgrid.auto-row-height.test.ts +204 -204
  231. package/src/svgrid.behavior.test.ts +910 -910
  232. package/src/svgrid.charting.test.ts +534 -534
  233. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  234. package/src/svgrid.context-menu.test.ts +147 -147
  235. package/src/svgrid.features.test.ts +157 -157
  236. package/src/svgrid.filter-depth.test.ts +163 -163
  237. package/src/svgrid.filter-menu-listbox.svelte.test.ts +382 -377
  238. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  239. package/src/svgrid.grand-total.test.ts +188 -188
  240. package/src/svgrid.group-display-mode.test.ts +171 -171
  241. package/src/svgrid.group-footers.test.ts +121 -121
  242. package/src/svgrid.group-pagination.test.ts +153 -153
  243. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  244. package/src/svgrid.tree-data.test.ts +186 -186
  245. package/src/svgrid.wrapper.test.ts +63 -63
  246. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  247. package/src/test-setup.ts +62 -62
  248. package/src/themes/index.ts +288 -288
  249. package/src/toast-store.svelte.ts +250 -250
  250. package/src/toast-store.test.ts +147 -147
  251. package/src/tree-row-model.test.ts +168 -168
  252. package/src/ui-buttons.test.ts +144 -144
  253. package/src/ui-inputs.test.ts +118 -118
  254. package/src/ui-localization.test.ts +113 -113
  255. package/src/ui-range.test.ts +70 -70
  256. package/src/ui-selection.test.ts +155 -155
  257. package/src/ui-tier1.test.ts +142 -142
  258. package/src/virtual.test.ts +88 -88
  259. package/src/virtualization/column-virtualizer.test.ts +27 -27
  260. package/src/virtualization/column-virtualizer.ts +30 -30
  261. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  262. package/src/virtualization/types.ts +30 -30
  263. package/src/virtualization/virtualizer.test.ts +47 -47
  264. package/src/virtualization/virtualizer.ts +322 -322
package/src/ui-selection.test.ts CHANGED
@@ -1,155 +1,155 @@
1
- /** Group D (selection overlays) component tests. Panels portal to <body>. */
2
- import { describe, expect, it, afterEach } from 'vitest'
3
- import { mount, unmount, flushSync } from 'svelte'
4
- import SvListBox from './SvListBox.svelte'
5
- import SvDropDownList from './SvDropDownList.svelte'
6
- import SvComboBox from './SvComboBox.svelte'
7
- import SvTagsInput from './SvTagsInput.svelte'
8
- import SvCountryInput from './SvCountryInput.svelte'
9
-
10
- function mnt(Comp: any, props: Record<string, unknown>) {
11
- const target = document.createElement('div')
12
- document.body.appendChild(target)
13
- const app = mount(Comp, { target, props: props as any })
14
- flushSync()
15
- return { target, destroy: () => { unmount(app); target.remove() } }
16
- }
17
-
18
- afterEach(() => {
19
- document.querySelectorAll('.sv-ddl__panel, .sv-country__panel').forEach((n) => n.remove())
20
- })
21
-
22
- const OPTS = [
23
- { value: 'a', label: 'Apple' },
24
- { value: 'b', label: 'Banana' },
25
- { value: 'c', label: 'Cherry' },
26
- ]
27
-
28
- describe('SvListBox', () => {
29
- it('single select emits scalar; multi toggles array', () => {
30
- let got: any
31
- const a = mnt(SvListBox, { options: OPTS, value: 'a', onChange: (v: any) => (got = v) })
32
- try {
33
- a.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[2]!.click(); flushSync()
34
- expect(got).toBe('c')
35
- } finally { a.destroy() }
36
- const b = mnt(SvListBox, { options: OPTS, value: ['a'], multiple: true, onChange: (v: any) => (got = v) })
37
- try {
38
- b.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[1]!.click(); flushSync()
39
- expect(got).toEqual(['a', 'b'])
40
- } finally { b.destroy() }
41
- })
42
-
43
- it('posts its value(s) via hidden inputs when `name` is set (multi -> repeated name)', () => {
44
- const m = mnt(SvListBox, { options: OPTS, value: ['a', 'c'], multiple: true, name: 'tags' })
45
- try {
46
- const hidden = Array.from(m.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="tags"]'))
47
- expect(hidden.map((h) => h.value)).toEqual(['a', 'c'])
48
- } finally { m.destroy() }
49
- const s = mnt(SvListBox, { options: OPTS, value: 'b', name: 'choice' })
50
- try {
51
- const hidden = Array.from(s.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="choice"]'))
52
- expect(hidden.map((h) => h.value)).toEqual(['b'])
53
- } finally { s.destroy() }
54
- })
55
- })
56
-
57
- describe('SvDropDownList', () => {
58
- it('opens a portalled listbox and picks a value', () => {
59
- let got: any
60
- const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
61
- try {
62
- target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
63
- const panel = document.querySelector('.sv-ddl__panel')!
64
- expect(panel).not.toBeNull()
65
- panel.querySelectorAll<HTMLElement>('.sv-ddl__opt')[1]!.click(); flushSync()
66
- expect(got).toBe('b')
67
- expect(document.querySelector('.sv-ddl__panel')).toBeNull() // closed
68
- } finally { destroy() }
69
- })
70
- it('readonly does not open the panel and marks aria-readonly', () => {
71
- let got: any
72
- const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: 'a', readonly: true, onChange: (v: any) => (got = v) })
73
- try {
74
- const trigger = target.querySelector<HTMLButtonElement>('.sv-ddl')!
75
- expect(trigger.getAttribute('aria-readonly')).toBe('true')
76
- expect(trigger.hasAttribute('disabled')).toBe(false) // still focusable
77
- trigger.click(); flushSync()
78
- expect(document.querySelector('.sv-ddl__panel')).toBeNull() // stayed closed
79
- expect(got).toBeUndefined()
80
- } finally { destroy() }
81
- })
82
- it('renders a resize grip only when resizable and the panel opens downward', () => {
83
- const off = mnt(SvDropDownList, { options: OPTS, value: null })
84
- try {
85
- off.target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
86
- expect(document.querySelector('.sv-ddl__grip')).toBeNull() // no grip by default
87
- } finally { off.destroy() }
88
- const on = mnt(SvDropDownList, { options: OPTS, value: null, resizable: true })
89
- try {
90
- on.target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
91
- expect(document.querySelector('.sv-ddl__panel.is-resizable')).not.toBeNull()
92
- expect(document.querySelector('.sv-ddl__grip')).not.toBeNull()
93
- } finally { on.destroy() }
94
- })
95
- })
96
-
97
- describe('SvComboBox', () => {
98
- it('filters as you type and picks a match', () => {
99
- let got: any
100
- const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
101
- try {
102
- const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
103
- input.dispatchEvent(new FocusEvent('focus')); flushSync()
104
- input.value = 'ban'
105
- input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
106
- const opts = document.querySelectorAll<HTMLElement>('.sv-ddl__opt')
107
- expect(opts.length).toBe(1)
108
- opts[0]!.click(); flushSync()
109
- expect(got).toBe('b')
110
- } finally { destroy() }
111
- })
112
- it('shows a resize grip on the open panel when resizable', () => {
113
- const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, resizable: true })
114
- try {
115
- const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
116
- input.dispatchEvent(new FocusEvent('focus')); flushSync()
117
- input.value = 'b'
118
- input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
119
- expect(document.querySelector('.sv-ddl__panel.is-resizable')).not.toBeNull()
120
- expect(document.querySelector('.sv-ddl__grip')).not.toBeNull()
121
- } finally { destroy() }
122
- })
123
- })
124
-
125
- describe('SvTagsInput', () => {
126
- it('adds on Enter and removes on Backspace', () => {
127
- let tags: string[] = ['x']
128
- const { target, destroy } = mnt(SvTagsInput, { value: tags, onChange: (t: string[]) => (tags = t) })
129
- try {
130
- const input = target.querySelector<HTMLInputElement>('.sv-tags__input')!
131
- input.value = 'new'
132
- // Svelte bind:value needs an input event before the keydown reads draft.
133
- input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
134
- input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); flushSync()
135
- expect(tags).toEqual(['x', 'new'])
136
- } finally { destroy() }
137
- })
138
- })
139
-
140
- describe('SvCountryInput', () => {
141
- it('searches and selects a country code', () => {
142
- let got: any
143
- const { target, destroy } = mnt(SvCountryInput, { value: null, onChange: (v: any) => (got = v) })
144
- try {
145
- target.querySelector<HTMLButtonElement>('.sv-country')!.click(); flushSync()
146
- const search = document.querySelector<HTMLInputElement>('.sv-country__search')!
147
- search.value = 'germ'
148
- search.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
149
- const opts = document.querySelectorAll<HTMLElement>('.sv-country__opt')
150
- expect(opts.length).toBe(1)
151
- opts[0]!.click(); flushSync()
152
- expect(got).toBe('DE')
153
- } finally { destroy() }
154
- })
155
- })
1
+ /** Group D (selection overlays) component tests. Panels portal to <body>. */
2
+ import { describe, expect, it, afterEach } from 'vitest'
3
+ import { mount, unmount, flushSync } from 'svelte'
4
+ import SvListBox from './SvListBox.svelte'
5
+ import SvDropDownList from './SvDropDownList.svelte'
6
+ import SvComboBox from './SvComboBox.svelte'
7
+ import SvTagsInput from './SvTagsInput.svelte'
8
+ import SvCountryInput from './SvCountryInput.svelte'
9
+
10
+ function mnt(Comp: any, props: Record<string, unknown>) {
11
+ const target = document.createElement('div')
12
+ document.body.appendChild(target)
13
+ const app = mount(Comp, { target, props: props as any })
14
+ flushSync()
15
+ return { target, destroy: () => { unmount(app); target.remove() } }
16
+ }
17
+
18
+ afterEach(() => {
19
+ document.querySelectorAll('.sv-ddl__panel, .sv-country__panel').forEach((n) => n.remove())
20
+ })
21
+
22
+ const OPTS = [
23
+ { value: 'a', label: 'Apple' },
24
+ { value: 'b', label: 'Banana' },
25
+ { value: 'c', label: 'Cherry' },
26
+ ]
27
+
28
+ describe('SvListBox', () => {
29
+ it('single select emits scalar; multi toggles array', () => {
30
+ let got: any
31
+ const a = mnt(SvListBox, { options: OPTS, value: 'a', onChange: (v: any) => (got = v) })
32
+ try {
33
+ a.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[2]!.click(); flushSync()
34
+ expect(got).toBe('c')
35
+ } finally { a.destroy() }
36
+ const b = mnt(SvListBox, { options: OPTS, value: ['a'], multiple: true, onChange: (v: any) => (got = v) })
37
+ try {
38
+ b.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[1]!.click(); flushSync()
39
+ expect(got).toEqual(['a', 'b'])
40
+ } finally { b.destroy() }
41
+ })
42
+
43
+ it('posts its value(s) via hidden inputs when `name` is set (multi -> repeated name)', () => {
44
+ const m = mnt(SvListBox, { options: OPTS, value: ['a', 'c'], multiple: true, name: 'tags' })
45
+ try {
46
+ const hidden = Array.from(m.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="tags"]'))
47
+ expect(hidden.map((h) => h.value)).toEqual(['a', 'c'])
48
+ } finally { m.destroy() }
49
+ const s = mnt(SvListBox, { options: OPTS, value: 'b', name: 'choice' })
50
+ try {
51
+ const hidden = Array.from(s.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="choice"]'))
52
+ expect(hidden.map((h) => h.value)).toEqual(['b'])
53
+ } finally { s.destroy() }
54
+ })
55
+ })
56
+
57
+ describe('SvDropDownList', () => {
58
+ it('opens a portalled listbox and picks a value', () => {
59
+ let got: any
60
+ const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
61
+ try {
62
+ target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
63
+ const panel = document.querySelector('.sv-ddl__panel')!
64
+ expect(panel).not.toBeNull()
65
+ panel.querySelectorAll<HTMLElement>('.sv-ddl__opt')[1]!.click(); flushSync()
66
+ expect(got).toBe('b')
67
+ expect(document.querySelector('.sv-ddl__panel')).toBeNull() // closed
68
+ } finally { destroy() }
69
+ })
70
+ it('readonly does not open the panel and marks aria-readonly', () => {
71
+ let got: any
72
+ const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: 'a', readonly: true, onChange: (v: any) => (got = v) })
73
+ try {
74
+ const trigger = target.querySelector<HTMLButtonElement>('.sv-ddl')!
75
+ expect(trigger.getAttribute('aria-readonly')).toBe('true')
76
+ expect(trigger.hasAttribute('disabled')).toBe(false) // still focusable
77
+ trigger.click(); flushSync()
78
+ expect(document.querySelector('.sv-ddl__panel')).toBeNull() // stayed closed
79
+ expect(got).toBeUndefined()
80
+ } finally { destroy() }
81
+ })
82
+ it('renders a resize grip only when resizable and the panel opens downward', () => {
83
+ const off = mnt(SvDropDownList, { options: OPTS, value: null })
84
+ try {
85
+ off.target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
86
+ expect(document.querySelector('.sv-ddl__grip')).toBeNull() // no grip by default
87
+ } finally { off.destroy() }
88
+ const on = mnt(SvDropDownList, { options: OPTS, value: null, resizable: true })
89
+ try {
90
+ on.target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
91
+ expect(document.querySelector('.sv-ddl__panel.is-resizable')).not.toBeNull()
92
+ expect(document.querySelector('.sv-ddl__grip')).not.toBeNull()
93
+ } finally { on.destroy() }
94
+ })
95
+ })
96
+
97
+ describe('SvComboBox', () => {
98
+ it('filters as you type and picks a match', () => {
99
+ let got: any
100
+ const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
101
+ try {
102
+ const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
103
+ input.dispatchEvent(new FocusEvent('focus')); flushSync()
104
+ input.value = 'ban'
105
+ input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
106
+ const opts = document.querySelectorAll<HTMLElement>('.sv-ddl__opt')
107
+ expect(opts.length).toBe(1)
108
+ opts[0]!.click(); flushSync()
109
+ expect(got).toBe('b')
110
+ } finally { destroy() }
111
+ })
112
+ it('shows a resize grip on the open panel when resizable', () => {
113
+ const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, resizable: true })
114
+ try {
115
+ const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
116
+ input.dispatchEvent(new FocusEvent('focus')); flushSync()
117
+ input.value = 'b'
118
+ input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
119
+ expect(document.querySelector('.sv-ddl__panel.is-resizable')).not.toBeNull()
120
+ expect(document.querySelector('.sv-ddl__grip')).not.toBeNull()
121
+ } finally { destroy() }
122
+ })
123
+ })
124
+
125
+ describe('SvTagsInput', () => {
126
+ it('adds on Enter and removes on Backspace', () => {
127
+ let tags: string[] = ['x']
128
+ const { target, destroy } = mnt(SvTagsInput, { value: tags, onChange: (t: string[]) => (tags = t) })
129
+ try {
130
+ const input = target.querySelector<HTMLInputElement>('.sv-tags__input')!
131
+ input.value = 'new'
132
+ // Svelte bind:value needs an input event before the keydown reads draft.
133
+ input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
134
+ input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); flushSync()
135
+ expect(tags).toEqual(['x', 'new'])
136
+ } finally { destroy() }
137
+ })
138
+ })
139
+
140
+ describe('SvCountryInput', () => {
141
+ it('searches and selects a country code', () => {
142
+ let got: any
143
+ const { target, destroy } = mnt(SvCountryInput, { value: null, onChange: (v: any) => (got = v) })
144
+ try {
145
+ target.querySelector<HTMLButtonElement>('.sv-country')!.click(); flushSync()
146
+ const search = document.querySelector<HTMLInputElement>('.sv-country__search')!
147
+ search.value = 'germ'
148
+ search.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
149
+ const opts = document.querySelectorAll<HTMLElement>('.sv-country__opt')
150
+ expect(opts.length).toBe(1)
151
+ opts[0]!.click(); flushSync()
152
+ expect(got).toBe('DE')
153
+ } finally { destroy() }
154
+ })
155
+ })
package/src/ui-tier1.test.ts CHANGED
@@ -1,142 +1,142 @@
1
- /**
2
- * Component tests for the Tier-1 text editors: SvTextInput, SvTextArea and
3
- * SvOtpInput - value emit, the commit/cancel interaction contract, and OTP
4
- * auto-advance / paste distribution.
5
- */
6
- import { describe, expect, it, vi } from 'vitest'
7
- import { mount, unmount, flushSync } from 'svelte'
8
- import SvTextInput from './SvTextInput.svelte'
9
- import SvTextArea from './SvTextArea.svelte'
10
- import SvOtpInput from './SvOtpInput.svelte'
11
- import SvDurationInput from './SvDurationInput.svelte'
12
-
13
- function mountOn(Comp: any, props: Record<string, unknown>) {
14
- const target = document.createElement('div')
15
- document.body.appendChild(target)
16
- const app = mount(Comp, { target, props: props as any })
17
- flushSync()
18
- return { target, destroy: () => { unmount(app); target.remove() } }
19
- }
20
-
21
- describe('SvTextInput', () => {
22
- it('emits onChange on input', () => {
23
- const onChange = vi.fn()
24
- const { target, destroy } = mountOn(SvTextInput, { value: '', onChange })
25
- try {
26
- const input = target.querySelector<HTMLInputElement>('.sv-text__input')!
27
- input.value = 'hello'
28
- input.dispatchEvent(new Event('input', { bubbles: true }))
29
- expect(onChange).toHaveBeenCalledWith('hello')
30
- } finally { destroy() }
31
- })
32
-
33
- it('Enter commits and Escape cancels', () => {
34
- const onCommit = vi.fn(), onCancel = vi.fn()
35
- const { target, destroy } = mountOn(SvTextInput, { value: 'abc', onCommit, onCancel })
36
- try {
37
- const input = target.querySelector<HTMLInputElement>('.sv-text__input')!
38
- input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
39
- expect(onCommit).toHaveBeenCalledWith('abc')
40
- input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
41
- expect(onCancel).toHaveBeenCalled()
42
- } finally { destroy() }
43
- })
44
-
45
- it('clearable shows a clear button that empties the value', () => {
46
- const onChange = vi.fn()
47
- const { target, destroy } = mountOn(SvTextInput, { value: 'x', clearable: true, onChange })
48
- try {
49
- const clear = target.querySelector<HTMLButtonElement>('.sv-field__clear')!
50
- expect(clear).not.toBeNull()
51
- clear.click()
52
- expect(onChange).toHaveBeenCalledWith('')
53
- } finally { destroy() }
54
- })
55
- })
56
-
57
- describe('SvTextArea', () => {
58
- it('Ctrl+Enter commits, Escape cancels, Enter alone does not commit', () => {
59
- const onCommit = vi.fn(), onCancel = vi.fn()
60
- const { target, destroy } = mountOn(SvTextArea, { value: 'note', onCommit, onCancel })
61
- try {
62
- const ta = target.querySelector<HTMLTextAreaElement>('.sv-ta__input')!
63
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
64
- expect(onCommit).not.toHaveBeenCalled()
65
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true, bubbles: true }))
66
- expect(onCommit).toHaveBeenCalledWith('note')
67
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
68
- expect(onCancel).toHaveBeenCalled()
69
- } finally { destroy() }
70
- })
71
- })
72
-
73
- describe('SvOtpInput', () => {
74
- it('renders one cell per length', () => {
75
- const { target, destroy } = mountOn(SvOtpInput, { length: 4 })
76
- try {
77
- expect(target.querySelectorAll('.sv-otp__cell')).toHaveLength(4)
78
- } finally { destroy() }
79
- })
80
-
81
- it('typing a digit emits onChange and advances focus', () => {
82
- const onChange = vi.fn()
83
- const { target, destroy } = mountOn(SvOtpInput, { length: 4, value: '', onChange })
84
- try {
85
- const cells = target.querySelectorAll<HTMLInputElement>('.sv-otp__cell')
86
- cells[0]!.value = '7'
87
- cells[0]!.dispatchEvent(new Event('input', { bubbles: true }))
88
- expect(onChange).toHaveBeenCalledWith('7')
89
- expect(document.activeElement).toBe(cells[1])
90
- } finally { destroy() }
91
- })
92
-
93
- it('paste distributes across cells and fires onComplete when full', () => {
94
- const onChange = vi.fn(), onComplete = vi.fn()
95
- const { target, destroy } = mountOn(SvOtpInput, { length: 4, value: '', onChange, onComplete })
96
- try {
97
- const cells = target.querySelectorAll<HTMLInputElement>('.sv-otp__cell')
98
- const e = new Event('paste', { bubbles: true, cancelable: true })
99
- Object.defineProperty(e, 'clipboardData', { value: { getData: () => '12ab34' } })
100
- cells[0]!.dispatchEvent(e)
101
- // numeric mode strips letters -> '1234'
102
- expect(onChange).toHaveBeenCalledWith('1234')
103
- expect(onComplete).toHaveBeenCalledWith('1234')
104
- } finally { destroy() }
105
- })
106
- })
107
-
108
- describe('SvDurationInput', () => {
109
- it('parses human input to minutes on blur', () => {
110
- const onChange = vi.fn()
111
- const { target, destroy } = mountOn(SvDurationInput, { value: null, onChange })
112
- try {
113
- const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
114
- input.dispatchEvent(new Event('focus', { bubbles: true }))
115
- input.value = '1h 30m'
116
- input.dispatchEvent(new Event('input', { bubbles: true }))
117
- input.dispatchEvent(new Event('blur', { bubbles: true }))
118
- expect(onChange).toHaveBeenCalledWith(90)
119
- } finally { destroy() }
120
- })
121
-
122
- it('formats the external value as h:mm when unfocused', () => {
123
- const { target, destroy } = mountOn(SvDurationInput, { value: 125 })
124
- try {
125
- const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
126
- expect(input.value).toBe('2:05')
127
- } finally { destroy() }
128
- })
129
-
130
- it('Enter commits the parsed value', () => {
131
- const onCommit = vi.fn()
132
- const { target, destroy } = mountOn(SvDurationInput, { value: null, onCommit })
133
- try {
134
- const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
135
- input.dispatchEvent(new Event('focus', { bubbles: true }))
136
- input.value = '45m'
137
- input.dispatchEvent(new Event('input', { bubbles: true }))
138
- input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
139
- expect(onCommit).toHaveBeenCalledWith(45)
140
- } finally { destroy() }
141
- })
142
- })
1
+ /**
2
+ * Component tests for the Tier-1 text editors: SvTextInput, SvTextArea and
3
+ * SvOtpInput - value emit, the commit/cancel interaction contract, and OTP
4
+ * auto-advance / paste distribution.
5
+ */
6
+ import { describe, expect, it, vi } from 'vitest'
7
+ import { mount, unmount, flushSync } from 'svelte'
8
+ import SvTextInput from './SvTextInput.svelte'
9
+ import SvTextArea from './SvTextArea.svelte'
10
+ import SvOtpInput from './SvOtpInput.svelte'
11
+ import SvDurationInput from './SvDurationInput.svelte'
12
+
13
+ function mountOn(Comp: any, props: Record<string, unknown>) {
14
+ const target = document.createElement('div')
15
+ document.body.appendChild(target)
16
+ const app = mount(Comp, { target, props: props as any })
17
+ flushSync()
18
+ return { target, destroy: () => { unmount(app); target.remove() } }
19
+ }
20
+
21
+ describe('SvTextInput', () => {
22
+ it('emits onChange on input', () => {
23
+ const onChange = vi.fn()
24
+ const { target, destroy } = mountOn(SvTextInput, { value: '', onChange })
25
+ try {
26
+ const input = target.querySelector<HTMLInputElement>('.sv-text__input')!
27
+ input.value = 'hello'
28
+ input.dispatchEvent(new Event('input', { bubbles: true }))
29
+ expect(onChange).toHaveBeenCalledWith('hello')
30
+ } finally { destroy() }
31
+ })
32
+
33
+ it('Enter commits and Escape cancels', () => {
34
+ const onCommit = vi.fn(), onCancel = vi.fn()
35
+ const { target, destroy } = mountOn(SvTextInput, { value: 'abc', onCommit, onCancel })
36
+ try {
37
+ const input = target.querySelector<HTMLInputElement>('.sv-text__input')!
38
+ input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
39
+ expect(onCommit).toHaveBeenCalledWith('abc')
40
+ input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
41
+ expect(onCancel).toHaveBeenCalled()
42
+ } finally { destroy() }
43
+ })
44
+
45
+ it('clearable shows a clear button that empties the value', () => {
46
+ const onChange = vi.fn()
47
+ const { target, destroy } = mountOn(SvTextInput, { value: 'x', clearable: true, onChange })
48
+ try {
49
+ const clear = target.querySelector<HTMLButtonElement>('.sv-field__clear')!
50
+ expect(clear).not.toBeNull()
51
+ clear.click()
52
+ expect(onChange).toHaveBeenCalledWith('')
53
+ } finally { destroy() }
54
+ })
55
+ })
56
+
57
+ describe('SvTextArea', () => {
58
+ it('Ctrl+Enter commits, Escape cancels, Enter alone does not commit', () => {
59
+ const onCommit = vi.fn(), onCancel = vi.fn()
60
+ const { target, destroy } = mountOn(SvTextArea, { value: 'note', onCommit, onCancel })
61
+ try {
62
+ const ta = target.querySelector<HTMLTextAreaElement>('.sv-ta__input')!
63
+ ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
64
+ expect(onCommit).not.toHaveBeenCalled()
65
+ ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true, bubbles: true }))
66
+ expect(onCommit).toHaveBeenCalledWith('note')
67
+ ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
68
+ expect(onCancel).toHaveBeenCalled()
69
+ } finally { destroy() }
70
+ })
71
+ })
72
+
73
+ describe('SvOtpInput', () => {
74
+ it('renders one cell per length', () => {
75
+ const { target, destroy } = mountOn(SvOtpInput, { length: 4 })
76
+ try {
77
+ expect(target.querySelectorAll('.sv-otp__cell')).toHaveLength(4)
78
+ } finally { destroy() }
79
+ })
80
+
81
+ it('typing a digit emits onChange and advances focus', () => {
82
+ const onChange = vi.fn()
83
+ const { target, destroy } = mountOn(SvOtpInput, { length: 4, value: '', onChange })
84
+ try {
85
+ const cells = target.querySelectorAll<HTMLInputElement>('.sv-otp__cell')
86
+ cells[0]!.value = '7'
87
+ cells[0]!.dispatchEvent(new Event('input', { bubbles: true }))
88
+ expect(onChange).toHaveBeenCalledWith('7')
89
+ expect(document.activeElement).toBe(cells[1])
90
+ } finally { destroy() }
91
+ })
92
+
93
+ it('paste distributes across cells and fires onComplete when full', () => {
94
+ const onChange = vi.fn(), onComplete = vi.fn()
95
+ const { target, destroy } = mountOn(SvOtpInput, { length: 4, value: '', onChange, onComplete })
96
+ try {
97
+ const cells = target.querySelectorAll<HTMLInputElement>('.sv-otp__cell')
98
+ const e = new Event('paste', { bubbles: true, cancelable: true })
99
+ Object.defineProperty(e, 'clipboardData', { value: { getData: () => '12ab34' } })
100
+ cells[0]!.dispatchEvent(e)
101
+ // numeric mode strips letters -> '1234'
102
+ expect(onChange).toHaveBeenCalledWith('1234')
103
+ expect(onComplete).toHaveBeenCalledWith('1234')
104
+ } finally { destroy() }
105
+ })
106
+ })
107
+
108
+ describe('SvDurationInput', () => {
109
+ it('parses human input to minutes on blur', () => {
110
+ const onChange = vi.fn()
111
+ const { target, destroy } = mountOn(SvDurationInput, { value: null, onChange })
112
+ try {
113
+ const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
114
+ input.dispatchEvent(new Event('focus', { bubbles: true }))
115
+ input.value = '1h 30m'
116
+ input.dispatchEvent(new Event('input', { bubbles: true }))
117
+ input.dispatchEvent(new Event('blur', { bubbles: true }))
118
+ expect(onChange).toHaveBeenCalledWith(90)
119
+ } finally { destroy() }
120
+ })
121
+
122
+ it('formats the external value as h:mm when unfocused', () => {
123
+ const { target, destroy } = mountOn(SvDurationInput, { value: 125 })
124
+ try {
125
+ const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
126
+ expect(input.value).toBe('2:05')
127
+ } finally { destroy() }
128
+ })
129
+
130
+ it('Enter commits the parsed value', () => {
131
+ const onCommit = vi.fn()
132
+ const { target, destroy } = mountOn(SvDurationInput, { value: null, onCommit })
133
+ try {
134
+ const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
135
+ input.dispatchEvent(new Event('focus', { bubbles: true }))
136
+ input.value = '45m'
137
+ input.dispatchEvent(new Event('input', { bubbles: true }))
138
+ input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
139
+ expect(onCommit).toHaveBeenCalledWith(45)
140
+ } finally { destroy() }
141
+ })
142
+ })