A List Picker Component made with Vue Js

Igor Guastalla launched a Vue list Picker made with vue js. It is a dual list picker component for Vue.js, which allows the users to move list items between two panels.

Installation

You’ve to run this command for the installation via npm:

$ npm install vue-list-picker --save

Or you can install it via Yarn:

$ yarn add vue-list-picker

Quick start

Vue.js

You can import in your main.js file

import Vue from "vue";
import VueListPicker from "vue-list-picker";

Vue.use(VueListPicker);
Or locally in any component
import { VueListPicker } from "vue-list-picker";

export default {
  components: {
    VueListPicker,
  },
};

Nuxt.js

You can import as a Nuxt.js plugin

~/plugins/vue-list-picker.js
import Vue from "vue";
import VueListPicker from "vue-list-picker";

Vue.use(VueListPicker);

And then you have to import it in your nuxt.config.js file.

plugins: ["~/plugins/vue-list-picker.js"];

There’s a window mouseup event listener so you should use the tag

Basic usage

<template>
  <vue-list-picker :left-items="leftItems" :right-items="rightItems" />
</template>

<script>
  export default {
    data() {
      const example1 = {
        key: 1,
        content: "Item 1",
      };
      const example2 = {
        key: 2,
        content: "Item 2",
      };
      const example3 = {
        key: 3,
        content: "Item 3",
      };
      const example4 = {
        key: 4,
        content: "Item 4",
      };

      const leftItems = [example1, example2];
      const rightItems = [example3, example4];

      return { leftItems, rightItems };
    },
  };
</script>

Demo

You can view its demo here:
https://vuelistpicker.now.sh

Instructions

Generics

• Currently, there’s no draggable dependency. But if you click and hold your mouse down and drag it into another item in the same column, it will select all of them.
• The title and content background are both blue (#0052c0), but you can modify those using the content-class and title-class props.
• The height is not set by default, But it has an overflow-y CSS property, so if you utilize the height prop, you’ll have a vertical scroll inside each panel.
• If you pass anything other than top to movedItemLocation, the item will go to the bottom after the movement.
• The content key should be a unique key inside each array of objects (left-items / right-items).

Actions

From top to bottom:

• The first button migrates all the left items to the right.
• The second button migrates all the selected left items to the right.
• The third button migrates all the right items to the left.
• The fourth button migrates all the selected right items to the left.
• The fifth button unselects all the selected items from all columns (left and right).

If you want to dig more about it, You can visit Github for its detailed documentation.