@svgrid/grid 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (259) hide show
  1. package/CHANGELOG.md +116 -88
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/SvAutoComplete.svelte +169 -169
  6. package/dist/SvAvatar.svelte +75 -75
  7. package/dist/SvCalendar.svelte +503 -503
  8. package/dist/SvCarousel.svelte +141 -141
  9. package/dist/SvCheckBox.svelte +102 -102
  10. package/dist/SvCircularProgress.svelte +109 -109
  11. package/dist/SvColorInput.svelte +181 -181
  12. package/dist/SvComboBox.svelte +279 -279
  13. package/dist/SvContextMenu.svelte +116 -116
  14. package/dist/SvCountryInput.svelte +163 -163
  15. package/dist/SvDrawer.svelte +254 -254
  16. package/dist/SvDropDownList.svelte +378 -378
  17. package/dist/SvDurationInput.svelte +126 -126
  18. package/dist/SvField.svelte +293 -293
  19. package/dist/SvForm.svelte +437 -437
  20. package/dist/SvGridCellEditor.svelte +748 -744
  21. package/dist/SvGridChart.svelte +1716 -1716
  22. package/dist/SvGridChartPanel.svelte +485 -485
  23. package/dist/SvGridChartView.svelte +70 -70
  24. package/dist/SvGridDropdown.svelte +728 -728
  25. package/dist/SvGridSelect.svelte +270 -270
  26. package/dist/SvGroupCell.svelte +116 -116
  27. package/dist/SvListBox.svelte +334 -334
  28. package/dist/SvMaskedInput.svelte +122 -122
  29. package/dist/SvMenu.svelte +124 -124
  30. package/dist/SvMenuList.svelte +146 -146
  31. package/dist/SvMultiSelect.svelte +293 -293
  32. package/dist/SvNumberInput.svelte +172 -172
  33. package/dist/SvOtpInput.svelte +158 -158
  34. package/dist/SvPasswordInput.svelte +151 -151
  35. package/dist/SvPhoneInput.svelte +133 -133
  36. package/dist/SvPopover.svelte +197 -197
  37. package/dist/SvProgress.svelte +116 -116
  38. package/dist/SvRadioGroup.svelte +107 -107
  39. package/dist/SvRating.svelte +112 -112
  40. package/dist/SvResult.svelte +73 -73
  41. package/dist/SvRichText.svelte +211 -211
  42. package/dist/SvRowGroupPanel.svelte +170 -170
  43. package/dist/SvScrollArea.svelte +61 -61
  44. package/dist/SvSlider.svelte +203 -203
  45. package/dist/SvSwitchButton.svelte +108 -108
  46. package/dist/SvTagsInput.svelte +115 -115
  47. package/dist/SvTextInput.svelte +147 -147
  48. package/dist/SvTimePicker.svelte +245 -245
  49. package/dist/SvToaster.svelte +159 -159
  50. package/dist/SvToggleButton.svelte +85 -85
  51. package/dist/SvTooltip.svelte +161 -161
  52. package/dist/SvTour.svelte +208 -208
  53. package/dist/SvTree.svelte +444 -444
  54. package/dist/SvTreeSelect.svelte +239 -239
  55. package/dist/cdn/{GridMenus-DMihUtma.js → GridMenus-CYzOvmNQ.js} +3 -3
  56. package/dist/cdn/{GridMenus-nmNDj1a3.js → GridMenus-DFB6iwF8.js} +3 -3
  57. package/dist/cdn/{SvDateRangeInput-DflbiP7N.js → SvDateRangeInput-CaOuMs8O.js} +1 -1
  58. package/dist/cdn/{SvDateRangeInput-Bh0A0JkF.js → SvDateRangeInput-DMLKmGEc.js} +1 -1
  59. package/dist/cdn/{SvDateTimePicker-Bivn8dAP.js → SvDateTimePicker-CCbDZNZB.js} +1 -1
  60. package/dist/cdn/{SvDateTimePicker-BWwpfB_o.js → SvDateTimePicker-sonaH0oh.js} +1 -1
  61. package/dist/cdn/{SvGridCellEditor-Ba7rY3eu.js → SvGridCellEditor-BWnTi2N7.js} +2 -2
  62. package/dist/cdn/{SvGridCellEditor-AXL8cHGO.js → SvGridCellEditor-CjEJMJKc.js} +2 -2
  63. package/dist/cdn/{SvGridChart-CwhFz7GV.js → SvGridChart-BEJmNNx9.js} +1 -1
  64. package/dist/cdn/{SvGridChart-Bs2GIR2Q.js → SvGridChart-BwVos976.js} +1 -1
  65. package/dist/cdn/{SvGridChartPanel-1WXuStzM.js → SvGridChartPanel-BOknOkrP.js} +1 -1
  66. package/dist/cdn/{SvGridChartPanel-e5_nqNP9.js → SvGridChartPanel-D2PjII4O.js} +1 -1
  67. package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-00LPUHL1.js} +1 -1
  68. package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-BhUEJ5ki.js} +1 -1
  69. package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
  70. package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
  71. package/dist/cdn/{date-format-DZT7T1wf.js → date-format-BNii4zeD.js} +2 -2
  72. package/dist/cdn/{date-format-CcP1tafP.js → date-format-BnnHlqGw.js} +2 -2
  73. package/dist/cdn/{src-B_YS5AOc.js → src-C8QjSaq-.js} +42 -44
  74. package/dist/cdn/{src-DYXXpuSk.js → src-D0hO2eYN.js} +41 -43
  75. package/dist/cdn/svgrid.js +7 -7
  76. package/dist/cdn/svgrid.svelte-external.js +7 -7
  77. package/dist/chart-export.js +8 -8
  78. package/dist/editing.js +22 -13
  79. package/package.json +11 -11
  80. package/src/FlexRender.svelte +96 -96
  81. package/src/GridFooter.svelte +181 -181
  82. package/src/SvAutoComplete.svelte +169 -169
  83. package/src/SvAvatar.svelte +75 -75
  84. package/src/SvCalendar.svelte +503 -503
  85. package/src/SvCalendar.test.ts +226 -226
  86. package/src/SvCarousel.svelte +141 -141
  87. package/src/SvCheckBox.svelte +102 -102
  88. package/src/SvCircularProgress.svelte +109 -109
  89. package/src/SvColorInput.svelte +181 -181
  90. package/src/SvComboBox.svelte +279 -279
  91. package/src/SvContextMenu.svelte +116 -116
  92. package/src/SvCountryInput.svelte +163 -163
  93. package/src/SvDrawer.svelte +254 -254
  94. package/src/SvDropDownList.svelte +378 -378
  95. package/src/SvDurationInput.svelte +126 -126
  96. package/src/SvField.svelte +293 -293
  97. package/src/SvForm.svelte +437 -437
  98. package/src/SvForm.test.ts +411 -411
  99. package/src/SvGrid.types.ts +2092 -2092
  100. package/src/SvGridCellEditor.svelte +748 -744
  101. package/src/SvGridChart.svelte +1716 -1716
  102. package/src/SvGridChartPanel.svelte +485 -485
  103. package/src/SvGridChartView.svelte +70 -70
  104. package/src/SvGridDropdown.svelte +728 -728
  105. package/src/SvGridSelect.svelte +270 -270
  106. package/src/SvGroupCell.svelte +116 -116
  107. package/src/SvListBox.svelte +334 -334
  108. package/src/SvMaskedInput.svelte +122 -122
  109. package/src/SvMenu.svelte +124 -124
  110. package/src/SvMenu.test.ts +97 -97
  111. package/src/SvMenuList.svelte +146 -146
  112. package/src/SvMultiSelect.svelte +293 -293
  113. package/src/SvNumberInput.svelte +172 -172
  114. package/src/SvOtpInput.svelte +158 -158
  115. package/src/SvPasswordInput.svelte +151 -151
  116. package/src/SvPhoneInput.svelte +133 -133
  117. package/src/SvPopover.svelte +197 -197
  118. package/src/SvProgress.svelte +116 -116
  119. package/src/SvRadioGroup.svelte +107 -107
  120. package/src/SvRating.svelte +112 -112
  121. package/src/SvResult.svelte +73 -73
  122. package/src/SvRichText.svelte +211 -211
  123. package/src/SvRowGroupPanel.svelte +170 -170
  124. package/src/SvScrollArea.svelte +61 -61
  125. package/src/SvSlider.svelte +203 -203
  126. package/src/SvSwitchButton.svelte +108 -108
  127. package/src/SvTagsInput.svelte +115 -115
  128. package/src/SvTextInput.svelte +147 -147
  129. package/src/SvTimePicker.svelte +245 -245
  130. package/src/SvToaster.svelte +159 -159
  131. package/src/SvToaster.test.ts +95 -95
  132. package/src/SvToggleButton.svelte +85 -85
  133. package/src/SvTooltip.svelte +161 -161
  134. package/src/SvTour.svelte +208 -208
  135. package/src/SvTree.svelte +444 -444
  136. package/src/SvTreeSelect.svelte +239 -239
  137. package/src/a11y/dismissable.test.ts +119 -119
  138. package/src/a11y/dismissable.ts +114 -114
  139. package/src/a11y.contract.test.ts +49 -49
  140. package/src/a11y.test.ts +59 -59
  141. package/src/a11y.ts +61 -61
  142. package/src/ai.test.ts +502 -502
  143. package/src/ai.ts +1419 -1419
  144. package/src/build-api.coverage.test.ts +633 -633
  145. package/src/build-api.ts +846 -846
  146. package/src/builtin-editors.grid.test.ts +83 -83
  147. package/src/cell-formatting.ts +171 -171
  148. package/src/cell-render.test.ts +513 -513
  149. package/src/cell-render.ts +496 -496
  150. package/src/cell-values.ts +148 -148
  151. package/src/chart-export.ts +202 -202
  152. package/src/chart-view.svelte.ts +36 -36
  153. package/src/chart.ts +2321 -2321
  154. package/src/collaboration.test.ts +104 -104
  155. package/src/collaboration.ts +167 -167
  156. package/src/column-groups.ts +78 -78
  157. package/src/core.performance.test.ts +30 -30
  158. package/src/core.ts +1865 -1865
  159. package/src/createAutocomplete.svelte.ts +132 -132
  160. package/src/createCombobox.svelte.ts +191 -191
  161. package/src/createCountryInput.svelte.ts +157 -157
  162. package/src/createDropdownList.svelte.ts +168 -168
  163. package/src/createForm.svelte.ts +386 -386
  164. package/src/createGrid.svelte.ts +42 -42
  165. package/src/createGrid.test.ts +10 -10
  166. package/src/createGridState.svelte.ts +17 -17
  167. package/src/createListbox.svelte.ts +250 -250
  168. package/src/createMenu.svelte.ts +224 -224
  169. package/src/createPopoverSelect.svelte.ts +213 -213
  170. package/src/createSlider.svelte.ts +191 -191
  171. package/src/createTooltip.svelte.ts +144 -144
  172. package/src/createTree.svelte.ts +322 -322
  173. package/src/datetime/date-core.ts +206 -206
  174. package/src/datetime/date-restrict.ts +61 -61
  175. package/src/datetime/timezone.ts +135 -135
  176. package/src/dock-manager-model.ts +596 -596
  177. package/src/dock-model.ts +374 -374
  178. package/src/editing.test.ts +974 -974
  179. package/src/editing.ts +618 -609
  180. package/src/editor-contract.ts +171 -171
  181. package/src/editor-registry.grid.test.ts +144 -144
  182. package/src/editor-registry.ts +122 -122
  183. package/src/export-data-api.test.ts +126 -126
  184. package/src/export-format.test.ts +107 -107
  185. package/src/export-format.ts +601 -601
  186. package/src/filter-operators.ts +160 -160
  187. package/src/filtering/excel-filters.ts +325 -325
  188. package/src/flex-render.ts +3 -3
  189. package/src/form-field.ts +127 -127
  190. package/src/group-display.test.ts +167 -167
  191. package/src/group-display.ts +200 -200
  192. package/src/headless.ts +87 -87
  193. package/src/js-scroller.svelte.ts +173 -173
  194. package/src/keyboard-handlers.ts +270 -270
  195. package/src/keyboard.test.ts +59 -59
  196. package/src/keyboard.ts +97 -97
  197. package/src/list-nav.test.ts +49 -49
  198. package/src/list-nav.ts +29 -29
  199. package/src/list-option.test.ts +56 -56
  200. package/src/list-option.ts +179 -179
  201. package/src/menus.ts +597 -597
  202. package/src/merge-objects.ts +48 -48
  203. package/src/overlays.test.ts +90 -90
  204. package/src/positioning.ts +268 -268
  205. package/src/render-component.ts +28 -28
  206. package/src/row-drag.test.ts +401 -401
  207. package/src/row-drag.ts +419 -419
  208. package/src/row-resize.test.ts +524 -524
  209. package/src/row-resize.ts +228 -228
  210. package/src/scheduler-ical.ts +181 -181
  211. package/src/scheduler-model.test.ts +562 -562
  212. package/src/scheduler-model.ts +873 -873
  213. package/src/selection.test.ts +885 -885
  214. package/src/server-data-source.test.ts +383 -383
  215. package/src/server-data-source.ts +469 -469
  216. package/src/sparkline.test.ts +68 -68
  217. package/src/sparkline.ts +169 -169
  218. package/src/spreadsheet.test.ts +488 -488
  219. package/src/spreadsheet.ts +312 -312
  220. package/src/static-functions.ts +11 -11
  221. package/src/subscribe.ts +38 -38
  222. package/src/summaries.ts +113 -113
  223. package/src/svgrid-wrapper.types.ts +563 -563
  224. package/src/svgrid.async-editor-options.test.ts +273 -273
  225. package/src/svgrid.auto-row-height.test.ts +204 -204
  226. package/src/svgrid.behavior.test.ts +910 -910
  227. package/src/svgrid.charting.test.ts +534 -534
  228. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  229. package/src/svgrid.context-menu.test.ts +147 -147
  230. package/src/svgrid.features.test.ts +157 -157
  231. package/src/svgrid.filter-depth.test.ts +163 -163
  232. package/src/svgrid.filter-menu-listbox.svelte.test.ts +382 -377
  233. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  234. package/src/svgrid.grand-total.test.ts +188 -188
  235. package/src/svgrid.group-display-mode.test.ts +171 -171
  236. package/src/svgrid.group-footers.test.ts +121 -121
  237. package/src/svgrid.group-pagination.test.ts +153 -153
  238. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  239. package/src/svgrid.tree-data.test.ts +186 -186
  240. package/src/svgrid.wrapper.test.ts +63 -63
  241. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  242. package/src/test-setup.ts +62 -62
  243. package/src/themes/index.ts +288 -288
  244. package/src/toast-store.svelte.ts +250 -250
  245. package/src/toast-store.test.ts +147 -147
  246. package/src/tree-row-model.test.ts +168 -168
  247. package/src/ui-buttons.test.ts +144 -144
  248. package/src/ui-inputs.test.ts +118 -118
  249. package/src/ui-localization.test.ts +113 -113
  250. package/src/ui-range.test.ts +70 -70
  251. package/src/ui-selection.test.ts +155 -155
  252. package/src/ui-tier1.test.ts +142 -142
  253. package/src/virtual.test.ts +88 -88
  254. package/src/virtualization/column-virtualizer.test.ts +27 -27
  255. package/src/virtualization/column-virtualizer.ts +30 -30
  256. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  257. package/src/virtualization/types.ts +30 -30
  258. package/src/virtualization/virtualizer.test.ts +47 -47
  259. package/src/virtualization/virtualizer.ts +322 -322
