refactor(tree): change node active color & set default cancelable to true

src/tree/demos/enUS/cascade.demo.md

@@ -1,5 +1,7 @@
 # Cascade Check
 
+Set `cascade` to use cascade check.
+
 ```html
 <n-tree
   block-line

src/tree/demos/enUS/index.demo-entry.md

@@ -9,11 +9,11 @@ What's more, not only biology, I forget balanced tree everytime after I revise i
 ```demo
 basic
 cascade
-async
 multiple
 filter
-virtual
 drag-drop
+virtual
+async
 ```
 
 ## Props
@@ -23,7 +23,7 @@ drag-drop
 | allow-drop | `(info: { dropPosition: DropPosition, node: TreeOption, phase: 'drag' \| 'drop' }) => boolean` | A function that prohibit dropping inside leaf node. | Whether to allow dropping. |
 | block-line | `boolean` | `false` |  |
 | block-node | `boolean` | `false` |  |
-| cancelable | `boolean` | `false` | Whether node's select status can be cancelled. |
+| cancelable | `boolean` | `true` | Whether node's select status can be cancelled. |
 | cascade | `boolean` | `false` | Whether to cascade checkboxes. |
 | checkable | `boolean` | `false` |  |
 | checked-keys | `Array<string \| number>` | `undefined` | If set, checked status will work in controlled manner. |

src/tree/demos/zhCN/cascade.demo.md

@@ -1,5 +1,7 @@
 # 级联选择
 
+设定 `cascade` 进行级联选择。
+
 ```html
 <n-tree
   block-line

src/tree/demos/zhCN/index.demo-entry.md

@@ -9,11 +9,11 @@
 ```demo
 basic
 cascade
-async
 multiple
 filter
-virtual
 drag-drop
+virtual
+async
 ```
 
 ## Props
@@ -23,7 +23,7 @@ drag-drop
 | allow-drop | `(info: { dropPosition: DropPosition, node: TreeOption, phase: 'drag' \| 'drop' }) => boolean` | 一个不允许 drop 在叶节点内部的函数 | 是否允许 drop |
 | block-line | `boolean` | `false` |  |
 | block-node | `boolean` | `false` |  |
-| cancelable | `boolean` | `false` | 选中之后是否允许取消 |
+| cancelable | `boolean` | `true` | 选中之后是否允许取消 |
 | cascade | `boolean` | `false` | 是否关联选项 |
 | checkable | `boolean` | `false` |  |
 | checked-keys | `Array<string \| number>` | `undefined` | 如果设定则 checked 状态受控 |

src/tree/src/Tree.tsx

@@ -58,7 +58,10 @@ const treeProps = {
     type: Boolean,
     default: true
   },
-  cancelable: Boolean,
+  cancelable: {
+    type: Boolean,
+    default: true
+  },
   checkable: Boolean,
   draggable: Boolean,
   blockNode: Boolean,
@@ -408,7 +411,7 @@ export default defineComponent({
       if (onUpdateCheckedKeys) call(onUpdateCheckedKeys, value)
       if (onCheckedKeysChange) call(onCheckedKeysChange, value)
     }
-    function doSelectedKeysChange (value: Key[]): void {
+    function doUpdateSelectedKeys (value: Key[]): void {
       const {
         'onUpdate:selectedKeys': onUpdateSelectedKeys,
         onSelectedKeysChange
@@ -504,15 +507,15 @@ export default defineComponent({
         } else if (!~index) {
           selectedKeys.push(node.key)
         }
-        doSelectedKeysChange(selectedKeys)
+        doUpdateSelectedKeys(selectedKeys)
       } else {
         const selectedKeys = mergedSelectedKeysRef.value
         if (selectedKeys.includes(node.key)) {
           if (props.cancelable) {
-            doSelectedKeysChange([])
+            doUpdateSelectedKeys([])
           }
         } else {
-          doSelectedKeysChange([node.key])
+          doUpdateSelectedKeys([node.key])
         }
       }
     }

src/tree/styles/dark.ts

@@ -1,3 +1,4 @@
+import { changeColor } from 'seemly'
 import { checkboxDark } from '../../checkbox/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
 import { commonDark } from '../../_styles/common'
@@ -11,7 +12,12 @@ const treeDark: TreeTheme = {
     Checkbox: checkboxDark,
     Scrollbar: scrollbarDark
   },
-  self
+  self (vars) {
+    const { primaryColor } = vars
+    const commonSelf = self(vars)
+    commonSelf.nodeColorActive = changeColor(primaryColor, { alpha: 0.15 })
+    return commonSelf
+  }
 }
 
 export default treeDark

src/tree/styles/light.ts

@@ -1,3 +1,4 @@
+import { changeColor } from 'seemly'
 import { checkboxLight } from '../../checkbox/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
 import { commonLight } from '../../_styles/common'
@@ -20,7 +21,7 @@ export const self = (vars: ThemeCommonVars) => {
     nodeBorderRadius: borderRadiusSmall,
     nodeColorHover: hoverColor,
     nodeColorPressed: pressedColor,
-    nodeColorActive: hoverColor,
+    nodeColorActive: changeColor(primaryColor, { alpha: 0.1 }),
     arrowColor: textColor3,
     nodeTextColor: textColor2,
     nodeTextColorDisabled: textColorDisabled,