@svgrid/grid 2.6.21 → 2.7.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.
Files changed (358) hide show
  1. package/CHANGELOG.md +150 -88
  2. package/README.md +221 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/GridMenus.svelte +201 -18
  6. package/dist/SvAutoComplete.svelte +169 -165
  7. package/dist/SvAvatar.svelte +75 -75
  8. package/dist/SvCalendar.svelte +503 -503
  9. package/dist/SvCarousel.svelte +141 -141
  10. package/dist/SvCheckBox.svelte +102 -102
  11. package/dist/SvCircularProgress.svelte +109 -109
  12. package/dist/SvColorInput.svelte +181 -181
  13. package/dist/SvComboBox.svelte +279 -275
  14. package/dist/SvContextMenu.svelte +116 -116
  15. package/dist/SvCountryInput.svelte +163 -163
  16. package/dist/SvDateRangeInput.svelte +25 -3
  17. package/dist/SvDrawer.svelte +254 -254
  18. package/dist/SvDropDownList.svelte +378 -374
  19. package/dist/SvDurationInput.svelte +126 -126
  20. package/dist/SvField.svelte +293 -293
  21. package/dist/SvForm.svelte +437 -437
  22. package/dist/SvGrid.controller.svelte.d.ts +61 -9
  23. package/dist/SvGrid.controller.svelte.js +363 -123
  24. package/dist/SvGrid.css +222 -1
  25. package/dist/SvGrid.helpers.d.ts +55 -0
  26. package/dist/SvGrid.helpers.js +83 -0
  27. package/dist/SvGrid.svelte +255 -56
  28. package/dist/SvGrid.types.d.ts +146 -1
  29. package/dist/SvGridCellEditor.svelte +744 -662
  30. package/dist/SvGridChart.svelte +1716 -1716
  31. package/dist/SvGridChartPanel.svelte +485 -485
  32. package/dist/SvGridChartView.svelte +70 -70
  33. package/dist/SvGridDropdown.svelte +728 -728
  34. package/dist/SvGridSelect.svelte +270 -266
  35. package/dist/SvGridSelect.svelte.d.ts +1 -1
  36. package/dist/SvGroupCell.svelte +116 -116
  37. package/dist/SvListBox.svelte +334 -326
  38. package/dist/SvMaskedInput.svelte +122 -122
  39. package/dist/SvMenu.svelte +124 -124
  40. package/dist/SvMenuList.svelte +146 -146
  41. package/dist/SvMultiSelect.svelte +293 -289
  42. package/dist/SvMultiSelect.svelte.d.ts +1 -1
  43. package/dist/SvNumberInput.svelte +172 -168
  44. package/dist/SvOtpInput.svelte +158 -158
  45. package/dist/SvPasswordInput.svelte +151 -151
  46. package/dist/SvPhoneInput.svelte +133 -133
  47. package/dist/SvPopover.svelte +197 -197
  48. package/dist/SvProgress.svelte +116 -116
  49. package/dist/SvRadioGroup.svelte +107 -107
  50. package/dist/SvRating.svelte +112 -112
  51. package/dist/SvResult.svelte +73 -73
  52. package/dist/SvRichCell.svelte +125 -0
  53. package/dist/SvRichCell.svelte.d.ts +15 -0
  54. package/dist/SvRichText.svelte +211 -211
  55. package/dist/SvRowGroupPanel.svelte +170 -170
  56. package/dist/SvScrollArea.svelte +61 -61
  57. package/dist/SvSlider.svelte +203 -203
  58. package/dist/SvSwitchButton.svelte +108 -108
  59. package/dist/SvTagsInput.svelte +115 -115
  60. package/dist/SvTextArea.svelte +5 -1
  61. package/dist/SvTextInput.svelte +147 -147
  62. package/dist/SvTimePicker.svelte +245 -245
  63. package/dist/SvToaster.svelte +159 -159
  64. package/dist/SvToggleButton.svelte +85 -85
  65. package/dist/SvTooltip.svelte +161 -161
  66. package/dist/SvTour.svelte +208 -208
  67. package/dist/SvTree.svelte +444 -444
  68. package/dist/SvTreeSelect.svelte +239 -235
  69. package/dist/SvTreeSelect.svelte.d.ts +1 -1
  70. package/dist/builtin-editors.d.ts +2 -2
  71. package/dist/builtin-editors.js +19 -3
  72. package/dist/cdn/GridMenus-C4oLsJyj.js +600 -0
  73. package/dist/cdn/GridMenus-yEivjNwl.js +601 -0
  74. package/dist/cdn/SvDateRangeInput-Bh0A0JkF.js +199 -0
  75. package/dist/cdn/SvDateRangeInput-DflbiP7N.js +198 -0
  76. package/dist/cdn/SvDateTimePicker-BWwpfB_o.js +812 -0
  77. package/dist/cdn/SvDateTimePicker-Bivn8dAP.js +816 -0
  78. package/dist/cdn/SvGridCellEditor-AXL8cHGO.js +550 -0
  79. package/dist/cdn/SvGridCellEditor-Ba7rY3eu.js +549 -0
  80. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  81. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  82. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  83. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  84. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  85. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  86. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  87. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  88. package/dist/cdn/column-resize-DsfNXMom.js +102 -0
  89. package/dist/cdn/date-format-CcP1tafP.js +1395 -0
  90. package/dist/cdn/date-format-DZT7T1wf.js +1393 -0
  91. package/dist/cdn/{editor-registry-CiI0xlKg.js → editor-registry-BhgE3S84.js} +51 -25
  92. package/dist/cdn/row-resize-BRcimkUT.js +95 -0
  93. package/dist/cdn/{src-BYq-qyrp.js → src-COC0vnpg.js} +7846 -7317
  94. package/dist/cdn/{src-DBel9wRZ.js → src-pYGV2rMR.js} +10033 -9504
  95. package/dist/cdn/svgrid.js +15 -11
  96. package/dist/cdn/svgrid.svelte-external.js +15 -11
  97. package/dist/cell-values.d.ts +16 -0
  98. package/dist/cell-values.js +28 -0
  99. package/dist/chart-export.js +8 -8
  100. package/dist/clipboard.d.ts +22 -0
  101. package/dist/clipboard.js +405 -27
  102. package/dist/column-groups.js +1 -1
  103. package/dist/column-resize.d.ts +46 -0
  104. package/dist/column-resize.js +205 -0
  105. package/dist/columns.d.ts +0 -3
  106. package/dist/columns.js +0 -57
  107. package/dist/core.d.ts +19 -4
  108. package/dist/core.js +460 -119
  109. package/dist/editing.js +12 -7
  110. package/dist/editors/cell-editors.d.ts +11 -0
  111. package/dist/editors/cell-editors.js +18 -1
  112. package/dist/filtering/excel-filters.js +28 -0
  113. package/dist/grid-messages.d.ts +15 -0
  114. package/dist/grid-messages.js +15 -0
  115. package/dist/group-display.d.ts +1 -1
  116. package/dist/index.d.ts +6 -1
  117. package/dist/index.js +10 -0
  118. package/dist/list-option.d.ts +6 -0
  119. package/dist/menus.js +41 -8
  120. package/dist/row-resize.d.ts +11 -0
  121. package/dist/row-resize.js +7 -1
  122. package/dist/sanitize-html.d.ts +37 -0
  123. package/dist/sanitize-html.js +234 -0
  124. package/dist/selection-bar-view.svelte.d.ts +25 -0
  125. package/dist/selection-bar-view.svelte.js +13 -0
  126. package/dist/selection.d.ts +2 -1
  127. package/dist/selection.js +133 -8
  128. package/dist/spreadsheet.d.ts +1 -1
  129. package/dist/spreadsheet.js +1 -1
  130. package/package.json +11 -11
  131. package/src/FlexRender.svelte +96 -96
  132. package/src/GridFooter.svelte +181 -181
  133. package/src/GridMenus.svelte +201 -18
  134. package/src/SvAutoComplete.svelte +169 -165
  135. package/src/SvAvatar.svelte +75 -75
  136. package/src/SvCalendar.svelte +503 -503
  137. package/src/SvCalendar.test.ts +226 -226
  138. package/src/SvCarousel.svelte +141 -141
  139. package/src/SvCheckBox.svelte +102 -102
  140. package/src/SvCircularProgress.svelte +109 -109
  141. package/src/SvColorInput.svelte +181 -181
  142. package/src/SvComboBox.svelte +279 -275
  143. package/src/SvContextMenu.svelte +116 -116
  144. package/src/SvCountryInput.svelte +163 -163
  145. package/src/SvDateRangeInput.svelte +25 -3
  146. package/src/SvDrawer.svelte +254 -254
  147. package/src/SvDropDownList.svelte +378 -374
  148. package/src/SvDurationInput.svelte +126 -126
  149. package/src/SvField.svelte +293 -293
  150. package/src/SvForm.svelte +437 -437
  151. package/src/SvForm.test.ts +411 -411
  152. package/src/SvGrid.controller.svelte.ts +404 -133
  153. package/src/SvGrid.css +222 -1
  154. package/src/SvGrid.helpers.ts +87 -0
  155. package/src/SvGrid.svelte +255 -56
  156. package/src/SvGrid.types.ts +2092 -1940
  157. package/src/SvGridCellEditor.svelte +744 -662
  158. package/src/SvGridChart.svelte +1716 -1716
  159. package/src/SvGridChartPanel.svelte +485 -485
  160. package/src/SvGridChartView.svelte +70 -70
  161. package/src/SvGridDropdown.svelte +728 -728
  162. package/src/SvGridSelect.svelte +270 -266
  163. package/src/SvGroupCell.svelte +116 -116
  164. package/src/SvListBox.svelte +334 -326
  165. package/src/SvMaskedInput.svelte +122 -122
  166. package/src/SvMenu.svelte +124 -124
  167. package/src/SvMenu.test.ts +97 -97
  168. package/src/SvMenuList.svelte +146 -146
  169. package/src/SvMultiSelect.svelte +293 -289
  170. package/src/SvNumberInput.svelte +172 -168
  171. package/src/SvOtpInput.svelte +158 -158
  172. package/src/SvPasswordInput.svelte +151 -151
  173. package/src/SvPhoneInput.svelte +133 -133
  174. package/src/SvPopover.svelte +197 -197
  175. package/src/SvProgress.svelte +116 -116
  176. package/src/SvRadioGroup.svelte +107 -107
  177. package/src/SvRating.svelte +112 -112
  178. package/src/SvResult.svelte +73 -73
  179. package/src/SvRichCell.svelte +125 -0
  180. package/src/SvRichText.svelte +211 -211
  181. package/src/SvRowGroupPanel.svelte +170 -170
  182. package/src/SvScrollArea.svelte +61 -61
  183. package/src/SvSlider.svelte +203 -203
  184. package/src/SvSwitchButton.svelte +108 -108
  185. package/src/SvTagsInput.svelte +115 -115
  186. package/src/SvTextArea.svelte +5 -1
  187. package/src/SvTextInput.svelte +147 -147
  188. package/src/SvTimePicker.svelte +245 -245
  189. package/src/SvToaster.svelte +159 -159
  190. package/src/SvToaster.test.ts +95 -95
  191. package/src/SvToggleButton.svelte +85 -85
  192. package/src/SvTooltip.svelte +161 -161
  193. package/src/SvTour.svelte +208 -208
  194. package/src/SvTree.svelte +444 -444
  195. package/src/SvTreeSelect.svelte +239 -235
  196. package/src/a11y/dismissable.test.ts +119 -119
  197. package/src/a11y/dismissable.ts +114 -114
  198. package/src/a11y.contract.test.ts +49 -49
  199. package/src/a11y.test.ts +59 -59
  200. package/src/a11y.ts +61 -61
  201. package/src/ai.test.ts +502 -502
  202. package/src/ai.ts +1419 -1419
  203. package/src/build-api.coverage.test.ts +633 -633
  204. package/src/build-api.ts +846 -846
  205. package/src/builtin-editors.grid.test.ts +83 -83
  206. package/src/builtin-editors.test.ts +18 -1
  207. package/src/builtin-editors.ts +19 -3
  208. package/src/cell-formatting.ts +171 -171
  209. package/src/cell-render.test.ts +513 -513
  210. package/src/cell-render.ts +496 -496
  211. package/src/cell-values.ts +148 -118
  212. package/src/chart-export.ts +202 -202
  213. package/src/chart-view.svelte.ts +36 -36
  214. package/src/chart.ts +2321 -2321
  215. package/src/clipboard.test.ts +93 -20
  216. package/src/clipboard.ts +433 -33
  217. package/src/collaboration.test.ts +104 -104
  218. package/src/collaboration.ts +167 -167
  219. package/src/column-groups.ts +78 -78
  220. package/src/column-resize.test.ts +381 -0
  221. package/src/column-resize.ts +227 -0
  222. package/src/columns.test.ts +0 -103
  223. package/src/columns.ts +0 -58
  224. package/src/core.aggregate.test.ts +134 -0
  225. package/src/core.filter.test.ts +156 -0
  226. package/src/core.grouping.test.ts +146 -0
  227. package/src/core.performance.test.ts +30 -30
  228. package/src/core.row-shape.test.ts +119 -0
  229. package/src/core.rowmodel-cache.test.ts +121 -0
  230. package/src/core.sort.test.ts +293 -0
  231. package/src/core.ts +1865 -1468
  232. package/src/createAutocomplete.svelte.ts +132 -132
  233. package/src/createCombobox.svelte.ts +191 -191
  234. package/src/createCountryInput.svelte.ts +157 -157
  235. package/src/createDropdownList.svelte.ts +168 -168
  236. package/src/createForm.svelte.ts +386 -386
  237. package/src/createGrid.svelte.ts +42 -42
  238. package/src/createGrid.test.ts +10 -10
  239. package/src/createGridState.svelte.ts +17 -17
  240. package/src/createListbox.svelte.ts +250 -250
  241. package/src/createMenu.svelte.ts +224 -224
  242. package/src/createPopoverSelect.svelte.ts +213 -213
  243. package/src/createSlider.svelte.ts +191 -191
  244. package/src/createTooltip.svelte.ts +144 -144
  245. package/src/createTree.svelte.ts +322 -322
  246. package/src/date-string-column.test.ts +87 -0
  247. package/src/datetime/date-core.ts +206 -206
  248. package/src/datetime/date-restrict.ts +61 -61
  249. package/src/datetime/timezone.ts +135 -135
  250. package/src/dock-manager-model.ts +596 -596
  251. package/src/dock-model.ts +374 -374
  252. package/src/editing.test.ts +974 -949
  253. package/src/editing.ts +609 -606
  254. package/src/editor-block-prop.test.ts +132 -0
  255. package/src/editor-contract.ts +171 -171
  256. package/src/editor-registry.grid.test.ts +144 -144
  257. package/src/editor-registry.ts +122 -122
  258. package/src/editors/cell-editors.ts +27 -1
  259. package/src/export-data-api.test.ts +126 -126
  260. package/src/export-format.test.ts +107 -107
  261. package/src/export-format.ts +601 -601
  262. package/src/filter-operators.ts +160 -160
  263. package/src/filtering/excel-filters.ts +325 -295
  264. package/src/filtering/normalize-fast-path.test.ts +104 -0
  265. package/src/flex-render.ts +3 -3
  266. package/src/form-field.ts +127 -127
  267. package/src/grid-messages.ts +34 -0
  268. package/src/group-display.test.ts +167 -167
  269. package/src/group-display.ts +200 -200
  270. package/src/headless.ts +87 -87
  271. package/src/index.ts +25 -1
  272. package/src/js-scroller.svelte.ts +173 -173
  273. package/src/keyboard-handlers.ts +270 -270
  274. package/src/keyboard.test.ts +59 -59
  275. package/src/keyboard.ts +97 -97
  276. package/src/list-nav.test.ts +49 -49
  277. package/src/list-nav.ts +29 -29
  278. package/src/list-option.test.ts +56 -56
  279. package/src/list-option.ts +179 -173
  280. package/src/menus.test.ts +43 -0
  281. package/src/menus.ts +597 -567
  282. package/src/merge-objects.ts +48 -48
  283. package/src/move-cells.test.ts +850 -0
  284. package/src/number-editor-literal.test.ts +84 -0
  285. package/src/number-editor.grid.test.ts +160 -0
  286. package/src/overlays.test.ts +90 -90
  287. package/src/positioning.ts +268 -268
  288. package/src/render-component.ts +28 -28
  289. package/src/resize-props.test.ts +361 -0
  290. package/src/row-drag-touch.ts +211 -211
  291. package/src/row-drag.test.ts +353 -353
  292. package/src/row-drag.ts +415 -415
  293. package/src/row-resize.test.ts +524 -493
  294. package/src/row-resize.ts +228 -210
  295. package/src/sanitize-html.test.ts +182 -0
  296. package/src/sanitize-html.ts +235 -0
  297. package/src/scheduler-ical.ts +181 -181
  298. package/src/scheduler-model.test.ts +562 -562
  299. package/src/scheduler-model.ts +873 -873
  300. package/src/selection-bar-view.svelte.ts +36 -0
  301. package/src/selection.test.ts +900 -743
  302. package/src/selection.ts +135 -8
  303. package/src/server-data-source.test.ts +383 -383
  304. package/src/server-data-source.ts +469 -469
  305. package/src/sparkline.test.ts +68 -68
  306. package/src/sparkline.ts +169 -169
  307. package/src/spreadsheet.test.ts +488 -488
  308. package/src/spreadsheet.ts +312 -312
  309. package/src/static-functions.ts +11 -11
  310. package/src/subscribe.ts +38 -38
  311. package/src/summaries.ts +113 -113
  312. package/src/svgrid-wrapper.types.ts +563 -563
  313. package/src/svgrid.async-editor-options.test.ts +273 -273
  314. package/src/svgrid.auto-row-height.test.ts +204 -204
  315. package/src/svgrid.behavior.test.ts +910 -910
  316. package/src/svgrid.charting.test.ts +534 -534
  317. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  318. package/src/svgrid.context-menu.test.ts +147 -147
  319. package/src/svgrid.features.test.ts +157 -157
  320. package/src/svgrid.filter-depth.test.ts +163 -163
  321. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -331
  322. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  323. package/src/svgrid.grand-total.test.ts +188 -188
  324. package/src/svgrid.group-display-mode.test.ts +171 -171
  325. package/src/svgrid.group-footers.test.ts +121 -121
  326. package/src/svgrid.group-pagination.test.ts +153 -153
  327. package/src/svgrid.in-suggest-snapshot.svelte.test.ts +91 -0
  328. package/src/svgrid.menu-scroll-close.test.ts +204 -0
  329. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  330. package/src/svgrid.selection-bar-seam.test.ts +185 -0
  331. package/src/svgrid.tree-data.test.ts +186 -186
  332. package/src/svgrid.upsell-license.test.ts +117 -0
  333. package/src/svgrid.wrapper.test.ts +63 -63
  334. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  335. package/src/test-setup.ts +62 -62
  336. package/src/themes/index.ts +288 -288
  337. package/src/toast-store.svelte.ts +250 -250
  338. package/src/toast-store.test.ts +147 -147
  339. package/src/tree-row-model.test.ts +168 -168
  340. package/src/ui-buttons.test.ts +144 -144
  341. package/src/ui-inputs.test.ts +118 -118
  342. package/src/ui-localization.test.ts +113 -113
  343. package/src/ui-range.test.ts +70 -70
  344. package/src/ui-selection.test.ts +155 -155
  345. package/src/ui-tier1.test.ts +142 -142
  346. package/src/virtual.test.ts +88 -88
  347. package/src/virtualization/column-virtualizer.test.ts +27 -27
  348. package/src/virtualization/column-virtualizer.ts +30 -30
  349. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  350. package/src/virtualization/types.ts +30 -30
  351. package/src/virtualization/virtualizer.test.ts +47 -47
  352. package/src/virtualization/virtualizer.ts +322 -322
  353. package/dist/cdn/GridMenus-BfTAKn84.js +0 -488
  354. package/dist/cdn/GridMenus-C3bJd7w8.js +0 -489
  355. package/dist/cdn/SvDateTimePicker-CHnUkWcH.js +0 -2206
  356. package/dist/cdn/SvDateTimePicker-CRQH_U7E.js +0 -2201
  357. package/dist/cdn/SvGridCellEditor-BGUCzuPB.js +0 -523
  358. package/dist/cdn/SvGridCellEditor-G8IMWIws.js +0 -522
