@visactor/vtable-editors 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,11 @@
+# @visactor/vtable-editors
+
+## Description
+
+The extension module for vtable.
+
+## Usage
+
+```typescript
+import { xxx } from '@visactor/vtable-editors';
+```

package/cjs/base-editor.d.ts

@@ -0,0 +1 @@
+

package/cjs/base-editor.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/base-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/base-editor.ts"],"names":[],"mappings":"","file":"base-editor.js","sourcesContent":["// import type { InputEditorConfig } from './input-editor';\n// import type { ListEditorConfig } from './list-editor';\n// import type { IEditor, Placement, RectProps } from './types';\n\n// //这个考虑下是否还需要 是直接使用IEditor就行的吗？\n// export class BaseEditor implements IEditor {\n//   editorType: string;\n//   editorConfig: ListEditorConfig | InputEditorConfig;\n//   element: HTMLElement;\n//   container: HTMLElement;\n//   constructor() {\n//     this.editorType = 'base';\n//   }\n//   createElement() {\n//     // do nothing\n//   }\n//   setValue(value: string) {\n//     // do nothing\n//   }\n//   getValue() {\n//     return '';\n//   }\n//   beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) {\n//     // do nothing\n//   }\n//   targetIsOnEditor(target: HTMLElement) {\n//     //\n//     return false;\n//   }\n//   endEditing() {\n//     // do nothing\n//   }\n\n//   exit(): void {\n//     // do nothing\n//   }\n// }\n"]}

package/cjs/date-input-editor.d.ts

@@ -0,0 +1,14 @@
+import { InputEditor } from './input-editor';
+import type { IEditor } from './types';
+export interface DateInputEditorConfig {
+    max?: number;
+    min?: number;
+}
+export declare class DateInputEditor extends InputEditor implements IEditor {
+    editorType: string;
+    element: HTMLInputElement;
+    successCallback: Function;
+    constructor(editorConfig: DateInputEditorConfig);
+    createElement(): void;
+    bindSuccessCallback(success: Function): void;
+}

package/cjs/date-input-editor.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DateInputEditor = void 0;
+
+const input_editor_1 = require("./input-editor");
+
+class DateInputEditor extends input_editor_1.InputEditor {
+    constructor(editorConfig) {
+        super(editorConfig), this.editorType = "DateInput", this.editorConfig = editorConfig;
+    }
+    createElement() {
+        const input = document.createElement("input");
+        input.setAttribute("type", "date"), input.style.padding = "4px", input.style.width = "100%", 
+        input.style.boxSizing = "border-box", input.style.position = "absolute", this.element = input, 
+        this.container.appendChild(input);
+    }
+    bindSuccessCallback(success) {
+        this.successCallback = success;
+    }
+}
+
+exports.DateInputEditor = DateInputEditor;
+//# sourceMappingURL=date-input-editor.js.map

package/cjs/date-input-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAO7C,MAAa,eAAgB,SAAQ,0BAAW;IAI9C,YAAY,YAAmC;QAC7C,KAAK,CAAC,YAAY,CAAC,CAAC;QAJtB,eAAU,GAAW,WAAW,CAAC;QAK/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;IACD,mBAAmB,CAAC,OAAiB;QACnC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IACjC,CAAC;CACF;AA5BD,0CA4BC","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  declare element: HTMLInputElement;\n  successCallback: Function;\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  bindSuccessCallback(success: Function) {\n    this.successCallback = success;\n  }\n}\n"]}

package/cjs/index.d.ts

@@ -0,0 +1,5 @@
+import { InputEditor } from './input-editor';
+import { DateInputEditor } from './date-input-editor';
+import { ListEditor } from './list-editor';
+export { InputEditor, DateInputEditor, ListEditor };
+export * from './types';

