@svgrid/grid 2.1.22 → 2.2.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 (295) hide show
  1. package/README.md +9 -2
  2. package/dist/DockNodeView.svelte +306 -0
  3. package/dist/DockNodeView.svelte.d.ts +7 -0
  4. package/dist/DockPopoutHost.svelte +17 -0
  5. package/dist/DockPopoutHost.svelte.d.ts +14 -0
  6. package/dist/FlexRender.svelte +96 -96
  7. package/dist/GridFooter.svelte +178 -178
  8. package/dist/GridMenus.svelte +83 -3
  9. package/dist/SvAutoComplete.svelte +5 -3
  10. package/dist/SvCarousel.svelte +141 -163
  11. package/dist/SvColorInput.svelte +187 -186
  12. package/dist/SvColorInput.svelte.d.ts +1 -1
  13. package/dist/SvComboBox.svelte +7 -3
  14. package/dist/SvCommand.svelte +28 -85
  15. package/dist/SvContextMenu.svelte +116 -116
  16. package/dist/SvCountryInput.svelte +1 -1
  17. package/dist/SvDateRangeInput.svelte +1 -1
  18. package/dist/SvDateTimePicker.svelte +9 -3
  19. package/dist/SvDateTimePicker.svelte.d.ts +3 -0
  20. package/dist/SvDockLayout.svelte +244 -0
  21. package/dist/SvDockLayout.svelte.d.ts +77 -0
  22. package/dist/SvDockManager.svelte +922 -0
  23. package/dist/SvDockManager.svelte.d.ts +106 -0
  24. package/dist/SvDrawer.svelte +250 -228
  25. package/dist/SvDrawer.svelte.d.ts +4 -0
  26. package/dist/SvDropDownList.svelte +85 -13
  27. package/dist/SvDropDownList.svelte.d.ts +3 -0
  28. package/dist/SvField.svelte +21 -4
  29. package/dist/SvField.svelte.d.ts +1 -0
  30. package/dist/SvForm.svelte +201 -91
  31. package/dist/SvForm.svelte.d.ts +15 -22
  32. package/dist/SvGrid.controller.svelte.d.ts +32 -1
  33. package/dist/SvGrid.controller.svelte.js +156 -27
  34. package/dist/SvGrid.css +193 -5
  35. package/dist/SvGrid.svelte +3131 -2786
  36. package/dist/SvGrid.types.d.ts +452 -1
  37. package/dist/SvGridBoard.svelte +2339 -2339
  38. package/dist/SvGridChart.svelte +1724 -1724
  39. package/dist/SvGridChartPanel.svelte +485 -485
  40. package/dist/SvGridDropdown.svelte +689 -682
  41. package/dist/SvGridSelect.svelte +1 -0
  42. package/dist/SvGroupCell.svelte +109 -109
  43. package/dist/SvListBox.svelte +36 -14
  44. package/dist/SvMaskedInput.svelte +4 -3
  45. package/dist/SvMaskedInput.svelte.d.ts +1 -1
  46. package/dist/SvMenu.svelte +124 -124
  47. package/dist/SvMenuList.svelte +117 -165
  48. package/dist/SvMenuList.svelte.d.ts +2 -13
  49. package/dist/SvModal.svelte +12 -29
  50. package/dist/SvMultiSelect.svelte +1 -0
  51. package/dist/SvNumberInput.svelte +131 -130
  52. package/dist/SvNumberInput.svelte.d.ts +1 -1
  53. package/dist/SvOtpInput.svelte +158 -158
  54. package/dist/SvPagination.svelte +18 -18
  55. package/dist/SvPasswordInput.svelte +3 -2
  56. package/dist/SvPasswordInput.svelte.d.ts +1 -1
  57. package/dist/SvPhoneInput.svelte +3 -2
  58. package/dist/SvPhoneInput.svelte.d.ts +1 -1
  59. package/dist/SvPopover.svelte +139 -139
  60. package/dist/SvRowGroupPanel.svelte +170 -170
  61. package/dist/SvScrollArea.svelte +61 -61
  62. package/dist/SvStepper.svelte +6 -9
  63. package/dist/SvTagsInput.svelte +3 -2
  64. package/dist/SvTagsInput.svelte.d.ts +1 -1
  65. package/dist/SvTooltip.svelte +127 -138
  66. package/dist/SvTour.svelte +204 -176
  67. package/dist/SvTree.svelte +377 -377
  68. package/dist/SvTreeSelect.svelte +230 -229
  69. package/dist/build-api.js +76 -54
  70. package/dist/cdn/svgrid.js +10913 -6450
  71. package/dist/cdn/svgrid.svelte-external.js +9628 -5481
  72. package/dist/chart-export.js +8 -8
  73. package/dist/columns.js +6 -0
  74. package/dist/conditional-formatting.d.ts +67 -3
  75. package/dist/conditional-formatting.js +124 -17
  76. package/dist/createCarousel.svelte.d.ts +72 -0
  77. package/dist/createCarousel.svelte.js +80 -0
  78. package/dist/createCommand.svelte.d.ts +62 -0
  79. package/dist/createCommand.svelte.js +109 -0
  80. package/dist/createForm.svelte.d.ts +62 -0
  81. package/dist/createForm.svelte.js +374 -0
  82. package/dist/createMenu.svelte.d.ts +88 -0
  83. package/dist/createMenu.svelte.js +153 -0
  84. package/dist/createOverlay.svelte.d.ts +38 -0
  85. package/dist/createOverlay.svelte.js +68 -0
  86. package/dist/createPagination.d.ts +74 -0
  87. package/dist/createPagination.js +71 -0
  88. package/dist/createPopoverSelect.svelte.js +6 -12
  89. package/dist/createStepper.d.ts +44 -0
  90. package/dist/createStepper.js +26 -0
  91. package/dist/createTooltip.svelte.d.ts +32 -0
  92. package/dist/createTooltip.svelte.js +61 -0
  93. package/dist/datetime/timezone.d.ts +36 -0
  94. package/dist/datetime/timezone.js +110 -0
  95. package/dist/dock-context.d.ts +52 -0
  96. package/dist/dock-context.js +1 -0
  97. package/dist/dock-manager-model.d.ts +136 -0
  98. package/dist/dock-manager-model.js +514 -0
  99. package/dist/dock-model.d.ts +105 -0
  100. package/dist/dock-model.js +288 -0
  101. package/dist/dock-popout.d.ts +30 -0
  102. package/dist/dock-popout.js +81 -0
  103. package/dist/editor-contract.d.ts +2 -0
  104. package/dist/filter-operators.d.ts +6 -0
  105. package/dist/filter-operators.js +35 -2
  106. package/dist/filtering/excel-filters.d.ts +18 -1
  107. package/dist/filtering/excel-filters.js +56 -0
  108. package/dist/form-field.d.ts +73 -0
  109. package/dist/form-field.js +15 -0
  110. package/dist/index.d.ts +25 -5
  111. package/dist/index.js +40 -4
  112. package/dist/list-nav.d.ts +18 -0
  113. package/dist/list-nav.js +30 -0
  114. package/dist/list-option.d.ts +2 -0
  115. package/dist/menu-item.d.ts +20 -0
  116. package/dist/menu-item.js +1 -0
  117. package/dist/menus.d.ts +5 -0
  118. package/dist/menus.js +68 -16
  119. package/dist/panel-resize.d.ts +25 -0
  120. package/dist/panel-resize.js +40 -0
  121. package/dist/popover.d.ts +29 -3
  122. package/dist/popover.js +22 -6
  123. package/dist/recurrence.d.ts +33 -7
  124. package/dist/recurrence.js +151 -13
  125. package/dist/row-drag.d.ts +8 -0
  126. package/dist/row-drag.js +11 -0
  127. package/dist/scheduler-ical.d.ts +30 -0
  128. package/dist/scheduler-ical.js +180 -0
  129. package/dist/scheduler-model.d.ts +269 -0
  130. package/dist/scheduler-model.js +602 -0
  131. package/dist/scheduler-view.svelte.d.ts +22 -0
  132. package/dist/scheduler-view.svelte.js +13 -0
  133. package/dist/spreadsheet.js +20 -12
  134. package/dist/ui-app.types.d.ts +3 -0
  135. package/package.json +14 -10
  136. package/src/DockNodeView.svelte +306 -0
  137. package/src/DockPopoutHost.svelte +17 -0
  138. package/src/FlexRender.svelte +96 -96
  139. package/src/GridFooter.svelte +178 -178
  140. package/src/GridMenus.svelte +83 -3
  141. package/src/SvAutoComplete.svelte +5 -3
  142. package/src/SvCarousel.svelte +141 -163
  143. package/src/SvCarousel.test.ts +68 -0
  144. package/src/SvColorInput.svelte +187 -186
  145. package/src/SvComboBox.svelte +7 -3
  146. package/src/SvCommand.svelte +28 -85
  147. package/src/SvCommand.test.ts +78 -0
  148. package/src/SvContextMenu.svelte +116 -116
  149. package/src/SvCountryInput.svelte +1 -1
  150. package/src/SvDateRangeInput.svelte +1 -1
  151. package/src/SvDateTimePicker.svelte +9 -3
  152. package/src/SvDockLayout.svelte +244 -0
  153. package/src/SvDockManager.svelte +922 -0
  154. package/src/SvDrawer.svelte +250 -228
  155. package/src/SvDropDownList.svelte +85 -13
  156. package/src/SvField.svelte +21 -4
  157. package/src/SvForm.svelte +201 -91
  158. package/src/SvForm.test.ts +299 -0
  159. package/src/SvGrid.controller.svelte.ts +3158 -3034
  160. package/src/SvGrid.css +193 -5
  161. package/src/SvGrid.svelte +3131 -2786
  162. package/src/SvGrid.types.ts +1489 -1027
  163. package/src/SvGridBoard.svelte +2339 -2339
  164. package/src/SvGridChart.svelte +1724 -1724
  165. package/src/SvGridChartPanel.svelte +485 -485
  166. package/src/SvGridDropdown.svelte +689 -682
  167. package/src/SvGridSelect.svelte +1 -0
  168. package/src/SvGroupCell.svelte +109 -109
  169. package/src/SvListBox.svelte +36 -14
  170. package/src/SvMaskedInput.svelte +4 -3
  171. package/src/SvMenu.svelte +124 -124
  172. package/src/SvMenu.test.ts +97 -73
  173. package/src/SvMenuList.svelte +117 -165
  174. package/src/SvModal.svelte +12 -29
  175. package/src/SvModal.test.ts +82 -0
  176. package/src/SvMultiSelect.svelte +1 -0
  177. package/src/SvNumberInput.svelte +131 -130
  178. package/src/SvOtpInput.svelte +158 -158
  179. package/src/SvPagination.svelte +18 -18
  180. package/src/SvPasswordInput.svelte +3 -2
  181. package/src/SvPhoneInput.svelte +3 -2
  182. package/src/SvPopover.svelte +139 -139
  183. package/src/SvRowGroupPanel.svelte +170 -170
  184. package/src/SvScrollArea.svelte +61 -61
  185. package/src/SvStepper.svelte +6 -9
  186. package/src/SvTagsInput.svelte +3 -2
  187. package/src/SvTooltip.svelte +127 -138
  188. package/src/SvTooltip.test.ts +73 -0
  189. package/src/SvTour.svelte +204 -176
  190. package/src/SvTree.svelte +377 -377
  191. package/src/SvTreeSelect.svelte +230 -229
  192. package/src/a11y.contract.test.ts +49 -49
  193. package/src/a11y.test.ts +59 -59
  194. package/src/a11y.ts +61 -61
  195. package/src/build-api.ts +870 -847
  196. package/src/cell-formatting.ts +169 -169
  197. package/src/cell-render.ts +469 -469
  198. package/src/chart-export.ts +201 -201
  199. package/src/chart.ts +2296 -2296
  200. package/src/collaboration.test.ts +104 -104
  201. package/src/collaboration.ts +167 -167
  202. package/src/columns.ts +5 -0
  203. package/src/conditional-formatting.test.ts +104 -0
  204. package/src/conditional-formatting.ts +176 -19
  205. package/src/core.performance.test.ts +30 -30
  206. package/src/core.ts +1111 -1111
  207. package/src/createAutocomplete.svelte.ts +132 -132
  208. package/src/createCarousel.svelte.ts +104 -0
  209. package/src/createCombobox.svelte.ts +179 -179
  210. package/src/createCommand.svelte.ts +125 -0
  211. package/src/createCountryInput.svelte.ts +157 -157
  212. package/src/createDropdownList.svelte.ts +162 -162
  213. package/src/createForm.svelte.ts +333 -0
  214. package/src/createGrid.svelte.ts +42 -42
  215. package/src/createGrid.test.ts +10 -10
  216. package/src/createGridState.svelte.ts +17 -17
  217. package/src/createMenu.svelte.ts +202 -0
  218. package/src/createOverlay.svelte.ts +101 -0
  219. package/src/createPagination.test.ts +65 -0
  220. package/src/createPagination.ts +84 -0
  221. package/src/createPopoverSelect.svelte.ts +206 -210
  222. package/src/createStepper.test.ts +62 -0
  223. package/src/createStepper.ts +61 -0
  224. package/src/createTooltip.svelte.ts +86 -0
  225. package/src/createTree.svelte.ts +319 -319
  226. package/src/datetime/timezone.test.ts +69 -0
  227. package/src/datetime/timezone.ts +134 -0
  228. package/src/dock-context.ts +47 -0
  229. package/src/dock-manager-model.test.ts +275 -0
  230. package/src/dock-manager-model.ts +593 -0
  231. package/src/dock-model.test.ts +163 -0
  232. package/src/dock-model.ts +368 -0
  233. package/src/dock-popout.ts +94 -0
  234. package/src/editing.test.ts +859 -859
  235. package/src/editing.ts +675 -675
  236. package/src/editor-contract.ts +2 -0
  237. package/src/export-data-api.test.ts +126 -126
  238. package/src/export-format.test.ts +107 -107
  239. package/src/export-format.ts +598 -598
  240. package/src/filter-operators.test.ts +59 -0
  241. package/src/filter-operators.ts +35 -2
  242. package/src/filtering/excel-filters.test.ts +86 -1
  243. package/src/filtering/excel-filters.ts +65 -0
  244. package/src/flex-render.ts +3 -3
  245. package/src/form-field.ts +87 -0
  246. package/src/index.ts +623 -469
  247. package/src/keyboard.test.ts +59 -59
  248. package/src/keyboard.ts +97 -97
  249. package/src/list-nav.test.ts +49 -0
  250. package/src/list-nav.ts +29 -0
  251. package/src/list-option.ts +2 -0
  252. package/src/menu-item.ts +21 -0
  253. package/src/menus.test.ts +48 -0
  254. package/src/menus.ts +639 -582
  255. package/src/merge-objects.ts +48 -48
  256. package/src/overlays.test.ts +90 -90
  257. package/src/panel-resize.ts +52 -0
  258. package/src/popover.bounds.test.ts +93 -0
  259. package/src/popover.ts +51 -7
  260. package/src/recurrence.test.ts +88 -1
  261. package/src/recurrence.ts +166 -15
  262. package/src/render-component.ts +28 -28
  263. package/src/row-drag.ts +10 -0
  264. package/src/scheduler-ical.test.ts +68 -0
  265. package/src/scheduler-ical.ts +180 -0
  266. package/src/scheduler-model.test.ts +546 -0
  267. package/src/scheduler-model.ts +853 -0
  268. package/src/scheduler-view.svelte.ts +33 -0
  269. package/src/selection.test.ts +754 -754
  270. package/src/selection.ts +600 -600
  271. package/src/server-data-source.test.ts +289 -289
  272. package/src/server-data-source.ts +413 -413
  273. package/src/sparkline.test.ts +68 -68
  274. package/src/sparkline.ts +169 -169
  275. package/src/spreadsheet.test.ts +489 -489
  276. package/src/spreadsheet.ts +312 -304
  277. package/src/static-functions.ts +11 -11
  278. package/src/subscribe.ts +38 -38
  279. package/src/svgrid-wrapper.types.ts +501 -501
  280. package/src/svgrid.behavior.test.ts +706 -706
  281. package/src/svgrid.charting.test.ts +527 -527
  282. package/src/svgrid.effect-driven-filter.svelte.test.ts +116 -0
  283. package/src/svgrid.features.test.ts +157 -157
  284. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  285. package/src/svgrid.wrapper.test.ts +40 -40
  286. package/src/test-setup.ts +62 -62
  287. package/src/themes/index.ts +159 -159
  288. package/src/ui-app.types.ts +3 -0
  289. package/src/virtual.test.ts +6 -4
  290. package/src/virtualization/column-virtualizer.test.ts +27 -27
  291. package/src/virtualization/column-virtualizer.ts +30 -30
  292. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  293. package/src/virtualization/types.ts +30 -30
  294. package/src/virtualization/virtualizer.test.ts +47 -47
  295. package/src/virtualization/virtualizer.ts +296 -296
