Select
Vue Select Component
Can be used outside of the Enso ecosystem.
For live examples and demos, you may visit laravel-enso.com
Can be used with its backend sibling
Installation
Install the package:
yarn add @enso-ui/select
(within Enso, remember to cd
into the client
folder before installing front-end assets)
Note that this package has a couple of external dependencies. Read here for more info.
Exports
@enso-ui/select/bulma
:
EnsoSelect
VueSelect
Tag
@enso-ui/select
:CoreSelect
Usage
Import the desired component(s):
import { VueSelect, Tag, EnsoSelect } from '@enso-ui/select/bulma';
import CoreSelect from '@enso-ui/select/renderless';
CoreSelect
The renderless version of the select component.
Properties:
customParams
-object
, optional - any params that are sent with the back-end request in server-side mode. They are to be implemented by the developerdebounce
-number
, optional, default300
- the debounce interval for fetching server-side data, in msdisableClear
-boolean
, optional, defaultfalse
- disables the clear button and for a single-select, forces the user to always have an option selecteddisabled
-boolean
, optional - if true, the control is disablederrorHandler
-Function
, optional - a method for handling axios errorsi18n
-Function
, optional - method that handles localisationlabel
-string
, optional, defaultname
- the attribute that is to be used as label from the result/options listpaginate
-number
, optional, default100
- the results pagination sizemultiple
-boolean
, optional - if true, the select works in multi-select modeobjects
-boolean
, optional - if true, the bound v-model will hold the entire objectoptions
-array
, optional - if given, will constitute the list of optionsparams
-object
, optional - params that are sent with the back-end request in server-side mode and when paired with the Laravel-Enso/VueSelect back-end, are used automatically for filtering the entire objectpivotParams
-object
- params that are sent with the back-end request in server-side mode and when paired with the Laravel-Enso/VueSelect back-end, are used automatically for filtering in pivot type scenariosreadonly
-boolean
, optional - if true, the select is read onlysource
-string
, optional - the URI for the server-side modetaggable
-boolean
, optional - if true, tagging is enabledtrackBy
-string
, optional, defaultid
- the attribute used for tracking and also the attribute that is bound to the control's v-modeltranslated
-boolean
, optional - if true, labels are translated used the translation functionvalue
-object/primitive/array
, required, default[]
/null
, the value of the current choice / component
Events:
fetch
, when the option list has been receivedinput
, when the selection is updatedselect
, when an item is selecteddeselect
, when an item is deselectedselection
, when the selection changes, payload is the current selectionclear
, when the selection is clearedadd-tag
, when a tag is added
When operation in server-side mode, in cases when there are concurrent fetch requests, the previous request is cancelled.
Tag
Helper component as used by VueSelect, for optional use within CoreSelect.
Properties:
label
-string
, required - label displayed within the tagdisabled
-boolean
, required - if true, hides the delete button
Events:
deselect
, when the tag is deleted
VueSelect
This is the main component built around the renderless component.
Example:
<vue-select :source="route('administration.users.options')"
v-model="myModel"
label="email"
track-by="id"/>
Props
All the props from CoreSelect
can be provided here
hasError
-boolean
, optional, defaultfalse
- if true, the element has an 'error' style.labels
-object
, optional - the labels for the various states and options. The following properties are expected:select
,deselect
,noOptions
,noResults
,addTag
placeholder
-string
, optional, default'Pick an option'
Slots
selection
, any customization of the selection goes hereoptions
, customization of the option list goes hereoption
, customization of the individual option goes here
Methods
The following CoreSelect options are cascaded and available:
clear()
, clears the selectionfetch()
, reloads the option list for a server-side select
EnsoSelect
Designed to be used within the Enso ecosystem, requiring less configuration from the dev.
Example:
<enso-select source="administration.userGroups.options"
v-model="myModel"
label="name"/>
Props
All the props from VueSelect
can be provided here
Slots
option
, customization of the individual option goes here
Methods
The following VueSelect options are cascaded and available:
clear()
, clears the selectionfetch()
, reloads the option list for a server-side select
Questions & Issues
For questions and support please use the issues functionality for this package's github repository.
Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.
Issues not conforming to the guidelines may be closed immediately.
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!