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

package/cjs/eventsUtils.js

@@ -2,67 +2,104 @@
 
 var VTable = require('@visactor/vtable');
 
-const EVENT_TYPE = Object.assign(Object.assign(Object.assign({}, VTable.ListTable.EVENT_TYPE), VTable.PivotTable.EVENT_TYPE), VTable.PivotChart.EVENT_TYPE);
-const TABLE_EVENTS = {
-    onClickCell: EVENT_TYPE.CLICK_CELL,
-    onDblClickCell: EVENT_TYPE.DBLCLICK_CELL,
-    onMouseDownCell: EVENT_TYPE.MOUSEDOWN_CELL,
-    onMouseUpCell: EVENT_TYPE.MOUSEUP_CELL,
-    onSelectedCell: EVENT_TYPE.SELECTED_CELL,
-    onKeyDown: EVENT_TYPE.KEYDOWN,
-    onMouseEnterTable: EVENT_TYPE.MOUSEENTER_TABLE,
-    onMouseLeaveTable: EVENT_TYPE.MOUSELEAVE_TABLE,
-    onMouseDownTable: EVENT_TYPE.MOUSEDOWN_TABLE,
-    onMouseMoveCell: EVENT_TYPE.MOUSEMOVE_CELL,
-    onMouseEnterCell: EVENT_TYPE.MOUSEENTER_CELL,
-    onMouseLeaveCell: EVENT_TYPE.MOUSELEAVE_CELL,
-    onContextMenuCell: EVENT_TYPE.CONTEXTMENU_CELL,
-    onContextMenuCanvas: EVENT_TYPE.CONTEXTMENU_CANVAS,
-    onResizeColumn: EVENT_TYPE.RESIZE_COLUMN,
-    onResizeColumnEnd: EVENT_TYPE.RESIZE_COLUMN_END,
-    onChangeHeaderPosition: EVENT_TYPE.CHANGE_HEADER_POSITION,
-    onChangeHeaderPositionStart: EVENT_TYPE.CHANGE_HEADER_POSITION_START,
-    onChangeHeaderPositionFail: EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL,
-    onSortClick: EVENT_TYPE.SORT_CLICK,
-    onFreezeClick: EVENT_TYPE.FREEZE_CLICK,
-    onScroll: EVENT_TYPE.SCROLL,
-    onDropdownMenuClick: EVENT_TYPE.DROPDOWN_MENU_CLICK,
-    onMouseOverChartSymbol: EVENT_TYPE.MOUSEOVER_CHART_SYMBOL,
-    onDragSelectEnd: EVENT_TYPE.DRAG_SELECT_END,
-    onDropdownIconClick: EVENT_TYPE.DROPDOWN_ICON_CLICK,
-    onDropdownMenuClear: EVENT_TYPE.DROPDOWN_MENU_CLEAR,
-    onTreeHierarchyStateChange: EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE,
-    onShowMenu: EVENT_TYPE.SHOW_MENU,
-    onHideMenu: EVENT_TYPE.HIDE_MENU,
-    onIconClick: EVENT_TYPE.ICON_CLICK,
-    onLegendItemClick: EVENT_TYPE.LEGEND_ITEM_CLICK,
-    onLegendItemHover: EVENT_TYPE.LEGEND_ITEM_HOVER,
-    onLegendItemUnHover: EVENT_TYPE.LEGEND_ITEM_UNHOVER,
-    onLegendChange: EVENT_TYPE.LEGEND_CHANGE,
-    onMouseEnterAxis: EVENT_TYPE.MOUSEENTER_AXIS,
-    onMouseLeaveAxis: EVENT_TYPE.MOUSELEAVE_AXIS,
-    onCheckboxStateChange: EVENT_TYPE.CHECKBOX_STATE_CHANGE,
-    onRadioStateChange: EVENT_TYPE.RADIO_STATE_CHANGE,
-    onAfterRender: EVENT_TYPE.AFTER_RENDER,
-    onInitialized: EVENT_TYPE.INITIALIZED,
-    onPivotSortClick: EVENT_TYPE.PIVOT_SORT_CLICK,
-    onDrillMenuClick: EVENT_TYPE.DRILLMENU_CLICK,
-    onVChartEventType: EVENT_TYPE.VCHART_EVENT_TYPE,
-    onChangeCellValue: EVENT_TYPE.CHANGE_CELL_VALUE,
-    onMousedownFillHandle: EVENT_TYPE.MOUSEDOWN_FILL_HANDLE,
-    onDragFillHandleEnd: EVENT_TYPE.DRAG_FILL_HANDLE_END,
-    onDblclickFillHandle: EVENT_TYPE.DBLCLICK_FILL_HANDLE,
-    onScrollVerticalEnd: EVENT_TYPE.SCROLL_VERTICAL_END,
-    onScrollHorizontalEnd: EVENT_TYPE.SCROLL_HORIZONTAL_END,
-    onChangCellValue: EVENT_TYPE.CHANGE_CELL_VALUE,
-    onEmptyTipClick: EVENT_TYPE.EMPTY_TIP_CLICK,
-    onEmptyTipDblClick: EVENT_TYPE.EMPTY_TIP_DBLCLICK,
-    onButtonClick: EVENT_TYPE.BUTTON_CLICK,
-    onBeforeCacheChartImage: EVENT_TYPE.BEFORE_CACHE_CHART_IMAGE,
-    onPastedData: EVENT_TYPE.PASTED_DATA,
-    onSelectedClear: EVENT_TYPE.SELECTED_CLEAR
-};
+const EVENT_TYPE = Object.assign(Object.assign(Object.assign({}, VTable.ListTable.EVENT_TYPE), VTable.PivotTable.EVENT_TYPE), VTable.PivotChart.EVENT_TYPE);
+const TABLE_EVENTS = {
+    onClickCell: EVENT_TYPE.CLICK_CELL,
+    onDblClickCell: EVENT_TYPE.DBLCLICK_CELL,
+    onMouseDownCell: EVENT_TYPE.MOUSEDOWN_CELL,
+    onMouseUpCell: EVENT_TYPE.MOUSEUP_CELL,
+    onSelectedCell: EVENT_TYPE.SELECTED_CELL,
+    onKeyDown: EVENT_TYPE.KEYDOWN,
+    onMouseEnterTable: EVENT_TYPE.MOUSEENTER_TABLE,
+    onMouseLeaveTable: EVENT_TYPE.MOUSELEAVE_TABLE,
+    onMouseDownTable: EVENT_TYPE.MOUSEDOWN_TABLE,
+    onMouseMoveCell: EVENT_TYPE.MOUSEMOVE_CELL,
+    onMouseEnterCell: EVENT_TYPE.MOUSEENTER_CELL,
+    onMouseLeaveCell: EVENT_TYPE.MOUSELEAVE_CELL,
+    onContextMenuCell: EVENT_TYPE.CONTEXTMENU_CELL,
+    onContextMenuCanvas: EVENT_TYPE.CONTEXTMENU_CANVAS,
+    onResizeColumn: EVENT_TYPE.RESIZE_COLUMN,
+    onResizeColumnEnd: EVENT_TYPE.RESIZE_COLUMN_END,
+    onChangeHeaderPosition: EVENT_TYPE.CHANGE_HEADER_POSITION,
+    onChangeHeaderPositionStart: EVENT_TYPE.CHANGE_HEADER_POSITION_START,
+    onChangeHeaderPositionFail: EVENT_TYPE.CHANGE_HEADER_POSITION_FAIL,
+    onSortClick: EVENT_TYPE.SORT_CLICK,
+    onFreezeClick: EVENT_TYPE.FREEZE_CLICK,
+    onScroll: EVENT_TYPE.SCROLL,
+    onDropdownMenuClick: EVENT_TYPE.DROPDOWN_MENU_CLICK,
+    onMouseOverChartSymbol: EVENT_TYPE.MOUSEOVER_CHART_SYMBOL,
+    onDragSelectEnd: EVENT_TYPE.DRAG_SELECT_END,
+    onDropdownIconClick: EVENT_TYPE.DROPDOWN_ICON_CLICK,
+    onDropdownMenuClear: EVENT_TYPE.DROPDOWN_MENU_CLEAR,
+    onTreeHierarchyStateChange: EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE,
+    onShowMenu: EVENT_TYPE.SHOW_MENU,
+    onHideMenu: EVENT_TYPE.HIDE_MENU,
+    onIconClick: EVENT_TYPE.ICON_CLICK,
+    onLegendItemClick: EVENT_TYPE.LEGEND_ITEM_CLICK,
+    onLegendItemHover: EVENT_TYPE.LEGEND_ITEM_HOVER,
+    onLegendItemUnHover: EVENT_TYPE.LEGEND_ITEM_UNHOVER,
+    onLegendChange: EVENT_TYPE.LEGEND_CHANGE,
+    onMouseEnterAxis: EVENT_TYPE.MOUSEENTER_AXIS,
+    onMouseLeaveAxis: EVENT_TYPE.MOUSELEAVE_AXIS,
+    onCheckboxStateChange: EVENT_TYPE.CHECKBOX_STATE_CHANGE,
+    onRadioStateChange: EVENT_TYPE.RADIO_STATE_CHANGE,
+    onAfterRender: EVENT_TYPE.AFTER_RENDER,
+    onInitialized: EVENT_TYPE.INITIALIZED,
+    // pivot table only
+    onPivotSortClick: EVENT_TYPE.PIVOT_SORT_CLICK,
+    onDrillMenuClick: EVENT_TYPE.DRILLMENU_CLICK,
+    // pivot chart only
+    onVChartEventType: EVENT_TYPE.VCHART_EVENT_TYPE,
+    onChangeCellValue: EVENT_TYPE.CHANGE_CELL_VALUE,
+    onMousedownFillHandle: EVENT_TYPE.MOUSEDOWN_FILL_HANDLE,
+    onDragFillHandleEnd: EVENT_TYPE.DRAG_FILL_HANDLE_END,
+    onDblclickFillHandle: EVENT_TYPE.DBLCLICK_FILL_HANDLE,
+    onScrollVerticalEnd: EVENT_TYPE.SCROLL_VERTICAL_END,
+    onScrollHorizontalEnd: EVENT_TYPE.SCROLL_HORIZONTAL_END,
+    onChangCellValue: EVENT_TYPE.CHANGE_CELL_VALUE,
+    onEmptyTipClick: EVENT_TYPE.EMPTY_TIP_CLICK,
+    onEmptyTipDblClick: EVENT_TYPE.EMPTY_TIP_DBLCLICK,
+    onButtonClick: EVENT_TYPE.BUTTON_CLICK,
+    onBeforeCacheChartImage: EVENT_TYPE.BEFORE_CACHE_CHART_IMAGE,
+    onPastedData: EVENT_TYPE.PASTED_DATA,
+    onSelectedClear: EVENT_TYPE.SELECTED_CLEAR
+};
 const TABLE_EVENTS_KEYS = Object.keys(TABLE_EVENTS);