package/dist/SvContextMenu.svelte CHANGED
@@ -1,116 +1,116 @@
1
- <script lang="ts" module>
2
- export type { MenuItem } from './SvMenuList.svelte'
3
- </script>
4
-
5
- <script lang="ts">
6
- /**
7
- * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
8
- * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
9
- * portals to <body>, and closes via the shared dismissable layer stack.
10
- * Parity: Smart context-menu.
11
- *
12
- * ```svelte
13
- * <SvContextMenu items={items} onSelect={(i) => run(i)}>
14
- * <div class="drop-zone">Right-click me</div>
15
- * </SvContextMenu>
16
- * ```
17
- */
18
- import type { Snippet } from 'svelte'
19
- import { portalToBody, popIn } from './popover'
20
- import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
21
- import { createFocusTrap } from './a11y/focus-trap'
22
- import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
23
-
24
- type Props = {
25
- items: ReadonlyArray<MenuItem>
26
- onSelect?: (item: MenuItem) => void
27
- disabled?: boolean
28
- ariaLabel?: string
29
- children?: Snippet
30
- }
31
-
32
- let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
33
-
34
- let open = $state(false)
35
- let pos = $state({ x: 0, y: 0 })
36
- let panelEl = $state<HTMLDivElement | null>(null)
37
- let zoneEl = $state<HTMLDivElement | null>(null)
38
-
39
- const MENU_W = 200
40
- function openAt(clientX: number, clientY: number) {
41
- // Clamp so the menu stays on-screen (estimate height from item count).
42
- const estH = Math.min(items.length, 12) * 34 + 8
43
- const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
44
- const y = Math.min(clientY, window.innerHeight - estH - 6)
45
- pos = { x: Math.max(6, x), y: Math.max(6, y) }
46
- open = true
47
- }
48
-
49
- function onContextMenu(e: MouseEvent) {
50
- if (disabled) return
51
- e.preventDefault()
52
- openAt(e.clientX, e.clientY)
53
- }
54
-
55
- // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
56
- // Anchors at the focused zone's own position instead of the (nonexistent)
57
- // pointer coordinates.
58
- function onZoneKeydown(e: KeyboardEvent) {
59
- if (disabled) return
60
- const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
61
- if (!isMenuKey) return
62
- e.preventDefault()
63
- const rect = zoneEl?.getBoundingClientRect()
64
- openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
65
- }
66
-
67
- $effect(() => {
68
- if (!open || !panelEl) return
69
- const trap = createFocusTrap(panelEl, {
70
- initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
71
- })
72
- trap.activate()
73
- const layer = createDismissableLayer({
74
- element: () => panelEl,
75
- onDismiss: () => (open = false),
76
- })
77
- layer.activate()
78
- // Reposition-close on scroll (a moved anchor would leave the menu stranded).
79
- // Scrolling the menu's own item list doesn't count as the anchor moving.
80
- const offScroll = onScrollOutside(() => panelEl, () => (open = false))
81
- return () => { layer.release(); trap.release(); offScroll() }
82
- })
83
- </script>
84
-
85
- <!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
86
- <div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
87
- {@render children?.()}
88
- </div>
89
-
90
- {#if open}
91
- <div
92
- bind:this={panelEl}
93
- class="sv-ctx"
94
- use:portalToBody
95
- use:popIn={{}}
96
- style:position="fixed"
97
- style:top={`${pos.y}px`}
98
- style:left={`${pos.x}px`}
99
- aria-label={ariaLabel}
100
- >
101
- <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
102
- </div>
103
- {/if}
104
-
105
- <style>
106
- /* display:contents generates no box and per spec cannot receive focus - it
107
- must be a real box for the keyboard-open path (tabindex) to work at all. */
108
- .sv-ctx__zone { display: block; }
109
- .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
110
- :global(.sv-ctx) {
111
- z-index: 2147483646; min-width: 200px;
112
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
113
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
114
- box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
115
- }
116
- </style>
1
+ <script lang="ts" module>
2
+ export type { MenuItem } from './SvMenuList.svelte'
3
+ </script>
4
+
5
+ <script lang="ts">
6
+ /**
7
+ * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
8
+ * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
9
+ * portals to <body>, and closes via the shared dismissable layer stack.
10
+ * Parity: Smart context-menu.
11
+ *
12
+ * ```svelte
13
+ * <SvContextMenu items={items} onSelect={(i) => run(i)}>
14
+ * <div class="drop-zone">Right-click me</div>
15
+ * </SvContextMenu>
16
+ * ```
17
+ */
18
+ import type { Snippet } from 'svelte'
19
+ import { portalToBody, popIn } from './popover'
20
+ import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
21
+ import { createFocusTrap } from './a11y/focus-trap'
22
+ import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
23
+
24
+ type Props = {
25
+ items: ReadonlyArray<MenuItem>
26
+ onSelect?: (item: MenuItem) => void
27
+ disabled?: boolean
28
+ ariaLabel?: string
29
+ children?: Snippet
30
+ }
31
+
32
+ let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
33
+
34
+ let open = $state(false)
35
+ let pos = $state({ x: 0, y: 0 })
36
+ let panelEl = $state<HTMLDivElement | null>(null)
37
+ let zoneEl = $state<HTMLDivElement | null>(null)
38
+
39
+ const MENU_W = 200
40
+ function openAt(clientX: number, clientY: number) {
41
+ // Clamp so the menu stays on-screen (estimate height from item count).
42
+ const estH = Math.min(items.length, 12) * 34 + 8
43
+ const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
44
+ const y = Math.min(clientY, window.innerHeight - estH - 6)
45
+ pos = { x: Math.max(6, x), y: Math.max(6, y) }
46
+ open = true
47
+ }
48
+
49
+ function onContextMenu(e: MouseEvent) {
50
+ if (disabled) return
51
+ e.preventDefault()
52
+ openAt(e.clientX, e.clientY)
53
+ }
54
+
55
+ // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
56
+ // Anchors at the focused zone's own position instead of the (nonexistent)
57
+ // pointer coordinates.
58
+ function onZoneKeydown(e: KeyboardEvent) {
59
+ if (disabled) return
60
+ const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
61
+ if (!isMenuKey) return
62
+ e.preventDefault()
63
+ const rect = zoneEl?.getBoundingClientRect()
64
+ openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
65
+ }
66
+
67
+ $effect(() => {
68
+ if (!open || !panelEl) return
69
+ const trap = createFocusTrap(panelEl, {
70
+ initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
71
+ })
72
+ trap.activate()
73
+ const layer = createDismissableLayer({
74
+ element: () => panelEl,
75
+ onDismiss: () => (open = false),
76
+ })
77
+ layer.activate()
78
+ // Reposition-close on scroll (a moved anchor would leave the menu stranded).
79
+ // Scrolling the menu's own item list doesn't count as the anchor moving.
80
+ const offScroll = onScrollOutside(() => panelEl, () => (open = false))
81
+ return () => { layer.release(); trap.release(); offScroll() }
82
+ })
83
+ </script>
84
+
85
+ <!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
86
+ <div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
87
+ {@render children?.()}
88
+ </div>
89
+
90
+ {#if open}
91
+ <div
92
+ bind:this={panelEl}
93
+ class="sv-ctx"
94
+ use:portalToBody
95
+ use:popIn={{}}
96
+ style:position="fixed"
97
+ style:top={`${pos.y}px`}
98
+ style:left={`${pos.x}px`}
99
+ aria-label={ariaLabel}
100
+ >
101
+ <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
102
+ </div>
103
+ {/if}
104
+
105
+ <style>
106
+ /* display:contents generates no box and per spec cannot receive focus - it
107
+ must be a real box for the keyboard-open path (tabindex) to work at all. */
108
+ .sv-ctx__zone { display: block; }
109
+ .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
110
+ :global(.sv-ctx) {
111
+ z-index: 2147483646; min-width: 200px;
112
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
113
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
114
+ box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
115
+ }
116
+ </style>
package/dist/SvCountryInput.svelte CHANGED
@@ -1,163 +1,163 @@
1
- <script lang="ts">
2
- /**
3
- * SvCountryInput - a searchable country picker (flag + name + dial code).
4
- * Emits the ISO 3166-1 alpha-2 code. Parity: Smart country-input pattern.
5
- * Data from countries.ts; popover via popover.ts.
6
- *
7
- * One styled renderer over the headless `createCountryInput` core (search +
8
- * roving active index + keyboard); only portal/measure/focus render concerns
9
- * live here.
10
- */
11
- import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
12
- import { flagEmoji } from './countries'
13
- import SvField from './SvField.svelte'
14
- import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
15
- import { createCountryInput } from './createCountryInput.svelte'
16
-
17
- /** User-facing strings (localizable via `messages`). */
18
- type CountryMessages = { search: string; noResults: string }
19
- const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
20
-
21
- type Props = SvEditorProps & {
22
- value?: string | null
23
- onChange?: (code: string) => void
24
- /** Show the dial code beside each country. */
25
- showDial?: boolean
26
- placeholder?: string
27
- /** Override the built-in strings (search + empty-state). */
28
- messages?: Partial<CountryMessages>
29
- }
30
-
31
- let {
32
- value = $bindable<string | null>(null),
33
- onChange,
34
- showDial = false,
35
- placeholder = 'Select country…',
36
- disabled = false,
37
- name,
38
- size = 'md',
39
- ariaLabel,
40
- block = false,
41
- invalid = false,
42
- required = false,
43
- error,
44
- label,
45
- hint,
46
- dir,
47
- id,
48
- messages,
49
- }: Props = $props()
50
-
51
- const autoId = nextEditorId('sv-country')
52
- const uid = $derived(id ?? autoId)
53
- const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
54
-
55
- let triggerEl = $state<HTMLButtonElement | null>(null)
56
- let searchEl = $state<HTMLInputElement | null>(null)
57
- let panelEl = $state<HTMLDivElement | null>(null)
58
- let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
59
-
60
- const ci = createCountryInput({
61
- value: () => value,
62
- onChange: (c) => { value = c; onChange?.(c) },
63
- disabled: () => disabled,
64
- ariaLabel: () => ariaLabel,
65
- searchLabel: () => M.search,
66
- focusTrigger: () => triggerEl?.focus(),
67
- id: () => uid,
68
- invalid: () => invalid,
69
- required: () => required,
70
- error: () => error,
71
- hint: () => hint,
72
- })
73
-
74
- const selected = $derived(ci.selected)
75
-
76
- function updatePos() { if (triggerEl) rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 320, minWidth: 240 }) }
77
-
78
- $effect(() => {
79
- if (!ci.open) return
80
- updatePos()
81
- queueMicrotask(() => searchEl?.focus())
82
- const rp = () => updatePos()
83
- window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
84
- const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; ci.close() }
85
- document.addEventListener('pointerdown', od, true)
86
- return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
87
- })
88
- // Keep the active option scrolled into view (render concern).
89
- $effect(() => {
90
- if (!ci.open) return
91
- const i = ci.activeIndex
92
- queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
93
- })
94
- </script>
95
-
96
- <SvField id={uid} {label} {hint} {error} {required} {dir}>
97
- <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
98
- {#if selected}
99
- <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
100
- <span class="sv-country__name">{selected.name}</span>
101
- {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
102
- {:else}
103
- <span class="sv-country__ph">{placeholder}</span>
104
- {/if}
105
- <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
106
- </button>
107
- </SvField>
108
-
109
- {#if ci.open}
110
- <div bind:this={panelEl} class="sv-country__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
111
- <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...ci.searchProps()} />
112
- <div class="sv-country__list" {...ci.listboxProps()}>
113
- {#each ci.filtered as c, i (c.code)}
114
- <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
115
- <div class="sv-country__opt" class:is-active={ci.isActive(i)} class:is-selected={ci.isSelected(c.code)} {...ci.optionProps(i)}>
116
- <span class="sv-country__flag" aria-hidden="true">{flagEmoji(c.code)}</span>
117
- <span class="sv-country__name">{c.name}</span>
118
- <span class="sv-country__dial">{c.dial}</span>
119
- </div>
120
- {:else}
121
- <div class="sv-ddl__empty">{M.noResults}</div>
122
- {/each}
123
- </div>
124
- </div>
125
- {/if}
126
- {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
127
-
128
- <style>
129
- .sv-country {
130
- --_accent: var(--sg-accent, #2563eb);
131
- display: inline-flex; align-items: center; gap: 8px; width: 220px;
132
- background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: start;
133
- border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
134
- }
135
- .sv-country--sm { height: 28px; font-size: 12px; }
136
- .sv-country--md { height: 34px; font-size: 13px; }
137
- .sv-country--lg { height: 40px; font-size: 15px; }
138
- .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
139
- .sv-country.is-invalid { border-color: var(--sg-danger, #dc2626); }
140
- .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
141
- .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
142
- .sv-country__flag { font-size: 16px; }
143
- .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
144
- .sv-country__ph { flex: 1; color: var(--sg-muted, #94a3b8); }
145
- .sv-country__dial { color: var(--sg-muted, #64748b); font-size: 12px; }
146
- .sv-country__chev { color: var(--sg-muted, #64748b); flex: none; }
147
-
148
- :global(.sv-country__panel) {
149
- z-index: 2147483647; display: flex; flex-direction: column; max-height: 340px; padding: 6px;
150
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
151
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
152
- }
153
- :global(.sv-country__search) {
154
- height: 32px; margin-bottom: 4px; padding: 0 10px; font: inherit; font-size: 13px;
155
- border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 7px; background: var(--sg-input-bg, #fff); color: inherit; outline: none;
156
- }
157
- :global(.sv-country__list) { overflow-y: auto; }
158
- :global(.sv-country__opt) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
159
- :global(.sv-country__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
160
- :global(.sv-country__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
161
- /* Fill the container - see `block` in SvEditorProps. */
162
- .sv-country.is-block { width: 100%; max-width: 100%; }
163
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvCountryInput - a searchable country picker (flag + name + dial code).
4
+ * Emits the ISO 3166-1 alpha-2 code. Parity: Smart country-input pattern.
5
+ * Data from countries.ts; popover via popover.ts.
6
+ *
7
+ * One styled renderer over the headless `createCountryInput` core (search +
8
+ * roving active index + keyboard); only portal/measure/focus render concerns
9
+ * live here.
10
+ */
11
+ import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
12
+ import { flagEmoji } from './countries'
13
+ import SvField from './SvField.svelte'
14
+ import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
15
+ import { createCountryInput } from './createCountryInput.svelte'
16
+
17
+ /** User-facing strings (localizable via `messages`). */
18
+ type CountryMessages = { search: string; noResults: string }
19
+ const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
20
+
21
+ type Props = SvEditorProps & {
22
+ value?: string | null
23
+ onChange?: (code: string) => void
24
+ /** Show the dial code beside each country. */
25
+ showDial?: boolean
26
+ placeholder?: string
27
+ /** Override the built-in strings (search + empty-state). */
28
+ messages?: Partial<CountryMessages>
29
+ }
30
+
31
+ let {
32
+ value = $bindable<string | null>(null),
33
+ onChange,
34
+ showDial = false,
35
+ placeholder = 'Select country…',
36
+ disabled = false,
37
+ name,
38
+ size = 'md',
39
+ ariaLabel,
40
+ block = false,
41
+ invalid = false,
42
+ required = false,
43
+ error,
44
+ label,
45
+ hint,
46
+ dir,
47
+ id,
48
+ messages,
49
+ }: Props = $props()
50
+
51
+ const autoId = nextEditorId('sv-country')
52
+ const uid = $derived(id ?? autoId)
53
+ const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
54
+
55
+ let triggerEl = $state<HTMLButtonElement | null>(null)
56
+ let searchEl = $state<HTMLInputElement | null>(null)
57
+ let panelEl = $state<HTMLDivElement | null>(null)
58
+ let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
59
+
60
+ const ci = createCountryInput({
61
+ value: () => value,
62
+ onChange: (c) => { value = c; onChange?.(c) },
63
+ disabled: () => disabled,
64
+ ariaLabel: () => ariaLabel,
65
+ searchLabel: () => M.search,
66
+ focusTrigger: () => triggerEl?.focus(),
67
+ id: () => uid,
68
+ invalid: () => invalid,
69
+ required: () => required,
70
+ error: () => error,
71
+ hint: () => hint,
72
+ })
73
+
74
+ const selected = $derived(ci.selected)
75
+
76
+ function updatePos() { if (triggerEl) rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 320, minWidth: 240 }) }
77
+
78
+ $effect(() => {
79
+ if (!ci.open) return
80
+ updatePos()
81
+ queueMicrotask(() => searchEl?.focus())
82
+ const rp = () => updatePos()
83
+ window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
84
+ const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; ci.close() }
85
+ document.addEventListener('pointerdown', od, true)
86
+ return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
87
+ })
88
+ // Keep the active option scrolled into view (render concern).
89
+ $effect(() => {
90
+ if (!ci.open) return
91
+ const i = ci.activeIndex
92
+ queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
93
+ })
94
+ </script>
95
+
96
+ <SvField id={uid} {label} {hint} {error} {required} {dir}>
97
+ <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
98
+ {#if selected}
99
+ <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
100
+ <span class="sv-country__name">{selected.name}</span>
101
+ {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
102
+ {:else}
103
+ <span class="sv-country__ph">{placeholder}</span>
104
+ {/if}
105
+ <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
106
+ </button>
107
+ </SvField>
108
+
109
+ {#if ci.open}
110
+ <div bind:this={panelEl} class="sv-country__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
111
+ <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...ci.searchProps()} />
112
+ <div class="sv-country__list" {...ci.listboxProps()}>
113
+ {#each ci.filtered as c, i (c.code)}
114
+ <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
115
+ <div class="sv-country__opt" class:is-active={ci.isActive(i)} class:is-selected={ci.isSelected(c.code)} {...ci.optionProps(i)}>
116
+ <span class="sv-country__flag" aria-hidden="true">{flagEmoji(c.code)}</span>
117
+ <span class="sv-country__name">{c.name}</span>
118
+ <span class="sv-country__dial">{c.dial}</span>
119
+ </div>
120
+ {:else}
121
+ <div class="sv-ddl__empty">{M.noResults}</div>
122
+ {/each}
123
+ </div>
124
+ </div>
125
+ {/if}
126
+ {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
127
+
128
+ <style>
129
+ .sv-country {
130
+ --_accent: var(--sg-accent, #2563eb);
131
+ display: inline-flex; align-items: center; gap: 8px; width: 220px;
132
+ background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: start;
133
+ border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
134
+ }
135
+ .sv-country--sm { height: 28px; font-size: 12px; }
136
+ .sv-country--md { height: 34px; font-size: 13px; }
137
+ .sv-country--lg { height: 40px; font-size: 15px; }
138
+ .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
139
+ .sv-country.is-invalid { border-color: var(--sg-danger, #dc2626); }
140
+ .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
141
+ .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
142
+ .sv-country__flag { font-size: 16px; }
143
+ .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
144
+ .sv-country__ph { flex: 1; color: var(--sg-muted, #94a3b8); }
145
+ .sv-country__dial { color: var(--sg-muted, #64748b); font-size: 12px; }
146
+ .sv-country__chev { color: var(--sg-muted, #64748b); flex: none; }
147
+
148
+ :global(.sv-country__panel) {
149
+ z-index: 2147483647; display: flex; flex-direction: column; max-height: 340px; padding: 6px;
150
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
151
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
152
+ }
153
+ :global(.sv-country__search) {
154
+ height: 32px; margin-bottom: 4px; padding: 0 10px; font: inherit; font-size: 13px;
155
+ border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 7px; background: var(--sg-input-bg, #fff); color: inherit; outline: none;
156
+ }
157
+ :global(.sv-country__list) { overflow-y: auto; }
158
+ :global(.sv-country__opt) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
159
+ :global(.sv-country__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
160
+ :global(.sv-country__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
161
+ /* Fill the container - see `block` in SvEditorProps. */
162
+ .sv-country.is-block { width: 100%; max-width: 100%; }
163
+ </style>