Merge pull request #2862 from VisActor/docs/plugin

docs: add guides of plugins

docs/assets/demo/en/animation/carousel-animation.md

@@ -3,7 +3,7 @@ category: examples
 group: Animation
 title: carousel animation
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif
-option: ListTable#animationAppear
+link: '../guide/animation/carousel_animation'
 ---
 
 # Carousel Animation

docs/assets/demo/en/interaction/head-highlight.md

@@ -3,7 +3,7 @@ category: examples
 group: Interaction
 title: Highlight Header
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png
-option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross'
+link: '../guide/plugin/header-highlight'
 ---
 
 # Highlight Header

docs/assets/demo/en/interaction/invert-highlight.md

@@ -3,7 +3,7 @@ category: examples
 group: Interaction
 title: invert highlight
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png
-option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross'
+link: '../guide/plugin/invert-highlight'
 ---
 
 # Invert highlight

docs/assets/demo/zh/animation/carousel-animation.md

@@ -3,7 +3,7 @@ category: examples
 group: Animation
 title: 轮播动画
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif
-option: ListTable#animationAppear
+link: '../guide/animation/carousel_animation'
 ---
 
 # 轮播动画

docs/assets/demo/zh/interaction/head-highlight.md

@@ -3,7 +3,7 @@ category: examples
 group: Interaction
 title: 高亮表头
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png
-option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross'
+link: '../guide/plugin/header-highlight'
 ---
 
 # 高亮表头

docs/assets/demo/zh/interaction/invert-highlight.md

@@ -3,7 +3,7 @@ category: examples
 group: Interaction
 title: 反选高亮
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png
-option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross'
+link: '../guide/plugin/invert-highlight'
 ---
 
 # 反选高亮

docs/assets/guide/en/animation/carousel_animation.md

@@ -0,0 +1,51 @@
+# Carousel Animation
+
+VTable provides carousel animation plugin, which can implement the carousel scrolling animation effect of the table.
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif" style="flex: 0 0 50%; padding: 10px;">
+</div>
+
+## Carousel Animation Configuration
+
+- `VTable.CarouselAnimationPlugin`  carousel animation plugin, can configure the following parameters:
+  - `rowCount` scroll row count in a carousel animation
+  - `colCount` scroll column count in a carousel animation
+  - `animationDuration` The duration of a single carousel animation, in milliseconds
+  - `animationDelay` The delay of a single carousel animation, in milliseconds
+  - `animationEasing` The easing function of a single carousel animation
+  - `replaceScrollAction` Whether to replace the scroll action, if true, the scroll action will be replaced by the carousel animation
+
+```js
+const carouselAnimationPlugin = new VTable.CarouselAnimationPlugin(tableInstance, {
+  rowCount: 2,
+  replaceScrollAction: true
+});
+
+carouselAnimationPlugin.play();
+```
+
+For specific usage, please refer to [demo](../../demo/animation/carousel-animation)
+
+## Carousel Animation API
+
+### play
+
+Start carousel animation.
+```
+carouselAnimationPlugin.play()
+```
+
+### pause
+
+Pause carousel animation.
+```
+carouselAnimationPlugin.pause()
+```
+
+### reset
+
+Reset carousel animation.
+```
+carouselAnimationPlugin.reset()
+```

docs/assets/guide/en/plugin/header-highlight.md

@@ -0,0 +1,23 @@
+# Header Highlight Plugin
+
+VTable provides Header Highlight plugin, which can highlight the corresponding header (row header and column header) after selecting a cell.
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png" style="flex: 0 0 50%; padding: 10px;">
+</div>
+
+## Header Highlight Plugin Configuration
+
+- `VTable.HeaderHighlightPlugin`  Header Highlight, can configure the following parameters:
+  - `columnHighlight` whether highlight the column
+  - `rowHighlight` whether highlight the row
+  - `colHighlightBGColor` the background color of the column highlight
+  - `rowHighlightBGColor` the background color of the row highlight
+  - `colHighlightColor` the color of the column highlight
+  - `rowHighlightColor` the color of the row highlight
+
+```js
+const highlightPlugin = new VTable.HeaderHighlightPlugin(tableInstance, {});
+```
+
+For specific usage, please refer to [demo](../../demo/interaction/head-highlight)

docs/assets/guide/en/plugin/invert-highlight.md

@@ -0,0 +1,50 @@
+# Invert Highlight Plugin
+
+VTable provides Invert Highlight plugin, which can highlight the specified area after deselection.
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png" style="flex: 0 0 50%; padding: 10px;">
+</div>
+
+## Invert Highlight Plugin Configuration
+
+- `VTable.InvertHighlightPlugin`  Invert Highlight Plugin, can configure the following parameters:
+  - `fill` invert highlight background color
+  - `opacity` invert highlight opacity
+- `setInvertHighlightRange` set highlight range
+
+```js
+const highlightPlugin = new VTable.InvertHighlightPlugin(tableInstance, {});
+
+highlightPlugin.setInvertHighlightRange({
+  start: {
+    col: 0,
+    row: 6
+  },
+  end: {
+    col: 5,
+    row: 6
+  }
+});
+```
+
+For specific usage, please refer to [demo](../../demo/interaction/head-highlight)
+
+## Invert Highlight Plugin API
+
+### setInvertHighlightRange
+
+Set highlight range.
+
+```ts
+setInvertHighlightRange(range: {
+  start: {
+    col: number;
+    row: number;
+  };
+  end: {
+    col: number;
+    row: number;
+  };
+}): void;
+```