+// export const findEventProps = <T extends EventsProps>(
+//   props: T,
+//   supportedEvents: Record<string, string> = TABLE_EVENTS
+// ): EventsProps => {
+//   const result: EventsProps = {};
+//   Object.keys(props).forEach(key => {
+//     if (supportedEvents[key] && props[key]) {
+//       result[key] = props[key];
+//     }
+//   });
+//   return result;
+// };
+// export const bindEventsToTable = <T>(
+//   table: IVTable,
+//   newProps?: T | null,
+//   prevProps?: T | null,
+//   supportedEvents: Record<string, string> = TABLE_EVENTS
+// ) => {
+//   if (!table) return false;
+//   const prevEventProps = prevProps ? findEventProps(prevProps, supportedEvents) : {};
+//   const newEventProps = newProps ? findEventProps(newProps, supportedEvents) : {};
+//   Object.keys(supportedEvents).forEach(eventKey => {
+//     const prevHandler = prevEventProps[eventKey];
+//     const newHandler = newEventProps[eventKey];
+//     if (prevHandler !== newHandler) {
+//       if (prevHandler) {
+//         table.off(supportedEvents[eventKey], prevHandler);
+//       }
+//       if (newHandler) {
+//         table.on(supportedEvents[eventKey] as keyof TYPES.TableEventHandlersEventArgumentMap, newHandler);
+//       }
+//     }
+//   });
+//   return true;
+// };
 
 exports.TABLE_EVENTS = TABLE_EVENTS;
 exports.TABLE_EVENTS_KEYS = TABLE_EVENTS_KEYS;

