Minimal Drag To Select Library For Vue 3

Install & Download:

# Yarn
$ yarn add @coleqiu/vue-drag-select
# NPM
$ npm i @coleqiu/vue-drag-select

Description:

A lightweight yet customizable Vue component to enable drag-to-select functionality in your app.

How to use it:

1. Install and import the DragSelect component.

import { createApp } from "vue";
import VueDragSelect from "@coleqiu/vue-drag-select";
const app = createApp(App);
app.use(VueDragSelect);

2. In your app.vue:

<script setup lang="ts">
import { ref } from 'vue';
const selection = ref([]);
const options = [ "item1", "item2", "item3" ];
</script>
<template>
  <drag-select v-model="selection">
    <drag-select-option v-for="item in options" :value="item" :key="item">{{item}}</drag-select-option>
  </drag-select>
</template>

3. Available component props.

modelValue: {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
  default: undefined as any,
  validator(value) {
    const plainValue = unref(value);
    return plainValue === undefined || Array.isArray(plainValue) || plainValue instanceof Set;
  },
},
/**
 * whether DragSelect is disabled
 * @default false
 */
disabled: {
  default: false,
  validator(value) {
    const plainValue = unref(value);
    return typeof plainValue === 'boolean';
  },
},
draggableOnOption: {
  default: true,
  validator(value) {
    const plainValue = unref(value);
    return typeof plainValue === 'boolean';
  },
},
dragAreaClass: {
  type: String,
  default: '',
},
dragAreaStyle: {
  type: Object,
  default: () => ({}),
},
background: {
  type: String,
  default: 'rgba(66, 153, 225, 0.5)',
},
selectedOptionClass: {
  type: String,
  default: '',
},
selectedOptionStyle: {
  type: Object,
  default: () => ({}),
},

4. Options.

const props = defineProps({
  value: {
    required: true,
    type: null,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  selectedClass: {
    type: String,
    default: '',
  },
});

5. Available CSS classes used to style the items based on the states.