@rozie-ui/sortable-list-lit

Idiomatic lit SortableList — a cross-framework drag-and-drop list compiled from one Rozie source via SortableJS. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/sortable-list-lit

Peer dependencies: sortablejs ^1.15 + lit. Install them alongside this package.

Usage

import '@rozie-ui/sortable-list-lit';

// <sortable-list> is a custom element. Bind `items` as a property and
// listen for the `items-change` event to receive the reordered array.
const el = document.querySelector('sortable-list');
el.items = [
  { id: '1', label: 'Apple' },
  { id: '2', label: 'Banana' },
];
el.itemKey = 'id';
el.addEventListener('items-change', (e) => {
  el.items = e.detail;
});

Props

| Name | Type | Default | Two-way (model) | Required | | --- | --- | --- | :---: | :---: | | items | Array | [] | ✓ | | | itemKey | String \| Function | null | | | | handle | String | null | | | | group | String | null | | | | animation | Number | 150 | | | | disabled | Boolean | false | | | | disableKeyboard | Boolean | false | | | | options | Object | {} | | | | labelFor | Function | null | | | | ghostClass | String | null | | | | chosenClass | String | null | | | | dragClass | String | null | | | | filter | String | null | | | | easing | String | null | | | | forceFallback | Boolean | false | | | | swapThreshold | Number | 1 | | | | cloneable | Boolean | false | | | | listClass | String \| Array \| Object | "" | | | | itemClass | String \| Array \| Object \| Function | "" | | | | itemStyle | String \| Object \| Function | null | | |

Events

| Event | Description | | --- | --- | | change | Fired after the list order changes (same-list reorder commit). | | add | Fired when an item is added from another list (cross-list destination commit). | | remove | Fired when an item is moved out to another list (cross-list source commit; not fired in clone mode). | | start | Fired when dragging starts. | | end | Fired when dragging ends (source side). |

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

| Method | Description | | --- | --- | | getInstance | Return the underlying SortableJS instance for direct API access (the raw-engine escape hatch — save, closest, etc. are one hop away). null before mount and after destroy. | | toArray | Return the current order as an array of data-id strings (each row carries data-id="<key>"). [] before mount. | | sort | Reorder the list by an array of data-id strings — sort(order, useAnimation = true). | | option | Read or set a live SortableJS option — option(name) gets, option(name, value) sets. The runtime escape hatch for options beyond the curated props. |

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-sortable-list');
const order = el.toArray();
el.option('disabled', true);

Slots

| Slot | Params | | --- | --- | | header | | | (default) | item, index | | footer | |