@rozie-ui/sortable-list-vue

@rozie-ui/sortable-list-vue

Idiomatic vue 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-vue

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

Usage

<script setup lang="ts">
import { ref } from 'vue';
import SortableList from '@rozie-ui/sortable-list-vue';

const items = ref([
  { id: '1', label: 'Apple' },
  { id: '2', label: 'Banana' },
]);
</script>

<template>
  <SortableList v-model:items="items" item-key="id">
    <template #default="{ item }">
      <span>{{ item.label }}</span>
    </template>
  </SortableList>
</template>

Props

Events

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:

<script setup>
import { ref } from 'vue';
const sl = ref();          // template ref
</script>

<template>
  <SortableList ref="sl" />
  <button @click="console.log(sl.toArray())">Log order</button>
</template>

Slots