Typeahead
Vue Typeahead
Usage
Unless where specified otherwise, the components can be used outside of the Enso ecosystem.
Demo
For live examples and demos, you may visit laravel-enso.com
Installation
Install the package:
yarn add @enso-ui/typeahead
(within Enso, remember to cd
into the client
folder before installing front-end assets)
Import the desired component(s):
import { Typeahead, EnsoTypeahead } from '@enso-ui/typeahead/bulma';
Note that this package has a couple of external dependencies. Read here for more info.
Exports
@enso-ui/typeahead/bulma
:
Typeahead
,EnsoTypeahead
,
@enso-ui/typeahead/renderless
:
Typeahead
,
bulma/EnsoTypeahead.vue
This bulma styled component built on top of its base version is designed to be used within the Enso ecosystem, requiring less configuration from the dev.
'Passed-through' properties:
disabled
-boolean
, optional, defaultfalse
, if true the component is disabledisRounded
-boolean
, optional, defaultfalse
, if true, the input is roundednoResults
-string
, optional, defaultNothing found...
, the text shown when there are no resultsplaceholder
-string
, optional, defaultWhat are you searching for today?
searching
-string
, optional, defaultSearching...
, text show while searching is in progress
bulma/Typeahead.vue
A bulma styled typeahead component built on top of its renderless counterpart.
Example:
<typeahead is-rounded source="get/my/resource"
@update="reset"
ref="typeahead">
<template v-slot:controls="{ items }">
Controls go here
</template>
<template v-slot:option="{ highlight, item }">
Option styling goes here
</template>
</typeahead>
Slots:
controls
, slot for any controlsoption
, slot for the typeahead results rendering
Properties:
disabled
-boolean
, optional, defaultfalse
, if true the component is disabledisRounded
-boolean
, optional, defaultfalse
, if true, the input is roundednoResults
-string
, optional, defaultNothing found...
, the text shown when there are no resultsplaceholder
-string
, optional, defaultWhat are you searching for today?
searching
-string
, optional, defaultSearching...
, text show while searching is in progress
'Passed-through' properties:
debounce
-number
, optional, default250
,errorHandler
-boolean
, optional, by default the error is thrown, function used to handle errorslabel
-string
, optional, defaultlabel
, the attribute from the typeahead results that is used as labelpaginate
-number
, optional, default100
, the pagination sizeparams
-Object
, optional, defaultnull
, extra parameters that can be sent with the requestquery
-string
, optional, default ``, the string used for the backend query/searchregExp
,RegExp
, optional, default/(.*?)/
, expression used to validate the input contentssource
-string
, required, the URL used for the query/search to the back endvalue
-string
, optional, default ``, the value of the typeahead
renderless/Typeahead.vue
The renderless typeahead component that can be built upon to create custom components.
Properties:
debounce
-number
, optional, default250
,errorHandler
-boolean
, optional, by default the error is thrown, function used to handle errorslabel
-string
, optional, defaultlabel
, the attribute from the typeahead results that is used as labelpaginate
-number
, optional, default100
, the pagination sizeparams
-Object
, optional, defaultnull
, extra parameters that can be sent with the requestquery
-string
, optional, default ``, the string used for the backend query/searchregExp
,RegExp
, optional, default/(.*?)/
, expression used to validate the input contentssource
-string
, required, the URL used for the query/search to the back endvalue
-string|Object
, optional, defaultnull
, the value of the typeahead
Methods:
fetch()
, retrieves results from the back endupdate(query = '')
, emits aninput
event with the given query attribute as payloadclear()
, clears the input an the results
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.
Depends on
@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/vue-fontawesome
vue
lodash
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!