Socket
Socket
Sign inDemoInstall

svelte-kanban

Package Overview
Dependencies
3
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-kanban

 Svelte Kanban


Version published
Maintainers
1
Weekly downloads
49
decreased by-39.51%

Weekly downloads

Readme

Source

Svelte Kanban
 Svelte Kanban

Live demo.

A simple Svelte Kanban made in pure CSS

Svelte Kanban ## Installation
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:

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

Keywords

FAQs

Last updated on 14 Oct 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc