Kanban

shadow

Komponent Kanban je element zobrazujúci plnoohodnotnú Kanban tabuľu. Tá umožňuje spravovať úlohy a projekty pomocou vizuálneho rozhrania.

Kanban tabuľa je rozdelená do stĺpcov, pričom každý stĺpec reprezentuje určitú fázu procesu alebo kategóriu úloh. Úlohy sú zobrazené ako karty, ktoré je možné presúvať medzi stĺpcami, čím je možné nastaviť a sledovať ich aktuálny stav.

Základné použitie

Kedy použiť

Použite wje-kanban, keď chcete riešiť daný UI problém konzistentne v rámci WebJET dizajn systému.

Kedy nepoužiť

Nepoužívajte komponent mimo jeho zodpovednosti; pri netypickom prípade radšej zložte viac menších prvkov.

Prístupnosť

Skontrolujte klávesnicové ovládanie, focus stavy, kontrast a zrozumiteľné pomenovanie interaktívnych prvkov.

Odporúčané postupy

• Preferujte API komponentu pred ručnými DOM zásahmi.
• Držte sa dizajnových tokenov a konzistentných konvencií pomenovania.
• Pred nasadením otestujte komponent v reálnych dátových scenároch.

Atribúty a vlastnosti

totalPages

Popis	Nastavuje číselnú hodnotu používanú vo voľbe total-pages.
Atribút	total-pages
Typ	number
Predvolené	0

isLoading

Popis	Definuje zoznam hodnôt spracovaných vo voľbe is-loading.
Atribút	is-loading
Typ	array
Predvolené	[]

isDragging

Popis	Určuje, či je voľba is-dragging zapnutá a ovplyvňuje správanie komponentu.
Atribút	is-dragging
Typ	boolean
Predvolené	false

selectedCards

Popis	Definuje zoznam hodnôt spracovaných vo voľbe selected-cards.
Atribút	selected-cards
Typ	array
Predvolené	[]

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

setupDragAndDropEvents

Popis	Inicializuje obsluhu ťahania a púšťania na presúvanie kariet medzi stĺpcami.
Signatúra	() => void

setupSelectAllCardsEvent

Popis	Inicializuje obsluhu, ktorá vyberá alebo ruší výber všetkých kariet v stĺpci.
Signatúra	() => void

setupMenuItemClickEvents

Popis	Inicializuje obsluhu kliknutí pre akcie položiek kanban menu.
Signatúra	() => void

updateSelectedCards

Popis	Aktualizuje vybrané karty podľa najnovších údajov komponentu.
Signatúra	(pool: HTMLElement, isChecked: boolean) => void

movePool

Popis	Presunie stĺpec na novú pozíciu v dátach komponentu.
Signatúra	(pool: HTMLElement, direction: string) => void

renamePool

Popis	Premenuje stĺpec a obnoví závislé referencie.
Signatúra	(pool: HTMLElement) => void

getCardPlaceholder

Popis	Vráti kartu zástupný prvok z aktuálneho stavu komponentu.
Signatúra	() => null｜*

live

Popis	Zaregistruje delegované poslucháče udalostí pre dynamický obsah komponentu.
Signatúra	(eventType: string, selector: string, callback: function) => void

setSelectedCards

Popis	Nastaví vybrané karty a aplikuje súvisiace zmeny stavu.
Signatúra	(isChecked: boolean, card: HTMLElement) => void

setSelectedItems

Popis	Nastaví vybrané položky a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

getPages

Popis	Vráti stránky z aktuálneho stavu komponentu.
Signatúra	(page: any) => Promise<any>

dispatchEvent

Popis	Vyvolá vlastnú udalosť z kontextu komponentu.
Signatúra	(event: any) => void

CSS tieňové časti

Názov	Popis
native-infinite-scroll	Štýluje shadow časť native-infinite-scroll.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.