@visactor/vue-vtable 1.25.0 → 1.25.1-alpha.1

package/es/components/list/list-column.js

@@ -1,6 +1,6 @@
-function ListColumn(props) {
-    return null;
-}
+function ListColumn(props) {
+    return null;
+}
 ListColumn.symbol = 'ListColumn';
 
 export { ListColumn as default };

package/es/components/pivot/pivot-column-dimension.js

@@ -1,6 +1,6 @@
-function PivotColumnDimension(props) {
-    return null;
-}
+function PivotColumnDimension(props) {
+    return null;
+}
 PivotColumnDimension.symbol = 'PivotColumnDimension';
 
 export { PivotColumnDimension as default };

package/es/components/pivot/pivot-column-header-title.js

@@ -1,6 +1,6 @@
-function PivotColumnHeaderTitle(props) {
-    return null;
-}
+function PivotColumnHeaderTitle(props) {
+    return null;
+}
 PivotColumnHeaderTitle.symbol = 'PivotColumnHeaderTitle';
 
 export { PivotColumnHeaderTitle as default };

package/es/components/pivot/pivot-corner.js

@@ -1,6 +1,6 @@
-function PivotCorner(props) {
-    return null;
-}
+function PivotCorner(props) {
+    return null;
+}
 PivotCorner.symbol = 'PivotCorner';
 
 export { PivotCorner as default };

package/es/components/pivot/pivot-indicator.js

@@ -1,6 +1,6 @@
-function PivotIndicator(props) {
-    return null;
-}
+function PivotIndicator(props) {
+    return null;
+}
 PivotIndicator.symbol = 'PivotIndicator';
 
 export { PivotIndicator as default };

package/es/components/pivot/pivot-row-dimension.js

@@ -1,6 +1,6 @@
-function PivotRowDimension(props) {
-    return null;
-}
+function PivotRowDimension(props) {
+    return null;
+}
 PivotRowDimension.symbol = 'PivotRowDimension';
 
 export { PivotRowDimension as default };

package/es/components/pivot/pivot-row-header-title.js

@@ -1,6 +1,6 @@
-function PivotRowHeaderTitle(props) {
-    return null;
-}
+function PivotRowHeaderTitle(props) {
+    return null;
+}
 PivotRowHeaderTitle.symbol = 'PivotRowHeaderTitle';
 
 export { PivotRowHeaderTitle as default };

package/es/constants.js

@@ -1,3 +1,4 @@
+/** 动态渲染编辑器名称 */
 const DYNAMIC_RENDER_EDITOR = 'dynamic-render-editor';
 
 export { DYNAMIC_RENDER_EDITOR };

package/es/edit/editor.js

@@ -1,201 +1,216 @@
-import { __awaiter } from 'tslib';
 import { isValid } from '@visactor/vutils';
 import { h, customRef, isVNode, render } from 'vue';
 import { TYPES } from '@visactor/vtable';
 
