Merge pull request #1054 from VisActor/release/0.19.0

[Auto release] release 0.19.0

common/config/rush/version-policies.json

@@ -1 +1 @@
-[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.18.4","mainProject":"@visactor/vtable","nextBump":"patch"}]
+[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.19.0","mainProject":"@visactor/vtable","nextBump":"minor"}]

docs/assets/demo/en/edit/custom-editor.md

@@ -59,9 +59,10 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)])
  this.editorConfig = editorConfig;
  }
 
- beginEditing(container, referencePosition, value) {
+ onStart({ container, referencePosition, value, endEdit }) {
  const that = this;
  this.container = container;
+ this.successCallback = endEdit;
  const input = document.createElement('input');
 
  input.setAttribute('type', 'text');
@@ -112,21 +113,17 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)])
  return this.element.value;
  }
 
- exit() {
+ onEnd() {
  this.picker.destroy();
  this.container.removeChild(this.element);
  }
 
- targetIsOnEditor(target) {
+ isEditorElement(target) {
  if (target === this.element || this.picker.el.contains(target)) {
  return true;
  }
  return false;
  }
-
- bindSuccessCallback(successCallback) {
- this.successCallback = successCallback;
- }
  }
  const custom_date_editor = new DateEditor();
  VTable.register.editor('custom-date', custom_date_editor);
@@ -308,5 +305,5 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)])
 })
 .catch((error) => {
  // 处理加载错误
-}); 
+});
 ```

docs/assets/demo/zh/edit/custom-editor.md

@@ -23,7 +23,7 @@ let tableInstance;
 // 使用时需要引入插件包@visactor/vtable-editors
 // import * as VTable_editors from '@visactor/vtable-editors';
 // 正常使用方式 const input_editor = new VTable.editors.InputEditor();
-// 官网编辑器中将 VTable.editors重命名成了VTable_editors 
+// 官网编辑器中将 VTable.editors重命名成了VTable_editors
 const input_editor = new VTable_editors.InputEditor();
 VTable.register.editor('input-editor', input_editor);
 const timestamp = new Date().getTime();
@@ -59,9 +59,10 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)])
  this.editorConfig = editorConfig;
  }
 
- beginEditing(container, referencePosition, value) {
+ onStart({ container, referencePosition, value, endEdit }) {
  const that = this;
  this.container = container;
+ this.successCallback = endEdit;
  const input = document.createElement('input');
 
  input.setAttribute('type', 'text');
@@ -112,21 +113,17 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)])
  return this.element.value;
  }
 
- exit() {
+ onEnd() {
  this.picker.destroy();
  this.container.removeChild(this.element);
  }
 
- targetIsOnEditor(target) {
+ isEditorElement(target) {
  if (target === this.element || this.picker.el.contains(target)) {
  return true;
  }
  return false;
  }
-
- bindSuccessCallback(successCallback) {
- this.successCallback = successCallback;
- }
  }
  const custom_date_editor = new DateEditor();
  VTable.register.editor('custom-date', custom_date_editor);
@@ -311,5 +308,5 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)])
 })
 .catch((error) => {
  // 处理加载错误
-}); 
+});
 ```

docs/assets/faq/en/20-How to use VTable in Vue.md

@@ -8,7 +8,7 @@ VTable does not encapsulate the Vue component, so how do you VTable in Vue?
 
 In Vue 3.x, using VTable
 
-Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/sandbox/mystifying-hamilton-3wl76r?file=%2Fsrc%2Fcomponents%2FPivotChart.vue%3A9339%2C1)for details.
+Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details.
 
 
 ## Code Example

docs/assets/faq/zh/20-How to use VTable in Vue.md

@@ -8,7 +8,7 @@ VTable没有封装Vue组件，那么如何在 Vue 中VTable呢？
 
 在 Vue 3.x 中使用 Vtable
 
-组合式 API，具体可以[参考在线 demo](https://codesandbox.io/p/sandbox/mystifying-hamilton-3wl76r?file=%2Fsrc%2Fcomponents%2FPivotChart.vue%3A9339%2C1)
+组合式 API，具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f)
 
 不同的表格，封装方式都是类似的
 

