Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plantain-00/tree-component
A reactjs and vuejs tree component.
https://github.com/plantain-00/tree-component
Last synced: 5 days ago
JSON representation
A reactjs and vuejs tree component.
- Host: GitHub
- URL: https://github.com/plantain-00/tree-component
- Owner: plantain-00
- License: mit
- Created: 2017-01-23T11:15:35.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-05-24T11:54:25.000Z (over 2 years ago)
- Last Synced: 2024-04-25T12:21:12.097Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 17.1 MB
- Stars: 146
- Watchers: 8
- Forks: 32
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# tree-component
[](https://david-dm.org/plantain-00/tree-component)
[](https://david-dm.org/plantain-00/tree-component#info=devDependencies)
[](https://ci.appveyor.com/project/plantain-00/tree-component/branch/master)
[](https://badge.fury.io/js/tree-component)
[](https://www.npmjs.com/package/tree-component)
[](https://github.com/plantain-00/tree-component)
A reactjs and vuejs tree component.
## features
+ vuejs component
+ reactjs component
+ open and close
+ select and deselect
+ disabled
+ loading
+ highlighted
+ checkbox
+ custom icon or no icon
+ drag and drop
+ no dots
+ large and small
+ default and dark theme
+ contextmenu(vuejs and reactjs only)
+ node id
+ custom node(vuejs and reactjs only)
+ drag and drop between different tree
+ composition model(reactjs children and vuejs slot)
## link css
```html
```
## vuejs component
[](https://unpkg.com/tree-vue-component)
`npm i tree-vue-component`
```ts
import { Node, Tree } from "tree-vue-component";
app.component('node', Node)
app.component('tree', Tree)
```
or
```html
```
```html
```
the online demo:
## reactjs component
[](https://unpkg.com/tree-react-component)
`npm i tree-react-component`
```ts
import { Tree } from "tree-react-component";
```
or
```html
```
```html
```
the online demo:
## properties and events of the component
name | type | description
--- | --- | ---
data | [TreeData](#tree-data-structure)[] | the data of the tree
checkbox | boolean? | show checkbox for node
draggable | boolean? | whether the node is draggable
nodots | boolean? | the tree will have no dots
size | string? | can also be "large", "small"
theme | string? | can be "default"(the default theme), "dark"
dropAllowed | (dropData: common.DropData) => boolean | optional, a function to show whether the drop action is allowed
zindex | number? | z-index of contextmenu
preid | string? | the node id prefix, eg: if `preid = "test_"`, then a node's id can be `test_1-2-3`
toggle | (eventData: [EventData](#event-data-structure)) => void | triggered when opening or closing a node
change | (eventData: [EventData](#event-data-structure)) => void | triggered when selecting or deselecting a node
drop | (dropData: [DropData](#drop-data-structure)) => void | triggered when drag a node, then drop it
dragTarget | [DragTargetData](#drag-target-data-structure) | drag target, used when drag and drop between different tree
changeDragTarget | (dragTarget: [DragTargetData](#drag-target-data-structure)) => void | triggered when drag target changed
## tree data structure
```ts
type TreeData = {
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[];
contextmenu?: string | Function; // the contextmenu component, props: (data: ContextMenuData)
component?: string | Function; // the node component, props: (data: TreeData)
};
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
};
const enum DropPosition {
empty,
up,
inside,
down,
}
// For javascript users, the enum type can not imported from the package,
// it is just number(0,1,2,3 in order), so you can use this instead:
const DropPosition = {
empty: 0,
up: 1,
inside: 2,
down: 3
}
```
## event data structure
```ts
type EventData = {
data: TreeData; // 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
};
```
## drop data structure
```ts
type DropData = {
sourceData: TreeData;
sourcePath: number[];
sourceRoot: TreeData[];
targetData: TreeData;
targetPath: number[];
};
```
## contextmenu data structure
```ts
type ContextMenuData = {
data: TreeData;
path: number[];
root: TreeData[];
parent?: any;
};
```
## drag target data structure
```ts
type DragTargetData = {
root: TreeData[];
target: HTMLElement;
} | null
```
## changelogs
```ts
# v5
// vue 2
import 'tree-vue-component'
# v6
// vue 3
import { Node, Tree } from "tree-vue-component"
app.component('node', Node)
app.component('tree', Tree)
```
```bash
# v4
npm i tree-component
# v5
npm i tree-vue-component
npm i tree-react-component
npm i tree-angular-component
```
```ts
// 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";
```
```html
// v4
// v5
```
```ts
// v3 angular AOT:
import { TreeModule } from "tree-component/angular";
// v4 angular AOT:
import { TreeModule } from "tree-component/aot/angular";
```
```ts
// 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";
```
```html
// v2:
// v1:
```