@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/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>