@visactor/vtable-editors 1.22.9-alpha.2 → 1.22.9-alpha.3
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/cjs/input-editor.d.ts +3 -1
- package/cjs/input-editor.js +19 -6
- package/cjs/input-editor.js.map +1 -1
- package/cjs/types.d.ts +10 -0
- package/cjs/types.js.map +1 -1
- package/dist/vtable-editors.js +35 -5
- package/dist/vtable-editors.min.js +1 -1
- package/es/input-editor.d.ts +3 -1
- package/es/input-editor.js +19 -6
- package/es/input-editor.js.map +1 -1
- package/es/types.d.ts +10 -0
- package/es/types.js.map +1 -1
- package/package.json +3 -3
package/cjs/input-editor.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CellAddress, EditContext, IEditor, RectProps } from './types';
|
|
1
|
+
import type { CellAddress, EditContext, IEditor, PrepareEditContext, RectProps } from './types';
|
|
2
2
|
import type { ValidateEnum } from './types';
|
|
3
3
|
export interface InputEditorConfig {
|
|
4
4
|
readonly?: boolean;
|
|
@@ -13,9 +13,11 @@ export declare class InputEditor implements IEditor {
|
|
|
13
13
|
col?: number;
|
|
14
14
|
row?: number;
|
|
15
15
|
constructor(editorConfig?: InputEditorConfig);
|
|
16
|
+
getInputElement(): HTMLInputElement;
|
|
16
17
|
createElement(): void;
|
|
17
18
|
setValue(value: string): void;
|
|
18
19
|
getValue(): string;
|
|
20
|
+
prepareEdit({ referencePosition, container, table, col, row }: PrepareEditContext<string>): void;
|
|
19
21
|
onStart({ value, referencePosition, container, endEdit, table, col, row }: EditContext<string>): void;
|
|
20
22
|
adjustPosition(rect: RectProps): void;
|
|
21
23
|
endEditing(): void;
|
package/cjs/input-editor.js
CHANGED
|
@@ -8,6 +8,9 @@ class InputEditor {
|
|
|
8
8
|
constructor(editorConfig) {
|
|
9
9
|
this.editorType = "Input", this.editorConfig = editorConfig;
|
|
10
10
|
}
|
|
11
|
+
getInputElement() {
|
|
12
|
+
return this.element;
|
|
13
|
+
}
|
|
11
14
|
createElement() {
|
|
12
15
|
var _a;
|
|
13
16
|
const input = document.createElement("input");
|
|
@@ -16,8 +19,11 @@ class InputEditor {
|
|
|
16
19
|
input.style.boxSizing = "border-box", input.style.backgroundColor = "#FFFFFF", input.style.borderRadius = "0px",
|
|
17
20
|
input.style.border = "2px solid #d9d9d9", input.addEventListener("focus", (() => {
|
|
18
21
|
input.style.borderColor = "#4A90E2", input.style.outline = "none";
|
|
19
|
-
})), input.addEventListener("blur", (
|
|
20
|
-
input.style.borderColor = "#d9d9d9"
|
|
22
|
+
})), input.addEventListener("blur", (e => {
|
|
23
|
+
if (input.style.borderColor = "#d9d9d9", this.table && "0" === this.element.style.opacity) {
|
|
24
|
+
const selectCell = this.table.stateManager.select.cellPos;
|
|
25
|
+
selectCell.col === this.col && selectCell.row === this.row || this.onEnd();
|
|
26
|
+
}
|
|
21
27
|
})), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
|
|
22
28
|
"a" === e.key && (e.ctrlKey || e.metaKey) && e.stopPropagation();
|
|
23
29
|
})), input.addEventListener("wheel", (e => {
|
|
@@ -30,10 +36,17 @@ class InputEditor {
|
|
|
30
36
|
getValue() {
|
|
31
37
|
return this.element.value;
|
|
32
38
|
}
|
|
39
|
+
prepareEdit({referencePosition: referencePosition, container: container, table: table, col: col, row: row}) {
|
|
40
|
+
this.container = container, this.table = table, this.col = col, this.row = row;
|
|
41
|
+
const selectCell = this.table.stateManager.select.cellPos;
|
|
42
|
+
selectCell.col === this.col && selectCell.row === this.row && (this.element || this.createElement(),
|
|
43
|
+
this.element.style.opacity = "0", this.element.style.pointerEvents = "none", (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
44
|
+
this.element.focus());
|
|
45
|
+
}
|
|
33
46
|
onStart({value: value, referencePosition: referencePosition, container: container, endEdit: endEdit, table: table, col: col, row: row}) {
|
|
34
47
|
this.container = container, this.successCallback = endEdit, this.table = table,
|
|
35
|
-
this.col = col, this.row = row, this.element || (this.createElement(), null
|
|
36
|
-
|
|
48
|
+
this.col = col, this.row = row, this.element || (this.createElement(), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect)),
|
|
49
|
+
null != value && this.setValue(value), this.element.style.opacity = "1", this.element.style.pointerEvents = "auto",
|
|
37
50
|
this.element.focus();
|
|
38
51
|
}
|
|
39
52
|
adjustPosition(rect) {
|
|
@@ -44,8 +57,8 @@ class InputEditor {
|
|
|
44
57
|
endEditing() {}
|
|
45
58
|
onEnd() {
|
|
46
59
|
var _a;
|
|
47
|
-
(null === (_a = this.container) || void 0 === _a ? void 0 : _a.contains(this.element)) && this.container.removeChild(this.element),
|
|
48
|
-
this.element = void 0;
|
|
60
|
+
(null === (_a = this.container) || void 0 === _a ? void 0 : _a.contains(this.element)) && (this.container.removeChild(this.element),
|
|
61
|
+
this.element = void 0);
|
|
49
62
|
}
|
|
50
63
|
isEditorElement(target) {
|
|
51
64
|
return target === this.element;
|
package/cjs/input-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":";;;AAOA,MAAa,WAAW;
|
|
1
|
+
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"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","file":"input-editor.js","sourcesContent":["import type { CellAddress, EditContext, IEditor, PrepareEditContext, RectProps } from './types';\nimport type { ValidateEnum } from './types';\n\nexport interface InputEditorConfig {\n readonly?: boolean;\n}\n\nexport class InputEditor implements IEditor {\n editorType: string = 'Input';\n editorConfig: InputEditorConfig;\n container: HTMLElement;\n successCallback?: () => void;\n element?: HTMLInputElement;\n table?: any;\n col?: number;\n row?: number;\n constructor(editorConfig?: InputEditorConfig) {\n this.editorConfig = editorConfig;\n }\n getInputElement(): HTMLInputElement {\n return this.element;\n }\n\n createElement() {\n const input = document.createElement('input');\n input.setAttribute('type', 'text');\n\n if (this.editorConfig?.readonly) {\n input.setAttribute('readonly', `${this.editorConfig.readonly}`);\n }\n\n input.style.position = 'absolute';\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.backgroundColor = '#FFFFFF';\n input.style.borderRadius = '0px';\n input.style.border = '2px solid #d9d9d9';\n // #region 为了保证input在focus时，没有圆角\n input.addEventListener('focus', () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n });\n\n input.addEventListener('blur', e => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n if (this.table && this.element.style.opacity === '0') {\n const selectCell = this.table.stateManager.select.cellPos;\n if (selectCell.col !== this.col || selectCell.row !== this.row) {\n this.onEnd();\n }\n }\n });\n // #endregion\n this.element = input;\n this.container.appendChild(input);\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n\n // hack for preventing drag touch cause page jump\n input.addEventListener('wheel', e => {\n e.preventDefault();\n });\n }\n\n setValue(value: string) {\n this.element.value = typeof value !== 'undefined' ? value : '';\n }\n\n getValue() {\n return this.element.value;\n }\n /**\n * 如果表格编辑时机配置editCellTrigger为keydown，则需要调用prepareEdit来准备编辑环境，否则中文输入法第一个字符会被当做英文字符\n * @param param0\n */\n prepareEdit({ referencePosition, container, table, col, row }: PrepareEditContext<string>) {\n this.container = container;\n this.table = table;\n this.col = col;\n this.row = row;\n const selectCell = this.table.stateManager.select.cellPos;\n if (selectCell.col !== this.col || selectCell.row !== this.row) {\n return;\n }\n if (!this.element) {\n this.createElement();\n }\n this.element.style.opacity = '0';\n //这个pointerEvents = 'none'很重要，如果没有的话会引起vtable.getElement()元素和这里的element元素的focus和blur的切换，\n //也会引起mouseleave_table mouseleave_cell和mouseenter的切换\n this.element.style.pointerEvents = 'none';\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n this.element.focus();\n }\n onStart({ value, referencePosition, container, endEdit, table, col, row }: EditContext<string>) {\n this.container = container;\n this.successCallback = endEdit;\n this.table = table;\n this.col = col;\n this.row = row;\n if (!this.element) {\n this.createElement();\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n }\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n //防止调用过prepareEdit 后，元素的显示和可操作性被影响\n this.element.style.opacity = '1';\n this.element.style.pointerEvents = 'auto';\n this.element.focus();\n // do nothing\n }\n\n adjustPosition(rect: RectProps) {\n //使border均分input位置rect的上下左右\n const borderWidth = 2;\n const top = rect.top - borderWidth / 2;\n const left = rect.left - borderWidth / 2;\n const width = rect.width + borderWidth;\n const height = rect.height + borderWidth;\n\n this.element.style.top = top + 'px';\n this.element.style.left = left + 'px';\n this.element.style.width = width + 'px';\n this.element.style.height = height + 'px';\n }\n\n endEditing() {\n // do nothing\n }\n\n onEnd() {\n // do nothing\n if (this.container?.contains(this.element)) {\n this.container.removeChild(this.element);\n this.element = undefined;\n }\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n\n validateValue(newValue?: any, oldValue?: any, position?: CellAddress, table?: any): boolean | ValidateEnum {\n return true;\n }\n}\n"]}
|
package/cjs/types.d.ts
CHANGED
|
@@ -3,13 +3,16 @@ export interface IEditor<V = any, T = any> {
|
|
|
3
3
|
beforeEnd?: () => void;
|
|
4
4
|
onEnd: () => void;
|
|
5
5
|
getInputElement?: () => HTMLElement;
|
|
6
|
+
setElement?: (element: HTMLInputElement) => void;
|
|
6
7
|
isEditorElement?: (target: HTMLElement) => boolean;
|
|
7
8
|
validateValue?: (newValue?: any, oldValue?: any, position?: CellAddress, table?: any, isClickOnTable?: boolean) => boolean | ValidateEnum | Promise<boolean | ValidateEnum>;
|
|
8
9
|
getValue: () => V;
|
|
10
|
+
prepareEdit?: (context: PrepareEditContext<V, T>) => void;
|
|
9
11
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
10
12
|
exit?: () => void;
|
|
11
13
|
targetIsOnEditor?: (target: HTMLElement) => boolean;
|
|
12
14
|
bindSuccessCallback?: (callback: () => void) => void;
|
|
15
|
+
adjustPosition?: (rect: RectProps) => void;
|
|
13
16
|
}
|
|
14
17
|
export interface EditContext<V = any, T = any> {
|
|
15
18
|
container: HTMLElement;
|
|
@@ -20,6 +23,13 @@ export interface EditContext<V = any, T = any> {
|
|
|
20
23
|
col: number;
|
|
21
24
|
row: number;
|
|
22
25
|
}
|
|
26
|
+
export interface PrepareEditContext<V = any, T = any> {
|
|
27
|
+
container: HTMLElement;
|
|
28
|
+
table: T;
|
|
29
|
+
col: number;
|
|
30
|
+
row: number;
|
|
31
|
+
referencePosition: ReferencePosition;
|
|
32
|
+
}
|
|
23
33
|
export interface RectProps {
|
|
24
34
|
left: number;
|
|
25
35
|
top: number;
|
package/cjs/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":";;;AAuHA,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,8BAAiB,CAAA;IACjB,0BAAa,CAAA;IACb,4BAAe,CAAA;AACjB,CAAC,EALW,SAAS,GAAT,iBAAS,KAAT,iBAAS,QAKpB;AAOD,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,8CAA8B,CAAA;IAC9B,kDAAkC,CAAA;IAClC,qDAAqC,CAAA;IACrC,yDAAyC,CAAA;AAC3C,CAAC,EALW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAKvB","file":"types.js","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface IEditor<V = any, T = any> {\n /**\n * Called when cell enters edit mode.\n *\n * Warning will be thrown if you don't provide this function\n * after removal of `beginEditing`.\n */\n onStart: (context: EditContext<V, T>) => void;\n\n beforeEnd?: () => void;\n /**\n * called when cell exits edit mode.\n *\n * Warning will be thrown if you don't provide this function\n * after removal of `exit`.\n */\n onEnd: () => void;\n getInputElement?: () => HTMLElement;\n setElement?: (element: HTMLInputElement) => void;\n /**\n * Called when user click somewhere while editor is in edit mode.\n *\n * If returns falsy, VTable will exit edit mode.\n *\n * If returns truthy or not defined, nothing will happen.\n * Which means, in this scenario, you need to call `endEdit` manually\n * to end edit mode.\n */\n isEditorElement?: (target: HTMLElement) => boolean;\n /**\n * Before set new value to table, use it to validate value.\n * If the interface returns true, the value takes effect; otherwise, it does not take effect.\n * @param newValue new value to be set. If not provided, the current input element value will be used.\n * @param oldValue old value of the cell.\n */\n // validateValue?: (newValue?: V, oldValue?: V) => boolean | Promise<boolean>;\n validateValue?: (\n newValue?: any,\n oldValue?: any,\n position?: CellAddress,\n table?: any,\n isClickOnTable?: boolean\n ) => boolean | ValidateEnum | Promise<boolean | ValidateEnum>;\n /**\n * Called when editor mode is exited by any means.\n * Expected to return the current value of the cell.\n */\n getValue: () => V;\n /**\n * If the table editing trigger is configured as keydown, you need to call prepareEdit to prepare the editing environment, otherwise the first character of the Chinese input method will be treated as an English character.\n * @param param0\n */\n prepareEdit?: (context: PrepareEditContext<V, T>) => void;\n /**\n * Called when cell enter edit mode.\n * @deprecated use `onStart` instead.\n */\n beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;\n /**\n * @see onEnd\n * @deprecated use `onEnd` instead.\n */\n exit?: () => void;\n /**\n * @see isEditorElement\n * @deprecated use `isEditorElement` instead.\n */\n targetIsOnEditor?: (target: HTMLElement) => boolean;\n /**\n * Called when cell enters edit mode with a callback function\n * that can be used to end edit mode.\n * @see EditContext#endEdit\n * @deprecated callback is provided as `endEdit` in `EditContext`, use `onStart` instead.\n */\n bindSuccessCallback?: (callback: () => void) => void;\n adjustPosition?: (rect: RectProps) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface EditContext<V = any, T = any> {\n /** Container element of the VTable instance. */\n container: HTMLElement;\n /** Position info of the cell that is being edited. */\n referencePosition: ReferencePosition;\n /** Cell value before editing. */\n value: V;\n /**\n * Callback function that can be used to end edit mode.\n *\n * In most cases you don't need to call this function,\n * since Enter key click is handled by VTable automatically,\n * and mouse click can be handled by `isEditorElement`.\n *\n * However, if your editor has its own complete button,\n * or you have external elements like Tooltip,\n * you may want to use this callback to help you\n * end edit mode.\n */\n endEdit: () => void;\n table: T;\n col: number;\n row: number;\n}\n\nexport interface PrepareEditContext<V = any, T = any> {\n container: HTMLElement;\n table: T;\n col: number;\n row: number;\n referencePosition: ReferencePosition;\n}\nexport interface RectProps {\n left: number;\n top: number;\n width: number;\n height: number;\n}\n\nexport enum Placement {\n top = 'top',\n bottom = 'bottom',\n left = 'left',\n right = 'right'\n}\n\nexport interface ReferencePosition {\n rect: RectProps;\n placement?: Placement;\n}\n\nexport enum ValidateEnum {\n validateExit = 'validate-exit',\n invalidateExit = 'invalidate-exit',\n validateNotExit = 'validate-not-exit',\n invalidateNotExit = 'invalidate-not-exit'\n}\n\nexport type CellAddress = {\n col: number;\n row: number;\n};\n"]}
|
package/dist/vtable-editors.js
CHANGED
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
constructor(editorConfig) {
|
|
17
17
|
this.editorConfig = editorConfig;
|
|
18
18
|
}
|
|
19
|
+
getInputElement() {
|
|
20
|
+
return this.element;
|
|
21
|
+
}
|
|
19
22
|
createElement() {
|
|
20
23
|
const input = document.createElement('input');
|
|
21
24
|
input.setAttribute('type', 'text');
|
|
@@ -33,8 +36,14 @@
|
|
|
33
36
|
input.style.borderColor = '#4A90E2';
|
|
34
37
|
input.style.outline = 'none';
|
|
35
38
|
});
|
|
36
|
-
input.addEventListener('blur',
|
|
39
|
+
input.addEventListener('blur', e => {
|
|
37
40
|
input.style.borderColor = '#d9d9d9';
|
|
41
|
+
if (this.table && this.element.style.opacity === '0') {
|
|
42
|
+
const selectCell = this.table.stateManager.select.cellPos;
|
|
43
|
+
if (selectCell.col !== this.col || selectCell.row !== this.row) {
|
|
44
|
+
this.onEnd();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
38
47
|
});
|
|
39
48
|
this.element = input;
|
|
40
49
|
this.container.appendChild(input);
|
|
@@ -53,6 +62,25 @@
|
|
|
53
62
|
getValue() {
|
|
54
63
|
return this.element.value;
|
|
55
64
|
}
|
|
65
|
+
prepareEdit({ referencePosition, container, table, col, row }) {
|
|
66
|
+
this.container = container;
|
|
67
|
+
this.table = table;
|
|
68
|
+
this.col = col;
|
|
69
|
+
this.row = row;
|
|
70
|
+
const selectCell = this.table.stateManager.select.cellPos;
|
|
71
|
+
if (selectCell.col !== this.col || selectCell.row !== this.row) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (!this.element) {
|
|
75
|
+
this.createElement();
|
|
76
|
+
}
|
|
77
|
+
this.element.style.opacity = '0';
|
|
78
|
+
this.element.style.pointerEvents = 'none';
|
|
79
|
+
if (referencePosition?.rect) {
|
|
80
|
+
this.adjustPosition(referencePosition.rect);
|
|
81
|
+
}
|
|
82
|
+
this.element.focus();
|
|
83
|
+
}
|
|
56
84
|
onStart({ value, referencePosition, container, endEdit, table, col, row }) {
|
|
57
85
|
this.container = container;
|
|
58
86
|
this.successCallback = endEdit;
|
|
@@ -61,13 +89,15 @@
|
|
|
61
89
|
this.row = row;
|
|
62
90
|
if (!this.element) {
|
|
63
91
|
this.createElement();
|
|
64
|
-
if (value !== undefined && value !== null) {
|
|
65
|
-
this.setValue(value);
|
|
66
|
-
}
|
|
67
92
|
if (referencePosition?.rect) {
|
|
68
93
|
this.adjustPosition(referencePosition.rect);
|
|
69
94
|
}
|
|
70
95
|
}
|
|
96
|
+
if (value !== undefined && value !== null) {
|
|
97
|
+
this.setValue(value);
|
|
98
|
+
}
|
|
99
|
+
this.element.style.opacity = '1';
|
|
100
|
+
this.element.style.pointerEvents = 'auto';
|
|
71
101
|
this.element.focus();
|
|
72
102
|
}
|
|
73
103
|
adjustPosition(rect) {
|
|
@@ -86,8 +116,8 @@
|
|
|
86
116
|
onEnd() {
|
|
87
117
|
if (this.container?.contains(this.element)) {
|
|
88
118
|
this.container.removeChild(this.element);
|
|
119
|
+
this.element = undefined;
|
|
89
120
|
}
|
|
90
|
-
this.element = undefined;
|
|
91
121
|
}
|
|
92
122
|
isEditorElement(target) {
|
|
93
123
|
return target === this.element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).VTable=e.VTable||{},e.VTable.editors={}))}(this,(function(e){"use strict";class t{editorType="Input";editorConfig;container;successCallback;element;table;col;row;constructor(e){this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","text"),this.editorConfig?.readonly&&e.setAttribute("readonly",`${this.editorConfig.readonly}`),e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).VTable=e.VTable||{},e.VTable.editors={}))}(this,(function(e){"use strict";class t{editorType="Input";editorConfig;container;successCallback;element;table;col;row;constructor(e){this.editorConfig=e}getInputElement(){return this.element}createElement(){const e=document.createElement("input");e.setAttribute("type","text"),this.editorConfig?.readonly&&e.setAttribute("readonly",`${this.editorConfig.readonly}`),e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(t=>{if(e.style.borderColor="#d9d9d9",this.table&&"0"===this.element.style.opacity){const e=this.table.stateManager.select.cellPos;e.col===this.col&&e.row===this.row||this.onEnd()}})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&e.stopPropagation()})),e.addEventListener("wheel",(e=>{e.preventDefault()}))}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}prepareEdit({referencePosition:e,container:t,table:i,col:n,row:s}){this.container=t,this.table=i,this.col=n,this.row=s;const o=this.table.stateManager.select.cellPos;o.col===this.col&&o.row===this.row&&(this.element||this.createElement(),this.element.style.opacity="0",this.element.style.pointerEvents="none",e?.rect&&this.adjustPosition(e.rect),this.element.focus())}onStart({value:e,referencePosition:t,container:i,endEdit:n,table:s,col:o,row:l}){this.container=i,this.successCallback=n,this.table=s,this.col=o,this.row=l,this.element||(this.createElement(),t?.rect&&this.adjustPosition(t.rect)),null!=e&&this.setValue(e),this.element.style.opacity="1",this.element.style.pointerEvents="auto",this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,s=e.height+2;this.element.style.top=t+"px",this.element.style.left=i+"px",this.element.style.width=n+"px",this.element.style.height=s+"px"}endEditing(){}onEnd(){this.container?.contains(this.element)&&(this.container.removeChild(this.element),this.element=void 0)}isEditorElement(e){return e===this.element}validateValue(e,t,i,n){return!0}}var i,n;e.Placement=void 0,(i=e.Placement||(e.Placement={})).top="top",i.bottom="bottom",i.left="left",i.right="right",e.ValidateEnum=void 0,(n=e.ValidateEnum||(e.ValidateEnum={})).validateExit="validate-exit",n.invalidateExit="invalidate-exit",n.validateNotExit="validate-not-exit",n.invalidateNotExit="invalidate-not-exit",e.DateInputEditor=class extends t{editorType="DateInput";constructor(e){super(e),this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","date"),e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",e.style.position="absolute",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(()=>{e.style.borderColor="#d9d9d9"})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&e.stopPropagation()})),e.addEventListener("wheel",(e=>{e.preventDefault()}))}},e.InputEditor=t,e.ListEditor=class{editorType="Input";input;editorConfig;container;element;successCallback;constructor(e){this.editorConfig=e}createElement(e){const t=document.createElement("select");t.setAttribute("type","text"),t.style.position="absolute",t.style.padding="4px",t.style.width="100%",t.style.boxSizing="border-box",t.style.backgroundColor="#FFFFFF",t.style.borderRadius="0px",t.style.border="2px solid #d9d9d9",t.addEventListener("focus",(()=>{t.style.borderColor="#4A90E2",t.style.outline="none"})),t.addEventListener("blur",(()=>{t.style.borderColor="#d9d9d9"})),this.element=t;const{values:i}=this.editorConfig;let n="";i.forEach((t=>{n+=t===e?`<option value="${t}" selected>${t}</option>`:`<option value="${t}" >${t}</option>`})),t.innerHTML=n,this.container.appendChild(t)}_bindSelectChangeEvent(){this.element.addEventListener("change",(()=>{}))}setValue(e){}getValue(){return this.element.value}onStart({container:e,value:t,referencePosition:i,endEdit:n}){this.container=e,this.successCallback=n,this.createElement(t),null!=t&&this.setValue(t),i?.rect&&this.adjustPosition(i.rect),this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,s=e.height+2;this.element.style.top=t+"px",this.element.style.left=i+"px",this.element.style.width=n+"px",this.element.style.height=s+"px"}endEditing(){}onEnd(){this.container.removeChild(this.element)}isEditorElement(e){return e===this.element}},e.TextAreaEditor=class{editorType="TextArea";editorConfig;container;successCallback;element;constructor(e){this.editorConfig=e||{}}createElement(){const e=document.createElement("textArea");this.editorConfig?.readonly&&e.setAttribute("readonly",`${this.editorConfig.readonly}`),e.style.resize="none",e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.height="100%",e.style.boxSizing="border-box",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(()=>{e.style.borderColor="#d9d9d9",e.style.outline="none"})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{const t="a"===e.key&&(e.ctrlKey||e.metaKey),i="Enter"===e.key&&e.shiftKey;(t||i)&&e.stopPropagation()}))}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}onStart({value:e,referencePosition:t,container:i,endEdit:n}){this.container=i,this.successCallback=n,this.element||(this.createElement(),null!=e&&this.setValue(e),t?.rect&&this.adjustPosition(t.rect)),this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,s=e.height+2;this.element.style.top=t+"px",this.element.style.left=i+"px",this.element.style.width=n+"px",this.element.style.height=s+"px"}endEditing(){}onEnd(){this.container.removeChild(this.element),this.element=void 0}isEditorElement(e){return e===this.element}}}));
|
package/es/input-editor.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CellAddress, EditContext, IEditor, RectProps } from './types';
|
|
1
|
+
import type { CellAddress, EditContext, IEditor, PrepareEditContext, RectProps } from './types';
|
|
2
2
|
import type { ValidateEnum } from './types';
|
|
3
3
|
export interface InputEditorConfig {
|
|
4
4
|
readonly?: boolean;
|
|
@@ -13,9 +13,11 @@ export declare class InputEditor implements IEditor {
|
|
|
13
13
|
col?: number;
|
|
14
14
|
row?: number;
|
|
15
15
|
constructor(editorConfig?: InputEditorConfig);
|
|
16
|
+
getInputElement(): HTMLInputElement;
|
|
16
17
|
createElement(): void;
|
|
17
18
|
setValue(value: string): void;
|
|
18
19
|
getValue(): string;
|
|
20
|
+
prepareEdit({ referencePosition, container, table, col, row }: PrepareEditContext<string>): void;
|
|
19
21
|
onStart({ value, referencePosition, container, endEdit, table, col, row }: EditContext<string>): void;
|
|
20
22
|
adjustPosition(rect: RectProps): void;
|
|
21
23
|
endEditing(): void;
|
package/es/input-editor.js
CHANGED
|
@@ -2,6 +2,9 @@ export class InputEditor {
|
|
|
2
2
|
constructor(editorConfig) {
|
|
3
3
|
this.editorType = "Input", this.editorConfig = editorConfig;
|
|
4
4
|
}
|
|
5
|
+
getInputElement() {
|
|
6
|
+
return this.element;
|
|
7
|
+
}
|
|
5
8
|
createElement() {
|
|
6
9
|
var _a;
|
|
7
10
|
const input = document.createElement("input");
|
|
@@ -10,8 +13,11 @@ export class InputEditor {
|
|
|
10
13
|
input.style.boxSizing = "border-box", input.style.backgroundColor = "#FFFFFF", input.style.borderRadius = "0px",
|
|
11
14
|
input.style.border = "2px solid #d9d9d9", input.addEventListener("focus", (() => {
|
|
12
15
|
input.style.borderColor = "#4A90E2", input.style.outline = "none";
|
|
13
|
-
})), input.addEventListener("blur", (
|
|
14
|
-
input.style.borderColor = "#d9d9d9"
|
|
16
|
+
})), input.addEventListener("blur", (e => {
|
|
17
|
+
if (input.style.borderColor = "#d9d9d9", this.table && "0" === this.element.style.opacity) {
|
|
18
|
+
const selectCell = this.table.stateManager.select.cellPos;
|
|
19
|
+
selectCell.col === this.col && selectCell.row === this.row || this.onEnd();
|
|
20
|
+
}
|
|
15
21
|
})), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
|
|
16
22
|
"a" === e.key && (e.ctrlKey || e.metaKey) && e.stopPropagation();
|
|
17
23
|
})), input.addEventListener("wheel", (e => {
|
|
@@ -24,10 +30,17 @@ export class InputEditor {
|
|
|
24
30
|
getValue() {
|
|
25
31
|
return this.element.value;
|
|
26
32
|
}
|
|
33
|
+
prepareEdit({referencePosition: referencePosition, container: container, table: table, col: col, row: row}) {
|
|
34
|
+
this.container = container, this.table = table, this.col = col, this.row = row;
|
|
35
|
+
const selectCell = this.table.stateManager.select.cellPos;
|
|
36
|
+
selectCell.col === this.col && selectCell.row === this.row && (this.element || this.createElement(),
|
|
37
|
+
this.element.style.opacity = "0", this.element.style.pointerEvents = "none", (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
38
|
+
this.element.focus());
|
|
39
|
+
}
|
|
27
40
|
onStart({value: value, referencePosition: referencePosition, container: container, endEdit: endEdit, table: table, col: col, row: row}) {
|
|
28
41
|
this.container = container, this.successCallback = endEdit, this.table = table,
|
|
29
|
-
this.col = col, this.row = row, this.element || (this.createElement(), null
|
|
30
|
-
|
|
42
|
+
this.col = col, this.row = row, this.element || (this.createElement(), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect)),
|
|
43
|
+
null != value && this.setValue(value), this.element.style.opacity = "1", this.element.style.pointerEvents = "auto",
|
|
31
44
|
this.element.focus();
|
|
32
45
|
}
|
|
33
46
|
adjustPosition(rect) {
|
|
@@ -38,8 +51,8 @@ export class InputEditor {
|
|
|
38
51
|
endEditing() {}
|
|
39
52
|
onEnd() {
|
|
40
53
|
var _a;
|
|
41
|
-
(null === (_a = this.container) || void 0 === _a ? void 0 : _a.contains(this.element)) && this.container.removeChild(this.element),
|
|
42
|
-
this.element = void 0;
|
|
54
|
+
(null === (_a = this.container) || void 0 === _a ? void 0 : _a.contains(this.element)) && (this.container.removeChild(this.element),
|
|
55
|
+
this.element = void 0);
|
|
43
56
|
}
|
|
44
57
|
isEditorElement(target) {
|
|
45
58
|
return target === this.element;
|
package/es/input-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"AAOA,MAAM,OAAO,WAAW;
|
|
1
|
+
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"AAOA,MAAM,OAAO,WAAW;IAStB,YAAY,YAAgC;QAR5C,eAAU,GAAW,OAAO,CAAC;QAS3B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,eAAe;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,aAAa;;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE;YAC/B,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;SACjE;QAED,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QACxC,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;QACjC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC;QAEzC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;YACpC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE;YACjC,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;YAEpC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,GAAG,EAAE;gBACpD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC;gBAC1D,IAAI,UAAU,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE;oBAC9D,IAAI,CAAC,KAAK,EAAE,CAAC;iBACd;aACF;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAGlC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;gBAE7C,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAGH,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACjE,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IAKD,WAAW,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAA8B;QACvF,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC;QAC1D,IAAI,UAAU,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE;YAC9D,OAAO;SACR;QACD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QACD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAGjC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAC1C,IAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC7C;QACD,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IACD,OAAO,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAuB;QAC5F,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE;gBAC3B,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;aAC7C;SACF;QACD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAC1C,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAEvB,CAAC;IAED,cAAc,CAAC,IAAe;QAE5B,MAAM,WAAW,GAAG,CAAC,CAAC;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,WAAW,GAAG,CAAC,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,CAAC,CAAC;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QACvC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC;QAEzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QACtC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC;QACxC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5C,CAAC;IAED,UAAU;IAEV,CAAC;IAED,KAAK;;QAEH,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAC1C,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACzC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;SAC1B;IACH,CAAC;IAED,eAAe,CAAC,MAAmB;QACjC,OAAO,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;IAED,aAAa,CAAC,QAAc,EAAE,QAAc,EAAE,QAAsB,EAAE,KAAW;QAC/E,OAAO,IAAI,CAAC;IACd,CAAC;CACF","file":"input-editor.js","sourcesContent":["import type { CellAddress, EditContext, IEditor, PrepareEditContext, RectProps } from './types';\nimport type { ValidateEnum } from './types';\n\nexport interface InputEditorConfig {\n readonly?: boolean;\n}\n\nexport class InputEditor implements IEditor {\n editorType: string = 'Input';\n editorConfig: InputEditorConfig;\n container: HTMLElement;\n successCallback?: () => void;\n element?: HTMLInputElement;\n table?: any;\n col?: number;\n row?: number;\n constructor(editorConfig?: InputEditorConfig) {\n this.editorConfig = editorConfig;\n }\n getInputElement(): HTMLInputElement {\n return this.element;\n }\n\n createElement() {\n const input = document.createElement('input');\n input.setAttribute('type', 'text');\n\n if (this.editorConfig?.readonly) {\n input.setAttribute('readonly', `${this.editorConfig.readonly}`);\n }\n\n input.style.position = 'absolute';\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.backgroundColor = '#FFFFFF';\n input.style.borderRadius = '0px';\n input.style.border = '2px solid #d9d9d9';\n // #region 为了保证input在focus时，没有圆角\n input.addEventListener('focus', () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n });\n\n input.addEventListener('blur', e => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n if (this.table && this.element.style.opacity === '0') {\n const selectCell = this.table.stateManager.select.cellPos;\n if (selectCell.col !== this.col || selectCell.row !== this.row) {\n this.onEnd();\n }\n }\n });\n // #endregion\n this.element = input;\n this.container.appendChild(input);\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n\n // hack for preventing drag touch cause page jump\n input.addEventListener('wheel', e => {\n e.preventDefault();\n });\n }\n\n setValue(value: string) {\n this.element.value = typeof value !== 'undefined' ? value : '';\n }\n\n getValue() {\n return this.element.value;\n }\n /**\n * 如果表格编辑时机配置editCellTrigger为keydown，则需要调用prepareEdit来准备编辑环境，否则中文输入法第一个字符会被当做英文字符\n * @param param0\n */\n prepareEdit({ referencePosition, container, table, col, row }: PrepareEditContext<string>) {\n this.container = container;\n this.table = table;\n this.col = col;\n this.row = row;\n const selectCell = this.table.stateManager.select.cellPos;\n if (selectCell.col !== this.col || selectCell.row !== this.row) {\n return;\n }\n if (!this.element) {\n this.createElement();\n }\n this.element.style.opacity = '0';\n //这个pointerEvents = 'none'很重要，如果没有的话会引起vtable.getElement()元素和这里的element元素的focus和blur的切换，\n //也会引起mouseleave_table mouseleave_cell和mouseenter的切换\n this.element.style.pointerEvents = 'none';\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n this.element.focus();\n }\n onStart({ value, referencePosition, container, endEdit, table, col, row }: EditContext<string>) {\n this.container = container;\n this.successCallback = endEdit;\n this.table = table;\n this.col = col;\n this.row = row;\n if (!this.element) {\n this.createElement();\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n }\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n //防止调用过prepareEdit 后，元素的显示和可操作性被影响\n this.element.style.opacity = '1';\n this.element.style.pointerEvents = 'auto';\n this.element.focus();\n // do nothing\n }\n\n adjustPosition(rect: RectProps) {\n //使border均分input位置rect的上下左右\n const borderWidth = 2;\n const top = rect.top - borderWidth / 2;\n const left = rect.left - borderWidth / 2;\n const width = rect.width + borderWidth;\n const height = rect.height + borderWidth;\n\n this.element.style.top = top + 'px';\n this.element.style.left = left + 'px';\n this.element.style.width = width + 'px';\n this.element.style.height = height + 'px';\n }\n\n endEditing() {\n // do nothing\n }\n\n onEnd() {\n // do nothing\n if (this.container?.contains(this.element)) {\n this.container.removeChild(this.element);\n this.element = undefined;\n }\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n\n validateValue(newValue?: any, oldValue?: any, position?: CellAddress, table?: any): boolean | ValidateEnum {\n return true;\n }\n}\n"]}
|
package/es/types.d.ts
CHANGED
|
@@ -3,13 +3,16 @@ export interface IEditor<V = any, T = any> {
|
|
|
3
3
|
beforeEnd?: () => void;
|
|
4
4
|
onEnd: () => void;
|
|
5
5
|
getInputElement?: () => HTMLElement;
|
|
6
|
+
setElement?: (element: HTMLInputElement) => void;
|
|
6
7
|
isEditorElement?: (target: HTMLElement) => boolean;
|
|
7
8
|
validateValue?: (newValue?: any, oldValue?: any, position?: CellAddress, table?: any, isClickOnTable?: boolean) => boolean | ValidateEnum | Promise<boolean | ValidateEnum>;
|
|
8
9
|
getValue: () => V;
|
|
10
|
+
prepareEdit?: (context: PrepareEditContext<V, T>) => void;
|
|
9
11
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
10
12
|
exit?: () => void;
|
|
11
13
|
targetIsOnEditor?: (target: HTMLElement) => boolean;
|
|
12
14
|
bindSuccessCallback?: (callback: () => void) => void;
|
|
15
|
+
adjustPosition?: (rect: RectProps) => void;
|
|
13
16
|
}
|
|
14
17
|
export interface EditContext<V = any, T = any> {
|
|
15
18
|
container: HTMLElement;
|
|
@@ -20,6 +23,13 @@ export interface EditContext<V = any, T = any> {
|
|
|
20
23
|
col: number;
|
|
21
24
|
row: number;
|
|
22
25
|
}
|
|
26
|
+
export interface PrepareEditContext<V = any, T = any> {
|
|
27
|
+
container: HTMLElement;
|
|
28
|
+
table: T;
|
|
29
|
+
col: number;
|
|
30
|
+
row: number;
|
|
31
|
+
referencePosition: ReferencePosition;
|
|
32
|
+
}
|
|
23
33
|
export interface RectProps {
|
|
24
34
|
left: number;
|
|
25
35
|
top: number;
|
package/es/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":"AAuHA,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,8BAAiB,CAAA;IACjB,0BAAa,CAAA;IACb,4BAAe,CAAA;AACjB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAOD,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,8CAA8B,CAAA;IAC9B,kDAAkC,CAAA;IAClC,qDAAqC,CAAA;IACrC,yDAAyC,CAAA;AAC3C,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB","file":"types.js","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface IEditor<V = any, T = any> {\n /**\n * Called when cell enters edit mode.\n *\n * Warning will be thrown if you don't provide this function\n * after removal of `beginEditing`.\n */\n onStart: (context: EditContext<V, T>) => void;\n\n beforeEnd?: () => void;\n /**\n * called when cell exits edit mode.\n *\n * Warning will be thrown if you don't provide this function\n * after removal of `exit`.\n */\n onEnd: () => void;\n getInputElement?: () => HTMLElement;\n setElement?: (element: HTMLInputElement) => void;\n /**\n * Called when user click somewhere while editor is in edit mode.\n *\n * If returns falsy, VTable will exit edit mode.\n *\n * If returns truthy or not defined, nothing will happen.\n * Which means, in this scenario, you need to call `endEdit` manually\n * to end edit mode.\n */\n isEditorElement?: (target: HTMLElement) => boolean;\n /**\n * Before set new value to table, use it to validate value.\n * If the interface returns true, the value takes effect; otherwise, it does not take effect.\n * @param newValue new value to be set. If not provided, the current input element value will be used.\n * @param oldValue old value of the cell.\n */\n // validateValue?: (newValue?: V, oldValue?: V) => boolean | Promise<boolean>;\n validateValue?: (\n newValue?: any,\n oldValue?: any,\n position?: CellAddress,\n table?: any,\n isClickOnTable?: boolean\n ) => boolean | ValidateEnum | Promise<boolean | ValidateEnum>;\n /**\n * Called when editor mode is exited by any means.\n * Expected to return the current value of the cell.\n */\n getValue: () => V;\n /**\n * If the table editing trigger is configured as keydown, you need to call prepareEdit to prepare the editing environment, otherwise the first character of the Chinese input method will be treated as an English character.\n * @param param0\n */\n prepareEdit?: (context: PrepareEditContext<V, T>) => void;\n /**\n * Called when cell enter edit mode.\n * @deprecated use `onStart` instead.\n */\n beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;\n /**\n * @see onEnd\n * @deprecated use `onEnd` instead.\n */\n exit?: () => void;\n /**\n * @see isEditorElement\n * @deprecated use `isEditorElement` instead.\n */\n targetIsOnEditor?: (target: HTMLElement) => boolean;\n /**\n * Called when cell enters edit mode with a callback function\n * that can be used to end edit mode.\n * @see EditContext#endEdit\n * @deprecated callback is provided as `endEdit` in `EditContext`, use `onStart` instead.\n */\n bindSuccessCallback?: (callback: () => void) => void;\n adjustPosition?: (rect: RectProps) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface EditContext<V = any, T = any> {\n /** Container element of the VTable instance. */\n container: HTMLElement;\n /** Position info of the cell that is being edited. */\n referencePosition: ReferencePosition;\n /** Cell value before editing. */\n value: V;\n /**\n * Callback function that can be used to end edit mode.\n *\n * In most cases you don't need to call this function,\n * since Enter key click is handled by VTable automatically,\n * and mouse click can be handled by `isEditorElement`.\n *\n * However, if your editor has its own complete button,\n * or you have external elements like Tooltip,\n * you may want to use this callback to help you\n * end edit mode.\n */\n endEdit: () => void;\n table: T;\n col: number;\n row: number;\n}\n\nexport interface PrepareEditContext<V = any, T = any> {\n container: HTMLElement;\n table: T;\n col: number;\n row: number;\n referencePosition: ReferencePosition;\n}\nexport interface RectProps {\n left: number;\n top: number;\n width: number;\n height: number;\n}\n\nexport enum Placement {\n top = 'top',\n bottom = 'bottom',\n left = 'left',\n right = 'right'\n}\n\nexport interface ReferencePosition {\n rect: RectProps;\n placement?: Placement;\n}\n\nexport enum ValidateEnum {\n validateExit = 'validate-exit',\n invalidateExit = 'invalidate-exit',\n validateNotExit = 'validate-not-exit',\n invalidateNotExit = 'invalidate-not-exit'\n}\n\nexport type CellAddress = {\n col: number;\n row: number;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vtable-editors",
|
|
3
|
-
"version": "1.22.9-alpha.
|
|
3
|
+
"version": "1.22.9-alpha.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"tslib": "2.3.1",
|
|
42
42
|
"tslint": "5.12.1",
|
|
43
43
|
"@internal/bundler": "0.0.1",
|
|
44
|
-
"@internal/
|
|
45
|
-
"@internal/
|
|
44
|
+
"@internal/eslint-config": "0.0.1",
|
|
45
|
+
"@internal/ts-config": "0.0.1"
|
|
46
46
|
},
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|