Tree

shadow

Element Tree umožňuje hierarchické zobrazovanie dát v stromovej štruktúre. Používa sa na vizualizáciu kategórií, súborových systémov alebo navigačných štruktúr. Tree obsahuje wje-tree ako hlavný kontajner a wje-tree-item ako jednotlivé položky stromu. Položky môžu obsahovať deti, čím vytvárajú vnorenú hierarchiu.

Základné použitie

Ukážka predstavuje základný strom s vnorenými uzlami, aby bolo jasné predvolené otváranie a hierarchia.

Slots

Ukážka používa sloty na doplnenie ikon alebo sekundárneho obsahu pri uzloch stromu. Ak je na wje-tree nastavený boolean atribút reorder, priamy obsah v slote start slúži ako drag handle pre presúvanie položiek.

Presúvanie položiek

Presúvanie sa zapína atribútom reorder na wje-tree. Položku je možné presunúť pred cieľ, za cieľ alebo dovnútra cieľovej položky. Po úspešnom presune komponent dispatchuje event wje-tree:move.

Detail eventu obsahuje rovnaké základné polia ako wje-reorder:change (from, to, order, orderElements) a dopĺňa stromové údaje vhodné na odoslanie na backend: itemId, targetId, fromParentId, toParentId, position a orderIds. itemId a rodičovské ID sa čítajú z atribútu value, prípadne z id.

Drop indikátory sa dajú tematizovať cez CSS tokeny, napr. --wje-tree-item-drop-color, --wje-tree-item-drop-line-width, --wje-tree-item-drop-border-width a --wje-tree-item-drop-border-radius.

Multiple

Ukážka povoľuje otvorenie viacerých vetiev stromu naraz, čo sa hodí pri porovnávaní vzdialenejších vetiev.

Odsadenie vnorení

Pre viac úrovní vnorenia (napr. Deciduous -> Maple -> Field maple) sa odsadenie aplikuje priebežne na každú otvorenú vetvu. Vďaka tomu je tretia a ďalšie úrovne čitateľne oddelené od rodiča.

TO DO complete tree and tree item docs

Kedy použiť

Použite wje-tree, keď používateľ potrebuje orientáciu v aplikácii alebo prechod medzi stavmi/obrazovkami.

Kedy nepoužiť

Nepoužívajte viac paralelných navigačných vzorov, ktoré si navzájom konkurujú.

Prístupnosť

Zabezpečte jasné active/selected stavy, predvídateľné poradie tabulátora a pomenovanie ovládacích prvkov.

Odporúčané postupy

• Držte URL a UI stav v synchronizácii, aby bola navigácia reprodukovateľná.
• Používajte konzistentné názvoslovie položiek naprieč menu, breadcrumbom a tabmi.
• Pri hlbokých štruktúrach pridajte pomocný kontext (breadcrumb, nadpis, ikony).

Atribúty a vlastnosti

reorder

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

selection

Popis	Riadi správanie výberu položiek pre voľbu selection.
Atribút	selection
Typ	string
Predvolené	single

Udalosti

Názov	Popis
wje-tree:move	Vyvolá sa pri odoslaní udalosti wje-tree:move.

Metódy

getAllItems

Popis	Vráti všetky položky z aktuálneho stavu komponentu.
Signatúra	() => Array<Element>

appendTemplateSlot

Popis	Spustí metódu appendTemplateSlot na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: HTMLElement, template: HTMLTemplateElement｜null, slotName: string) => void

getTemplateSlotClass

Popis	Vráti template slot class z aktuálneho stavu komponentu.
Signatúra	(slotName: string) => string

setupReorderHandle

Popis	Inicializuje reorder handle pred interaktívnym použitím.
Signatúra	(item: HTMLElement) => void

getTreeItemFromEvent

Popis	Vráti tree položku from udalosť z aktuálneho stavu komponentu.
Signatúra	(e: Event) => HTMLElement｜null

isReorderHandleEvent

Popis	Overí, či je reorder handle udalosť aktuálne pravda.
Signatúra	(e: Event) => boolean

isTreeItem

Popis	Overí, či je tree položku aktuálne pravda.
Signatúra	(node: object) => boolean

getDirectTreeItems

Popis	Vráti direct tree položky z aktuálneho stavu komponentu.
Signatúra	(parent: HTMLElement) => HTMLElement[]

getTreeItemIndex

Popis	Vráti tree položku index z aktuálneho stavu komponentu.
Signatúra	(item: HTMLElement) => number

canDrop

Popis	Spustí metódu canDrop na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(draggedItem: HTMLElement, targetItem: HTMLElement) => boolean

getDropPosition

Popis	Vráti pustenie position z aktuálneho stavu komponentu.
Signatúra	(e: DragEvent, target: HTMLElement｜null) => 'before'｜'inside'｜'after'

setDropState

Popis	Nastaví pustenie state a aplikuje súvisiace zmeny stavu.
Signatúra	(target: HTMLElement, position: string) => void

clearDropState

Popis	Vyčistí pustenie state a obnoví súvisiace hodnoty.
Signatúra	() => void

clearDragState

Popis	Vyčistí ťahanie state a obnoví súvisiace hodnoty.
Signatúra	() => void

getDropPositionClass

Popis	Vráti pustenie position class z aktuálneho stavu komponentu.
Signatúra	(position: 'before'｜'inside'｜'after') => string

moveItem

Popis	Presunie položku na novú pozíciu v dátach komponentu.
Signatúra	(draggedItem: HTMLElement, targetItem: HTMLElement, position: 'before'｜'inside'｜'after') => object｜null

getOrderElements

Popis	Vráti order elements z aktuálneho stavu komponentu.
Signatúra	(parent: HTMLElement) => HTMLElement[]

getOrderIds

Popis	Vráti order ids z aktuálneho stavu komponentu.
Signatúra	(parent: HTMLElement) => Array<string｜null>

getItemId

Popis	Vráti položku id z aktuálneho stavu komponentu.
Signatúra	(item: HTMLElement｜null) => string｜null

syncTreeItems

Popis	Synchronizuje tree položky s externým alebo interným zdrojom stavu.
Signatúra	() => void

refreshMovedItems

Popis	Spustí metódu refreshMovedItems na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(items: HTMLElement[]) => void

updateCheckboxState

Popis	Aktualizuje checkbox state podľa najnovších údajov komponentu.
Signatúra	(changedItem: object, isInitialSync?: boolean) => void

updateParentState

Popis	Aktualizuje parent state podľa najnovších údajov komponentu.
Signatúra	(item: object) => void

propagateStateUpwards

Popis	Spustí metódu propagateStateUpwards na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: HTMLElement) => void

propagateStateDownwards

Popis	Spustí metódu propagateStateDownwards na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: object) => void

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

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

Sloty

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