Kanban

x-bladewind::kanban, x-bladewind::kanban.column and x-bladewind::kanban.card build a board of columns holding draggable cards, the pattern behind any task tracker. A card can be dragged with the mouse or a touch screen between columns and within a column, or moved the same way with the keyboard: focus a card and use the arrow keys, up and down to reorder within a column, left and right to move it into the column beside it.

To do

Design the onboarding flow
Write the API documentation

In progress

Build the payments webhook

Done

Set up the staging environment

markup

<x-bladewind::kanban>
    <x-bladewind::kanban.column title="To do" id="todo">
        <x-bladewind::kanban.card value="1">Design the onboarding flow</x-bladewind::kanban.card>
        <x-bladewind::kanban.card value="2">Write the API documentation</x-bladewind::kanban.card>
    </x-bladewind::kanban.column>
    <x-bladewind::kanban.column title="In progress" id="in-progress">
        <x-bladewind::kanban.card value="3">Build the payments webhook</x-bladewind::kanban.card>
    </x-bladewind::kanban.column>
    <x-bladewind::kanban.column title="Done" id="done">
        <x-bladewind::kanban.card value="4">Set up the staging environment</x-bladewind::kanban.card>
    </x-bladewind::kanban.column>
</x-bladewind::kanban>

Reacting To A Move

Set on_move on the board to the name of a JavaScript function. It is called after every move, whether by drag or by keyboard, as (cardId, fromColumnId, toColumnId, newIndex). Use it to save the new position with a request to your backend.

markup

<x-bladewind::kanban on_move="saveCardPosition">
    ...
</x-bladewind::kanban>

<script>
    function saveCardPosition(cardId, fromColumnId, toColumnId, newIndex) {
        fetch('/tasks/' + cardId + '/move', {
            method: 'POST',
            body: JSON.stringify({ column: toColumnId, position: newIndex }),
        });
    }
</script>

Empty State

A column with no cards shows a short message instead of a blank space. Customise it with empty_text.

Backlog

markup

<x-bladewind::kanban.column title="Backlog" id="backlog" empty_text="Nothing queued up yet">
</x-bladewind::kanban.column>

Loading State

Set loading="true" on a column while its cards are still being fetched. It shows a spinner in place of the card list.

Review

markup

<x-bladewind::kanban.column title="Review" id="review" loading="true">
</x-bladewind::kanban.column>

Column Actions

Give a column an actions slot for a control shown beside its title, such as an add-card button.

To do

Design the onboarding flow

markup

<x-bladewind::kanban.column title="To do" id="todo">
    <x-slot:actions>
        <button type="button">
            <x-bladewind::icon name="plus" />
        </button>
    </x-slot:actions>
    <x-bladewind::kanban.card value="1">Design the onboarding flow</x-bladewind::kanban.card>
</x-bladewind::kanban.column>

Full List Of Attributes

Kanban

Option	Default	Available Values
animation	150	Animation speed in milliseconds when a card is dropped. 0 disables it.
on_move	blank	Name of a JavaScript function called after every move as `(cardId, fromColumnId, toColumnId, newIndex)`.
class	blank	Additional CSS classes for the board's wrapper element.

Kanban with all attributes defined

markup

<x-bladewind::kanban
animation="150"
on-move="onCardMove"
class="ml-2">

Kanban Column

Option	Default	Available Values
title	blank	The column's heading.
id	a slug of the title	Identifier reported to the move hook. Set it explicitly when the title alone is not a stable, unique key.
loading	false	Hides the card list and shows a spinner instead. `true` `false`
empty_text	No cards	Shown in place of the list when it has no cards and is not loading.
actions	none	A named slot rendered beside the title.
class	blank	Additional CSS classes for the column.

Kanban Column with all attributes defined

markup

<x-bladewind::kanban.column
    title="In Progress"
    id="in-progress"
    loading="false"
    empty-text="No cards"
    class="ml-2">
    <x-slot:actions>...</x-slot:actions>
</x-bladewind::kanban.column>

Kanban Card

Option	Default	Available Values
value	blank	Identifier reported to the move hook, for example a model id.
class	blank	Additional CSS classes for the card.

Kanban Card with all attributes defined

markup

<x-bladewind::kanban.card value="42" class="ml-2">Fix login bug</x-bladewind::kanban.card>

The source file for this component is available in resources > views > components > bladewind > kanban > index.blade.php, resources > views > components > bladewind > kanban > column.blade.php, resources > views > components > bladewind > kanban > card.blade.php