package/cjs/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.ListEditor = exports.DateInputEditor = exports.InputEditor = void 0;
+
+const input_editor_1 = require("./input-editor");
+
+Object.defineProperty(exports, "InputEditor", {
+    enumerable: !0,
+    get: function() {
+        return input_editor_1.InputEditor;
+    }
+});
+
+const date_input_editor_1 = require("./date-input-editor");
+
+Object.defineProperty(exports, "DateInputEditor", {
+    enumerable: !0,
+    get: function() {
+        return date_input_editor_1.DateInputEditor;
+    }
+});
+
+const list_editor_1 = require("./list-editor");
+
+Object.defineProperty(exports, "ListEditor", {
+    enumerable: !0,
+    get: function() {
+        return list_editor_1.ListEditor;
+    }
+}), __exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iDAA6C;AAGpC,4FAHA,0BAAW,OAGA;AAFpB,2DAAsD;AAEhC,gGAFb,mCAAe,OAEa;AADrC,+CAA2C;AACJ,2FAD9B,wBAAU,OAC8B;AACjD,0CAAwB","file":"index.js","sourcesContent":["import { InputEditor } from './input-editor';\nimport { DateInputEditor } from './date-input-editor';\nimport { ListEditor } from './list-editor';\nexport { InputEditor, DateInputEditor, ListEditor };\nexport * from './types';\n"]}

package/cjs/input-editor.d.ts

@@ -0,0 +1,23 @@
+import type { IEditor, Placement, RectProps } from './types';
+export interface InputEditorConfig {
+    max?: number;
+    min?: number;
+}
+export declare class InputEditor implements IEditor {
+    editorType: string;
+    editorConfig: InputEditorConfig;
+    container: HTMLElement;
+    element: HTMLInputElement;
+    constructor(editorConfig: InputEditorConfig);
+    createElement(): void;
+    setValue(value: string): void;
+    getValue(): string;
+    beginEditing(container: HTMLElement, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }, value?: string): void;
+    adjustPosition(rect: RectProps): void;
+    endEditing(): void;
+    exit(): void;
+    targetIsOnEditor(target: HTMLElement): boolean;
+}

package/cjs/input-editor.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.InputEditor = void 0;
+
+class InputEditor {
+    constructor(editorConfig) {
+        this.editorType = "Input", this.editorConfig = editorConfig;
+    }
+    createElement() {
+        const input = document.createElement("input");
+        input.setAttribute("type", "text"), input.style.position = "absolute", input.style.padding = "4px", 
+        input.style.width = "100%", input.style.boxSizing = "border-box", this.element = input, 
+        this.container.appendChild(input);
+    }
+    setValue(value) {
+        this.element.value = void 0 !== value ? value : "";
+    }
+    getValue() {
+        return this.element.value;
+    }
+    beginEditing(container, referencePosition, value) {
+        this.container = container, this.createElement(), value && this.setValue(value), 
+        (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect), 
+        this.element.focus();
+    }
+    adjustPosition(rect) {
+        this.element.style.top = rect.top + "px", this.element.style.left = rect.left + "px", 
+        this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
+    }
+    endEditing() {}
+    exit() {
+        this.container.removeChild(this.element);
+    }
+    targetIsOnEditor(target) {
+        return target === this.element;
+    }
+}
+
+exports.InputEditor = InputEditor;
+//# sourceMappingURL=input-editor.js.map

