$ npm install vue-list-picker --save
$ yarn add vue-list-picker
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
}
}
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
<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>
Property name | Type | Default | Description |
---|---|---|---|
left-items | Array | null | Array of objects to be displayed in the left. Must have at least a key and content property |
right-items | Array | null | Array of objects to be displayed in the right. Must have at least a key and content property |
moved-item-location | String | ‘top’ | After move a item, if this is set to top will move the item to the top, otherwise to the bottom |
title-left | String | ‘Items available’ | Title name of the left column |
title-right | String | ‘Items selected’ | Title name of the right column |
title-centered | Boolean | true | Centralizes the title text |
title-class | String | ‘’ | If you want to set a custom class to the columns title, set it here |
title-substr | String | 20 | Number of characters to display inside the columns title. Above this, will set a ‘…’ mask |
button-class | String | ‘’ | If you want to set a custom class to all the buttons in between the columns, set it here |
content-key | String | ‘key’ | Property name inside the objects inside each items array, that will be used to move the object |
content-attr | String | ‘content’ | Property name inside the objects inside each items array, that will set the text content |
content-centered | Boolean | false | Centralizes all the text content |
content-class | String | ‘’ | If you want to set a custom class to the each content item, set it here |
content-substr | String | 23 | Number of characters to display inside the content item. Above this, will set a ‘…’ mask |
min-height | String | ‘450px’ | Min-height of each column |
height | String | ‘’ | Height of each column |
min-width | String | ‘220px’ | Min-width of each column |
width | String | ‘’ | Width of each column |
Event name | Return type | Description |
---|---|---|
move-all-right | Array | Array of items moved |
move-right | Object | Item object moved |
move-left | Object | Item object moved |
move-all-left | Array | Array of items moved |
unselect-all | Array | Empty array |
Slot name | Description |
---|---|
moveAllRight | Use this to change the icon (chevrons-right) inside the first action button |
moveRight | Use this to change the icon (chevron-right) inside the second action button |
moveLeft | Use this to change the icon (chevron-left) inside the third action button |
moveAllLeft | Use this to change the icon (chevrons-left) inside the fourth action button |
unselectAll | Use this to change the icon (x) inside the fifth action button |
content-class
and title-class
props.overflow-y
CSS property, so if you use the height prop, you’ll have a vertical scroll inside each panel.top
to movedItemLocation
, the item after moved will go to the bottom.left-items
/ right-items
).From top to bottom:
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
For visual testing, this project contains storybook which you can run by doing the next command
$ yarn storybook
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
This project follows the commitlint guidelines, with minor changes.
You can commit using npm run commit
to help you with that.
There’s a pre-push
hook that runs all the unit tests before you can push it.
If an error occurs, you can use the npm run commit:retry
command that runs the previous npm run commit
that you already filled.
Author: guastallaigor
Demo: https://vuelistpicker.now.sh/
Source Code: https://github.com/guastallaigor/vue-list-picker
#vuejs #vue #javascript