jiku-ui/types/easy-tree.d.ts

A Component Library for Vue.js.

import { CreateElement, VNode } from 'vue';
import { HeinerUIComponent } from './component';

export interface EasyTreeData {
  id?: any;
  label?: string;
  children?: EasyTreeData[];
}

export interface TreeProps {
  label: string;
  children: string;
}

export interface TreeNode<K, D> {
  childNodes: TreeNode<K, D>[];
  data: D;
  expanded: boolean;
  id: number;
  isLeaf: boolean;
  level: number;
  parent: TreeNode<K, D> | null;
  store: any;
  key: K;
  label: string;
  nextSibling: TreeNode<K, D> | null;
  previousSibling: TreeNode<K, D> | null;
  isCurrent: boolean;
}

/** incomplete, you can convert to any to use other properties */
export interface TreeStore<K, D> {
}

/** Tree Component */
export declare class HnEasyTree<K, D extends EasyTreeData> extends HeinerUIComponent {
  /** TreeStore */
  store: TreeStore<K, D>;

  /** 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: TreeProps;

  /**
   * Render function for a specific node
   *
   * @param h The render function
   */
  renderContent: (h: CreateElement, context: { node: TreeNode<K, D>; data: D; store: TreeStore<K, D> }) => 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 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 show branch  */
  showBranch: number;

  /**
   * Return the highlight node's key (null if no node is highlighted)
   */
  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: K): void;

  /**
   * Return the highlight node data (null if no node is highlighted)
   * @todo the name of methods should be getCurrentNodeData
   */
  getCurrentNode(): D;

  /**
   * Set highlighted node, only works when node-key is assigned
   *
   * @param node The node to be highlighted
   */
  setCurrentNode(data: D): void;

  /**
   * Get node by node key or node data
   *
   * @param by node key or node data
   */
  getNode(by: D | K): TreeNode<K, D>;

  /**
   * Remove node by key or node data or node instance
   *
   * @param by key or node data or node instance
   */
  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: D, parent: D | K): void;

  /** Custom tree node icon */
  iconClass?: string;

}