package/cjs/hooks/useCellRender.js

@@ -4,26 +4,33 @@ var vue = require('vue');
 var vtableVueAttributePlugin = require('../components/custom/vtable-vue-attribute-plugin.js');
 var vutils = require('@visactor/vutils');
 
-function useCellRender(props, tableRef) {
-    var _a, _b;
-    const instance = vue.getCurrentInstance();
-    const createReactContainer = (_b = (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.createReactContainer;
-    vue.watchEffect(() => {
-        var _a, _b, _c;
-        if (!createReactContainer) {
-            return;
-        }
-        const pluginService = (_c = (_b = (_a = tableRef.value) === null || _a === void 0 ? void 0 : _a.scenegraph) === null || _b === void 0 ? void 0 : _b.stage) === null || _c === void 0 ? void 0 : _c.pluginService;
-        if (!pluginService) {
-            return;
-        }
-        const exist = pluginService.findPluginsByName('VTableVueAttributePlugin');
-        if (vutils.isArray(exist) && !!exist.length) {
-            return;
-        }
-        const plugin = new vtableVueAttributePlugin.VTableVueAttributePlugin(instance === null || instance === void 0 ? void 0 : instance.appContext);
-        pluginService.register(plugin);
-    });
+/**
+ * 自定义单元格渲染器
+ * @param props
+ * @param tableRef
+ */
+function useCellRender(props, tableRef) {
+    var _a, _b;
+    /** 当前实例 */
+    const instance = vue.getCurrentInstance();
+    /** 自定义 dom 开关 */
+    const createReactContainer = (_b = (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.createReactContainer;
+    vue.watchEffect(() => {
+        var _a, _b, _c;
+        if (!createReactContainer) {
+            return;
+        }
+        const pluginService = (_c = (_b = (_a = tableRef.value) === null || _a === void 0 ? void 0 : _a.scenegraph) === null || _b === void 0 ? void 0 : _b.stage) === null || _c === void 0 ? void 0 : _c.pluginService;
+        if (!pluginService) {
+            return;
+        }
+        const exist = pluginService.findPluginsByName('VTableVueAttributePlugin');
+        if (vutils.isArray(exist) && !!exist.length) {
+            return;
+        }
+        const plugin = new vtableVueAttributePlugin.VTableVueAttributePlugin(instance === null || instance === void 0 ? void 0 : instance.appContext);
+        pluginService.register(plugin);
+    });
 }
 
 exports.useCellRender = useCellRender;

package/cjs/hooks/useEditorRender.js

@@ -2,60 +2,83 @@
 
 var vue = require('vue');
 var vutils = require('@visactor/vutils');
-require('tslib');
-require('@visactor/vtable');
 var util = require('../edit/util.js');
 
-function useEditorRender(props, tableRef) {
-    const instance = vue.getCurrentInstance();
-    const validColumns = vue.computed(() => {
-        var _a;
-        const columns = flattenColumns(((_a = props.options) === null || _a === void 0 ? void 0 : _a.columns) || []);
-        if (!vutils.isArray(columns)) {
-            return [];
-        }
-        return columns.filter(col => !!vutils.isObject(col) && !!util.checkRenderEditor(col));
-    });
-    vue.watchEffect(() => {
-        resolveRenderEditor();
-    });
-    vue.onBeforeUnmount(() => {
-        releaseRenderEditor();
-    });
-    function resolveRenderEditor() {
-        const id = getTableId();
-        if (!vutils.isValid(id)) {
-            return;
-        }
-        let renderEditor = util.getRenderEditor();
-        if (renderEditor) {
-            renderEditor.removeNode(id);
-        }
-        else if (validColumns.value.length > 0) {
-            renderEditor = util.getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
-        }
-        validColumns.value.forEach(column => {
-            const { getEditCustomNode } = column;
-            const key = util.getRenderEditorColumnKeyField(column);
-            renderEditor.registerNode(id, key, getEditCustomNode);
-            delete column.editCustomNode;
-        });
-    }
-    function releaseRenderEditor() {
-        const id = getTableId();
-        if (!vutils.isValid(id)) {
-            return;
-        }
-        const renderEditor = util.getRenderEditor();
-        renderEditor === null || renderEditor === void 0 ? void 0 : renderEditor.release(id);
-    }
-    function getTableId() {
-        var _a;
-        return (_a = tableRef.value) === null || _a === void 0 ? void 0 : _a.id;
-    }
-}
-function flattenColumns(columns) {
-    return columns.flatMap(column => (Array.isArray(column.columns) ? flattenColumns(column.columns) : column));
+/**
+ * 编辑渲染器
+ * @param props
+ * @param tableRef
+ */
+function useEditorRender(props, tableRef) {
+    /** 当前实例 */
+    const instance = vue.getCurrentInstance();
+    /** 需要渲染编辑器的列 */
+    const validColumns = vue.computed(() => {
+        var _a;
+        const columns = flattenColumns(((_a = props.options) === null || _a === void 0 ? void 0 : _a.columns) || []);
+        if (!vutils.isArray(columns)) {
+            return [];
+        }
+        return columns.filter(col => !!vutils.isObject(col) && !!util.checkRenderEditor(col));
+    });
+    vue.watchEffect(() => {
+        resolveRenderEditor();
+    });
+    vue.onBeforeUnmount(() => {
+        releaseRenderEditor();
+    });
+    /**
+     * @description: 动态渲染式编辑器
+     * @return {*}
+     */
+    function resolveRenderEditor() {
+        const id = getTableId();
+        if (!vutils.isValid(id)) {
+            return;
+        }
+        // 移除原本已存在的编辑器
+        let renderEditor = util.getRenderEditor();
+        if (renderEditor) {
+            renderEditor.removeNode(id);
+        }
+        else if (validColumns.value.length > 0) {
+            // 注册编辑器
+            renderEditor = util.getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
+        }
+        validColumns.value.forEach(column => {
+            const { getEditCustomNode } = column;
+            const key = util.getRenderEditorColumnKeyField(column);
+            renderEditor.registerNode(id, key, getEditCustomNode);
+            delete column.editCustomNode;
+        });
+    }
+    /**
+     * @description: 释放动态渲染式编辑器
+     * @return {*}
+     */
+    function releaseRenderEditor() {
+        const id = getTableId();
+        if (!vutils.isValid(id)) {
+            return;
+        }
+        const renderEditor = util.getRenderEditor();
+        renderEditor === null || renderEditor === void 0 ? void 0 : renderEditor.release(id);
+    }
+    /**
+     * @description: 获取表格 id
+     * @return {*}
+     */
+    function getTableId() {
+        var _a;
+        return (_a = tableRef.value) === null || _a === void 0 ? void 0 : _a.id;
+    }
+}
+/**
+ * @description: 获取所有扁平化的 columns
+ * @param {any} columns
+ */
+function flattenColumns(columns) {
+    return columns.flatMap(column => (Array.isArray(column.columns) ? flattenColumns(column.columns) : column));
 }
 
 exports.useEditorRender = useEditorRender;

package/cjs/index.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var VTable = require('@visactor/vtable');
+var constants = require('./constants.js');
 var listTable_vue_vue_type_script_setup_true_lang = require('./tables/list-table.vue.js');
 var pivotTable_vue_vue_type_script_setup_true_lang = require('./tables/pivot-table.vue.js');
 var pivotChart_vue_vue_type_script_setup_true_lang = require('./tables/pivot-chart.vue.js');
-var chartModule = require('./tables/chartModule.js');
 var listColumn = require('./components/list/list-column.js');
 var pivotColumnDimension = require('./components/pivot/pivot-column-dimension.js');
 var pivotRowDimension = require('./components/pivot/pivot-row-dimension.js');
@@ -20,7 +20,7 @@ var text = require('./components/custom/text.js');
 var tag = require('./components/custom/tag.js');
 var radio = require('./components/custom/radio.js');
 var checkBox = require('./components/custom/checkBox.js');
-var constants = require('./constants.js');
+var chartModule = require('./tables/chartModule.js');
 
 function _interopNamespaceDefault(e) {
 	var n = Object.create(null);
@@ -41,17 +41,17 @@ function _interopNamespaceDefault(e) {
 
 var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
 
-const version = "1.25.0";
+const version = "1.25.1-alpha.1";
 
 exports.VTable = VTable__namespace;
 Object.defineProperty(exports, 'register', {
 	enumerable: true,
 	get: function () { return VTable.register; }
 });
+exports.DYNAMIC_RENDER_EDITOR = constants.DYNAMIC_RENDER_EDITOR;
 exports.ListTable = listTable_vue_vue_type_script_setup_true_lang;
 exports.PivotTable = pivotTable_vue_vue_type_script_setup_true_lang;
 exports.PivotChart = pivotChart_vue_vue_type_script_setup_true_lang;
-exports.registerChartModule = chartModule.registerChartModule;
 exports.ListColumn = listColumn;
 exports.PivotColumnDimension = pivotColumnDimension;
 exports.PivotRowDimension = pivotRowDimension;
@@ -67,5 +67,5 @@ exports.Text = text;
 exports.Tag = tag;
 exports.Radio = radio;
 exports.CheckBox = checkBox;
-exports.DYNAMIC_RENDER_EDITOR = constants.DYNAMIC_RENDER_EDITOR;
+exports.registerChartModule = chartModule.registerChartModule;
 exports.version = version;