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

package/es/eventsUtils.js

@@ -1,65 +1,102 @@
 import { ListTable, PivotTable, PivotChart } from '@visactor/vtable';
 
-const EVENT_TYPE = Object.assign(Object.assign(Object.assign({}, ListTable.EVENT_TYPE), PivotTable.EVENT_TYPE), 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({}, ListTable.EVENT_TYPE), PivotTable.EVENT_TYPE), 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;
+// };
 
 export { TABLE_EVENTS, TABLE_EVENTS_KEYS };

package/es/hooks/useCellRender.js

@@ -2,26 +2,33 @@ import { getCurrentInstance, watchEffect } from 'vue';
 import { VTableVueAttributePlugin } from '../components/custom/vtable-vue-attribute-plugin.js';
 import { isArray } from '@visactor/vutils';
 
-function useCellRender(props, tableRef) {
-    var _a, _b;
-    const instance = 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;
-    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 (isArray(exist) && !!exist.length) {
-            return;
-        }
-        const plugin = new 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 = 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;
+    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 (isArray(exist) && !!exist.length) {
+            return;
+        }
+        const plugin = new VTableVueAttributePlugin(instance === null || instance === void 0 ? void 0 : instance.appContext);
+        pluginService.register(plugin);
+    });
 }
 
 export { useCellRender };

package/es/hooks/useEditorRender.js

@@ -1,59 +1,82 @@
 import { getCurrentInstance, computed, watchEffect, onBeforeUnmount } from 'vue';
 import { isArray, isObject, isValid } from '@visactor/vutils';
-import 'tslib';
-import '@visactor/vtable';
 import { checkRenderEditor, getRenderEditor, getRenderEditorColumnKeyField } from '../edit/util.js';
 
-function useEditorRender(props, tableRef) {
-    const instance = getCurrentInstance();
-    const validColumns = computed(() => {
-        var _a;
-        const columns = flattenColumns(((_a = props.options) === null || _a === void 0 ? void 0 : _a.columns) || []);
-        if (!isArray(columns)) {
-            return [];
-        }
-        return columns.filter(col => !!isObject(col) && !!checkRenderEditor(col));
-    });
-    watchEffect(() => {
-        resolveRenderEditor();
-    });
-    onBeforeUnmount(() => {
-        releaseRenderEditor();
-    });
-    function resolveRenderEditor() {
-        const id = getTableId();
-        if (!isValid(id)) {
-            return;
-        }
-        let renderEditor = getRenderEditor();
-        if (renderEditor) {
-            renderEditor.removeNode(id);
-        }
-        else if (validColumns.value.length > 0) {
-            renderEditor = getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
-        }
-        validColumns.value.forEach(column => {
-            const { getEditCustomNode } = column;
-            const key = getRenderEditorColumnKeyField(column);
-            renderEditor.registerNode(id, key, getEditCustomNode);
-            delete column.editCustomNode;
-        });
-    }
-    function releaseRenderEditor() {
-        const id = getTableId();
-        if (!isValid(id)) {
-            return;
-        }
-        const renderEditor = 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 = getCurrentInstance();
+    /** 需要渲染编辑器的列 */
+    const validColumns = computed(() => {
+        var _a;
+        const columns = flattenColumns(((_a = props.options) === null || _a === void 0 ? void 0 : _a.columns) || []);
+        if (!isArray(columns)) {
+            return [];
+        }
+        return columns.filter(col => !!isObject(col) && !!checkRenderEditor(col));
+    });
+    watchEffect(() => {
+        resolveRenderEditor();
+    });
+    onBeforeUnmount(() => {
+        releaseRenderEditor();
+    });
+    /**
+     * @description: 动态渲染式编辑器
+     * @return {*}
+     */
+    function resolveRenderEditor() {
+        const id = getTableId();
+        if (!isValid(id)) {
+            return;
+        }
+        // 移除原本已存在的编辑器
+        let renderEditor = getRenderEditor();
+        if (renderEditor) {
+            renderEditor.removeNode(id);
+        }
+        else if (validColumns.value.length > 0) {
+            // 注册编辑器
+            renderEditor = getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
+        }
+        validColumns.value.forEach(column => {
+            const { getEditCustomNode } = column;
+            const key = getRenderEditorColumnKeyField(column);
+            renderEditor.registerNode(id, key, getEditCustomNode);
+            delete column.editCustomNode;
+        });
+    }
+    /**
+     * @description: 释放动态渲染式编辑器
+     * @return {*}
+     */
+    function releaseRenderEditor() {
+        const id = getTableId();
+        if (!isValid(id)) {
+            return;
+        }
+        const renderEditor = 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));
 }
 
 export { useEditorRender };

package/es/index.js

@@ -1,10 +1,10 @@
 import * as VTable from '@visactor/vtable';
 export { VTable };
 export { register } from '@visactor/vtable';
+export { DYNAMIC_RENDER_EDITOR } from './constants.js';
 export { default as ListTable } from './tables/list-table.vue.js';
 export { default as PivotTable } from './tables/pivot-table.vue.js';
 export { default as PivotChart } from './tables/pivot-chart.vue.js';
-export { registerChartModule } from './tables/chartModule.js';
 export { default as ListColumn } from './components/list/list-column.js';
 export { default as PivotColumnDimension } from './components/pivot/pivot-column-dimension.js';
 export { default as PivotRowDimension } from './components/pivot/pivot-row-dimension.js';
@@ -20,8 +20,8 @@ export { default as Text } from './components/custom/text.js';
 export { default as Tag } from './components/custom/tag.js';
 export { default as Radio } from './components/custom/radio.js';
 export { default as CheckBox } from './components/custom/checkBox.js';
-export { DYNAMIC_RENDER_EDITOR } from './constants.js';
+export { registerChartModule } from './tables/chartModule.js';
 
-const version = "1.25.0";
+const version = "1.25.1-alpha.1";
 
 export { version };