Sortable

Overview

Sortable renders NaviusSortable, the headless primitive that owns pointer-drag reorder, the APG grab-and-move keyboard contract, and a single reorder reducer, and layers a stacked-list Tailwind presentation on top. ZitsSortableItem composes NaviusSortableItem for each row, and an optional ZitsSortableItemHandle scopes pointer drag to a handle within the row (keyboard reordering still acts on the whole row). The wrapper owns its own controlled/uncontrolled order mirror: Values is forwarded to the primitive only when the consumer actually set it, so the uncontrolled DefaultValues path stays live (the always-controlled wart fix). The consumer iterates the same key list to render one ZitsSortableItem per key.

Install

navius add sortable --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsSortable @bind-Values="_order" OnReorder="HandleReorder">
    @foreach (var key in _order)
    {
        <ZitsSortableItem @key="key" Value="key">
            <ZitsSortableItemHandle />
            @key
        </ZitsSortableItem>
    }
</ZitsSortable>

Parts and props

Disabled passes through to NaviusSortable unchanged. The styled wrapper adds:

Prop	Type	Default	Description
Values	IReadOnlyList<string>?	null	Controlled order of item keys. Bind with @bind-Values; forwarded to the primitive only when set.
DefaultValues	IReadOnlyList<string>?	null	Uncontrolled initial order.
Orientation	SortableOrientation	Vertical	Vertical, Horizontal, or Grid; also drives the root’s flex/grid layout classes.
OnReorder	EventCallback<SortableReorderEventArgs>	-	Fired on a completed reorder.

ZitsSortableItem adds:

Prop	Type	Default	Description
Value	string	(required)	The stable key this row is tracked by in the sortable’s order.
Label	string?	Value	Accessible name for live-region reorder announcements.
Disabled	bool	false	Excludes this row from drag/keyboard reordering.

ZitsSortableItemHandle takes no props beyond ChildContent/Attributes; pass ChildContent to replace the default grip-dots glyph.

Styling surface

Attributes on every part is merged with that part’s base class set via Cn.Class (or Cn.Merge where the part splats onto the corresponding Navius* part), with the caller’s classes applied last.

Parameter	Values
Orientation	Vertical · Horizontal · Grid

Data attribute hooks

Part	Attribute	Description
Root	data-orientation	Mirrors the Orientation prop, emitted by NaviusSortable.
Root	data-disabled	Present when Disabled is true, emitted by NaviusSortable.
Item	data-dragging	Present on the row being pointer-dragged, emitted by NaviusSortableItem; fades and lifts the row.
Item	data-drop-target	Present on the row that would receive the drop, emitted by NaviusSortableItem.
Item	data-keyboard-grabbed	Present on a row picked up via keyboard, emitted by NaviusSortableItem.

Underlying primitives

• NaviusSortable