Vue Simple Custom Select

A simple Vue component that allows you to create a custom select without any efforts.

Demo available here

Get started

 npm i vue-simple-custom-select

You can then use it by importing it in your chosen Vue project.

<template>
 <vue-simple-select 
   v-model="selected"
   :options="options" 
 />
</template>

<script>
import VueSimpleSelect from 'vue-simple-custom-select'

export default {
  name:  'Your component',
  components: {
    VueSimpleSelect 
  },
  data() {
    return {
      selected: {},
      options: [
        {
          label: 'Label',
          value: 'value'
        }
      ]
    }
  }
}
</script>

Props

Name	Default	Description	Required
value	null	The default selected value	true
options	[]	The options displaying inside the dropdown	true
no-click-outside	false	If the select should not be closed when clicking outside	false
opened	false	Ability to open the dropdown by default	false
multiple	false	If the select allows multiple items to be selected	false
placeholder	''	The value to be displayed when nothing is selected	false
title	''	Ability to place a title on the select button	false
transition	'slide-fade'	Used to change the transition when showing or hiding the dropdowm.	false
labelledby	''	Can be used to specify what element labels the button.	false

V-model

The component uses a custom model, it is binded to the value prop and to the change event.

Therefore you do not have to use the prop value or listen to change, simply bind a v-model like in this example.

Slots

This custom select can be customised through slots.

Name	Values	Description
button	{ handleClick, showSelect, hideSelect }	Can be used to replace the button trigerring the dropdown
inner-button	null	Right inside the button, can be used to add content
before-icon	null	On the left of the icon, can be used to add content
icon	{ show }	Can be used to change the icon
after-icon	null	On the right of the icon, can be used to add content
dropdown	{ selectValue, isSelected, show }	Can be used to replace the default dropdown
dropdown-content	{ selectValue, isSelected }	Can be used to replace the content of the dropdown
single-option	{ option, index, selectValue, isSelected }"	Can be used to change a single option in the dropdown, keep in mind, this slot is inside of a v-for

Methods

This component's slots give acces to differents methods allowing you to customize its behavior.

Name	Params	Returns	Emits	Description
showSelect	void	void	show	Is used to show the dropdown
hideSelect	void	void	hide	Is used to hide the dropdown
handleClick	void	void	show	Is used to toggle between showing and hiding the dropdown
selectValue	option: Option	void	change	Is used to select (or remove) an option, an option has to be passed in
isSelected	option: Option	boolean	void	Determines if the passed in option is selected

Styles

The components uses only a few styles that can be easily changed and adapted. You can even add your own classes using slots.

Every class is nested inside .vue-simple-select-container.

Every class is prefixed by vue-simple-select-.

Name	Description
button	Refers to the button tiggering the dropdown
dropdown	Refers to the dropdown, containing the list of options
option	Refers to a single option in the the list of options
option.selected	Refers to a single selected option in the the list of options
icon	Refers to the arrow icon in the button
icon.reverse	Refers to the arrow icon in the button, has a transform: rotate(180deg);
placeholder	Refers to the placeholder showing when nothing is selected
selected	Refers to the content of the button if it contains a list of selected options (in multiple mode)
selected-option	Refers to the content of the button (in single mode)
label	Refers to the amount of selected option (in multiple mode)

Side notes

The component is originally made for my personnal use and therefore may contain bugs (that can be reported on the GitHub repo).

Finding documentation on how to use a preprocessor and install TailwindCSS with Vue-Rollup wasn't an easy task. So I decided to use laravel-mix to build a simple css file that is then used in the component.
I am definetly open for suggestions on how to improve this process or any other aspect of the component.