package/cjs/input-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":";;;AAMA,MAAa,WAAW;IAKtB,YAAY,YAA+B;QAJ3C,eAAU,GAAW,OAAO,CAAC;QAK3B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,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;IACD,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;IACD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,YAAY,CAAC,SAAsB,EAAE,iBAA6D,EAAE,KAAc;QAChH,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAE3B,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;IACD,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;IACD,UAAU;IAEV,CAAC;IAED,IAAI;QAEF,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IACD,gBAAgB,CAAC,MAAmB;QAClC,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE;YAC3B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;CACF;AA3DD,kCA2DC","file":"input-editor.js","sourcesContent":["import type { IEditor, Placement, RectProps } from './types';\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  declare element: HTMLInputElement;\n  constructor(editorConfig: InputEditorConfig) {\n    this.editorConfig = editorConfig;\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  setValue(value: string) {\n    this.element.value = typeof value !== 'undefined' ? value : '';\n  }\n  getValue() {\n    return this.element.value;\n  }\n  beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) {\n    console.log('input', 'beginEditing---- ');\n    this.container = container;\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  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  endEditing() {\n    // do nothing\n  }\n\n  exit() {\n    // do nothing\n    this.container.removeChild(this.element);\n  }\n  targetIsOnEditor(target: HTMLElement) {\n    if (target === this.element) {\n      return true;\n    }\n    return false;\n  }\n}\n"]}

package/cjs/list-editor.d.ts

@@ -0,0 +1,26 @@
+import type { IEditor, Placement, RectProps } from './types';
+export interface ListEditorConfig {
+    values: string[];
+}
+export declare class ListEditor implements IEditor {
+    editorType: string;
+    input: HTMLInputElement;
+    editorConfig: ListEditorConfig;
+    container: HTMLElement;
+    element: HTMLSelectElement;
+    successCallback: Function;
+    constructor(editorConfig: ListEditorConfig);
+    createElement(value: string): void;
+    _bindSelectChangeEvent(): void;
+    setValue(value: string): void;
+    getValue(): string;
+    beginEditing(container: HTMLElement, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }, value?: string): void;
+    adjustPosition(rect: RectProps): void;
+    endEditing(): void;
+    exit(): void;
+    targetIsOnEditor(target: HTMLElement): boolean;
+    bindSuccessCallback(success: Function): void;
+}

package/cjs/list-editor.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.ListEditor = void 0;
+
+class ListEditor {
+    constructor(editorConfig) {
+        this.editorType = "Input", this.editorConfig = editorConfig;
+    }
+    createElement(value) {
+        const select = document.createElement("select");
+        select.setAttribute("type", "text"), select.style.position = "absolute", select.style.padding = "4px", 
+        select.style.width = "100%", select.style.boxSizing = "border-box", this.element = select;
+        const {values: values} = this.editorConfig;
+        let opsStr = "";
+        values.forEach((item => {
+            opsStr += item === value ? `<option value=${item} selected>${item}</option>` : `<option value=${item} >${item}</option>`;
+        })), select.innerHTML = opsStr, this.container.appendChild(select);
+    }
+    _bindSelectChangeEvent() {
+        this.element.addEventListener("change", (() => {}));
+    }
+    setValue(value) {}
+    getValue() {
+        return this.element.value;
+    }
+    beginEditing(container, referencePosition, value) {
+        this.container = container, this.createElement(value), value && this.setValue(value), 
+        (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect), 
+        this.element.focus();
+    }
+    adjustPosition(rect) {
+        this.element.style.top = rect.top + "px", this.element.style.left = rect.left + "px", 
+        this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
+    }
+    endEditing() {}
+    exit() {
+        this.container.removeChild(this.element);
+    }
+    targetIsOnEditor(target) {
+        return target === this.element;
+    }
+    bindSuccessCallback(success) {
+        this.successCallback = success;
+    }
+}
+
+exports.ListEditor = ListEditor;
+//# sourceMappingURL=list-editor.js.map

package/cjs/list-editor.js.map

@@ -0,0 +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,YAAY,CAAC,SAAsB,EAAE,iBAA6D,EAAE,KAAc;QAChH,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAE3B,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,IAAI;QACF,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,gBAAgB,CAAC,MAAmB;QAClC,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE;YAC3B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,mBAAmB,CAAC,OAAiB;QACnC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IACjC,CAAC;CACF;AA1FD,gCA0FC","file":"list-editor.js","sourcesContent":["import type { 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: Function;\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  beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) {\n    this.container = container;\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  exit() {\n    this.container.removeChild(this.element);\n  }\n\n  targetIsOnEditor(target: HTMLElement) {\n    if (target === this.element) {\n      return true;\n    }\n    return false;\n  }\n\n  bindSuccessCallback(success: Function) {\n    this.successCallback = success;\n  }\n}\n"]}

package/cjs/types.d.ts

@@ -0,0 +1,26 @@
+export interface IEditor {
+    editorType?: string;
+    editorConfig: any;
+    container: HTMLElement;
+    successCallback?: Function;
+    getValue: () => string | number | null;
+    beginEditing: (container: HTMLElement, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }, value?: string) => void;
+    exit: () => void;
+    targetIsOnEditor: (target: HTMLElement) => boolean;
+    bindSuccessCallback?: (callback: Function) => void;
+}
+export interface RectProps {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare enum Placement {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right"
+}

package/cjs/types.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var Placement;
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Placement = void 0, function(Placement) {
+    Placement.top = "top", Placement.bottom = "bottom", Placement.left = "left", Placement.right = "right";
+}(Placement = exports.Placement || (exports.Placement = {}));
+//# sourceMappingURL=types.js.map

package/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":";;;AA0BA,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":["export interface IEditor {\n  /** 编辑器类型 */\n  editorType?: string;\n  /** 编辑配置 */\n  editorConfig: any;\n  container: HTMLElement;\n  successCallback?: Function;\n  // createElement: () => void;\n  // setValue: (value: string) => void;\n  getValue: () => string | number | null;\n  beginEditing: (\n    container: HTMLElement,\n    referencePosition: { rect: RectProps; placement?: Placement },\n    value?: string\n  ) => void;\n  // endEditing: () => void;\n  exit: () => void;\n  targetIsOnEditor: (target: HTMLElement) => boolean;\n  bindSuccessCallback?: (callback: Function) => void;\n}\nexport interface RectProps {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\nexport enum Placement {\n  top = 'top',\n  bottom = 'bottom',\n  left = 'left',\n  right = 'right'\n}\n"]}

package/dist/vtable-editors.js

@@ -0,0 +1,163 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.editors = {})));
+})(this, (function (exports) { 'use strict';
+
+    class InputEditor {
+        editorType = 'Input';
+        editorConfig;
+        container;
+        constructor(editorConfig) {
+            this.editorConfig = editorConfig;
+        }
+        createElement() {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'text');
+            input.style.position = 'absolute';
+            input.style.padding = '4px';
+            input.style.width = '100%';
+            input.style.boxSizing = 'border-box';
+            this.element = input;
+            this.container.appendChild(input);
+        }
+        setValue(value) {
+            this.element.value = typeof value !== 'undefined' ? value : '';
+        }
+        getValue() {
+            return this.element.value;
+        }
+        beginEditing(container, referencePosition, value) {
+            this.container = container;
+            this.createElement();
+            if (value) {
+                this.setValue(value);
+            }
+            if (referencePosition?.rect) {
+                this.adjustPosition(referencePosition.rect);
+            }
+            this.element.focus();
+        }
+        adjustPosition(rect) {
+            this.element.style.top = rect.top + 'px';
+            this.element.style.left = rect.left + 'px';
+            this.element.style.width = rect.width + 'px';
+            this.element.style.height = rect.height + 'px';
+        }
+        endEditing() {
+        }
+        exit() {
+            this.container.removeChild(this.element);
+        }
+        targetIsOnEditor(target) {
+            if (target === this.element) {
+                return true;
+            }
+            return false;
+        }
+    }
+
+    class DateInputEditor extends InputEditor {
+        editorType = 'DateInput';
+        successCallback;
+        constructor(editorConfig) {
+            super(editorConfig);
+            this.editorConfig = editorConfig;
+        }
+        createElement() {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'date');
+            input.style.padding = '4px';
+            input.style.width = '100%';
+            input.style.boxSizing = 'border-box';
+            input.style.position = 'absolute';
+            this.element = input;
+            this.container.appendChild(input);
+        }
+        bindSuccessCallback(success) {
+            this.successCallback = success;
+        }
+    }
+
+    class ListEditor {
+        editorType = 'Input';
+        input;
+        editorConfig;
+        container;
+        element;
+        successCallback;
+        constructor(editorConfig) {
+            this.editorConfig = editorConfig;
+        }
+        createElement(value) {
+            const select = document.createElement('select');
+            select.setAttribute('type', 'text');
+            select.style.position = 'absolute';
+            select.style.padding = '4px';
+            select.style.width = '100%';
+            select.style.boxSizing = 'border-box';
+            this.element = select;
+            const { values } = this.editorConfig;
+            let opsStr = '';
+            values.forEach(item => {
+                opsStr +=
+                    item === value ? `<option value=${item} selected>${item}</option>` : `<option value=${item} >${item}</option>`;
+            });
+            select.innerHTML = opsStr;
+            this.container.appendChild(select);
+        }
+        _bindSelectChangeEvent() {
+            this.element.addEventListener('change', () => {
+            });
+        }
+        setValue(value) {
+        }
+        getValue() {
+            return this.element.value;
+        }
+        beginEditing(container, referencePosition, value) {
+            this.container = container;
+            this.createElement(value);
+            if (value) {
+                this.setValue(value);
+            }
+            if (referencePosition?.rect) {
+                this.adjustPosition(referencePosition.rect);
+            }
+            this.element.focus();
+        }
+        adjustPosition(rect) {
+            this.element.style.top = rect.top + 'px';
+            this.element.style.left = rect.left + 'px';
+            this.element.style.width = rect.width + 'px';
+            this.element.style.height = rect.height + 'px';
+        }
+        endEditing() {
+        }
+        exit() {
+            this.container.removeChild(this.element);
+        }
+        targetIsOnEditor(target) {
+            if (target === this.element) {
+                return true;
+            }
+            return false;
+        }
+        bindSuccessCallback(success) {
+            this.successCallback = success;
+        }
+    }
+
+    exports.Placement = void 0;
+    (function (Placement) {
+        Placement["top"] = "top";
+        Placement["bottom"] = "bottom";
+        Placement["left"] = "left";
+        Placement["right"] = "right";
+    })(exports.Placement || (exports.Placement = {}));
+
+    exports.DateInputEditor = DateInputEditor;
+    exports.InputEditor = InputEditor;
+    exports.ListEditor = ListEditor;
+
+}));

