Merge remote-tracking branch 'origin/develop' into fix/bug-fix-0.15.3

common/changes/@visactor/vtable/666-bug-editor-object-setIn-columns_2023-12-01-08-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: editor object set in column be cloned\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

common/changes/@visactor/vtable/fix-release_resize_remove_2023-12-01-02-25.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: release tableInstance after resize event trigger\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-04-33.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: ts define optimize\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-07-39.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: columnWidthComputeMode only-header\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

docs/assets/guide/en/basic_function/row_height_column_width.md

@@ -34,17 +34,22 @@ const table = new VTable.ListTable({
   defaultColWidth: 100,
 });
 ```
+## Default Column Width for Row Header
 
-## Row header default column width
-
-In addition to the default column width setting, VTable also supports setting the column width for row headers. Pass`defaultHeaderColWidth`The configuration item can be set. The configuration item can be set to one, which corresponds to the width of each row header column. The following code example shows how to set the width of the first row header column to 50 and the width of the second row header column to 60:
+In addition to setting the default column width, VTable also supports setting the column width specifically for the row header. This can be achieved using the `defaultHeaderColWidth` configuration option, which can be an array representing the widths of each level of row header columns. The following code example demonstrates how to set the column width to 50 for the first-level row header column and 60 for the second-level row header column:
 
 ```javascript
 const table = new VTable.ListTable({
   defaultHeaderColWidth: [50, 60],
 });
 ```
 
+Please note that this configuration only applies to row headers. If you have column headers, this configuration option will not be considered (the logic will be based on the widths defined in the body section).
+
+Specifically:
+- For transposed basic tables, if you configure `defaultHeaderColWidth: [50, 'auto']`, it means that the first column of the transposed table header has a width of 50, and the second column adjusts its width based on the content of the cells.
+- For pivot tables, if you configure `defaultHeaderColWidth: [50, 'auto']`, it means that the first column of the row header (first-level dimension) has a width of 50, and the second column (second-level dimension) adjusts its width based on the content of the cells.
+
 ## Column width limit: maxWidth + minWidth
 
 In the process of configuring column widths, you may encounter scenarios where you need to limit the maximum or minimum column width of a column. VTable provides `maxWidth` and `maxWidth` Configuration items to limit the maximum and minimum column widths for each column. The following code example shows how to set a column to a maximum column width of 200 and a minimum column width of 50:
@@ -151,4 +156,11 @@ The calculation mode of table row height `heightMode` can also be configured as
 - Adaptive container height mode (adaptive): Use the height of the container to allocate the height of each row.
 - Automatic line height mode (autoHeight): Automatically calculate line height based on content, based on fontSize and lineHeight. The related configuration item `autoWrapText` automatically wraps lines, and can calculate the line height based on the multi-line text content after line wrapping.
 
+# FAQ
+## Setting Adaptive Content for Specific Columns to Calculate Column Width
+If you don't want to calculate the column width for every column, you can use the `width` property in the `columns` configuration instead of setting `widthMode: 'autoWidth'`.
+
+## Adapting Column Width Based on Header Content
+If you only need to calculate the width based on the header content, you can use `columnWidthComputeMode: 'only-header'`. However, you need to use it in conjunction with `widthMode: 'autoWidth'`.
+
 So far, we have introduced the table row height and column width calculation function in VTable, including row height, column width configuration, and table width mode. By mastering these functions, you can display and analyze data in VTable more conveniently to meet various practical needs.

docs/assets/guide/zh/basic_function/row_height_column_width.md

@@ -2,7 +2,23 @@
 
 在数据分析领域，表格是一种常见的数据展示方式。正确设置表格的行高列宽对于提高数据可读性和美观性具有重要意义。本教程将围绕 VTable 中的表格行高列宽计算功能，带了解如何正确配置行高和列宽以满足实际需求。
 
-# 行高配置
+# 列宽计算模式
+
+在 VTable 中，表格列宽度的计算模式`widthMode`可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoWidth`（自动列宽模式）。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-autoWidth)。（如果设置了`widthMode: 'autoWidth'`, 那么每一个单元格都会参与计算宽度，可想而知这个计算过程是需要耗费性能的。）
+
+- 标准模式（standard）：表格使用`width` 属性指定的宽度作为列宽度，如未指定，则采用 `defaultColWidth`或`defaultHeaderColWidth ` 设定的默认列宽。
+- 自适应容器宽度模式（adaptive）：在自适应容器宽度模式下表格使用容器的宽度分配列宽度(每列宽度的比例基于standard模式中的宽度值)。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-adaptive)
+- 自动列宽模式（autoWidth）：在自动宽度模式下，根据列头和 body 单元格中的内容自动计算列宽度，忽略设置的 `width` 属性和 `defaultColWidth`。
+
+# 行高计算模式
+
+表格行高度的计算模式`heightMode`也可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoHeight`（自动行高模式）。
+
+- 标准模式（standard）：采用 `defaultRowHeight` 及 `defaultHeaderRowHeight` 作为行高。
+- 自适应容器高度模式（adaptive）：使用容器的高度分配每行高度。
+- 自动行高模式（autoHeight）：根据内容自动计算行高，计算依据fontSize和lineHeight。相关搭配设置项`autoWrapText`自动换行，可以根据换行后的多行文本内容来计算行高。
+
+# 行高相关配置
 
 ## 默认行高
 
@@ -24,7 +40,45 @@ const table = new VTable.ListTable({
 });
 ```
 
