npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sortablejs-vue3

v1.2.11

Published

[Demo](https://sortablejs-vue3.maxleiter.com) | [npm](https://www.npmjs.com/package/sortablejs-vue3)

Downloads

54,707

Readme

SortableJS-vue3

Demo | npm

GIF of the demo being used

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.

  1. Install the package:
pnpm add sortablejs-vue3 sortablejs

or

npm install sortablejs-vue3 sortablejs
  1. Import the component in your <script setup> (or <script>):
import { Sortable } from "sortablejs-vue3";
  1. 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>
  1. 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

Development

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

Recommended IDE Setup