package/dist/vtable-editors.min.js

@@ -0,0 +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}beginEditing(e,t,i){this.container=e,this.createElement(),i&&this.setValue(i),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(){}exit(){this.container.removeChild(this.element)}targetIsOnEditor(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";successCallback;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)}bindSuccessCallback(e){this.successCallback=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}beginEditing(e,t,i){this.container=e,this.createElement(i),i&&this.setValue(i),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(){}exit(){this.container.removeChild(this.element)}targetIsOnEditor(e){return e===this.element}bindSuccessCallback(e){this.successCallback=e}}}));

package/es/base-editor.d.ts

@@ -0,0 +1 @@
+

package/es/base-editor.js

@@ -0,0 +1 @@
+"use strict";

package/es/base-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/base-editor.ts"],"names":[],"mappings":"","file":"base-editor.js","sourcesContent":["// import type { InputEditorConfig } from './input-editor';\n// import type { ListEditorConfig } from './list-editor';\n// import type { IEditor, Placement, RectProps } from './types';\n\n// //这个考虑下是否还需要 是直接使用IEditor就行的吗？\n// export class BaseEditor implements IEditor {\n//   editorType: string;\n//   editorConfig: ListEditorConfig | InputEditorConfig;\n//   element: HTMLElement;\n//   container: HTMLElement;\n//   constructor() {\n//     this.editorType = 'base';\n//   }\n//   createElement() {\n//     // do nothing\n//   }\n//   setValue(value: string) {\n//     // do nothing\n//   }\n//   getValue() {\n//     return '';\n//   }\n//   beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) {\n//     // do nothing\n//   }\n//   targetIsOnEditor(target: HTMLElement) {\n//     //\n//     return false;\n//   }\n//   endEditing() {\n//     // do nothing\n//   }\n\n//   exit(): void {\n//     // do nothing\n//   }\n// }\n"]}

package/es/date-input-editor.d.ts

@@ -0,0 +1,14 @@
+import { InputEditor } from './input-editor';
+import type { IEditor } from './types';
+export interface DateInputEditorConfig {
+    max?: number;
+    min?: number;
+}
+export declare class DateInputEditor extends InputEditor implements IEditor {
+    editorType: string;
+    element: HTMLInputElement;
+    successCallback: Function;
+    constructor(editorConfig: DateInputEditorConfig);
+    createElement(): void;
+    bindSuccessCallback(success: Function): void;
+}

package/es/date-input-editor.js

@@ -0,0 +1,17 @@
+import { InputEditor } from "./input-editor";
+
+export class DateInputEditor extends InputEditor {
+    constructor(editorConfig) {
+        super(editorConfig), this.editorType = "DateInput", this.editorConfig = editorConfig;
+    }
+    createElement() {
+        const input = document.createElement("input");
+        input.setAttribute("type", "date"), input.style.padding = "4px", input.style.width = "100%", 
+        input.style.boxSizing = "border-box", input.style.position = "absolute", this.element = input, 
+        this.container.appendChild(input);
+    }
+    bindSuccessCallback(success) {
+        this.successCallback = success;
+    }
+}
+//# sourceMappingURL=date-input-editor.js.map

package/es/date-input-editor.js.map

@@ -0,0 +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;IAI9C,YAAY,YAAmC;QAC7C,KAAK,CAAC,YAAY,CAAC,CAAC;QAJtB,eAAU,GAAW,WAAW,CAAC;QAK/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;IACD,mBAAmB,CAAC,OAAiB;QACnC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IACjC,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  declare element: HTMLInputElement;\n  successCallback: Function;\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  bindSuccessCallback(success: Function) {\n    this.successCallback = success;\n  }\n}\n"]}

package/es/index.d.ts

@@ -0,0 +1,5 @@
+import { InputEditor } from './input-editor';
+import { DateInputEditor } from './date-input-editor';
+import { ListEditor } from './list-editor';
+export { InputEditor, DateInputEditor, ListEditor };
+export * from './types';

package/es/index.js

@@ -0,0 +1,10 @@
+import { InputEditor } from "./input-editor";
+
+import { DateInputEditor } from "./date-input-editor";
+
+import { ListEditor } from "./list-editor";
+
+export { InputEditor, DateInputEditor, ListEditor };
+
+export * from "./types";
+//# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;AACpD,cAAc,SAAS,CAAC","file":"index.js","sourcesContent":["import { InputEditor } from './input-editor';\nimport { DateInputEditor } from './date-input-editor';\nimport { ListEditor } from './list-editor';\nexport { InputEditor, DateInputEditor, ListEditor };\nexport * from './types';\n"]}

package/es/input-editor.d.ts

@@ -0,0 +1,23 @@
+import type { IEditor, Placement, RectProps } from './types';
+export interface InputEditorConfig {
+    max?: number;
+    min?: number;
+}
+export declare class InputEditor implements IEditor {
+    editorType: string;
+    editorConfig: InputEditorConfig;
+    container: HTMLElement;
+    element: HTMLInputElement;
+    constructor(editorConfig: InputEditorConfig);
+    createElement(): void;
+    setValue(value: string): void;
+    getValue(): string;
+    beginEditing(container: HTMLElement, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }, value?: string): void;
+    adjustPosition(rect: RectProps): void;
+    endEditing(): void;
+    exit(): void;
+    targetIsOnEditor(target: HTMLElement): boolean;
+}

