A simple list picker component made with Vue.js

vue-list-picker

Just a simple list picker component made with Vue.js.

How to install

npm

$ npm install vue-list-picker --save

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 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 <no-ssr> 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>

Props

Events (optional usage)

Slots (optional usage)

Instructions

Generics

1. Right now there's no draggable depency. But if you click and hold your mouse down and drag it into another itens in the same column, all of them it'll selected.
2. The title and content background are both blue (#0052c0), but you can change those using the content-class and title-class props.
3. By default the height isn't set, but it has an overflow-y CSS property, so if you use the height prop, you'll have a vertical scroll inside each panel.
4. If you pass anything other than top to movedItemLocation, the item after moved will go to the bottom.
5. The content key should be an unique key inside each array of objects (left-items / right-items).

Actions

From top to bottom:

1. The first button moves all the left items to the right.
2. The second button moves all the selected left items to the right.
3. The third button moves all the right items to the left.
4. The fourth button moves all the selected right items to the left.
5. The fifth button unselect all the selected items from all columns (left and right).

Development

Fork the project and enter this commands in your terminal

git clone https://github.com/YOUR_GITHUB_USERNAME/vue-list-picker.git
cd vue-list-picker
yarn

Storybook

For visual testing, this project contains storybook which you can run by doing the next command

$ yarn storybook

Jest

Before making the PR, if you changed something that needs to be tested, please make the tests inside the tests/unit folder.

To run the tests, you can use the next command

$ yarn test:unit

GitHub