@visactor/vtable-editors 0.23.0-alpha.0 → 0.23.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/input-editor.js +3 -3
- package/cjs/input-editor.js.map +1 -1
- package/cjs/types.d.ts +3 -2
- package/cjs/types.js.map +1 -1
- package/dist/vtable-editors.js +9 -6
- package/dist/vtable-editors.min.js +1 -1
- package/es/input-editor.js +3 -3
- package/es/input-editor.js.map +1 -1
- package/es/types.d.ts +3 -2
- package/es/types.js.map +1 -1
- package/package.json +3 -3
package/cjs/input-editor.js
CHANGED
|
@@ -21,8 +21,8 @@ class InputEditor {
|
|
|
21
21
|
return this.element.value;
|
|
22
22
|
}
|
|
23
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),
|
|
24
|
+
this.container = container, this.successCallback = endEdit, this.element || (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) {
|
|
@@ -31,7 +31,7 @@ class InputEditor {
|
|
|
31
31
|
}
|
|
32
32
|
endEditing() {}
|
|
33
33
|
onEnd() {
|
|
34
|
-
this.container.removeChild(this.element);
|
|
34
|
+
this.container.removeChild(this.element), this.element = void 0;
|
|
35
35
|
}
|
|
36
36
|
isEditorElement(target) {
|
|
37
37
|
return target === this.element;
|
package/cjs/input-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":";;;AAOA,MAAa,WAAW;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,
|
|
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,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACtB;YACD,IAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE;gBAC3B,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;aAC7C;SACF;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;QACzC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAED,eAAe,CAAC,MAAmB;QACjC,OAAO,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;CACF;AApED,kCAoEC","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 this.container = container;\n this.successCallback = endEdit;\n if (!this.element) {\n this.createElement();\n\n if (value) {\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 this.container.removeChild(this.element);\n this.element = undefined;\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/cjs/types.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export interface IEditor<V = any> {
|
|
2
|
-
onStart
|
|
3
|
-
onEnd
|
|
2
|
+
onStart: (context: EditContext<V>) => void;
|
|
3
|
+
onEnd: () => void;
|
|
4
4
|
isEditorElement?: (target: HTMLElement) => boolean;
|
|
5
|
+
validateValue?: () => boolean;
|
|
5
6
|
getValue: () => V;
|
|
6
7
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
7
8
|
exit?: () => void;
|
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":";;;AA4FA,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 * 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 */\n validateValue?: () => 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 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"]}
|
package/dist/vtable-editors.js
CHANGED
|
@@ -32,12 +32,14 @@
|
|
|
32
32
|
onStart({ value, referencePosition, container, endEdit }) {
|
|
33
33
|
this.container = container;
|
|
34
34
|
this.successCallback = endEdit;
|
|
35
|
-
this.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
if (!this.element) {
|
|
36
|
+
this.createElement();
|
|
37
|
+
if (value) {
|
|
38
|
+
this.setValue(value);
|
|
39
|
+
}
|
|
40
|
+
if (referencePosition?.rect) {
|
|
41
|
+
this.adjustPosition(referencePosition.rect);
|
|
42
|
+
}
|
|
41
43
|
}
|
|
42
44
|
this.element.focus();
|
|
43
45
|
}
|
|
@@ -51,6 +53,7 @@
|
|
|
51
53
|
}
|
|
52
54
|
onEnd() {
|
|
53
55
|
this.container.removeChild(this.element);
|
|
56
|
+
this.element = undefined;
|
|
54
57
|
}
|
|
55
58
|
isEditorElement(target) {
|
|
56
59
|
return target === this.element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).VTable=e.VTable||{},e.VTable.editors={}))}(this,(function(e){"use strict";class t{editorType="Input";editorConfig;container;successCallback;element;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}}}));
|
|
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.element||(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),this.element=void 0}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}}}));
|
package/es/input-editor.js
CHANGED
|
@@ -15,8 +15,8 @@ export class InputEditor {
|
|
|
15
15
|
return this.element.value;
|
|
16
16
|
}
|
|
17
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),
|
|
18
|
+
this.container = container, this.successCallback = endEdit, this.element || (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) {
|
|
@@ -25,7 +25,7 @@ export class InputEditor {
|
|
|
25
25
|
}
|
|
26
26
|
endEditing() {}
|
|
27
27
|
onEnd() {
|
|
28
|
-
this.container.removeChild(this.element);
|
|
28
|
+
this.container.removeChild(this.element), this.element = void 0;
|
|
29
29
|
}
|
|
30
30
|
isEditorElement(target) {
|
|
31
31
|
return target === this.element;
|
package/es/input-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"AAOA,MAAM,OAAO,WAAW;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,
|
|
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,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACtB;YACD,IAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE;gBAC3B,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;aAC7C;SACF;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;QACzC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,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 this.container = container;\n this.successCallback = endEdit;\n if (!this.element) {\n this.createElement();\n\n if (value) {\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 this.container.removeChild(this.element);\n this.element = undefined;\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/es/types.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export interface IEditor<V = any> {
|
|
2
|
-
onStart
|
|
3
|
-
onEnd
|
|
2
|
+
onStart: (context: EditContext<V>) => void;
|
|
3
|
+
onEnd: () => void;
|
|
4
4
|
isEditorElement?: (target: HTMLElement) => boolean;
|
|
5
|
+
validateValue?: () => boolean;
|
|
5
6
|
getValue: () => V;
|
|
6
7
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
7
8
|
exit?: () => void;
|
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":"AA4FA,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 * 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 */\n validateValue?: () => 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 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vtable-editors",
|
|
3
|
-
"version": "0.23.0
|
|
3
|
+
"version": "0.23.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"tslib": "2.3.1",
|
|
40
40
|
"tslint": "5.12.1",
|
|
41
41
|
"@internal/bundler": "0.0.1",
|
|
42
|
-
"@internal/
|
|
43
|
-
"@internal/
|
|
42
|
+
"@internal/eslint-config": "0.0.1",
|
|
43
|
+
"@internal/ts-config": "0.0.1"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|