package/es/input-editor.js

@@ -0,0 +1,34 @@
+export class InputEditor {
+    constructor(editorConfig) {
+        this.editorType = "Input", this.editorConfig = editorConfig;
+    }
+    createElement() {
+        const input = document.createElement("input");
+        input.setAttribute("type", "text"), input.style.position = "absolute", input.style.padding = "4px", 
+        input.style.width = "100%", input.style.boxSizing = "border-box", this.element = input, 
+        this.container.appendChild(input);
+    }
+    setValue(value) {
+        this.element.value = void 0 !== value ? value : "";
+    }
+    getValue() {
+        return this.element.value;
+    }
+    beginEditing(container, referencePosition, value) {
+        this.container = container, this.createElement(), value && this.setValue(value), 
+        (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect), 
+        this.element.focus();
+    }
+    adjustPosition(rect) {
+        this.element.style.top = rect.top + "px", this.element.style.left = rect.left + "px", 
+        this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
+    }
+    endEditing() {}
+    exit() {
+        this.container.removeChild(this.element);
+    }
+    targetIsOnEditor(target) {
+        return target === this.element;
+    }
+}
+//# sourceMappingURL=input-editor.js.map

package/es/input-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-editor.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,WAAW;IAKtB,YAAY,YAA+B;QAJ3C,eAAU,GAAW,OAAO,CAAC;QAK3B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,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;IACD,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;IACD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,YAAY,CAAC,SAAsB,EAAE,iBAA6D,EAAE,KAAc;QAChH,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAE3B,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;IACD,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;IACD,UAAU;IAEV,CAAC;IAED,IAAI;QAEF,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IACD,gBAAgB,CAAC,MAAmB;QAClC,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE;YAC3B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;CACF","file":"input-editor.js","sourcesContent":["import type { IEditor, Placement, RectProps } from './types';\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  declare element: HTMLInputElement;\n  constructor(editorConfig: InputEditorConfig) {\n    this.editorConfig = editorConfig;\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  setValue(value: string) {\n    this.element.value = typeof value !== 'undefined' ? value : '';\n  }\n  getValue() {\n    return this.element.value;\n  }\n  beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) {\n    console.log('input', 'beginEditing---- ');\n    this.container = container;\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  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  endEditing() {\n    // do nothing\n  }\n\n  exit() {\n    // do nothing\n    this.container.removeChild(this.element);\n  }\n  targetIsOnEditor(target: HTMLElement) {\n    if (target === this.element) {\n      return true;\n    }\n    return false;\n  }\n}\n"]}

package/es/list-editor.d.ts

@@ -0,0 +1,26 @@
+import type { IEditor, Placement, RectProps } from './types';
+export interface ListEditorConfig {
+    values: string[];
+}
+export declare class ListEditor implements IEditor {
+    editorType: string;
+    input: HTMLInputElement;
+    editorConfig: ListEditorConfig;
+    container: HTMLElement;
+    element: HTMLSelectElement;
+    successCallback: Function;
+    constructor(editorConfig: ListEditorConfig);
+    createElement(value: string): void;
+    _bindSelectChangeEvent(): void;
+    setValue(value: string): void;
+    getValue(): string;
+    beginEditing(container: HTMLElement, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }, value?: string): void;
+    adjustPosition(rect: RectProps): void;
+    endEditing(): void;
+    exit(): void;
+    targetIsOnEditor(target: HTMLElement): boolean;
+    bindSuccessCallback(success: Function): void;
+}

package/es/list-editor.js

@@ -0,0 +1,42 @@
+export class ListEditor {
+    constructor(editorConfig) {
+        this.editorType = "Input", this.editorConfig = editorConfig;
+    }
+    createElement(value) {
+        const select = document.createElement("select");
+        select.setAttribute("type", "text"), select.style.position = "absolute", select.style.padding = "4px", 
+        select.style.width = "100%", select.style.boxSizing = "border-box", this.element = select;
+        const {values: values} = this.editorConfig;
+        let opsStr = "";
+        values.forEach((item => {
+            opsStr += item === value ? `<option value=${item} selected>${item}</option>` : `<option value=${item} >${item}</option>`;
+        })), select.innerHTML = opsStr, this.container.appendChild(select);
+    }
+    _bindSelectChangeEvent() {
+        this.element.addEventListener("change", (() => {}));
+    }
+    setValue(value) {}
+    getValue() {
+        return this.element.value;
+    }
+    beginEditing(container, referencePosition, value) {
+        this.container = container, this.createElement(value), value && this.setValue(value), 
+        (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect), 
+        this.element.focus();
+    }
+    adjustPosition(rect) {
+        this.element.style.top = rect.top + "px", this.element.style.left = rect.left + "px", 
+        this.element.style.width = rect.width + "px", this.element.style.height = rect.height + "px";
+    }
+    endEditing() {}
+    exit() {
+        this.container.removeChild(this.element);
+    }
+    targetIsOnEditor(target) {
+        return target === this.element;
+    }
+    bindSuccessCallback(success) {
+        this.successCallback = success;
+    }
+}
+//# sourceMappingURL=list-editor.js.map

package/es/list-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"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","file":"list-editor.js","sourcesContent":["import type { 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: Function;\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  beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) {\n    this.container = container;\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  exit() {\n    this.container.removeChild(this.element);\n  }\n\n  targetIsOnEditor(target: HTMLElement) {\n    if (target === this.element) {\n      return true;\n    }\n    return false;\n  }\n\n  bindSuccessCallback(success: Function) {\n    this.successCallback = success;\n  }\n}\n"]}

