Live demo.

A simple Svelte Kanban made in pure CSS

npm i svelte-kanban

Usage

<script>
    import Kanban from 'svelte-kanban';
</script>

<div style="width:100%; height:100%;">
    <Kanban/>
</div>

Props

Full list of props/bindable variables for this component:

| name | default | description | | :--------------- | :--------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | lang | 'en' | String to specify the language of the kanban, only french and english supported atm (en/fr). | | colsList | ['Todo','Done'] | Array of string to define the default columns.| | catsList | [{'new',color:'white', bgColor:"#0A99FF"},{label:'important',color:'white',bgColor:"#EA0B38"},{label:'task',color:'black',bgColor:"#00F5DC"},{label:'personal',color:'white',bgColor:"#629387"},{label:'work',color:'black',bgColor:"#13F644"}] | Array of objects (label:string, color:string, bgColor:string)defining the categories available for the cards.| | maxColumns (unavailable yet) | 5 | Max number of columns the user can display on the kanban.| | minimalist (unavailable yet)| false | Boolean, if set to true, the card will be minimalist version with only a title and a delete button.|

Styling props (update 08/03/2022 : AVAILABLE /!)

| name | default | description | | :--------------- | :--------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | theme | 'light' | string: specify the theme you want to used light/dark| | primary | null | string : if you want to specify the primary background color (behind the kanbans columns / card background)| | secondary | null | string : if you want to specify the secondary background color (kanbans columns)| | third | null | string : if you want to specify the secondary background color (no usage atm)| | fontPrimary | null | string : if you want to specify the primary font color (col title, card title)| | fontSecondary | null | string : if you want to specify the secondary font color (cards count, new task, date text)|

Events

Kanban.svelte dispatches the following events:

| name | detail | description | | ----------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | columnRemove | { position:number, name:string } | Triggers when a column is removed. | | columnAdd | { position: number } | Triggers when a column is added. | | columnMoved | { old_pos:number, new_pos:number } | Triggers when a column is moved. | | cardDragStart | {card:number, col:number, event:Event} | Triggers when a card start being dragged. col = position of the column, card = position of the card in the column, event: mousedown event props | | cardDragMove | {card:number, col:number, event:Event} | Triggers every time the card is moving (ie on every mousemove) | | cardDragEnd |{card:number, col:number, event:Event}| Triggers when the dragging of the card ended.| | cardDragSuccess |{old_col:number, old_pos:number, new_col:number, new_pos:number}| Triggers when the drop of the card is a success (ie : the card has been moved to another column).| | cardDragFailed |{col:number, card:number}| Triggers when the drop of the card is a fail (ie : the card has not been moved and stayed in the origin column).| | cardAdd |{col:number}| Triggers when a card is added to a column.| | cardPropModify |{ card:number, col:number, prop:string, value:string}| Triggers when a prop of a card is in edit mode.| | cardPropSaved |{ card:number, col:number, prop:string, value:string}| Triggers when a prop of a card is saved.| | moveCardUp |{col:number, old_pos:number, new_pos:number}| Triggers when a card is moved down inside a column.| | moveCardDown |{col:number, old_pos:number, new_pos:number}| Triggers when a card is moved up inside a column.|

Examples

• on:columnAdd={(e) => console.log('columnAdd', e)}
• on:cardAdd={(e) => console.log('cardAdd', e}.
• on:moveCardUp={yourFunctionHere}

<Kanban
  on:columnAdd={(e) => alert(`You ${e.detail.type}ed '${e.detail.option.label}'`)}
  on:cardDragStart={(e) => alert(`You are moving the card at the '${e.detail.option.label}' position on the column n° ${}`)}
/>

Dev Mode

git clone https://github.com/V-Py/svelte-kanban
cd svelte-kanban
npm install
npm run dev