Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
svelte-kanban
Advanced tools
Readme
A simple Svelte Kanban made in pure CSS
## Installationnpm i svelte-kanban
<script>
import Kanban from 'svelte-kanban';
</script>
<div style="width:100%; height:100%;">
<Kanban/>
</div>
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. |
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) |
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. |
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° ${}`)}
/>
git clone https://github.com/V-Py/svelte-kanban
cd svelte-kanban
npm install
npm run dev
FAQs
 Svelte Kanban
The npm package svelte-kanban receives a total of 42 weekly downloads. As such, svelte-kanban popularity was classified as not popular.
We found that svelte-kanban demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.