@svgrid/grid 2.6.23 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/CHANGELOG.md +88 -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 +744 -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-BzWXQjv3.js → GridMenus-DMihUtma.js} +3 -3
  56. package/dist/cdn/{GridMenus-xr_rHx8F.js → GridMenus-nmNDj1a3.js} +3 -3
  57. package/dist/cdn/{SvDateRangeInput-DMLKmGEc.js → SvDateRangeInput-Bh0A0JkF.js} +1 -1
  58. package/dist/cdn/{SvDateRangeInput-CaOuMs8O.js → SvDateRangeInput-DflbiP7N.js} +1 -1
  59. package/dist/cdn/{SvDateTimePicker-sonaH0oh.js → SvDateTimePicker-BWwpfB_o.js} +1 -1
  60. package/dist/cdn/{SvDateTimePicker-CCbDZNZB.js → SvDateTimePicker-Bivn8dAP.js} +1 -1
  61. package/dist/cdn/{SvGridCellEditor-BAPSC7EL.js → SvGridCellEditor-AXL8cHGO.js} +1 -1
  62. package/dist/cdn/{SvGridCellEditor-BwzmUWtL.js → SvGridCellEditor-Ba7rY3eu.js} +1 -1
  63. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  64. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  65. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  66. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  67. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  68. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  69. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  70. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  71. package/dist/cdn/{date-format-BnnHlqGw.js → date-format-CcP1tafP.js} +2 -2
  72. package/dist/cdn/{date-format-BNii4zeD.js → date-format-DZT7T1wf.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-skQN5eqh.js → src-B_YS5AOc.js} +45 -45
  75. package/dist/cdn/{src-DGo7IHug.js → src-DYXXpuSk.js} +44 -44
  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/row-drag-touch.d.ts +5 -1
  80. package/dist/row-drag-touch.js +15 -4
  81. package/dist/row-drag.js +7 -3
  82. package/package.json +11 -11
  83. package/src/FlexRender.svelte +96 -96
  84. package/src/GridFooter.svelte +181 -181
  85. package/src/SvAutoComplete.svelte +169 -169
  86. package/src/SvAvatar.svelte +75 -75
  87. package/src/SvCalendar.svelte +503 -503
  88. package/src/SvCalendar.test.ts +226 -226
  89. package/src/SvCarousel.svelte +141 -141
  90. package/src/SvCheckBox.svelte +102 -102
  91. package/src/SvCircularProgress.svelte +109 -109
  92. package/src/SvColorInput.svelte +181 -181
  93. package/src/SvComboBox.svelte +279 -279
  94. package/src/SvContextMenu.svelte +116 -116
  95. package/src/SvCountryInput.svelte +163 -163
  96. package/src/SvDrawer.svelte +254 -254
  97. package/src/SvDropDownList.svelte +378 -378
  98. package/src/SvDurationInput.svelte +126 -126
  99. package/src/SvField.svelte +293 -293
  100. package/src/SvForm.svelte +437 -437
  101. package/src/SvForm.test.ts +411 -411
  102. package/src/SvGrid.types.ts +2092 -2092
  103. package/src/SvGridCellEditor.svelte +744 -744
  104. package/src/SvGridChart.svelte +1716 -1716
  105. package/src/SvGridChartPanel.svelte +485 -485
  106. package/src/SvGridChartView.svelte +70 -70
  107. package/src/SvGridDropdown.svelte +728 -728
  108. package/src/SvGridSelect.svelte +270 -270
  109. package/src/SvGroupCell.svelte +116 -116
  110. package/src/SvListBox.svelte +334 -334
  111. package/src/SvMaskedInput.svelte +122 -122
  112. package/src/SvMenu.svelte +124 -124
  113. package/src/SvMenu.test.ts +97 -97
  114. package/src/SvMenuList.svelte +146 -146
  115. package/src/SvMultiSelect.svelte +293 -293
  116. package/src/SvNumberInput.svelte +172 -172
  117. package/src/SvOtpInput.svelte +158 -158
  118. package/src/SvPasswordInput.svelte +151 -151
  119. package/src/SvPhoneInput.svelte +133 -133
  120. package/src/SvPopover.svelte +197 -197
  121. package/src/SvProgress.svelte +116 -116
  122. package/src/SvRadioGroup.svelte +107 -107
  123. package/src/SvRating.svelte +112 -112
  124. package/src/SvResult.svelte +73 -73
  125. package/src/SvRichText.svelte +211 -211
  126. package/src/SvRowGroupPanel.svelte +170 -170
  127. package/src/SvScrollArea.svelte +61 -61
  128. package/src/SvSlider.svelte +203 -203
  129. package/src/SvSwitchButton.svelte +108 -108
  130. package/src/SvTagsInput.svelte +115 -115
  131. package/src/SvTextInput.svelte +147 -147
  132. package/src/SvTimePicker.svelte +245 -245
  133. package/src/SvToaster.svelte +159 -159
  134. package/src/SvToaster.test.ts +95 -95
  135. package/src/SvToggleButton.svelte +85 -85
  136. package/src/SvTooltip.svelte +161 -161
  137. package/src/SvTour.svelte +208 -208
  138. package/src/SvTree.svelte +444 -444
  139. package/src/SvTreeSelect.svelte +239 -239
  140. package/src/a11y/dismissable.test.ts +119 -119
  141. package/src/a11y/dismissable.ts +114 -114
  142. package/src/a11y.contract.test.ts +49 -49
  143. package/src/a11y.test.ts +59 -59
  144. package/src/a11y.ts +61 -61
  145. package/src/ai.test.ts +502 -502
  146. package/src/ai.ts +1419 -1419
  147. package/src/build-api.coverage.test.ts +633 -633
  148. package/src/build-api.ts +846 -846
  149. package/src/builtin-editors.grid.test.ts +83 -83
  150. package/src/cell-formatting.ts +171 -171
  151. package/src/cell-render.test.ts +513 -513
  152. package/src/cell-render.ts +496 -496
  153. package/src/cell-values.ts +148 -148
  154. package/src/chart-export.ts +202 -202
  155. package/src/chart-view.svelte.ts +36 -36
  156. package/src/chart.ts +2321 -2321
  157. package/src/collaboration.test.ts +104 -104
  158. package/src/collaboration.ts +167 -167
  159. package/src/column-groups.ts +78 -78
  160. package/src/core.performance.test.ts +30 -30
  161. package/src/core.ts +1865 -1865
  162. package/src/createAutocomplete.svelte.ts +132 -132
  163. package/src/createCombobox.svelte.ts +191 -191
  164. package/src/createCountryInput.svelte.ts +157 -157
  165. package/src/createDropdownList.svelte.ts +168 -168
  166. package/src/createForm.svelte.ts +386 -386
  167. package/src/createGrid.svelte.ts +42 -42
  168. package/src/createGrid.test.ts +10 -10
  169. package/src/createGridState.svelte.ts +17 -17
  170. package/src/createListbox.svelte.ts +250 -250
  171. package/src/createMenu.svelte.ts +224 -224
  172. package/src/createPopoverSelect.svelte.ts +213 -213
  173. package/src/createSlider.svelte.ts +191 -191
  174. package/src/createTooltip.svelte.ts +144 -144
  175. package/src/createTree.svelte.ts +322 -322
  176. package/src/datetime/date-core.ts +206 -206
  177. package/src/datetime/date-restrict.ts +61 -61
  178. package/src/datetime/timezone.ts +135 -135
  179. package/src/dock-manager-model.ts +596 -596
  180. package/src/dock-model.ts +374 -374
  181. package/src/editing.test.ts +974 -974
  182. package/src/editing.ts +609 -609
  183. package/src/editor-contract.ts +171 -171
  184. package/src/editor-registry.grid.test.ts +144 -144
  185. package/src/editor-registry.ts +122 -122
  186. package/src/export-data-api.test.ts +126 -126
  187. package/src/export-format.test.ts +107 -107
  188. package/src/export-format.ts +601 -601
  189. package/src/filter-operators.ts +160 -160
  190. package/src/filtering/excel-filters.ts +325 -325
  191. package/src/flex-render.ts +3 -3
  192. package/src/form-field.ts +127 -127
  193. package/src/group-display.test.ts +167 -167
  194. package/src/group-display.ts +200 -200
  195. package/src/headless.ts +87 -87
  196. package/src/js-scroller.svelte.ts +173 -173
  197. package/src/keyboard-handlers.ts +270 -270
  198. package/src/keyboard.test.ts +59 -59
  199. package/src/keyboard.ts +97 -97
  200. package/src/list-nav.test.ts +49 -49
  201. package/src/list-nav.ts +29 -29
  202. package/src/list-option.test.ts +56 -56
  203. package/src/list-option.ts +179 -179
  204. package/src/menus.ts +597 -597
  205. package/src/merge-objects.ts +48 -48
  206. package/src/overlays.test.ts +90 -90
  207. package/src/positioning.ts +268 -268
  208. package/src/render-component.ts +28 -28
  209. package/src/row-drag-touch.ts +20 -5
  210. package/src/row-drag.test.ts +401 -353
  211. package/src/row-drag.ts +419 -415
  212. package/src/row-resize.test.ts +524 -524
  213. package/src/row-resize.ts +228 -228
  214. package/src/scheduler-ical.ts +181 -181
  215. package/src/scheduler-model.test.ts +562 -562
  216. package/src/scheduler-model.ts +873 -873
  217. package/src/selection.test.ts +885 -885
  218. package/src/server-data-source.test.ts +383 -383
  219. package/src/server-data-source.ts +469 -469
  220. package/src/sparkline.test.ts +68 -68
  221. package/src/sparkline.ts +169 -169
  222. package/src/spreadsheet.test.ts +488 -488
  223. package/src/spreadsheet.ts +312 -312
  224. package/src/static-functions.ts +11 -11
  225. package/src/subscribe.ts +38 -38
  226. package/src/summaries.ts +113 -113
  227. package/src/svgrid-wrapper.types.ts +563 -563
  228. package/src/svgrid.async-editor-options.test.ts +273 -273
  229. package/src/svgrid.auto-row-height.test.ts +204 -204
  230. package/src/svgrid.behavior.test.ts +910 -910
  231. package/src/svgrid.charting.test.ts +534 -534
  232. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  233. package/src/svgrid.context-menu.test.ts +147 -147
  234. package/src/svgrid.features.test.ts +157 -157
  235. package/src/svgrid.filter-depth.test.ts +163 -163
  236. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -377
  237. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  238. package/src/svgrid.grand-total.test.ts +188 -188
  239. package/src/svgrid.group-display-mode.test.ts +171 -171
  240. package/src/svgrid.group-footers.test.ts +121 -121
  241. package/src/svgrid.group-pagination.test.ts +153 -153
  242. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  243. package/src/svgrid.tree-data.test.ts +186 -186
  244. package/src/svgrid.wrapper.test.ts +63 -63
  245. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  246. package/src/test-setup.ts +62 -62
  247. package/src/themes/index.ts +288 -288
  248. package/src/toast-store.svelte.ts +250 -250
  249. package/src/toast-store.test.ts +147 -147
  250. package/src/tree-row-model.test.ts +168 -168
  251. package/src/ui-buttons.test.ts +144 -144
  252. package/src/ui-inputs.test.ts +118 -118
  253. package/src/ui-localization.test.ts +113 -113
  254. package/src/ui-range.test.ts +70 -70
  255. package/src/ui-selection.test.ts +155 -155
  256. package/src/ui-tier1.test.ts +142 -142
  257. package/src/virtual.test.ts +88 -88
  258. package/src/virtualization/column-virtualizer.test.ts +27 -27
  259. package/src/virtualization/column-virtualizer.ts +30 -30
  260. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  261. package/src/virtualization/types.ts +30 -30
  262. package/src/virtualization/virtualizer.test.ts +47 -47
  263. package/src/virtualization/virtualizer.ts +322 -322
