Build : error TS7056: The inferred type of this node exceeds the maximum length

SortableJS-vue3

This is a thin wrapper around the great SortableJS library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.

Why not use <other library>?

Vue.Draggable only supports Vue 2
vue.draggable.next uses the Options API, has multiple open (and afaict useful) pull requests, and had weird bugs/side-effects when I tried and used it
shopify/draggable and vue-shopify-dragable seemed promising but they don't supported nested components

Usage

You can see a demo with more complete code at https://sortablejs-vue3.maxleiter.com.

Install the package:

pnpm add sortablejs-vue3 sortablejs

or

npm install sortablejs-vue3 sortablejs

Import the component in your <script setup> (or <script>):

import { Sortable } from "sortablejs-vue3";

Use the component:

<template>
  <main>
    <Sortable
      :list="elements"
      item-key="id"
      tag="div"
      :options="options"
    >
      <-- The Header and Footer templates below are optional -->
      <template #header>
          <header>
            <h1>SortableJS Vue3 Demo</h1>
          </header>
      </template>
      <template #item="{element, index}">
        <div class="draggable" :key="element.id">
          {{ element.name }}
        </div>
      </template>
      <template #footer>
          <footer class="draggable">A footer</footer>
      </template>
    </Sortable>
</template>

The list and item-key props are necessary. The options prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options
- The tag prop is optional and defaults to div. It's the HTML node type for the outer element of the included template/slot.

Props

list (Array<any>, required): your data to list
itemKey (string | (item) => (string | number | Symbol), required): The name of the key present in each item in the list that corresponds to a unique value (to use as the key)
tag (string, optional, default = "div"): The element type to render as
options (Object, false): the SortableJS options minus event handlers (see below)

Events

You can listen to Sortable events by adding the listeners to the Sortable component. For example:

<Sortable
  :list="elements"
  item-key="id"
  @change="(event: Sortable.SortableEvent) => void"
  @choose="(event: Sortable.SortableEvent) => void"
  @unchoose="(event: Sortable.SortableEvent) => void"
  @start="(event: Sortable.SortableEvent) => void"
  @end="(event: Sortable.SortableEvent) => void"
  @add="(event: Sortable.SortableEvent) => void"
  @update="(event: Sortable.SortableEvent) => void"
  @sort="(event: Sortable.SortableEvent) => void"
  @remove="(event: Sortable.SortableEvent) => void"
  @filter="(event: Sortable.SortableEvent) => void"
  @move="(event: Sortable.MoveEvent, event2: Event) => void"
  @move.capture="(event: Sortable.MoveEvent, event2: Event) => boolean | -1 | 1"
  @clone="(event: Sortable.SortableEvent) => void"
>

Using plugins

You need to mount any plugins you want outside of the default before importing this library. For example, the below is correct:

import SortableJs from "sortablejs";
import { Swap } from "sortablejs/modular/sortable.core.esm";
SortableJs.mount(new Swap());

import { Sortable } from "sortablejs-vue3";

Use with a store

No changes are necessary to work with Vuex or another store. Just pass store.state.items as your list. To modify your data you need to manually listen to the events and calculate the new position with event.oldIndex and event.newIndex with something like the following:

const moveItemInArray = <T>(array: T[], from: number, to: number) => {
  const item = array.splice(from, 1)[0];
  nextTick(() => array.splice(to, 0, item));
};

onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }

You may also want to see the SortableJS store documentation here.

Examples

./src/examples/WithStore.vue - A simple example with a store

Development

Run pnpm to install dependencies
pnpm dev will start a web server with live reloading
pnpm build will build the production library files
pnpm build:site will build the demo website

Recommended IDE Setup

VS Code + Volar

	sortable.value = new Sortable(newDraggable, {
	...props.options,
	onChoose: (event) => emit("choose", event),
	onUnchoose: (event) => emit("unchoose", event),
	onStart: (event) => {
	isDragging.value = true;
	emit("start", event);
	},
	onEnd: (event) => {
	// This is a hack to move the event to the end of the event queue.
	// cf this issue: https://github.com/SortableJS/Sortable/issues/1184
	setTimeout(() => {
	isDragging.value = false;
	emit("end", event);
	});
	},
	onAdd: (event) => emit("add", event),
	onUpdate: (event) => emit("update", event),
	onSort: (event) => emit("sort", event),
	onRemove: (event) => emit("remove", event),
	onFilter: (event) => emit("filter", event),
	// See https://github.com/MaxLeiter/sortablejs-vue3/pull/56 for context on `attrs`.
	onMove: (event, originalEvent) => "onMoveCapture" in attrs ? (<(event: Sortable.MoveEvent, originalEvent: Event) => void>attrs.onMoveCapture)(event, originalEvent) : emit("move", event, originalEvent),
	onClone: (event) => emit("clone", event),
	onChange: (event) => emit("change", event),
	});

maxleiter / sortablejs-vue3 Goto Github PK

sortablejs-vue3's Introduction

SortableJS-vue3

Why not use <other library>?

Usage

Props

Events

Using plugins

Use with a store

Examples

Development

Recommended IDE Setup

sortablejs-vue3's People

Contributors

Stargazers

Watchers

Forkers

sortablejs-vue3's Issues

Other Branches

Open

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org