fix: update transfer, tree types (#2696)

* fix: update transfer, tree types

* fix: update typo CSSProperties

types/transfer.d.ts

@@ -3,6 +3,7 @@
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from './component';
+import { VNodeChild, CSSProperties } from 'vue';
 
 export interface TransferItem {
   key: string;
@@ -11,57 +12,60 @@ export interface TransferItem {
   disabled?: boolean;
 }
 
+export declare type Direction = 'left' | 'right';
+
 export declare class Transfer extends AntdComponent {
+  $props: {
     /**
      * Used for setting the source data. The elements that are part of this array will be present the left column.
      * Except the elements whose keys are included in targetKeys prop.
      * @default []
      * @type TransferItem[]
      */
-  dataSource: TransferItem[];
+    dataSource?: TransferItem[];
 
     /**
      * Whether disabled transfer
      * @default false
      * @type boolean
      */
-  disabled: boolean;
+    disabled?: boolean;
 
     /**
      * A function to determine whether an item should show in search result list
      * @type Function
      */
-  filterOption: (inputValue: any, option: any) => boolean;
+    filterOption?: (inputValue?: any, option?: any) => boolean;
 
     /**
      * customize the progress dot by setting a scoped slot
      * @type any (slot="footer" slot-scope="props")
      */
-  footer: any;
+    footer?: VNodeChild | JSX.Element;
 
     /**
      * property of vc-lazy-load for lazy rendering items. Turn off it by set to false.
      * @default { height: 32, offset: 32 }
      * @type object | boolean
      */
-  lazy: object | boolean;
+    lazy?: object | boolean;
 
     /**
      * A custom CSS style used for rendering the transfer columns.
      * @type object
      */
-  listStyle: object;
+    listStyle?: CSSProperties;
 
     /**
      * i18n text including filter, empty text, item unit, etc
      * @default { itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }
      * @type object
      */
-  locale: {
+    locale?: {
-    itemUnit: string;
+      itemUnit?: string;
-    itemsUnit: string;
+      itemsUnit?: string;
-    notFoundContent: string;
+      notFoundContent?: string;
-    searchPlaceholder: string;
+      searchPlaceholder?: string;
     };
 
     /**
@@ -69,7 +73,7 @@ export declare class Transfer extends AntdComponent {
      * @default ['>', '<']
      * @type string[]
      */
-  operations: string[];
+    operations?: string[];
 
     /**
      * The function to generate the item shown on a column.
@@ -78,32 +82,71 @@ export declare class Transfer extends AntdComponent {
      * Also, it can return a plain object with value and label, label is a element and value is for title
      * @type Function
      */
-  render: (record: TransferItem) => void;
+    render?: (record: TransferItem) => void;
 
     /**
      * A set of keys of selected items.
      * @default []
      * @type string[]
      */
-  selectedKeys: string[];
+    selectedKeys?: string[];
 
     /**
      * If included, a search box is shown on each column.
      * @default false
      * @type boolean
      */
-  showSearch: boolean;
+    showSearch?: boolean;
+
+    /**
+     * Show select all checkbox on the header
+     *
+     * @version 1.5.0
+     */
+    showSelectAll?: boolean;
 
     /**
      * A set of keys of elements that are listed on the right column.
      * @default []
      * @type string[]
      */
-  targetKeys: string[];
+    targetKeys?: string[];
 
     /**
      * A set of titles that are sorted from left to right.
      * @type string[]
      */
-  titles: string[];
+    titles?: string[];
+
+    /**
+     * A callback function that is executed when the transfer between columns is complete.
+     *
+     * @param targetKeys
+     * @param direction
+     * @param moveKeys
+     */
+    onChange?: (targetKeys: any[], direction: Direction, moveKeys: any[]) => void;
+
+    /**
+     * A callback function which is executed when scroll options list
+     *
+     * @param direction
+     * @param e
+     */
+    onScroll?: (direction: Direction, e: Event) => void;
+
+    /**
+     * A callback function which is executed when search field are changed
+     * @param direction
+     * @param value
+     */
+    onSearch?: (direction: Direction, value: string) => void;
+
+    /**
+     * A callback function which is executed when selected items are changed.
+     * @param sourceSelectedKeys
+     * @param targetSelectedKeys
+     */
+    onSelectChange?: (sourceSelectedKeys: any[], targetSelectedKeys: any[]) => void;
+  };
 }

types/tree-node.d.ts

@@ -3,21 +3,29 @@
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from './component';
+import { VNodeChild } from 'vue';
 
 export declare class TreeNode extends AntdComponent {
+  $props: {
     /**
      * Class
      * @description className
      * @type string
      */
-  class: string;
+    class?: string;
 
     /**
      * Style
      * @description style of tree node
      * @type string | object
      */
-  style: string | object;
+    style?: string | object;
+
+    /**
+     * When Tree is checkable, set TreeNode display Checkbox or not
+     * @version 1.5.0
+     */
+    checkable?: boolean;
 
     /**
      * Disable Checkbox
@@ -25,7 +33,7 @@ export declare class TreeNode extends AntdComponent {
      * @default false
      * @type boolean
      */
-  disableCheckbox: boolean;
+    disableCheckbox?: boolean;
 
     /**
      * Disabled
@@ -33,14 +41,14 @@ export declare class TreeNode extends AntdComponent {
      * @default false
      * @type boolean
      */
-  disabled: boolean;
+    disabled?: boolean;
 
     /**
      * Icon
      * @description customize icon. When you pass component, whose render will receive full TreeNode props as component props
      * @type any (slot | slot-scope)
      */
-  icon: any;
+    icon?: VNodeChild | JSX.Element;
 
     /**
      * Is Leaf?
@@ -48,7 +56,7 @@ export declare class TreeNode extends AntdComponent {
      * @default false
      * @type boolean
      */
-  isLeaf: boolean;
+    isLeaf?: boolean;
 
     /**
      * Key
@@ -57,7 +65,7 @@ export declare class TreeNode extends AntdComponent {
      * @default internal calculated position of treeNode or undefined
      * @type string | number
      */
-  key: string | number;
+    key?: string | number;
 
     /**
      * Selectable
@@ -65,7 +73,7 @@ export declare class TreeNode extends AntdComponent {
      * @default true
      * @type boolean
      */
-  selectable: boolean;
+    selectable?: boolean;
 
     /**
      * Title
@@ -73,7 +81,7 @@ export declare class TreeNode extends AntdComponent {
      * @default '---'
      * @type any (string | slot)
      */
-  title: any;
+    title?: VNodeChild | JSX.Element;
 
     /**
      * Value
@@ -81,7 +89,7 @@ export declare class TreeNode extends AntdComponent {
      * @default undefined
      * @type string
      */
-  value: string;
+    value?: string;
 
     /**
      * Slots
@@ -89,13 +97,12 @@ export declare class TreeNode extends AntdComponent {
      * such as slots: { title: 'XXX'}
      * @type object
      */
-  slots: object;
+    slots?: object;
 
     /**
-   * Scoped Slots
+     * When using treeNodes, you can use this property to configure the events,
-   * @description When using treeNodes, you can use this property to configure the properties that support the slot,
+     * such as on: { click: () => {}}
-   * such as scopedSlots: { title: 'XXX'}
-   * @type object
      */
-  scopedSlots: object;
+    on?: object;
+  };
 }

types/tree/dictionary-tree.d.ts

@@ -6,10 +6,12 @@ import { AntdComponent } from '../component';
 import { Tree } from './tree';
 
 export declare class DictionaryTree extends Tree {
+  $props: {
     /**
-   * Directory open logic, optional false 'click' 'dblclick'
+     * Directory open logic, optional `false` 'click' 'dblclick'
      * @default 'click'
      * @type string
      */
-  expandAction: string;
+    expandAction?: string | boolean;
+  };
 }

types/tree/tree.d.ts

@@ -10,13 +10,22 @@ export declare class Tree extends AntdComponent {
   static TreeNode: typeof TreeNode;
   static DirectoryTree: typeof DictionaryTree;
 
-  blockNode: boolean;
+  $props: {
-  selectable: boolean;
+    /**
+     * Whether treeNode fill remaining horizontal space
+     * @version 1.5.0
+     */
+    blockNode?: boolean;
+
+    /**
+     * whether can be selected
+     */
+    selectable?: boolean;
     /**
      * treeNode of tree
      * @type TreeNode[]
      */
-  treeData: TreeNode[];
+    treeData?: TreeNode[];
 
     /**
      *
@@ -36,14 +45,14 @@ export declare class Tree extends AntdComponent {
      * @default true
      * @type boolean
      */
-  autoExpandParent: boolean;
+    autoExpandParent?: boolean;
 
     /**
      * Adds a Checkbox before the treeNodes
      * @default false
      * @type boolean
      */
-  checkable: boolean;
+    checkable?: boolean;
 
     /**
      * (Controlled) Specifies the keys of the checked treeNodes
@@ -56,7 +65,7 @@ export declare class Tree extends AntdComponent {
      * @default []
      * @type string[] | number[] | { checked: string[]; halfChecked: string[] }
      */
-  checkedKeys:
+    checkedKeys?:
       | string[]
       | number[]
       | {
@@ -69,96 +78,96 @@ export declare class Tree extends AntdComponent {
      * @default false
      * @type boolean
      */
-  checkStrictly: boolean;
+    checkStrictly?: boolean;
 
     /**
      * Specifies the keys of the default checked treeNodes
      * @default []
      * @type string[] | number[]
      */
-  defaultCheckedKeys: string[] | number[];
+    defaultCheckedKeys?: string[] | number[];
 
     /**
      * Whether to expand all treeNodes by default
      * @default false
      * @type boolean
      */
-  defaultExpandAll: boolean;
+    defaultExpandAll?: boolean;
 
     /**
      * Specify the keys of the default expanded treeNodes
      * @default []
      * @type string[] | number[]
      */
-  defaultExpandedKeys: string[] | number[];
+    defaultExpandedKeys?: string[] | number[];
 
     /**
      * auto expand parent treeNodes when init
      * @default true
      * @type boolean
      */
-  defaultExpandParent: boolean;
+    defaultExpandParent?: boolean;
 
     /**
      * Specifies the keys of the default selected treeNodes
      * @default []
      * @type string[] | number[]
      */
-  defaultSelectedKeys: string[] | number[];
+    defaultSelectedKeys?: string[] | number[];
 
     /**
      * whether disabled the tree
      * @default false
      * @type boolean
      */
-  disabled: boolean;
+    disabled?: boolean;
 
     /**
      * Specifies whether this Tree is draggable (IE > 8)
      * @default false
      * @type boolean
      */
-  draggable: boolean;
+    draggable?: boolean;
 
     /**
      * (Controlled) Specifies the keys of the expanded treeNodes
      * @default []
      * @type string[] | number[]
      */
-  expandedKeys: string[] | number[];
+    expandedKeys?: string[] | number[];
 
     /**
      * Defines a function to filter (highlight) treeNodes.
      * When the function returns true, the corresponding treeNode will be highlighted
      * @type Function
      */
-  filterTreeNode: (node: TreeNode) => any;
+    filterTreeNode?: (node?: TreeNode) => any;
 
     /**
      * Load data asynchronously
      * @type Function
      */
-  loadData: (node: TreeNode) => any;
+    loadData?: (node?: TreeNode) => any;
 
     /**
      * (Controlled) Set loaded tree nodes. Need work with loadData
      * @default []
      * @type string[]
      */
-  loadedKeys: string[];
+    loadedKeys?: string[];
 
     /**
      * Allows selecting multiple treeNodes
      * @default false
      * @type boolean
      */
-  multiple: boolean;
+    multiple?: boolean;
 
     /**
      * (Controlled) Specifies the keys of the selected treeNodes
      * @type string[] | number[]
      */
-  selectedKeys: string[] | number[];
+    selectedKeys?: string[] | number[];
 
     /**
      * Shows the icon before a TreeNode's title.
@@ -166,12 +175,99 @@ export declare class Tree extends AntdComponent {
      * @default false
      * @type boolean
      */
-  showIcon: boolean;
+    showIcon?: boolean;
 
     /**
      * Shows a connecting line
      * @default false
      * @type boolean
      */
-  showLine: boolean;
+    showLine?: boolean;
+
+    /**
+     * Callback function for when the onCheck event occurs
+     * @param checkedKeys
+     * @param e
+     */
+    onClick?: (
+      checkedKeys: string[],
+      e: { checked: boolean; checkedNodes: any[]; node: any; event: any },
+    ) => void;
+
+    /**
+     * Callback function for when the onDragEnd event occurs
+     * @param event
+     * @param node
+     */
+    onDragend?: ({ event, node }) => void;
+
+    /**
+     * Callback function for when the onDragEnter event occurs
+     * @param event
+     * @param node
+     * @param expandedKeys
+     */
+    onDragenter?: ({ event, node, expandedKeys }) => void;
+
+    /**
+     * Callback function for when the onDragLeave event occurs
+     * @param event
+     * @param node
+     */
+    onDragleave?: ({ event, node }) => void;
+
+    /**
+     * Callback function for when the onDragOver event occurs
+     * @param event
+     * @param node
+     */
+    onDragover?: ({ event, node }) => void;
+
+    /**
+     * Callback function for when the onDragStart event occurs
+     * @param event
+     * @param node
+     */
+    onDragstart?: ({ event, node }) => void;
+
+    /**
+     * Callback function for when the onDrop event occurs
+     *
+     * @param event
+     * @param node
+     * @param dragNode
+     * @param dragNodesKeys
+     */
+    onDrop?: ({ event, node, dragNode, dragNodesKeys }) => void;
+
+    /**
+     * Callback function for when a treeNode is expanded or collapsed
+     * @param expandedKeys
+     * @param bool
+     * @param node
+     */
+    onExpand?: (expandedKeys: string[], { expanded, node }) => void;
+
+    /**
+     * 	Callback function for when a treeNode is loaded
+     * @param loadedKeys
+     * @param event
+     * @param node
+     */
+    onLoad?: (loadedKeys: string[], { event, node }) => void;
+
+    /**
+     * Callback function for when the user right clicks a treeNode
+     * @param event
+     * @param node
+     */
+    onRightClick?: ({ event, node }) => void;
+
+    /**
+     * Callback function for when the user clicks a treeNode
+     * @param selectedKeys
+     * @param event
+     */
+    onSelect?: (selectedKeys: string[], event: { selected; selectedNodes; node; event }) => void;
+  };
 }