Select Box Like Element Picker Component For Vue 3

Install & Download:

# NPM
$ npm i @invisiburu/vue-picker --save

Description:

A user-friendly dropdown picker component that behaviors like the native select element.

How to use it:

1. Import and register the picker component.

import { VuePicker, VuePickerOption } from '@invisiburu/vue-picker'
// optional css
import '@invisiburu/vue-picker/dist/vue-picker.min.css'

Vue.component('VuePicker', VuePicker)
Vue.component('VuePickerOption', VuePickerOption)

2. Add a basic picker component to the app.

<vue-picker v-model="language" autofocus>
  <vue-picker-option value="">Empty</vue-picker-option>
  <vue-picker-option value="js">JavaScript</vue-picker-option>
  <vue-picker-option value="html">HTML</vue-picker-option>
  <vue-picker-option value="css">CSS</vue-picker-option>
</vue-picker>

3. Possible props & events for the VuePicker component.

autofocus: auto focus on mount
disabled: disable the component
value: define your value here
placeholder: placeholder text
@input: when an option is selected
@open: when opened
@close: after closed

4. Possible props & events for the VuePickerOption component.

disabled: disable the option
value: define your value here
text: text to be displayed instead of the content of the default slot

Preview:

Select Box Like Element Picker Component For Vue

Changelog:

v2.1.0 (01/05/2022)

Added onKeyDown prop to override/extend the key down listener

v2.0.5 (11/18/2021)

Focus of null openerRef issue

v2.0.4 (09/25/2021)

Bugfix

v2.0.3 (09/09/2021)

Bugfix

v2.0.2 (06/07/2021)

Now supports only Vue3 version.
Replaced disabled and autofocus attributes with isDisabled and isAutofocus boolean props.
Renamed css modifier selectors.
The opener’s text is now immediately updated on navigation with up and down arrows in the open dropdown.

v2.0.2 (06/08/2021)