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 |