-# 列宽配置
+## 行高撑满容器：autoFillHeight
+配置项 autoFillHeight，用于控制是否自动撑满容器高度。区别于高度模式`heightMode`的`adaptive`的自适应容器的效果，autoFillHeight 控制的是只有当行数较少的时候，表格可以自动撑满容器高度，但是当行数超过容器的时候根据真实情况来定行高可出现滚动条。
+```javascript
+const table = new VTable.ListTable({
+  autoFillHeight: true
+});
+```
+
+# 列宽相关配置
+
+## 列宽width
+可以在列属性中配置具体的宽度值，或者百分比或者'auto'自动计算列宽。
+```
+width?: number | string;
+```
+基本表格配置列宽：
+
+```javascript
+const table = new VTable.ListTable({
+  columns: [
+    {
+      // ...其他配置项
+      width: 200,
+    },
+  ],
+});
+```
+
+透视表列宽配置：
+```javascript
+const table = new VTable.PivotTable({
+  indicators: [
+    {
+      // ...其他配置项
+      width: 200,
+    },
+  ],
+});
+```
 
 ## 默认列宽
 
@@ -38,14 +92,20 @@ const table = new VTable.ListTable({
 
 ## 行表头默认列宽
 
-除了默认列宽的设置，VTable还支持针对行表头的列宽进行设置。通过`defaultHeaderColWidth`配置项进行设置，该配置项可以设定为一个，分别对应各级行表头列的宽度。以下代码示例展示了如何设置一级行表头列宽为 50，二级行表头列宽为 60：
+除了默认列宽的设置，VTable还支持针对行表头的列宽进行设置。通过`defaultHeaderColWidth`配置项进行设置，该配置项可以设定为一个，分别对应各级`行表头`列的宽度。以下代码示例展示了如何设置一级行表头列宽为 50，二级行表头列宽为 60：
 
 ```javascript
 const table = new VTable.ListTable({
   defaultHeaderColWidth: [50, 60],
 });
 ```
 
+需要注意的是：这个配置仅针对行表头起作用，如果是列表头的话是不考虑这个配置项的（会按body部分定义的宽度设置来执行逻辑）。
+
+具体的如：
+- 转置基本表格，如配置 defaultHeaderColWidth: [50, 'auto'], 表示转置表格的表头第一列宽度50，第二列按单元格内容适应宽度
+- 透视表，如配置 defaultHeaderColWidth: [50, 'auto'], 表示透视表的行表头第一列宽度50（也即第一级维度），第二列（第二级维度）按单元格内容适应宽度。
+
 ## 列宽限制配置：maxWidth+minWidth
 
 在配置列宽的过程中，您可能遇到需要限制某一列最大或最小列宽的场景。VTable 提供了 `maxWidth` 和 `maxWidth` 配置项，用于限制每一列的最大和最小列宽。以下代码示例展示了如何设置某一列的最大列宽为 200，最小列宽为 50：
@@ -93,29 +153,30 @@ const table = new VTable.ListTable({
   autoFillWidth: true
 });
 ```
+## 按内容计算列宽只计算表头或者body部分：columnWidthComputeMode
+计算内容宽度时限定只计算表头内容，或者body单元格内容，或者全部都适应计算。
 
-## 行高撑满容器：autoFillHeight
-配置项 autoFillHeight，用于控制是否自动撑满容器高度。区别于高度模式`heightMode`的`adaptive`的自适应容器的效果，autoFillHeight 控制的是只有当行数较少的时候，表格可以自动撑满容器高度，但是当行数超过容器的时候根据真实情况来定行高可出现滚动条。
+配置项定义：
+```
+  columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body';
+```
+用法
 ```javascript
 const table = new VTable.ListTable({
-  autoFillHeight: true
+  columns: [
+    {
+      // ...其他配置项
+      columnWidthComputeMode： 'only-header'
+    },
+  ],
 });
 ```
 
-# 列宽计算模式
+# FAQ
+## 特定列设置自适应内容来计算列宽
+如果并不是想每一列都需要计算列宽，可以使用columns中的width来定义，而不用设置`widthMode: 'autoWidth'`。
+## 列宽根据表头内容自适应
+如果只需要计算表头内容宽度的话，可以用`columnWidthComputeMode: 'only-header'`来实现。不过需配合设置`widthMode:'autoWidth'`使用。
 
-在 VTable 中，表格列宽度的计算模式`widthMode`可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoWidth`（自动列宽模式）。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-autoWidth)
-
-- 标准模式（standard）：表格使用`width` 属性指定的宽度作为列宽度，如未指定，则采用 `defaultColWidth`或`defaultHeaderColWidth ` 设定的默认列宽。
-- 自适应容器宽度模式（adaptive）：在自适应容器宽度模式下表格使用容器的宽度分配列宽度(每列宽度的比例基于standard模式中的宽度值)。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-adaptive)
-- 自动列宽模式（autoWidth）：在自动宽度模式下，根据列头和 body 单元格中的内容自动计算列宽度，忽略设置的 `width` 属性和 `defaultColWidth`。
-
-# 行高计算模式
-
-表格行高度的计算模式`heightMode`也可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoHeight`（自动行高模式）。
-
-- 标准模式（standard）：采用 `defaultRowHeight` 及 `defaultHeaderRowHeight` 作为行高。
-- 自适应容器高度模式（adaptive）：使用容器的高度分配每行高度。
-- 自动行高模式（autoHeight）：根据内容自动计算行高，计算依据fontSize和lineHeight。相关搭配设置项`autoWrapText`自动换行，可以根据换行后的多行文本内容来计算行高。
 
-至此，我们已经介绍了 VTable 中的表格行高列宽计算功能，包括行高、列宽配置，以及表格宽度模式。通过掌握这些功能，您可以更便捷地 VTable 中进行数据展示与分析，现各种实际需求。
+至此，我们已经介绍了 VTable 中的表格行高列宽计算功能，包括行高、列宽配置，以及表格宽度模式。通过掌握这些功能，您可以更便捷地 VTable 中进行数据展示与分析，现各种实际需求。

packages/react-vtable/src/components/pivot/pivot-dimension.tsx

@@ -1,8 +1,9 @@
 import type { BaseComponentProps } from '../base-component';
 import { createComponent } from '../base-component';
-import type { IDimension } from '@visactor/vtable';
+import type { IRowDimension, IColumnDimension } from '@visactor/vtable';
 
-export type PivotDimensionProps = IDimension & BaseComponentProps;
+export type RowPivotDimensionProps = IRowDimension & BaseComponentProps;
+export type ColumnPivotDimensionProps = IColumnDimension & BaseComponentProps;
 
-export const PivotColumnDimension = createComponent<PivotDimensionProps>('PivotColumnDimension', 'columns');
-export const PivotRowDimension = createComponent<PivotDimensionProps>('PivotRowDimension', 'rows');
+export const PivotColumnDimension = createComponent<ColumnPivotDimensionProps>('PivotColumnDimension', 'columns');
+export const PivotRowDimension = createComponent<RowPivotDimensionProps>('PivotRowDimension', 'rows');

packages/vtable/examples/editor/date-editor.ts

@@ -1,5 +1,5 @@
 import * as VTable from '../../src';
-import { DateInputEditor } from '@visactor/vtable-editors';
+import { DateInputEditor, InputEditor } from '@visactor/vtable-editors';
 const CONTAINER_ID = 'vTable';
 
 const date_editor = new DateInputEditor({});
@@ -143,7 +143,15 @@ export function createTable() {
     {
       field: 'hobbies',
       title: 'hobbies',
-      width: 200
+      width: 200,
+      editor(args) {
+        if (args.row % 3 === 0) {
+          return new InputEditor({});
+        } else if (args.row % 3 === 1) {
+          return new DateInputEditor({});
+        }
+        return null;
+      }
     },
     {
       field: 'birthday',

packages/vtable/src/ListTable.ts

@@ -66,6 +66,12 @@ export class ListTable extends BaseTable implements ListTableAPI {
       : options.header
       ? cloneDeep(options.header)
       : [];
+    options.columns.forEach((colDefine, index) => {
+      //如果editor 是一个IEditor的实例  需要这样重新赋值 否则clone后变质了
+      if (colDefine.editor) {
+        internalProps.columns[index].editor = colDefine.editor;
+      }
+    });
 
     this.showHeader = options.showHeader ?? true;
 
@@ -125,6 +131,11 @@ export class ListTable extends BaseTable implements ListTableAPI {
   updateColumns(columns: ColumnsDefine) {
     const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
     this.internalProps.columns = cloneDeep(columns);
+    columns.forEach((colDefine, index) => {
+      if (colDefine.editor) {
+        this.internalProps.columns[index].editor = colDefine.editor;
+      }
+    });
     this.options.columns = columns;
     this.refreshHeader();
     this.scenegraph.clearCells();
@@ -308,6 +319,11 @@ export class ListTable extends BaseTable implements ListTableAPI {
       : options.header
       ? cloneDeep(options.header)
       : [];
+    options.columns.forEach((colDefine, index) => {
+      if (colDefine.editor) {
+        internalProps.columns[index].editor = colDefine.editor;
+      }
+    });
     // 处理转置
     this.transpose = options.transpose ?? false;
     // 更新表头

packages/vtable/src/PivotTable.ts

@@ -14,7 +14,8 @@ import type {
   IDimensionInfo,
   SortOrder,
   IPagination,
-  CellLocation
+  CellLocation,
+  IIndicator
 } from './ts-types';
 import { HierarchyState } from './ts-types';
 import { PivotHeaderLayoutMap } from './layout/pivot-header-layout';
@@ -66,6 +67,12 @@ export class PivotTable extends BaseTable implements PivotTableAPI {
     this.internalProps.columns = cloneDeep(options.columns);
     this.internalProps.rows = cloneDeep(options.rows);
     this.internalProps.indicators = cloneDeep(options.indicators);
+    options.indicators?.forEach((indicatorDefine, index) => {
+      //如果editor 是一个IEditor的实例  需要这样重新赋值 否则clone后变质了
+      if (typeof indicatorDefine === 'object' && indicatorDefine?.editor) {
+        (this.internalProps.indicators[index] as IIndicator).editor = indicatorDefine.editor;
+      }
+    });
     this.internalProps.columnTree =
       options.indicatorsAsCol && !options.columns?.length && !options.columnTree ? [] : cloneDeep(options.columnTree);
     this.internalProps.rowTree =
@@ -199,6 +206,11 @@ export class PivotTable extends BaseTable implements PivotTableAPI {
     this.internalProps.columns = cloneDeep(options.columns);
     this.internalProps.rows = cloneDeep(options.rows);
     this.internalProps.indicators = !options.indicators?.length ? [] : cloneDeep(options.indicators);
+    options.indicators?.forEach((indicatorDefine, index) => {
+      if (typeof indicatorDefine === 'object' && indicatorDefine?.editor) {
+        (this.internalProps.indicators[index] as IIndicator).editor = indicatorDefine.editor;
+      }
+    });
     this.internalProps.columnTree =
       options.indicatorsAsCol && !options.columns?.length && !options.columnTree ? [] : cloneDeep(options.columnTree);
     this.internalProps.rowTree =

packages/vtable/src/event/EventHandler.ts

@@ -210,6 +210,11 @@ export class EventHandler {
       }
     }
 
+    for (const key in this.reseizeListeners) {
+      const resizeObserver: ResizeObserver = this.reseizeListeners[key];
+      resizeObserver?.disConnect();
+    }
+
     this.listeners = {};
   }
   release(): void {