@craydel/craydel-autocomplete
Version:
A custom Vuetify autocomplete component for Craydel.
120 lines (94 loc) • 9.14 kB
Markdown
# CraydelAutocomplete
## Installation
Get the latest version by NPM:
```bash
$ npm i @craydel/craydel-autocomplete
```
## Register Plugin
If you use the plugin API, the component will be registered as a global component just like when
including it with the script tag, but you won't need to re-register it through the `components` property in your own
components.
Create the plugin file e.g `craydel-components.js` file.
```javascript
// craydel-components.js
import Vue from 'vue'
import CraydelAutocomplete from '@craydel/craydel-autocomplete/src/CraydelAutocomplete.vue'
const Components = {
CraydelAutocomplete,
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
```
Next reference the plugin file in your nuxt.config.js
```javascript
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/craydel-components.js'
]
```
## Props
| Name | Type | Default | Description |
|------------------|-------------------|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| id | string | random ID | Sets the DOM id on the component. |
| placeholder | string | 'Select' | Sets the component's placeholder text. |
| is-required | boolean | false | Puts component in a required state. |
| required-error | string | 'Field is required' | Puts the component in an error state and passes through the custom required error message. |
| multiple | boolean | false | Changes select to multiple. Accepts array for value. |
| select-all | boolean | false | Changes select to multiple with a 'Select All' option. Accepts array for value. |
| no-data-text | string | 'No data available' | Display text when there is no data. |
| hint | string | undefined | Hint text. |
| items | array | [] | Can be an array of objects or array of strings. When using objects, will look for a **text** and **value** keys. This can be changed using the **item-text** and **item-value** props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable. |
| item-text | string | text | Set property of items’s text. |
| item-value | string | value | Set property of items’s value. |
| attach | string | undefined | Specifies which DOM element that this component should detach to. String can be any valid querySelector. This will attach to the root v-app component by default. |
| no-validation | boolean | false | Removes the validation styling from the component. |
| disabled | boolean | false | Disables the component. |
| loading | boolean \| string | false | Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the primary color. |
| show-append-item | boolean | false | Displays the **append-item** slot that is used to display custom content after the menu content. |
 
## Events
| Name | Description |
|---------|:-------------------------------------------------------|
| blur | Emitted when the input is blurred. |
| change | Emitted when the input is changed by user interaction. |
| keydown | Emitted when **any** key is pressed. |
 
## Slots
| Name | Description |
|-------------|:---------------------------------|
| append-item | Adds an item after menu content. |
 
## Usage
An example showing a countries autocomplete that has an option to select all.
```html
<craydel-autocomplete
:items="countries"
item-text="text"
item-value="value"
select-all
placeholder="Type a country"
></craydel-autocomplete>
```
```javascript
data()
{
return {
countries: [
{
text: 'Kenya',
value: 'Kenya'
},
{
text: 'Uganda',
value: 'Uganda'
},
{
text: 'Nigeria',
value: 'Nigeria'
}
]
}
}
```