dragula-vue3 v0.0.1

dragula-vue3

Vue 3 components for working with the dragula library.

Install

npm install --save dragula-vue3

Setup

import { createApp } from "vue";
import App from "./App.vue";

import DragulaVue from "dragula-vue";

const app = createApp(App);
app.use(DragulaVue);
app.mount("#app");

Usage

<template>
    <dragula-container
        v-model="listsObj"
        :item-key-func="(item) => `${item.id}`"
        @drop="onDrop"
        @remove="onRemove"
        class="container"
        v-slot="{ listKeys }"
    >
        <dragula-list
            v-for="key in listKeys"
            :key="key"
            :list-key="key"
            class="list"
            v-slot="{ listItems }"
        >
            <dragula-list-item
                v-for="item in listItems"
                :key="item.id"
                :list-item="item"
                class="list-item"
                v-slot="{ listItem }"
            >
                {{ listItem.title }}
            </dragula-list-item>
        </dragula-list>
    </dragula-container>
</template>

<script>
export default {
    data() {
        return {
            listsObj: {
                todo: [
                    { id: 1, title: "Do 1" },
                    { id: 2, title: "Do 2" },
                ],
                done: [
                    { id: 3, title: "Done 3" },
                    { id: 4, title: "Done 4" },
                ],
            },
        };
    },
    methods: {
        onDrop({ sourceKey, targetKey, listItem }) {
            console.log(sourceKey, targetKey, listItem);
        },
        onRemove({ sourceKey, listItem }) {
            console.log(sourceKey, listItem);
        },
    },
};
</script>

<style scoped>
.container {
    display: flex;
    gap: 10px;
    margin: 20px;
}
.list {
    background: #ccc;
    padding: 20px;
}
.list-item {
    background: lavender;
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 5px;
}
</style>

Components

DragulaContainer

It is the wrapper component representing the container in which the dragula lists reside. It accepts an object representing all the lists inside the container and keeps it in sync using v-model prop. It exposes the default scoped slot with listKeys, which is an array of the keys of the object passed to v-model, which can be used to loop over and construct a DragulaList for every list in the passed object (as shown in the usage example).

Props

DragulaList

It represents an inidvidual list in a container. It accepts a listKey prop, which corresponds to a list for that key in the object passed to DragulaContainer, and exposes the default scoped slot with listItems, which is the list for that key, and is used to construct a DragulaListItem for items in that list (as shown in the usage example).

Props

DragulaListItem

It represents an individual item in a list inside a container. It accepts a 'listItem' prop, and just exposes it in the default scoped slot(as shown in the usage example).

Events

The DragulaContainer component emits the following events:

Dragula instance

The underlying dragula instance can be accessed from DragulaContainer component using its $drake property. It will be null before the DragulaContainer component mounts and dragula is initialized.

Look up the dragula documentation for using the drake instance.

<template>
    <dragula-container ... ref="dragulaContainer"> ... </dragula-container>
</template>

<script>
export default {
   ...
    methods: {
      getDrakeInstance() {
        return this.$refs.dragulaContainer.$drake;
      }
    },
};
</script>