@visactor/vtable-editors 1.10.1 → 1.10.2
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/list-editor.js +1 -1
- package/cjs/list-editor.js.map +1 -1
- package/cjs/types.d.ts +1 -1
- package/cjs/types.js.map +1 -1
- package/dist/vtable-editors.js +3 -1
- package/dist/vtable-editors.min.js +1 -1
- package/es/list-editor.js +1 -1
- package/es/list-editor.js.map +1 -1
- package/es/types.d.ts +1 -1
- package/es/types.js.map +1 -1
- package/package.json +3 -3
package/cjs/list-editor.js
CHANGED
|
@@ -16,7 +16,7 @@ class ListEditor {
|
|
|
16
16
|
const {values: values} = this.editorConfig;
|
|
17
17
|
let opsStr = "";
|
|
18
18
|
values.forEach((item => {
|
|
19
|
-
opsStr += item === value ? `<option value
|
|
19
|
+
opsStr += item === value ? `<option value="${item}" selected>${item}</option>` : `<option value="${item}" >${item}</option>`;
|
|
20
20
|
})), select.innerHTML = opsStr, this.container.appendChild(select);
|
|
21
21
|
}
|
|
22
22
|
_bindSelectChangeEvent() {
|
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;QACtC,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QACzC,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,
|
|
1
|
+
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"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","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 select.style.backgroundColor = '#FFFFFF';\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\n ? `<option value=\"${item}\" selected>${item}</option>`\n : `<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 !== undefined && value !== null) {\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
|
@@ -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?: () => boolean | Promise<boolean>;
|
|
5
|
+
validateValue?: (newValue?: V, oldValue?: V) => boolean | Promise<boolean>;
|
|
6
6
|
getValue: () => V;
|
|
7
7
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
8
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":";;;AA8FA,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 * @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 /**\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
|
@@ -118,7 +118,9 @@
|
|
|
118
118
|
let opsStr = '';
|
|
119
119
|
values.forEach(item => {
|
|
120
120
|
opsStr +=
|
|
121
|
-
item === value
|
|
121
|
+
item === value
|
|
122
|
+
? `<option value="${item}" selected>${item}</option>`
|
|
123
|
+
: `<option value="${item}" >${item}</option>`;
|
|
122
124
|
});
|
|
123
125
|
select.innerHTML = opsStr;
|
|
124
126
|
this.container.appendChild(select);
|
|
@@ -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"),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}}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",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=t,e.ListEditor=class{editorType="Input";input;editorConfig;container;element;successCallback;constructor(e){this.editorConfig=e}createElement(e){const t=document.createElement("select");t.setAttribute("type","text"),t.style.position="absolute",t.style.padding="4px",t.style.width="100%",t.style.boxSizing="border-box",t.style.backgroundColor="#FFFFFF",this.element=t;const{values:i}=this.editorConfig;let n="";i.forEach((t=>{n+=t===e?`<option 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"),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}}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",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=t,e.ListEditor=class{editorType="Input";input;editorConfig;container;element;successCallback;constructor(e){this.editorConfig=e}createElement(e){const t=document.createElement("select");t.setAttribute("type","text"),t.style.position="absolute",t.style.padding="4px",t.style.width="100%",t.style.boxSizing="border-box",t.style.backgroundColor="#FFFFFF",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/list-editor.js
CHANGED
|
@@ -10,7 +10,7 @@ export class ListEditor {
|
|
|
10
10
|
const {values: values} = this.editorConfig;
|
|
11
11
|
let opsStr = "";
|
|
12
12
|
values.forEach((item => {
|
|
13
|
-
opsStr += item === value ? `<option value
|
|
13
|
+
opsStr += item === value ? `<option value="${item}" selected>${item}</option>` : `<option value="${item}" >${item}</option>`;
|
|
14
14
|
})), select.innerHTML = opsStr, this.container.appendChild(select);
|
|
15
15
|
}
|
|
16
16
|
_bindSelectChangeEvent() {
|
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;QACtC,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QACzC,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,
|
|
1
|
+
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"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","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 select.style.backgroundColor = '#FFFFFF';\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\n ? `<option value=\"${item}\" selected>${item}</option>`\n : `<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 !== undefined && value !== null) {\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
|
@@ -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?: () => boolean | Promise<boolean>;
|
|
5
|
+
validateValue?: (newValue?: V, oldValue?: V) => boolean | Promise<boolean>;
|
|
6
6
|
getValue: () => V;
|
|
7
7
|
beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void;
|
|
8
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":"AA8FA,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 * @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 /**\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": "1.10.
|
|
3
|
+
"version": "1.10.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"ts-node": "10.9.0",
|
|
39
39
|
"tslib": "2.3.1",
|
|
40
40
|
"tslint": "5.12.1",
|
|
41
|
+
"@internal/bundler": "0.0.1",
|
|
41
42
|
"@internal/ts-config": "0.0.1",
|
|
42
|
-
"@internal/eslint-config": "0.0.1"
|
|
43
|
-
"@internal/bundler": "0.0.1"
|
|
43
|
+
"@internal/eslint-config": "0.0.1"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|