@visactor/vtable-editors 0.18.4 → 0.19.0
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/date-input-editor.d.ts +0 -3
- package/cjs/date-input-editor.js +0 -3
- package/cjs/date-input-editor.js.map +1 -1
- package/cjs/input-editor.d.ts +6 -8
- package/cjs/input-editor.js +5 -5
- package/cjs/input-editor.js.map +1 -1
- package/cjs/list-editor.d.ts +9 -13
- package/cjs/list-editor.js +5 -8
- package/cjs/list-editor.js.map +1 -1
- package/cjs/types.d.ts +18 -12
- package/cjs/types.js.map +1 -1
- package/dist/vtable-editors.js +12 -21
- package/dist/vtable-editors.min.js +1 -1
- package/es/date-input-editor.d.ts +0 -3
- package/es/date-input-editor.js +0 -3
- package/es/date-input-editor.js.map +1 -1
- package/es/input-editor.d.ts +6 -8
- package/es/input-editor.js +5 -5
- package/es/input-editor.js.map +1 -1
- package/es/list-editor.d.ts +9 -13
- package/es/list-editor.js +5 -8
- package/es/list-editor.js.map +1 -1
- package/es/types.d.ts +18 -12
- package/es/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,9 +6,6 @@ export interface DateInputEditorConfig {
|
|
|
6
6
|
}
|
|
7
7
|
export declare class DateInputEditor extends InputEditor implements IEditor {
|
|
8
8
|
editorType: string;
|
|
9
|
-
element: HTMLInputElement;
|
|
10
|
-
successCallback: Function;
|
|
11
9
|
constructor(editorConfig?: DateInputEditorConfig);
|
|
12
10
|
createElement(): void;
|
|
13
|
-
bindSuccessCallback(success: Function): void;
|
|
14
11
|
}
|
package/cjs/date-input-editor.js
CHANGED
|
@@ -16,9 +16,6 @@ class DateInputEditor extends input_editor_1.InputEditor {
|
|
|
16
16
|
input.style.boxSizing = "border-box", input.style.position = "absolute", this.element = input,
|
|
17
17
|
this.container.appendChild(input);
|
|
18
18
|
}
|
|
19
|
-
bindSuccessCallback(success) {
|
|
20
|
-
this.successCallback = success;
|
|
21
|
-
}
|
|
22
19
|
}
|
|
23
20
|
|
|
24
21
|
exports.DateInputEditor = DateInputEditor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAO7C,MAAa,eAAgB,SAAQ,0BAAW;
|
|
1
|
+
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAO7C,MAAa,eAAgB,SAAQ,0BAAW;IAE9C,YAAY,YAAoC;QAC9C,KAAK,CAAC,YAAY,CAAC,CAAC;QAFtB,eAAU,GAAW,WAAW,CAAC;QAG/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,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,QAAQ,GAAG,UAAU,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAMpC,CAAC;CACF;AAvBD,0CAuBC","file":"date-input-editor.js","sourcesContent":["import { InputEditor } from './input-editor';\nimport type { IEditor } from './types';\nexport interface DateInputEditorConfig {\n max?: number;\n min?: number;\n}\n\nexport class DateInputEditor extends InputEditor implements IEditor {\n editorType: string = 'DateInput';\n constructor(editorConfig?: DateInputEditorConfig) {\n super(editorConfig);\n this.editorConfig = editorConfig;\n }\n createElement() {\n const input = document.createElement('input');\n\n input.setAttribute('type', 'date');\n\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.position = 'absolute';\n this.element = input;\n this.container.appendChild(input);\n // 测试successCallback 调用是否正确\n // input.ondblclick = () => {\n // debugger;\n // this.successCallback();\n // };\n }\n}\n"]}
|
package/cjs/input-editor.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { EditContext, IEditor, RectProps } from './types';
|
|
2
2
|
export interface InputEditorConfig {
|
|
3
3
|
max?: number;
|
|
4
4
|
min?: number;
|
|
@@ -7,17 +7,15 @@ export declare class InputEditor implements IEditor {
|
|
|
7
7
|
editorType: string;
|
|
8
8
|
editorConfig: InputEditorConfig;
|
|
9
9
|
container: HTMLElement;
|
|
10
|
-
|
|
10
|
+
successCallback?: () => void;
|
|
11
|
+
element?: HTMLInputElement;
|
|
11
12
|
constructor(editorConfig?: InputEditorConfig);
|
|
12
13
|
createElement(): void;
|
|
13
14
|
setValue(value: string): void;
|
|
14
15
|
getValue(): string;
|
|
15
|
-
|
|
16
|
-
rect: RectProps;
|
|
17
|
-
placement?: Placement;
|
|
18
|
-
}, value?: string): void;
|
|
16
|
+
onStart({ value, referencePosition, container, endEdit }: EditContext<string>): void;
|
|
19
17
|
adjustPosition(rect: RectProps): void;
|
|
20
18
|
endEditing(): void;
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
onEnd(): void;
|
|
20
|
+
isEditorElement(target: HTMLElement): boolean;
|
|
23
21
|
}
|
package/cjs/input-editor.js
CHANGED
|
@@ -20,9 +20,9 @@ class InputEditor {
|
|
|
20
20
|
getValue() {
|
|
21
21
|
return this.element.value;
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
this.container = container, this.
|
|
25
|
-
(null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
23
|
+
onStart({value: value, referencePosition: referencePosition, container: container, endEdit: endEdit}) {
|
|
24
|
+
this.container = container, this.successCallback = endEdit, this.createElement(),
|
|
25
|
+
value && this.setValue(value), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
26
26
|
this.element.focus();
|
|
27
27
|
}
|
|
28
28
|
adjustPosition(rect) {
|
|
@@ -30,10 +30,10 @@ class InputEditor {
|
|
|
30
30
|
this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
|
|
31
31
|
}
|
|
32
32
|
endEditing() {}
|
|
33
|
-
|
|
33
|
+
onEnd() {
|
|
34
34
|
this.container.removeChild(this.element);
|
|
35
35
|
}
|
|
36
|
-
|
|
36
|
+
isEditorElement(target) {
|
|
37
37
|
return target === this.element;
|
|
38
38
|
}
|
|
39
39
|
}
|
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":";;;AAOA,MAAa,WAAW;IAOtB,YAAY,YAAgC;QAN5C,eAAU,GAAW,OAAO,CAAC;QAO3B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACnC,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,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,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;IAED,OAAO,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,EAAuB;QAC3E,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAE/B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACtB;QACD,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;IAEvB,CAAC;IAED,cAAc,CAAC,IAAe;QAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACjD,CAAC;IAED,UAAU;IAEV,CAAC;IAED,KAAK;QAEH,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe,CAAC,MAAmB;QACjC,OAAO,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;CACF;AAlED,kCAkEC","file":"input-editor.js","sourcesContent":["import type { EditContext, IEditor, Placement, RectProps } from './types';\n\nexport interface InputEditorConfig {\n max?: number;\n min?: number;\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 input.style.position = 'absolute';\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n this.element = input;\n\n this.container.appendChild(input);\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 console.log('input', 'beginEditing---- ');\n this.container = container;\n this.successCallback = endEdit;\n\n this.createElement();\n if (value) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\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 this.container.removeChild(this.element);\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/cjs/list-editor.d.ts
CHANGED
|
@@ -1,26 +1,22 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { EditContext, IEditor, RectProps } from './types';
|
|
2
2
|
export interface ListEditorConfig {
|
|
3
3
|
values: string[];
|
|
4
4
|
}
|
|
5
5
|
export declare class ListEditor implements IEditor {
|
|
6
6
|
editorType: string;
|
|
7
|
-
input
|
|
8
|
-
editorConfig
|
|
9
|
-
container
|
|
10
|
-
element
|
|
11
|
-
successCallback
|
|
7
|
+
input?: HTMLInputElement;
|
|
8
|
+
editorConfig?: ListEditorConfig;
|
|
9
|
+
container?: HTMLElement;
|
|
10
|
+
element?: HTMLSelectElement;
|
|
11
|
+
successCallback?: () => void;
|
|
12
12
|
constructor(editorConfig: ListEditorConfig);
|
|
13
13
|
createElement(value: string): void;
|
|
14
14
|
_bindSelectChangeEvent(): void;
|
|
15
15
|
setValue(value: string): void;
|
|
16
16
|
getValue(): string;
|
|
17
|
-
|
|
18
|
-
rect: RectProps;
|
|
19
|
-
placement?: Placement;
|
|
20
|
-
}, value?: string): void;
|
|
17
|
+
onStart({ container, value, referencePosition, endEdit }: EditContext): void;
|
|
21
18
|
adjustPosition(rect: RectProps): void;
|
|
22
19
|
endEditing(): void;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
bindSuccessCallback(success: Function): void;
|
|
20
|
+
onEnd(): void;
|
|
21
|
+
isEditorElement(target: HTMLElement): boolean;
|
|
26
22
|
}
|
package/cjs/list-editor.js
CHANGED
|
@@ -25,9 +25,9 @@ class ListEditor {
|
|
|
25
25
|
getValue() {
|
|
26
26
|
return this.element.value;
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
this.container = container, this.
|
|
30
|
-
(null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
28
|
+
onStart({container: container, value: value, referencePosition: referencePosition, endEdit: endEdit}) {
|
|
29
|
+
this.container = container, this.successCallback = endEdit, this.createElement(value),
|
|
30
|
+
value && this.setValue(value), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
31
31
|
this.element.focus();
|
|
32
32
|
}
|
|
33
33
|
adjustPosition(rect) {
|
|
@@ -35,15 +35,12 @@ class ListEditor {
|
|
|
35
35
|
this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
|
|
36
36
|
}
|
|
37
37
|
endEditing() {}
|
|
38
|
-
|
|
38
|
+
onEnd() {
|
|
39
39
|
this.container.removeChild(this.element);
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
isEditorElement(target) {
|
|
42
42
|
return target === this.element;
|
|
43
43
|
}
|
|
44
|
-
bindSuccessCallback(success) {
|
|
45
|
-
this.successCallback = success;
|
|
46
|
-
}
|
|
47
44
|
}
|
|
48
45
|
|
|
49
46
|
exports.ListEditor = ListEditor;
|
package/cjs/list-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":";;;AAKA,MAAa,UAAU;IAQrB,YAAY,YAA8B;QAP1C,eAAU,GAAW,OAAO,CAAC;QAQ3B,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,aAAa,CAAC,KAAa;QAEzB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACnC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC5B,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAEtC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAGtB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QACrC,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACpB,MAAM;gBACJ,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,iBAAiB,IAAI,KAAK,IAAI,WAAW,CAAC;QACnH,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QAE7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ,CAAC,KAAa;IAEtB,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IAED,
|
|
1
|
+
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":";;;AAKA,MAAa,UAAU;IAQrB,YAAY,YAA8B;QAP1C,eAAU,GAAW,OAAO,CAAC;QAQ3B,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,aAAa,CAAC,KAAa;QAEzB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACnC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC5B,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAEtC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAGtB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QACrC,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACpB,MAAM;gBACJ,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,iBAAiB,IAAI,KAAK,IAAI,WAAW,CAAC;QACnH,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QAE7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ,CAAC,KAAa;IAEtB,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAe;QACnE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAE/B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACtB;QACD,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;IAED,cAAc,CAAC,IAAe;QAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACjD,CAAC;IAED,UAAU;IAEV,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe,CAAC,MAAmB;QACjC,OAAO,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;CACF;AApFD,gCAoFC","file":"list-editor.js","sourcesContent":["import type { EditContext, IEditor, Placement, RectProps } from './types';\nexport interface ListEditorConfig {\n values: string[];\n}\n\nexport class ListEditor implements IEditor {\n editorType: string = 'Input';\n input?: HTMLInputElement;\n editorConfig?: ListEditorConfig;\n container?: HTMLElement;\n element?: HTMLSelectElement;\n successCallback?: () => void;\n\n constructor(editorConfig: ListEditorConfig) {\n console.log('listEditor constructor');\n this.editorConfig = editorConfig;\n }\n\n createElement(value: string) {\n // create select tag\n const select = document.createElement('select');\n select.setAttribute('type', 'text');\n select.style.position = 'absolute';\n select.style.padding = '4px';\n select.style.width = '100%';\n select.style.boxSizing = 'border-box';\n\n this.element = select;\n\n // create option tags\n const { values } = this.editorConfig;\n let opsStr = '';\n values.forEach(item => {\n opsStr +=\n item === value ? `<option value=${item} selected>${item}</option>` : `<option value=${item} >${item}</option>`;\n });\n select.innerHTML = opsStr;\n\n this.container.appendChild(select);\n // this._bindSelectChangeEvent();\n }\n\n _bindSelectChangeEvent() {\n this.element.addEventListener('change', () => {\n // this.successCallback();\n });\n }\n\n setValue(value: string) {\n // do nothing\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ container, value, referencePosition, endEdit }: EditContext) {\n this.container = container;\n this.successCallback = endEdit;\n\n this.createElement(value);\n\n if (value) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n this.element.focus();\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 this.container.removeChild(this.element);\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/cjs/types.d.ts
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
export interface IEditor {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface IEditor<V = any> {
|
|
2
|
+
onStart?: (context: EditContext<V>) => void;
|
|
3
|
+
onEnd?: () => void;
|
|
4
|
+
isEditorElement?: (target: HTMLElement) => boolean;
|
|
5
|
+
getValue: () => V;
|
|
6
|
+
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
7
|
+
exit?: () => void;
|
|
8
|
+
targetIsOnEditor?: (target: HTMLElement) => boolean;
|
|
9
|
+
bindSuccessCallback?: (callback: () => void) => void;
|
|
10
|
+
}
|
|
11
|
+
export interface EditContext<V = any> {
|
|
4
12
|
container: HTMLElement;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
rect: RectProps;
|
|
9
|
-
placement?: Placement;
|
|
10
|
-
}, value?: string) => void;
|
|
11
|
-
exit: () => void;
|
|
12
|
-
targetIsOnEditor: (target: HTMLElement) => boolean;
|
|
13
|
-
bindSuccessCallback?: (callback: Function) => void;
|
|
13
|
+
referencePosition: ReferencePosition;
|
|
14
|
+
value: V;
|
|
15
|
+
endEdit: () => void;
|
|
14
16
|
}
|
|
15
17
|
export interface RectProps {
|
|
16
18
|
left: number;
|
|
@@ -24,3 +26,7 @@ export declare enum Placement {
|
|
|
24
26
|
left = "left",
|
|
25
27
|
right = "right"
|
|
26
28
|
}
|
|
29
|
+
export interface ReferencePosition {
|
|
30
|
+
rect: RectProps;
|
|
31
|
+
placement?: Placement;
|
|
32
|
+
}
|
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":";;;AAqFA,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","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 * 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}\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"]}
|
package/dist/vtable-editors.js
CHANGED
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
editorType = 'Input';
|
|
9
9
|
editorConfig;
|
|
10
10
|
container;
|
|
11
|
+
successCallback;
|
|
12
|
+
element;
|
|
11
13
|
constructor(editorConfig) {
|
|
12
14
|
this.editorConfig = editorConfig;
|
|
13
15
|
}
|
|
@@ -27,8 +29,9 @@
|
|
|
27
29
|
getValue() {
|
|
28
30
|
return this.element.value;
|
|
29
31
|
}
|
|
30
|
-
|
|
32
|
+
onStart({ value, referencePosition, container, endEdit }) {
|
|
31
33
|
this.container = container;
|
|
34
|
+
this.successCallback = endEdit;
|
|
32
35
|
this.createElement();
|
|
33
36
|
if (value) {
|
|
34
37
|
this.setValue(value);
|
|
@@ -46,20 +49,16 @@
|
|
|
46
49
|
}
|
|
47
50
|
endEditing() {
|
|
48
51
|
}
|
|
49
|
-
|
|
52
|
+
onEnd() {
|
|
50
53
|
this.container.removeChild(this.element);
|
|
51
54
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return true;
|
|
55
|
-
}
|
|
56
|
-
return false;
|
|
55
|
+
isEditorElement(target) {
|
|
56
|
+
return target === this.element;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
class DateInputEditor extends InputEditor {
|
|
61
61
|
editorType = 'DateInput';
|
|
62
|
-
successCallback;
|
|
63
62
|
constructor(editorConfig) {
|
|
64
63
|
super(editorConfig);
|
|
65
64
|
this.editorConfig = editorConfig;
|
|
@@ -74,9 +73,6 @@
|
|
|
74
73
|
this.element = input;
|
|
75
74
|
this.container.appendChild(input);
|
|
76
75
|
}
|
|
77
|
-
bindSuccessCallback(success) {
|
|
78
|
-
this.successCallback = success;
|
|
79
|
-
}
|
|
80
76
|
}
|
|
81
77
|
|
|
82
78
|
class ListEditor {
|
|
@@ -115,8 +111,9 @@
|
|
|
115
111
|
getValue() {
|
|
116
112
|
return this.element.value;
|
|
117
113
|
}
|
|
118
|
-
|
|
114
|
+
onStart({ container, value, referencePosition, endEdit }) {
|
|
119
115
|
this.container = container;
|
|
116
|
+
this.successCallback = endEdit;
|
|
120
117
|
this.createElement(value);
|
|
121
118
|
if (value) {
|
|
122
119
|
this.setValue(value);
|
|
@@ -134,17 +131,11 @@
|
|
|
134
131
|
}
|
|
135
132
|
endEditing() {
|
|
136
133
|
}
|
|
137
|
-
|
|
134
|
+
onEnd() {
|
|
138
135
|
this.container.removeChild(this.element);
|
|
139
136
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
return true;
|
|
143
|
-
}
|
|
144
|
-
return false;
|
|
145
|
-
}
|
|
146
|
-
bindSuccessCallback(success) {
|
|
147
|
-
this.successCallback = success;
|
|
137
|
+
isEditorElement(target) {
|
|
138
|
+
return target === this.element;
|
|
148
139
|
}
|
|
149
140
|
}
|
|
150
141
|
|
|
@@ -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;constructor(e){this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","text"),e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",this.element=e,this.container.appendChild(e)}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}
|
|
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;constructor(e){this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","text"),e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",this.element=e,this.container.appendChild(e)}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.createElement(),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)}isEditorElement(e){return e===this.element}}var i;e.Placement=void 0,(i=e.Placement||(e.Placement={})).top="top",i.bottom="bottom",i.left="left",i.right="right",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",this.element=e,this.container.appendChild(e)}},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",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),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}}}));
|
|
@@ -6,9 +6,6 @@ export interface DateInputEditorConfig {
|
|
|
6
6
|
}
|
|
7
7
|
export declare class DateInputEditor extends InputEditor implements IEditor {
|
|
8
8
|
editorType: string;
|
|
9
|
-
element: HTMLInputElement;
|
|
10
|
-
successCallback: Function;
|
|
11
9
|
constructor(editorConfig?: DateInputEditorConfig);
|
|
12
10
|
createElement(): void;
|
|
13
|
-
bindSuccessCallback(success: Function): void;
|
|
14
11
|
}
|
package/es/date-input-editor.js
CHANGED
|
@@ -10,8 +10,5 @@ export class DateInputEditor extends InputEditor {
|
|
|
10
10
|
input.style.boxSizing = "border-box", input.style.position = "absolute", this.element = input,
|
|
11
11
|
this.container.appendChild(input);
|
|
12
12
|
}
|
|
13
|
-
bindSuccessCallback(success) {
|
|
14
|
-
this.successCallback = success;
|
|
15
|
-
}
|
|
16
13
|
}
|
|
17
14
|
//# sourceMappingURL=date-input-editor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,OAAO,eAAgB,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAE9C,YAAY,YAAoC;QAC9C,KAAK,CAAC,YAAY,CAAC,CAAC;QAFtB,eAAU,GAAW,WAAW,CAAC;QAG/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,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,QAAQ,GAAG,UAAU,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAMpC,CAAC;CACF","file":"date-input-editor.js","sourcesContent":["import { InputEditor } from './input-editor';\nimport type { IEditor } from './types';\nexport interface DateInputEditorConfig {\n max?: number;\n min?: number;\n}\n\nexport class DateInputEditor extends InputEditor implements IEditor {\n editorType: string = 'DateInput';\n constructor(editorConfig?: DateInputEditorConfig) {\n super(editorConfig);\n this.editorConfig = editorConfig;\n }\n createElement() {\n const input = document.createElement('input');\n\n input.setAttribute('type', 'date');\n\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.position = 'absolute';\n this.element = input;\n this.container.appendChild(input);\n // 测试successCallback 调用是否正确\n // input.ondblclick = () => {\n // debugger;\n // this.successCallback();\n // };\n }\n}\n"]}
|
package/es/input-editor.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { EditContext, IEditor, RectProps } from './types';
|
|
2
2
|
export interface InputEditorConfig {
|
|
3
3
|
max?: number;
|
|
4
4
|
min?: number;
|
|
@@ -7,17 +7,15 @@ export declare class InputEditor implements IEditor {
|
|
|
7
7
|
editorType: string;
|
|
8
8
|
editorConfig: InputEditorConfig;
|
|
9
9
|
container: HTMLElement;
|
|
10
|
-
|
|
10
|
+
successCallback?: () => void;
|
|
11
|
+
element?: HTMLInputElement;
|
|
11
12
|
constructor(editorConfig?: InputEditorConfig);
|
|
12
13
|
createElement(): void;
|
|
13
14
|
setValue(value: string): void;
|
|
14
15
|
getValue(): string;
|
|
15
|
-
|
|
16
|
-
rect: RectProps;
|
|
17
|
-
placement?: Placement;
|
|
18
|
-
}, value?: string): void;
|
|
16
|
+
onStart({ value, referencePosition, container, endEdit }: EditContext<string>): void;
|
|
19
17
|
adjustPosition(rect: RectProps): void;
|
|
20
18
|
endEditing(): void;
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
onEnd(): void;
|
|
20
|
+
isEditorElement(target: HTMLElement): boolean;
|
|
23
21
|
}
|
package/es/input-editor.js
CHANGED
|
@@ -14,9 +14,9 @@ export class InputEditor {
|
|
|
14
14
|
getValue() {
|
|
15
15
|
return this.element.value;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
this.container = container, this.
|
|
19
|
-
(null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
17
|
+
onStart({value: value, referencePosition: referencePosition, container: container, endEdit: endEdit}) {
|
|
18
|
+
this.container = container, this.successCallback = endEdit, this.createElement(),
|
|
19
|
+
value && this.setValue(value), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
20
20
|
this.element.focus();
|
|
21
21
|
}
|
|
22
22
|
adjustPosition(rect) {
|
|
@@ -24,10 +24,10 @@ export class InputEditor {
|
|
|
24
24
|
this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
|
|
25
25
|
}
|
|
26
26
|
endEditing() {}
|
|
27
|
-
|
|
27
|
+
onEnd() {
|
|
28
28
|
this.container.removeChild(this.element);
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
isEditorElement(target) {
|
|
31
31
|
return target === this.element;
|
|
32
32
|
}
|
|
33
33
|
}
|
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":"AAOA,MAAM,OAAO,WAAW;IAOtB,YAAY,YAAgC;QAN5C,eAAU,GAAW,OAAO,CAAC;QAO3B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACnC,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,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,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;IAED,OAAO,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,EAAuB;QAC3E,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAE/B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACtB;QACD,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;IAEvB,CAAC;IAED,cAAc,CAAC,IAAe;QAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACjD,CAAC;IAED,UAAU;IAEV,CAAC;IAED,KAAK;QAEH,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe,CAAC,MAAmB;QACjC,OAAO,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;CACF","file":"input-editor.js","sourcesContent":["import type { EditContext, IEditor, Placement, RectProps } from './types';\n\nexport interface InputEditorConfig {\n max?: number;\n min?: number;\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 input.style.position = 'absolute';\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n this.element = input;\n\n this.container.appendChild(input);\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 console.log('input', 'beginEditing---- ');\n this.container = container;\n this.successCallback = endEdit;\n\n this.createElement();\n if (value) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\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 this.container.removeChild(this.element);\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/es/list-editor.d.ts
CHANGED
|
@@ -1,26 +1,22 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { EditContext, IEditor, RectProps } from './types';
|
|
2
2
|
export interface ListEditorConfig {
|
|
3
3
|
values: string[];
|
|
4
4
|
}
|
|
5
5
|
export declare class ListEditor implements IEditor {
|
|
6
6
|
editorType: string;
|
|
7
|
-
input
|
|
8
|
-
editorConfig
|
|
9
|
-
container
|
|
10
|
-
element
|
|
11
|
-
successCallback
|
|
7
|
+
input?: HTMLInputElement;
|
|
8
|
+
editorConfig?: ListEditorConfig;
|
|
9
|
+
container?: HTMLElement;
|
|
10
|
+
element?: HTMLSelectElement;
|
|
11
|
+
successCallback?: () => void;
|
|
12
12
|
constructor(editorConfig: ListEditorConfig);
|
|
13
13
|
createElement(value: string): void;
|
|
14
14
|
_bindSelectChangeEvent(): void;
|
|
15
15
|
setValue(value: string): void;
|
|
16
16
|
getValue(): string;
|
|
17
|
-
|
|
18
|
-
rect: RectProps;
|
|
19
|
-
placement?: Placement;
|
|
20
|
-
}, value?: string): void;
|
|
17
|
+
onStart({ container, value, referencePosition, endEdit }: EditContext): void;
|
|
21
18
|
adjustPosition(rect: RectProps): void;
|
|
22
19
|
endEditing(): void;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
bindSuccessCallback(success: Function): void;
|
|
20
|
+
onEnd(): void;
|
|
21
|
+
isEditorElement(target: HTMLElement): boolean;
|
|
26
22
|
}
|
package/es/list-editor.js
CHANGED
|
@@ -19,9 +19,9 @@ export class ListEditor {
|
|
|
19
19
|
getValue() {
|
|
20
20
|
return this.element.value;
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
this.container = container, this.
|
|
24
|
-
(null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
22
|
+
onStart({container: container, value: value, referencePosition: referencePosition, endEdit: endEdit}) {
|
|
23
|
+
this.container = container, this.successCallback = endEdit, this.createElement(value),
|
|
24
|
+
value && this.setValue(value), (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect),
|
|
25
25
|
this.element.focus();
|
|
26
26
|
}
|
|
27
27
|
adjustPosition(rect) {
|
|
@@ -29,14 +29,11 @@ export class ListEditor {
|
|
|
29
29
|
this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
|
|
30
30
|
}
|
|
31
31
|
endEditing() {}
|
|
32
|
-
|
|
32
|
+
onEnd() {
|
|
33
33
|
this.container.removeChild(this.element);
|
|
34
34
|
}
|
|
35
|
-
|
|
35
|
+
isEditorElement(target) {
|
|
36
36
|
return target === this.element;
|
|
37
37
|
}
|
|
38
|
-
bindSuccessCallback(success) {
|
|
39
|
-
this.successCallback = success;
|
|
40
|
-
}
|
|
41
38
|
}
|
|
42
39
|
//# sourceMappingURL=list-editor.js.map
|
package/es/list-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"AAKA,MAAM,OAAO,UAAU;IAQrB,YAAY,YAA8B;QAP1C,eAAU,GAAW,OAAO,CAAC;QAQ3B,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,aAAa,CAAC,KAAa;QAEzB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACnC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC5B,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAEtC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAGtB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QACrC,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACpB,MAAM;gBACJ,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,iBAAiB,IAAI,KAAK,IAAI,WAAW,CAAC;QACnH,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QAE7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ,CAAC,KAAa;IAEtB,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IAED,
|
|
1
|
+
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"AAKA,MAAM,OAAO,UAAU;IAQrB,YAAY,YAA8B;QAP1C,eAAU,GAAW,OAAO,CAAC;QAQ3B,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,aAAa,CAAC,KAAa;QAEzB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACnC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC5B,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAEtC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAGtB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QACrC,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACpB,MAAM;gBACJ,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,iBAAiB,IAAI,KAAK,IAAI,WAAW,CAAC;QACnH,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QAE7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ,CAAC,KAAa;IAEtB,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAe;QACnE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAE/B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACtB;QACD,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;IAED,cAAc,CAAC,IAAe;QAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACjD,CAAC;IAED,UAAU;IAEV,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe,CAAC,MAAmB;QACjC,OAAO,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;CACF","file":"list-editor.js","sourcesContent":["import type { EditContext, IEditor, Placement, RectProps } from './types';\nexport interface ListEditorConfig {\n values: string[];\n}\n\nexport class ListEditor implements IEditor {\n editorType: string = 'Input';\n input?: HTMLInputElement;\n editorConfig?: ListEditorConfig;\n container?: HTMLElement;\n element?: HTMLSelectElement;\n successCallback?: () => void;\n\n constructor(editorConfig: ListEditorConfig) {\n console.log('listEditor constructor');\n this.editorConfig = editorConfig;\n }\n\n createElement(value: string) {\n // create select tag\n const select = document.createElement('select');\n select.setAttribute('type', 'text');\n select.style.position = 'absolute';\n select.style.padding = '4px';\n select.style.width = '100%';\n select.style.boxSizing = 'border-box';\n\n this.element = select;\n\n // create option tags\n const { values } = this.editorConfig;\n let opsStr = '';\n values.forEach(item => {\n opsStr +=\n item === value ? `<option value=${item} selected>${item}</option>` : `<option value=${item} >${item}</option>`;\n });\n select.innerHTML = opsStr;\n\n this.container.appendChild(select);\n // this._bindSelectChangeEvent();\n }\n\n _bindSelectChangeEvent() {\n this.element.addEventListener('change', () => {\n // this.successCallback();\n });\n }\n\n setValue(value: string) {\n // do nothing\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ container, value, referencePosition, endEdit }: EditContext) {\n this.container = container;\n this.successCallback = endEdit;\n\n this.createElement(value);\n\n if (value) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n this.element.focus();\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 this.container.removeChild(this.element);\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/es/types.d.ts
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
export interface IEditor {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface IEditor<V = any> {
|
|
2
|
+
onStart?: (context: EditContext<V>) => void;
|
|
3
|
+
onEnd?: () => void;
|
|
4
|
+
isEditorElement?: (target: HTMLElement) => boolean;
|
|
5
|
+
getValue: () => V;
|
|
6
|
+
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
7
|
+
exit?: () => void;
|
|
8
|
+
targetIsOnEditor?: (target: HTMLElement) => boolean;
|
|
9
|
+
bindSuccessCallback?: (callback: () => void) => void;
|
|
10
|
+
}
|
|
11
|
+
export interface EditContext<V = any> {
|
|
4
12
|
container: HTMLElement;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
rect: RectProps;
|
|
9
|
-
placement?: Placement;
|
|
10
|
-
}, value?: string) => void;
|
|
11
|
-
exit: () => void;
|
|
12
|
-
targetIsOnEditor: (target: HTMLElement) => boolean;
|
|
13
|
-
bindSuccessCallback?: (callback: Function) => void;
|
|
13
|
+
referencePosition: ReferencePosition;
|
|
14
|
+
value: V;
|
|
15
|
+
endEdit: () => void;
|
|
14
16
|
}
|
|
15
17
|
export interface RectProps {
|
|
16
18
|
left: number;
|
|
@@ -24,3 +26,7 @@ export declare enum Placement {
|
|
|
24
26
|
left = "left",
|
|
25
27
|
right = "right"
|
|
26
28
|
}
|
|
29
|
+
export interface ReferencePosition {
|
|
30
|
+
rect: RectProps;
|
|
31
|
+
placement?: Placement;
|
|
32
|
+
}
|
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":"AAqFA,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","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 * 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}\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"]}
|