@craydel-v3/craydel-autocomplete

CraydelAutocomplete

Installation

Get the latest version by NPM:

$ npm i @craydel-v3/craydel-autocomplete

Component Import

Import the module chosen directly in your component

<script>
  import CraydelAutocomplete from "@craydel-v3/craydel-autocomplete/src/CraydelAutocomplete.vue";

  export default {
  components: {CraydelAutocomplete}
}
</script>

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.
items	array	[]	Can be an array of objects or array of strings. When using objects, will look for a title and value keys. This can be changed using the item-title and item-value props.
item-title	string	'title'	Property on supplied items that contains its title.
item-value	string	'value'	Property on supplied items that contains its value.
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 component 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 focused or blurred.
change	Emitted when the input is changed by user interaction.

 

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.

<craydel-autocomplete
        :items="countries"
        item-title="title"
        item-value="value"
        select-all
        placeholder="Type a country"
></craydel-autocomplete>

data()
{
  return {
    countries: [
      {
        title: 'Kenya',
        value: 'Kenya'
      },
      {
        title: 'Uganda',
        value: 'Uganda'
      },
      {
        title: 'Nigeria',
        value: 'Nigeria'
      }
    ]
  }
}