From 3a7a1ff8bbeb8a8f9bc16ca1753181c2ea9c18a3 Mon Sep 17 00:00:00 2001 From: ZSkycat Date: Mon, 6 Aug 2018 11:11:18 +0800 Subject: [PATCH] Tree & MessageBox: fix type definition (#12214) * MessageBox: fix ElMessageBoxOptions.message * Tree: fix type definition --- types/message-box.d.ts | 4 +- types/tree.d.ts | 233 +++++++++++++++++++++-------------------- 2 files changed, 122 insertions(+), 115 deletions(-) diff --git a/types/message-box.d.ts b/types/message-box.d.ts index 0b4613603..0622c2b23 100644 --- a/types/message-box.d.ts +++ b/types/message-box.d.ts @@ -1,4 +1,4 @@ -import Vue from 'vue' +import Vue, { VNode } from 'vue' import { MessageType } from './message' export type MessageBoxCloseAction = 'confirm' | 'cancel' | 'close' @@ -47,7 +47,7 @@ export interface ElMessageBoxOptions { title?: string /** Content of the MessageBox */ - message?: string + message?: string | VNode /** Message type, used for icon display */ type?: MessageType diff --git a/types/tree.d.ts b/types/tree.d.ts index 7b3e76bd0..71075d027 100644 --- a/types/tree.d.ts +++ b/types/tree.d.ts @@ -1,134 +1,141 @@ -import { CreateElement, VNode } from 'vue' -import { ElementUIComponent } from './component' +import { CreateElement, VNode } from 'vue'; +import { ElementUIComponent } from './component'; -/** The node of the tree */ -export interface TreeNode { - id?: any, - label?: string, - isLeaf?: boolean, - children?: TreeNode[] +export interface TreeData { + id?: any; + label?: string; + isLeaf?: boolean; + children?: TreeData[]; } -export interface RenderContent { +export interface TreeNode { + checked: boolean; + childNodes: TreeNode[]; + data: D; + expanded: boolean; + id: number; + indeterminate: boolean; + isLeaf: boolean; + level: number; + loaded: boolean; + loading: boolean; + parent: TreeNode | null; + store: any; + visible: boolean; + disabled: boolean; + icon: string; + key: K; + nextSibling: TreeNode | null; + previousSibling: TreeNode | null; +} + +/** incomplete, you can convert to any to use other properties */ +export interface TreeStore { + _getAllNodes: () => TreeNode[]; +} + +/** Tree Component */ +export declare class ElTree extends ElementUIComponent { + /** TreeStore */ + store: TreeStore; + + /** Tree data */ + data: D[]; + + /** Text displayed when data is void */ + emptyText: string; + + /** Unique identity key name for nodes, its value should be unique across the whole tree */ + nodeKey: string; + + /** Configuration options, see the following table */ + props: object; + + /** Method for loading subtree data */ + load: (data: D, resolve: Function) => void; + /** * Render function for a specific node * * @param h The render function - * @param data The data object containing the specific node */ - (h: CreateElement, data: { node: TreeNode }): VNode -} + renderContent: (h: CreateElement, context: { node: TreeNode; data: D; store: TreeStore }) => VNode; + + /** Whether current node is highlighted */ + highlightCurrent: boolean; + + /** Whether to expand all nodes by default */ + defaultExpandAll: boolean; + + /** Whether to expand or collapse node when clicking on the node. If false, then expand or collapse node only when clicking on the arrow icon. */ + expandOnClickNode: boolean; + + /** Whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. */ + checkOnClickNode: boolean; + + /** Whether to expand father node when a child node is expanded */ + autoExpandParent: boolean; + + /** Array of keys of initially expanded nodes */ + defaultExpandedKeys: K[]; + + /** Whether node is selectable */ + showCheckbox: boolean; + + /** Whether checked state of a node not affects its father and child nodes when show-checkbox is true */ + checkStrictly: boolean; + + /** Array of keys of initially checked nodes */ + defaultCheckedKeys: K[]; -export interface FilterNodeMethod { /** - * Filter method for each node + * This function will be executed on each node when use filter method. If return false, tree node will be hidden. * * @param value The query string * @param data The original data object * @param node Tree node */ - (value: string, data: TreeNode, node: any): boolean -} + filterNodeMethod: (value: string, data: D, node: TreeNode) => boolean; + + /** Whether only one node among the same level can be expanded at one time */ + accordion: boolean; + + /** Horizontal indentation of nodes in adjacent levels in pixels */ + indent: number; + + /** Whether enable tree nodes drag and drop */ + draggable: boolean; -export interface AllowDragMethod { /** - * Function executed before dragging a node + * Function to be executed before dragging a node * * @param node The node to be dragged */ - (node: any): boolean -} + allowDrag: (node: TreeNode) => boolean; -export interface AllowDropMethod { /** - * Function executed before the dragging node is dropped + * Function to be executed before the dragging node is dropped * * @param draggingNode The dragging node * @param dropNode The target node * @param type Drop type */ - (draggingNode: any, dropNode: any, type: string): boolean -} - -/** Tree Component */ -export declare class ElTree extends ElementUIComponent { - /** Tree data */ - data: TreeNode[] - - /** Text displayed when data is void */ - emptyText: string - - /** Unique identity key name for nodes, its value should be unique across the whole tree */ - nodeKey: string - - /** Configuration options, see the following table */ - props: object - - /** Method for loading subtree data */ - load: (node: TreeNode, resolve: Function) => void - - /** Render function for tree node */ - renderContent: RenderContent - - /** Whether current node is highlighted */ - highlightCurrent: boolean - - /** Whether to expand all nodes by default */ - defaultExpandAll: boolean - - /** Whether to expand or collapse node when clicking on the node. If false, then expand or collapse node only when clicking on the arrow icon. */ - expandOnClickNode: boolean - - /** Whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. */ - checkOnClickNode: boolean - - /** Whether to expand father node when a child node is expanded */ - autoExpandParent: boolean - - /** Array of keys of initially expanded nodes */ - defaultExpandedKeys: any[] - - /** Whether node is selectable */ - showCheckbox: boolean - - /** Whether checked state of a node not affects its father and child nodes when show-checkbox is true */ - checkStrictly: boolean - - /** Array of keys of initially checked nodes */ - defaultCheckedKeys: any[] - - /** This function will be executed on each node when use filter method. If return false, tree node will be hidden. */ - filterNodeMethod: FilterNodeMethod - - /** Whether only one node among the same level can be expanded at one time */ - accordion: boolean - - /** Horizontal indentation of nodes in adjacent levels in pixels */ - indent: number - - /** Whether enable tree nodes drag and drop */ - draggable: boolean - - /** Function to be executed before dragging a node */ - allowDrag: AllowDragMethod - - /** Function to be executed before the dragging node is dropped */ - allowDrop: AllowDropMethod + allowDrop: (draggingNode: TreeNode, dropNode: TreeNode, type: 'prev' | 'inner' | 'next') => boolean; /** * Filter all tree nodes. Filtered nodes will be hidden * * @param value The value to be used as first parameter for `filter-node-method` */ - filter (value: any): void + filter(value: any): void; /** * Update the children of the node which specified by the key - * + * * @param key the key of the node which children will be updated * @param data the children data */ - updateKeyChildren (key: any, data: TreeNode[]): void + updateKeyChildren(key: K, data: D[]): void; /** * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes @@ -136,7 +143,7 @@ export declare class ElTree extends ElementUIComponent { * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes * @param includeHalfChecked If the `includeHalfChecked` is `true`, the return value contains halfchecked nodes */ - getCheckedNodes (leafOnly?: boolean, includeHalfChecked?: boolean): TreeNode[] + getCheckedNodes(leafOnly?: boolean, includeHalfChecked?: boolean): D[]; /** * Set certain nodes to be checked. Only works when `node-key` is assigned @@ -144,14 +151,14 @@ export declare class ElTree extends ElementUIComponent { * @param nodes An array of nodes to be checked * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes */ - setCheckedNodes (nodes: TreeNode[], leafOnly?: boolean): void + setCheckedNodes(data: D[], leafOnly?: boolean): void; /** * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes' keys * * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes */ - getCheckedKeys (leafOnly?: boolean): any[] + getCheckedKeys(leafOnly?: boolean): K[]; /** * Set certain nodes to be checked. Only works when `node-key` is assigned @@ -159,7 +166,7 @@ export declare class ElTree extends ElementUIComponent { * @param keys An array of node's keys to be checked * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes */ - setCheckedKeys (keys: any[], leafOnly?: boolean): void + setCheckedKeys(keys: K[], leafOnly?: boolean): void; /** * Set node to be checked or not. Only works when `node-key` is assigned @@ -168,77 +175,77 @@ export declare class ElTree extends ElementUIComponent { * @param checked Indicating the node checked or not * @param deep Indicating whether to checked state deeply or not */ - setChecked (data: TreeNode | any, checked: boolean, deep: boolean): void + setChecked(data: D | K, checked: boolean, deep: boolean): void; /** * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes */ - getHalfCheckedNodes (): void + getHalfCheckedNodes(): D[]; /** * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes' keys */ - getHalfCheckedKeys (): void; + getHalfCheckedKeys(): K[]; /** * Return the highlight node's key (null if no node is highlighted) */ - getCurrentKey (): any + getCurrentKey(): K; /** * Set highlighted node by key, only works when node-key is assigned * * @param key The node's key to be highlighted */ - setCurrentKey (key: any): void + setCurrentKey(key: K): void; /** * Return the highlight node (null if no node is highlighted) */ - getCurrentNode (): TreeNode + getCurrentNode(): D; /** * Set highlighted node, only works when node-key is assigned * * @param node The node to be highlighted */ - setCurrentNode (node: TreeNode): void + setCurrentNode(data: D): void; /** * Get node by node key or node data - * + * * @param by node key or node data */ - getNode (by: TreeNode | any): TreeNode + getNode(by: D | K): D; /** * Remove node by key or node data or node instance - * + * * @param by key or node data or node instance */ - remove (by: TreeNode | any): void + remove(by: D | K): void; /** * Append a child node to specified node - * + * * @param childData the data of appended node * @param parent key or node data or node instance of the parent node */ - append (childData: TreeNode, parent: TreeNode | any): void + append(childData: D, parent: D | K): void; /** * insert a node before specified node - * + * * @param data the data of inserted node * @param ref key or node data or node instance of the reference node */ - insertBefore (data: TreeNode, ref: TreeNode | any): void + insertBefore(data: D, ref: D | K): void; /** * insert a node after specified node - * + * * @param data the data of inserted node * @param ref key or node data or node instance of the reference node */ - insertAfter (data: TreeNode, ref: TreeNode | any): void + insertAfter(data: D, ref: D | K): void; }