vw-multi-select

A styleable multi-select component for Vue.js

Installation

npm install @vectorwyse/vw-multi-select

Usage

Global

In your entry file:

import VwMultiSelect from "@vectorwyse/vw-multi-select";
Vue.component('vw-multi-select', VwMultiSelect);

or:

Component

In your component:

import VwMultiSelect from "@vectorwyse/vw-multi-select";
...
components: {VwMultiSelect},
...

In your template:

<vw-multi-select
    v-model="listOfSelectedOptions"
    :list="listOfOptions"
></vw-multi-select>

Props

| Name | Description | Type | Required | Options | Default | | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ------------------ | ------------------------------------------------------------------------------ | | list | The list of options to select from | Array | yes | | | | id | The root element id | String | | | | | selectedListDisplayFunction | Determines how an option is displayed in the selected items list | Function | | | item => {return this.listItemProperty ? item[this.listItemProperty] : item;} | | listItemDisplayFunction | Determines how an option is displayed in the list | Function | | | item => {return this.listItemProperty ? item[this.listItemProperty] : item;} | | valueProperty | The property from the option which will be used in the v-model a | String | | | | | listItemProperty | The property from the option which will be used in the lists, can overridden on render by selectedListDisplayFunction and listItemDisplayFunction | String | | | | | disabled | Disables any interaction with the select | Boolean | | | false | | isInvalid | Applies the 'invalid' class to the wrapper if set to true | Boolean | | | false | | iconset | The set of icons used | String | | ['font-awesome'] | | | template | The name of the classes template | String | | ['bootstrap'] | | | appendRandomId | If a random 6-digit string should be appended to the wrapper, selected and list ids in order to avoid conflicts | Boolean | | | true | | showSelectedFirst | If the selected items should be moved to the top of the list | Boolean | | | false | | searchable | If the search field should be displayed | Boolean | | | false | | tags | If the selectd items should be displayed as tags at the top | Boolean | | | false | | icons | An object containing the classes to be applied to the icon elements, if an iconset is chosen | Object | | {} | | | classes | An object containing the classes to be applied to each element | Object | | {} | | | styles | An object containing the styles object to be applied to each element | Object | | {} | | | disabledIcons, disabledClasses, disabledStyles | Overrides the classes above id disabled is set to true | Object | | {} | | | inputPlaceholder | The search input placeholder text | String | | | "Search..." | | autoAddText | The text to be displayed next to the list item, if the search yields only one unselected result | String | | "Hit enter to add" |

Styling

Classes

{
    autoAddText: "",
    input: "",
    invalid: "",
    list: "",
    removeIcon: "",
    selected: "",
    selectedIcon: "",
    selectedItem: "",
    selectedListItem: "",
    selectedListItemText: "",
    unselectedIcon: "",
    unselectedListItem: "",
    unselectedListItemText: "",
    wrapper: "",
}

Styles

{
    autoAddText: {},
    input: {},
    invalid: {},
    list: {},
    removeIcon: {},
    selected: {},
    selectedIcon: {},
    selectedItem: {},
    selectedListItem: {},
    selectedListItemText: {},
    unselectedIcon: {},
    unselectedListItem: {},
    unselectedListItemText: {},
    wrapper: {},
}

Icons

{
    removeIcon: "",
    selectedIcon: "",
    unselectedIcon: "",
}

Support Us

Vectorwyse is a digital agency offering advisory and web development services. We love building things with Laravel and Vue.js, so when we have an opportunity to give back to the community, we're super excited!

If you find this package useful, or if you would like us to build something for you, feel free to drop us a line!