fix[Tree]: Updated the draggable attribute to support DraggableConfig and DraggableFn

components/tree/Tree.tsx

@@ -119,7 +119,6 @@ export const treeProps = () => {
     selectable: booleanType(),
 
     loadedKeys: arrayType<Key[]>(),
-    draggable: booleanType(),
     showIcon: booleanType(),
     icon: functionType<(nodeProps: AntdTreeNodeAttribute) => any>(),
     switcherIcon: PropTypes.any,

components/tree/index.en-US.md

@@ -26,7 +26,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |  |
 | defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |  |
 | disabled | whether disabled the tree | bool | false |  |
-| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |  |
+| draggable | Specifies whether this Tree or the node is draggable. Use `icon: false` to disable drag handler icon (IE > 8) | boolean \| ((node: TreeNode) => boolean) \| { icon?: VNode \| false, nodeDraggable?: (node: TreeNode) => boolean } | false |  |
 | expandedKeys(v-model) | (Controlled) Specifies the keys of the expanded treeNodes | string\[] \| number\[] | \[] |  |
 | fieldNames | Replace the title,key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', title:'title', key:'key' } | 3.0.0 |
 | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |  |

components/tree/index.zh-CN.md

@@ -27,7 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1GeUQJPTGUYAAA
 | checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |  |  |
 | defaultExpandAll | 默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效 | boolean | false |  |  |
 | disabled | 将树禁用 | bool | false |  |  |
-| draggable | 设置节点可拖拽 | boolean | false |  |  |
+| draggable | 设置节点可拖拽，可以通过 `icon: false` 关闭拖拽提示图标 | boolean \| ((node: TreeNode) => boolean) \| { icon?: VNode \| false, nodeDraggable?: (node: TreeNode) => boolean } | false |  |  |
 | expandedKeys(v-model) | （受控）展开指定的树节点 | string\[] \| number\[] | \[] |  |  |
 | fieldNames | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 | object | {children:'children', title:'title', key:'key' } | 3.0.0 |  |
 | filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - |  |  |

components/vc-align/interface.ts

@@ -1,5 +1,6 @@
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
 export type AlignPoint = string;
+export type OffsetType = number | `${number}%`;
 
 export interface AlignType {
   /**
@@ -11,12 +12,12 @@ export interface AlignType {
    * offset source node by offset[0] in x and offset[1] in y.
    * If offset contains percentage string value, it is relative to sourceNode region.
    */
-  offset?: number[];
+  offset?: OffsetType[];
   /**
    * offset target node by offset[0] in x and offset[1] in y.
    * If targetOffset contains percentage string value, it is relative to targetNode region.
    */
-  targetOffset?: number[];
+  targetOffset?: OffsetType[];
   /**
    * If adjustX field is true, will adjust source node in x direction if source node is invisible.
    * If adjustY field is true, will adjust source node in y direction if source node is invisible.

components/vc-tree/Tree.tsx

@@ -35,21 +35,17 @@ import {
   toRaw,
 } from 'vue';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import type { CheckInfo, DraggableFn } from './props';
+import type { CheckInfo, DraggableConfig, DraggableFn } from './props';
 import { treeProps } from './props';
 import { warning } from '../vc-util/warning';
 import KeyCode from '../_util/KeyCode';
 import classNames from '../_util/classNames';
 import pickAttrs from '../_util/pickAttrs';
 import useMaxLevel from './useMaxLevel';
+import { HolderOutlined } from '@ant-design/icons-vue';
 
 const MAX_RETRY_TIMES = 10;
 
-export type DraggableConfig = {
-  icon?: any;
-  nodeDraggable?: DraggableFn;
-};
-
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Tree',
@@ -1145,10 +1141,12 @@ export default defineComponent({
           draggableConfig = draggable;
         } else if (typeof draggable === 'function') {
           draggableConfig = {
-            nodeDraggable: draggable,
+            nodeDraggable: draggable as DraggableFn,
           };
         } else {
-          draggableConfig = {};
+          draggableConfig = {
+            icon: <HolderOutlined />,
+          };
         }
       } else {
         draggableConfig = false;

components/vc-tree/contextTypes.ts

@@ -15,8 +15,7 @@ import type {
   Direction,
   FlattenNode,
 } from './interface';
-
+import { DraggableConfig } from './props';
-import type { DraggableConfig } from './Tree';
 
 export type NodeMouseEventParams = {
   event: MouseEvent;

components/vc-tree/props.ts

@@ -110,6 +110,10 @@ export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (
 ) => boolean;
 
 export type DraggableFn = (node: DataNode) => boolean;
+export type DraggableConfig = {
+  icon?: any;
+  nodeDraggable?: DraggableFn;
+};
 export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick';
 export const treeProps = () => ({
   prefixCls: String,
@@ -131,7 +135,7 @@ export const treeProps = () => ({
   multiple: { type: Boolean, default: undefined },
   checkable: { type: Boolean, default: undefined },
   checkStrictly: { type: Boolean, default: undefined },
-  draggable: { type: [Function, Boolean] as PropType<DraggableFn | boolean> },
+  draggable: { type: [Function, Boolean] as PropType<DraggableConfig | DraggableFn | boolean> },
   defaultExpandParent: { type: Boolean, default: undefined },
   autoExpandParent: { type: Boolean, default: undefined },
   defaultExpandAll: { type: Boolean, default: undefined },