# zero-tree

> A Vue Tree by zeromake

Latest version **0.1.4** (published 2018-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install zero-tree
pnpm add zero-tree
yarn add zero-tree
bun add zero-tree
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2018-03-28 |
| First published | 2017-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 147.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zeromake |
| Maintainers | zeromake |
| Keywords | vue, tree, vue-tree |

## Links

- npm: https://www.npmjs.com/package/zero-tree
- Repository: https://github.com/zeromake/zero-tree
- Homepage: https://github.com/zeromake/zero-tree#readme
- Issues: https://github.com/zeromake/zero-tree/issues
- npm.io page: https://npm.io/package/zero-tree

## Recent versions

- 0.1.4 (latest) — 2018-03-28
- 0.1.3 — 2017-08-30
- 0.1.2 — 2017-06-19

## README

# zero-tree
A Vue tree by zeromake

## Install
``` bash
npm i github:zeromake/zero-tree
```
## Use
``` javascript
import ZeroTree from 'zero-tree'
import 'zero-tree/dist/zero-tree.min.css'

Vue.use(ZeroTree) // mount svg
//ZeroTree.install() // mount svg

new Vue({
    el: '#app',
    template: '<div id="app">\
                <zero-tree v-model="keys" :treeData="treeData"/>\
                <span>{{keys}}</span>\
               </div>',
    data: function() {
        return {
            keys: [],
            treeData: [
                {
                    id: 1,
                    label: 'level1-1',
                    children: [
                        {
                            id: 4,
                            label: 'level2-1'
                        },
                        {
                            id: 5,
                            label: 'level2-2'
                        },
                        {
                            id: 6,
                            label: 'level2-3'
                        }
                    ]
                },
                {
                    id: 2,
                    label: 'level1-2'
                },
                {
                    id: 3,
                    label: 'level1-3',
                    children: [
                        {
                            id: 7,
                            label: 'level2-4'
                        },
                        {
                            id: 8,
                            label: 'level2-5'
                        },
                        {
                            id: 9,
                            label: 'level2-6'
                        }
                    ]
                }
            ]
        }
    }
})
```
## prop

### options(Object)

| name | remark | type | required | default|
| ---- | ------ | ---- | -------- | ------ |
| showCheckbox | is check tree | Boolean | false | true |
| children | children tree key | String | false | 'children' |
| label | label key | String | false | 'label' |
| treeKey | tree key | String | false | 'id' |
| checkFolder | no check's tree check folder  | Boolean | false | fasle |

### treeData(Array[Object])
> tree data

| name | remark | type | required | default|
| ---- | ------ | ---- | -------- | ------ |
| id[options.treeKey] | tree key | Any | true | - |
| label[options.label] | node text | String | true | - |
| children[options.children] | children tree key | String | true | - |
| open | node is expand | Boolean | false | false |
| checked | node is checked | Boolean | false | fasle |

### v-model(Array[Any]])
> checked node's treeKey Array

> set v-model checked key node

## Method
- getCheckLabels() get check node's label Array
- getCheckNode() get check node's Array
- checkKey(key, check) set node deep checked
- checkAll(check) check all node or uncheck all node

## slot
``` html
<template scope="props">
    {{props.item.label}}
</teplate>
```
## Todo
- [ ] unit test
- [ ] travis
- [ ] coverage
- [ ] npm

## Thank
[vue2-tree](https://github.com/halower/vue2-tree) by @halower

---
_Source: https://npm.io/package/zero-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._