# 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'
      }
    ]
  }
}
```