github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: update transfer, tree types (#2696) 

* fix: update transfer, tree types

* fix: update typo CSSProperties
pull/2692/head^2
言肆 2020-08-17 21:30:14 +08:00 committed by GitHub
parent 54d2418249
commit fd1554eacc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 485 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
types/transfer.d.ts vendored
View File

@ -3,6 +3,7 @@
// Definitions: https://github.com/vueComponent/ant-design-vue/types // Definitions: https://github.com/vueComponent/ant-design-vue/types
import { AntdComponent } from './component'; import { AntdComponent } from './component';
import { VNodeChild, CSSProperties } from 'vue';
export interface TransferItem { export interface TransferItem {
key: string; key: string;
@ -11,99 +12,141 @@ export interface TransferItem {
disabled?: boolean; disabled?: boolean;
} }
export declare type Direction = 'left' | 'right';
export declare class Transfer extends AntdComponent { 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. * Used for setting the source data. The elements that are part of this array will be present the left column.
* @default [] * Except the elements whose keys are included in targetKeys prop.
* @type TransferItem[] * @default []
*/ * @type TransferItem[]
dataSource: TransferItem[]; */
dataSource?: TransferItem[];
/** /**
* Whether disabled transfer * Whether disabled transfer
* @default false * @default false
* @type boolean * @type boolean
*/ */
disabled: boolean; disabled?: boolean;
/** /**
* A function to determine whether an item should show in search result list * A function to determine whether an item should show in search result list
* @type Function * @type Function
*/ */
filterOption: (inputValue: any, option: any) => boolean; filterOption?: (inputValue?: any, option?: any) => boolean;
/** /**
* customize the progress dot by setting a scoped slot * customize the progress dot by setting a scoped slot
* @type any (slot="footer" slot-scope="props") * @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. * property of vc-lazy-load for lazy rendering items. Turn off it by set to false.
* @default { height: 32, offset: 32 } * @default { height: 32, offset: 32 }
* @type object | boolean * @type object | boolean
*/ */
lazy: object | boolean; lazy?: object | boolean;
/** /**
* A custom CSS style used for rendering the transfer columns. * A custom CSS style used for rendering the transfer columns.
* @type object * @type object
*/ */
listStyle: object; listStyle?: CSSProperties;
/** /**
* i18n text including filter, empty text, item unit, etc * i18n text including filter, empty text, item unit, etc
* @default { itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' } * @default { itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }
* @type object * @type object
*/ */
locale: { locale?: {
itemUnit: string; itemUnit?: string;
itemsUnit: string; itemsUnit?: string;
notFoundContent: string; notFoundContent?: string;
searchPlaceholder: string; searchPlaceholder?: string;
};
/**
* A set of operations that are sorted from top to bottom.
* @default ['>', '<']
* @type string[]
*/
operations?: string[];
/**
* The function to generate the item shown on a column.
* Based on an record (element of the dataSource array),
* this function should return a element which is generated from that record.
* 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;
/**
* A set of keys of selected items.
* @default []
* @type string[]
*/
selectedKeys?: string[];
/**
* If included, a search box is shown on each column.
* @default false
* @type 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[];
/**
* A set of titles that are sorted from left to right.
* @type 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;
}; };
/**
* A set of operations that are sorted from top to bottom.
* @default ['>', '<']
* @type string[]
*/
operations: string[];
/**
* The function to generate the item shown on a column.
* Based on an record (element of the dataSource array),
* this function should return a element which is generated from that record.
* 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;
/**
* A set of keys of selected items.
* @default []
* @type string[]
*/
selectedKeys: string[];
/**
* If included, a search box is shown on each column.
* @default false
* @type boolean
*/
showSearch: boolean;
/**
* A set of keys of elements that are listed on the right column.
* @default []
* @type string[]
*/
targetKeys: string[];
/**
* A set of titles that are sorted from left to right.
* @type string[]
*/
titles: string[];
} }

171
types/tree-node.d.ts vendored
View File

@ -3,99 +3,106 @@
// Definitions: https://github.com/vueComponent/ant-design-vue/types // Definitions: https://github.com/vueComponent/ant-design-vue/types
import { AntdComponent } from './component'; import { AntdComponent } from './component';
import { VNodeChild } from 'vue';
export declare class TreeNode extends AntdComponent { export declare class TreeNode extends AntdComponent {
/** $props: {
* Class /**
* @description className * Class
* @type string * @description className
*/ * @type string
class: string; */
class?: string;
/** /**
* Style * Style
* @description style of tree node * @description style of tree node
* @type string | object * @type string | object
*/ */
style: string | object; style?: string | object;
/** /**
* Disable Checkbox * When Tree is checkable, set TreeNode display Checkbox or not
* @description Disables the checkbox of the treeNode * @version 1.5.0
* @default false */
* @type boolean checkable?: boolean;
*/
disableCheckbox: boolean;
/** /**
* Disabled * Disable Checkbox
* @description Disabled or not * @description Disables the checkbox of the treeNode
* @default false * @default false
* @type boolean * @type boolean
*/ */
disabled: boolean; disableCheckbox?: boolean;
/** /**
* Icon * Disabled
* @description customize icon. When you pass component, whose render will receive full TreeNode props as component props * @description Disabled or not
* @type any (slot | slot-scope) * @default false
*/ * @type boolean
icon: any; */
disabled?: boolean;
/** /**
* Is Leaf? * Icon
* @description Leaf node or not * @description customize icon. When you pass component, whose render will receive full TreeNode props as component props
* @default false * @type any (slot | slot-scope)
* @type boolean */
*/ icon?: VNodeChild | JSX.Element;
isLeaf: boolean;
/** /**
* Key * Is Leaf?
* @description Required property, should be unique in the tree * @description Leaf node or not
* (In tree: Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys) * @default false
* @default internal calculated position of treeNode or undefined * @type boolean
* @type string | number */
*/ isLeaf?: boolean;
key: string | number;
/** /**
* Selectable * Key
* @description Set whether the treeNode can be selected * @description Required property, should be unique in the tree
* @default true * (In tree: Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys)
* @type boolean * @default internal calculated position of treeNode or undefined
*/ * @type string | number
selectable: boolean; */
key?: string | number;
/** /**
* Title * Selectable
* @description Content showed on the treeNodes * @description Set whether the treeNode can be selected
* @default '---' * @default true
* @type any (string | slot) * @type boolean
*/ */
title: any; selectable?: boolean;
/** /**
* Value * Title
* @description Will be treated as treeNodeFilterProp by default, should be unique in the tree * @description Content showed on the treeNodes
* @default undefined * @default '---'
* @type string * @type any (string | slot)
*/ */
value: string; title?: VNodeChild | JSX.Element;
/** /**
* Slots * Value
* @description When using treeNodes, you can use this property to configure the properties that support the slot, * @description Will be treated as treeNodeFilterProp by default, should be unique in the tree
* such as slots: { title: 'XXX'} * @default undefined
* @type object * @type string
*/ */
slots: object; value?: string;
/** /**
* Scoped Slots * Slots
* @description When using treeNodes, you can use this property to configure the properties that support the slot, * @description When using treeNodes, you can use this property to configure the properties that support the slot,
* such as scopedSlots: { title: 'XXX'} * such as slots: { title: 'XXX'}
* @type object * @type object
*/ */
scopedSlots: object; slots?: object;
/**
* When using treeNodes, you can use this property to configure the events,
* such as on: { click: () => {}}
*/
on?: object;
};
} }

14
types/tree/dictionary-tree.d.ts vendored
View File

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

420
types/tree/tree.d.ts vendored
View File

@ -10,168 +10,264 @@ export declare class Tree extends AntdComponent {
static TreeNode: typeof TreeNode; static TreeNode: typeof TreeNode;
static DirectoryTree: typeof DictionaryTree; static DirectoryTree: typeof DictionaryTree;
blockNode: boolean; $props: {
selectable: boolean; /**
/** * Whether treeNode fill remaining horizontal space
* treeNode of tree * @version 1.5.0
* @type TreeNode[] */
*/ blockNode?: boolean;
treeData: TreeNode[];
/** /**
* * whether can be selected
*@description Replace the title,key and children fields in treeNode with the corresponding fields in treeData */
*/ selectable?: boolean;
replaceFields?: { /**
/**@default 'children' */ * treeNode of tree
children?: string; * @type TreeNode[]
/**@default 'title' */ */
title?: string; treeData?: TreeNode[];
/**@default 'key' */
key?: string; /**
*
*@description Replace the title,key and children fields in treeNode with the corresponding fields in treeData
*/
replaceFields?: {
/**@default 'children' */
children?: string;
/**@default 'title' */
title?: string;
/**@default 'key' */
key?: string;
};
/**
* Whether to automatically expand a parent treeNode
* @default true
* @type boolean
*/
autoExpandParent?: boolean;
/**
* Adds a Checkbox before the treeNodes
* @default false
* @type boolean
*/
checkable?: boolean;
/**
* (Controlled) Specifies the keys of the checked treeNodes
* (PS: When this specifies the key of a treeNode which is also a parent treeNode,
* all the children treeNodes of will be checked; and vice versa,
* when it specifies the key of a treeNode which is a child treeNode,
* its parent treeNode will also be checked. When checkable and checkStrictly is true,
* its object has checked and halfChecked property. Regardless of whether the child or parent treeNode is checked,
* they won't impact each other.
* @default []
* @type string[] | number[] | { checked: string[]; halfChecked: string[] }
*/
checkedKeys?:
| string[]
| number[]
| {
checked: string[];
halfChecked: string[];
};
/**
* Check treeNode precisely; parent treeNode and children treeNodes are not associated
* @default false
* @type boolean
*/
checkStrictly?: boolean;
/**
* Specifies the keys of the default checked treeNodes
* @default []
* @type string[] | number[]
*/
defaultCheckedKeys?: string[] | number[];
/**
* Whether to expand all treeNodes by default
* @default false
* @type boolean
*/
defaultExpandAll?: boolean;
/**
* Specify the keys of the default expanded treeNodes
* @default []
* @type string[] | number[]
*/
defaultExpandedKeys?: string[] | number[];
/**
* auto expand parent treeNodes when init
* @default true
* @type boolean
*/
defaultExpandParent?: boolean;
/**
* Specifies the keys of the default selected treeNodes
* @default []
* @type string[] | number[]
*/
defaultSelectedKeys?: string[] | number[];
/**
* whether disabled the tree
* @default false
* @type boolean
*/
disabled?: boolean;
/**
* Specifies whether this Tree is draggable (IE > 8)
* @default false
* @type boolean
*/
draggable?: boolean;
/**
* (Controlled) Specifies the keys of the expanded treeNodes
* @default []
* @type 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;
/**
* Load data asynchronously
* @type Function
*/
loadData?: (node?: TreeNode) => any;
/**
* (Controlled) Set loaded tree nodes. Need work with loadData
* @default []
* @type string[]
*/
loadedKeys?: string[];
/**
* Allows selecting multiple treeNodes
* @default false
* @type boolean
*/
multiple?: boolean;
/**
* (Controlled) Specifies the keys of the selected treeNodes
* @type string[] | number[]
*/
selectedKeys?: string[] | number[];
/**
* Shows the icon before a TreeNode's title.
* There is no default style; you must set a custom style for it if set to true
* @default false
* @type boolean
*/
showIcon?: boolean;
/**
* Shows a connecting line
* @default false
* @type 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;
}; };
/**
* Whether to automatically expand a parent treeNode
* @default true
* @type boolean
*/
autoExpandParent: boolean;
/**
* Adds a Checkbox before the treeNodes
* @default false
* @type boolean
*/
checkable: boolean;
/**
* (Controlled) Specifies the keys of the checked treeNodes
* (PS: When this specifies the key of a treeNode which is also a parent treeNode,
* all the children treeNodes of will be checked; and vice versa,
* when it specifies the key of a treeNode which is a child treeNode,
* its parent treeNode will also be checked. When checkable and checkStrictly is true,
* its object has checked and halfChecked property. Regardless of whether the child or parent treeNode is checked,
* they won't impact each other.
* @default []
* @type string[] | number[] | { checked: string[]; halfChecked: string[] }
*/
checkedKeys:
| string[]
| number[]
| {
checked: string[];
halfChecked: string[];
};
/**
* Check treeNode precisely; parent treeNode and children treeNodes are not associated
* @default false
* @type boolean
*/
checkStrictly: boolean;
/**
* Specifies the keys of the default checked treeNodes
* @default []
* @type string[] | number[]
*/
defaultCheckedKeys: string[] | number[];
/**
* Whether to expand all treeNodes by default
* @default false
* @type boolean
*/
defaultExpandAll: boolean;
/**
* Specify the keys of the default expanded treeNodes
* @default []
* @type string[] | number[]
*/
defaultExpandedKeys: string[] | number[];
/**
* auto expand parent treeNodes when init
* @default true
* @type boolean
*/
defaultExpandParent: boolean;
/**
* Specifies the keys of the default selected treeNodes
* @default []
* @type string[] | number[]
*/
defaultSelectedKeys: string[] | number[];
/**
* whether disabled the tree
* @default false
* @type boolean
*/
disabled: boolean;
/**
* Specifies whether this Tree is draggable (IE > 8)
* @default false
* @type boolean
*/
draggable: boolean;
/**
* (Controlled) Specifies the keys of the expanded treeNodes
* @default []
* @type 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;
/**
* Load data asynchronously
* @type Function
*/
loadData: (node: TreeNode) => any;
/**
* (Controlled) Set loaded tree nodes. Need work with loadData
* @default []
* @type string[]
*/
loadedKeys: string[];
/**
* Allows selecting multiple treeNodes
* @default false
* @type boolean
*/
multiple: boolean;
/**
* (Controlled) Specifies the keys of the selected treeNodes
* @type string[] | number[]
*/
selectedKeys: string[] | number[];
/**
* Shows the icon before a TreeNode's title.
* There is no default style; you must set a custom style for it if set to true
* @default false
* @type boolean
*/
showIcon: boolean;
/**
* Shows a connecting line
* @default false
* @type boolean
*/
showLine: boolean;
} }