handsontable 0.0.0-next-9e7a0e1-20241015 → 0.0.0-next-b0eaa90-20241016
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/viewportRows.js +5 -1
- package/3rdparty/walkontable/src/calculator/viewportRows.mjs +5 -2
- 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/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/settings.js +0 -2
- package/3rdparty/walkontable/src/settings.mjs +0 -2
- package/3rdparty/walkontable/src/table.js +6 -5
- package/3rdparty/walkontable/src/table.mjs +6 -5
- 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 +185 -0
- package/3rdparty/walkontable/src/utils/stylesHandler.mjs +181 -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.js +11 -0
- package/core.mjs +11 -0
- package/dataMap/metaManager/metaSchema.js +17 -0
- package/dataMap/metaManager/metaSchema.mjs +17 -0
- package/dist/handsontable.css +236 -5
- package/dist/handsontable.full.css +3 -3
- package/dist/handsontable.full.js +3892 -3806
- package/dist/handsontable.full.min.css +4 -3
- package/dist/handsontable.full.min.js +26 -26
- package/dist/handsontable.js +3599 -3507
- package/dist/handsontable.min.css +9 -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 +1 -1
- package/editors/handsontableEditor/handsontableEditor.mjs +1 -1
- package/editors/passwordEditor/passwordEditor.js +4 -0
- package/editors/passwordEditor/passwordEditor.mjs +5 -1
- package/editors/selectEditor/selectEditor.js +20 -9
- package/editors/selectEditor/selectEditor.mjs +20 -9
- package/editors/textEditor/textEditor.js +7 -11
- package/editors/textEditor/textEditor.mjs +8 -12
- 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 +8 -1
- package/plugins/comments/commentEditor.mjs +8 -1
- package/plugins/comments/comments.js +1 -1
- package/plugins/comments/comments.mjs +1 -1
- package/plugins/contextMenu/menu/menu.js +4 -4
- package/plugins/contextMenu/menu/menu.mjs +4 -4
- package/plugins/manualRowMove/manualRowMove.js +1 -1
- package/plugins/manualRowMove/manualRowMove.mjs +1 -1
- package/plugins/mergeCells/mergeCells.js +1 -1
- package/plugins/mergeCells/mergeCells.mjs +1 -1
- package/plugins/nestedRows/ui/headers.js +3 -1
- package/plugins/nestedRows/ui/headers.mjs +3 -1
- package/styles/handsontable.css +1920 -0
- package/styles/handsontable.min.css +30 -0
- package/styles/ht-theme-gemini.css +690 -0
- package/styles/ht-theme-gemini.min.css +30 -0
- package/styles/ht-theme-main.css +712 -0
- package/styles/ht-theme-main.min.css +30 -0
- package/tableView.js +33 -0
- package/tableView.mjs +33 -0
- package/utils/autoResize.js +4 -1
- package/utils/autoResize.mjs +4 -1
- package/utils/ghostTable.js +1 -1
- package/utils/ghostTable.mjs +1 -1
@@ -375,7 +375,7 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
|
|
375
375
|
let lastRowHeight = 0;
|
376
376
|
let height = null;
|
377
377
|
do {
|
378
|
-
lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.
|
378
|
+
lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.getDefaultRowHeight();
|
379
379
|
tempHeight += lastRowHeight;
|
380
380
|
i += 1;
|
381
381
|
} while (tempHeight < spaceAvailable);
|
@@ -372,7 +372,7 @@ export class AutocompleteEditor extends HandsontableEditor {
|
|
372
372
|
let lastRowHeight = 0;
|
373
373
|
let height = null;
|
374
374
|
do {
|
375
|
-
lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.
|
375
|
+
lastRowHeight = this.htEditor.getRowHeight(i) || this.htEditor.view.getDefaultRowHeight();
|
376
376
|
tempHeight += lastRowHeight;
|
377
377
|
i += 1;
|
378
378
|
} while (tempHeight < spaceAvailable);
|
@@ -492,7 +492,7 @@ class BaseEditor {
|
|
492
492
|
const actualVerticalScrollbarWidth = (0, _element.hasVerticalScrollbar)(scrollableContainerTop) ? scrollbarWidth : 0;
|
493
493
|
const actualHorizontalScrollbarWidth = (0, _element.hasHorizontalScrollbar)(scrollableContainerLeft) ? scrollbarWidth : 0;
|
494
494
|
const maxWidth = this.hot.view.maximumVisibleElementWidth(cellStartOffset) - actualVerticalScrollbarWidth + inlineStartBorderCompensation;
|
495
|
-
const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation,
|
495
|
+
const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.view.getDefaultRowHeight());
|
496
496
|
return {
|
497
497
|
top: topPos,
|
498
498
|
start: inlineStartPos,
|
@@ -488,7 +488,7 @@ export class BaseEditor {
|
|
488
488
|
const actualVerticalScrollbarWidth = hasVerticalScrollbar(scrollableContainerTop) ? scrollbarWidth : 0;
|
489
489
|
const actualHorizontalScrollbarWidth = hasHorizontalScrollbar(scrollableContainerLeft) ? scrollbarWidth : 0;
|
490
490
|
const maxWidth = this.hot.view.maximumVisibleElementWidth(cellStartOffset) - actualVerticalScrollbarWidth + inlineStartBorderCompensation;
|
491
|
-
const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation,
|
491
|
+
const maxHeight = Math.max(this.hot.view.maximumVisibleElementHeight(cellTopOffset) - actualHorizontalScrollbarWidth + topBorderCompensation, this.hot.view.getDefaultRowHeight());
|
492
492
|
return {
|
493
493
|
top: topPos,
|
494
494
|
start: inlineStartPos,
|
@@ -66,7 +66,9 @@ class DateEditor extends _textEditor.TextEditor {
|
|
66
66
|
this.datePickerStyle.left = 0;
|
67
67
|
this.datePickerStyle.zIndex = 9999;
|
68
68
|
this.datePicker.setAttribute('dir', this.hot.isRtl() ? 'rtl' : 'ltr');
|
69
|
+
const themeClassName = this.hot.getSettings().themeName;
|
69
70
|
(0, _element.addClass)(this.datePicker, 'htDatepickerHolder');
|
71
|
+
(0, _element.addClass)(this.datePicker, themeClassName);
|
70
72
|
this.hot.rootDocument.body.appendChild(this.datePicker);
|
71
73
|
|
72
74
|
/**
|
@@ -62,7 +62,9 @@ export class DateEditor extends TextEditor {
|
|
62
62
|
this.datePickerStyle.left = 0;
|
63
63
|
this.datePickerStyle.zIndex = 9999;
|
64
64
|
this.datePicker.setAttribute('dir', this.hot.isRtl() ? 'rtl' : 'ltr');
|
65
|
+
const themeClassName = this.hot.getSettings().themeName;
|
65
66
|
addClass(this.datePicker, 'htDatepickerHolder');
|
67
|
+
addClass(this.datePicker, themeClassName);
|
66
68
|
this.hot.rootDocument.body.appendChild(this.datePicker);
|
67
69
|
|
68
70
|
/**
|
@@ -3,6 +3,7 @@
|
|
3
3
|
exports.__esModule = true;
|
4
4
|
var _textEditor = require("../textEditor");
|
5
5
|
var _element = require("../../helpers/dom/element");
|
6
|
+
var _a11y = require("../../helpers/a11y");
|
6
7
|
const EDITOR_TYPE = exports.EDITOR_TYPE = 'password';
|
7
8
|
|
8
9
|
/**
|
@@ -22,6 +23,9 @@ class PasswordEditor extends _textEditor.TextEditor {
|
|
22
23
|
this.textareaStyle = this.TEXTAREA.style;
|
23
24
|
this.textareaStyle.width = 0;
|
24
25
|
this.textareaStyle.height = 0;
|
26
|
+
if (this.hot.getSettings().ariaTags) {
|
27
|
+
(0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_HIDDEN)()]);
|
28
|
+
}
|
25
29
|
(0, _element.empty)(this.TEXTAREA_PARENT);
|
26
30
|
this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
|
27
31
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { TextEditor } from "../textEditor/index.mjs";
|
2
|
-
import { empty } from "../../helpers/dom/element.mjs";
|
2
|
+
import { empty, setAttribute } from "../../helpers/dom/element.mjs";
|
3
|
+
import { A11Y_HIDDEN } from "../../helpers/a11y.mjs";
|
3
4
|
export const EDITOR_TYPE = 'password';
|
4
5
|
|
5
6
|
/**
|
@@ -19,6 +20,9 @@ export class PasswordEditor extends TextEditor {
|
|
19
20
|
this.textareaStyle = this.TEXTAREA.style;
|
20
21
|
this.textareaStyle.width = 0;
|
21
22
|
this.textareaStyle.height = 0;
|
23
|
+
if (this.hot.getSettings().ariaTags) {
|
24
|
+
setAttribute(this.TEXTAREA, [A11Y_HIDDEN()]);
|
25
|
+
}
|
22
26
|
empty(this.TEXTAREA_PARENT);
|
23
27
|
this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
|
24
28
|
}
|
@@ -4,6 +4,7 @@ exports.__esModule = true;
|
|
4
4
|
var _baseEditor = require("../baseEditor");
|
5
5
|
var _element = require("../../helpers/dom/element");
|
6
6
|
var _object = require("../../helpers/object");
|
7
|
+
var _a11y = require("../../helpers/a11y");
|
7
8
|
const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
|
8
9
|
const SHORTCUTS_GROUP = 'selectEditor';
|
9
10
|
const EDITOR_TYPE = exports.EDITOR_TYPE = 'select';
|
@@ -21,11 +22,21 @@ class SelectEditor extends _baseEditor.BaseEditor {
|
|
21
22
|
* Initializes editor instance, DOM Element and mount hooks.
|
22
23
|
*/
|
23
24
|
init() {
|
25
|
+
this.selectWrapper = this.hot.rootDocument.createElement('div');
|
24
26
|
this.select = this.hot.rootDocument.createElement('select');
|
25
27
|
this.select.setAttribute('data-hot-input', 'true');
|
26
|
-
this.
|
27
|
-
|
28
|
-
this.hot.
|
28
|
+
this.selectWrapper.style.display = 'none';
|
29
|
+
const ARROW = this.hot.rootDocument.createElement('DIV');
|
30
|
+
const isAriaEnabled = this.hot.getSettings().ariaTags;
|
31
|
+
ARROW.className = 'htAutocompleteArrow';
|
32
|
+
if (isAriaEnabled) {
|
33
|
+
ARROW.setAttribute(...(0, _a11y.A11Y_HIDDEN)());
|
34
|
+
}
|
35
|
+
ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
|
36
|
+
(0, _element.addClass)(this.selectWrapper, 'htSelectEditor');
|
37
|
+
this.selectWrapper.appendChild(this.select);
|
38
|
+
this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
|
39
|
+
this.hot.rootElement.appendChild(this.selectWrapper);
|
29
40
|
this.registerHooks();
|
30
41
|
}
|
31
42
|
|
@@ -53,7 +64,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
|
|
53
64
|
open() {
|
54
65
|
this._opened = true;
|
55
66
|
this.refreshDimensions();
|
56
|
-
this.
|
67
|
+
this.selectWrapper.style.display = '';
|
57
68
|
const shortcutManager = this.hot.getShortcutManager();
|
58
69
|
shortcutManager.setActiveContextName('editor');
|
59
70
|
this.registerShortcuts();
|
@@ -64,9 +75,9 @@ class SelectEditor extends _baseEditor.BaseEditor {
|
|
64
75
|
*/
|
65
76
|
close() {
|
66
77
|
this._opened = false;
|
67
|
-
this.
|
68
|
-
if ((0, _element.hasClass)(this.
|
69
|
-
(0, _element.removeClass)(this.
|
78
|
+
this.selectWrapper.style.display = 'none';
|
79
|
+
if ((0, _element.hasClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
|
80
|
+
(0, _element.removeClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
|
70
81
|
}
|
71
82
|
this.unregisterShortcuts();
|
72
83
|
this.clearHooks();
|
@@ -172,13 +183,13 @@ class SelectEditor extends _baseEditor.BaseEditor {
|
|
172
183
|
width,
|
173
184
|
height
|
174
185
|
} = this.getEditedCellRect();
|
175
|
-
const selectStyle = this.
|
186
|
+
const selectStyle = this.selectWrapper.style;
|
176
187
|
selectStyle.height = `${height}px`;
|
177
188
|
selectStyle.width = `${width}px`;
|
178
189
|
selectStyle.top = `${top}px`;
|
179
190
|
selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
|
180
191
|
selectStyle.margin = '0px';
|
181
|
-
(0, _element.addClass)(this.
|
192
|
+
(0, _element.addClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
|
182
193
|
}
|
183
194
|
|
184
195
|
/**
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
|
2
2
|
import { addClass, empty, fastInnerHTML, hasClass, removeClass } from "../../helpers/dom/element.mjs";
|
3
3
|
import { objectEach } from "../../helpers/object.mjs";
|
4
|
+
import { A11Y_HIDDEN } from "../../helpers/a11y.mjs";
|
4
5
|
const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
|
5
6
|
const SHORTCUTS_GROUP = 'selectEditor';
|
6
7
|
export const EDITOR_TYPE = 'select';
|
@@ -18,11 +19,21 @@ export class SelectEditor extends BaseEditor {
|
|
18
19
|
* Initializes editor instance, DOM Element and mount hooks.
|
19
20
|
*/
|
20
21
|
init() {
|
22
|
+
this.selectWrapper = this.hot.rootDocument.createElement('div');
|
21
23
|
this.select = this.hot.rootDocument.createElement('select');
|
22
24
|
this.select.setAttribute('data-hot-input', 'true');
|
23
|
-
this.
|
24
|
-
|
25
|
-
this.hot.
|
25
|
+
this.selectWrapper.style.display = 'none';
|
26
|
+
const ARROW = this.hot.rootDocument.createElement('DIV');
|
27
|
+
const isAriaEnabled = this.hot.getSettings().ariaTags;
|
28
|
+
ARROW.className = 'htAutocompleteArrow';
|
29
|
+
if (isAriaEnabled) {
|
30
|
+
ARROW.setAttribute(...A11Y_HIDDEN());
|
31
|
+
}
|
32
|
+
ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
|
33
|
+
addClass(this.selectWrapper, 'htSelectEditor');
|
34
|
+
this.selectWrapper.appendChild(this.select);
|
35
|
+
this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
|
36
|
+
this.hot.rootElement.appendChild(this.selectWrapper);
|
26
37
|
this.registerHooks();
|
27
38
|
}
|
28
39
|
|
@@ -50,7 +61,7 @@ export class SelectEditor extends BaseEditor {
|
|
50
61
|
open() {
|
51
62
|
this._opened = true;
|
52
63
|
this.refreshDimensions();
|
53
|
-
this.
|
64
|
+
this.selectWrapper.style.display = '';
|
54
65
|
const shortcutManager = this.hot.getShortcutManager();
|
55
66
|
shortcutManager.setActiveContextName('editor');
|
56
67
|
this.registerShortcuts();
|
@@ -61,9 +72,9 @@ export class SelectEditor extends BaseEditor {
|
|
61
72
|
*/
|
62
73
|
close() {
|
63
74
|
this._opened = false;
|
64
|
-
this.
|
65
|
-
if (hasClass(this.
|
66
|
-
removeClass(this.
|
75
|
+
this.selectWrapper.style.display = 'none';
|
76
|
+
if (hasClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
|
77
|
+
removeClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
|
67
78
|
}
|
68
79
|
this.unregisterShortcuts();
|
69
80
|
this.clearHooks();
|
@@ -169,13 +180,13 @@ export class SelectEditor extends BaseEditor {
|
|
169
180
|
width,
|
170
181
|
height
|
171
182
|
} = this.getEditedCellRect();
|
172
|
-
const selectStyle = this.
|
183
|
+
const selectStyle = this.selectWrapper.style;
|
173
184
|
selectStyle.height = `${height}px`;
|
174
185
|
selectStyle.width = `${width}px`;
|
175
186
|
selectStyle.top = `${top}px`;
|
176
187
|
selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
|
177
188
|
selectStyle.margin = '0px';
|
178
|
-
addClass(this.
|
189
|
+
addClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
|
179
190
|
}
|
180
191
|
|
181
192
|
/**
|
@@ -196,6 +196,9 @@ class TextEditor extends _baseEditor.BaseEditor {
|
|
196
196
|
// Makes the element recognizable by Hot as its own
|
197
197
|
// component's element.
|
198
198
|
(0, _element.setAttribute)(this.TEXTAREA, [['data-hot-input', ''], (0, _a11y.A11Y_TABINDEX)(-1)]);
|
199
|
+
if (this.hot.getSettings().ariaTags) {
|
200
|
+
(0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_HIDDEN)()]);
|
201
|
+
}
|
199
202
|
(0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
|
200
203
|
this.textareaStyle = this.TEXTAREA.style;
|
201
204
|
this.textareaStyle.width = 0;
|
@@ -309,19 +312,12 @@ class TextEditor extends _baseEditor.BaseEditor {
|
|
309
312
|
this.TEXTAREA.style.fontSize = cellComputedStyle.fontSize;
|
310
313
|
this.TEXTAREA.style.fontFamily = cellComputedStyle.fontFamily;
|
311
314
|
this.TEXTAREA.style.backgroundColor = this.TD.style.backgroundColor;
|
312
|
-
const textareaComputedStyle = this.hot.rootWindow.getComputedStyle(this.TEXTAREA);
|
313
|
-
const horizontalPadding = parseInt(textareaComputedStyle.paddingLeft, 10) + parseInt(textareaComputedStyle.paddingRight, 10);
|
314
|
-
const verticalPadding = parseInt(textareaComputedStyle.paddingTop, 10) + parseInt(textareaComputedStyle.paddingBottom, 10);
|
315
|
-
const finalWidth = width - horizontalPadding;
|
316
|
-
const finalHeight = height - verticalPadding;
|
317
|
-
const finalMaxWidth = maxWidth - horizontalPadding;
|
318
|
-
const finalMaxHeight = maxHeight - verticalPadding;
|
319
315
|
this.autoResize.init(this.TEXTAREA, {
|
320
|
-
minWidth: Math.min(
|
321
|
-
minHeight: Math.min(
|
316
|
+
minWidth: Math.min(width, maxWidth),
|
317
|
+
minHeight: Math.min(height, maxHeight),
|
322
318
|
// TEXTAREA should never be wider than visible part of the viewport (should not cover the scrollbar)
|
323
|
-
maxWidth
|
324
|
-
maxHeight
|
319
|
+
maxWidth,
|
320
|
+
maxHeight
|
325
321
|
}, true);
|
326
322
|
}
|
327
323
|
|
@@ -10,7 +10,7 @@ import { rangeEach } from "../../helpers/number.mjs";
|
|
10
10
|
import { createInputElementResizer } from "../../utils/autoResize.mjs";
|
11
11
|
import { isDefined } from "../../helpers/mixed.mjs";
|
12
12
|
import { updateCaretPosition } from "./caretPositioner.mjs";
|
13
|
-
import { A11Y_TABINDEX } from "../../helpers/a11y.mjs";
|
13
|
+
import { A11Y_HIDDEN, A11Y_TABINDEX } from "../../helpers/a11y.mjs";
|
14
14
|
const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
|
15
15
|
const EDITOR_HIDDEN_CLASS_NAME = 'ht_editor_hidden';
|
16
16
|
const SHORTCUTS_GROUP = 'textEditor';
|
@@ -192,6 +192,9 @@ export class TextEditor extends BaseEditor {
|
|
192
192
|
// Makes the element recognizable by Hot as its own
|
193
193
|
// component's element.
|
194
194
|
setAttribute(this.TEXTAREA, [['data-hot-input', ''], A11Y_TABINDEX(-1)]);
|
195
|
+
if (this.hot.getSettings().ariaTags) {
|
196
|
+
setAttribute(this.TEXTAREA, [A11Y_HIDDEN()]);
|
197
|
+
}
|
195
198
|
addClass(this.TEXTAREA, 'handsontableInput');
|
196
199
|
this.textareaStyle = this.TEXTAREA.style;
|
197
200
|
this.textareaStyle.width = 0;
|
@@ -305,19 +308,12 @@ export class TextEditor extends BaseEditor {
|
|
305
308
|
this.TEXTAREA.style.fontSize = cellComputedStyle.fontSize;
|
306
309
|
this.TEXTAREA.style.fontFamily = cellComputedStyle.fontFamily;
|
307
310
|
this.TEXTAREA.style.backgroundColor = this.TD.style.backgroundColor;
|
308
|
-
const textareaComputedStyle = this.hot.rootWindow.getComputedStyle(this.TEXTAREA);
|
309
|
-
const horizontalPadding = parseInt(textareaComputedStyle.paddingLeft, 10) + parseInt(textareaComputedStyle.paddingRight, 10);
|
310
|
-
const verticalPadding = parseInt(textareaComputedStyle.paddingTop, 10) + parseInt(textareaComputedStyle.paddingBottom, 10);
|
311
|
-
const finalWidth = width - horizontalPadding;
|
312
|
-
const finalHeight = height - verticalPadding;
|
313
|
-
const finalMaxWidth = maxWidth - horizontalPadding;
|
314
|
-
const finalMaxHeight = maxHeight - verticalPadding;
|
315
311
|
this.autoResize.init(this.TEXTAREA, {
|
316
|
-
minWidth: Math.min(
|
317
|
-
minHeight: Math.min(
|
312
|
+
minWidth: Math.min(width, maxWidth),
|
313
|
+
minHeight: Math.min(height, maxHeight),
|
318
314
|
// TEXTAREA should never be wider than visible part of the viewport (should not cover the scrollbar)
|
319
|
-
maxWidth
|
320
|
-
maxHeight
|
315
|
+
maxWidth,
|
316
|
+
maxHeight
|
321
317
|
}, true);
|
322
318
|
}
|
323
319
|
|
package/helpers/mixed.js
CHANGED
@@ -134,7 +134,7 @@ const domMessages = {
|
|
134
134
|
function _injectProductInfo(key, element) {
|
135
135
|
const hasValidType = !isEmpty(key);
|
136
136
|
const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
|
137
|
-
const hotVersion = "0.0.0-next-
|
137
|
+
const hotVersion = "0.0.0-next-b0eaa90-20241016";
|
138
138
|
let keyValidityDate;
|
139
139
|
let consoleMessageState = 'invalid';
|
140
140
|
let domMessageState = 'invalid';
|
@@ -188,7 +188,7 @@ function _injectProductInfo(key, element) {
|
|
188
188
|
});
|
189
189
|
if (message) {
|
190
190
|
const messageNode = document.createElement('div');
|
191
|
-
messageNode.className = 'hot-display-license-info';
|
191
|
+
messageNode.className = 'handsontable hot-display-license-info';
|
192
192
|
messageNode.innerHTML = domMessages[domMessageState]({
|
193
193
|
keyValidityDate,
|
194
194
|
hotVersion
|
package/helpers/mixed.mjs
CHANGED
@@ -124,7 +124,7 @@ const domMessages = {
|
|
124
124
|
export function _injectProductInfo(key, element) {
|
125
125
|
const hasValidType = !isEmpty(key);
|
126
126
|
const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
|
127
|
-
const hotVersion = "0.0.0-next-
|
127
|
+
const hotVersion = "0.0.0-next-b0eaa90-20241016";
|
128
128
|
let keyValidityDate;
|
129
129
|
let consoleMessageState = 'invalid';
|
130
130
|
let domMessageState = 'invalid';
|
@@ -178,7 +178,7 @@ export function _injectProductInfo(key, element) {
|
|
178
178
|
});
|
179
179
|
if (message) {
|
180
180
|
const messageNode = document.createElement('div');
|
181
|
-
messageNode.className = 'hot-display-license-info';
|
181
|
+
messageNode.className = 'handsontable hot-display-license-info';
|
182
182
|
messageNode.innerHTML = domMessages[domMessageState]({
|
183
183
|
keyValidityDate,
|
184
184
|
hotVersion
|
@@ -0,0 +1,17 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
exports.getThemeClassName = getThemeClassName;
|
5
|
+
/**
|
6
|
+
* Get theme class name from rootElement class.
|
7
|
+
*
|
8
|
+
* @param {string} className Class names.
|
9
|
+
* @returns {string}
|
10
|
+
*/
|
11
|
+
function getThemeClassName(className) {
|
12
|
+
if (!className || typeof className !== 'string') {
|
13
|
+
return false;
|
14
|
+
}
|
15
|
+
const [match] = className.match(/ht-theme-[a-zA-Z0-9_-]+/) || [];
|
16
|
+
return match;
|
17
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/**
|
2
|
+
* Get theme class name from rootElement class.
|
3
|
+
*
|
4
|
+
* @param {string} className Class names.
|
5
|
+
* @returns {string}
|
6
|
+
*/
|
7
|
+
export function getThemeClassName(className) {
|
8
|
+
if (!className || typeof className !== 'string') {
|
9
|
+
return false;
|
10
|
+
}
|
11
|
+
const [match] = className.match(/ht-theme-[a-zA-Z0-9_-]+/) || [];
|
12
|
+
return match;
|
13
|
+
}
|
package/package.json
CHANGED
@@ -10,7 +10,7 @@
|
|
10
10
|
"url": "https://github.com/handsontable/handsontable/issues"
|
11
11
|
},
|
12
12
|
"author": "Handsoncode <hello@handsontable.com>",
|
13
|
-
"version": "0.0.0-next-
|
13
|
+
"version": "0.0.0-next-b0eaa90-20241016",
|
14
14
|
"main": "index",
|
15
15
|
"module": "index.mjs",
|
16
16
|
"jsnext:main": "index.mjs",
|
@@ -50,7 +50,6 @@
|
|
50
50
|
"@babel/register": "^7.8.3",
|
51
51
|
"@babel/runtime": "^7.11.2",
|
52
52
|
"@babel/types": "^7.12.12",
|
53
|
-
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
54
53
|
"babel-jest": "^26.6.3",
|
55
54
|
"babel-loader": "^8.0.4",
|
56
55
|
"babel-plugin-forbidden-imports": "^0.1.2",
|
@@ -94,8 +93,10 @@
|
|
94
93
|
"string-replace-loader": "^3.1.0",
|
95
94
|
"stylelint": "^16.3.1",
|
96
95
|
"typescript": "3.8.2",
|
96
|
+
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
97
97
|
"webpack": "^5.88.1",
|
98
|
-
"webpack-cli": "^5.1.4"
|
98
|
+
"webpack-cli": "^5.1.4",
|
99
|
+
"webpack-remove-empty-scripts": "^1.0.4"
|
99
100
|
},
|
100
101
|
"optionalDependencies": {
|
101
102
|
"hyperformula": "^2.6.2"
|
@@ -767,6 +768,12 @@
|
|
767
768
|
"./dist/languages/zh-CN.min.js": "./dist/languages/zh-CN.min.js",
|
768
769
|
"./dist/languages/zh-TW.js": "./dist/languages/zh-TW.js",
|
769
770
|
"./dist/languages/zh-TW.min.js": "./dist/languages/zh-TW.min.js",
|
771
|
+
"./styles/handsontable.css": "./styles/handsontable.css",
|
772
|
+
"./styles/handsontable.min.css": "./styles/handsontable.min.css",
|
773
|
+
"./styles/ht-theme-gemini.css": "./styles/ht-theme-gemini.css",
|
774
|
+
"./styles/ht-theme-gemini.min.css": "./styles/ht-theme-gemini.min.css",
|
775
|
+
"./styles/ht-theme-main.css": "./styles/ht-theme-main.css",
|
776
|
+
"./styles/ht-theme-main.min.css": "./styles/ht-theme-main.min.css",
|
770
777
|
".": {
|
771
778
|
"types": "./index.d.ts",
|
772
779
|
"import": "./index.mjs",
|
@@ -25,6 +25,7 @@ var _editor = /*#__PURE__*/new WeakMap();
|
|
25
25
|
var _editorStyle = /*#__PURE__*/new WeakMap();
|
26
26
|
var _hidden = /*#__PURE__*/new WeakMap();
|
27
27
|
var _resizeObserver = /*#__PURE__*/new WeakMap();
|
28
|
+
var _themeClassName = /*#__PURE__*/new WeakMap();
|
28
29
|
class CommentEditor {
|
29
30
|
static get CLASS_EDITOR_CONTAINER() {
|
30
31
|
return 'htCommentsContainer';
|
@@ -43,7 +44,7 @@ class CommentEditor {
|
|
43
44
|
* @type {Document}
|
44
45
|
*/
|
45
46
|
|
46
|
-
constructor(rootDocument, isRtl) {
|
47
|
+
constructor(rootDocument, isRtl, themeClassName) {
|
47
48
|
var _this = this;
|
48
49
|
_classPrivateFieldInitSpec(this, _rootDocument, void 0);
|
49
50
|
/**
|
@@ -70,8 +71,13 @@ class CommentEditor {
|
|
70
71
|
* @type {EditorResizeObserver}
|
71
72
|
*/
|
72
73
|
_classPrivateFieldInitSpec(this, _resizeObserver, new _editorResizeObserver.EditorResizeObserver());
|
74
|
+
/**
|
75
|
+
* @type {string}
|
76
|
+
*/
|
77
|
+
_classPrivateFieldInitSpec(this, _themeClassName, void 0);
|
73
78
|
_classPrivateFieldSet(_rootDocument, this, rootDocument);
|
74
79
|
_classPrivateFieldSet(_isRtl, this, isRtl);
|
80
|
+
_classPrivateFieldSet(_themeClassName, this, themeClassName);
|
75
81
|
_classPrivateFieldSet(_editor, this, this.createEditor());
|
76
82
|
_classPrivateFieldSet(_editorStyle, this, _classPrivateFieldGet(_editor, this).style);
|
77
83
|
_classPrivateFieldGet(_resizeObserver, this).setObservedElement(this.getInputElement());
|
@@ -223,6 +229,7 @@ class CommentEditor {
|
|
223
229
|
_classPrivateFieldSet(_container, this, _classPrivateFieldGet(_rootDocument, this).createElement('div'));
|
224
230
|
_classPrivateFieldGet(_container, this).setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
|
225
231
|
(0, _element.addClass)(_classPrivateFieldGet(_container, this), CommentEditor.CLASS_EDITOR_CONTAINER);
|
232
|
+
(0, _element.addClass)(_classPrivateFieldGet(_container, this), _classPrivateFieldGet(_themeClassName, this));
|
226
233
|
_classPrivateFieldGet(_rootDocument, this).body.appendChild(_classPrivateFieldGet(_container, this));
|
227
234
|
(0, _element.addClass)(editor, CommentEditor.CLASS_EDITOR);
|
228
235
|
(0, _element.addClass)(textarea, CommentEditor.CLASS_INPUT);
|
@@ -21,6 +21,7 @@ var _editor = /*#__PURE__*/new WeakMap();
|
|
21
21
|
var _editorStyle = /*#__PURE__*/new WeakMap();
|
22
22
|
var _hidden = /*#__PURE__*/new WeakMap();
|
23
23
|
var _resizeObserver = /*#__PURE__*/new WeakMap();
|
24
|
+
var _themeClassName = /*#__PURE__*/new WeakMap();
|
24
25
|
class CommentEditor {
|
25
26
|
static get CLASS_EDITOR_CONTAINER() {
|
26
27
|
return 'htCommentsContainer';
|
@@ -39,7 +40,7 @@ class CommentEditor {
|
|
39
40
|
* @type {Document}
|
40
41
|
*/
|
41
42
|
|
42
|
-
constructor(rootDocument, isRtl) {
|
43
|
+
constructor(rootDocument, isRtl, themeClassName) {
|
43
44
|
var _this = this;
|
44
45
|
_classPrivateFieldInitSpec(this, _rootDocument, void 0);
|
45
46
|
/**
|
@@ -66,8 +67,13 @@ class CommentEditor {
|
|
66
67
|
* @type {EditorResizeObserver}
|
67
68
|
*/
|
68
69
|
_classPrivateFieldInitSpec(this, _resizeObserver, new EditorResizeObserver());
|
70
|
+
/**
|
71
|
+
* @type {string}
|
72
|
+
*/
|
73
|
+
_classPrivateFieldInitSpec(this, _themeClassName, void 0);
|
69
74
|
_classPrivateFieldSet(_rootDocument, this, rootDocument);
|
70
75
|
_classPrivateFieldSet(_isRtl, this, isRtl);
|
76
|
+
_classPrivateFieldSet(_themeClassName, this, themeClassName);
|
71
77
|
_classPrivateFieldSet(_editor, this, this.createEditor());
|
72
78
|
_classPrivateFieldSet(_editorStyle, this, _classPrivateFieldGet(_editor, this).style);
|
73
79
|
_classPrivateFieldGet(_resizeObserver, this).setObservedElement(this.getInputElement());
|
@@ -219,6 +225,7 @@ class CommentEditor {
|
|
219
225
|
_classPrivateFieldSet(_container, this, _classPrivateFieldGet(_rootDocument, this).createElement('div'));
|
220
226
|
_classPrivateFieldGet(_container, this).setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
|
221
227
|
addClass(_classPrivateFieldGet(_container, this), CommentEditor.CLASS_EDITOR_CONTAINER);
|
228
|
+
addClass(_classPrivateFieldGet(_container, this), _classPrivateFieldGet(_themeClassName, this));
|
222
229
|
_classPrivateFieldGet(_rootDocument, this).body.appendChild(_classPrivateFieldGet(_container, this));
|
223
230
|
addClass(editor, CommentEditor.CLASS_EDITOR);
|
224
231
|
addClass(textarea, CommentEditor.CLASS_INPUT);
|
@@ -218,7 +218,7 @@ class Comments extends _base.BasePlugin {
|
|
218
218
|
return;
|
219
219
|
}
|
220
220
|
if (!_classPrivateFieldGet(_editor, this)) {
|
221
|
-
_classPrivateFieldSet(_editor, this, new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl()));
|
221
|
+
_classPrivateFieldSet(_editor, this, new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl(), this.hot.getSettings().themeName));
|
222
222
|
_classPrivateFieldGet(_editor, this).addLocalHook('resize', function () {
|
223
223
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
224
224
|
args[_key] = arguments[_key];
|
@@ -214,7 +214,7 @@ export class Comments extends BasePlugin {
|
|
214
214
|
return;
|
215
215
|
}
|
216
216
|
if (!_classPrivateFieldGet(_editor, this)) {
|
217
|
-
_classPrivateFieldSet(_editor, this, new CommentEditor(this.hot.rootDocument, this.hot.isRtl()));
|
217
|
+
_classPrivateFieldSet(_editor, this, new CommentEditor(this.hot.rootDocument, this.hot.isRtl(), this.hot.getSettings().themeName));
|
218
218
|
_classPrivateFieldGet(_editor, this).addLocalHook('resize', function () {
|
219
219
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
220
220
|
args[_key] = arguments[_key];
|
@@ -579,10 +579,8 @@ class Menu {
|
|
579
579
|
const currentRowHeight = itemCell ? (0, _element.outerHeight)(this.hotMenu.getCell(index, 0)) : 0;
|
580
580
|
return accumulator + (value.name === _predefinedItems.SEPARATOR ? 1 : currentRowHeight);
|
581
581
|
}, 0);
|
582
|
-
|
583
|
-
|
584
|
-
holderStyle.width = `${currentHiderWidth + 3}px`;
|
585
|
-
holderStyle.height = `${realHeight + 3}px`;
|
582
|
+
holderStyle.width = `${currentHiderWidth}px`;
|
583
|
+
holderStyle.height = `${realHeight}px`;
|
586
584
|
hiderStyle.height = holderStyle.height;
|
587
585
|
}
|
588
586
|
|
@@ -612,8 +610,10 @@ class Menu {
|
|
612
610
|
container = doc.querySelector(`.${this.options.className}.${className}`);
|
613
611
|
}
|
614
612
|
if (!container) {
|
613
|
+
const themeClassName = this.hot.getSettings().themeName;
|
615
614
|
container = doc.createElement('div');
|
616
615
|
(0, _element.addClass)(container, `htMenu ${this.options.className}`);
|
616
|
+
(0, _element.addClass)(container, themeClassName);
|
617
617
|
if (className) {
|
618
618
|
(0, _element.addClass)(container, className);
|
619
619
|
}
|
@@ -575,10 +575,8 @@ export class Menu {
|
|
575
575
|
const currentRowHeight = itemCell ? outerHeight(this.hotMenu.getCell(index, 0)) : 0;
|
576
576
|
return accumulator + (value.name === SEPARATOR ? 1 : currentRowHeight);
|
577
577
|
}, 0);
|
578
|
-
|
579
|
-
|
580
|
-
holderStyle.width = `${currentHiderWidth + 3}px`;
|
581
|
-
holderStyle.height = `${realHeight + 3}px`;
|
578
|
+
holderStyle.width = `${currentHiderWidth}px`;
|
579
|
+
holderStyle.height = `${realHeight}px`;
|
582
580
|
hiderStyle.height = holderStyle.height;
|
583
581
|
}
|
584
582
|
|
@@ -608,8 +606,10 @@ export class Menu {
|
|
608
606
|
container = doc.querySelector(`.${this.options.className}.${className}`);
|
609
607
|
}
|
610
608
|
if (!container) {
|
609
|
+
const themeClassName = this.hot.getSettings().themeName;
|
611
610
|
container = doc.createElement('div');
|
612
611
|
addClass(container, `htMenu ${this.options.className}`);
|
612
|
+
addClass(container, themeClassName);
|
613
613
|
if (className) {
|
614
614
|
addClass(container, className);
|
615
615
|
}
|
@@ -317,7 +317,7 @@ class ManualRowMove extends _base.BasePlugin {
|
|
317
317
|
for (let visualRowIndex = fromRow; visualRowIndex <= toRow; visualRowIndex++) {
|
318
318
|
const renderableIndex = rowMapper.getRenderableFromVisualIndex(visualRowIndex);
|
319
319
|
if (renderableIndex !== null) {
|
320
|
-
rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) ||
|
320
|
+
rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || this.hot.view.getDefaultRowHeight();
|
321
321
|
}
|
322
322
|
}
|
323
323
|
return rowsHeight;
|
@@ -313,7 +313,7 @@ export class ManualRowMove extends BasePlugin {
|
|
313
313
|
for (let visualRowIndex = fromRow; visualRowIndex <= toRow; visualRowIndex++) {
|
314
314
|
const renderableIndex = rowMapper.getRenderableFromVisualIndex(visualRowIndex);
|
315
315
|
if (renderableIndex !== null) {
|
316
|
-
rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) ||
|
316
|
+
rowsHeight += this.hot.view._wt.wtTable.getRowHeight(renderableIndex) || this.hot.view.getDefaultRowHeight();
|
317
317
|
}
|
318
318
|
}
|
319
319
|
return rowsHeight;
|
@@ -1491,7 +1491,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
|
|
1491
1491
|
* @returns {number}
|
1492
1492
|
*/
|
1493
1493
|
function _sumCellsHeights(row, rowspan) {
|
1494
|
-
const defaultHeight = this.hot.view.
|
1494
|
+
const defaultHeight = this.hot.view.getDefaultRowHeight();
|
1495
1495
|
const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
|
1496
1496
|
let height = 0;
|
1497
1497
|
for (let i = row; i < row + rowspan; i++) {
|
@@ -1486,7 +1486,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
|
|
1486
1486
|
* @returns {number}
|
1487
1487
|
*/
|
1488
1488
|
function _sumCellsHeights(row, rowspan) {
|
1489
|
-
const defaultHeight = this.hot.view.
|
1489
|
+
const defaultHeight = this.hot.view.getDefaultRowHeight();
|
1490
1490
|
const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
|
1491
1491
|
let height = 0;
|
1492
1492
|
for (let i = row; i < row + rowspan; i++) {
|