A list whose rows the person puts in order: drag a row by its handle (a mouse, a pen or a finger), press the up and down
buttons of a row (off at the ends), or focus the handle and press Space to pick the row up, ↑ ↓ to move it
(Home and End go to the ends), Space or Enter to drop it and Esc to put it back (DevactionUI.SortableList
hook). A row has a handle, a mono code, a label, a status text at the right and the two buttons.
The server owns the order: the rows are drawn in the order of the row slots, and when a move ends the hook sends
event ("reorder") to the LiveView, or to target inside a LiveComponent, with
%{"order" => [ids], "id" => moved, "from" => index, "to" => index}; order has every id in the new order. The row
moves in the page at once; the LiveView stores the order and draws the rows again in it. A drop that changes
nothing sends nothing, and a change of the row slots from the server wins over what the page shows.
The list is named for assistive technology (label), every handle is a button named by handle_label and the row, and
described by hint_label (how to use the keyboard). Each step is said in a live region, under the list, in the
caller's words: picked_label, moved_label, dropped_label and cancelled_label, in which __ITEM__,
__POS__ and __TOTAL__ are replaced by the name of the row and its place. The library holds no language and no
icons: the texts are attrs and the icons are slots (handle_icon, up_icon, down_icon, each with a glyph in
place of an icon the caller does not give).
Summary
Functions
@spec list(map()) :: Phoenix.LiveView.Rendered.t()
Attributes
id(:string) (required)label(:string) (required) - the name of the list, for assistive technology.event(:string) - the event sent when a move ends, withorder,id,fromandto. Defaults to"reorder".handle_label(:string) (required) - the name of a handle, before the name of its row.up_label(:string) (required) - the name of the up button, before the name of its row.down_label(:string) (required) - the name of the down button, before the name of its row.hint_label(:string) (required) - how to move a row with the keyboard, read after the name of a handle.picked_label(:string) (required) - said when a row is picked up; takes__ITEM__,__POS__,__TOTAL__.moved_label(:string) (required) - said when a row moves; takes__ITEM__,__POS__,__TOTAL__.dropped_label(:string) (required) - said when a row is dropped; takes__ITEM__,__POS__,__TOTAL__.cancelled_label(:string) (required) - said when a move is given up; takes__ITEM__,__POS__,__TOTAL__.target(:any) - aphx-target(a@myself) when used inside a LiveComponent. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
row(required) - a row of the list. Accepts attributes:id(:string) (required) - what the order is made of.label(:string) (required) - the name of the row, read out and said when it moves.code(:string) - a short mono code before the label, such asM3.status(:string) - the text at the right, such as a date or a state.
handle_icon- the grip of the handle.up_icon- the arrow of the up button.down_icon- the arrow of the down button.