@zeedhi/zd-kanban-vue

ZdKanban

O componente ZdKanban é usado para quadros de tarefas.

Instalação

O ZdKanban é composto pelos pacotes @zeedhi/zd-kanban-common e @zeedhi/zd-kanban-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-kanban

Ou instale os pacotes separadamente:

npm install @zeedhi/zd-kanban-vue @zeedhi/zd-kanban-common

Registro do Componente

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdKanban, ZdKanbanColumn, ZdKanbanTask  } from '@zeedhi/zd-kanban'; 
// import { ZdKanban, ZdKanbanColumn, ZdKanbanTask } from '@zeedhi/zd-kanban-vue'; caso tenha instalado os pacotes separadamente

Vue.component('ZdKanban', ZdKanban);
Vue.component('ZdKanbanColumn', ZdKanbanColumn);
Vue.component('ZdKanbanTask', ZdKanbanTask);

Uso Básico

Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdKanban".

{
  "name": "kanban-basic-usage",
  "component": "ZdKanban",
  "columns": [
    {
      "id": "1",
      "name": "backlog",
      "title": "Backlog"
    },
    {
      "id": "2",
      "name": "in-progress",
      "title": "In Progress",
      "tasks": []
    },
    {
      "id": "3",
      "name": "in-review",
      "title": "In Review",
      "tasks": []
    },
    {
      "id": "4",
      "name": "done",
      "title": "Done",
      "tasks": []
    }
  ],
  "taskMetadata": {
    "name": "<<row.name>>_task",
    "component": "ZdKanbanTask",
    "children": [
      {
        "name": "<<row.name>>_text",
        "component": "ZdText",
        "text": "<<row.text>>"
      }
    ]
  },
  "datasource": {
    "data": [
      {
        "name": "task-name-1",
        "column": "1",
        "text": "Item 1"
      },
      {
        "name": "task-name-2",
        "column": "1",
        "text": "Item 2"
      }
    ]
  }
}

Propriedades

Nome	Tipo	Padrão	Descrição
columns	object	[]	Define um array de IColumn

IKanbanColumn

Nome	Tipo	Padrão	Descrição
tasks	object	[]	Define um array de ITask
backgroundColor	string		Define a cor de fundo da coluna
nameColor	string		Define a cor do titulo da coluna
title	string		Define o titulo da coluna, se não for definido sera utilizado o valor da propriedade name
animation	number	200	Define o tempo da animação de arrastar das tasks em milissegundos

IKanbanTask

O componente KanbanTask extende do componente ZdCard tento assim todas as suas propriedades

Nome	Tipo	Padrão	Descrição
elevation	number	1	Define o valor da elevação do card do task