A vuejs tree component

<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />

import "tree-vue-component";

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/tree-vue-component/dist/tree-vue-component.min.js"></script>

<tree :data="data"
    @toggle="toggle($event)"
    @change="change($event)">
</tree>

import { Tree } from "tree-react-component";

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/tree-react-component/dist/tree-react-component.min.js"></script>

<Tree data={data}
    toggle={this.toggle}
    change={this.change}>
</Tree>

import { TreeModule } from "tree-angular-component";

@NgModule({
    imports: [BrowserModule, FormsModule, TreeModule],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }

<tree [data]="data"
    (toggle)="toggle($event)"
    (change)="change($event)">
</tree>

type TreeData<T = any> = {
    text?: string;
    value?: T; // anything attached to the node
    icon?: string | false; // the icon class string, or no icon if is false
    state: TreeNodeState;
    children?: TreeData<T>[];
    contextmenu?: string | Function; // the contextmenu component, props: (data: ContextMenuData<T>)
    component?: string | Function; // the node component, props: (data: TreeData<T>)
};

type TreeNodeState = {
    opened: boolean; // whether the node show its children
    selected: boolean;
    disabled: boolean; // disabled node can not be selected and deselected
    loading: boolean; // show the loading icon, usually used when loading child nodes
    highlighted: boolean;
    openable: boolean; // can open or close even no children
    dropPosition: DropPosition;
    dropAllowed: boolean; // whether the drop action is allowed
};

enum DropPosition {
    empty,
    up,
    inside,
    down,
}

type EventData<T = any> = {
    data: TreeData<T>; // the data of the node that triggered the event
    path: number[]; // the index array of path from root to the node that triggered the event
};

type DropData<T = any> = {
    sourceData: TreeData<T>;
    sourcePath: number[];
    targetData: TreeData<T>;
    targetPath: number[];
};

type ContextMenuData<T = any> = {
    data: TreeData<T>;
    path: number[];
    root: TreeData<T>[];
    parent?: any;
};

# v4
npm i tree-component

# v5
npm i tree-vue-component
npm i tree-react-component
npm i tree-angular-component

// v4
import "tree-component/vue";
import { Tree } from "tree-component/react";
import { TreeModule } from "tree-component/angular";

// v5
import "tree-vue-component";
import { Tree } from "tree-react-component";
import { TreeModule } from "tree-angular-component";

// v4
<link rel="stylesheet" href="./node_modules/tree-component/tree.min.css" />

// v5
<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />

// v3 angular AOT:
import { TreeModule } from "tree-component/angular";

// v4 angular AOT:
import { TreeModule } from "tree-component/aot/angular";

// v3
import "tree-component/vue";
import { TreeComponent, NodeComponent } from "tree-component/angular";
import { Tree } from "tree-component/react";

// v2
import "tree-component/dist/vue";
import { TreeComponent, NodeComponent } from "tree-component/dist/angular";
import { Tree } from "tree-component/dist/react";

// v2:
<link rel="stylesheet" href="./node_modules/tree-component/tree.min.css" />

// v1:
<link rel="stylesheet" href="./node_modules/jstree/dist/themes/default/style.min.css" />