vue-select-sides is a dual list box component to select options by moving them between two searchable, sortable, groupable, side-by-side list boxes.
How to use it:
1. Import the vue-select-sides as a component.
import vueSelectSides from "vue-select-sides";
2. Import a theme of your choice.
// modern theme @import "/node_modules/vue-select-sides/styles/themes/soft.scss"; // or dark theme @import "/node_modules/vue-select-sides/styles/themes/dark.scss"; // or light theme @import "/node_modules/vue-select-sides/styles/themes/light.scss";
3. Add the vue-select-sides to your template.
<!-- Grouped --> <vue-select-sides type="grouped" v-model="selected" :list="list" ></vue-select-sides> <!-- Mirror --> <vue-select-sides type="mirror" v-model="selected" :list="list" ></vue-select-sides>
4. Register the component and define a list of options for the dual list box.
export default { components: { vueSelectSides }, data() { return { selected: {}, list: [ { value: "value1", label: "Vaule 1", children: [ { value: "value-1-1", label: "Value 1.1", disabled: true }, { value: "value-1-2", label: "Value 1.2" } ] }, { value: "value2", label: "Vaule 2", children: [ { value: "value-2-1", label: "Value 2.1" }, { value: "value-2-2", label: "Value 2.2" } ] } ] }; } };
All possible props to config the dual list box.
list: { required: true, type: [Array, Object] }, type: { type: String, default: "grouped" }, lang: { type: String, default: "en_US" }, orderBy: { type: String, default: undefined }, placeholderSearchLeft: { type: [String, Boolean], default: false }, placeholderSearchRight: { type: [String, Boolean], default: false }, sortSelectedUp: { type: Boolean, default: false }, search: { type: Boolean, default: true }, total: { type: Boolean, default: true }, toggleAll: { type: Boolean, default: true }, model: { type: [Object, Array], default: undefined }
Preview:
Changelog:
v1.1.6 (11/13/2020)
- Added polish locale
- Bug fixes
- Enabled option to disable a list item
v1.1.5 (10/07/2020)
- bugfix
v1.1.4 (10/06/2020)
- fixed defaultOptions undefined in plugin install
Download Details:
Author: juliorosseti
Live Demo: https://juliorosseti.github.io/vue-select-sides/demo.html?v=1.0.0
Download Link: https://github.com/juliorosseti/vue-select-sides/archive/master.zip
Official Website: https://github.com/juliorosseti/vue-select-sides
Install & Download:
# Yarn
$ yarn add vue-select-sides
# NPM
$ npm install vue-select-sides --save
Thanks for sharing the plugin! 😃