package/src/SvTour.svelte CHANGED
@@ -1,176 +1,204 @@
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
- const pop = $derived.by(() => {
102
- if (typeof window === 'undefined' || !rect) {
103
- return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
104
- }
105
- const left = Math.max(12, Math.min(rect.left, window.innerWidth - POP_W - 12))
106
- const below = window.innerHeight - rect.bottom
107
- if (below > 190) return { top: `${rect.bottom + 10}px`, left: `${left}px`, transform: 'none', place: 'bottom' as const }
108
- return { top: `${rect.top - 10}px`, left: `${left}px`, transform: 'translateY(-100%)', place: 'top' as const }
109
- })
110
- </script>
111
-
112
- {#if open && step}
113
- <div class="sv-tour" use:portalToBody>
114
- {#if rect}
115
- <div
116
- class="sv-tour__spot"
117
- style:top={`${rect.top - 6}px`}
118
- style:left={`${rect.left - 6}px`}
119
- style:width={`${rect.width + 12}px`}
120
- style:height={`${rect.height + 12}px`}
121
- ></div>
122
- {:else}
123
- <div class="sv-tour__backdrop"></div>
124
- {/if}
125
-
126
- <div
127
- bind:this={popEl}
128
- class="sv-tour__pop sv-tour__pop--{pop.place}"
129
- style:top={pop.top}
130
- style:left={pop.left}
131
- style:transform={pop.transform}
132
- role="dialog"
133
- aria-modal="true"
134
- aria-label={step.title ?? 'Tour step'}
135
- >
136
- {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
137
- <div class="sv-tour__body">{step.content}</div>
138
- <div class="sv-tour__foot">
139
- <span class="sv-tour__count">{index + 1} / {steps.length}</span>
140
- <div class="sv-tour__btns">
141
- <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
142
- {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
143
- <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
144
- </div>
145
- </div>
146
- </div>
147
- </div>
148
- {/if}
149
-
150
- <style>
151
- :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
152
- :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
153
- :global(.sv-tour__spot) {
154
- position: fixed; border-radius: 8px; pointer-events: none;
155
- box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
156
- }
157
- :global(.sv-tour__pop) {
158
- position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
159
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
160
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
161
- box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
162
- animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
163
- }
164
- @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
165
- :global(.sv-tour__pop--top) { animation: none; }
166
- :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
167
- :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
168
- :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
169
- :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
170
- :global(.sv-tour__btns) { display: flex; gap: 6px; }
171
- :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
172
- 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);
173
- }
174
- :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
175
- :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
176
- </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
+ {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
160
+ </div>
161
+ {/if}
162
+ {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
163
+ <div class="sv-tour__body">{step.content}</div>
164
+ <div class="sv-tour__foot">
165
+ <span class="sv-tour__count">{index + 1} / {steps.length}</span>
166
+ <div class="sv-tour__btns">
167
+ <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
168
+ {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
169
+ <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ {/if}
175
+
176
+ <style>
177
+ :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
178
+ :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
179
+ :global(.sv-tour__spot) {
180
+ position: fixed; border-radius: 8px; pointer-events: none;
181
+ box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
182
+ }
183
+ :global(.sv-tour__pop) {
184
+ position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
185
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
186
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
187
+ box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
188
+ animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
189
+ }
190
+ @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
191
+ :global(.sv-tour__pop--top) { animation: none; }
192
+ :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
193
+ :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
194
+ :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
195
+ :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
196
+ :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
197
+ :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
198
+ :global(.sv-tour__btns) { display: flex; gap: 6px; }
199
+ :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
200
+ 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);
201
+ }
202
+ :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
203
+ :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
204
+ </style>