package/src/SvTour.svelte CHANGED
@@ -1,208 +1,208 @@
1
- <script lang="ts" module>
2
- export type { TourStep } from './ui-app.types'
3
- </script>
4
-
5
- <script lang="ts">
6
- /**
7
- * SvTour - a guided product tour / onboarding: it spotlights each step's target
8
- * element (a dimmed backdrop with a cut-out), anchors a popover with the step's
9
- * title/content near it, and steps Back / Next / Done. Arrow keys navigate,
10
- * Escape skips. Portalled to <body>. Controlled via `open`.
11
- *
12
- * ```svelte
13
- * <SvTour bind:open steps={[
14
- * { target: '#new-btn', title: 'Create', content: 'Start here.' },
15
- * { target: '.grid', title: 'Your data', content: 'It shows up here.' },
16
- * ]} />
17
- * ```
18
- */
19
- import type { TourStep } from './ui-app.types'
20
- import { portalToBody } from './popover'
21
- import { createFocusTrap } from './a11y/focus-trap'
22
- import type { EditorDir } from './editor-contract'
23
-
24
- type Props = {
25
- steps: ReadonlyArray<TourStep>
26
- open?: boolean
27
- onFinish?: () => void
28
- onSkip?: () => void
29
- onStep?: (index: number) => void
30
- /** Text direction; under `'rtl'` the Left/Right advance/back keys swap. */
31
- dir?: EditorDir
32
- }
33
-
34
- let { steps, open = $bindable(false), onFinish, onSkip, onStep, dir }: Props = $props()
35
-
36
- let index = $state(0)
37
- let rect = $state<DOMRect | null>(null)
38
- let popEl = $state<HTMLDivElement | null>(null)
39
- const step = $derived(steps[index])
40
-
41
- function targetEl(): HTMLElement | null {
42
- const t = step?.target
43
- if (!t) return null
44
- return typeof t === 'string' ? document.querySelector<HTMLElement>(t) : t
45
- }
46
- function measure() {
47
- const el = targetEl()
48
- el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
49
- rect = el ? el.getBoundingClientRect() : null
50
- }
51
- // Move focus into the popover on open + on every step change (its Next button
52
- // is the sensible default target); the Tab trap (below) keeps it there.
53
- function focusPopover() {
54
- const btn = popEl?.querySelector<HTMLElement>('.sv-tour__next')
55
- ;(btn ?? popEl)?.focus()
56
- }
57
- function goto(i: number) {
58
- index = Math.max(0, Math.min(i, steps.length - 1))
59
- onStep?.(index)
60
- queueMicrotask(() => { measure(); focusPopover() })
61
- }
62
- function next() { if (index >= steps.length - 1) finish(); else goto(index + 1) }
63
- function back() { goto(index - 1) }
64
- function finish() { open = false; onFinish?.() }
65
- function skip() { open = false; onSkip?.() }
66
-
67
- $effect(() => {
68
- if (!open) return
69
- index = 0
70
- queueMicrotask(() => { measure(); focusPopover() })
71
- const reflow = () => measure()
72
- window.addEventListener('resize', reflow)
73
- window.addEventListener('scroll', reflow, true)
74
- const rtl = dir === 'rtl'
75
- const onKey = (e: KeyboardEvent) => {
76
- if (e.key === 'Escape') { e.preventDefault(); skip() }
77
- else if (e.key === 'ArrowRight') { e.preventDefault(); (rtl ? back : next)() }
78
- else if (e.key === 'ArrowLeft') { e.preventDefault(); (rtl ? next : back)() }
79
- }
80
- window.addEventListener('keydown', onKey)
81
- return () => {
82
- window.removeEventListener('resize', reflow)
83
- window.removeEventListener('scroll', reflow, true)
84
- window.removeEventListener('keydown', onKey)
85
- }
86
- })
87
-
88
- // Focus trap for the duration the tour is open, from the shared primitive
89
- // (same one SvModal/SvDrawer use): traps Tab within the popover and restores
90
- // focus to whatever triggered the tour once it closes.
91
- $effect(() => {
92
- if (!open || !popEl) return
93
- const trap = createFocusTrap(popEl, {
94
- initialFocus: () => popEl?.querySelector<HTMLElement>('.sv-tour__next') ?? null,
95
- })
96
- trap.activate()
97
- return () => trap.release()
98
- })
99
-
100
- const POP_W = 300
101
- // Measured popover height, so placement can keep the WHOLE popover on-screen
102
- // (long content + tall targets used to push it off the top).
103
- let popH = $state(200)
104
- const pop = $derived.by(() => {
105
- if (typeof window === 'undefined' || !rect) {
106
- return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
107
- }
108
- const vw = window.innerWidth
109
- const vh = window.innerHeight
110
- const gap = 12
111
- const h = popH || 200
112
- const clampTop = (t: number) => Math.max(gap, Math.min(t, vh - h - gap))
113
- const clampLeft = (l: number) => Math.max(gap, Math.min(l, vw - POP_W - gap))
114
- // Prefer directly below the target, then directly above - but only when the
115
- // target is short enough to leave room for the whole popover.
116
- if (vh - rect.bottom >= h + gap) {
117
- return { top: `${rect.bottom + 10}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'bottom' as const }
118
- }
119
- if (rect.top >= h + gap) {
120
- return { top: `${clampTop(rect.top - 10 - h)}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'top' as const }
121
- }
122
- // Tall target (a full-height rail / canvas / inspector): sit BESIDE it,
123
- // vertically centred on the target, on whichever side has room.
124
- const top = clampTop(rect.top + rect.height / 2 - h / 2)
125
- if (vw - rect.right >= POP_W + gap) return { top: `${top}px`, left: `${rect.right + 10}px`, transform: 'none', place: 'center' as const }
126
- if (rect.left >= POP_W + gap) return { top: `${top}px`, left: `${rect.left - POP_W - 10}px`, transform: 'none', place: 'center' as const }
127
- // No side room either - centre horizontally (still fully visible).
128
- return { top: `${top}px`, left: `${clampLeft((vw - POP_W) / 2)}px`, transform: 'none', place: 'center' as const }
129
- })
130
- </script>
131
-
132
- {#if open && step}
133
- <div class="sv-tour" use:portalToBody>
134
- {#if rect}
135
- <div
136
- class="sv-tour__spot"
137
- style:top={`${rect.top - 6}px`}
138
- style:left={`${rect.left - 6}px`}
139
- style:width={`${rect.width + 12}px`}
140
- style:height={`${rect.height + 12}px`}
141
- ></div>
142
- {:else}
143
- <div class="sv-tour__backdrop"></div>
144
- {/if}
145
-
146
- <div
147
- bind:this={popEl}
148
- bind:clientHeight={popH}
149
- class="sv-tour__pop sv-tour__pop--{pop.place}"
150
- style:top={pop.top}
151
- style:left={pop.left}
152
- style:transform={pop.transform}
153
- role="dialog"
154
- aria-modal="true"
155
- aria-label={step.title ?? 'Tour step'}
156
- >
157
- {#if step.image}
158
- <div class="sv-tour__media">
159
- <!-- A step's `image` is either a URL (rendered as an img above) or
160
- inline SVG markup the app author wrote for its own tour - never
161
- user input, so rendering it as markup is the intent. -->
162
- <!-- eslint-disable-next-line svelte/no-at-html-tags -->
163
- {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
164
- </div>
165
- {/if}
166
- {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
167
- <div class="sv-tour__body">{step.content}</div>
168
- <div class="sv-tour__foot">
169
- <span class="sv-tour__count">{index + 1} / {steps.length}</span>
170
- <div class="sv-tour__btns">
171
- <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
172
- {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
173
- <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
174
- </div>
175
- </div>
176
- </div>
177
- </div>
178
- {/if}
179
-
180
- <style>
181
- :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
182
- :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
183
- :global(.sv-tour__spot) {
184
- position: fixed; border-radius: 8px; pointer-events: none;
185
- box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
186
- }
187
- :global(.sv-tour__pop) {
188
- position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
189
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
190
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
191
- box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
192
- animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
193
- }
194
- @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
195
- :global(.sv-tour__pop--top) { animation: none; }
196
- :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
197
- :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
198
- :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
199
- :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
200
- :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
201
- :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
202
- :global(.sv-tour__btns) { display: flex; gap: 6px; }
203
- :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
204
- font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 7px; cursor: pointer; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
205
- }
206
- :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
207
- :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
208
- </style>
1
+ <script lang="ts" module>
2
+ export type { TourStep } from './ui-app.types'
3
+ </script>
4
+
5
+ <script lang="ts">
6
+ /**
7
+ * SvTour - a guided product tour / onboarding: it spotlights each step's target
8
+ * element (a dimmed backdrop with a cut-out), anchors a popover with the step's
9
+ * title/content near it, and steps Back / Next / Done. Arrow keys navigate,
10
+ * Escape skips. Portalled to <body>. Controlled via `open`.
11
+ *
12
+ * ```svelte
13
+ * <SvTour bind:open steps={[
14
+ * { target: '#new-btn', title: 'Create', content: 'Start here.' },
15
+ * { target: '.grid', title: 'Your data', content: 'It shows up here.' },
16
+ * ]} />
17
+ * ```
18
+ */
19
+ import type { TourStep } from './ui-app.types'
20
+ import { portalToBody } from './popover'
21
+ import { createFocusTrap } from './a11y/focus-trap'
22
+ import type { EditorDir } from './editor-contract'
23
+
24
+ type Props = {
25
+ steps: ReadonlyArray<TourStep>
26
+ open?: boolean
27
+ onFinish?: () => void
28
+ onSkip?: () => void
29
+ onStep?: (index: number) => void
30
+ /** Text direction; under `'rtl'` the Left/Right advance/back keys swap. */
31
+ dir?: EditorDir
32
+ }
33
+
34
+ let { steps, open = $bindable(false), onFinish, onSkip, onStep, dir }: Props = $props()
35
+
36
+ let index = $state(0)
37
+ let rect = $state<DOMRect | null>(null)
38
+ let popEl = $state<HTMLDivElement | null>(null)
39
+ const step = $derived(steps[index])
40
+
41
+ function targetEl(): HTMLElement | null {
42
+ const t = step?.target
43
+ if (!t) return null
44
+ return typeof t === 'string' ? document.querySelector<HTMLElement>(t) : t
45
+ }
46
+ function measure() {
47
+ const el = targetEl()
48
+ el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
49
+ rect = el ? el.getBoundingClientRect() : null
50
+ }
51
+ // Move focus into the popover on open + on every step change (its Next button
52
+ // is the sensible default target); the Tab trap (below) keeps it there.
53
+ function focusPopover() {
54
+ const btn = popEl?.querySelector<HTMLElement>('.sv-tour__next')
55
+ ;(btn ?? popEl)?.focus()
56
+ }
57
+ function goto(i: number) {
58
+ index = Math.max(0, Math.min(i, steps.length - 1))
59
+ onStep?.(index)
60
+ queueMicrotask(() => { measure(); focusPopover() })
61
+ }
62
+ function next() { if (index >= steps.length - 1) finish(); else goto(index + 1) }
63
+ function back() { goto(index - 1) }
64
+ function finish() { open = false; onFinish?.() }
65
+ function skip() { open = false; onSkip?.() }
66
+
67
+ $effect(() => {
68
+ if (!open) return
69
+ index = 0
70
+ queueMicrotask(() => { measure(); focusPopover() })
71
+ const reflow = () => measure()
72
+ window.addEventListener('resize', reflow)
73
+ window.addEventListener('scroll', reflow, true)
74
+ const rtl = dir === 'rtl'
75
+ const onKey = (e: KeyboardEvent) => {
76
+ if (e.key === 'Escape') { e.preventDefault(); skip() }
77
+ else if (e.key === 'ArrowRight') { e.preventDefault(); (rtl ? back : next)() }
78
+ else if (e.key === 'ArrowLeft') { e.preventDefault(); (rtl ? next : back)() }
79
+ }
80
+ window.addEventListener('keydown', onKey)
81
+ return () => {
82
+ window.removeEventListener('resize', reflow)
83
+ window.removeEventListener('scroll', reflow, true)
84
+ window.removeEventListener('keydown', onKey)
85
+ }
86
+ })
87
+
88
+ // Focus trap for the duration the tour is open, from the shared primitive
89
+ // (same one SvModal/SvDrawer use): traps Tab within the popover and restores
90
+ // focus to whatever triggered the tour once it closes.
91
+ $effect(() => {
92
+ if (!open || !popEl) return
93
+ const trap = createFocusTrap(popEl, {
94
+ initialFocus: () => popEl?.querySelector<HTMLElement>('.sv-tour__next') ?? null,
95
+ })
96
+ trap.activate()
97
+ return () => trap.release()
98
+ })
99
+
100
+ const POP_W = 300
101
+ // Measured popover height, so placement can keep the WHOLE popover on-screen
102
+ // (long content + tall targets used to push it off the top).
103
+ let popH = $state(200)
104
+ const pop = $derived.by(() => {
105
+ if (typeof window === 'undefined' || !rect) {
106
+ return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
107
+ }
108
+ const vw = window.innerWidth
109
+ const vh = window.innerHeight
110
+ const gap = 12
111
+ const h = popH || 200
112
+ const clampTop = (t: number) => Math.max(gap, Math.min(t, vh - h - gap))
113
+ const clampLeft = (l: number) => Math.max(gap, Math.min(l, vw - POP_W - gap))
114
+ // Prefer directly below the target, then directly above - but only when the
115
+ // target is short enough to leave room for the whole popover.
116
+ if (vh - rect.bottom >= h + gap) {
117
+ return { top: `${rect.bottom + 10}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'bottom' as const }
118
+ }
119
+ if (rect.top >= h + gap) {
120
+ return { top: `${clampTop(rect.top - 10 - h)}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'top' as const }
121
+ }
122
+ // Tall target (a full-height rail / canvas / inspector): sit BESIDE it,
123
+ // vertically centred on the target, on whichever side has room.
124
+ const top = clampTop(rect.top + rect.height / 2 - h / 2)
125
+ if (vw - rect.right >= POP_W + gap) return { top: `${top}px`, left: `${rect.right + 10}px`, transform: 'none', place: 'center' as const }
126
+ if (rect.left >= POP_W + gap) return { top: `${top}px`, left: `${rect.left - POP_W - 10}px`, transform: 'none', place: 'center' as const }
127
+ // No side room either - centre horizontally (still fully visible).
128
+ return { top: `${top}px`, left: `${clampLeft((vw - POP_W) / 2)}px`, transform: 'none', place: 'center' as const }
129
+ })
130
+ </script>
131
+
132
+ {#if open && step}
133
+ <div class="sv-tour" use:portalToBody>
134
+ {#if rect}
135
+ <div
136
+ class="sv-tour__spot"
137
+ style:top={`${rect.top - 6}px`}
138
+ style:left={`${rect.left - 6}px`}
139
+ style:width={`${rect.width + 12}px`}
140
+ style:height={`${rect.height + 12}px`}
141
+ ></div>
142
+ {:else}
143
+ <div class="sv-tour__backdrop"></div>
144
+ {/if}
145
+
146
+ <div
147
+ bind:this={popEl}
148
+ bind:clientHeight={popH}
149
+ class="sv-tour__pop sv-tour__pop--{pop.place}"
150
+ style:top={pop.top}
151
+ style:left={pop.left}
152
+ style:transform={pop.transform}
153
+ role="dialog"
154
+ aria-modal="true"
155
+ aria-label={step.title ?? 'Tour step'}
156
+ >
157
+ {#if step.image}
158
+ <div class="sv-tour__media">
159
+ <!-- A step's `image` is either a URL (rendered as an img above) or
160
+ inline SVG markup the app author wrote for its own tour - never
161
+ user input, so rendering it as markup is the intent. -->
162
+ <!-- eslint-disable-next-line svelte/no-at-html-tags -->
163
+ {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
164
+ </div>
165
+ {/if}
166
+ {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
167
+ <div class="sv-tour__body">{step.content}</div>
168
+ <div class="sv-tour__foot">
169
+ <span class="sv-tour__count">{index + 1} / {steps.length}</span>
170
+ <div class="sv-tour__btns">
171
+ <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
172
+ {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
173
+ <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ {/if}
179
+
180
+ <style>
181
+ :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
182
+ :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
183
+ :global(.sv-tour__spot) {
184
+ position: fixed; border-radius: 8px; pointer-events: none;
185
+ box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
186
+ }
187
+ :global(.sv-tour__pop) {
188
+ position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
189
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
190
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
191
+ box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
192
+ animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
193
+ }
194
+ @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
195
+ :global(.sv-tour__pop--top) { animation: none; }
196
+ :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
197
+ :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
198
+ :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
199
+ :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
200
+ :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
201
+ :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
202
+ :global(.sv-tour__btns) { display: flex; gap: 6px; }
203
+ :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
204
+ font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 7px; cursor: pointer; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
205
+ }
206
+ :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
207
+ :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
208
+ </style>