UNPKG

handsontable

Version:

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

handsontable.com

handsontable/handsontable

270 lines (269 loc) • 15 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
"use strict"; exports.__esModule = true; /* * This file is auto-generated. Do not edit directly. */ var _default = exports.default = { fontFamily: 'Inter', fontSize: '14px', fontSizeSmall: '12px', lineHeight: '20px', lineHeightSmall: '18px', fontWeight: '400', letterSpacing: '0px', borderColor: ['colors.palette.100', 'colors.palette.700'], accentColor: ['colors.primary.500', 'colors.primary.300'], foregroundColor: ['colors.palette.800', 'colors.palette.200'], foregroundSecondaryColor: ['colors.palette.400', 'colors.palette.300'], backgroundColor: ['colors.white', 'colors.palette.950'], backgroundSecondaryColor: ['colors.palette.50', 'colors.palette.900'], placeholderColor: ['colors.palette.300', 'colors.palette.400'], readOnlyColor: ['colors.palette.400', 'colors.palette.300'], disabledColor: ['colors.palette.300', 'colors.palette.400'], gapSize: 'density.gap', iconSize: 'sizing.size_4', tableTransition: '0.15s', wrapperBorderWidth: '0px', wrapperBorderRadius: 'sizing.size_1', wrapperBorderColor: 'tokens.borderColor', barForegroundColor: 'tokens.foregroundColor', barBackgroundColor: 'tokens.backgroundSecondaryColor', barHorizontalPadding: 'density.barsHorizontal', barVerticalPadding: 'density.barsVertical', shadowColor: ['colors.palette.800', 'colors.palette.200'], shadowX: 'sizing.size_0', shadowY: 'sizing.size_2', shadowBlur: 'sizing.size_4', shadowOpacity: '8%', cellHorizontalPadding: 'density.cellHorizontal', cellVerticalPadding: 'density.cellVertical', cellHorizontalBorderColor: 'tokens.borderColor', cellVerticalBorderColor: 'tokens.borderColor', cellSelectionBorderColor: 'tokens.accentColor', cellSelectionBackgroundColor: ['colors.primary.400', 'colors.primary.200'], cellSuccessBackgroundColor: '#37bc6c33', cellErrorBackgroundColor: '#fa4d3233', cellReadOnlyBackgroundColor: 'tokens.backgroundSecondaryColor', cellAutofillSize: 'sizing.size_1_5', cellAutofillHitAreaSize: 'sizing.size_3', cellAutofillBorderWidth: 'sizing.size_0_25', cellAutofillBorderRadius: 'sizing.size_1', cellAutofillBorderColor: 'tokens.backgroundColor', cellAutofillBackgroundColor: 'tokens.accentColor', cellAutofillFillBorderColor: 'tokens.foregroundColor', cellEditorBorderWidth: '2px', cellEditorBorderColor: 'tokens.accentColor', cellEditorForegroundColor: ['colors.palette.950', 'colors.white'], cellEditorBackgroundColor: 'tokens.backgroundColor', cellEditorShadowBlurRadius: '0px', cellEditorShadowColor: 'tokens.accentColor', cellMobileHandleSize: 'sizing.size_3', cellMobileHandleBorderWidth: 'sizing.size_0_25', cellMobileHandleBorderRadius: 'sizing.size_3', cellMobileHandleBorderColor: 'tokens.accentColor', cellMobileHandleBackgroundColor: 'tokens.accentColor', cellMobileHandleBackgroundOpacity: '40%', headerFontWeight: 'tokens.fontWeight', headerForegroundColor: 'tokens.foregroundColor', headerBackgroundColor: 'tokens.backgroundSecondaryColor', headerHighlightedShadowSize: '0px', headerHighlightedForegroundColor: ['colors.palette.950', 'colors.white'], headerHighlightedBackgroundColor: ['colors.palette.100', 'colors.palette.700'], headerActiveBorderColor: ['colors.primary.400', 'colors.primary.200'], headerActiveForegroundColor: 'colors.white', headerActiveBackgroundColor: 'tokens.accentColor', headerFilterBackgroundColor: 'tokens.cellSuccessBackgroundColor', headerRowForegroundColor: 'tokens.foregroundColor', headerRowBackgroundColor: 'tokens.backgroundSecondaryColor', headerRowHighlightedForegroundColor: ['colors.palette.950', 'colors.white'], headerRowHighlightedBackgroundColor: ['colors.palette.100', 'colors.palette.700'], headerRowActiveForegroundColor: 'colors.white', headerRowActiveBackgroundColor: 'tokens.accentColor', rowHeaderOddBackgroundColor: 'tokens.backgroundSecondaryColor', rowHeaderEvenBackgroundColor: 'tokens.backgroundSecondaryColor', rowCellOddBackgroundColor: 'tokens.backgroundColor', rowCellEvenBackgroundColor: 'tokens.backgroundColor', buttonBorderRadius: 'sizing.size_1', buttonHorizontalPadding: 'density.buttonHorizontal', buttonVerticalPadding: 'density.buttonVertical', primaryButtonBorderColor: 'colors.transparent', primaryButtonForegroundColor: 'colors.white', primaryButtonBackgroundColor: 'tokens.accentColor', primaryButtonDisabledBorderColor: 'colors.transparent', primaryButtonDisabledForegroundColor: 'tokens.disabledColor', primaryButtonDisabledBackgroundColor: ['colors.palette.100', 'colors.palette.700'], primaryButtonHoverBorderColor: 'colors.transparent', primaryButtonHoverForegroundColor: 'tokens.backgroundColor', primaryButtonHoverBackgroundColor: ['colors.primary.600', 'colors.primary.100'], primaryButtonFocusBorderColor: 'tokens.backgroundColor', primaryButtonFocusForegroundColor: 'tokens.backgroundColor', primaryButtonFocusBackgroundColor: 'tokens.accentColor', secondaryButtonBorderColor: 'tokens.borderColor', secondaryButtonForegroundColor: 'tokens.foregroundColor', secondaryButtonBackgroundColor: 'tokens.backgroundColor', secondaryButtonDisabledBorderColor: 'tokens.borderColor', secondaryButtonDisabledForegroundColor: 'tokens.disabledColor', secondaryButtonDisabledBackgroundColor: ['colors.palette.100', 'colors.palette.700'], secondaryButtonHoverBorderColor: 'tokens.borderColor', secondaryButtonHoverForegroundColor: 'tokens.foregroundColor', secondaryButtonHoverBackgroundColor: ['colors.palette.100', 'colors.palette.700'], secondaryButtonFocusBorderColor: 'tokens.borderColor', secondaryButtonFocusForegroundColor: 'tokens.foregroundColor', secondaryButtonFocusBackgroundColor: 'tokens.backgroundColor', iconButtonBorderRadius: 'sizing.size_0_5', iconButtonLargeBorderRadius: 'sizing.size_1', iconButtonLargePadding: 'sizing.size_1', iconButtonBorderColor: ['colors.palette.50', 'colors.palette.900'], iconButtonBackgroundColor: 'tokens.backgroundSecondaryColor', iconButtonIconColor: ['colors.palette.300', 'colors.palette.400'], iconButtonHoverBorderColor: ['colors.palette.100', 'colors.palette.700'], iconButtonHoverBackgroundColor: ['colors.palette.100', 'colors.palette.700'], iconButtonHoverIconColor: ['colors.palette.300', 'colors.palette.400'], iconButtonActiveBorderColor: ['colors.primary.400', 'colors.primary.200'], iconButtonActiveBackgroundColor: 'tokens.accentColor', iconButtonActiveIconColor: 'colors.white', iconButtonActiveHoverBorderColor: ['colors.primary.400', 'colors.primary.200'], iconButtonActiveHoverBackgroundColor: ['colors.primary.400', 'colors.primary.200'], iconButtonActiveHoverIconColor: 'colors.white', collapseButtonBorderRadius: 'sizing.size_1', collapseButtonOpenBorderColor: ['colors.palette.200', 'colors.palette.500'], collapseButtonOpenBackgroundColor: ['colors.white', 'colors.palette.950'], collapseButtonOpenIconColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonOpenIconActiveColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonOpenHoverBorderColor: ['colors.palette.200', 'colors.palette.500'], collapseButtonOpenHoverBackgroundColor: ['colors.palette.50', 'colors.palette.900'], collapseButtonOpenHoverIconColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonOpenHoverIconActiveColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonCloseBorderColor: ['colors.palette.200', 'colors.palette.500'], collapseButtonCloseBackgroundColor: ['colors.palette.100', 'colors.palette.700'], collapseButtonCloseIconColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonCloseIconActiveColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonCloseHoverBorderColor: ['colors.palette.200', 'colors.palette.500'], collapseButtonCloseHoverBackgroundColor: ['colors.palette.100', 'colors.palette.700'], collapseButtonCloseHoverIconColor: ['colors.palette.400', 'colors.palette.300'], collapseButtonCloseHoverIconActiveColor: ['colors.palette.400', 'colors.palette.300'], linkColor: ['colors.primary.600', 'colors.primary.100'], linkHoverColor: 'tokens.accentColor', inputBorderWidth: '1px', inputBorderRadius: 'sizing.size_1', inputHorizontalPadding: 'density.inputHorizontal', inputVerticalPadding: 'density.inputVertical', inputBorderColor: 'tokens.borderColor', inputForegroundColor: 'tokens.foregroundColor', inputBackgroundColor: 'tokens.backgroundSecondaryColor', inputHoverBorderColor: 'tokens.borderColor', inputHoverForegroundColor: 'tokens.foregroundColor', inputHoverBackgroundColor: 'tokens.backgroundColor', inputDisabledBorderColor: 'tokens.borderColor', inputDisabledForegroundColor: 'tokens.disabledColor', inputDisabledBackgroundColor: ['colors.palette.200', 'colors.palette.500'], inputFocusBorderColor: 'tokens.accentColor', inputFocusForegroundColor: 'tokens.foregroundColor', inputFocusBackgroundColor: 'tokens.backgroundColor', checkboxSize: 'tokens.iconSize', checkboxBorderRadius: 'sizing.size_1', checkboxBorderColor: ['colors.palette.200', 'colors.palette.500'], checkboxBackgroundColor: 'tokens.backgroundColor', checkboxIconColor: 'colors.transparent', checkboxFocusBorderColor: ['colors.palette.200', 'colors.palette.500'], checkboxFocusBackgroundColor: 'tokens.backgroundColor', checkboxFocusIconColor: 'colors.transparent', checkboxFocusRingColor: 'tokens.accentColor', checkboxDisabledBorderColor: ['colors.palette.200', 'colors.palette.500'], checkboxDisabledBackgroundColor: ['colors.palette.100', 'colors.palette.700'], checkboxDisabledIconColor: 'colors.transparent', checkboxCheckedBorderColor: ['colors.primary.400', 'colors.primary.200'], checkboxCheckedBackgroundColor: 'tokens.accentColor', checkboxCheckedIconColor: 'colors.white', checkboxCheckedFocusBorderColor: 'tokens.backgroundColor', checkboxCheckedFocusBackgroundColor: 'tokens.accentColor', checkboxCheckedFocusIconColor: 'colors.white', checkboxCheckedDisabledBorderColor: ['colors.palette.200', 'colors.palette.500'], checkboxCheckedDisabledBackgroundColor: ['colors.palette.100', 'colors.palette.700'], checkboxCheckedDisabledIconColor: 'tokens.disabledColor', checkboxIndeterminateBorderColor: ['colors.primary.400', 'colors.primary.200'], checkboxIndeterminateBackgroundColor: 'tokens.accentColor', checkboxIndeterminateIconColor: 'colors.white', checkboxIndeterminateFocusBorderColor: 'tokens.backgroundColor', checkboxIndeterminateFocusBackgroundColor: 'tokens.accentColor', checkboxIndeterminateFocusIconColor: 'colors.white', checkboxIndeterminateDisabledBorderColor: ['colors.palette.200', 'colors.palette.600'], checkboxIndeterminateDisabledBackgroundColor: ['colors.palette.200', 'colors.palette.500'], checkboxIndeterminateDisabledIconColor: 'tokens.disabledColor', radioSize: 'tokens.iconSize', radioBorderColor: ['colors.palette.200', 'colors.palette.500'], radioBackgroundColor: 'tokens.backgroundColor', radioIconColor: 'colors.transparent', radioFocusBorderColor: 'tokens.borderColor', radioFocusBackgroundColor: 'tokens.backgroundColor', radioFocusIconColor: 'colors.transparent', radioFocusRingColor: 'tokens.accentColor', radioDisabledBorderColor: ['colors.palette.200', 'colors.palette.500'], radioDisabledBackgroundColor: ['colors.palette.100', 'colors.palette.700'], radioDisabledIconColor: 'colors.transparent', radioCheckedBorderColor: 'tokens.accentColor', radioCheckedBackgroundColor: 'tokens.backgroundColor', radioCheckedIconColor: 'tokens.accentColor', radioCheckedFocusBorderColor: ['colors.primary.400', 'colors.primary.200'], radioCheckedFocusBackgroundColor: 'tokens.backgroundColor', radioCheckedFocusIconColor: ['colors.primary.400', 'colors.primary.200'], radioCheckedDisabledBorderColor: ['colors.palette.200', 'colors.palette.500'], radioCheckedDisabledBackgroundColor: ['colors.palette.100', 'colors.palette.700'], radioCheckedDisabledIconColor: 'tokens.disabledColor', moveBacklightColor: ['colors.palette.800', 'colors.palette.200'], moveBacklightOpacity: '8%', moveIndicatorColor: 'tokens.accentColor', resizeIndicatorColor: ['colors.palette.300', 'colors.palette.400'], hiddenIndicatorColor: ['colors.palette.300', 'colors.palette.400'], menuBorderWidth: '1px', menuBorderRadius: 'sizing.size_1', menuHorizontalPadding: 'density.menuHorizontal', menuVerticalPadding: 'density.menuVertical', menuItemHorizontalPadding: 'density.menuItemHorizontal', menuItemVerticalPadding: 'density.menuItemVertical', menuBorderColor: 'tokens.borderColor', menuShadowX: 'tokens.shadowX', menuShadowY: 'tokens.shadowY', menuShadowBlur: 'tokens.shadowBlur', menuShadowColor: ['colors.palette.950', 'colors.white'], menuShadowOpacity: '8%', menuItemHoverColor: ['colors.palette.800', 'colors.palette.200'], menuItemHoverColorOpacity: '4%', menuItemActiveColor: 'tokens.accentColor', menuItemActiveColorOpacity: '8%', commentsTextareaHorizontalPadding: 'density.cellHorizontal', commentsTextareaVerticalPadding: 'density.cellVertical', commentsTextareaBorderWidth: '1px', commentsTextareaBorderColor: 'colors.transparent', commentsTextareaForegroundColor: 'tokens.foregroundColor', commentsTextareaBackgroundColor: 'tokens.backgroundSecondaryColor', commentsTextareaFocusBorderWidth: '1px', commentsTextareaFocusBorderColor: 'tokens.accentColor', commentsTextareaFocusForegroundColor: 'tokens.foregroundColor', commentsTextareaFocusBackgroundColor: 'tokens.backgroundColor', commentsIndicatorSize: 'sizing.size_1_5', commentsIndicatorColor: 'tokens.accentColor', licenseHorizontalPadding: 'tokens.barHorizontalPadding', licenseVerticalPadding: 'tokens.barVerticalPadding', licenseForegroundColor: 'tokens.barForegroundColor', licenseBackgroundColor: 'tokens.barBackgroundColor', paginationBarForegroundColor: 'tokens.barForegroundColor', paginationBarBackgroundColor: 'tokens.barBackgroundColor', paginationBarHorizontalPadding: 'tokens.barHorizontalPadding', paginationBarVerticalPadding: 'tokens.barVerticalPadding', dialogSemiTransparentBackgroundColor: ['colors.white', 'colors.palette.950'], dialogSemiTransparentBackgroundOpacity: '80%', dialogSolidBackgroundColor: ['colors.white', 'colors.palette.950'], dialogContentPaddingHorizontal: 'density.dialogHorizontal', dialogContentPaddingVertical: 'density.dialogVertical', dialogContentBorderRadius: 'sizing.size_2', dialogContentBackgroundColor: 'tokens.backgroundSecondaryColor', chipBackground: 'tokens.backgroundSecondaryColor', chipBorderRadius: 'sizing.size_0_5', chipVerticalPadding: 'sizing.size_0', chipHorizontalPadding: 'sizing.size_0_5', chipGap: 'sizing.size_1', scrollbarBorderRadius: 'sizing.size_2', scrollbarTrackColor: 'tokens.backgroundSecondaryColor', scrollbarThumbColor: ['colors.palette.300', 'colors.palette.400'] };