docs/assets/guide/en/Developer_Ecology/react.md

@@ -143,7 +143,7 @@ The props attributes accepted by PivotTable&PivotChart are the same as options.
 - PivotColumnHeaderTitle: column header title configuration, consistent with the definition of columnHeaderTitle in option [api](../../option/PivotTable#rowHeaderTitle)
 - PivotRowHeaderTitle: row header title configuration, consistent with the definition of rowHeaderTitle in option [api](../../option/PivotTable#columnHeaderTitle)
 - PivotCorner: Corner configuration, consistent with the definition of corner in option [api](../../option/PivotTable#corner)
- 
+
 ```jsx
  return (
  <PivotTable
@@ -205,56 +205,56 @@ The Props of the outermost table component of the unified label or the syntactic
 EventsProps are defined as follows:
 ```ts
 interface EventsProps {
- onClickCell?: EventCallback<TableEventHandlersEventArgumentMap['click_cell']>;
- onDblClickCell?: EventCallback<TableEventHandlersEventArgumentMap['dblclick_cell']>;
- onMouseDownCell?: EventCallback<TableEventHandlersEventArgumentMap['mousedown_cell']>;
- onMouseUpCell?: EventCallback<TableEventHandlersEventArgumentMap['mouseup_cell']>;
- onSelectedCell?: EventCallback<TableEventHandlersEventArgumentMap['selected_cell']>;
- onKeyDown?: EventCallback<TableEventHandlersEventArgumentMap['keydown']>;
- onMouseEnterTable?: EventCallback<TableEventHandlersEventArgumentMap['mouseenter_table']>;
- onMouseLeaveTable?: EventCallback<TableEventHandlersEventArgumentMap['mouseleave_table']>;
- onMouseMoveCell?: EventCallback<TableEventHandlersEventArgumentMap['mousemove_cell']>;
- onMouseEnterCell?: EventCallback<TableEventHandlersEventArgumentMap['mouseenter_cell']>;
- onMouseLeaveCell?: EventCallback<TableEventHandlersEventArgumentMap['mouseleave_cell']>;
- onContextMenuCell?: EventCallback<TableEventHandlersEventArgumentMap['contextmenu_cell']>;
- onResizeColumn?: EventCallback<TableEventHandlersEventArgumentMap['resize_column']>;
- onResizeColumnEnd?: EventCallback<TableEventHandlersEventArgumentMap['resize_column_end']>;
- onChangeHeaderPosition?: EventCallback<TableEventHandlersEventArgumentMap['change_header_position']>;
- onSortClick?: EventCallback<TableEventHandlersEventArgumentMap['sort_click']>;
- onFreezeClick?: EventCallback<TableEventHandlersEventArgumentMap['freeze_click']>;
- onScroll?: EventCallback<TableEventHandlersEventArgumentMap['scroll']>;
- onDropdownMenuClick?: EventCallback<TableEventHandlersEventArgumentMap['dropdown_menu_click']>;
- onMouseOverChartSymbol?: EventCallback<TableEventHandlersEventArgumentMap['mouseover_chart_symbol']>;
- onDragSelectEnd?: EventCallback<TableEventHandlersEventArgumentMap['drag_select_end']>;
-
- onDropdownIconClick?: EventCallback<TableEventHandlersEventArgumentMap['dropdown_icon_click']>;
- onDropdownMenuClear?: EventCallback<TableEventHandlersEventArgumentMap['dropdown_menu_clear']>;
-
- onTreeHierarchyStateChange?: EventCallback<TableEventHandlersEventArgumentMap['tree_hierarchy_state_change']>;
-
- onShowMenu?: EventCallback<TableEventHandlersEventArgumentMap['show_menu']>;
- onHideMenu?: EventCallback<TableEventHandlersEventArgumentMap['hide_menu']>;
-
- onIconClick?: EventCallback<TableEventHandlersEventArgumentMap['icon_click']>;
-
- onLegendItemClick?: EventCallback<TableEventHandlersEventArgumentMap['legend_item_click']>;
- onLegendItemHover?: EventCallback<TableEventHandlersEventArgumentMap['legend_item_hover']>;
- onLegendItemUnHover?: EventCallback<TableEventHandlersEventArgumentMap['legend_item_unHover']>;
- onLegendChange?: EventCallback<TableEventHandlersEventArgumentMap['legend_change']>;
-
- onMouseEnterAxis?: EventCallback<TableEventHandlersEventArgumentMap['mouseenter_axis']>;
- onMouseLeaveAxis?: EventCallback<TableEventHandlersEventArgumentMap['mouseleave_axis']>;
-
- onCheckboxStateChange?: EventCallback<TableEventHandlersEventArgumentMap['checkbox_state_change']>;
- onAfterRender?: EventCallback<TableEventHandlersEventArgumentMap['after_render']>;
- onInitialized?: EventCallback<TableEventHandlersEventArgumentMap['initialized']>;
+ onClickCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['click_cell']>;
+ onDblClickCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['dblclick_cell']>;
+ onMouseDownCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mousedown_cell']>;
+ onMouseUpCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseup_cell']>;
+ onSelectedCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['selected_cell']>;
+ onKeyDown?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['keydown']>;
+ onMouseEnterTable?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseenter_table']>;
+ onMouseLeaveTable?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseleave_table']>;
+ onMouseMoveCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mousemove_cell']>;
+ onMouseEnterCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseenter_cell']>;
+ onMouseLeaveCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseleave_cell']>;
+ onContextMenuCell?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['contextmenu_cell']>;
+ onResizeColumn?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['resize_column']>;
+ onResizeColumnEnd?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['resize_column_end']>;
+ onChangeHeaderPosition?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['change_header_position']>;
+ onSortClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['sort_click']>;
+ onFreezeClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['freeze_click']>;
+ onScroll?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['scroll']>;
+ onDropdownMenuClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['dropdown_menu_click']>;
+ onMouseOverChartSymbol?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseover_chart_symbol']>;
+ onDragSelectEnd?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['drag_select_end']>;
+
+ onDropdownIconClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['dropdown_icon_click']>;
+ onDropdownMenuClear?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['dropdown_menu_clear']>;
+
+ onTreeHierarchyStateChange?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['tree_hierarchy_state_change']>;
+
+ onShowMenu?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['show_menu']>;
+ onHideMenu?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['hide_menu']>;
+
+ onIconClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['icon_click']>;
+
+ onLegendItemClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['legend_item_click']>;
+ onLegendItemHover?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['legend_item_hover']>;
+ onLegendItemUnHover?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['legend_item_unHover']>;
+ onLegendChange?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['legend_change']>;
+
+ onMouseEnterAxis?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseenter_axis']>;
+ onMouseLeaveAxis?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['mouseleave_axis']>;
+
+ onCheckboxStateChange?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['checkbox_state_change']>;
+ onAfterRender?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['after_render']>;
+ onInitialized?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['initialized']>;
 
  // pivot table only
- onPivotSortClick?: EventCallback<TableEventHandlersEventArgumentMap['pivot_sort_click']>;
- onDrillMenuClick?: EventCallback<TableEventHandlersEventArgumentMap['drillmenu_click']>;
+ onPivotSortClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['pivot_sort_click']>;
+ onDrillMenuClick?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['drillmenu_click']>;
 
  // pivot chart only
- onVChartEventType?: EventCallback<TableEventHandlersEventArgumentMap['vchart_event_type']>;
+ onVChartEventType?: EventCallback<TYPES.TableEventHandlersEventArgumentMap['vchart_event_type']>;
 }
 ```
 

docs/assets/guide/en/Developer_Ecology/vue.md

@@ -2,7 +2,7 @@
 
 In Vue 3.x, using VTable
 
-Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/devbox/vchart-demo-vue-73h8wl)for details.
+Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details.
 
 
 ## Code Example
@@ -136,4 +136,14 @@ onMounted(() => {
 });
 </script>
 
+```
+
+## Notice
+
+If you need to use ref to save table instances, please use `shallowRef`. Using `ref` will affect internal attribute updates and cause rendering exceptions.
+
+
+```
+const tableInstance = shallowRef();
+tableInstance.value = new ListTable(listTableRef.value, option);
 ```