Merge remote-tracking branch 'origin/header-contextmenu'

Author: huangshuwei

CHANGE-LOG.md

@@ -7,6 +7,72 @@ Vx.x.x(TPL)
 -   Style changes
 -   Dependencies Changes
 
+V2.19.0
+
+### Breaking Changes
+
+-   Modify the non Chinese text in the right-click menu of the table, and convert the first lower case letter to upper case letter
+-   Contextmenu of table, remove callback function `callback({type, selection})` replace with `afterMenuClick({ type, selectionRangeKeys, selectionRangeIndexes })` [detail](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/contextmenu)
+
+### Feature
+
+-   Cell selection [detail](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-selection)
+
+    -   Add multi column selection feature
+    -   Add multi row selection feature
+    -   Cell selection feature, adding header and column indicator effects
+    -   Cell selection feature, add range selection instance method `setRangeCellSelection({ startRowKey,startColKey,endRowKey,endColKey,isScrollToStartCell })`
+    -   Cell selection feature, add cell select all instance method`setAllCellSelection()` [detail](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-selection)
+
+-   Table contextmenu [detail](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/contextmenu)
+
+    -   Add table header contextmenu
+    -   Add table body contextmenu
+    -   Add table body contextmenu callback `beforeShow({ isWholeRowSelection, selectionRangeKeys, selectionRangeIndexes, })`
+    -   Add theme vars
+        -   @ve-table-head-indicator-active-text-color
+        -   @ve-table-body-indicator-active-text-color
+        -   @ve-table-header-cell-indicator-active-background-color
+        -   @ve-table-body-cell-indicator-active-background-color
+
+-   Contextmenu comp adds instance method `hideContextmenu()`
+
+### Bug Fixes
+
+-   Fixed the problem that the menu could not be expanded and collapsed after the right menu expansion node was clicked
+
+---
+
+### Breaking Changes
+
+-   修改表格右键菜单的非中文文字，将开头小写字母转大写字母
+-   表格右键菜单功能，移除回调函数`callback({type, selection})` 使用`afterMenuClick({ type, selectionRangeKeys, selectionRangeIndexes })`替代 [详情](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/contextmenu)
+
+### Feature
+
+-   单元格选择功能 [详情](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-selection)
+
+    -   添加多列选择功能
+    -   添加多行选择功能
+    -   单元格选择功能，添加表头和列指示器效果
+    -   单元格选择功能，添加区域选择实例方法 `setRangeCellSelection({ startRowKey,startColKey,endRowKey,endColKey,isScrollToStartCell })`
+    -   单元格选择功能，添加单元格全选实例方法`setAllCellSelection()` [详情](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-selection)
+
+-   表格右键菜单功能 [详情](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/contextmenu)
+    -   表格 header 添加右键菜单功能
+    -   表格 body 右键菜单功能增强
+    -   表格 body 右键菜单功能添加回调方法 `beforeShow({ isWholeRowSelection, selectionRangeKeys, selectionRangeIndexes, })`
+    -   右键菜单组件添加`hideContextmenu()`实例方法
+    -   添加主题变量
+        -   @ve-table-head-indicator-active-text-color
+        -   @ve-table-body-indicator-active-text-color
+        -   @ve-table-header-cell-indicator-active-background-color
+        -   @ve-table-body-cell-indicator-active-background-color
+
+### Bug Fixes
+
+-   修复右侧菜单展开节点被点击后，菜单无法展开折叠的问题
+
 V2.18.3
 
 ### Bug Fixes

examples/src/comp/app.less

@@ -16,7 +16,7 @@
 
 @-header-height: 60px;
 @-footer-height: 60px;
-@-header-index: 9999999;
+@-header-index: 999;
 @-left-menu-index: 2;
 @-right-content-index: 1;
 
@@ -31,7 +31,7 @@
     .main-banner {
         width: 100%;
         position: fixed;
-        top: 2px;
+        top: 0px;
         height: 60px;
         background-color: #fff;
         z-index: @-header-index;

examples/src/demo/spreadsheet.vue

@@ -13,6 +13,7 @@
             :cell-autofill-option="cellAutofillOption"
             :edit-option="editOption"
             :contextmenu-body-option="contextmenuBodyOption"
+            :row-style-option="rowStyleOption"
         />
     </div>
 </template>
@@ -105,6 +106,10 @@ export default {
                     },
                 ],
             },
+            rowStyleOption: {
+                clickHighlight: false,
+                hoverHighlight: false,
+            },
             tableData: [],
         };
     },
