# vue-dnd-kanban

> Fork from vue-kanban

Latest version **0.0.4** (published 2019-08-27) · 0 weekly downloads

## Install

```sh
npm install vue-dnd-kanban
pnpm add vue-dnd-kanban
yarn add vue-dnd-kanban
bun add vue-dnd-kanban
```

## 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.0.4 |
| Published | 2019-08-27 |
| First published | 2019-08-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Unpacked size | 7.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Leon |
| Maintainers | leon.agikigi |

## Links

- npm: https://www.npmjs.com/package/vue-dnd-kanban
- npm.io page: https://npm.io/package/vue-dnd-kanban

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.2.6
- [dragula](https://npm.io/package/dragula.md) ^3.7.2

## Recent versions

- 0.0.4 (latest) — 2019-08-27
- 0.0.3 — 2019-08-27
- 0.0.2 — 2019-08-27
- 0.0.1 — 2019-08-27

## README

# vue-dnd-kanban [![Build Status](https://travis-ci.org/BrockReece/vue-dnd-kanban.svg?branch=master)](https://travis-ci.org/BrockReece/vue-dnd-kanban) [![npm version](https://badge.fury.io/js/vue-dnd-kanban.svg)](https://badge.fury.io/js/vue-dnd-kanban)

> A drag and drop kanban board component

### [Demo](https://brockreece.github.io/vue-dnd-kanban/)

### Installation

Add vue-dnd-kanban to your project with npm
``` bash
npm install vue-dnd-kanban 
```

... or yarn
```bash
yarn add vue-dnd-kanban
```

### Basic Usage

Install the plugin
```js
import vueKanban from 'vue-dnd-kanban'

Vue.use(vueKanban)
```

and then use the component in your project.
```html
<kanban-board :stages="stages" :blocks="blocks"></kanban-board>
```

#### Props
- stages: an array of stages for the kanban board
- blocks: an array of objects that will make up the blocks on the kanban board
```js
{
  stages: [
    {
      id: 1,
      name: 'column 1',
      bgColor: '#045DE9',
    }
  ],
  blocks: [
    {
      id: 1,
      status: 'on-hold',
      title: 'Test',
    },
  ],
}
```

### Receiving Changes
The component will emit an event when a block is moved

```html
<kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock"></kanban-board>
<script>
...
  methods: {
    updateBlock(id, status) {
      this.blocks.find(b => b.id === Number(id)).status = status;
    },
  },
...
</script>
```

### Add some style
I have included a scss stylesheet in this repo as a starting point that can be used in your project
```html
<style lang="scss">
  @import './assets/kanban.scss';
</style>
```

### Customize the kanban blocks
Each block has a named slot which can be extended from the parent, like so...
```html
<kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock">
  <div v-for="stage in stages" :slot="stage" :key="stage">
    <h2>{{ stage }}</h2>
  </div>
  <div v-for="block in blocks" :slot="block.id" :key="block.id">
    <div>
      <strong>id:</strong> {{ block.id }}
    </div>
    <div>
      {{ block.title }}
    </div>
  </div>
</kanban-board>
```

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