@visactor/vtable-editors 1.13.0 → 1.13.1-alpha.1
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 +5 -0
- package/cjs/input-editor.js.map +1 -1
- package/cjs/types.d.ts +11 -1
- package/cjs/types.js +6 -3
- package/cjs/types.js.map +1 -1
- package/dist/vtable-editors.js +18 -8
- package/dist/vtable-editors.min.js +1 -1
- package/es/input-editor.d.ts +3 -1
- package/es/input-editor.js +5 -0
- package/es/input-editor.js.map +1 -1
- package/es/types.d.ts +11 -1
- package/es/types.js +7 -0
- package/es/types.js.map +1 -1
- package/package.json +1 -1
package/cjs/input-editor.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type { EditContext, IEditor, RectProps } from './types';
|
|
1
|
+
import type { CellAddress, EditContext, IEditor, RectProps } from './types';
|
|
2
|
+
import { ValidateEnum } from './types';
|
|
2
3
|
export interface InputEditorConfig {
|
|
3
4
|
readonly?: boolean;
|
|
4
5
|
}
|
|
@@ -17,4 +18,5 @@ export declare class InputEditor implements IEditor {
|
|
|
17
18
|
endEditing(): void;
|
|
18
19
|
onEnd(): void;
|
|
19
20
|
isEditorElement(target: HTMLElement): boolean;
|
|
21
|
+
validateValue(newValue?: any, oldValue?: any, position?: CellAddress, table?: any): boolean | ValidateEnum;
|
|
20
22
|
}
|
package/cjs/input-editor.js
CHANGED
|
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: !0
|
|
5
5
|
}), exports.InputEditor = void 0;
|
|
6
6
|
|
|
7
|
+
const types_1 = require("./types");
|
|
8
|
+
|
|
7
9
|
class InputEditor {
|
|
8
10
|
constructor(editorConfig) {
|
|
9
11
|
this.editorType = "Input", this.editorConfig = editorConfig;
|
|
@@ -42,6 +44,9 @@ class InputEditor {
|
|
|
42
44
|
isEditorElement(target) {
|
|
43
45
|
return target === this.element;
|
|
44
46
|
}
|
|
47
|
+
validateValue(newValue, oldValue, position, table) {
|
|
48
|
+
return types_1.ValidateEnum.invalidateReturn;
|
|
49
|
+
}
|
|
45
50
|
}
|
|
46
51
|
|
|
47
52
|
exports.InputEditor = InputEditor;
|
package/cjs/input-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"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","file":"input-editor.js","sourcesContent":["import type { CellAddress, EditContext, IEditor, RectProps } from './types';\nimport { 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\n constructor(editorConfig?: InputEditorConfig) {\n this.editorConfig = editorConfig;\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 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\n setValue(value: string) {\n this.element.value = typeof value !== 'undefined' ? value : '';\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ value, referencePosition, container, endEdit }: EditContext<string>) {\n this.container = container;\n this.successCallback = endEdit;\n if (!this.element) {\n this.createElement();\n\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n }\n this.element.focus();\n // do nothing\n }\n\n adjustPosition(rect: RectProps) {\n this.element.style.top = rect.top + 'px';\n this.element.style.left = rect.left + 'px';\n this.element.style.width = rect.width + 'px';\n this.element.style.height = rect.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 }\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 ValidateEnum.invalidateReturn;\n }\n}\n"]}
|
package/cjs/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export interface IEditor<V = any> {
|
|
|
2
2
|
onStart: (context: EditContext<V>) => void;
|
|
3
3
|
onEnd: () => void;
|
|
4
4
|
isEditorElement?: (target: HTMLElement) => boolean;
|
|
5
|
-
validateValue?: (newValue?:
|
|
5
|
+
validateValue?: (newValue?: any, oldValue?: any, position?: CellAddress, table?: any) => boolean | ValidateEnum | Promise<boolean | ValidateEnum>;
|
|
6
6
|
getValue: () => V;
|
|
7
7
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
8
8
|
exit?: () => void;
|
|
@@ -33,3 +33,13 @@ export interface ReferencePosition {
|
|
|
33
33
|
rect: RectProps;
|
|
34
34
|
placement?: Placement;
|
|
35
35
|
}
|
|
36
|
+
export declare enum ValidateEnum {
|
|
37
|
+
validateReturn = "validate-return",
|
|
38
|
+
invalidateReturn = "invalidate-return",
|
|
39
|
+
validateNotReturn = "validate-not-return",
|
|
40
|
+
invalidateNotReturn = "invalidate-not-return"
|
|
41
|
+
}
|
|
42
|
+
export type CellAddress = {
|
|
43
|
+
col: number;
|
|
44
|
+
row: number;
|
|
45
|
+
};
|
package/cjs/types.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var Placement;
|
|
3
|
+
var Placement, ValidateEnum;
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: !0
|
|
7
|
-
}), exports.Placement = void 0, function(Placement) {
|
|
7
|
+
}), exports.ValidateEnum = exports.Placement = void 0, function(Placement) {
|
|
8
8
|
Placement.top = "top", Placement.bottom = "bottom", Placement.left = "left", Placement.right = "right";
|
|
9
|
-
}(Placement = exports.Placement || (exports.Placement = {}))
|
|
9
|
+
}(Placement = exports.Placement || (exports.Placement = {})), function(ValidateEnum) {
|
|
10
|
+
ValidateEnum.validateReturn = "validate-return", ValidateEnum.invalidateReturn = "invalidate-return",
|
|
11
|
+
ValidateEnum.validateNotReturn = "validate-not-return", ValidateEnum.invalidateNotReturn = "invalidate-not-return";
|
|
12
|
+
}(ValidateEnum = exports.ValidateEnum || (exports.ValidateEnum = {}));
|
|
10
13
|
//# sourceMappingURL=types.js.map
|
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":";;;AAoGA,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,kDAAkC,CAAA;IAClC,sDAAsC,CAAA;IACtC,yDAAyC,CAAA;IACzC,6DAA6C,CAAA;AAC/C,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> {\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>) => 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 /**\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 ) => 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 * 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}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface EditContext<V = 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 col: number;\n row: number;\n}\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 validateReturn = 'validate-return',\n invalidateReturn = 'invalidate-return',\n validateNotReturn = 'validate-not-return',\n invalidateNotReturn = 'invalidate-not-return'\n}\n\nexport type CellAddress = {\n col: number;\n row: number;\n};\n"]}
|
package/dist/vtable-editors.js
CHANGED
|
@@ -4,6 +4,21 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.editors = {})));
|
|
5
5
|
})(this, (function (exports) { 'use strict';
|
|
6
6
|
|
|
7
|
+
exports.Placement = void 0;
|
|
8
|
+
(function (Placement) {
|
|
9
|
+
Placement["top"] = "top";
|
|
10
|
+
Placement["bottom"] = "bottom";
|
|
11
|
+
Placement["left"] = "left";
|
|
12
|
+
Placement["right"] = "right";
|
|
13
|
+
})(exports.Placement || (exports.Placement = {}));
|
|
14
|
+
exports.ValidateEnum = void 0;
|
|
15
|
+
(function (ValidateEnum) {
|
|
16
|
+
ValidateEnum["validateReturn"] = "validate-return";
|
|
17
|
+
ValidateEnum["invalidateReturn"] = "invalidate-return";
|
|
18
|
+
ValidateEnum["validateNotReturn"] = "validate-not-return";
|
|
19
|
+
ValidateEnum["invalidateNotReturn"] = "invalidate-not-return";
|
|
20
|
+
})(exports.ValidateEnum || (exports.ValidateEnum = {}));
|
|
21
|
+
|
|
7
22
|
class InputEditor {
|
|
8
23
|
editorType = 'Input';
|
|
9
24
|
editorConfig;
|
|
@@ -69,6 +84,9 @@
|
|
|
69
84
|
isEditorElement(target) {
|
|
70
85
|
return target === this.element;
|
|
71
86
|
}
|
|
87
|
+
validateValue(newValue, oldValue, position, table) {
|
|
88
|
+
return exports.ValidateEnum.invalidateReturn;
|
|
89
|
+
}
|
|
72
90
|
}
|
|
73
91
|
|
|
74
92
|
class DateInputEditor extends InputEditor {
|
|
@@ -230,14 +248,6 @@
|
|
|
230
248
|
}
|
|
231
249
|
}
|
|
232
250
|
|
|
233
|
-
exports.Placement = void 0;
|
|
234
|
-
(function (Placement) {
|
|
235
|
-
Placement["top"] = "top";
|
|
236
|
-
Placement["bottom"] = "bottom";
|
|
237
|
-
Placement["left"] = "left";
|
|
238
|
-
Placement["right"] = "right";
|
|
239
|
-
})(exports.Placement || (exports.Placement = {}));
|
|
240
|
-
|
|
241
251
|
exports.DateInputEditor = DateInputEditor;
|
|
242
252
|
exports.InputEditor = InputEditor;
|
|
243
253
|
exports.ListEditor = ListEditor;
|
|
@@ -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";
|
|
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";var t,i;e.Placement=void 0,(t=e.Placement||(e.Placement={})).top="top",t.bottom="bottom",t.left="left",t.right="right",e.ValidateEnum=void 0,(i=e.ValidateEnum||(e.ValidateEnum={})).validateReturn="validate-return",i.invalidateReturn="invalidate-return",i.validateNotReturn="validate-not-return",i.invalidateNotReturn="invalidate-not-return";class n{editorType="Input";editorConfig;container;successCallback;element;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",this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&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){this.element.style.top=e.top+"px",this.element.style.left=e.left+"px",this.element.style.width=e.width+"px",this.element.style.height=e.height+"px"}endEditing(){}onEnd(){this.container?.contains(this.element)&&this.container.removeChild(this.element),this.element=void 0}isEditorElement(e){return e===this.element}validateValue(t,i,n,s){return e.ValidateEnum.invalidateReturn}}e.DateInputEditor=class extends n{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",this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&e.stopPropagation()}))}},e.InputEditor=n,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",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){this.element.style.top=e.top+"px",this.element.style.left=e.left+"px",this.element.style.width=e.width+"px",this.element.style.height=e.height+"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",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){this.element.style.top=e.top+"px",this.element.style.left=e.left+"px",this.element.style.width=e.width+"px",this.element.style.height=e.height+"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,5 @@
|
|
|
1
|
-
import type { EditContext, IEditor, RectProps } from './types';
|
|
1
|
+
import type { CellAddress, EditContext, IEditor, RectProps } from './types';
|
|
2
|
+
import { ValidateEnum } from './types';
|
|
2
3
|
export interface InputEditorConfig {
|
|
3
4
|
readonly?: boolean;
|
|
4
5
|
}
|
|
@@ -17,4 +18,5 @@ export declare class InputEditor implements IEditor {
|
|
|
17
18
|
endEditing(): void;
|
|
18
19
|
onEnd(): void;
|
|
19
20
|
isEditorElement(target: HTMLElement): boolean;
|
|
21
|
+
validateValue(newValue?: any, oldValue?: any, position?: CellAddress, table?: any): boolean | ValidateEnum;
|
|
20
22
|
}
|
package/es/input-editor.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { ValidateEnum } from "./types";
|
|
2
|
+
|
|
1
3
|
export class InputEditor {
|
|
2
4
|
constructor(editorConfig) {
|
|
3
5
|
this.editorType = "Input", this.editorConfig = editorConfig;
|
|
@@ -36,5 +38,8 @@ export class InputEditor {
|
|
|
36
38
|
isEditorElement(target) {
|
|
37
39
|
return target === this.element;
|
|
38
40
|
}
|
|
41
|
+
validateValue(newValue, oldValue, position, table) {
|
|
42
|
+
return ValidateEnum.invalidateReturn;
|
|
43
|
+
}
|
|
39
44
|
}
|
|
40
45
|
//# sourceMappingURL=input-editor.js.map
|
package/es/input-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"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","file":"input-editor.js","sourcesContent":["import type { CellAddress, EditContext, IEditor, RectProps } from './types';\nimport { 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\n constructor(editorConfig?: InputEditorConfig) {\n this.editorConfig = editorConfig;\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 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\n setValue(value: string) {\n this.element.value = typeof value !== 'undefined' ? value : '';\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ value, referencePosition, container, endEdit }: EditContext<string>) {\n this.container = container;\n this.successCallback = endEdit;\n if (!this.element) {\n this.createElement();\n\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n }\n this.element.focus();\n // do nothing\n }\n\n adjustPosition(rect: RectProps) {\n this.element.style.top = rect.top + 'px';\n this.element.style.left = rect.left + 'px';\n this.element.style.width = rect.width + 'px';\n this.element.style.height = rect.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 }\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 ValidateEnum.invalidateReturn;\n }\n}\n"]}
|
package/es/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export interface IEditor<V = any> {
|
|
|
2
2
|
onStart: (context: EditContext<V>) => void;
|
|
3
3
|
onEnd: () => void;
|
|
4
4
|
isEditorElement?: (target: HTMLElement) => boolean;
|
|
5
|
-
validateValue?: (newValue?:
|
|
5
|
+
validateValue?: (newValue?: any, oldValue?: any, position?: CellAddress, table?: any) => boolean | ValidateEnum | Promise<boolean | ValidateEnum>;
|
|
6
6
|
getValue: () => V;
|
|
7
7
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
8
8
|
exit?: () => void;
|
|
@@ -33,3 +33,13 @@ export interface ReferencePosition {
|
|
|
33
33
|
rect: RectProps;
|
|
34
34
|
placement?: Placement;
|
|
35
35
|
}
|
|
36
|
+
export declare enum ValidateEnum {
|
|
37
|
+
validateReturn = "validate-return",
|
|
38
|
+
invalidateReturn = "invalidate-return",
|
|
39
|
+
validateNotReturn = "validate-not-return",
|
|
40
|
+
invalidateNotReturn = "invalidate-not-return"
|
|
41
|
+
}
|
|
42
|
+
export type CellAddress = {
|
|
43
|
+
col: number;
|
|
44
|
+
row: number;
|
|
45
|
+
};
|
package/es/types.js
CHANGED
|
@@ -3,4 +3,11 @@ export var Placement;
|
|
|
3
3
|
!function(Placement) {
|
|
4
4
|
Placement.top = "top", Placement.bottom = "bottom", Placement.left = "left", Placement.right = "right";
|
|
5
5
|
}(Placement || (Placement = {}));
|
|
6
|
+
|
|
7
|
+
export var ValidateEnum;
|
|
8
|
+
|
|
9
|
+
!function(ValidateEnum) {
|
|
10
|
+
ValidateEnum.validateReturn = "validate-return", ValidateEnum.invalidateReturn = "invalidate-return",
|
|
11
|
+
ValidateEnum.validateNotReturn = "validate-not-return", ValidateEnum.invalidateNotReturn = "invalidate-not-return";
|
|
12
|
+
}(ValidateEnum || (ValidateEnum = {}));
|
|
6
13
|
//# sourceMappingURL=types.js.map
|
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":"AAoGA,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,kDAAkC,CAAA;IAClC,sDAAsC,CAAA;IACtC,yDAAyC,CAAA;IACzC,6DAA6C,CAAA;AAC/C,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB","file":"types.js","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface IEditor<V = 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>) => 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 /**\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 ) => 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 * 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}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface EditContext<V = 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 col: number;\n row: number;\n}\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 validateReturn = 'validate-return',\n invalidateReturn = 'invalidate-return',\n validateNotReturn = 'validate-not-return',\n invalidateNotReturn = 'invalidate-not-return'\n}\n\nexport type CellAddress = {\n col: number;\n row: number;\n};\n"]}
|