package/es/types.d.ts

@@ -0,0 +1,26 @@
+export interface IEditor {
+    editorType?: string;
+    editorConfig: any;
+    container: HTMLElement;
+    successCallback?: Function;
+    getValue: () => string | number | null;
+    beginEditing: (container: HTMLElement, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }, value?: string) => void;
+    exit: () => void;
+    targetIsOnEditor: (target: HTMLElement) => boolean;
+    bindSuccessCallback?: (callback: Function) => void;
+}
+export interface RectProps {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare enum Placement {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right"
+}

package/es/types.js

@@ -0,0 +1,6 @@
+export var Placement;
+
+!function(Placement) {
+    Placement.top = "top", Placement.bottom = "bottom", Placement.left = "left", Placement.right = "right";
+}(Placement || (Placement = {}));
+//# sourceMappingURL=types.js.map

package/es/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":"AA0BA,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":["export interface IEditor {\n  /** 编辑器类型 */\n  editorType?: string;\n  /** 编辑配置 */\n  editorConfig: any;\n  container: HTMLElement;\n  successCallback?: Function;\n  // createElement: () => void;\n  // setValue: (value: string) => void;\n  getValue: () => string | number | null;\n  beginEditing: (\n    container: HTMLElement,\n    referencePosition: { rect: RectProps; placement?: Placement },\n    value?: string\n  ) => void;\n  // endEditing: () => void;\n  exit: () => void;\n  targetIsOnEditor: (target: HTMLElement) => boolean;\n  bindSuccessCallback?: (callback: Function) => void;\n}\nexport interface RectProps {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\nexport enum Placement {\n  top = 'top',\n  bottom = 'bottom',\n  left = 'left',\n  right = 'right'\n}\n"]}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@visactor/vtable-editors",
+  "version": "0.1.0-alpha.1",
+  "description": "",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "cjs",
+    "es",
+    "dist"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./es/index.js"
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.1.4",
+    "eslint": "~8.18.0",
+    "vite": "3.2.6",
+    "typescript": "4.9.5",
+    "@types/jest": "^26.0.0",
+    "@types/node": "*",
+    "@types/offscreencanvas": "2019.6.4",
+    "husky": "7.0.4",
+    "jest": "^26.0.0",
+    "jest-electron": "^0.1.12",
+    "lint-staged": "12.3.7",
+    "magic-string": "^0.25.7",
+    "react-device-detect": "^2.2.2",
+    "ts-jest": "^26.0.0",
+    "ts-loader": "9.2.6",
+    "ts-node": "10.9.0",
+    "tslib": "2.3.1",
+    "tslint": "5.12.1",
+    "@internal/bundler": "0.0.1",
+    "@internal/ts-config": "0.0.1",
+    "@internal/eslint-config": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://www.visactor.io",
+  "bugs": "https://github.com/VisActor/VTable",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VisActor/VTable.git",
+    "directory": "packages/vtable-editors"
+  },
+  "author": {
+    "name": "VisActor",
+    "url": "https://www.visactor.io/"
+  },
+  "scripts": {
+    "compile": "tsc --noEmit",
+    "eslint": "eslint --debug --fix src/",
+    "build": "bundle",
+    "dev": "bundle --clean -f es -w",
+    "test-cov": "jest -w 16 --coverage",
+    "test-live": "npm run test-watch __tests__/unit/",
+    "test-watch": "DEBUG_MODE=1 jest --watch"
+  }
+}