# vnode-flowchart

> [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)

Latest version **1.0.11** (published 2022-07-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install vnode-flowchart
pnpm add vnode-flowchart
yarn add vnode-flowchart
bun add vnode-flowchart
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2022-07-05 |
| First published | 2021-09-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 168 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Homelander |
| Maintainers | tecnobyte |

## Links

- npm: https://www.npmjs.com/package/vnode-flowchart
- Repository: https://github.com/Tecnobyte/flowchart
- Homepage: https://github.com/Tecnobyte/flowchart#readme
- Issues: https://github.com/Tecnobyte/flowchart/issues
- npm.io page: https://npm.io/package/vnode-flowchart

## Dependencies (15)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [babel](https://npm.io/package/babel.md) ^6.23.0
- [cross-env](https://npm.io/package/cross-env.md) ^7.0.3
- [css-loader](https://npm.io/package/css-loader.md) ^6.2.0
- [vue-loader](https://npm.io/package/vue-loader.md) ^15.9.6
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.14.8
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2
- [webpack-serve](https://npm.io/package/webpack-serve.md) ^4.0.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.14.8
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.6.14
- [@fortawesome/vue-fontawesome](https://npm.io/package/@fortawesome/vue-fontawesome.md) ^2.0.8
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.1.1
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.1.1

## Recent versions

- 1.0.11 (latest) — 2022-07-05
- 1.0.10 — 2022-07-03
- 1.0.9 — 2022-07-03
- 1.0.8 — 2022-07-03
- 1.0.7 — 2022-07-03
- 1.0.6 — 2022-07-03
- 1.0.5 — 2022-07-03
- 1.0.4 — 2022-07-03
- 1.0.3 — 2022-07-03
- 1.0.2 — 2021-09-29
- 1.0.1 — 2021-09-29
- 1.0.0 — 2021-09-28

## README

# Flow Chart 2

[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)

Flow Chart is a package, you will help to create beatiful orgcharts. 

## Installation

Flow Chart requires [Vue 2](https://v2.vuejs.org/) to run.

Install package.

```sh
npm i vnode-flowchart
```
Implement like plugin
```js
Vue.use(FlowChart);
```

Implement like component
```js
import { FlowChart } from 'vnode-flowchart';
export default {
    components:{FlowChart},
}
```



## Props

| Prop | Description | default |
| ------ | ------ | ------ |
| hide-children-with-click | This prop do when click in node hide clildren | false |
| hide-buttons | Hide buttons center, zoom in and Zoom out | false |

## Events

| Event | Description | params |
| ------ | ------ | ------ |
| node-click | Emit when click node | function(node, parent, level){} |

# Slots
| Slot | Description | Scopes |
| ------ | ------ | ------ |
| node | You can change desing from node | node, parent, level |
| options | You can put differents options |  |

## Examples

![example3](https://github.com/Tecnobyte/flowchart/blob/master/img/Screenshot_3.png?raw=true)


```vue

<template>
    <flow-chart v-model="tree" />
</template>
<script>
export default {
    data:()=>{
        return{
            tree: [
                {
                    name: "root",
                    description: 'root description',
                    children:[
                        {
                            name: 'child',
                            description: 'description one',
                            children:[
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                            ]
                        },
                        {
                            name: 'child',
                            description: 'description'
                        },
                        {
                            name: 'child',
                            description: 'description one'
                        },
                        {
                            name: 'child',
                            description: 'description one'
                        },
                        {
                            name: 'child',
                            description: 'description one',
                            children:[
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                                {
                                    name: 'child',
                                    description: 'description one'
                                },
                            ]
                        },
                    ]
                },
                
            ],
        }
    },
}

</script>
```
## 
![example1](https://github.com/Tecnobyte/flowchart/blob/master/img/Screenshot_1.png?raw=true)
```vue
<template>
    <flow-chart v-model="tree">
        <template v-slot:node="{node, parent}">
            <div style="widht:100%;background-color:#e0726f;padding:5px" >{{ node.name }}</div>
            <div>
                <img style="float:left" width="50" height="50" src="https://www.fillmurray.com/200/200" alt="Imagen">
                {{ node.name }} {{ parent ? parent.name : '' }}
            </div>
        </template>
    </flow-chart>
</template>
```
##
![example2](https://github.com/Tecnobyte/flowchart/blob/master/img/Screenshot_2.png?raw=true)


## License

MIT

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