Kanban

import { Kanban, KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider, KanbanColumn, KanbanColumnContent, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay } from '@pharen/ui';

<script setup lang="ts">
import { Kanban, KanbanBoard, KanbanCard, KanbanCards, KanbanColumn, KanbanHeader, KanbanItem } from '@pharen/ui';
const columns = {
  todo: [{ id: 'brief', title: 'Write project brief' }],
  done: [{ id: 'scope', title: 'Confirm scope' }],
};
</script>

<template>
  <Kanban :default-value="columns" :get-item-value="item => item.id">
    <KanbanBoard>
      <KanbanColumn v-for="(items, key) in columns" :key="key" :value="key">
        <KanbanHeader>{{ key }}</KanbanHeader>
        <KanbanCards>
          <KanbanItem v-for="item in items" :key="item.id" :value="item.id">
            <KanbanCard>{{ item.title }}</KanbanCard>
          </KanbanItem>
        </KanbanCards>
      </KanbanColumn>
    </KanbanBoard>
  </Kanban>
</template>