@visactor/vtable-editors 1.22.10-alpha.0 → 1.22.10

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.
Files changed (9) hide show
  1. package/cjs/input-editor.d.ts +1 -0
  2. package/cjs/input-editor.js +48 -14
  3. package/cjs/input-editor.js.map +1 -1
  4. package/dist/vtable-editors.js +55 -14
  5. package/dist/vtable-editors.min.js +1 -1
  6. package/es/input-editor.d.ts +1 -0
  7. package/es/input-editor.js +48 -14
  8. package/es/input-editor.js.map +1 -1
  9. package/package.json +3 -3
package/cjs/input-editor.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare class InputEditor implements IEditor {
12
12
  table?: any;
13
13
  col?: number;
14
14
  row?: number;
15
+ private eventHandlers;
15
16
  constructor(editorConfig?: InputEditorConfig);
16
17
  getInputElement(): HTMLInputElement;
17
18
  createElement(): void;
package/cjs/input-editor.js CHANGED
@@ -6,29 +6,52 @@ Object.defineProperty(exports, "__esModule", {
6
6
 
7
7
  class InputEditor {
8
8
  constructor(editorConfig) {
9
- this.editorType = "Input", this.editorConfig = editorConfig;
9
+ this.editorType = "Input", this.eventHandlers = [], this.editorConfig = editorConfig;
10
10
  }
11
11
  getInputElement() {
12
12
  return this.element;
13
13
  }
14
14
  createElement() {
15
15
  var _a;
16
+ this.eventHandlers = [];
16
17
  const input = document.createElement("input");
17
18
  input.setAttribute("type", "text"), (null === (_a = this.editorConfig) || void 0 === _a ? void 0 : _a.readonly) && input.setAttribute("readonly", `${this.editorConfig.readonly}`),
18
19
  input.style.position = "absolute", input.style.padding = "4px", input.style.width = "100%",
19
20
  input.style.boxSizing = "border-box", input.style.backgroundColor = "#FFFFFF", input.style.borderRadius = "0px",
20
- input.style.border = "2px solid #d9d9d9", input.addEventListener("focus", (() => {
21
+ input.style.border = "2px solid #d9d9d9";
22
+ const focusHandler = () => {
21
23
  input.style.borderColor = "#4A90E2", input.style.outline = "none";
22
- })), input.addEventListener("blur", (e => {
23
- if (input.style.borderColor = "#d9d9d9", this.table && "0" === this.element.style.opacity) {
24
+ };
25
+ input.addEventListener("focus", focusHandler), this.eventHandlers.push({
26
+ type: "focus",
27
+ handler: focusHandler
28
+ });
29
+ const blurHandler = e => {
30
+ if (input.style.borderColor = "#d9d9d9", this.table && this.element && "0" === this.element.style.opacity) {
24
31
  const selectCell = this.table.stateManager.select.cellPos;
25
32
  selectCell.col === this.col && selectCell.row === this.row || this.onEnd();
26
33
  }
27
- })), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
28
- "a" === e.key && (e.ctrlKey || e.metaKey) && e.stopPropagation();
29
- })), input.addEventListener("wheel", (e => {
34
+ };
35
+ input.addEventListener("blur", blurHandler), this.eventHandlers.push({
36
+ type: "blur",
37
+ handler: blurHandler
38
+ }), this.element = input, this.container.appendChild(input);
39
+ const keydownHandler = e => {
40
+ var _a;
41
+ const keyboardEvent = e;
42
+ "a" === keyboardEvent.key && (keyboardEvent.ctrlKey || keyboardEvent.metaKey) && (null === (_a = this.table.editorManager) || void 0 === _a ? void 0 : _a.editingEditor) && keyboardEvent.stopPropagation();
43
+ };
44
+ input.addEventListener("keydown", keydownHandler), this.eventHandlers.push({
45
+ type: "keydown",
46
+ handler: keydownHandler
47
+ });
48
+ const wheelHandler = e => {
30
49
  e.preventDefault();
31
- }));
50
+ };
51
+ input.addEventListener("wheel", wheelHandler), this.eventHandlers.push({
52
+ type: "wheel",
53
+ handler: wheelHandler
54
+ });
32
55
  }
33
56
  setValue(value) {
34
57
  this.element.value = void 0 !== value ? value : "";
@@ -39,13 +62,15 @@ class InputEditor {
39
62
  prepareEdit({referencePosition: referencePosition, container: container, table: table, col: col, row: row}) {
40
63
  this.container = container, this.table = table, this.col = col, this.row = row;
41
64
  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),
65
+ selectCell.col === this.col && selectCell.row === this.row && (this.element ? container.contains(this.element) || (this.element.parentElement.removeChild(this.element),
66
+ this.container.appendChild(this.element)) : this.createElement(), this.element.style.opacity = "0",
67
+ this.element.style.pointerEvents = "none", (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
44
68
  this.element.focus());
45
69
  }
46
70
  onStart({value: value, referencePosition: referencePosition, container: container, endEdit: endEdit, table: table, col: col, row: row}) {
47
71
  this.container = container, this.successCallback = endEdit, this.table = table,
48
- this.col = col, this.row = row, this.element || (this.createElement(), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect)),
72
+ this.col = col, this.row = row, this.element ? container.contains(this.element) || (this.element.parentElement.removeChild(this.element),
73
+ this.container.appendChild(this.element)) : (this.createElement(), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect)),
49
74
  null != value && this.setValue(value), this.element.style.opacity = "1", this.element.style.pointerEvents = "auto",
50
75
  this.element.focus();
51
76
  }
@@ -56,9 +81,18 @@ class InputEditor {
56
81
  }
57
82
  endEditing() {}
58
83
  onEnd() {
59
- var _a;
60
- (null === (_a = this.container) || void 0 === _a ? void 0 : _a.contains(this.element)) && (this.container.removeChild(this.element),
61
- this.element = void 0);
84
+ if (!this.element) return;
85
+ const element = this.element;
86
+ this.eventHandlers.forEach((({type: type, handler: handler}) => {
87
+ element.removeEventListener(type, handler);
88
+ })), this.eventHandlers = [];
89
+ const parentNode = element.parentNode;
90
+ if (parentNode) try {
91
+ parentNode.removeChild(element);
92
+ } catch (error) {
93
+ if (error instanceof Error && "NotFoundError" !== error.name) throw error;
94
+ }
95
+ this.element = void 0;
62
96
  }
63
97
  isEditorElement(target) {
64
98
  return target === this.element;
package/cjs/input-editor.js.map CHANGED
@@ -1 +1 @@
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"]}
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 // 存储事件处理器，用于在移除元素前解绑\n private eventHandlers: Array<{ type: string; handler: EventListener }> = [];\n constructor(editorConfig?: InputEditorConfig) {\n this.editorConfig = editorConfig;\n }\n getInputElement(): HTMLInputElement {\n return this.element;\n }\n\n createElement() {\n // 清空之前的事件处理器（如果存在）\n this.eventHandlers = [];\n\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 const focusHandler = () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n };\n input.addEventListener('focus', focusHandler);\n this.eventHandlers.push({ type: 'focus', handler: focusHandler });\n\n const blurHandler: EventListener = (e: Event) => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n if (this.table && this.element && 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 input.addEventListener('blur', blurHandler);\n this.eventHandlers.push({ type: 'blur', handler: blurHandler });\n // #endregion\n this.element = input;\n this.container.appendChild(input);\n\n // 监听键盘事件\n const keydownHandler: EventListener = (e: Event) => {\n const keyboardEvent = e as KeyboardEvent;\n if (\n keyboardEvent.key === 'a' &&\n (keyboardEvent.ctrlKey || keyboardEvent.metaKey) &&\n this.table.editorManager?.editingEditor\n ) {\n // 阻止冒泡 防止处理成表格全选事件\n keyboardEvent.stopPropagation();\n }\n };\n input.addEventListener('keydown', keydownHandler);\n this.eventHandlers.push({ type: 'keydown', handler: keydownHandler });\n\n // hack for preventing drag touch cause page jump\n const wheelHandler: EventListener = (e: Event) => {\n e.preventDefault();\n };\n input.addEventListener('wheel', wheelHandler);\n this.eventHandlers.push({ type: 'wheel', handler: wheelHandler });\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 } else {\n if (!container.contains(this.element)) {\n this.element.parentElement.removeChild(this.element);\n this.container.appendChild(this.element);\n }\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 } else {\n if (!container.contains(this.element)) {\n this.element.parentElement.removeChild(this.element);\n this.container.appendChild(this.element);\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.element) {\n return;\n }\n\n // 保存元素引用，避免在移除过程中被其他代码修改\n const element = this.element;\n\n // 先移除所有事件监听器，避免在 removeChild 时触发 blur 等事件\n this.eventHandlers.forEach(({ type, handler }) => {\n element.removeEventListener(type, handler);\n });\n this.eventHandlers = [];\n\n // 检查元素的父节点是否存在，确保元素还在 DOM 中\n const parentNode = element.parentNode;\n if (parentNode) {\n try {\n // 事件监听器已经移除，可以安全地移除元素，不会触发 blur 等事件\n parentNode.removeChild(element);\n } catch (error) {\n // 如果元素已经被移除或移动，忽略 NotFoundError\n if (error instanceof Error && error.name !== 'NotFoundError') {\n throw error;\n }\n }\n }\n\n // 清空引用\n this.element = undefined;\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/dist/vtable-editors.js CHANGED
@@ -13,6 +13,7 @@
13
13
  table;
14
14
  col;
15
15
  row;
16
+ eventHandlers = [];
16
17
  constructor(editorConfig) {
17
18
  this.editorConfig = editorConfig;
18
19
  }
@@ -20,6 +21,7 @@
20
21
  return this.element;
21
22
  }
22
23
  createElement() {
24
+ this.eventHandlers = [];
23
25
  const input = document.createElement('input');
24
26
  input.setAttribute('type', 'text');
25
27
  if (this.editorConfig?.readonly) {
@@ -32,29 +34,40 @@
32
34
  input.style.backgroundColor = '#FFFFFF';
33
35
  input.style.borderRadius = '0px';
34
36
  input.style.border = '2px solid #d9d9d9';
35
- input.addEventListener('focus', () => {
37
+ const focusHandler = () => {
36
38
  input.style.borderColor = '#4A90E2';
37
39
  input.style.outline = 'none';
38
- });
39
- input.addEventListener('blur', e => {
40
+ };
41
+ input.addEventListener('focus', focusHandler);
42
+ this.eventHandlers.push({ type: 'focus', handler: focusHandler });
43
+ const blurHandler = (e) => {
40
44
  input.style.borderColor = '#d9d9d9';
41
- if (this.table && this.element.style.opacity === '0') {
45
+ if (this.table && this.element && this.element.style.opacity === '0') {
42
46
  const selectCell = this.table.stateManager.select.cellPos;
43
47
  if (selectCell.col !== this.col || selectCell.row !== this.row) {
44
48
  this.onEnd();
45
49
  }
46
50
  }
47
- });
51
+ };
52
+ input.addEventListener('blur', blurHandler);
53
+ this.eventHandlers.push({ type: 'blur', handler: blurHandler });
48
54
  this.element = input;
49
55
  this.container.appendChild(input);
50
- input.addEventListener('keydown', (e) => {
51
- if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
52
- e.stopPropagation();
56
+ const keydownHandler = (e) => {
57
+ const keyboardEvent = e;
58
+ if (keyboardEvent.key === 'a' &&
59
+ (keyboardEvent.ctrlKey || keyboardEvent.metaKey) &&
60
+ this.table.editorManager?.editingEditor) {
61
+ keyboardEvent.stopPropagation();
53
62
  }
54
- });
55
- input.addEventListener('wheel', e => {
63
+ };
64
+ input.addEventListener('keydown', keydownHandler);
65
+ this.eventHandlers.push({ type: 'keydown', handler: keydownHandler });
66
+ const wheelHandler = (e) => {
56
67
  e.preventDefault();
57
- });
68
+ };
69
+ input.addEventListener('wheel', wheelHandler);
70
+ this.eventHandlers.push({ type: 'wheel', handler: wheelHandler });
58
71
  }
59
72
  setValue(value) {
60
73
  this.element.value = typeof value !== 'undefined' ? value : '';
@@ -74,6 +87,12 @@
74
87
  if (!this.element) {
75
88
  this.createElement();
76
89
  }
90
+ else {
91
+ if (!container.contains(this.element)) {
92
+ this.element.parentElement.removeChild(this.element);
93
+ this.container.appendChild(this.element);
94
+ }
95
+ }
77
96
  this.element.style.opacity = '0';
78
97
  this.element.style.pointerEvents = 'none';
79
98
  if (referencePosition?.rect) {
@@ -93,6 +112,12 @@
93
112
  this.adjustPosition(referencePosition.rect);
94
113
  }
95
114
  }
115
+ else {
116
+ if (!container.contains(this.element)) {
117
+ this.element.parentElement.removeChild(this.element);
118
+ this.container.appendChild(this.element);
119
+ }
120
+ }
96
121
  if (value !== undefined && value !== null) {
97
122
  this.setValue(value);
98
123
  }
@@ -114,10 +139,26 @@
114
139
  endEditing() {
115
140
  }
116
141
  onEnd() {
117
- if (this.container?.contains(this.element)) {
118
- this.container.removeChild(this.element);
119
- this.element = undefined;
142
+ if (!this.element) {
143
+ return;
144
+ }
145
+ const element = this.element;
146
+ this.eventHandlers.forEach(({ type, handler }) => {
147
+ element.removeEventListener(type, handler);
148
+ });
149
+ this.eventHandlers = [];
150
+ const parentNode = element.parentNode;
151
+ if (parentNode) {
152
+ try {
153
+ parentNode.removeChild(element);
154
+ }
155
+ catch (error) {
156
+ if (error instanceof Error && error.name !== 'NotFoundError') {
157
+ throw error;
158
+ }
159
+ }
120
160
  }
161
+ this.element = undefined;
121
162
  }
122
163
  isEditorElement(target) {
123
164
  return target === this.element;
package/dist/vtable-editors.min.js CHANGED
@@ -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}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}}}));
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;eventHandlers=[];constructor(e){this.editorConfig=e}getInputElement(){return this.element}createElement(){this.eventHandlers=[];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";const t=()=>{e.style.borderColor="#4A90E2",e.style.outline="none"};e.addEventListener("focus",t),this.eventHandlers.push({type:"focus",handler:t});const n=t=>{if(e.style.borderColor="#d9d9d9",this.table&&this.element&&"0"===this.element.style.opacity){const e=this.table.stateManager.select.cellPos;e.col===this.col&&e.row===this.row||this.onEnd()}};e.addEventListener("blur",n),this.eventHandlers.push({type:"blur",handler:n}),this.element=e,this.container.appendChild(e);const i=e=>{const t=e;"a"===t.key&&(t.ctrlKey||t.metaKey)&&this.table.editorManager?.editingEditor&&t.stopPropagation()};e.addEventListener("keydown",i),this.eventHandlers.push({type:"keydown",handler:i});const s=e=>{e.preventDefault()};e.addEventListener("wheel",s),this.eventHandlers.push({type:"wheel",handler:s})}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}prepareEdit({referencePosition:e,container:t,table:n,col:i,row:s}){this.container=t,this.table=n,this.col=i,this.row=s;const o=this.table.stateManager.select.cellPos;o.col===this.col&&o.row===this.row&&(this.element?t.contains(this.element)||(this.element.parentElement.removeChild(this.element),this.container.appendChild(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:n,endEdit:i,table:s,col:o,row:l}){this.container=n,this.successCallback=i,this.table=s,this.col=o,this.row=l,this.element?n.contains(this.element)||(this.element.parentElement.removeChild(this.element),this.container.appendChild(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,n=e.left-1,i=e.width+2,s=e.height+2;this.element.style.top=t+"px",this.element.style.left=n+"px",this.element.style.width=i+"px",this.element.style.height=s+"px"}endEditing(){}onEnd(){if(!this.element)return;const e=this.element;this.eventHandlers.forEach((({type:t,handler:n})=>{e.removeEventListener(t,n)})),this.eventHandlers=[];const t=e.parentNode;if(t)try{t.removeChild(e)}catch(e){if(e instanceof Error&&"NotFoundError"!==e.name)throw e}this.element=void 0}isEditorElement(e){return e===this.element}validateValue(e,t,n,i){return!0}}var n,i;e.Placement=void 0,(n=e.Placement||(e.Placement={})).top="top",n.bottom="bottom",n.left="left",n.right="right",e.ValidateEnum=void 0,(i=e.ValidateEnum||(e.ValidateEnum={})).validateExit="validate-exit",i.invalidateExit="invalidate-exit",i.validateNotExit="validate-not-exit",i.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:n}=this.editorConfig;let i="";n.forEach((t=>{i+=t===e?`<option value="${t}" selected>${t}</option>`:`<option value="${t}" >${t}</option>`})),t.innerHTML=i,this.container.appendChild(t)}_bindSelectChangeEvent(){this.element.addEventListener("change",(()=>{}))}setValue(e){}getValue(){return this.element.value}onStart({container:e,value:t,referencePosition:n,endEdit:i}){this.container=e,this.successCallback=i,this.createElement(t),null!=t&&this.setValue(t),n?.rect&&this.adjustPosition(n.rect),this.element.focus()}adjustPosition(e){const t=e.top-1,n=e.left-1,i=e.width+2,s=e.height+2;this.element.style.top=t+"px",this.element.style.left=n+"px",this.element.style.width=i+"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),n="Enter"===e.key&&e.shiftKey;(t||n)&&e.stopPropagation()}))}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}onStart({value:e,referencePosition:t,container:n,endEdit:i}){this.container=n,this.successCallback=i,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,n=e.left-1,i=e.width+2,s=e.height+2;this.element.style.top=t+"px",this.element.style.left=n+"px",this.element.style.width=i+"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
@@ -12,6 +12,7 @@ export declare class InputEditor implements IEditor {
12
12
  table?: any;
13
13
  col?: number;
14
14
  row?: number;
15
+ private eventHandlers;
15
16
  constructor(editorConfig?: InputEditorConfig);
16
17
  getInputElement(): HTMLInputElement;
17
18
  createElement(): void;
package/es/input-editor.js CHANGED
@@ -1,28 +1,51 @@
1
1
  export class InputEditor {
2
2
  constructor(editorConfig) {
3
- this.editorType = "Input", this.editorConfig = editorConfig;
3
+ this.editorType = "Input", this.eventHandlers = [], this.editorConfig = editorConfig;
4
4
  }
5
5
  getInputElement() {
6
6
  return this.element;
7
7
  }
8
8
  createElement() {
9
9
  var _a;
10
+ this.eventHandlers = [];
10
11
  const input = document.createElement("input");
11
12
  input.setAttribute("type", "text"), (null === (_a = this.editorConfig) || void 0 === _a ? void 0 : _a.readonly) && input.setAttribute("readonly", `${this.editorConfig.readonly}`),
12
13
  input.style.position = "absolute", input.style.padding = "4px", input.style.width = "100%",
13
14
  input.style.boxSizing = "border-box", input.style.backgroundColor = "#FFFFFF", input.style.borderRadius = "0px",
14
- input.style.border = "2px solid #d9d9d9", input.addEventListener("focus", (() => {
15
+ input.style.border = "2px solid #d9d9d9";
16
+ const focusHandler = () => {
15
17
  input.style.borderColor = "#4A90E2", input.style.outline = "none";
16
- })), input.addEventListener("blur", (e => {
17
- if (input.style.borderColor = "#d9d9d9", this.table && "0" === this.element.style.opacity) {
18
+ };
19
+ input.addEventListener("focus", focusHandler), this.eventHandlers.push({
20
+ type: "focus",
21
+ handler: focusHandler
22
+ });
23
+ const blurHandler = e => {
24
+ if (input.style.borderColor = "#d9d9d9", this.table && this.element && "0" === this.element.style.opacity) {
18
25
  const selectCell = this.table.stateManager.select.cellPos;
19
26
  selectCell.col === this.col && selectCell.row === this.row || this.onEnd();
20
27
  }
21
- })), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
22
- "a" === e.key && (e.ctrlKey || e.metaKey) && e.stopPropagation();
23
- })), input.addEventListener("wheel", (e => {
28
+ };
29
+ input.addEventListener("blur", blurHandler), this.eventHandlers.push({
30
+ type: "blur",
31
+ handler: blurHandler
32
+ }), this.element = input, this.container.appendChild(input);
33
+ const keydownHandler = e => {
34
+ var _a;
35
+ const keyboardEvent = e;
36
+ "a" === keyboardEvent.key && (keyboardEvent.ctrlKey || keyboardEvent.metaKey) && (null === (_a = this.table.editorManager) || void 0 === _a ? void 0 : _a.editingEditor) && keyboardEvent.stopPropagation();
37
+ };
38
+ input.addEventListener("keydown", keydownHandler), this.eventHandlers.push({
39
+ type: "keydown",
40
+ handler: keydownHandler
41
+ });
42
+ const wheelHandler = e => {
24
43
  e.preventDefault();
25
- }));
44
+ };
45
+ input.addEventListener("wheel", wheelHandler), this.eventHandlers.push({
46
+ type: "wheel",
47
+ handler: wheelHandler
48
+ });
26
49
  }
27
50
  setValue(value) {
28
51
  this.element.value = void 0 !== value ? value : "";
@@ -33,13 +56,15 @@ export class InputEditor {
33
56
  prepareEdit({referencePosition: referencePosition, container: container, table: table, col: col, row: row}) {
34
57
  this.container = container, this.table = table, this.col = col, this.row = row;
35
58
  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),
59
+ selectCell.col === this.col && selectCell.row === this.row && (this.element ? container.contains(this.element) || (this.element.parentElement.removeChild(this.element),
60
+ this.container.appendChild(this.element)) : this.createElement(), this.element.style.opacity = "0",
61
+ this.element.style.pointerEvents = "none", (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
38
62
  this.element.focus());
39
63
  }
40
64
  onStart({value: value, referencePosition: referencePosition, container: container, endEdit: endEdit, table: table, col: col, row: row}) {
41
65
  this.container = container, this.successCallback = endEdit, this.table = table,
42
- this.col = col, this.row = row, this.element || (this.createElement(), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect)),
66
+ this.col = col, this.row = row, this.element ? container.contains(this.element) || (this.element.parentElement.removeChild(this.element),
67
+ this.container.appendChild(this.element)) : (this.createElement(), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect)),
43
68
  null != value && this.setValue(value), this.element.style.opacity = "1", this.element.style.pointerEvents = "auto",
44
69
  this.element.focus();
45
70
  }
@@ -50,9 +75,18 @@ export class InputEditor {
50
75
  }
51
76
  endEditing() {}
52
77
  onEnd() {
53
- var _a;
54
- (null === (_a = this.container) || void 0 === _a ? void 0 : _a.contains(this.element)) && (this.container.removeChild(this.element),
55
- this.element = void 0);
78
+ if (!this.element) return;
79
+ const element = this.element;
80
+ this.eventHandlers.forEach((({type: type, handler: handler}) => {
81
+ element.removeEventListener(type, handler);
82
+ })), this.eventHandlers = [];
83
+ const parentNode = element.parentNode;
84
+ if (parentNode) try {
85
+ parentNode.removeChild(element);
86
+ } catch (error) {
87
+ if (error instanceof Error && "NotFoundError" !== error.name) throw error;
88
+ }
89
+ this.element = void 0;
56
90
  }
57
91
  isEditorElement(target) {
58
92
  return target === this.element;
package/es/input-editor.js.map CHANGED
@@ -1 +1 @@
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"]}
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 // 存储事件处理器，用于在移除元素前解绑\n private eventHandlers: Array<{ type: string; handler: EventListener }> = [];\n constructor(editorConfig?: InputEditorConfig) {\n this.editorConfig = editorConfig;\n }\n getInputElement(): HTMLInputElement {\n return this.element;\n }\n\n createElement() {\n // 清空之前的事件处理器（如果存在）\n this.eventHandlers = [];\n\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 const focusHandler = () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n };\n input.addEventListener('focus', focusHandler);\n this.eventHandlers.push({ type: 'focus', handler: focusHandler });\n\n const blurHandler: EventListener = (e: Event) => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n if (this.table && this.element && 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 input.addEventListener('blur', blurHandler);\n this.eventHandlers.push({ type: 'blur', handler: blurHandler });\n // #endregion\n this.element = input;\n this.container.appendChild(input);\n\n // 监听键盘事件\n const keydownHandler: EventListener = (e: Event) => {\n const keyboardEvent = e as KeyboardEvent;\n if (\n keyboardEvent.key === 'a' &&\n (keyboardEvent.ctrlKey || keyboardEvent.metaKey) &&\n this.table.editorManager?.editingEditor\n ) {\n // 阻止冒泡 防止处理成表格全选事件\n keyboardEvent.stopPropagation();\n }\n };\n input.addEventListener('keydown', keydownHandler);\n this.eventHandlers.push({ type: 'keydown', handler: keydownHandler });\n\n // hack for preventing drag touch cause page jump\n const wheelHandler: EventListener = (e: Event) => {\n e.preventDefault();\n };\n input.addEventListener('wheel', wheelHandler);\n this.eventHandlers.push({ type: 'wheel', handler: wheelHandler });\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 } else {\n if (!container.contains(this.element)) {\n this.element.parentElement.removeChild(this.element);\n this.container.appendChild(this.element);\n }\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 } else {\n if (!container.contains(this.element)) {\n this.element.parentElement.removeChild(this.element);\n this.container.appendChild(this.element);\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.element) {\n return;\n }\n\n // 保存元素引用，避免在移除过程中被其他代码修改\n const element = this.element;\n\n // 先移除所有事件监听器，避免在 removeChild 时触发 blur 等事件\n this.eventHandlers.forEach(({ type, handler }) => {\n element.removeEventListener(type, handler);\n });\n this.eventHandlers = [];\n\n // 检查元素的父节点是否存在，确保元素还在 DOM 中\n const parentNode = element.parentNode;\n if (parentNode) {\n try {\n // 事件监听器已经移除，可以安全地移除元素，不会触发 blur 等事件\n parentNode.removeChild(element);\n } catch (error) {\n // 如果元素已经被移除或移动，忽略 NotFoundError\n if (error instanceof Error && error.name !== 'NotFoundError') {\n throw error;\n }\n }\n }\n\n // 清空引用\n this.element = undefined;\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@visactor/vtable-editors",
3
- "version": "1.22.10-alpha.0",
3
+ "version": "1.22.10",
4
4
  "description": "",
5
5
  "sideEffects": false,
6
6
  "main": "cjs/index.js",
@@ -40,9 +40,9 @@
40
40
  "ts-node": "10.9.0",
41
41
  "tslib": "2.3.1",
42
42
  "tslint": "5.12.1",
43
+ "@internal/bundler": "0.0.1",
43
44
  "@internal/ts-config": "0.0.1",
44
- "@internal/eslint-config": "0.0.1",
45
- "@internal/bundler": "0.0.1"
45
+ "@internal/eslint-config": "0.0.1"
46
46
  },
47
47
  "publishConfig": {
48
48
  "access": "public"