docs/assets/guide/menu.json

@@ -435,6 +435,13 @@
             "zh": "滚动动画",
             "en": "scroll animationt"
           }
+        },
+        {
+          "path": "carousel_animation",
+          "title": {
+            "zh": "轮播动画",
+            "en": "carousel animationt"
+          }
         }
       ]
     },
@@ -676,6 +683,29 @@
         }
       ]
     },
+    {
+      "path": "plugin",
+      "title": {
+        "zh": "插件",
+        "en": "plugin"
+      },
+      "children": [
+        {
+          "path": "invert-highlight",
+          "title": {
+            "zh": "反选高亮",
+            "en": "Invert Highlight"
+          }
+        },
+        {
+          "path": "header-highlight",
+          "title": {
+            "zh": "表头高亮",
+            "en": "Header Highlight"
+          }
+        }
+      ]
+    },
     {
       "path": "Developer_Ecology",
       "title": {

docs/assets/guide/zh/animation/carousel_animation.md

@@ -0,0 +1,51 @@
+# 表格轮播动画
+
+VTable 提供轮播动画插件，可以实现表格的轮播滚动动画效果。
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif" style="flex: 0 0 50%; padding: 10px;">
+</div>
+
+## 轮播动画配置项
+
+- `VTable.CarouselAnimationPlugin`  轮播动画插件，可以配置以下参数：
+  - `rowCount` 一次动画滚动的行数
+  - `colCount` 一次动画滚动的列数
+  - `animationDuration` 一次滚动动画的时间
+  - `animationDelay` 动画间隔时间
+  - `animationEasing` 动画缓动函数
+  - `replaceScrollAction` 是否替换滚动行为，如果为 true ，每次滚动操作会移动对于的行数/列数
+
+```js
+const carouselAnimationPlugin = new VTable.CarouselAnimationPlugin(tableInstance, {
+  rowCount: 2,
+  replaceScrollAction: true
+});
+
+carouselAnimationPlugin.play();
+```
+
+具体使用参考[demo](../../demo/animation/carousel-animation)
+
+## 轮播动画API
+
+### play
+
+开始轮播动画。
+```
+carouselAnimationPlugin.play()
+```
+
+### pause
+
+暂停轮播动画。
+```
+carouselAnimationPlugin.pause()
+```
+
+### reset
+
+重置轮播动画。
+```
+carouselAnimationPlugin.reset()
+```

docs/assets/guide/zh/plugin/header-highlight.md

@@ -0,0 +1,23 @@
+# 表头高亮插件
+
+VTable 提供表头高亮插件，支持选中单元格后，高亮对应的表头（行头和列头）。
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png" style="flex: 0 0 50%; padding: 10px;">
+</div>
+
+## 表头高亮插件配置项
+
+- `VTable.HeaderHighlightPlugin`  表头高亮插件，可以配置以下参数：
+  - `columnHighlight` 是否高亮列头
+  - `rowHighlight` 是否高亮行头
+  - `colHighlightBGColor` 列头高亮背景色
+  - `rowHighlightBGColor` 行头高亮背景色
+  - `colHighlightColor` 列头高亮字体色
+  - `rowHighlightColor` 行头高亮字体色
+
+```js
+const highlightPlugin = new VTable.HeaderHighlightPlugin(tableInstance, {});
+```
+
+具体使用参考[demo](../../demo/interaction/head-highlight)

docs/assets/guide/zh/plugin/invert-highlight.md

@@ -0,0 +1,49 @@
+# 反选高亮插件
+
+VTable 提供反选高亮插件，支持反选高亮指定区域。
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png" style="flex: 0 0 50%; padding: 10px;">
+</div>
+
+## 反选高亮插件配置项
+
+- `VTable.InvertHighlightPlugin`  反选高亮插件，可以配置以下参数：
+  - `fill` 反选高亮背景色
+  - `opacity` 反选高亮透明度
+
+```js
+const highlightPlugin = new VTable.InvertHighlightPlugin(tableInstance, {});
+
+highlightPlugin.setInvertHighlightRange({
+  start: {
+    col: 0,
+    row: 6
+  },
+  end: {
+    col: 5,
+    row: 6
+  }
+});
+```
+
+具体使用参考[demo](../../demo/interaction/head-highlight)
+
+## 反选高亮插件 API
+
+### setInvertHighlightRange
+
+设置反选高亮范围。
+
+```ts
+setInvertHighlightRange(range: {
+  start: {
+    col: number;
+    row: number;
+  };
+  end: {
+    col: number;
+    row: number;
+  };
+}): void;
+```