-class DynamicRenderEditor {
-    constructor(currentContext) {
-        this.currentContext = currentContext;
-        this.tableContainer = null;
-        this.currentValue = null;
-        this.wrapContainer = null;
-        this.nodeMap = new Map();
-    }
-    registerNode(tableId, key, getNode) {
-        if (!isValid(tableId) || !isValid(key) || typeof getNode !== 'function') {
-            return;
-        }
-        if (!this.nodeMap.has(tableId)) {
-            this.nodeMap.set(tableId, new Map());
-        }
-        this.nodeMap.get(tableId).set(key, getNode);
-    }
-    getNode(tableId, key) {
-        var _a;
-        return (_a = this.nodeMap.get(tableId)) === null || _a === void 0 ? void 0 : _a.get(key);
-    }
-    removeNode(tableId) {
-        this.nodeMap.delete(tableId);
-    }
-    release(tableId) {
-        if (!isValid(tableId)) {
-            this.nodeMap.clear();
-        }
-        else {
-            this.removeNode(tableId);
-        }
-    }
-    onStart(editorContext) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { value } = editorContext;
-            this.setValue(value);
-            if (!(yield this.createElement(editorContext))) {
-                return;
-            }
-        });
-    }
-    createElement(editorContext) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { row, col, value, table, container, referencePosition } = editorContext;
-            if (!container) {
-                return false;
-            }
-            const define = table.getBodyColumnDefine(col, row);
-            const { editConfig } = define || {};
-            const { id } = table;
-            const key = this.getColumnKeyField(define);
-            if (!isValid(key) || !isValid(id)) {
-                return false;
-            }
-            if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.editBefore) === 'function') {
-                const v = yield editConfig.editBefore(editorContext);
-                if (!v) {
-                    table.showTooltip(col, row, {
-                        content: editConfig.disablePrompt || 'This field is not allowed to be edited',
-                        referencePosition: { rect: referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect, placement: TYPES.Placement.top },
-                        style: {
-                            bgColor: 'black',
-                            color: 'white',
-                            arrowMark: true
-                        },
-                        disappearDelay: 1000
-                    });
-                    return false;
-                }
-            }
-            const record = table === null || table === void 0 ? void 0 : table.getCellOriginRecord(col, row);
-            const renderVNodeFn = this.getNode(id, key);
-            if (!renderVNodeFn) {
-                return false;
-            }
-            const vnode = h(renderVNodeFn, {
-                row,
-                col,
-                value,
-                refValue: customRef((track, trigger) => {
-                    return {
-                        get: () => {
-                            track();
-                            return this.getValue();
-                        },
-                        set: value => {
-                            this.setValue(value);
-                            trigger();
-                        }
-                    };
-                }),
-                record,
-                table,
-                onChange: (value) => this.setValue(value)
-            });
-            if (!vnode || !isVNode(vnode)) {
-                return false;
-            }
-            this.checkToPassAppContext(vnode, table);
-            const wrapContainer = document.createElement('div');
-            wrapContainer.style.position = 'absolute';
-            wrapContainer.style.width = '100%';
-            wrapContainer.style.boxSizing = 'border-box';
-            const { bgColor } = table.getCellStyle(col, row) || {};
-            wrapContainer.style.backgroundColor = bgColor || '#FFFFFF';
-            this.wrapContainer = wrapContainer;
-            this.tableContainer = container;
-            this.tableContainer.appendChild(wrapContainer);
-            render(vnode, wrapContainer);
-            if (referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect) {
-                this.adjustPosition(referencePosition.rect);
-            }
-            return true;
-        });
-    }
-    checkToPassAppContext(vnode, table) {
-        var _a, _b, _c, _d;
-        try {
-            const userAppContext = (_d = (_c = (_b = (_a = table.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.getVueUserAppContext) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : this.currentContext;
-            if (!!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.components) && !!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.directives)) {
-                vnode.appContext = userAppContext;
-            }
-        }
-        catch (error) { }
-    }
-    getColumnKeyField(column) {
-        const { field, key } = column || {};
-        return isValid(key) ? key : field;
-    }
-    getValue() {
-        return this.currentValue;
-    }
-    setValue(value) {
-        this.currentValue = value;
-    }
-    adjustPosition(rect) {
-        if (this.wrapContainer) {
-            this.wrapContainer.style.top = `${rect.top}px`;
-            this.wrapContainer.style.left = `${rect.left}px`;
-            this.wrapContainer.style.width = `${rect.width}px`;
-            this.wrapContainer.style.height = `${rect.height}px`;
-        }
-    }
-    validateValue(value, oldValue, editCell, table) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { col, row } = editCell || {};
-            if (!isValid(col) || !isValid(row)) {
-                return true;
-            }
-            const define = table.getBodyColumnDefine(col, row);
-            const { editConfig } = define || {};
-            if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.validateValue) === 'function') {
-                const validate = yield editConfig.validateValue({ col, row, value, oldValue, table });
-                if (validate === false) {
-                    const rect = table.getVisibleCellRangeRelativeRect({ col, row });
-                    table.showTooltip(col, row, {
-                        content: editConfig.invalidPrompt || 'invalid',
-                        referencePosition: { rect, placement: TYPES.Placement.top },
-                        style: {
-                            bgColor: 'red',
-                            color: 'white',
-                            arrowMark: true
-                        },
-                        disappearDelay: 1000
-                    });
-                    return false;
-                }
-                return validate;
-            }
-            return true;
-        });
-    }
-    onEnd() {
-        if (this.wrapContainer && this.tableContainer) {
-            render(null, this.wrapContainer);
-            this.tableContainer.removeChild(this.wrapContainer);
-        }
-        this.wrapContainer = null;
-        this.tableContainer = null;
-    }
-    isEditorElement(target) {
-        var _a;
-        return ((_a = this.wrapContainer) === null || _a === void 0 ? void 0 : _a.contains(target)) || this.isClickEditorElement(target);
-    }
-    isClickEditorElement(target) {
-        while (target) {
-            if (target.classList && target.classList.contains('table-editor-element')) {
-                return true;
-            }
-            target = target.parentNode;
-        }
-        return false;
-    }
+/**
+ * @description: 自定义渲染式编辑器
+ */
+class DynamicRenderEditor {
+    constructor(currentContext) {
+        this.currentContext = currentContext;
+        this.tableContainer = null;
+        this.currentValue = null;
+        this.wrapContainer = null;
+        this.nodeMap = new Map();
+    }
+    registerNode(tableId, key, getNode) {
+        if (!isValid(tableId) || !isValid(key) || typeof getNode !== 'function') {
+            return;
+        }
+        if (!this.nodeMap.has(tableId)) {
+            this.nodeMap.set(tableId, new Map());
+        }
+        this.nodeMap.get(tableId).set(key, getNode);
+    }
+    getNode(tableId, key) {
+        var _a;
+        return (_a = this.nodeMap.get(tableId)) === null || _a === void 0 ? void 0 : _a.get(key);
+    }
+    removeNode(tableId) {
+        this.nodeMap.delete(tableId);
+    }
+    release(tableId) {
+        if (!isValid(tableId)) {
+            this.nodeMap.clear();
+        }
+        else {
+            this.removeNode(tableId);
+        }
+    }
+    async onStart(editorContext) {
+        const { value } = editorContext;
+        // 先设置初始值(因为校验不通过也会走正常流程)
+        this.setValue(value);
+        if (!(await this.createElement(editorContext))) {
+            return;
+        }
+    }
+    async createElement(editorContext) {
+        const { row, col, value, table, container, referencePosition } = editorContext;
+        if (!container) {
+            return false;
+        }
+        const define = table.getBodyColumnDefine(col, row);
+        const { editConfig } = define || {};
+        const { id } = table;
+        const key = this.getColumnKeyField(define);
+        if (!isValid(key) || !isValid(id)) {
+            return false;
+        }
+        if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.editBefore) === 'function') {
+            // 编辑前校验
+            const v = await editConfig.editBefore(editorContext);
+            if (!v) {
+                table.showTooltip(col, row, {
+                    // TODO 多语言
+                    content: editConfig.disablePrompt || 'This field is not allowed to be edited',
+                    referencePosition: { rect: referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect, placement: TYPES.Placement.top },
+                    style: {
+                        bgColor: 'black',
+                        color: 'white',
+                        arrowMark: true
+                    },
+                    disappearDelay: 1000
+                });
+                return false;
+            }
+        }
+        const record = table === null || table === void 0 ? void 0 : table.getCellOriginRecord(col, row);
+        const renderVNodeFn = this.getNode(id, key);
+        if (!renderVNodeFn) {
+            return false;
+        }
+        const vnode = h(renderVNodeFn, {
+            row,
+            col,
+            value,
+            refValue: customRef((track, trigger) => {
+                return {
+                    get: () => {
+                        track();
+                        return this.getValue();
+                    },
+                    set: value => {
+                        this.setValue(value);
+                        trigger();
+                    }
+                };
+            }),
+            record,
+            table,
+            onChange: (value) => this.setValue(value)
+        });
+        if (!vnode || !isVNode(vnode)) {
+            return false;
+        }
+        this.checkToPassAppContext(vnode, table);
+        // 创建包裹容器
+        const wrapContainer = document.createElement('div');
+        wrapContainer.style.position = 'absolute';
+        wrapContainer.style.width = '100%';
+        wrapContainer.style.boxSizing = 'border-box';
+        const { bgColor } = table.getCellStyle(col, row) || {};
+        wrapContainer.style.backgroundColor = bgColor || '#FFFFFF';
+        this.wrapContainer = wrapContainer;
+        this.tableContainer = container;
+        this.tableContainer.appendChild(wrapContainer);
+        render(vnode, wrapContainer);
+        // 位置同步
+        if (referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect) {
+            this.adjustPosition(referencePosition.rect);
+        }
+        return true;
+    }
+    /**
+     * @description: 校验并传递上下文
+     * @param {VNode} vnode
+     * @param {any} table
+     * @return {*}
+     */
+    checkToPassAppContext(vnode, table) {
+        var _a, _b, _c, _d;
+        try {
+            const userAppContext = (_d = (_c = (_b = (_a = table.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.getVueUserAppContext) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : this.currentContext;
+            // 简单校验合法性
+            if (!!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.components) && !!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.directives)) {
+                vnode.appContext = userAppContext;
+            }
+        }
+        catch (error) { }
+    }
+    /**
+     * @description: 获取渲染式编辑器的列配置主键
+     * @param {any} column
+     * @return {*}
+     */
+    getColumnKeyField(column) {
+        const { field, key } = column || {};
+        // 兼容取 field
+        return isValid(key) ? key : field;
+    }
+    getValue() {
+        return this.currentValue;
+    }
+    setValue(value) {
+        this.currentValue = value;
+    }
+    adjustPosition(rect) {
+        if (this.wrapContainer) {
+            this.wrapContainer.style.top = `${rect.top}px`;
+            this.wrapContainer.style.left = `${rect.left}px`;
+            this.wrapContainer.style.width = `${rect.width}px`;
+            this.wrapContainer.style.height = `${rect.height}px`;
+        }
+    }
+    async validateValue(value, oldValue, editCell, table) {
+        const { col, row } = editCell || {};
+        if (!isValid(col) || !isValid(row)) {
+            return true;
+        }
+        const define = table.getBodyColumnDefine(col, row);
+        const { editConfig } = define || {};
+        if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.validateValue) === 'function') {
+            const validate = await editConfig.validateValue({ col, row, value, oldValue, table });
+            if (validate === false) {
+                const rect = table.getVisibleCellRangeRelativeRect({ col, row });
+                table.showTooltip(col, row, {
+                    content: editConfig.invalidPrompt || 'invalid',
+                    referencePosition: { rect, placement: TYPES.Placement.top },
+                    style: {
+                        bgColor: 'red',
+                        color: 'white',
+                        arrowMark: true
+                    },
+                    disappearDelay: 1000
+                });
+                return false;
+            }
+            return validate;
+        }
+        return true;
+    }
+    onEnd() {
+        if (this.wrapContainer && this.tableContainer) {
+            render(null, this.wrapContainer);
+            this.tableContainer.removeChild(this.wrapContainer);
+        }
+        this.wrapContainer = null;
+        this.tableContainer = null;
+    }
+    isEditorElement(target) {
+        var _a;
+        return ((_a = this.wrapContainer) === null || _a === void 0 ? void 0 : _a.contains(target)) || this.isClickEditorElement(target);
+    }
+    isClickEditorElement(target) {
+        while (target) {
+            // 约定的类名
+            if (target.classList && target.classList.contains('table-editor-element')) {
+                return true;
+            }
+            target = target.parentNode;
+        }
+        return false;
+    }
 }
 
 export { DynamicRenderEditor };