package/dist/SvDrawer.svelte CHANGED
@@ -1,254 +1,254 @@
1
- <script lang="ts">
2
- /**
3
- * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
4
- * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
5
- * on the shared primitives - `createFocusTrap`, `lockScroll` and
6
- * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
7
- * behaviour is identical to SvModal and nested overlays close top-first.
8
- * Portalled to <body>. Controlled via `open`.
9
- *
10
- * ```svelte
11
- * <SvDrawer bind:open side="right" title="Filters">
12
- * <p>Body</p>
13
- * {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
14
- * </SvDrawer>
15
- * ```
16
- */
17
- import type { Snippet } from 'svelte'
18
- import { untrack } from 'svelte'
19
- import { portalToBody } from './popover'
20
- import { nextEditorId } from './editor-contract'
21
- import { createOverlay } from './createOverlay.svelte'
22
-
23
- /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
24
- * index.ts (a bare type-only module script trips the Svelte/Vite parser). */
25
- type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
26
-
27
- type Props = {
28
- open?: boolean
29
- onClose?: () => void
30
- /** Edge the drawer slides from. Default 'right'. */
31
- side?: DrawerSide
32
- /** Panel size along its axis (width for left/right, height for top/bottom).
33
- * Any CSS length; defaults to a sensible per-axis value. */
34
- size?: string
35
- title?: string
36
- closeOnBackdrop?: boolean
37
- closeOnEsc?: boolean
38
- /** Hide the header close (x) button. */
39
- hideClose?: boolean
40
- /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
41
- * handle, and swipe-down-to-close. Overrides `side`. */
42
- sheet?: boolean
43
- /** Accessible name when there is no visible `title`. */
44
- ariaLabel?: string
45
- /** Fired after the close (exit) animation has finished and the drawer has
46
- * left the DOM. Use it to clear the data the drawer was showing so the
47
- * content stays put while it slides out. */
48
- onClosed?: () => void
49
- children?: Snippet
50
- footer?: Snippet
51
- }
52
-
53
- let {
54
- open = $bindable(false),
55
- onClose,
56
- side = 'right',
57
- size,
58
- title,
59
- closeOnBackdrop = true,
60
- closeOnEsc = true,
61
- hideClose = false,
62
- sheet = false,
63
- ariaLabel,
64
- onClosed,
65
- children,
66
- footer,
67
- }: Props = $props()
68
-
69
- const titleId = nextEditorId('sv-drawer-title')
70
- let dialogEl = $state<HTMLDivElement | null>(null)
71
-
72
- // A sheet is a bottom drawer with mobile affordances.
73
- const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
74
- const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
75
- const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
76
-
77
- function close() { open = false; onClose?.() }
78
-
79
- // Enter/exit animation via CSS @keyframes (the pattern SvModal uses - keyframes
80
- // play on a `use:portalToBody` element; the Svelte `transition:` directive does
81
- // NOT). `show` keeps the panel mounted; the enter keyframe fires on mount, and
82
- // on close we add `is-leaving` (exit keyframe) and unmount + fire `onClosed`
83
- // after the duration. Honors reduced-motion by dropping the hold to 0ms.
84
- const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
85
- const EXIT_MS = 260
86
- let show = $state(false)
87
- let leaving = $state(false)
88
- let leaveTimer: ReturnType<typeof setTimeout> | undefined
89
- $effect(() => {
90
- if (open) {
91
- clearTimeout(leaveTimer)
92
- leaving = false
93
- show = true
94
- return
95
- }
96
- // Only run the leave sequence if the drawer was actually shown (skips the
97
- // initial closed mount, which must not fire onClosed).
98
- if (untrack(() => show)) {
99
- leaving = true
100
- leaveTimer = setTimeout(() => { show = false; leaving = false; onClosed?.() }, reduceMotion ? 0 : EXIT_MS)
101
- }
102
- // `open` is this effect's only dependency, so the cleanup runs on reopen (a
103
- // no-op after the clearTimeout above) or on destroy - where it matters, so a
104
- // drawer unmounted mid-exit doesn't leave a timer firing into a dead scope.
105
- return () => clearTimeout(leaveTimer)
106
- })
107
-
108
- // Swipe-down-to-close for the sheet grab handle.
109
- let dragY = $state(0)
110
- let dragging = $state(false)
111
- let dragStartY = 0
112
- function onGrabDown(e: PointerEvent) {
113
- dragging = true
114
- dragStartY = e.clientY
115
- ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
116
- }
117
- function onGrabMove(e: PointerEvent) {
118
- if (!dragging) return
119
- dragY = Math.max(0, e.clientY - dragStartY)
120
- }
121
- function onGrabUp(e: PointerEvent) {
122
- if (!dragging) return
123
- dragging = false
124
- ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
125
- if (dragY > 80) close()
126
- else dragY = 0
127
- }
128
-
129
- // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
130
- // headless overlay core - one tested implementation across every dialog-like
131
- // overlay, and nested overlays close top-first. See createOverlay.svelte.ts.
132
- const overlay = createOverlay({
133
- open: () => open,
134
- getDialog: () => dialogEl,
135
- onClose: close,
136
- closeOnEsc: () => closeOnEsc,
137
- closeOnBackdrop: () => closeOnBackdrop,
138
- onOpen: () => { dragY = 0 },
139
- })
140
- </script>
141
-
142
- {#if show}
143
- <div class="sv-drawer__backdrop" class:is-leaving={leaving} use:portalToBody>
144
- <div
145
- bind:this={dialogEl}
146
- class="sv-drawer sv-drawer--{effectiveSide}"
147
- class:is-leaving={leaving}
148
- class:is-sheet={sheet}
149
- class:is-dragging={dragging}
150
- {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
151
- style:--sv-drawer-size={sizeVar}
152
- style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
153
- >
154
- {#if sheet}
155
- <!-- svelte-ignore a11y_no_static_element_interactions -->
156
- <div
157
- class="sv-drawer__grab"
158
- aria-hidden="true"
159
- onpointerdown={onGrabDown}
160
- onpointermove={onGrabMove}
161
- onpointerup={onGrabUp}
162
- onpointercancel={onGrabUp}
163
- ><span></span></div>
164
- {/if}
165
- {#if title || !hideClose}
166
- <div class="sv-drawer__header">
167
- <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
168
- {#if !hideClose}
169
- <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
170
- {/if}
171
- </div>
172
- {/if}
173
- <div class="sv-drawer__body">{@render children?.()}</div>
174
- {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
175
- </div>
176
- </div>
177
- {/if}
178
-
179
- <style>
180
- :global(.sv-drawer__backdrop) {
181
- position: fixed; inset: 0; z-index: 2147483000;
182
- background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
183
- animation: sv-drawer-bd-in 0.2s ease backwards;
184
- }
185
- :global(.sv-drawer__backdrop.is-leaving) { animation: sv-drawer-bd-out 0.2s ease forwards; }
186
- @keyframes sv-drawer-bd-in { from { opacity: 0 } to { opacity: 1 } }
187
- @keyframes sv-drawer-bd-out { from { opacity: 1 } to { opacity: 0 } }
188
-
189
- :global(.sv-drawer) {
190
- position: fixed;
191
- display: flex; flex-direction: column;
192
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
193
- box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
194
- overflow: hidden;
195
- /* Slide in on mount; `backwards` fill shows the off-screen start frame with no
196
- flash, and does NOT hold the end frame - so the sheet drag transform wins. */
197
- animation: sv-drawer-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
198
- }
199
- /* Exit keyframe; `forwards` fill holds the off-screen frame until we unmount. */
200
- :global(.sv-drawer.is-leaving) { animation: sv-drawer-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
201
- /* Off-screen vector per edge - the enter/exit keyframes read `--sv-off`. `side`
202
- is a stated physical edge (like SvToaster's position prop), not a text-flow
203
- "start/end" - so it stays physical left/right regardless of page dir. */
204
- :global(.sv-drawer--right), :global(.sv-drawer--left) {
205
- top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
206
- }
207
- :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(100%); }
208
- :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(-100%); }
209
- /* Top / bottom: full width, fixed height, slide along Y. */
210
- :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
211
- left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
212
- }
213
- :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(-100%); }
214
- :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(100%); }
215
- @keyframes sv-drawer-in { from { transform: var(--sv-off) } to { transform: none } }
216
- @keyframes sv-drawer-out { from { transform: none } to { transform: var(--sv-off) } }
217
-
218
- /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. Slides
219
- along Y like a bottom drawer (enter/exit keyframes read --sv-off from --bottom). */
220
- :global(.sv-drawer.is-sheet) {
221
- left: 0; right: 0; margin: 0 auto; top: auto;
222
- width: min(560px, 100vw); height: auto; max-height: 85vh;
223
- border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
224
- border-radius: 16px 16px 0 0;
225
- }
226
- /* No transition while the user is dragging the grab handle - follow the finger. */
227
- :global(.sv-drawer.is-dragging) { transition: none; }
228
- :global(.sv-drawer__grab) {
229
- flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
230
- }
231
- :global(.sv-drawer__grab span) {
232
- display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
233
- }
234
- @media (prefers-reduced-motion: reduce) {
235
- :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
236
- :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
237
- }
238
-
239
- :global(.sv-drawer__header) {
240
- display: flex; align-items: center; gap: 12px; padding: 13px 16px;
241
- border-bottom: 1px solid var(--sg-border, #e2e8f0);
242
- }
243
- :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
244
- :global(.sv-drawer__x) {
245
- flex: none; width: 28px; height: 28px; display: grid; place-items: center;
246
- background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
247
- }
248
- :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
249
- :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
250
- :global(.sv-drawer__footer) {
251
- display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
252
- border-top: 1px solid var(--sg-border, #e2e8f0);
253
- }
254
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
4
+ * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
5
+ * on the shared primitives - `createFocusTrap`, `lockScroll` and
6
+ * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
7
+ * behaviour is identical to SvModal and nested overlays close top-first.
8
+ * Portalled to <body>. Controlled via `open`.
9
+ *
10
+ * ```svelte
11
+ * <SvDrawer bind:open side="right" title="Filters">
12
+ * <p>Body</p>
13
+ * {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
14
+ * </SvDrawer>
15
+ * ```
16
+ */
17
+ import type { Snippet } from 'svelte'
18
+ import { untrack } from 'svelte'
19
+ import { portalToBody } from './popover'
20
+ import { nextEditorId } from './editor-contract'
21
+ import { createOverlay } from './createOverlay.svelte'
22
+
23
+ /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
24
+ * index.ts (a bare type-only module script trips the Svelte/Vite parser). */
25
+ type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
26
+
27
+ type Props = {
28
+ open?: boolean
29
+ onClose?: () => void
30
+ /** Edge the drawer slides from. Default 'right'. */
31
+ side?: DrawerSide
32
+ /** Panel size along its axis (width for left/right, height for top/bottom).
33
+ * Any CSS length; defaults to a sensible per-axis value. */
34
+ size?: string
35
+ title?: string
36
+ closeOnBackdrop?: boolean
37
+ closeOnEsc?: boolean
38
+ /** Hide the header close (x) button. */
39
+ hideClose?: boolean
40
+ /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
41
+ * handle, and swipe-down-to-close. Overrides `side`. */
42
+ sheet?: boolean
43
+ /** Accessible name when there is no visible `title`. */
44
+ ariaLabel?: string
45
+ /** Fired after the close (exit) animation has finished and the drawer has
46
+ * left the DOM. Use it to clear the data the drawer was showing so the
47
+ * content stays put while it slides out. */
48
+ onClosed?: () => void
49
+ children?: Snippet
50
+ footer?: Snippet
51
+ }
52
+
53
+ let {
54
+ open = $bindable(false),
55
+ onClose,
56
+ side = 'right',
57
+ size,
58
+ title,
59
+ closeOnBackdrop = true,
60
+ closeOnEsc = true,
61
+ hideClose = false,
62
+ sheet = false,
63
+ ariaLabel,
64
+ onClosed,
65
+ children,
66
+ footer,
67
+ }: Props = $props()
68
+
69
+ const titleId = nextEditorId('sv-drawer-title')
70
+ let dialogEl = $state<HTMLDivElement | null>(null)
71
+
72
+ // A sheet is a bottom drawer with mobile affordances.
73
+ const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
74
+ const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
75
+ const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
76
+
77
+ function close() { open = false; onClose?.() }
78
+
79
+ // Enter/exit animation via CSS @keyframes (the pattern SvModal uses - keyframes
80
+ // play on a `use:portalToBody` element; the Svelte `transition:` directive does
81
+ // NOT). `show` keeps the panel mounted; the enter keyframe fires on mount, and
82
+ // on close we add `is-leaving` (exit keyframe) and unmount + fire `onClosed`
83
+ // after the duration. Honors reduced-motion by dropping the hold to 0ms.
84
+ const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
85
+ const EXIT_MS = 260
86
+ let show = $state(false)
87
+ let leaving = $state(false)
88
+ let leaveTimer: ReturnType<typeof setTimeout> | undefined
89
+ $effect(() => {
90
+ if (open) {
91
+ clearTimeout(leaveTimer)
92
+ leaving = false
93
+ show = true
94
+ return
95
+ }
96
+ // Only run the leave sequence if the drawer was actually shown (skips the
97
+ // initial closed mount, which must not fire onClosed).
98
+ if (untrack(() => show)) {
99
+ leaving = true
100
+ leaveTimer = setTimeout(() => { show = false; leaving = false; onClosed?.() }, reduceMotion ? 0 : EXIT_MS)
101
+ }
102
+ // `open` is this effect's only dependency, so the cleanup runs on reopen (a
103
+ // no-op after the clearTimeout above) or on destroy - where it matters, so a
104
+ // drawer unmounted mid-exit doesn't leave a timer firing into a dead scope.
105
+ return () => clearTimeout(leaveTimer)
106
+ })
107
+
108
+ // Swipe-down-to-close for the sheet grab handle.
109
+ let dragY = $state(0)
110
+ let dragging = $state(false)
111
+ let dragStartY = 0
112
+ function onGrabDown(e: PointerEvent) {
113
+ dragging = true
114
+ dragStartY = e.clientY
115
+ ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
116
+ }
117
+ function onGrabMove(e: PointerEvent) {
118
+ if (!dragging) return
119
+ dragY = Math.max(0, e.clientY - dragStartY)
120
+ }
121
+ function onGrabUp(e: PointerEvent) {
122
+ if (!dragging) return
123
+ dragging = false
124
+ ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
125
+ if (dragY > 80) close()
126
+ else dragY = 0
127
+ }
128
+
129
+ // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
130
+ // headless overlay core - one tested implementation across every dialog-like
131
+ // overlay, and nested overlays close top-first. See createOverlay.svelte.ts.
132
+ const overlay = createOverlay({
133
+ open: () => open,
134
+ getDialog: () => dialogEl,
135
+ onClose: close,
136
+ closeOnEsc: () => closeOnEsc,
137
+ closeOnBackdrop: () => closeOnBackdrop,
138
+ onOpen: () => { dragY = 0 },
139
+ })
140
+ </script>
141
+
142
+ {#if show}
143
+ <div class="sv-drawer__backdrop" class:is-leaving={leaving} use:portalToBody>
144
+ <div
145
+ bind:this={dialogEl}
146
+ class="sv-drawer sv-drawer--{effectiveSide}"
147
+ class:is-leaving={leaving}
148
+ class:is-sheet={sheet}
149
+ class:is-dragging={dragging}
150
+ {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
151
+ style:--sv-drawer-size={sizeVar}
152
+ style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
153
+ >
154
+ {#if sheet}
155
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
156
+ <div
157
+ class="sv-drawer__grab"
158
+ aria-hidden="true"
159
+ onpointerdown={onGrabDown}
160
+ onpointermove={onGrabMove}
161
+ onpointerup={onGrabUp}
162
+ onpointercancel={onGrabUp}
163
+ ><span></span></div>
164
+ {/if}
165
+ {#if title || !hideClose}
166
+ <div class="sv-drawer__header">
167
+ <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
168
+ {#if !hideClose}
169
+ <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
170
+ {/if}
171
+ </div>
172
+ {/if}
173
+ <div class="sv-drawer__body">{@render children?.()}</div>
174
+ {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
175
+ </div>
176
+ </div>
177
+ {/if}
178
+
179
+ <style>
180
+ :global(.sv-drawer__backdrop) {
181
+ position: fixed; inset: 0; z-index: 2147483000;
182
+ background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
183
+ animation: sv-drawer-bd-in 0.2s ease backwards;
184
+ }
185
+ :global(.sv-drawer__backdrop.is-leaving) { animation: sv-drawer-bd-out 0.2s ease forwards; }
186
+ @keyframes sv-drawer-bd-in { from { opacity: 0 } to { opacity: 1 } }
187
+ @keyframes sv-drawer-bd-out { from { opacity: 1 } to { opacity: 0 } }
188
+
189
+ :global(.sv-drawer) {
190
+ position: fixed;
191
+ display: flex; flex-direction: column;
192
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
193
+ box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
194
+ overflow: hidden;
195
+ /* Slide in on mount; `backwards` fill shows the off-screen start frame with no
196
+ flash, and does NOT hold the end frame - so the sheet drag transform wins. */
197
+ animation: sv-drawer-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
198
+ }
199
+ /* Exit keyframe; `forwards` fill holds the off-screen frame until we unmount. */
200
+ :global(.sv-drawer.is-leaving) { animation: sv-drawer-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
201
+ /* Off-screen vector per edge - the enter/exit keyframes read `--sv-off`. `side`
202
+ is a stated physical edge (like SvToaster's position prop), not a text-flow
203
+ "start/end" - so it stays physical left/right regardless of page dir. */
204
+ :global(.sv-drawer--right), :global(.sv-drawer--left) {
205
+ top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
206
+ }
207
+ :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(100%); }
208
+ :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(-100%); }
209
+ /* Top / bottom: full width, fixed height, slide along Y. */
210
+ :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
211
+ left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
212
+ }
213
+ :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(-100%); }
214
+ :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(100%); }
215
+ @keyframes sv-drawer-in { from { transform: var(--sv-off) } to { transform: none } }
216
+ @keyframes sv-drawer-out { from { transform: none } to { transform: var(--sv-off) } }
217
+
218
+ /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. Slides
219
+ along Y like a bottom drawer (enter/exit keyframes read --sv-off from --bottom). */
220
+ :global(.sv-drawer.is-sheet) {
221
+ left: 0; right: 0; margin: 0 auto; top: auto;
222
+ width: min(560px, 100vw); height: auto; max-height: 85vh;
223
+ border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
224
+ border-radius: 16px 16px 0 0;
225
+ }
226
+ /* No transition while the user is dragging the grab handle - follow the finger. */
227
+ :global(.sv-drawer.is-dragging) { transition: none; }
228
+ :global(.sv-drawer__grab) {
229
+ flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
230
+ }
231
+ :global(.sv-drawer__grab span) {
232
+ display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
233
+ }
234
+ @media (prefers-reduced-motion: reduce) {
235
+ :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
236
+ :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
237
+ }
238
+
239
+ :global(.sv-drawer__header) {
240
+ display: flex; align-items: center; gap: 12px; padding: 13px 16px;
241
+ border-bottom: 1px solid var(--sg-border, #e2e8f0);
242
+ }
243
+ :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
244
+ :global(.sv-drawer__x) {
245
+ flex: none; width: 28px; height: 28px; display: grid; place-items: center;
246
+ background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
247
+ }
248
+ :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
249
+ :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
250
+ :global(.sv-drawer__footer) {
251
+ display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
252
+ border-top: 1px solid var(--sg-border, #e2e8f0);
253
+ }
254
+ </style>