@@ -116,7 +121,7 @@ export default {
                     key: "index",
                     // is operation column
                     operationColumn: true,
-                    title: "#",
+                    title: "",
                     width: 35,
                     fixed: "left",
                     renderBodyCell: this.renderRowIndex,

examples/src/docs/en/ve-contextmenu/api.md

@@ -9,14 +9,20 @@
 
 ### options
 
-| Property | Description                                                                                                        | Type     | Optional value | Default |
-| -------- | ------------------------------------------------------------------------------------------------------------------ | -------- | -------------- | ------- |
-| label    | Displayed menu name                                                                                                | `String` | -              | -       |
-| type     | contextmenu item type,The split line through ‘SEPARATOR’。It will be used as a parameter for callback after cliked | `String` | -              | -       |
-| disabled | Disable the current menu, click will be invalid                                                                    | `String` | -              | -       |
+| Property | Description                                                                                                        | Type      | Optional value | Default |
+| -------- | ------------------------------------------------------------------------------------------------------------------ | --------- | -------------- | ------- |
+| label    | Displayed menu name                                                                                                | `String`  | -              | -       |
+| type     | contextmenu item type,The split line through ‘SEPARATOR’。It will be used as a parameter for callback after cliked | `String`  | -              | -       |
+| disabled | Disable the current menu, click will be invalid                                                                    | `Boolean` | -              | -       |
 
 ### Event
 
 | Event Name    | Description         | Parameters                  |
 | ------------- | ------------------- | --------------------------- |
 | on-node-click | menu click callback | currently clicked menu type |
+
+### Instance Methods
+
+| Method Name     | Description | Parameters |
+| --------------- | ----------- | ---------- |
+| hideContextmenu | 该右键菜单  | -          |

examples/src/docs/en/ve-table/api/contextmenu-body-option-props.vue

@@ -16,7 +16,7 @@ export default {
     props: {
         anchor: {
             type: String,
-            default: "Contextmenu option",
+            default: "Body contextmenu option",
         },
         desc: {
             type: String,

examples/src/docs/en/ve-table/api/contextmenu-header-option-props.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <tpl
+            :desc="desc"
+            :anchor="anchor"
+            :table-data="db.contextmenuHeaderOption.data"
+            :columns="db.contextmenuHeaderOption.columns"
+        />
+    </div>
+</template>
+<script>
+import tpl from "@/comp/api-tpl";
+import { db } from "./db";
+export default {
+    components: { tpl },
+    props: {
+        anchor: {
+            type: String,
+            default: "Header contextmenu option",
+        },
+        desc: {
+            type: String,
+            default: "contextmenuHeaderOption",
+        },
+    },
+    data() {
+        return {
+            db: db,
+        };
+    },
+};
+</script>

examples/src/docs/en/ve-table/api/db.js

@@ -257,9 +257,16 @@ export const db = {
                 optionalVal: "-",
                 default: "-",
             },
+            {
+                param: "contextmenuHeaderOption",
+                desc: "table header contextmenu option,Refer to contextmenuHeaderOption",
+                type: "<code>Object</code>",
+                optionalVal: "-",
+                default: "-",
+            },
             {
                 param: "contextmenuBodyOption",
-                desc: "contextmenu option,Refer to contextmenuBodyOption",
+                desc: "table body contextmenu option,Refer to contextmenuBodyOption",
                 type: "<code>Object</code>",
                 optionalVal: "-",
                 default: "-",
@@ -549,9 +556,19 @@ export const db = {
             },
             {
                 name: "setCellSelection",
-                desc: `Set cell selection  <a href='#/en/doc/table/cell-selection?anchor=cell-selection-instance-method'>Refer To Demo</a>`,
+                desc: `Set single cell selection  <a href='#/en/doc/table/cell-selection?anchor=single-cell-selection-instance-method'>Refer To Demo</a>`,
                 param: "{ rowKey, colKey }",
             },
+            {
+                name: "setAllCellSelection",
+                desc: `Set all cell selection  <a href='#/en/doc/table/cell-selection?anchor=range-cell-selection-instance-method'>Refer To Demo</a>`,
+                param: "-",
+            },
+            {
+                name: "setRangeCellSelection",
+                desc: `Set range cell selection  <a href='#/en/doc/table/cell-selection?anchor=range-cell-selection-instance-method'>Refer To Demo</a>`,
+                param: "{ startRowKey,startColKey,endRowKey,endColKey,isScrollToStartCell }",
+            },
         ],
         columns: columnsType2,
     },
@@ -942,13 +959,48 @@ export const db = {
         columns: columnsType1,
     },
 
-    // 右键菜单配置
+    // table header contextmenu
+    contextmenuHeaderOption: {
+        data: [
+            {
+                param: "beforeShow",
+                desc: `For the callback event before the menu is displayed, you can change the menu item information at this stage.<br/><code>isWholeColSelection</code>It's whole column selection,<br/><code>selectionRangeKeys </code>The currently cellSelection key information,<br/><code>selectionRangeIndexes </code>The currently cellSelection index information`,
+                type: `<code>Function({ isWholeColSelection, selectionRangeKeys, selectionRangeIndexes })</code>`,
+                optionalVal: "-",
+                default: "-",
+            },
+            {
+                param: "afterMenuClick",
+                desc: `Callback when a menu item is clicked, returning false will prevent the current right-click operation.<br/><code>type</code>menu item,<br/><code>selectionRangeKeys </code>The currently cellSelection key information,<br/><code>selectionRangeIndexes </code>The currently cellSelection index information`,
+                type: `<code>Function({ type, selectionRangeKeys, selectionRangeIndexes  })</code>`,
+                optionalVal: "-",
+                default: "-",
+            },
+            {
+                param: "contextmenus",
+                desc: `contextmenu option. <a href='#/en/doc/base/contextmenu'>contextmenu component</a>`,
+                type: `<code>Array</code>`,
+                optionalVal: "-",
+                default: "-",
+            },
+        ],
+        columns: columnsType1,
+    },
+
+    // table body contextmenu
     contextmenuBodyOption: {
         data: [
             {
-                param: "callback",
-                desc: `The callback of the right-click menu item.<code>type</code>menu type,<code>selection </code>Currently selected cell`,
-                type: `<code>Function({ type, selection  })</code>`,
+                param: "beforeShow",
+                desc: `For the callback event before the menu is displayed, you can change the menu item information at this stage.<br/><code>isWholeRowSelection</code>It's whole row selection,<br/><code>selectionRangeKeys </code>The currently cellSelection key information,<br/><code>selectionRangeIndexes </code>The currently cellSelection index information`,
+                type: `<code>Function({ isWholeRowSelection, selectionRangeKeys, selectionRangeIndexes })</code>`,
+                optionalVal: "-",
+                default: "-",
+            },
+            {
+                param: "afterMenuClick",
+                desc: `Callback when a menu item is clicked, returning false will prevent the current right-click operation.<br/><code>type</code>menu item,<br/><code>selectionRangeKeys </code>The currently cellSelection key information,<br/><code>selectionRangeIndexes </code>The currently cellSelection index information`,
+                type: `<code>Function({ type, selectionRangeKeys, selectionRangeIndexes  })</code>`,
                 optionalVal: "-",
                 default: "-",
             },

examples/src/docs/en/ve-table/api/main.vue

@@ -29,6 +29,8 @@
         <CellSelectionOption />
         <!-- edit Option -->
         <EditOption />
+        <!-- contextmenu header option -->
+        <contextmenuHeaderOption />
         <!-- contextmenu body option -->
         <contextmenuBodyOption />
         <!-- Event Custom Option -->
@@ -56,6 +58,7 @@ import CellStyleOption from "./cell-style-option-props";
 import RowStyleOption from "./row-style-option-props";
 import CellSelectionOption from "./cell-selection-option-props";
 import EditOption from "./edit-option-props";
+import contextmenuHeaderOption from "./contextmenu-header-option-props";
 import contextmenuBodyOption from "./contextmenu-body-option-props";
 import cellAutofillOption from "./cell-autofill-option-props";
 import clipboardOption from "./clipboard-option-props";
@@ -76,6 +79,7 @@ export default {
         SortOption,
         CellSelectionOption,
         EditOption,
+        contextmenuHeaderOption,
         contextmenuBodyOption,
         cellAutofillOption,
         clipboardOption,

examples/src/docs/en/ve-table/cell-autofill/autofill-direction.md

@@ -19,6 +19,7 @@
             :table-data="tableData"
             :cell-autofill-option="cellAutofillOption"
             rowKeyFieldName="rowKey"
+            :rowStyleOption="rowStyleOption"
         />
     </div>
 </template>
@@ -32,6 +33,10 @@
                     directionX: true,
                     directionY: true,
                 },
+                rowStyleOption: {
+                    clickHighlight: false,
+                    hoverHighlight: false,
+                },
                 columns: [
                     { field: "col1", key: "col1", title: "Col1" },
                     { field: "col2", key: "col2", title: "Col2" },

examples/src/docs/en/ve-table/cell-autofill/base.md

@@ -14,13 +14,18 @@
         rowKeyFieldName="rowKey"
         :virtual-scroll-option="virtualScrollOption"
         :cell-autofill-option="cellAutofillOption"
+        :rowStyleOption="rowStyleOption"
     />
 </template>
 
 <script>
     export default {
         data() {
             return {
+                rowStyleOption: {
+                    clickHighlight: false,
+                    hoverHighlight: false,
+                },
                 virtualScrollOption: {
                     enable: true,
                 },