A simple Kanban component built with Semantic-UI + Vue.js.
- Drag and drop tasks cards on the kanban board.
- Organize tasks by Owner (Team view)
- Customizable API
- Beautiful
$ npm install --save semantic-kanban
<template>
<semantic-kanban
:tasks="tasks"
:members="members"
:options="options"
@updateTask="updateTask"
@deleteTask="deleteTask"
@updateMember="updateMember">
</semantic-kanban>
</template>
<script type="text/javascript">
import SemanticKanban from 'semantic-kanban'
export default {
components: {
SemanticKanban
},
data () {
return {
tasks: [{
id: 1,
subject: 'Brace yourselves',
description: 'Winter is coming...',
status: 'doing',
dueDate: '2017-09-09 07:00',
owner: 1
}],
members: [{
id: 1,
name: 'Danilo',
avatar: 'img/avatar.png'
}],
options: {
defaultTaskDialog: true,
defaultConfirmDialog: true,
defaultMemberDialog: true
}
}
},
methods: {
updateTask (task) {
console.log(task)
},
deleteTask (task) {
console.log(task)
},
updateMember (member) {
console.log(member)
}
}
}
</script>Standard tasks have the following fields:
id, subject, description, status, dueDate, owner. You can add custom fields, and override some contents of the task card. Ex: addtypefield ('feature'|'bug'), and cutomize the extra content of the task card:
<template>
<semantic-kanban
:tasks="tasks"
:members="members"
:options="options"
@updateTask="updateTask"
@deleteTask="deleteTask"
@updateMember="updateMember">
</semantic-kanban>
</template>
<script type="text/javascript">
import SemanticKanban from 'semantic-kanban'
export default {
components: {
SemanticKanban
},
data () {
return {
tasks: [{
id: 1,
subject: 'Brace yourselves',
description: 'Winter is coming...',
status: 'doing',
dueDate: '2017-09-09 07:00',
owner: 1,
type: 'feature'
},
{
id: 3,
subject: 'Kill Cersei',
description: 'Shame!',
status: 'blocked',
dueDate: '2017-08-20 18:00',
owner: 1,
type: 'bug'
}],
members: [{
id: 1,
name: 'Danilo',
avatar: 'img/avatar.png'
}],
options: {
defaultTaskDialog: true,
defaultConfirmDialog: true,
defaultMemberDialog: true,
taskExtraContent () {
return function() {
const dueDate = this.task.dueDate;
const remain = 10;
const icon = this.task.type == 'feature' ? 'blue cubes icon' :
this.task.type == 'bug' ? 'red bug icon' : '';
return `
<div class="right floated meta">
<span>Rem. ${remain}h</span>
<i class="${icon}"></i>
</div>
${dueDate}
`;
}
}
}
}
},
methods: {
updateTask (task) {
console.log(task);
},
deleteTask (task) {
console.log(task)
},
updateMember (member) {
console.log(member)
}
}
}
</script>
Type: number
Type: string
Short title of the task.
Type: string
Description of the task.
Type: string ('backlog' | 'doing' | 'blocked' | 'done' | 'archived'`)
Status of the task:
'backlog': left column of kanban, containing not started tasks.
'doing': first column of board, containing in progress tasks.
'blocked': second column of board, containing blocked/stoped tasks.
'done': right column of board, containing in done tasks.
'archived' represents a finished task that it's not viewed on the board.
Type: date
Due date of the tasks. Format: 'YYYY-MM-DD hh:mm'
Type: number
Member Id from members list.
Type: Array
Tags of the task.
Ex: ['critical', 'help-wanted'].
Ex2: [{value: 'critical', color: 'red'}].
Type: number
Type: string
Type: string
href of <img>
Type: boolean
Open default dialog for editing task. Set it to false to use a custom dialog.
Type: boolean
Open default dialog for delete task. Set it to false to use a custom dialog.
Type: array
Default: ['Backlog','Team','Doing','Blocked','Done']
Type: string
Default: New Task
Type: string
Default: New Member
Type: function
Default return:
<div class="right floated meta">
<i class="${semafor}"><i>
</div>
${formattedSubject}Type: function
Default return:
<div class="right floated meta">
<span>${ownerName}</span>
</div>
${dueDate}Type: function
Default return:
<div class="right floated meta">
<i class="${semafor}"></i>
</div>
${formattedSubject}Type: function
Default return:
<div class="right floated meta">
<span>Rem. ${remain}h</span>
</div>
${dueDate}Emitted when the task card is clicked.
Params : task
Emitted when the New Task button is clicked.
Emitted when the task is updated by drag and drop between the status columns, or when the save button is clicked on the task dialog.
Params : task
Emitted when the close button is clicked.
Params : task
Emitted when the confirm button is clicked.
Params : task
Emitted when a new tag is added in the task dialog.
Params : task, tag
Emitted when a tag is deleted in the task dialog.
Params : task, tag
Emitted when the save button is clicked in the member dialog.
MIT © Danilo Sampaio