1.1.21 • Published 8 months ago

@goodware/svelte-kanban v1.1.21

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

Live demo.

A simple Svelte Kanban made in pure CSS

Installation

npm i --save svelte-kanban
npm i --save-dev sass

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:

namedefaultdescription
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)5Max number of columns the user can display on the kanban.
minimalist (unavailable yet)falseBoolean, 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 /!)

namedefaultdescription
theme'light'string: specify the theme you want to used light/dark
primarynullstring : if you want to specify the primary background color (behind the kanbans columns / card background)
secondarynullstring : if you want to specify the secondary background color (kanbans columns)
thirdnullstring : if you want to specify the secondary background color (no usage atm)
fontPrimarynullstring : if you want to specify the primary font color (col title, card title)
fontSecondarynullstring : if you want to specify the secondary font color (cards count, new task, date text)

Events

Kanban.svelte dispatches the following events:

namedetaildescription
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
@syncedstore/core@syncedstore/sveltey-webrtc
@everything-registry/sub-chunk-369
1.1.21

8 months ago

1.1.20

8 months ago

1.1.18

8 months ago

1.1.16

8 months ago

1.1.15

8 months ago

1.1.14

8 months ago

1.1.13

8 months ago

1.1.12

8 months ago

1.1.11

8 months ago

1.1.10

8 months ago

1.1.8

8 months ago

1.1.7

8 months ago

1.1.6

8 months ago

1.1.5

8 months ago

1.1.4

8 months ago

1.1.3

8 months ago

1.1.2

8 months ago

1.1.1

8 months ago

1.1.0

8 months ago

1.0.0

9 months ago

1.0.0-beta.0

9 months ago