DataSortableList

A list that can be reordered with the pointer and with the keyboard, with announcements for screen readers.

import { DataSortableList } from '@zairakai/vue-components/Data'

Usage

<DataSortableList />

Props

Name	Type	Default	Description
id	string
class	string
modelValue	array	undefined	The items, in order.
itemKey	string		The property that identifies an item. The item itself when empty.
label	string
handleLabel	string	'Reorder {item}'
grabbedText	string	'{item} grabbed, position {position} of {total}. Use the arrows to move it.'	What is read to a screen reader. Use {item}, {position}, {total}.
movedText	string	'{item} moved to position {position} of {total}.'
droppedText	string	'{item} dropped at position {position} of {total}.'
cancelledText	string	'Move cancelled.'
itemLabel	func	(item) => String(item?.label ?? item)

Events

Name	Description
update:modelValue
reorder

Slots

Name	Description
handle
default

See Theming for the class hooks and the data-* state of the components.