WANZARGEN/vue-tree-wz

Tree for Vue.js

Types

Props

typescript:

interface TreeNodeStateType<T=any, S extends BaseNodeStateType = BaseNodeStateType> {
    level: number;
    padSize: string;
    toggleSize: string;
    disableToggle: boolean;
    classNames: ClassNamesType<T, S>;
}

interface BaseNodeStateType {
    expanded: boolean;
    selected: boolean;
}

type ClassNamesType<T=any, S extends BaseNodeStateType = BaseNodeStateType> = (node: TreeNode<T, S>) => {[name: string]: boolean};

interface TreeNodeProps<T=any, S extends BaseNodeStateType = BaseNodeStateType> extends TreeNodeStateType, TreeNodeSyncStateType<T, S> {}

interface TreeNodeSyncStateType<T=any, S extends BaseNodeStateType = BaseNodeStateType> {
    data: T;
    children: TreeNodeProps<T, S>[] | boolean;
    state: S;
}

interface TreeNode<T=any, S extends BaseNodeStateType = BaseNodeStateType> extends TreeNodeProps {
    key: number;
    parent: TreeNode<T, S>|null;
    sync: TreeNodeSyncStateType<T, S>;
}

type TreeNodeEventListener<T=any, S extends BaseNodeStateType = BaseNodeStateType>
    = (node: TreeNode<T, S>, matched: TreeNode<T, S>[], e: MouseEvent) => void;

list:

Name	Type(javascript)	Default	Description
level	Number	0	The depth of the node. If no value is given, it is automatically generated. It starts at 0 and goes down and increases by 1.
padSize	String	1rem	The size for expressing 1 depth(level). If no value is given to the child node, the value is inherited.
toggleSize	String	1rem	The size for toggle. If no value is given to the child node, the value is inherited.
disableToggle	Boolean	false	Whether to disable the toggle. If no value is given to the child node, the value is inherited.
classNames	Function	() => ['basic']	Class names given to each node. If no value is given to the child node, the value is inherited.
data	Array, Object, String, Number, Boolean	''	Data to display on each node. sync.
children	Array, Boolean	false	Children data. sync.
state	Boolean	false	Indicates state of the node. sync.

Slots

• row
• row-{level}
• node
• node-{level}
• left-extra
• left-extra-{level}
• toggle
• toggle-{level}
• icon
• icon-{level}
• data
• data-{level}
• right-extra
• right-extra-{level}

All slots have the same scope below:

Name	Contents	Type(typescript)
depth	Depth of the node.	string
getListeners	Function that returns listeners. See customEventListener case.	(type: string)=>any
level	The depth of the node. If no value is given, it is automatically generated. It starts at 0 and goes down and increases by 1.	number
padSize	The size for expressing 1 depth(level). If no value is given to the child node, the value is inherited.	string
toggleSize	The size for toggle. If no value is given to the child node, the value is inherited.	string
disableToggle	Whether to disable the toggle. If no value is given to the child node, the value is inherited.	boolean
classNames	Class names given to each node. If no value is given to the child node, the value is inherited.	ClassNamesType<dataType, stateType>
data	Data to display on each node. sync.	any
children	Children data. sync.	``` TreeNodeProps<T, S>[]
state	Indicates state of the node. sync.	{[name: string]: boolean}

Events

• row:{MouseEvent}
• node:{MouseEvent}
• left-extra:{MouseEvent}
• toggle:{MouseEvent}
• icon:{MouseEvent}
• data:{MouseEvent}
• right-extra:{MouseEvent}

All slots have the same parameters below:

Order	Name	Contents	Type(typescript)
1	node	It has all READONLY props of the node.	TreeNode<dataType, stateType>
2	matched	Array of the matched nodes ordered by level and starts from the root. key indicates $vnode.key which is generated by children array index.	TreeNode<dataType, stateType>[]
3	MouseEvent	MouseEvent	MouseEvent

import {BaseNodeStateType,TreeNodeProps,TreeNodeSyncStateType} from "./PTreeNode.toolset";
 
interface TreeNode<T=any, S extends BaseNodeStateType = BaseNodeStateType> extends TreeNodeProps {
    key: number;
    parent: TreeNode<T, S>|null;
    sync: TreeNodeSyncStateType<T, S>;
}

type TreeNodeEventListener<T=any, S extends BaseNodeStateType = BaseNodeStateType>
    = (node: TreeNode<T, S>, matched: TreeNode<T, S>[], e: MouseEvent) => void;