@svgrid/grid 2.2.0 → 2.2.2
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/dist/FlexRender.svelte +96 -96
- package/dist/GridFooter.svelte +178 -178
- package/dist/SvCarousel.svelte +141 -141
- package/dist/SvColorInput.svelte +187 -187
- package/dist/SvContextMenu.svelte +116 -116
- package/dist/SvDrawer.svelte +250 -250
- package/dist/SvGrid.svelte +3131 -3131
- package/dist/SvGridBoard.svelte +2339 -2339
- package/dist/SvGridChart.svelte +1724 -1724
- package/dist/SvGridChartPanel.svelte +485 -485
- package/dist/SvGridDropdown.svelte +689 -689
- package/dist/SvGroupCell.svelte +109 -109
- package/dist/SvMenu.svelte +124 -124
- package/dist/SvMenuList.svelte +117 -117
- package/dist/SvNumberInput.svelte +131 -131
- package/dist/SvOtpInput.svelte +158 -158
- package/dist/SvPopover.svelte +139 -139
- package/dist/SvRowGroupPanel.svelte +170 -170
- package/dist/SvScrollArea.svelte +61 -61
- package/dist/SvTooltip.svelte +127 -127
- package/dist/SvTour.svelte +204 -204
- package/dist/SvTree.svelte +377 -377
- package/dist/SvTreeSelect.svelte +230 -230
- package/dist/cdn/svgrid.js +8 -8
- package/dist/cdn/svgrid.svelte-external.js +8 -8
- package/dist/chart-export.js +8 -8
- package/package.json +10 -10
- package/src/FlexRender.svelte +96 -96
- package/src/GridFooter.svelte +178 -178
- package/src/SvCarousel.svelte +141 -141
- package/src/SvColorInput.svelte +187 -187
- package/src/SvContextMenu.svelte +116 -116
- package/src/SvDrawer.svelte +250 -250
- package/src/SvGrid.controller.svelte.ts +3158 -3158
- package/src/SvGrid.svelte +3131 -3131
- package/src/SvGrid.types.ts +1489 -1489
- package/src/SvGridBoard.svelte +2339 -2339
- package/src/SvGridChart.svelte +1724 -1724
- package/src/SvGridChartPanel.svelte +485 -485
- package/src/SvGridDropdown.svelte +689 -689
- package/src/SvGroupCell.svelte +109 -109
- package/src/SvMenu.svelte +124 -124
- package/src/SvMenu.test.ts +97 -97
- package/src/SvMenuList.svelte +117 -117
- package/src/SvNumberInput.svelte +131 -131
- package/src/SvOtpInput.svelte +158 -158
- package/src/SvPopover.svelte +139 -139
- package/src/SvRowGroupPanel.svelte +170 -170
- package/src/SvScrollArea.svelte +61 -61
- package/src/SvTooltip.svelte +127 -127
- package/src/SvTour.svelte +204 -204
- package/src/SvTree.svelte +377 -377
- package/src/SvTreeSelect.svelte +230 -230
- package/src/a11y.contract.test.ts +49 -49
- package/src/a11y.test.ts +59 -59
- package/src/a11y.ts +61 -61
- package/src/build-api.ts +870 -870
- package/src/cell-formatting.ts +169 -169
- package/src/cell-render.ts +469 -469
- package/src/chart-export.ts +201 -201
- package/src/chart.ts +2296 -2296
- package/src/collaboration.test.ts +104 -104
- package/src/collaboration.ts +167 -167
- package/src/core.performance.test.ts +30 -30
- package/src/core.ts +1111 -1111
- package/src/createAutocomplete.svelte.ts +132 -132
- package/src/createCombobox.svelte.ts +179 -179
- package/src/createCountryInput.svelte.ts +157 -157
- package/src/createDropdownList.svelte.ts +162 -162
- package/src/createGrid.svelte.ts +42 -42
- package/src/createGrid.test.ts +10 -10
- package/src/createGridState.svelte.ts +17 -17
- package/src/createMenu.svelte.ts +202 -202
- package/src/createPopoverSelect.svelte.ts +206 -206
- package/src/createTree.svelte.ts +319 -319
- package/src/editing.test.ts +859 -859
- package/src/editing.ts +675 -675
- package/src/export-data-api.test.ts +126 -126
- package/src/export-format.test.ts +107 -107
- package/src/export-format.ts +598 -598
- package/src/flex-render.ts +3 -3
- package/src/index.ts +623 -623
- 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/menus.ts +639 -639
- package/src/merge-objects.ts +48 -48
- package/src/overlays.test.ts +90 -90
- package/src/render-component.ts +28 -28
- package/src/selection.test.ts +754 -754
- package/src/selection.ts +600 -600
- package/src/server-data-source.test.ts +289 -289
- package/src/server-data-source.ts +413 -413
- package/src/sparkline.test.ts +68 -68
- package/src/sparkline.ts +169 -169
- package/src/spreadsheet.test.ts +489 -489
- package/src/spreadsheet.ts +312 -312
- package/src/static-functions.ts +11 -11
- package/src/subscribe.ts +38 -38
- package/src/svgrid-wrapper.types.ts +501 -501
- package/src/svgrid.behavior.test.ts +706 -706
- package/src/svgrid.charting.test.ts +527 -527
- package/src/svgrid.features.test.ts +157 -157
- package/src/svgrid.new-features.wrapper.test.ts +251 -251
- package/src/svgrid.wrapper.test.ts +40 -40
- package/src/test-setup.ts +62 -62
- package/src/themes/index.ts +159 -159
- 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 +296 -296
package/src/cell-formatting.ts
CHANGED
|
@@ -1,169 +1,169 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
/** Map shortcut date patterns to Intl options (merged with caller `options`). */
|
|
6
|
-
export function resolveDatePattern(
|
|
7
|
-
pattern: string | undefined,
|
|
8
|
-
kind: 'date' | 'datetime',
|
|
9
|
-
): Intl.DateTimeFormatOptions | undefined {
|
|
10
|
-
if (!pattern) return undefined
|
|
11
|
-
|
|
12
|
-
const p = pattern.trim()
|
|
13
|
-
|
|
14
|
-
switch (p) {
|
|
15
|
-
/** Short numeric local date (no weekday). */
|
|
16
|
-
case 'd':
|
|
17
|
-
return kind === 'datetime'
|
|
18
|
-
? {
|
|
19
|
-
year: 'numeric',
|
|
20
|
-
month: 'numeric',
|
|
21
|
-
day: 'numeric',
|
|
22
|
-
hour: 'numeric',
|
|
23
|
-
minute: 'numeric',
|
|
24
|
-
}
|
|
25
|
-
: { year: 'numeric', month: 'numeric', day: 'numeric' }
|
|
26
|
-
/** Long spelled-out date (+ time if datetime). */
|
|
27
|
-
case 'D':
|
|
28
|
-
return kind === 'datetime'
|
|
29
|
-
? {
|
|
30
|
-
weekday: 'long',
|
|
31
|
-
year: 'numeric',
|
|
32
|
-
month: 'long',
|
|
33
|
-
day: 'numeric',
|
|
34
|
-
hour: 'numeric',
|
|
35
|
-
minute: 'numeric',
|
|
36
|
-
}
|
|
37
|
-
: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
|
|
38
|
-
/** ISO-friendly yyyy-mm-dd (with time when datetime). */
|
|
39
|
-
case 'y-m-d':
|
|
40
|
-
return kind === 'datetime'
|
|
41
|
-
? {
|
|
42
|
-
year: 'numeric',
|
|
43
|
-
month: '2-digit',
|
|
44
|
-
day: '2-digit',
|
|
45
|
-
hour: '2-digit',
|
|
46
|
-
minute: '2-digit',
|
|
47
|
-
hour12: false,
|
|
48
|
-
}
|
|
49
|
-
: { year: 'numeric', month: '2-digit', day: '2-digit' }
|
|
50
|
-
case 'medium':
|
|
51
|
-
return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
|
|
52
|
-
case 'short':
|
|
53
|
-
return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
|
|
54
|
-
case 'long':
|
|
55
|
-
return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
|
|
56
|
-
default:
|
|
57
|
-
return undefined
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
type NumericFormatInput = {
|
|
62
|
-
type: 'number' | 'currency' | 'percent'
|
|
63
|
-
locales?: string | string[]
|
|
64
|
-
currency?: string
|
|
65
|
-
/** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
|
|
66
|
-
valueIsPercentPoints?: boolean
|
|
67
|
-
options?: Intl.NumberFormatOptions
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* `Intl.NumberFormat` is one of the most expensive constructors in the
|
|
72
|
-
* platform - building one per cell on every scroll makes large grids
|
|
73
|
-
* noticeably stutter. Cache instances by config signature (locale + style
|
|
74
|
-
* + currency + options).
|
|
75
|
-
*/
|
|
76
|
-
const numberFormatterCache = new Map<string, Intl.NumberFormat>()
|
|
77
|
-
function getNumberFormatter(
|
|
78
|
-
locales: string | string[] | undefined,
|
|
79
|
-
options: Intl.NumberFormatOptions,
|
|
80
|
-
): Intl.NumberFormat {
|
|
81
|
-
// Stable key - for normal column configs the options object is reused
|
|
82
|
-
// (declared in module scope), so this stringifies a small static shape.
|
|
83
|
-
const key =
|
|
84
|
-
(Array.isArray(locales) ? locales.join(',') : locales ?? '') +
|
|
85
|
-
'|' +
|
|
86
|
-
(options.style ?? '') +
|
|
87
|
-
'|' +
|
|
88
|
-
(options.currency ?? '') +
|
|
89
|
-
'|' +
|
|
90
|
-
(options.minimumFractionDigits ?? '') +
|
|
91
|
-
'|' +
|
|
92
|
-
(options.maximumFractionDigits ?? '') +
|
|
93
|
-
'|' +
|
|
94
|
-
(options.useGrouping ?? '') +
|
|
95
|
-
'|' +
|
|
96
|
-
(options.currencyDisplay ?? '') +
|
|
97
|
-
'|' +
|
|
98
|
-
(options.notation ?? '')
|
|
99
|
-
let fmt = numberFormatterCache.get(key)
|
|
100
|
-
if (!fmt) {
|
|
101
|
-
fmt = new Intl.NumberFormat(locales, options)
|
|
102
|
-
numberFormatterCache.set(key, fmt)
|
|
103
|
-
}
|
|
104
|
-
return fmt
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
|
|
108
|
-
const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
|
|
109
|
-
export function getDateFormatter(
|
|
110
|
-
locales: string | string[] | undefined,
|
|
111
|
-
options: Intl.DateTimeFormatOptions,
|
|
112
|
-
): Intl.DateTimeFormat {
|
|
113
|
-
const key =
|
|
114
|
-
(Array.isArray(locales) ? locales.join(',') : locales ?? '') +
|
|
115
|
-
'|' +
|
|
116
|
-
(options.dateStyle ?? '') +
|
|
117
|
-
'|' +
|
|
118
|
-
(options.timeStyle ?? '') +
|
|
119
|
-
'|' +
|
|
120
|
-
(options.year ?? '') +
|
|
121
|
-
'|' +
|
|
122
|
-
(options.month ?? '') +
|
|
123
|
-
'|' +
|
|
124
|
-
(options.day ?? '') +
|
|
125
|
-
'|' +
|
|
126
|
-
(options.hour ?? '') +
|
|
127
|
-
'|' +
|
|
128
|
-
(options.minute ?? '') +
|
|
129
|
-
'|' +
|
|
130
|
-
(options.second ?? '') +
|
|
131
|
-
'|' +
|
|
132
|
-
(options.weekday ?? '') +
|
|
133
|
-
'|' +
|
|
134
|
-
(options.hour12 ?? '')
|
|
135
|
-
let fmt = dateFormatterCache.get(key)
|
|
136
|
-
if (!fmt) {
|
|
137
|
-
fmt = new Intl.DateTimeFormat(locales, options)
|
|
138
|
-
dateFormatterCache.set(key, fmt)
|
|
139
|
-
}
|
|
140
|
-
return fmt
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/** Format a numeric value for number / currency / percent column formats. */
|
|
144
|
-
export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
|
|
145
|
-
const n = typeof value === 'number' ? value : Number(value)
|
|
146
|
-
if (!Number.isFinite(n)) return String(value ?? '')
|
|
147
|
-
|
|
148
|
-
const locales = config.locales
|
|
149
|
-
|
|
150
|
-
if (config.type === 'currency') {
|
|
151
|
-
return getNumberFormatter(locales, {
|
|
152
|
-
style: 'currency',
|
|
153
|
-
currency: config.currency ?? 'USD',
|
|
154
|
-
...config.options,
|
|
155
|
-
}).format(n)
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
if (config.type === 'percent') {
|
|
159
|
-
const frac = config.valueIsPercentPoints === true ? n / 100 : n
|
|
160
|
-
return getNumberFormatter(locales, {
|
|
161
|
-
style: 'percent',
|
|
162
|
-
minimumFractionDigits: 0,
|
|
163
|
-
maximumFractionDigits: 2,
|
|
164
|
-
...config.options,
|
|
165
|
-
}).format(frac)
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
return getNumberFormatter(locales, config.options ?? {}).format(n)
|
|
169
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/** Map shortcut date patterns to Intl options (merged with caller `options`). */
|
|
6
|
+
export function resolveDatePattern(
|
|
7
|
+
pattern: string | undefined,
|
|
8
|
+
kind: 'date' | 'datetime',
|
|
9
|
+
): Intl.DateTimeFormatOptions | undefined {
|
|
10
|
+
if (!pattern) return undefined
|
|
11
|
+
|
|
12
|
+
const p = pattern.trim()
|
|
13
|
+
|
|
14
|
+
switch (p) {
|
|
15
|
+
/** Short numeric local date (no weekday). */
|
|
16
|
+
case 'd':
|
|
17
|
+
return kind === 'datetime'
|
|
18
|
+
? {
|
|
19
|
+
year: 'numeric',
|
|
20
|
+
month: 'numeric',
|
|
21
|
+
day: 'numeric',
|
|
22
|
+
hour: 'numeric',
|
|
23
|
+
minute: 'numeric',
|
|
24
|
+
}
|
|
25
|
+
: { year: 'numeric', month: 'numeric', day: 'numeric' }
|
|
26
|
+
/** Long spelled-out date (+ time if datetime). */
|
|
27
|
+
case 'D':
|
|
28
|
+
return kind === 'datetime'
|
|
29
|
+
? {
|
|
30
|
+
weekday: 'long',
|
|
31
|
+
year: 'numeric',
|
|
32
|
+
month: 'long',
|
|
33
|
+
day: 'numeric',
|
|
34
|
+
hour: 'numeric',
|
|
35
|
+
minute: 'numeric',
|
|
36
|
+
}
|
|
37
|
+
: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
|
|
38
|
+
/** ISO-friendly yyyy-mm-dd (with time when datetime). */
|
|
39
|
+
case 'y-m-d':
|
|
40
|
+
return kind === 'datetime'
|
|
41
|
+
? {
|
|
42
|
+
year: 'numeric',
|
|
43
|
+
month: '2-digit',
|
|
44
|
+
day: '2-digit',
|
|
45
|
+
hour: '2-digit',
|
|
46
|
+
minute: '2-digit',
|
|
47
|
+
hour12: false,
|
|
48
|
+
}
|
|
49
|
+
: { year: 'numeric', month: '2-digit', day: '2-digit' }
|
|
50
|
+
case 'medium':
|
|
51
|
+
return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
|
|
52
|
+
case 'short':
|
|
53
|
+
return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
|
|
54
|
+
case 'long':
|
|
55
|
+
return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
|
|
56
|
+
default:
|
|
57
|
+
return undefined
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
type NumericFormatInput = {
|
|
62
|
+
type: 'number' | 'currency' | 'percent'
|
|
63
|
+
locales?: string | string[]
|
|
64
|
+
currency?: string
|
|
65
|
+
/** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
|
|
66
|
+
valueIsPercentPoints?: boolean
|
|
67
|
+
options?: Intl.NumberFormatOptions
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* `Intl.NumberFormat` is one of the most expensive constructors in the
|
|
72
|
+
* platform - building one per cell on every scroll makes large grids
|
|
73
|
+
* noticeably stutter. Cache instances by config signature (locale + style
|
|
74
|
+
* + currency + options).
|
|
75
|
+
*/
|
|
76
|
+
const numberFormatterCache = new Map<string, Intl.NumberFormat>()
|
|
77
|
+
function getNumberFormatter(
|
|
78
|
+
locales: string | string[] | undefined,
|
|
79
|
+
options: Intl.NumberFormatOptions,
|
|
80
|
+
): Intl.NumberFormat {
|
|
81
|
+
// Stable key - for normal column configs the options object is reused
|
|
82
|
+
// (declared in module scope), so this stringifies a small static shape.
|
|
83
|
+
const key =
|
|
84
|
+
(Array.isArray(locales) ? locales.join(',') : locales ?? '') +
|
|
85
|
+
'|' +
|
|
86
|
+
(options.style ?? '') +
|
|
87
|
+
'|' +
|
|
88
|
+
(options.currency ?? '') +
|
|
89
|
+
'|' +
|
|
90
|
+
(options.minimumFractionDigits ?? '') +
|
|
91
|
+
'|' +
|
|
92
|
+
(options.maximumFractionDigits ?? '') +
|
|
93
|
+
'|' +
|
|
94
|
+
(options.useGrouping ?? '') +
|
|
95
|
+
'|' +
|
|
96
|
+
(options.currencyDisplay ?? '') +
|
|
97
|
+
'|' +
|
|
98
|
+
(options.notation ?? '')
|
|
99
|
+
let fmt = numberFormatterCache.get(key)
|
|
100
|
+
if (!fmt) {
|
|
101
|
+
fmt = new Intl.NumberFormat(locales, options)
|
|
102
|
+
numberFormatterCache.set(key, fmt)
|
|
103
|
+
}
|
|
104
|
+
return fmt
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
|
|
108
|
+
const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
|
|
109
|
+
export function getDateFormatter(
|
|
110
|
+
locales: string | string[] | undefined,
|
|
111
|
+
options: Intl.DateTimeFormatOptions,
|
|
112
|
+
): Intl.DateTimeFormat {
|
|
113
|
+
const key =
|
|
114
|
+
(Array.isArray(locales) ? locales.join(',') : locales ?? '') +
|
|
115
|
+
'|' +
|
|
116
|
+
(options.dateStyle ?? '') +
|
|
117
|
+
'|' +
|
|
118
|
+
(options.timeStyle ?? '') +
|
|
119
|
+
'|' +
|
|
120
|
+
(options.year ?? '') +
|
|
121
|
+
'|' +
|
|
122
|
+
(options.month ?? '') +
|
|
123
|
+
'|' +
|
|
124
|
+
(options.day ?? '') +
|
|
125
|
+
'|' +
|
|
126
|
+
(options.hour ?? '') +
|
|
127
|
+
'|' +
|
|
128
|
+
(options.minute ?? '') +
|
|
129
|
+
'|' +
|
|
130
|
+
(options.second ?? '') +
|
|
131
|
+
'|' +
|
|
132
|
+
(options.weekday ?? '') +
|
|
133
|
+
'|' +
|
|
134
|
+
(options.hour12 ?? '')
|
|
135
|
+
let fmt = dateFormatterCache.get(key)
|
|
136
|
+
if (!fmt) {
|
|
137
|
+
fmt = new Intl.DateTimeFormat(locales, options)
|
|
138
|
+
dateFormatterCache.set(key, fmt)
|
|
139
|
+
}
|
|
140
|
+
return fmt
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/** Format a numeric value for number / currency / percent column formats. */
|
|
144
|
+
export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
|
|
145
|
+
const n = typeof value === 'number' ? value : Number(value)
|
|
146
|
+
if (!Number.isFinite(n)) return String(value ?? '')
|
|
147
|
+
|
|
148
|
+
const locales = config.locales
|
|
149
|
+
|
|
150
|
+
if (config.type === 'currency') {
|
|
151
|
+
return getNumberFormatter(locales, {
|
|
152
|
+
style: 'currency',
|
|
153
|
+
currency: config.currency ?? 'USD',
|
|
154
|
+
...config.options,
|
|
155
|
+
}).format(n)
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
if (config.type === 'percent') {
|
|
159
|
+
const frac = config.valueIsPercentPoints === true ? n / 100 : n
|
|
160
|
+
return getNumberFormatter(locales, {
|
|
161
|
+
style: 'percent',
|
|
162
|
+
minimumFractionDigits: 0,
|
|
163
|
+
maximumFractionDigits: 2,
|
|
164
|
+
...config.options,
|
|
165
|
+
}).format(frac)
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
return getNumberFormatter(locales, config.options ?? {}).format(n)
|
|
169
|
+
}
|