@craydel/craydel-autocomplete

CraydelAutocomplete

Installation

Get the latest version by NPM:

$ 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.

// 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

// 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.

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

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