package/es/edit/util.js

@@ -3,37 +3,57 @@ import { isValid } from '@visactor/vutils';
 import { DynamicRenderEditor } from './editor.js';
 import { DYNAMIC_RENDER_EDITOR } from '../constants.js';
 
-function checkRenderEditor(column, getEditCustomNode) {
-    const { editor } = column || {};
-    const key = getRenderEditorColumnKeyField(column);
-    if (!isValid(key) || editor !== DYNAMIC_RENDER_EDITOR) {
-        return false;
-    }
-    if (typeof getEditCustomNode === 'function') {
-        column.getEditCustomNode = getEditCustomNode;
-        if (Array.isArray(column.columns) && column.columns.length) {
-            for (const childColumn of column.columns) {
-                checkRenderEditor(childColumn, getEditCustomNode);
-            }
-        }
-        return true;
-    }
-    return typeof column.getEditCustomNode === 'function';
-}
-function getRenderEditorColumnKeyField(column) {
-    const { field, key } = column || {};
-    return isValid(key) ? key : field;
-}
-function getRenderEditor(create, currentContext) {
-    const registeredEditor = register.editor(DYNAMIC_RENDER_EDITOR);
-    let renderEditor = registeredEditor
-        ? registeredEditor
-        : undefined;
-    if (!renderEditor && !!create) {
-        renderEditor = new DynamicRenderEditor(currentContext);
-        register.editor(DYNAMIC_RENDER_EDITOR, renderEditor);
-    }
-    return renderEditor;
+/**
+ * @description: 校验动态渲染式编辑器
+ * @param {any} column
+ * @param {any} getEditCustomNode
+ * @return {*}
+ */
+function checkRenderEditor(column, getEditCustomNode) {
+    const { editor } = column || {};
+    const key = getRenderEditorColumnKeyField(column);
+    if (!isValid(key) || editor !== DYNAMIC_RENDER_EDITOR) {
+        return false;
+    }
+    if (typeof getEditCustomNode === 'function') {
+        column.getEditCustomNode = getEditCustomNode;
+        // 处理子列
+        if (Array.isArray(column.columns) && column.columns.length) {
+            for (const childColumn of column.columns) {
+                checkRenderEditor(childColumn, getEditCustomNode);
+            }
+        }
+        return true;
+    }
+    return typeof column.getEditCustomNode === 'function';
+}
+/**
+ * @description: 获取渲染式编辑器的列配置主键
+ * @param {any} column
+ * @return {*}
+ */
+function getRenderEditorColumnKeyField(column) {
+    const { field, key } = column || {};
+    // 兼容取 field
+    return isValid(key) ? key : field;
+}
+/**
+ * @description: 获取动态渲染式编辑器
+ * @param {boolean} create
+ * @param {any} currentContext
+ * @return {*}
+ */
+function getRenderEditor(create, currentContext) {
+    const registeredEditor = register.editor(DYNAMIC_RENDER_EDITOR);
+    let renderEditor = registeredEditor
+        ? registeredEditor
+        : undefined;
+    if (!renderEditor && !!create) {
+        // 注册自定义编辑器
+        renderEditor = new DynamicRenderEditor(currentContext);
+        register.editor(DYNAMIC_RENDER_EDITOR, renderEditor);
+    }
+    return renderEditor;
 }
 
 export { checkRenderEditor, getRenderEditor, getRenderEditorColumnKeyField };