@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.
- package/CHANGELOG.md +116 -88
- package/README.md +199 -199
- package/dist/FlexRender.svelte +96 -96
- package/dist/GridFooter.svelte +181 -181
- package/dist/SvAutoComplete.svelte +169 -169
- package/dist/SvAvatar.svelte +75 -75
- package/dist/SvCalendar.svelte +503 -503
- package/dist/SvCarousel.svelte +141 -141
- package/dist/SvCheckBox.svelte +102 -102
- package/dist/SvCircularProgress.svelte +109 -109
- package/dist/SvColorInput.svelte +181 -181
- package/dist/SvComboBox.svelte +279 -279
- package/dist/SvContextMenu.svelte +116 -116
- package/dist/SvCountryInput.svelte +163 -163
- package/dist/SvDrawer.svelte +254 -254
- package/dist/SvDropDownList.svelte +378 -378
- package/dist/SvDurationInput.svelte +126 -126
- package/dist/SvField.svelte +293 -293
- package/dist/SvForm.svelte +437 -437
- package/dist/SvGridCellEditor.svelte +748 -744
- package/dist/SvGridChart.svelte +1716 -1716
- package/dist/SvGridChartPanel.svelte +485 -485
- package/dist/SvGridChartView.svelte +70 -70
- package/dist/SvGridDropdown.svelte +728 -728
- package/dist/SvGridSelect.svelte +270 -270
- package/dist/SvGroupCell.svelte +116 -116
- package/dist/SvListBox.svelte +334 -334
- package/dist/SvMaskedInput.svelte +122 -122
- package/dist/SvMenu.svelte +124 -124
- package/dist/SvMenuList.svelte +146 -146
- package/dist/SvMultiSelect.svelte +293 -293
- package/dist/SvNumberInput.svelte +172 -172
- package/dist/SvOtpInput.svelte +158 -158
- package/dist/SvPasswordInput.svelte +151 -151
- package/dist/SvPhoneInput.svelte +133 -133
- package/dist/SvPopover.svelte +197 -197
- package/dist/SvProgress.svelte +116 -116
- package/dist/SvRadioGroup.svelte +107 -107
- package/dist/SvRating.svelte +112 -112
- package/dist/SvResult.svelte +73 -73
- package/dist/SvRichText.svelte +211 -211
- package/dist/SvRowGroupPanel.svelte +170 -170
- package/dist/SvScrollArea.svelte +61 -61
- package/dist/SvSlider.svelte +203 -203
- package/dist/SvSwitchButton.svelte +108 -108
- package/dist/SvTagsInput.svelte +115 -115
- package/dist/SvTextInput.svelte +147 -147
- package/dist/SvTimePicker.svelte +245 -245
- package/dist/SvToaster.svelte +159 -159
- package/dist/SvToggleButton.svelte +85 -85
- package/dist/SvTooltip.svelte +161 -161
- package/dist/SvTour.svelte +208 -208
- package/dist/SvTree.svelte +444 -444
- package/dist/SvTreeSelect.svelte +239 -239
- package/dist/cdn/{GridMenus-DMihUtma.js → GridMenus-CYzOvmNQ.js} +3 -3
- package/dist/cdn/{GridMenus-nmNDj1a3.js → GridMenus-DFB6iwF8.js} +3 -3
- package/dist/cdn/{SvDateRangeInput-DflbiP7N.js → SvDateRangeInput-CaOuMs8O.js} +1 -1
- package/dist/cdn/{SvDateRangeInput-Bh0A0JkF.js → SvDateRangeInput-DMLKmGEc.js} +1 -1
- package/dist/cdn/{SvDateTimePicker-Bivn8dAP.js → SvDateTimePicker-CCbDZNZB.js} +1 -1
- package/dist/cdn/{SvDateTimePicker-BWwpfB_o.js → SvDateTimePicker-sonaH0oh.js} +1 -1
- package/dist/cdn/{SvGridCellEditor-Ba7rY3eu.js → SvGridCellEditor-BWnTi2N7.js} +2 -2
- package/dist/cdn/{SvGridCellEditor-AXL8cHGO.js → SvGridCellEditor-CjEJMJKc.js} +2 -2
- package/dist/cdn/{SvGridChart-CwhFz7GV.js → SvGridChart-BEJmNNx9.js} +1 -1
- package/dist/cdn/{SvGridChart-Bs2GIR2Q.js → SvGridChart-BwVos976.js} +1 -1
- package/dist/cdn/{SvGridChartPanel-1WXuStzM.js → SvGridChartPanel-BOknOkrP.js} +1 -1
- package/dist/cdn/{SvGridChartPanel-e5_nqNP9.js → SvGridChartPanel-D2PjII4O.js} +1 -1
- package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-00LPUHL1.js} +1 -1
- package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-BhUEJ5ki.js} +1 -1
- package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
- package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
- package/dist/cdn/{date-format-DZT7T1wf.js → date-format-BNii4zeD.js} +2 -2
- package/dist/cdn/{date-format-CcP1tafP.js → date-format-BnnHlqGw.js} +2 -2
- package/dist/cdn/{src-B_YS5AOc.js → src-C8QjSaq-.js} +42 -44
- package/dist/cdn/{src-DYXXpuSk.js → src-D0hO2eYN.js} +41 -43
- package/dist/cdn/svgrid.js +7 -7
- package/dist/cdn/svgrid.svelte-external.js +7 -7
- package/dist/chart-export.js +8 -8
- package/dist/editing.js +22 -13
- package/package.json +11 -11
- package/src/FlexRender.svelte +96 -96
- package/src/GridFooter.svelte +181 -181
- package/src/SvAutoComplete.svelte +169 -169
- package/src/SvAvatar.svelte +75 -75
- package/src/SvCalendar.svelte +503 -503
- package/src/SvCalendar.test.ts +226 -226
- package/src/SvCarousel.svelte +141 -141
- package/src/SvCheckBox.svelte +102 -102
- package/src/SvCircularProgress.svelte +109 -109
- package/src/SvColorInput.svelte +181 -181
- package/src/SvComboBox.svelte +279 -279
- package/src/SvContextMenu.svelte +116 -116
- package/src/SvCountryInput.svelte +163 -163
- package/src/SvDrawer.svelte +254 -254
- package/src/SvDropDownList.svelte +378 -378
- package/src/SvDurationInput.svelte +126 -126
- package/src/SvField.svelte +293 -293
- package/src/SvForm.svelte +437 -437
- package/src/SvForm.test.ts +411 -411
- package/src/SvGrid.types.ts +2092 -2092
- package/src/SvGridCellEditor.svelte +748 -744
- package/src/SvGridChart.svelte +1716 -1716
- package/src/SvGridChartPanel.svelte +485 -485
- package/src/SvGridChartView.svelte +70 -70
- package/src/SvGridDropdown.svelte +728 -728
- package/src/SvGridSelect.svelte +270 -270
- package/src/SvGroupCell.svelte +116 -116
- package/src/SvListBox.svelte +334 -334
- package/src/SvMaskedInput.svelte +122 -122
- package/src/SvMenu.svelte +124 -124
- package/src/SvMenu.test.ts +97 -97
- package/src/SvMenuList.svelte +146 -146
- package/src/SvMultiSelect.svelte +293 -293
- package/src/SvNumberInput.svelte +172 -172
- package/src/SvOtpInput.svelte +158 -158
- package/src/SvPasswordInput.svelte +151 -151
- package/src/SvPhoneInput.svelte +133 -133
- package/src/SvPopover.svelte +197 -197
- package/src/SvProgress.svelte +116 -116
- package/src/SvRadioGroup.svelte +107 -107
- package/src/SvRating.svelte +112 -112
- package/src/SvResult.svelte +73 -73
- package/src/SvRichText.svelte +211 -211
- package/src/SvRowGroupPanel.svelte +170 -170
- package/src/SvScrollArea.svelte +61 -61
- package/src/SvSlider.svelte +203 -203
- package/src/SvSwitchButton.svelte +108 -108
- package/src/SvTagsInput.svelte +115 -115
- package/src/SvTextInput.svelte +147 -147
- package/src/SvTimePicker.svelte +245 -245
- package/src/SvToaster.svelte +159 -159
- package/src/SvToaster.test.ts +95 -95
- package/src/SvToggleButton.svelte +85 -85
- package/src/SvTooltip.svelte +161 -161
- package/src/SvTour.svelte +208 -208
- package/src/SvTree.svelte +444 -444
- package/src/SvTreeSelect.svelte +239 -239
- package/src/a11y/dismissable.test.ts +119 -119
- package/src/a11y/dismissable.ts +114 -114
- package/src/a11y.contract.test.ts +49 -49
- package/src/a11y.test.ts +59 -59
- package/src/a11y.ts +61 -61
- package/src/ai.test.ts +502 -502
- package/src/ai.ts +1419 -1419
- package/src/build-api.coverage.test.ts +633 -633
- package/src/build-api.ts +846 -846
- package/src/builtin-editors.grid.test.ts +83 -83
- package/src/cell-formatting.ts +171 -171
- package/src/cell-render.test.ts +513 -513
- package/src/cell-render.ts +496 -496
- package/src/cell-values.ts +148 -148
- package/src/chart-export.ts +202 -202
- package/src/chart-view.svelte.ts +36 -36
- package/src/chart.ts +2321 -2321
- package/src/collaboration.test.ts +104 -104
- package/src/collaboration.ts +167 -167
- package/src/column-groups.ts +78 -78
- package/src/core.performance.test.ts +30 -30
- package/src/core.ts +1865 -1865
- package/src/createAutocomplete.svelte.ts +132 -132
- package/src/createCombobox.svelte.ts +191 -191
- package/src/createCountryInput.svelte.ts +157 -157
- package/src/createDropdownList.svelte.ts +168 -168
- package/src/createForm.svelte.ts +386 -386
- package/src/createGrid.svelte.ts +42 -42
- package/src/createGrid.test.ts +10 -10
- package/src/createGridState.svelte.ts +17 -17
- package/src/createListbox.svelte.ts +250 -250
- package/src/createMenu.svelte.ts +224 -224
- package/src/createPopoverSelect.svelte.ts +213 -213
- package/src/createSlider.svelte.ts +191 -191
- package/src/createTooltip.svelte.ts +144 -144
- package/src/createTree.svelte.ts +322 -322
- package/src/datetime/date-core.ts +206 -206
- package/src/datetime/date-restrict.ts +61 -61
- package/src/datetime/timezone.ts +135 -135
- package/src/dock-manager-model.ts +596 -596
- package/src/dock-model.ts +374 -374
- package/src/editing.test.ts +974 -974
- package/src/editing.ts +618 -609
- package/src/editor-contract.ts +171 -171
- package/src/editor-registry.grid.test.ts +144 -144
- package/src/editor-registry.ts +122 -122
- package/src/export-data-api.test.ts +126 -126
- package/src/export-format.test.ts +107 -107
- package/src/export-format.ts +601 -601
- package/src/filter-operators.ts +160 -160
- package/src/filtering/excel-filters.ts +325 -325
- package/src/flex-render.ts +3 -3
- package/src/form-field.ts +127 -127
- package/src/group-display.test.ts +167 -167
- package/src/group-display.ts +200 -200
- package/src/headless.ts +87 -87
- package/src/js-scroller.svelte.ts +173 -173
- package/src/keyboard-handlers.ts +270 -270
- package/src/keyboard.test.ts +59 -59
- package/src/keyboard.ts +97 -97
- package/src/list-nav.test.ts +49 -49
- package/src/list-nav.ts +29 -29
- package/src/list-option.test.ts +56 -56
- package/src/list-option.ts +179 -179
- package/src/menus.ts +597 -597
- package/src/merge-objects.ts +48 -48
- package/src/overlays.test.ts +90 -90
- package/src/positioning.ts +268 -268
- package/src/render-component.ts +28 -28
- package/src/row-drag.test.ts +401 -401
- package/src/row-drag.ts +419 -419
- package/src/row-resize.test.ts +524 -524
- package/src/row-resize.ts +228 -228
- package/src/scheduler-ical.ts +181 -181
- package/src/scheduler-model.test.ts +562 -562
- package/src/scheduler-model.ts +873 -873
- package/src/selection.test.ts +885 -885
- package/src/server-data-source.test.ts +383 -383
- package/src/server-data-source.ts +469 -469
- package/src/sparkline.test.ts +68 -68
- package/src/sparkline.ts +169 -169
- package/src/spreadsheet.test.ts +488 -488
- package/src/spreadsheet.ts +312 -312
- package/src/static-functions.ts +11 -11
- package/src/subscribe.ts +38 -38
- package/src/summaries.ts +113 -113
- package/src/svgrid-wrapper.types.ts +563 -563
- package/src/svgrid.async-editor-options.test.ts +273 -273
- package/src/svgrid.auto-row-height.test.ts +204 -204
- package/src/svgrid.behavior.test.ts +910 -910
- package/src/svgrid.charting.test.ts +534 -534
- package/src/svgrid.comments-autocomplete.test.ts +127 -127
- package/src/svgrid.context-menu.test.ts +147 -147
- package/src/svgrid.features.test.ts +157 -157
- package/src/svgrid.filter-depth.test.ts +163 -163
- package/src/svgrid.filter-menu-listbox.svelte.test.ts +382 -377
- package/src/svgrid.filter-menu-scroll.test.ts +112 -112
- package/src/svgrid.grand-total.test.ts +188 -188
- package/src/svgrid.group-display-mode.test.ts +171 -171
- package/src/svgrid.group-footers.test.ts +121 -121
- package/src/svgrid.group-pagination.test.ts +153 -153
- package/src/svgrid.new-features.wrapper.test.ts +251 -251
- package/src/svgrid.tree-data.test.ts +186 -186
- package/src/svgrid.wrapper.test.ts +63 -63
- package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
- package/src/test-setup.ts +62 -62
- package/src/themes/index.ts +288 -288
- package/src/toast-store.svelte.ts +250 -250
- package/src/toast-store.test.ts +147 -147
- package/src/tree-row-model.test.ts +168 -168
- package/src/ui-buttons.test.ts +144 -144
- package/src/ui-inputs.test.ts +118 -118
- package/src/ui-localization.test.ts +113 -113
- package/src/ui-range.test.ts +70 -70
- package/src/ui-selection.test.ts +155 -155
- package/src/ui-tier1.test.ts +142 -142
- package/src/virtual.test.ts +88 -88
- package/src/virtualization/column-virtualizer.test.ts +27 -27
- package/src/virtualization/column-virtualizer.ts +30 -30
- package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
- package/src/virtualization/types.ts +30 -30
- package/src/virtualization/virtualizer.test.ts +47 -47
- package/src/virtualization/virtualizer.ts +322 -322
package/dist/SvTreeSelect.svelte
CHANGED
|
@@ -1,239 +1,239 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
export type { TreeSelectNode } from './ui-app.types'
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<script lang="ts">
|
|
6
|
-
/**
|
|
7
|
-
* SvTreeSelect - a single-select dropdown that shows an indented, collapsible
|
|
8
|
-
* tree in its panel (pick a node from a hierarchy). The open / position /
|
|
9
|
-
* dismiss / roving / keyboard / ARIA mechanics come from the shared
|
|
10
|
-
* `createPopoverSelect` core (with ArrowLeft/Right handled via onExtraKey for
|
|
11
|
-
* expand/collapse); this component adds the tree flattening + rendering. Covers
|
|
12
|
-
* the "cascader / tree select" pattern without depending on SvTree.
|
|
13
|
-
*/
|
|
14
|
-
import type { TreeSelectNode } from './ui-app.types'
|
|
15
|
-
import SvField from './SvField.svelte'
|
|
16
|
-
import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
|
|
17
|
-
import { portalToBody, popIn } from './popover'
|
|
18
|
-
import { createPopoverSelect } from './createPopoverSelect.svelte'
|
|
19
|
-
import { flattenVisible, findNodePath } from './tree-select'
|
|
20
|
-
|
|
21
|
-
type Props = Pick<
|
|
22
|
-
SvEditorProps,
|
|
23
|
-
'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
|
|
24
|
-
> & {
|
|
25
|
-
nodes: ReadonlyArray<TreeSelectNode>
|
|
26
|
-
value?: string | number | null
|
|
27
|
-
onChange?: (value: string | number) => void
|
|
28
|
-
onCommit?: (value: string | number) => void
|
|
29
|
-
onCancel?: () => void
|
|
30
|
-
placeholder?: string
|
|
31
|
-
showPath?: boolean
|
|
32
|
-
expandedIds?: ReadonlyArray<string | number>
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
let {
|
|
36
|
-
nodes,
|
|
37
|
-
value = $bindable<string | number | null>(null),
|
|
38
|
-
onChange,
|
|
39
|
-
placeholder = 'Select…',
|
|
40
|
-
showPath = false,
|
|
41
|
-
expandedIds = [],
|
|
42
|
-
disabled = false,
|
|
43
|
-
readonly = false,
|
|
44
|
-
label,
|
|
45
|
-
hint,
|
|
46
|
-
error,
|
|
47
|
-
required = false,
|
|
48
|
-
invalid = false,
|
|
49
|
-
block = false,
|
|
50
|
-
size = 'md',
|
|
51
|
-
id,
|
|
52
|
-
name,
|
|
53
|
-
dir,
|
|
54
|
-
ariaLabel,
|
|
55
|
-
loading = false,
|
|
56
|
-
}: Props = $props()
|
|
57
|
-
|
|
58
|
-
const autoId = nextEditorId('sv-ts')
|
|
59
|
-
const uid = $derived(id ?? autoId)
|
|
60
|
-
|
|
61
|
-
let expanded = $state(new Set<string | number>(expandedIds))
|
|
62
|
-
let triggerEl = $state<HTMLButtonElement | null>(null)
|
|
63
|
-
let panelEl = $state<HTMLDivElement | null>(null)
|
|
64
|
-
let treeEl = $state<HTMLUListElement | null>(null)
|
|
65
|
-
|
|
66
|
-
const rows = $derived(flattenVisible(nodes, expanded))
|
|
67
|
-
const selectedPath = $derived(value == null ? null : findNodePath(nodes, value))
|
|
68
|
-
const triggerText = $derived(
|
|
69
|
-
!selectedPath
|
|
70
|
-
? ''
|
|
71
|
-
: showPath
|
|
72
|
-
? selectedPath.map((n) => n.label).join(' / ')
|
|
73
|
-
: selectedPath[selectedPath.length - 1]!.label,
|
|
74
|
-
)
|
|
75
|
-
|
|
76
|
-
function setExpanded(v: string | number, on: boolean) {
|
|
77
|
-
const next = new Set(expanded)
|
|
78
|
-
on ? next.add(v) : next.delete(v)
|
|
79
|
-
expanded = next
|
|
80
|
-
}
|
|
81
|
-
function toggleExpand(v: string | number) {
|
|
82
|
-
setExpanded(v, !expanded.has(v))
|
|
83
|
-
}
|
|
84
|
-
function pick(node: TreeSelectNode) {
|
|
85
|
-
if (node.disabled) return
|
|
86
|
-
value = node.value // enables bind:value
|
|
87
|
-
onChange?.(node.value)
|
|
88
|
-
ts.closePanel()
|
|
89
|
-
}
|
|
90
|
-
function onRowClick(row: { node: TreeSelectNode; hasChildren: boolean }) {
|
|
91
|
-
if (row.hasChildren) toggleExpand(row.node.value)
|
|
92
|
-
else pick(row.node)
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const ts = createPopoverSelect({
|
|
96
|
-
itemCount: () => rows.length,
|
|
97
|
-
disabled: (i) => !!rows[i]?.node.disabled,
|
|
98
|
-
readonly: () => readonly,
|
|
99
|
-
onSelect: (i) => { const row = rows[i]; if (row) onRowClick(row) },
|
|
100
|
-
getTrigger: () => triggerEl,
|
|
101
|
-
getPanel: () => panelEl,
|
|
102
|
-
getInitialFocus: () => treeEl,
|
|
103
|
-
closeOnSelect: () => false, // onRowClick handles pick + close (branches stay open)
|
|
104
|
-
initialActive: () => Math.max(0, rows.findIndex((r) => r.node.value === value)),
|
|
105
|
-
minWidth: () => 220,
|
|
106
|
-
estimatedHeight: () => 300,
|
|
107
|
-
onExtraKey: (e, act) => {
|
|
108
|
-
const row = rows[act]
|
|
109
|
-
if (!row) return false
|
|
110
|
-
// "expand" opens the node or steps into the first child; "collapse" closes
|
|
111
|
-
// it or jumps to the parent - same fallback as createTree's core.
|
|
112
|
-
const expand = () => {
|
|
113
|
-
if (row.hasChildren && !row.expanded) setExpanded(row.node.value, true)
|
|
114
|
-
else if (row.hasChildren && row.expanded) ts.active = Math.min(act + 1, rows.length - 1)
|
|
115
|
-
}
|
|
116
|
-
const collapse = () => {
|
|
117
|
-
if (row.hasChildren && row.expanded) setExpanded(row.node.value, false)
|
|
118
|
-
else {
|
|
119
|
-
let pi = act - 1
|
|
120
|
-
while (pi >= 0 && rows[pi]!.depth >= row.depth) pi--
|
|
121
|
-
if (pi >= 0) ts.active = pi
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
if (e.key === 'ArrowRight') { e.preventDefault(); expand(); return true }
|
|
125
|
-
if (e.key === 'ArrowLeft') { e.preventDefault(); collapse(); return true }
|
|
126
|
-
return false
|
|
127
|
-
},
|
|
128
|
-
idPrefix: 'sv-ts',
|
|
129
|
-
})
|
|
130
|
-
</script>
|
|
131
|
-
|
|
132
|
-
<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
|
|
133
|
-
<div class="sv-ts sv-ts--{size}"
|
|
134
|
-
class:is-block={block} class:is-disabled={disabled}>
|
|
135
|
-
<button
|
|
136
|
-
bind:this={triggerEl}
|
|
137
|
-
type="button"
|
|
138
|
-
class="sv-ts__trigger"
|
|
139
|
-
class:is-invalid={invalid}
|
|
140
|
-
{disabled}
|
|
141
|
-
onclick={() => ts.toggle()}
|
|
142
|
-
{...ts.triggerProps('tree')}
|
|
143
|
-
{...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
|
|
144
|
-
>
|
|
145
|
-
<span class="sv-ts__value" class:is-placeholder={!triggerText}>{triggerText || placeholder}</span>
|
|
146
|
-
<span class="sv-ts__arrow" aria-hidden="true">▾</span>
|
|
147
|
-
</button>
|
|
148
|
-
{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
|
|
149
|
-
</div>
|
|
150
|
-
</SvField>
|
|
151
|
-
|
|
152
|
-
{#if ts.open}
|
|
153
|
-
<div
|
|
154
|
-
bind:this={panelEl}
|
|
155
|
-
class="sv-ts__panel"
|
|
156
|
-
dir={dir}
|
|
157
|
-
use:portalToBody
|
|
158
|
-
use:popIn={{ up: ts.rect.openUpward }}
|
|
159
|
-
style:position="fixed"
|
|
160
|
-
style:top={`${ts.rect.top}px`}
|
|
161
|
-
style:left={`${ts.rect.left}px`}
|
|
162
|
-
style:min-width={`${ts.rect.width}px`}
|
|
163
|
-
>
|
|
164
|
-
<ul
|
|
165
|
-
bind:this={treeEl}
|
|
166
|
-
id={ts.panelId}
|
|
167
|
-
class="sv-ts__tree"
|
|
168
|
-
role="tree"
|
|
169
|
-
aria-label={label ?? ariaLabel ?? 'Tree'}
|
|
170
|
-
aria-activedescendant={ts.activeDescendant()}
|
|
171
|
-
tabindex="0"
|
|
172
|
-
style:max-height={`${ts.rect.maxHeight}px`}
|
|
173
|
-
onkeydown={ts.onPanelKeydown}
|
|
174
|
-
>
|
|
175
|
-
{#each rows as row, i (row.node.value)}
|
|
176
|
-
<li
|
|
177
|
-
class="sv-ts__row"
|
|
178
|
-
class:is-active={ts.isActive(i)}
|
|
179
|
-
class:is-selected={row.node.value === value}
|
|
180
|
-
class:is-disabled={row.node.disabled}
|
|
181
|
-
role="treeitem"
|
|
182
|
-
aria-selected={row.node.value === value}
|
|
183
|
-
aria-expanded={row.hasChildren ? row.expanded : undefined}
|
|
184
|
-
style:padding-inline-start={`${8 + row.depth * 16}px`}
|
|
185
|
-
onclick={() => onRowClick(row)}
|
|
186
|
-
{...ts.itemProps(i)}
|
|
187
|
-
>
|
|
188
|
-
{#if row.hasChildren}
|
|
189
|
-
<!-- Same chevron as SvTree and the grid's expanders. -->
|
|
190
|
-
<span class="sv-ts__chev" class:is-open={row.expanded} aria-hidden="true">
|
|
191
|
-
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
|
|
192
|
-
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
|
|
193
|
-
</span>
|
|
194
|
-
{:else}
|
|
195
|
-
<span class="sv-ts__chev sv-ts__chev--leaf" aria-hidden="true"></span>
|
|
196
|
-
{/if}
|
|
197
|
-
<span class="sv-ts__label">{row.node.label}</span>
|
|
198
|
-
</li>
|
|
199
|
-
{/each}
|
|
200
|
-
</ul>
|
|
201
|
-
</div>
|
|
202
|
-
{/if}
|
|
203
|
-
|
|
204
|
-
<style>
|
|
205
|
-
.sv-ts { --_accent: var(--sg-accent, #2563eb); display: inline-flex; width: 240px; }
|
|
206
|
-
.sv-ts.is-disabled { opacity: 0.6; }
|
|
207
|
-
.sv-ts__trigger {
|
|
208
|
-
flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: start;
|
|
209
|
-
background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
|
|
210
|
-
border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
|
|
211
|
-
font: inherit; cursor: pointer; padding: 0 9px;
|
|
212
|
-
}
|
|
213
|
-
.sv-ts--sm .sv-ts__trigger { height: 28px; font-size: 12px; }
|
|
214
|
-
.sv-ts--md .sv-ts__trigger { height: 34px; font-size: 13px; }
|
|
215
|
-
.sv-ts--lg .sv-ts__trigger { height: 40px; font-size: 15px; }
|
|
216
|
-
.sv-ts__trigger:focus-visible { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
|
|
217
|
-
.sv-ts__trigger.is-invalid { border-color: var(--sg-danger, #dc2626); }
|
|
218
|
-
.sv-ts__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
219
|
-
.sv-ts__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
|
|
220
|
-
.sv-ts__arrow { color: var(--sg-muted, #64748b); font-size: 10px; }
|
|
221
|
-
|
|
222
|
-
:global(.sv-ts__panel) {
|
|
223
|
-
z-index: 2147483646; max-height: 320px; max-width: 92vw; overflow: hidden;
|
|
224
|
-
background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
|
|
225
|
-
border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
|
|
226
|
-
box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
|
|
227
|
-
}
|
|
228
|
-
:global(.sv-ts__tree) { list-style: none; margin: 0; padding: 4px; overflow: auto; max-height: 320px; outline: none; }
|
|
229
|
-
:global(.sv-ts__row) { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
|
|
230
|
-
:global(.sv-ts__row.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
|
|
231
|
-
:global(.sv-ts__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
|
|
232
|
-
:global(.sv-ts__row.is-disabled) { opacity: 0.5; cursor: not-allowed; }
|
|
233
|
-
:global(.sv-ts__chev) { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sg-muted, #64748b); transition: transform 0.12s; }
|
|
234
|
-
:global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
|
|
235
|
-
:global(.sv-ts__chev--leaf) { visibility: hidden; }
|
|
236
|
-
:global(.sv-ts__label) { flex: 1; white-space: nowrap; }
|
|
237
|
-
/* Fill the container - see `block` in SvEditorProps. */
|
|
238
|
-
.sv-ts.is-block { width: 100%; max-width: 100%; }
|
|
239
|
-
</style>
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
export type { TreeSelectNode } from './ui-app.types'
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script lang="ts">
|
|
6
|
+
/**
|
|
7
|
+
* SvTreeSelect - a single-select dropdown that shows an indented, collapsible
|
|
8
|
+
* tree in its panel (pick a node from a hierarchy). The open / position /
|
|
9
|
+
* dismiss / roving / keyboard / ARIA mechanics come from the shared
|
|
10
|
+
* `createPopoverSelect` core (with ArrowLeft/Right handled via onExtraKey for
|
|
11
|
+
* expand/collapse); this component adds the tree flattening + rendering. Covers
|
|
12
|
+
* the "cascader / tree select" pattern without depending on SvTree.
|
|
13
|
+
*/
|
|
14
|
+
import type { TreeSelectNode } from './ui-app.types'
|
|
15
|
+
import SvField from './SvField.svelte'
|
|
16
|
+
import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
|
|
17
|
+
import { portalToBody, popIn } from './popover'
|
|
18
|
+
import { createPopoverSelect } from './createPopoverSelect.svelte'
|
|
19
|
+
import { flattenVisible, findNodePath } from './tree-select'
|
|
20
|
+
|
|
21
|
+
type Props = Pick<
|
|
22
|
+
SvEditorProps,
|
|
23
|
+
'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
|
|
24
|
+
> & {
|
|
25
|
+
nodes: ReadonlyArray<TreeSelectNode>
|
|
26
|
+
value?: string | number | null
|
|
27
|
+
onChange?: (value: string | number) => void
|
|
28
|
+
onCommit?: (value: string | number) => void
|
|
29
|
+
onCancel?: () => void
|
|
30
|
+
placeholder?: string
|
|
31
|
+
showPath?: boolean
|
|
32
|
+
expandedIds?: ReadonlyArray<string | number>
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
let {
|
|
36
|
+
nodes,
|
|
37
|
+
value = $bindable<string | number | null>(null),
|
|
38
|
+
onChange,
|
|
39
|
+
placeholder = 'Select…',
|
|
40
|
+
showPath = false,
|
|
41
|
+
expandedIds = [],
|
|
42
|
+
disabled = false,
|
|
43
|
+
readonly = false,
|
|
44
|
+
label,
|
|
45
|
+
hint,
|
|
46
|
+
error,
|
|
47
|
+
required = false,
|
|
48
|
+
invalid = false,
|
|
49
|
+
block = false,
|
|
50
|
+
size = 'md',
|
|
51
|
+
id,
|
|
52
|
+
name,
|
|
53
|
+
dir,
|
|
54
|
+
ariaLabel,
|
|
55
|
+
loading = false,
|
|
56
|
+
}: Props = $props()
|
|
57
|
+
|
|
58
|
+
const autoId = nextEditorId('sv-ts')
|
|
59
|
+
const uid = $derived(id ?? autoId)
|
|
60
|
+
|
|
61
|
+
let expanded = $state(new Set<string | number>(expandedIds))
|
|
62
|
+
let triggerEl = $state<HTMLButtonElement | null>(null)
|
|
63
|
+
let panelEl = $state<HTMLDivElement | null>(null)
|
|
64
|
+
let treeEl = $state<HTMLUListElement | null>(null)
|
|
65
|
+
|
|
66
|
+
const rows = $derived(flattenVisible(nodes, expanded))
|
|
67
|
+
const selectedPath = $derived(value == null ? null : findNodePath(nodes, value))
|
|
68
|
+
const triggerText = $derived(
|
|
69
|
+
!selectedPath
|
|
70
|
+
? ''
|
|
71
|
+
: showPath
|
|
72
|
+
? selectedPath.map((n) => n.label).join(' / ')
|
|
73
|
+
: selectedPath[selectedPath.length - 1]!.label,
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
function setExpanded(v: string | number, on: boolean) {
|
|
77
|
+
const next = new Set(expanded)
|
|
78
|
+
on ? next.add(v) : next.delete(v)
|
|
79
|
+
expanded = next
|
|
80
|
+
}
|
|
81
|
+
function toggleExpand(v: string | number) {
|
|
82
|
+
setExpanded(v, !expanded.has(v))
|
|
83
|
+
}
|
|
84
|
+
function pick(node: TreeSelectNode) {
|
|
85
|
+
if (node.disabled) return
|
|
86
|
+
value = node.value // enables bind:value
|
|
87
|
+
onChange?.(node.value)
|
|
88
|
+
ts.closePanel()
|
|
89
|
+
}
|
|
90
|
+
function onRowClick(row: { node: TreeSelectNode; hasChildren: boolean }) {
|
|
91
|
+
if (row.hasChildren) toggleExpand(row.node.value)
|
|
92
|
+
else pick(row.node)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const ts = createPopoverSelect({
|
|
96
|
+
itemCount: () => rows.length,
|
|
97
|
+
disabled: (i) => !!rows[i]?.node.disabled,
|
|
98
|
+
readonly: () => readonly,
|
|
99
|
+
onSelect: (i) => { const row = rows[i]; if (row) onRowClick(row) },
|
|
100
|
+
getTrigger: () => triggerEl,
|
|
101
|
+
getPanel: () => panelEl,
|
|
102
|
+
getInitialFocus: () => treeEl,
|
|
103
|
+
closeOnSelect: () => false, // onRowClick handles pick + close (branches stay open)
|
|
104
|
+
initialActive: () => Math.max(0, rows.findIndex((r) => r.node.value === value)),
|
|
105
|
+
minWidth: () => 220,
|
|
106
|
+
estimatedHeight: () => 300,
|
|
107
|
+
onExtraKey: (e, act) => {
|
|
108
|
+
const row = rows[act]
|
|
109
|
+
if (!row) return false
|
|
110
|
+
// "expand" opens the node or steps into the first child; "collapse" closes
|
|
111
|
+
// it or jumps to the parent - same fallback as createTree's core.
|
|
112
|
+
const expand = () => {
|
|
113
|
+
if (row.hasChildren && !row.expanded) setExpanded(row.node.value, true)
|
|
114
|
+
else if (row.hasChildren && row.expanded) ts.active = Math.min(act + 1, rows.length - 1)
|
|
115
|
+
}
|
|
116
|
+
const collapse = () => {
|
|
117
|
+
if (row.hasChildren && row.expanded) setExpanded(row.node.value, false)
|
|
118
|
+
else {
|
|
119
|
+
let pi = act - 1
|
|
120
|
+
while (pi >= 0 && rows[pi]!.depth >= row.depth) pi--
|
|
121
|
+
if (pi >= 0) ts.active = pi
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
if (e.key === 'ArrowRight') { e.preventDefault(); expand(); return true }
|
|
125
|
+
if (e.key === 'ArrowLeft') { e.preventDefault(); collapse(); return true }
|
|
126
|
+
return false
|
|
127
|
+
},
|
|
128
|
+
idPrefix: 'sv-ts',
|
|
129
|
+
})
|
|
130
|
+
</script>
|
|
131
|
+
|
|
132
|
+
<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
|
|
133
|
+
<div class="sv-ts sv-ts--{size}"
|
|
134
|
+
class:is-block={block} class:is-disabled={disabled}>
|
|
135
|
+
<button
|
|
136
|
+
bind:this={triggerEl}
|
|
137
|
+
type="button"
|
|
138
|
+
class="sv-ts__trigger"
|
|
139
|
+
class:is-invalid={invalid}
|
|
140
|
+
{disabled}
|
|
141
|
+
onclick={() => ts.toggle()}
|
|
142
|
+
{...ts.triggerProps('tree')}
|
|
143
|
+
{...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
|
|
144
|
+
>
|
|
145
|
+
<span class="sv-ts__value" class:is-placeholder={!triggerText}>{triggerText || placeholder}</span>
|
|
146
|
+
<span class="sv-ts__arrow" aria-hidden="true">▾</span>
|
|
147
|
+
</button>
|
|
148
|
+
{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
|
|
149
|
+
</div>
|
|
150
|
+
</SvField>
|
|
151
|
+
|
|
152
|
+
{#if ts.open}
|
|
153
|
+
<div
|
|
154
|
+
bind:this={panelEl}
|
|
155
|
+
class="sv-ts__panel"
|
|
156
|
+
dir={dir}
|
|
157
|
+
use:portalToBody
|
|
158
|
+
use:popIn={{ up: ts.rect.openUpward }}
|
|
159
|
+
style:position="fixed"
|
|
160
|
+
style:top={`${ts.rect.top}px`}
|
|
161
|
+
style:left={`${ts.rect.left}px`}
|
|
162
|
+
style:min-width={`${ts.rect.width}px`}
|
|
163
|
+
>
|
|
164
|
+
<ul
|
|
165
|
+
bind:this={treeEl}
|
|
166
|
+
id={ts.panelId}
|
|
167
|
+
class="sv-ts__tree"
|
|
168
|
+
role="tree"
|
|
169
|
+
aria-label={label ?? ariaLabel ?? 'Tree'}
|
|
170
|
+
aria-activedescendant={ts.activeDescendant()}
|
|
171
|
+
tabindex="0"
|
|
172
|
+
style:max-height={`${ts.rect.maxHeight}px`}
|
|
173
|
+
onkeydown={ts.onPanelKeydown}
|
|
174
|
+
>
|
|
175
|
+
{#each rows as row, i (row.node.value)}
|
|
176
|
+
<li
|
|
177
|
+
class="sv-ts__row"
|
|
178
|
+
class:is-active={ts.isActive(i)}
|
|
179
|
+
class:is-selected={row.node.value === value}
|
|
180
|
+
class:is-disabled={row.node.disabled}
|
|
181
|
+
role="treeitem"
|
|
182
|
+
aria-selected={row.node.value === value}
|
|
183
|
+
aria-expanded={row.hasChildren ? row.expanded : undefined}
|
|
184
|
+
style:padding-inline-start={`${8 + row.depth * 16}px`}
|
|
185
|
+
onclick={() => onRowClick(row)}
|
|
186
|
+
{...ts.itemProps(i)}
|
|
187
|
+
>
|
|
188
|
+
{#if row.hasChildren}
|
|
189
|
+
<!-- Same chevron as SvTree and the grid's expanders. -->
|
|
190
|
+
<span class="sv-ts__chev" class:is-open={row.expanded} aria-hidden="true">
|
|
191
|
+
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
|
|
192
|
+
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
|
|
193
|
+
</span>
|
|
194
|
+
{:else}
|
|
195
|
+
<span class="sv-ts__chev sv-ts__chev--leaf" aria-hidden="true"></span>
|
|
196
|
+
{/if}
|
|
197
|
+
<span class="sv-ts__label">{row.node.label}</span>
|
|
198
|
+
</li>
|
|
199
|
+
{/each}
|
|
200
|
+
</ul>
|
|
201
|
+
</div>
|
|
202
|
+
{/if}
|
|
203
|
+
|
|
204
|
+
<style>
|
|
205
|
+
.sv-ts { --_accent: var(--sg-accent, #2563eb); display: inline-flex; width: 240px; }
|
|
206
|
+
.sv-ts.is-disabled { opacity: 0.6; }
|
|
207
|
+
.sv-ts__trigger {
|
|
208
|
+
flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: start;
|
|
209
|
+
background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
|
|
210
|
+
border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
|
|
211
|
+
font: inherit; cursor: pointer; padding: 0 9px;
|
|
212
|
+
}
|
|
213
|
+
.sv-ts--sm .sv-ts__trigger { height: 28px; font-size: 12px; }
|
|
214
|
+
.sv-ts--md .sv-ts__trigger { height: 34px; font-size: 13px; }
|
|
215
|
+
.sv-ts--lg .sv-ts__trigger { height: 40px; font-size: 15px; }
|
|
216
|
+
.sv-ts__trigger:focus-visible { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
|
|
217
|
+
.sv-ts__trigger.is-invalid { border-color: var(--sg-danger, #dc2626); }
|
|
218
|
+
.sv-ts__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
219
|
+
.sv-ts__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
|
|
220
|
+
.sv-ts__arrow { color: var(--sg-muted, #64748b); font-size: 10px; }
|
|
221
|
+
|
|
222
|
+
:global(.sv-ts__panel) {
|
|
223
|
+
z-index: 2147483646; max-height: 320px; max-width: 92vw; overflow: hidden;
|
|
224
|
+
background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
|
|
225
|
+
border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
|
|
226
|
+
box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
|
|
227
|
+
}
|
|
228
|
+
:global(.sv-ts__tree) { list-style: none; margin: 0; padding: 4px; overflow: auto; max-height: 320px; outline: none; }
|
|
229
|
+
:global(.sv-ts__row) { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
|
|
230
|
+
:global(.sv-ts__row.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
|
|
231
|
+
:global(.sv-ts__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
|
|
232
|
+
:global(.sv-ts__row.is-disabled) { opacity: 0.5; cursor: not-allowed; }
|
|
233
|
+
:global(.sv-ts__chev) { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sg-muted, #64748b); transition: transform 0.12s; }
|
|
234
|
+
:global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
|
|
235
|
+
:global(.sv-ts__chev--leaf) { visibility: hidden; }
|
|
236
|
+
:global(.sv-ts__label) { flex: 1; white-space: nowrap; }
|
|
237
|
+
/* Fill the container - see `block` in SvEditorProps. */
|
|
238
|
+
.sv-ts.is-block { width: 100%; max-width: 100%; }
|
|
239
|
+
</style>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Gn as e, fo as t, po as n } from "./src-
|
|
1
|
+
import { Gn as e, fo as t, po as n } from "./src-C8QjSaq-.js";
|
|
2
2
|
import { E as r, F as i, G as a, H as o, I as s, L as c, N as l, Q as u, U as d, V as f, X as p, Y as m, Z as h, _ as g, at as _, b as v, d as y, et as b, f as x, ft as S, g as ee, h as C, it as w, j as T, k as E, lt as D, m as O, mt as te, nt as k, o as ne, pt as A, st as j, t as M, tt as N, u as P, ut as re, v as F, w as ie } from "./disclose-version-Dr7rEVv-.js";
|
|
3
3
|
import { S as ae, _ as oe, j as se, k as ce } from "./editor-registry-BhgE3S84.js";
|
|
4
|
-
import { o as le } from "./SvDateTimePicker-
|
|
4
|
+
import { o as le } from "./SvDateTimePicker-sonaH0oh.js";
|
|
5
5
|
//#region src/GridMenus.svelte
|
|
6
6
|
var ue = c("<option> </option>"), de = c("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), fe = c("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), pe = c("<option> </option>"), me = c("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), he = c("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), ge = c("<div class=\"sv-grid-menu-join\" role=\"radiogroup\" aria-label=\"Combine conditions\"><button type=\"button\">AND</button> <button type=\"button\">OR</button> <button type=\"button\" class=\"sv-grid-menu-join-x\" title=\"Remove second condition\" aria-label=\"Remove second condition\">×</button></div> <select class=\"sv-grid-menu-operator-select\" aria-label=\"Second filter condition\"></select> <!>", 1), _e = c("<button type=\"button\" class=\"sv-grid-menu-add-cond\">+ Add condition</button>"), ve = c("<!> <!>", 1), ye = c("<span class=\"sv-grid-menu-head-note\">and the condition above</span>"), be = c("<span class=\"sv-grid-menu-head-note\"> </span>"), xe = c("<div class=\"sv-grid-facet-empty\">No values</div>"), Se = c("<div class=\"sv-grid-facet-note\"> </div>"), Ce = c("<div class=\"sv-grid-menu-filter\"><div class=\"sv-grid-menu-filter-head\"><span class=\"sv-grid-header-icon\"><!></span> Filter\n condition</div> <select class=\"sv-grid-menu-operator-select\" aria-label=\"Filter condition\"></select> <!> <div class=\"sv-grid-menu-sep\"></div> <div class=\"sv-grid-menu-filter-head\">Values <!></div> <input class=\"sv-grid-menu-search\" placeholder=\"Search values...\"/> <label class=\"sv-grid-facet sv-grid-facet-all\"><input type=\"checkbox\"/> <span class=\"sv-grid-facet-label\"> </span></label> <!> <!> <div class=\"sv-grid-menu-actions\"><button type=\"button\" class=\"sv-grid-menu-btn\">Clear filter</button> <button type=\"button\" class=\"sv-grid-menu-btn sv-grid-menu-btn-primary\">Done</button></div></div>"), we = c("<div role=\"tooltip\"> </div>"), I = c("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div>"), Te = c("<button type=\"button\" role=\"tab\">Filter</button>"), Ee = c("<div class=\"sv-grid-menu-tabs\" role=\"tablist\"><button type=\"button\" role=\"tab\">General</button> <!> <button type=\"button\" role=\"tab\">Columns</button></div>"), De = c("<div class=\"sv-grid-menu-filter-head\">Visible columns</div> <!>", 1), L = c("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Sort\n ascending</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Sort\n descending</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Remove sort</button>", 1), Oe = c("<div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Pin to left</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Pin to right</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Unpin column</button>", 1), ke = c("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Autosize\n this column</button>"), Ae = c("<div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Group\n by this column</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Remove grouping</button>", 1), R = c("<button type=\"button\" role=\"menuitem\" aria-haspopup=\"menu\"><span class=\"sv-grid-header-icon\"><!></span> Choose columns <span class=\"sv-grid-header-icon sv-grid-menu-item-chevron\"><!></span></button>"), z = c("<!> <!> <div class=\"sv-grid-menu-sep\"></div> <!> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Autosize\n all columns</button> <!> <div class=\"sv-grid-menu-sep\"></div> <!> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Reset columns</button>", 1), B = c("<div class=\"sv-grid-menu sv-grid-column-menu\" role=\"menu\"><!> <!></div>"), je = c("<div class=\"sv-grid-menu sv-grid-filter-menu\" role=\"menu\" tabindex=\"-1\"><!></div>"), Me = c("<div class=\"sv-grid-menu sv-grid-choose-columns-menu\" role=\"menu\"><div class=\"sv-grid-menu-filter-head\">Visible columns</div> <!></div>"), Ne = c("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitemradio\"><span class=\"sv-grid-header-icon\"><!></span> </button>"), Pe = c("<div class=\"sv-grid-menu sv-grid-operator-menu\" role=\"menu\"></div>"), Fe = c("<div class=\"sv-grid-facet-empty\">No values</div>"), Ie = c("<div class=\"sv-grid-menu sv-grid-in-suggest\"><!></div>"), Le = c("<div class=\"sv-grid-menu-sep\"></div>"), Re = c("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"> </button>"), V = c("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div> <div class=\"sv-grid-menu sv-grid-context-menu\" role=\"menu\"></div>", 1), ze = c("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div> <div class=\"sv-grid-menu sv-grid-comment-editor\" role=\"dialog\" aria-label=\"Edit comment\"><textarea class=\"sv-grid-comment-textarea\" rows=\"3\" placeholder=\"Add a comment…\"></textarea> <div class=\"sv-grid-comment-actions\"><button type=\"button\" class=\"sv-grid-comment-remove\">Remove</button> <span class=\"sv-grid-comment-spacer\"></span> <button type=\"button\" class=\"sv-grid-comment-cancel\">Cancel</button> <button type=\"button\" class=\"sv-grid-comment-save\">Save</button></div></div>", 1), Be = c("<!> <!> <!> <!> <!> <!> <!> <!> <!>", 1);
|
|
7
7
|
function Ve(c, f) {
|
|
@@ -252,7 +252,7 @@ function Ve(c, f) {
|
|
|
252
252
|
let e = a(K) ?? a(G);
|
|
253
253
|
if (!e) return;
|
|
254
254
|
let t = a(Y).find((t) => t.id === e);
|
|
255
|
-
se(t?.columnDef.editorType) && (a(St) || import("./SvDateTimePicker-
|
|
255
|
+
se(t?.columnDef.editorType) && (a(St) || import("./SvDateTimePicker-sonaH0oh.js").then((e) => e.n).then((e) => w(St, e.default, !0)), a(Ct) || import("./SvDateRangeInput-CaOuMs8O.js").then((e) => e.n).then((e) => w(Ct, e.default, !0)));
|
|
256
256
|
});
|
|
257
257
|
function wt(e) {
|
|
258
258
|
requestAnimationFrame(() => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Gn as e, fo as t, po as n } from "./src-
|
|
1
|
+
import { Gn as e, fo as t, po as n } from "./src-D0hO2eYN.js";
|
|
2
2
|
import { S as r, _ as i, j as a, k as o } from "./editor-registry-BhgE3S84.js";
|
|
3
|
-
import { o as s } from "./SvDateTimePicker-
|
|
3
|
+
import { o as s } from "./SvDateTimePicker-CCbDZNZB.js";
|
|
4
4
|
import * as c from "svelte/internal/client";
|
|
5
5
|
import "svelte/internal/disclose-version";
|
|
6
6
|
//#region src/GridMenus.svelte
|
|
@@ -253,7 +253,7 @@ function M(M, N) {
|
|
|
253
253
|
let e = c.get(z) ?? c.get(L);
|
|
254
254
|
if (!e) return;
|
|
255
255
|
let t = c.get(W).find((t) => t.id === e);
|
|
256
|
-
a(t?.columnDef.editorType) && (c.get(X) || import("./SvDateTimePicker-
|
|
256
|
+
a(t?.columnDef.editorType) && (c.get(X) || import("./SvDateTimePicker-CCbDZNZB.js").then((e) => e.n).then((e) => c.set(X, e.default, !0)), c.get(Z) || import("./SvDateRangeInput-DMLKmGEc.js").then((e) => e.n).then((e) => c.set(Z, e.default, !0)));
|
|
257
257
|
});
|
|
258
258
|
function We(e) {
|
|
259
259
|
requestAnimationFrame(() => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
|
|
2
2
|
import { F as t, G as n, H as r, L as i, V as a, X as o, Y as s, _ as ee, at as c, b as l, d as u, et as d, i as f, it as p, k as m, l as h, lt as g, m as _, nt as v, pt as y, rt as b, st as x, t as S, tt as C, u as w, ut as T, v as E, x as D } from "./disclose-version-Dr7rEVv-.js";
|
|
3
|
-
import { F as te, R as O, g as k, i as ne, k as A, m as re, t as ie, z as ae } from "./date-format-
|
|
3
|
+
import { F as te, R as O, g as k, i as ne, k as A, m as re, t as ie, z as ae } from "./date-format-BNii4zeD.js";
|
|
4
4
|
import { i as oe, n as se, r as ce } from "./popover-P-9P2YYn.js";
|
|
5
5
|
//#region src/SvDateRangeInput.svelte
|
|
6
6
|
var j = /* @__PURE__ */ e({ default: () => M }), le = i("<button type=\"button\" class=\"sv-dri__clear svelte-6hjfap\">×</button>"), ue = i("<div class=\"sv-dri__panel\" role=\"dialog\"><!></div>"), de = i("<input type=\"hidden\"/> <input type=\"hidden\"/>", 1), fe = i("<div><div><svg class=\"sv-dri__icon svelte-6hjfap\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect><path d=\"M16 2v4M8 2v4M3 10h18\"></path></svg> <input/> <!></div> <!> <!></div>"), pe = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
|
|
2
|
-
import { F as t, R as n, g as r, i, k as a, m as o, t as s, z as c } from "./date-format-
|
|
2
|
+
import { F as t, R as n, g as r, i, k as a, m as o, t as s, z as c } from "./date-format-BnnHlqGw.js";
|
|
3
3
|
import { i as ee, n as l, r as u } from "./popover-P-9P2YYn.js";
|
|
4
4
|
import * as d from "svelte/internal/client";
|
|
5
5
|
import "svelte/internal/disclose-version";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
|
|
2
|
-
import { C as t, F as n, M as r, P as i, R as a, g as o, i as s, k as c, n as l, t as u, z as d } from "./date-format-
|
|
2
|
+
import { C as t, F as n, M as r, P as i, R as a, g as o, i as s, k as c, n as l, t as u, z as d } from "./date-format-BnnHlqGw.js";
|
|
3
3
|
import { i as f, n as p, r as m } from "./popover-P-9P2YYn.js";
|
|
4
4
|
import * as h from "svelte/internal/client";
|
|
5
5
|
import "svelte/internal/disclose-version";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
|
|
2
2
|
import { E as t, F as n, G as r, H as i, I as a, J as o, L as s, N as c, R as l, V as u, X as d, Y as f, _ as p, at as m, b as h, d as g, et as _, i as v, it as y, k as b, l as x, lt as S, m as C, nt as w, o as T, pt as E, rt as D, s as O, st as k, t as A, tt as j, u as M, ut as N, v as P, x as F } from "./disclose-version-Dr7rEVv-.js";
|
|
3
|
-
import { C as ee, F as te, M as I, P as L, R as ne, g as R, i as z, k as re, n as B, t as V, z as H } from "./date-format-
|
|
3
|
+
import { C as ee, F as te, M as I, P as L, R as ne, g as R, i as z, k as re, n as B, t as V, z as H } from "./date-format-BNii4zeD.js";
|
|
4
4
|
import { i as U, n as ie, r as ae } from "./popover-P-9P2YYn.js";
|
|
5
5
|
//#region src/createTimePicker.svelte.ts
|
|
6
6
|
var oe = 240, W = oe / 2, G = 98, K = 62;
|
|
@@ -96,11 +96,11 @@ function V(a, l) {
|
|
|
96
96
|
}, H = D(l, "ctrl", 7), Se = D(l, "fullRow", 3, !1), U = f(null), W = f(null);
|
|
97
97
|
u(() => {
|
|
98
98
|
let e = H().editingCell?.editorType;
|
|
99
|
-
(e === "list" || e === "chips" || e === "select" || e === "rich-select") && !n(U) && import("./SvGridDropdown-
|
|
99
|
+
(e === "list" || e === "chips" || e === "select" || e === "rich-select") && !n(U) && import("./SvGridDropdown-D13MtJ2j.js").then((e) => e.n).then((e) => y(U, e.default, !0)), (e === "date" || e === "datetime" || e === "time") && !n(W) && import("./SvDateTimePicker-sonaH0oh.js").then((e) => e.n).then((e) => y(W, e.default, !0));
|
|
100
100
|
});
|
|
101
101
|
let Ce = E(() => H().grid), we = E(() => H().fullRowEdit), G = E(() => H().getColumnEditorOptions), K = E(() => H().areEditorOptionsLoading), q = E(() => H().saveEditingCell), J = E(() => H().updateEditingCellValue), Y = E(() => H().onEditorKeyDown), X = E(() => H().focusOnMount), Te = E(() => H().toggleCheckboxWithKeyboard);
|
|
102
102
|
function Z(e, t = !0) {
|
|
103
|
-
t &&
|
|
103
|
+
t && e.focus({ preventScroll: !0 });
|
|
104
104
|
}
|
|
105
105
|
function Q(e) {
|
|
106
106
|
e.key === "Enter" ? (e.preventDefault(), H().commitFullRowEdit(), H().gridRootEl?.focus({ preventScroll: !0 })) : e.key === "Escape" && (e.preventDefault(), H().cancelFullRowEdit(), H().gridRootEl?.focus({ preventScroll: !0 }));
|
|
@@ -97,11 +97,11 @@ function O(O, k) {
|
|
|
97
97
|
}, j = d.prop(k, "ctrl", 7), M = d.prop(k, "fullRow", 3, !1), N = d.state(null), P = d.state(null);
|
|
98
98
|
d.user_effect(() => {
|
|
99
99
|
let e = j().editingCell?.editorType;
|
|
100
|
-
(e === "list" || e === "chips" || e === "select" || e === "rich-select") && !d.get(N) && import("./SvGridDropdown-
|
|
100
|
+
(e === "list" || e === "chips" || e === "select" || e === "rich-select") && !d.get(N) && import("./SvGridDropdown-D0VdjeR8.js").then((e) => e.n).then((e) => d.set(N, e.default, !0)), (e === "date" || e === "datetime" || e === "time") && !d.get(P) && import("./SvDateTimePicker-CCbDZNZB.js").then((e) => e.n).then((e) => d.set(P, e.default, !0));
|
|
101
101
|
});
|
|
102
102
|
let F = d.derived(() => j().grid), I = d.derived(() => j().fullRowEdit), L = d.derived(() => j().getColumnEditorOptions), R = d.derived(() => j().areEditorOptionsLoading), z = d.derived(() => j().saveEditingCell), B = d.derived(() => j().updateEditingCellValue), V = d.derived(() => j().onEditorKeyDown), H = d.derived(() => j().focusOnMount), U = d.derived(() => j().toggleCheckboxWithKeyboard);
|
|
103
103
|
function W(e, t = !0) {
|
|
104
|
-
t &&
|
|
104
|
+
t && e.focus({ preventScroll: !0 });
|
|
105
105
|
}
|
|
106
106
|
function G(e) {
|
|
107
107
|
e.key === "Enter" ? (e.preventDefault(), j().commitFullRowEdit(), j().gridRootEl?.focus({ preventScroll: !0 })) : e.key === "Escape" && (e.preventDefault(), j().cancelFullRowEdit(), j().gridRootEl?.focus({ preventScroll: !0 }));
|