handsontable 0.0.0-next-407bbbc-20241107 → 0.0.0-next-6129043-20241108
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of handsontable might be problematic. Click here for more details.
- package/3rdparty/walkontable/src/calculator/index.js +1 -2
- package/3rdparty/walkontable/src/calculator/index.mjs +2 -2
- package/3rdparty/walkontable/src/calculator/viewportRows.js +3 -3
- package/3rdparty/walkontable/src/calculator/viewportRows.mjs +3 -3
- package/3rdparty/walkontable/src/core/_base.js +3 -0
- package/3rdparty/walkontable/src/core/_base.mjs +3 -0
- package/3rdparty/walkontable/src/core/clone.js +1 -0
- package/3rdparty/walkontable/src/core/clone.mjs +1 -0
- package/3rdparty/walkontable/src/core/core.js +2 -0
- package/3rdparty/walkontable/src/core/core.mjs +2 -0
- package/3rdparty/walkontable/src/facade/core.js +3 -0
- package/3rdparty/walkontable/src/facade/core.mjs +3 -0
- package/3rdparty/walkontable/src/index.js +0 -1
- package/3rdparty/walkontable/src/index.mjs +2 -2
- package/3rdparty/walkontable/src/overlay/_base.js +3 -1
- package/3rdparty/walkontable/src/overlay/_base.mjs +3 -1
- package/3rdparty/walkontable/src/overlay/bottom.js +2 -2
- package/3rdparty/walkontable/src/overlay/bottom.mjs +2 -2
- package/3rdparty/walkontable/src/overlay/top.js +1 -1
- package/3rdparty/walkontable/src/overlay/top.mjs +1 -1
- package/3rdparty/walkontable/src/renderer/index.js +4 -2
- package/3rdparty/walkontable/src/renderer/index.mjs +4 -2
- package/3rdparty/walkontable/src/renderer/table.js +12 -3
- package/3rdparty/walkontable/src/renderer/table.mjs +12 -3
- package/3rdparty/walkontable/src/settings.js +0 -2
- package/3rdparty/walkontable/src/settings.mjs +0 -2
- package/3rdparty/walkontable/src/table.js +15 -9
- package/3rdparty/walkontable/src/table.mjs +15 -9
- package/3rdparty/walkontable/src/types.js +1 -0
- package/3rdparty/walkontable/src/types.mjs +1 -0
- package/3rdparty/walkontable/src/utils/column.js +1 -1
- package/3rdparty/walkontable/src/utils/column.mjs +1 -1
- package/3rdparty/walkontable/src/utils/stylesHandler.js +271 -0
- package/3rdparty/walkontable/src/utils/stylesHandler.mjs +267 -0
- package/3rdparty/walkontable/src/viewport.js +1 -0
- package/3rdparty/walkontable/src/viewport.mjs +1 -0
- package/base.js +2 -2
- package/base.mjs +2 -2
- package/core.d.ts +2 -0
- package/core.js +46 -0
- package/core.mjs +46 -0
- package/dataMap/metaManager/metaSchema.js +23 -3
- package/dataMap/metaManager/metaSchema.mjs +23 -3
- package/dist/handsontable.css +17 -9
- package/dist/handsontable.full.css +249 -240
- package/dist/handsontable.full.js +4125 -3841
- package/dist/handsontable.full.min.css +11 -9
- package/dist/handsontable.full.min.js +26 -26
- package/dist/handsontable.js +3832 -3542
- package/dist/handsontable.min.css +5 -4
- package/dist/handsontable.min.js +24 -24
- package/editors/autocompleteEditor/autocompleteEditor.js +1 -1
- package/editors/autocompleteEditor/autocompleteEditor.mjs +1 -1
- package/editors/baseEditor/baseEditor.js +1 -1
- package/editors/baseEditor/baseEditor.mjs +1 -1
- package/editors/dateEditor/dateEditor.js +2 -0
- package/editors/dateEditor/dateEditor.mjs +2 -0
- package/editors/handsontableEditor/handsontableEditor.js +2 -1
- package/editors/handsontableEditor/handsontableEditor.mjs +2 -1
- package/editors/selectEditor/selectEditor.js +20 -9
- package/editors/selectEditor/selectEditor.mjs +20 -9
- package/editors/textEditor/textEditor.js +4 -11
- package/editors/textEditor/textEditor.mjs +4 -11
- package/helpers/dom/element.js +31 -0
- package/helpers/dom/element.mjs +30 -0
- package/helpers/mixed.js +2 -2
- package/helpers/mixed.mjs +2 -2
- package/helpers/themes.js +17 -0
- package/helpers/themes.mjs +13 -0
- package/package.json +10 -3
- package/plugins/comments/commentEditor.js +9 -0
- package/plugins/comments/commentEditor.mjs +9 -0
- package/plugins/comments/comments.js +8 -0
- package/plugins/comments/comments.mjs +8 -0
- package/plugins/contextMenu/menu/menu.js +3 -4
- package/plugins/contextMenu/menu/menu.mjs +3 -4
- package/plugins/manualRowMove/manualRowMove.js +1 -1
- package/plugins/manualRowMove/manualRowMove.mjs +1 -1
- package/plugins/manualRowResize/manualRowResize.js +1 -2
- package/plugins/manualRowResize/manualRowResize.mjs +2 -3
- package/plugins/mergeCells/mergeCells.js +1 -1
- package/plugins/mergeCells/mergeCells.mjs +1 -1
- package/plugins/nestedRows/ui/headers.js +7 -1
- package/plugins/nestedRows/ui/headers.mjs +7 -1
- package/plugins/stretchColumns/calculator.js +2 -1
- package/plugins/stretchColumns/calculator.mjs +3 -2
- package/renderers/checkboxRenderer/checkboxRenderer.js +6 -1
- package/renderers/checkboxRenderer/checkboxRenderer.mjs +6 -1
- package/settings.d.ts +1 -0
- package/styles/handsontable.css +2053 -0
- package/styles/handsontable.min.css +30 -0
- package/styles/ht-theme-horizon.css +571 -0
- package/styles/ht-theme-horizon.min.css +30 -0
- package/styles/ht-theme-main.css +575 -0
- package/styles/ht-theme-main.min.css +30 -0
- package/tableView.js +46 -0
- package/tableView.mjs +47 -1
- package/utils/autoResize.js +4 -1
- package/utils/autoResize.mjs +4 -1
- package/utils/ghostTable.js +5 -3
- package/utils/ghostTable.mjs +5 -3
@@ -0,0 +1,271 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
require("core-js/modules/es.error.cause.js");
|
5
|
+
var _element = require("../../../../helpers/dom/element");
|
6
|
+
var _console = require("../../../../helpers/console");
|
7
|
+
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
8
|
+
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
9
|
+
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
10
|
+
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
11
|
+
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
12
|
+
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
|
13
|
+
const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
|
14
|
+
|
15
|
+
/**
|
16
|
+
* Handles the theme-related style operations.
|
17
|
+
*/
|
18
|
+
var _themeName = /*#__PURE__*/new WeakMap();
|
19
|
+
var _rootElement = /*#__PURE__*/new WeakMap();
|
20
|
+
var _rootComputedStyle = /*#__PURE__*/new WeakMap();
|
21
|
+
var _rootDocument = /*#__PURE__*/new WeakMap();
|
22
|
+
var _isClassicTheme = /*#__PURE__*/new WeakMap();
|
23
|
+
var _cssVars = /*#__PURE__*/new WeakMap();
|
24
|
+
var _computedStyles = /*#__PURE__*/new WeakMap();
|
25
|
+
var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
|
26
|
+
class StylesHandler {
|
27
|
+
/**
|
28
|
+
* Initializes a new instance of the `StylesHandler` class.
|
29
|
+
*
|
30
|
+
* @param {object} domBindings - The DOM bindings for the instance.
|
31
|
+
*/
|
32
|
+
constructor(domBindings) {
|
33
|
+
/**
|
34
|
+
* Applies the necessary class names to the root element.
|
35
|
+
*/
|
36
|
+
_classPrivateMethodInitSpec(this, _StylesHandler_brand);
|
37
|
+
/**
|
38
|
+
* The name of the theme.
|
39
|
+
*
|
40
|
+
* @type {string|undefined}
|
41
|
+
*/
|
42
|
+
_classPrivateFieldInitSpec(this, _themeName, void 0);
|
43
|
+
/**
|
44
|
+
* The instance's root element.
|
45
|
+
*
|
46
|
+
* @type {HTMLElement}
|
47
|
+
*/
|
48
|
+
_classPrivateFieldInitSpec(this, _rootElement, void 0);
|
49
|
+
/**
|
50
|
+
* The computed style of the root element.
|
51
|
+
*
|
52
|
+
* @type {CSSStyleDeclaration}
|
53
|
+
* @private
|
54
|
+
*/
|
55
|
+
_classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
|
56
|
+
/**
|
57
|
+
* The root document of the instance.
|
58
|
+
*
|
59
|
+
* @type {Document}
|
60
|
+
* @private
|
61
|
+
*/
|
62
|
+
_classPrivateFieldInitSpec(this, _rootDocument, void 0);
|
63
|
+
/**
|
64
|
+
* `true` if the classic theme is enabled, `false` otherwise.
|
65
|
+
*
|
66
|
+
* @type {boolean}
|
67
|
+
*/
|
68
|
+
_classPrivateFieldInitSpec(this, _isClassicTheme, true);
|
69
|
+
/**
|
70
|
+
* An object to store CSS variable values.
|
71
|
+
*
|
72
|
+
* @type {object}
|
73
|
+
* @private
|
74
|
+
*/
|
75
|
+
_classPrivateFieldInitSpec(this, _cssVars, {});
|
76
|
+
/**
|
77
|
+
* Stores the computed styles for various elements.
|
78
|
+
*
|
79
|
+
* @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
|
80
|
+
* @private
|
81
|
+
*/
|
82
|
+
_classPrivateFieldInitSpec(this, _computedStyles, {});
|
83
|
+
_classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement.parentElement);
|
84
|
+
_classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
|
85
|
+
}
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Gets the value indicating whether the classic theme is enabled.
|
89
|
+
*
|
90
|
+
* @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
|
91
|
+
*/
|
92
|
+
isClassicTheme() {
|
93
|
+
return _classPrivateFieldGet(_isClassicTheme, this);
|
94
|
+
}
|
95
|
+
|
96
|
+
/**
|
97
|
+
* Retrieves the value of a specified CSS variable.
|
98
|
+
*
|
99
|
+
* @param {string} variableName - The name of the CSS variable to retrieve.
|
100
|
+
* @returns {number|null|undefined} The value of the specified CSS variable, or `undefined` if not found.
|
101
|
+
*/
|
102
|
+
getCSSVariableValue(variableName) {
|
103
|
+
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
104
|
+
return null;
|
105
|
+
}
|
106
|
+
if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
|
107
|
+
return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
|
108
|
+
}
|
109
|
+
const acquiredValue = _assertClassBrand(_StylesHandler_brand, this, _getParsedCSSValue).call(this, `--ht-${variableName}`);
|
110
|
+
if (acquiredValue !== null) {
|
111
|
+
_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
|
112
|
+
return acquiredValue;
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
/**
|
117
|
+
* Retrieves the computed style value for a specified CSS property of a `td` element.
|
118
|
+
*
|
119
|
+
* @param {string} cssProperty - The CSS property to retrieve the value for.
|
120
|
+
* @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
|
121
|
+
*/
|
122
|
+
getStyleForTD(cssProperty) {
|
123
|
+
var _classPrivateFieldGet2;
|
124
|
+
return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
|
125
|
+
}
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Calculates the row height based on the current theme and CSS variables.
|
129
|
+
*
|
130
|
+
* @returns {number} The calculated row height.
|
131
|
+
*/
|
132
|
+
getDefaultRowHeight() {
|
133
|
+
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
134
|
+
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
135
|
+
}
|
136
|
+
const cssVarRowHeightValue = this.getCSSVariableValue('row-height');
|
137
|
+
if (!cssVarRowHeightValue) {
|
138
|
+
(0, _console.warn)(`The "${_classPrivateFieldGet(_themeName, this)}" theme is enabled, but its stylesheets are missing. \
|
139
|
+
Import the correct CSS files in order to use that theme.`);
|
140
|
+
_classPrivateFieldSet(_isClassicTheme, this, true);
|
141
|
+
this.useTheme();
|
142
|
+
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
143
|
+
}
|
144
|
+
return cssVarRowHeightValue;
|
145
|
+
}
|
146
|
+
|
147
|
+
/**
|
148
|
+
* Checks if the cells are using the `border-box` box-sizing model.
|
149
|
+
*
|
150
|
+
* @returns {boolean}
|
151
|
+
*/
|
152
|
+
areCellsBorderBox() {
|
153
|
+
return this.getStyleForTD('box-sizing') === 'border-box';
|
154
|
+
}
|
155
|
+
|
156
|
+
/**
|
157
|
+
* Applies the specified theme to the instance.
|
158
|
+
*
|
159
|
+
* @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
|
160
|
+
*/
|
161
|
+
useTheme(themeName) {
|
162
|
+
if (!themeName) {
|
163
|
+
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
164
|
+
_classPrivateFieldSet(_isClassicTheme, this, true);
|
165
|
+
_classPrivateFieldSet(_themeName, this, themeName || undefined);
|
166
|
+
return;
|
167
|
+
}
|
168
|
+
if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
|
169
|
+
if (_classPrivateFieldGet(_themeName, this)) {
|
170
|
+
_assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
|
171
|
+
}
|
172
|
+
_classPrivateFieldSet(_themeName, this, themeName);
|
173
|
+
_classPrivateFieldSet(_isClassicTheme, this, false);
|
174
|
+
_assertClassBrand(_StylesHandler_brand, this, _applyClassNames).call(this);
|
175
|
+
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
/**
|
180
|
+
* Gets the name of the theme.
|
181
|
+
*
|
182
|
+
* @returns {string|undefined}
|
183
|
+
*/
|
184
|
+
getThemeName() {
|
185
|
+
return _classPrivateFieldGet(_themeName, this);
|
186
|
+
}
|
187
|
+
|
188
|
+
/**
|
189
|
+
* Removes the theme-related class names from the root element.
|
190
|
+
*/
|
191
|
+
removeClassNames() {
|
192
|
+
if ((0, _element.hasClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
|
193
|
+
(0, _element.removeClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
194
|
+
}
|
195
|
+
}
|
196
|
+
}
|
197
|
+
exports.StylesHandler = StylesHandler;
|
198
|
+
function _applyClassNames() {
|
199
|
+
if (!(0, _element.hasClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
|
200
|
+
(0, _element.addClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
201
|
+
}
|
202
|
+
}
|
203
|
+
/**
|
204
|
+
* Caches the computed style values for the root element and `td` element.
|
205
|
+
*/
|
206
|
+
function _cacheStylesheetValues() {
|
207
|
+
if (!this.isClassicTheme()) {
|
208
|
+
_classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
|
209
|
+
}
|
210
|
+
const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing']);
|
211
|
+
_classPrivateFieldGet(_computedStyles, this).td = {
|
212
|
+
..._classPrivateFieldGet(_computedStyles, this).td,
|
213
|
+
...{
|
214
|
+
'box-sizing': stylesForTD['box-sizing']
|
215
|
+
}
|
216
|
+
};
|
217
|
+
}
|
218
|
+
/**
|
219
|
+
* Retrieves and processes the computed styles for a `td` element.
|
220
|
+
*
|
221
|
+
* This method creates a temporary table structure, appends it to the root element,
|
222
|
+
* retrieves the computed styles for the `td` element, and then removes the table
|
223
|
+
* from the DOM. The computed styles are passed to the provided callback function.
|
224
|
+
*
|
225
|
+
* @param {Array} cssProps - An array of CSS properties to retrieve.
|
226
|
+
* @returns {object} An object containing the requested computed styles for the `td` element.
|
227
|
+
* @private
|
228
|
+
*/
|
229
|
+
function _getStylesForTD(cssProps) {
|
230
|
+
const rootDocument = _classPrivateFieldGet(_rootDocument, this);
|
231
|
+
const rootElement = _classPrivateFieldGet(_rootElement, this);
|
232
|
+
const table = rootDocument.createElement('table');
|
233
|
+
const tbody = rootDocument.createElement('tbody');
|
234
|
+
const tr = rootDocument.createElement('tr');
|
235
|
+
// This needs not to be the first row in order to get "regular" vaules.
|
236
|
+
const tr2 = rootDocument.createElement('tr');
|
237
|
+
const td = rootDocument.createElement('td');
|
238
|
+
tr2.appendChild(td);
|
239
|
+
tbody.appendChild(tr);
|
240
|
+
tbody.appendChild(tr2);
|
241
|
+
table.appendChild(tbody);
|
242
|
+
rootElement.appendChild(table);
|
243
|
+
const computedStyle = getComputedStyle(td);
|
244
|
+
const returnObject = {};
|
245
|
+
cssProps.forEach(prop => {
|
246
|
+
returnObject[prop] = computedStyle.getPropertyValue(prop);
|
247
|
+
});
|
248
|
+
rootElement.removeChild(table);
|
249
|
+
return returnObject;
|
250
|
+
}
|
251
|
+
/**
|
252
|
+
* Parses the value of a specified CSS property from the root element's computed style.
|
253
|
+
*
|
254
|
+
* @param {string} property - The CSS property to retrieve and parse.
|
255
|
+
* @returns {number|null} The parsed value of the CSS property.
|
256
|
+
*/
|
257
|
+
function _getParsedCSSValue(property) {
|
258
|
+
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
259
|
+
return null;
|
260
|
+
}
|
261
|
+
const parsedValue = parseInt(_classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property), 10);
|
262
|
+
return Number.isNaN(parsedValue) ? null : parsedValue;
|
263
|
+
}
|
264
|
+
/**
|
265
|
+
* Clears the cached values.
|
266
|
+
*/
|
267
|
+
function _clearCachedValues() {
|
268
|
+
_classPrivateFieldSet(_computedStyles, this, {});
|
269
|
+
_classPrivateFieldSet(_cssVars, this, {});
|
270
|
+
_classPrivateFieldSet(_isClassicTheme, this, true);
|
271
|
+
}
|
@@ -0,0 +1,267 @@
|
|
1
|
+
import "core-js/modules/es.error.cause.js";
|
2
|
+
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
3
|
+
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
4
|
+
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
5
|
+
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
6
|
+
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
7
|
+
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
|
8
|
+
import { addClass, hasClass, removeClass } from "../../../../helpers/dom/element.mjs";
|
9
|
+
import { warn } from "../../../../helpers/console.mjs";
|
10
|
+
const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Handles the theme-related style operations.
|
14
|
+
*/
|
15
|
+
var _themeName = /*#__PURE__*/new WeakMap();
|
16
|
+
var _rootElement = /*#__PURE__*/new WeakMap();
|
17
|
+
var _rootComputedStyle = /*#__PURE__*/new WeakMap();
|
18
|
+
var _rootDocument = /*#__PURE__*/new WeakMap();
|
19
|
+
var _isClassicTheme = /*#__PURE__*/new WeakMap();
|
20
|
+
var _cssVars = /*#__PURE__*/new WeakMap();
|
21
|
+
var _computedStyles = /*#__PURE__*/new WeakMap();
|
22
|
+
var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
|
23
|
+
export class StylesHandler {
|
24
|
+
/**
|
25
|
+
* Initializes a new instance of the `StylesHandler` class.
|
26
|
+
*
|
27
|
+
* @param {object} domBindings - The DOM bindings for the instance.
|
28
|
+
*/
|
29
|
+
constructor(domBindings) {
|
30
|
+
/**
|
31
|
+
* Applies the necessary class names to the root element.
|
32
|
+
*/
|
33
|
+
_classPrivateMethodInitSpec(this, _StylesHandler_brand);
|
34
|
+
/**
|
35
|
+
* The name of the theme.
|
36
|
+
*
|
37
|
+
* @type {string|undefined}
|
38
|
+
*/
|
39
|
+
_classPrivateFieldInitSpec(this, _themeName, void 0);
|
40
|
+
/**
|
41
|
+
* The instance's root element.
|
42
|
+
*
|
43
|
+
* @type {HTMLElement}
|
44
|
+
*/
|
45
|
+
_classPrivateFieldInitSpec(this, _rootElement, void 0);
|
46
|
+
/**
|
47
|
+
* The computed style of the root element.
|
48
|
+
*
|
49
|
+
* @type {CSSStyleDeclaration}
|
50
|
+
* @private
|
51
|
+
*/
|
52
|
+
_classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
|
53
|
+
/**
|
54
|
+
* The root document of the instance.
|
55
|
+
*
|
56
|
+
* @type {Document}
|
57
|
+
* @private
|
58
|
+
*/
|
59
|
+
_classPrivateFieldInitSpec(this, _rootDocument, void 0);
|
60
|
+
/**
|
61
|
+
* `true` if the classic theme is enabled, `false` otherwise.
|
62
|
+
*
|
63
|
+
* @type {boolean}
|
64
|
+
*/
|
65
|
+
_classPrivateFieldInitSpec(this, _isClassicTheme, true);
|
66
|
+
/**
|
67
|
+
* An object to store CSS variable values.
|
68
|
+
*
|
69
|
+
* @type {object}
|
70
|
+
* @private
|
71
|
+
*/
|
72
|
+
_classPrivateFieldInitSpec(this, _cssVars, {});
|
73
|
+
/**
|
74
|
+
* Stores the computed styles for various elements.
|
75
|
+
*
|
76
|
+
* @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
|
77
|
+
* @private
|
78
|
+
*/
|
79
|
+
_classPrivateFieldInitSpec(this, _computedStyles, {});
|
80
|
+
_classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement.parentElement);
|
81
|
+
_classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
|
82
|
+
}
|
83
|
+
|
84
|
+
/**
|
85
|
+
* Gets the value indicating whether the classic theme is enabled.
|
86
|
+
*
|
87
|
+
* @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
|
88
|
+
*/
|
89
|
+
isClassicTheme() {
|
90
|
+
return _classPrivateFieldGet(_isClassicTheme, this);
|
91
|
+
}
|
92
|
+
|
93
|
+
/**
|
94
|
+
* Retrieves the value of a specified CSS variable.
|
95
|
+
*
|
96
|
+
* @param {string} variableName - The name of the CSS variable to retrieve.
|
97
|
+
* @returns {number|null|undefined} The value of the specified CSS variable, or `undefined` if not found.
|
98
|
+
*/
|
99
|
+
getCSSVariableValue(variableName) {
|
100
|
+
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
101
|
+
return null;
|
102
|
+
}
|
103
|
+
if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
|
104
|
+
return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
|
105
|
+
}
|
106
|
+
const acquiredValue = _assertClassBrand(_StylesHandler_brand, this, _getParsedCSSValue).call(this, `--ht-${variableName}`);
|
107
|
+
if (acquiredValue !== null) {
|
108
|
+
_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
|
109
|
+
return acquiredValue;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
|
113
|
+
/**
|
114
|
+
* Retrieves the computed style value for a specified CSS property of a `td` element.
|
115
|
+
*
|
116
|
+
* @param {string} cssProperty - The CSS property to retrieve the value for.
|
117
|
+
* @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
|
118
|
+
*/
|
119
|
+
getStyleForTD(cssProperty) {
|
120
|
+
var _classPrivateFieldGet2;
|
121
|
+
return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
|
122
|
+
}
|
123
|
+
|
124
|
+
/**
|
125
|
+
* Calculates the row height based on the current theme and CSS variables.
|
126
|
+
*
|
127
|
+
* @returns {number} The calculated row height.
|
128
|
+
*/
|
129
|
+
getDefaultRowHeight() {
|
130
|
+
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
131
|
+
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
132
|
+
}
|
133
|
+
const cssVarRowHeightValue = this.getCSSVariableValue('row-height');
|
134
|
+
if (!cssVarRowHeightValue) {
|
135
|
+
warn(`The "${_classPrivateFieldGet(_themeName, this)}" theme is enabled, but its stylesheets are missing. \
|
136
|
+
Import the correct CSS files in order to use that theme.`);
|
137
|
+
_classPrivateFieldSet(_isClassicTheme, this, true);
|
138
|
+
this.useTheme();
|
139
|
+
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
140
|
+
}
|
141
|
+
return cssVarRowHeightValue;
|
142
|
+
}
|
143
|
+
|
144
|
+
/**
|
145
|
+
* Checks if the cells are using the `border-box` box-sizing model.
|
146
|
+
*
|
147
|
+
* @returns {boolean}
|
148
|
+
*/
|
149
|
+
areCellsBorderBox() {
|
150
|
+
return this.getStyleForTD('box-sizing') === 'border-box';
|
151
|
+
}
|
152
|
+
|
153
|
+
/**
|
154
|
+
* Applies the specified theme to the instance.
|
155
|
+
*
|
156
|
+
* @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
|
157
|
+
*/
|
158
|
+
useTheme(themeName) {
|
159
|
+
if (!themeName) {
|
160
|
+
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
161
|
+
_classPrivateFieldSet(_isClassicTheme, this, true);
|
162
|
+
_classPrivateFieldSet(_themeName, this, themeName || undefined);
|
163
|
+
return;
|
164
|
+
}
|
165
|
+
if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
|
166
|
+
if (_classPrivateFieldGet(_themeName, this)) {
|
167
|
+
_assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
|
168
|
+
}
|
169
|
+
_classPrivateFieldSet(_themeName, this, themeName);
|
170
|
+
_classPrivateFieldSet(_isClassicTheme, this, false);
|
171
|
+
_assertClassBrand(_StylesHandler_brand, this, _applyClassNames).call(this);
|
172
|
+
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
173
|
+
}
|
174
|
+
}
|
175
|
+
|
176
|
+
/**
|
177
|
+
* Gets the name of the theme.
|
178
|
+
*
|
179
|
+
* @returns {string|undefined}
|
180
|
+
*/
|
181
|
+
getThemeName() {
|
182
|
+
return _classPrivateFieldGet(_themeName, this);
|
183
|
+
}
|
184
|
+
|
185
|
+
/**
|
186
|
+
* Removes the theme-related class names from the root element.
|
187
|
+
*/
|
188
|
+
removeClassNames() {
|
189
|
+
if (hasClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
|
190
|
+
removeClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
191
|
+
}
|
192
|
+
}
|
193
|
+
}
|
194
|
+
function _applyClassNames() {
|
195
|
+
if (!hasClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
|
196
|
+
addClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
197
|
+
}
|
198
|
+
}
|
199
|
+
/**
|
200
|
+
* Caches the computed style values for the root element and `td` element.
|
201
|
+
*/
|
202
|
+
function _cacheStylesheetValues() {
|
203
|
+
if (!this.isClassicTheme()) {
|
204
|
+
_classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
|
205
|
+
}
|
206
|
+
const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing']);
|
207
|
+
_classPrivateFieldGet(_computedStyles, this).td = {
|
208
|
+
..._classPrivateFieldGet(_computedStyles, this).td,
|
209
|
+
...{
|
210
|
+
'box-sizing': stylesForTD['box-sizing']
|
211
|
+
}
|
212
|
+
};
|
213
|
+
}
|
214
|
+
/**
|
215
|
+
* Retrieves and processes the computed styles for a `td` element.
|
216
|
+
*
|
217
|
+
* This method creates a temporary table structure, appends it to the root element,
|
218
|
+
* retrieves the computed styles for the `td` element, and then removes the table
|
219
|
+
* from the DOM. The computed styles are passed to the provided callback function.
|
220
|
+
*
|
221
|
+
* @param {Array} cssProps - An array of CSS properties to retrieve.
|
222
|
+
* @returns {object} An object containing the requested computed styles for the `td` element.
|
223
|
+
* @private
|
224
|
+
*/
|
225
|
+
function _getStylesForTD(cssProps) {
|
226
|
+
const rootDocument = _classPrivateFieldGet(_rootDocument, this);
|
227
|
+
const rootElement = _classPrivateFieldGet(_rootElement, this);
|
228
|
+
const table = rootDocument.createElement('table');
|
229
|
+
const tbody = rootDocument.createElement('tbody');
|
230
|
+
const tr = rootDocument.createElement('tr');
|
231
|
+
// This needs not to be the first row in order to get "regular" vaules.
|
232
|
+
const tr2 = rootDocument.createElement('tr');
|
233
|
+
const td = rootDocument.createElement('td');
|
234
|
+
tr2.appendChild(td);
|
235
|
+
tbody.appendChild(tr);
|
236
|
+
tbody.appendChild(tr2);
|
237
|
+
table.appendChild(tbody);
|
238
|
+
rootElement.appendChild(table);
|
239
|
+
const computedStyle = getComputedStyle(td);
|
240
|
+
const returnObject = {};
|
241
|
+
cssProps.forEach(prop => {
|
242
|
+
returnObject[prop] = computedStyle.getPropertyValue(prop);
|
243
|
+
});
|
244
|
+
rootElement.removeChild(table);
|
245
|
+
return returnObject;
|
246
|
+
}
|
247
|
+
/**
|
248
|
+
* Parses the value of a specified CSS property from the root element's computed style.
|
249
|
+
*
|
250
|
+
* @param {string} property - The CSS property to retrieve and parse.
|
251
|
+
* @returns {number|null} The parsed value of the CSS property.
|
252
|
+
*/
|
253
|
+
function _getParsedCSSValue(property) {
|
254
|
+
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
255
|
+
return null;
|
256
|
+
}
|
257
|
+
const parsedValue = parseInt(_classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property), 10);
|
258
|
+
return Number.isNaN(parsedValue) ? null : parsedValue;
|
259
|
+
}
|
260
|
+
/**
|
261
|
+
* Clears the cached values.
|
262
|
+
*/
|
263
|
+
function _clearCachedValues() {
|
264
|
+
_classPrivateFieldSet(_computedStyles, this, {});
|
265
|
+
_classPrivateFieldSet(_cssVars, this, {});
|
266
|
+
_classPrivateFieldSet(_isClassicTheme, this, true);
|
267
|
+
}
|
@@ -263,6 +263,7 @@ class Viewport {
|
|
263
263
|
viewportHeight: height,
|
264
264
|
scrollOffset: pos,
|
265
265
|
totalRows: wtSettings.getSetting('totalRows'),
|
266
|
+
defaultRowHeight: this.instance.stylesHandler.getDefaultRowHeight(),
|
266
267
|
rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
|
267
268
|
overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
|
268
269
|
horizontalScrollbarHeight: scrollbarHeight
|
@@ -260,6 +260,7 @@ class Viewport {
|
|
260
260
|
viewportHeight: height,
|
261
261
|
scrollOffset: pos,
|
262
262
|
totalRows: wtSettings.getSetting('totalRows'),
|
263
|
+
defaultRowHeight: this.instance.stylesHandler.getDefaultRowHeight(),
|
263
264
|
rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
|
264
265
|
overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
|
265
266
|
horizontalScrollbarHeight: scrollbarHeight
|
package/base.js
CHANGED
@@ -45,8 +45,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
|
|
45
45
|
Handsontable.CellCoords = _src.CellCoords;
|
46
46
|
Handsontable.CellRange = _src.CellRange;
|
47
47
|
Handsontable.packageName = 'handsontable';
|
48
|
-
Handsontable.buildDate = "
|
49
|
-
Handsontable.version = "0.0.0-next-
|
48
|
+
Handsontable.buildDate = "08/11/2024 09:48:18";
|
49
|
+
Handsontable.version = "0.0.0-next-6129043-20241108";
|
50
50
|
Handsontable.languages = {
|
51
51
|
dictionaryKeys: _registry.dictionaryKeys,
|
52
52
|
getLanguageDictionary: _registry.getLanguageDictionary,
|
package/base.mjs
CHANGED
@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
|
|
35
35
|
Handsontable.CellCoords = CellCoords;
|
36
36
|
Handsontable.CellRange = CellRange;
|
37
37
|
Handsontable.packageName = 'handsontable';
|
38
|
-
Handsontable.buildDate = "
|
39
|
-
Handsontable.version = "0.0.0-next-
|
38
|
+
Handsontable.buildDate = "08/11/2024 09:48:23";
|
39
|
+
Handsontable.version = "0.0.0-next-6129043-20241108";
|
40
40
|
Handsontable.languages = {
|
41
41
|
dictionaryKeys,
|
42
42
|
getLanguageDictionary,
|
package/core.d.ts
CHANGED
@@ -73,6 +73,7 @@ export default class Core {
|
|
73
73
|
getCoords(element: Element | null): CellCoords;
|
74
74
|
getCopyableData(row: number, column: number): string;
|
75
75
|
getCopyableText(startRow: number, startColumn: number, endRow: number, endColumn: number): string;
|
76
|
+
getCurrentThemeName(): string | undefined;
|
76
77
|
getData(row?: number, column?: number, row2?: number, column2?: number): CellValue[];
|
77
78
|
getDataAtCell(row: number, column: number): CellValue;
|
78
79
|
getDataAtCol(column: number): CellValue[];
|
@@ -179,6 +180,7 @@ export default class Core {
|
|
179
180
|
unlisten(): void;
|
180
181
|
updateData(data: CellValue[][] | RowObject[], source?: string): void;
|
181
182
|
updateSettings(settings: GridSettings, init?: boolean): void;
|
183
|
+
useTheme(themeName: string|undefined): void;
|
182
184
|
validateCell(value: any, cellProperties: CellProperties, callback: (valid: boolean) => void, source: string): void;
|
183
185
|
validateCells(callback?: (valid: boolean) => void): void;
|
184
186
|
validateColumns(columns: number[], callback?: (valid: boolean) => void): void;
|
package/core.js
CHANGED
@@ -43,6 +43,7 @@ var _index3 = require("./core/index");
|
|
43
43
|
var _uniqueMap = require("./utils/dataStructures/uniqueMap");
|
44
44
|
var _shortcuts = require("./shortcuts");
|
45
45
|
var _shortcutContexts = require("./shortcutContexts");
|
46
|
+
var _themes = require("./helpers/themes");
|
46
47
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
47
48
|
let activeGuid = null;
|
48
49
|
|
@@ -230,6 +231,7 @@ function Core(rootElement, userSettings) {
|
|
230
231
|
rootElement.insertBefore(this.container, rootElement.firstChild);
|
231
232
|
if ((0, _rootInstance.isRootInstance)(this)) {
|
232
233
|
(0, _mixed._injectProductInfo)(userSettings.licenseKey, rootElement);
|
234
|
+
(0, _element.addClass)(rootElement, 'ht-wrapper');
|
233
235
|
}
|
234
236
|
this.guid = `ht_${(0, _string.randomString)()}`; // this is the namespace for global events
|
235
237
|
|
@@ -1030,6 +1032,13 @@ function Core(rootElement, userSettings) {
|
|
1030
1032
|
}
|
1031
1033
|
this.updateSettings(tableMeta, true);
|
1032
1034
|
this.view = new _tableView.default(this);
|
1035
|
+
const themeName = tableMeta.themeName || (0, _themes.getThemeClassName)(instance.rootElement);
|
1036
|
+
|
1037
|
+
// Use the theme defined as a root element class or in the settings (in that order).
|
1038
|
+
instance.useTheme(themeName);
|
1039
|
+
|
1040
|
+
// Add the theme class name to the license info element.
|
1041
|
+
instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
|
1033
1042
|
editorManager = _editorManager.default.getInstance(instance, tableMeta, selection);
|
1034
1043
|
viewportScroller = (0, _index3.createViewportScroller)(instance);
|
1035
1044
|
focusManager = new _focusManager.FocusManager(instance);
|
@@ -2383,6 +2392,19 @@ function Core(rootElement, userSettings) {
|
|
2383
2392
|
if (instance.view) {
|
2384
2393
|
instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
|
2385
2394
|
instance.view._wt.exportSettingsAsClassNames();
|
2395
|
+
const currentThemeName = instance.getCurrentThemeName();
|
2396
|
+
const themeNameOptionExists = (0, _object.hasOwnProperty)(settings, 'themeName');
|
2397
|
+
if (currentThemeName && themeNameOptionExists) {
|
2398
|
+
instance.view.getStylesHandler().removeClassNames();
|
2399
|
+
instance.view.removeClassNameFromLicenseElement(currentThemeName);
|
2400
|
+
}
|
2401
|
+
const themeName = themeNameOptionExists && settings.themeName || (0, _themes.getThemeClassName)(instance.rootElement);
|
2402
|
+
|
2403
|
+
// Use the theme defined as a root element class or in the settings (in that order).
|
2404
|
+
instance.useTheme(themeName);
|
2405
|
+
|
2406
|
+
// Add the theme class name to the license info element.
|
2407
|
+
instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
|
2386
2408
|
}
|
2387
2409
|
instance.runHooks('afterUpdateSettings', settings);
|
2388
2410
|
}
|
@@ -4586,6 +4608,30 @@ function Core(rootElement, userSettings) {
|
|
4586
4608
|
};
|
4587
4609
|
this.timeouts = [];
|
4588
4610
|
|
4611
|
+
/**
|
4612
|
+
* Use the theme specified by the provided name.
|
4613
|
+
*
|
4614
|
+
* @memberof Core#
|
4615
|
+
* @function useTheme
|
4616
|
+
* @since 15.0.0
|
4617
|
+
* @param {string|boolean|undefined} themeName The name of the theme to use.
|
4618
|
+
*/
|
4619
|
+
this.useTheme = themeName => {
|
4620
|
+
this.view.getStylesHandler().useTheme(themeName);
|
4621
|
+
};
|
4622
|
+
|
4623
|
+
/**
|
4624
|
+
* Gets the name of the currently used theme.
|
4625
|
+
*
|
4626
|
+
* @memberof Core#
|
4627
|
+
* @function getCurrentThemeName
|
4628
|
+
* @since 15.0.0
|
4629
|
+
* @returns {string|undefined} The name of the currently used theme.
|
4630
|
+
*/
|
4631
|
+
this.getCurrentThemeName = () => {
|
4632
|
+
return this.view.getStylesHandler().getThemeName();
|
4633
|
+
};
|
4634
|
+
|
4589
4635
|
/**
|
4590
4636
|
* Sets timeout. Purpose of this method is to clear all known timeouts when `destroy` method is called.
|
4591
4637
|
*
|