npm package: @signainfo/sautocomplete
Description: ### Installation
Latest version: 1.9.2

# SAutoComplete component

### Installation

```sh
npm i --save @signainfo/sautocomplete
```

### Usage

It can be installed globally using:

```js
import Vue from 'vue'
import SAutoComplete from '@signainfo/sautocomplete'
import '@signainfo/sautocomplete/dist/sautocomplete.css'
...

Vue.use(SAutoComplete)

...
```

or used on demand:

```js
<script>
import SAutoComplete from '@signainfo/sautocomplete'
export default {
  name: 'App',
  components: {
    's-autocomplete': SAutoComplete
  },
  data() {
    ...
  }
}
</script>
```

and use inside the template tag:

```html
<template>
  ...
  <s-autocomplete
    v-model="chosenPerson"
    label="Nome"
    input-text="name"
    :items="filteredPeople"
    :headers="headers"
    height="400px"
    @query="queryPeople"
    :rules="[rules.pessoa]"
  />
  ...
</template>
```

Example of implementation:

```js
<script>
export default {
  name: 'App',
  data() {
    return {
      chosenPerson: {},
      filteredPeople: [],
      headers: [
        {
          title: 'Nome',
          value: 'name',
          width: '200px'
        },
        {
          title: 'Ano Nascimento',
          value: 'birth_year',
          width: '200px'
        },
        {
          title: 'URL',
          value: 'url',
          width: '200px'
        }
      ],
      people: [
        {
          name: 'Luke Skywalker',
          height: '172',
          mass: '77',
          hair_color: 'blond',
          skin_color: 'fair',
          eye_color: 'blue',
          birth_year: '19BBY',
          gender: 'male',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: [
            'https://swapi.co/api/films/2/',
            'https://swapi.co/api/films/6/',
            'https://swapi.co/api/films/3/',
            'https://swapi.co/api/films/1/',
            'https://swapi.co/api/films/7/'
          ],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: ['https://swapi.co/api/vehicles/14/', 'https://swapi.co/api/vehicles/30/'],
          starships: ['https://swapi.co/api/starships/12/', 'https://swapi.co/api/starships/22/'],
          created: '2014-12-09T13:50:51.644000Z',
          edited: '2014-12-20T21:17:56.891000Z',
          url: 'https://swapi.co/api/people/1/'
        },
        {
          name: 'C-3PO',
          height: '167',
          mass: '75',
          hair_color: 'n/a',
          skin_color: 'gold',
          eye_color: 'yellow',
          birth_year: '112BBY',
          gender: 'n/a',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: [
            'https://swapi.co/api/films/2/',
            'https://swapi.co/api/films/5/',
            'https://swapi.co/api/films/4/',
            'https://swapi.co/api/films/6/',
            'https://swapi.co/api/films/3/',
            'https://swapi.co/api/films/1/'
          ],
          species: ['https://swapi.co/api/species/2/'],
          vehicles: [],
          starships: [],
          created: '2014-12-10T15:10:51.357000Z',
          edited: '2014-12-20T21:17:50.309000Z',
          url: 'https://swapi.co/api/people/2/'
        },
        {
          name: 'R2-D2',
          height: '96',
          mass: '32',
          hair_color: 'n/a',
          skin_color: 'white, blue',
          eye_color: 'red',
          birth_year: '33BBY',
          gender: 'n/a',
          homeworld: 'https://swapi.co/api/planets/8/',
          films: [
            'https://swapi.co/api/films/2/',
            'https://swapi.co/api/films/5/',
            'https://swapi.co/api/films/4/',
            'https://swapi.co/api/films/6/',
            'https://swapi.co/api/films/3/',
            'https://swapi.co/api/films/1/',
            'https://swapi.co/api/films/7/'
          ],
          species: ['https://swapi.co/api/species/2/'],
          vehicles: [],
          starships: [],
          created: '2014-12-10T15:11:50.376000Z',
          edited: '2014-12-20T21:17:50.311000Z',
          url: 'https://swapi.co/api/people/3/'
        },
        {
          name: 'Darth Vader',
          height: '202',
          mass: '136',
          hair_color: 'none',
          skin_color: 'white',
          eye_color: 'yellow',
          birth_year: '41.9BBY',
          gender: 'male',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: [
            'https://swapi.co/api/films/2/',
            'https://swapi.co/api/films/6/',
            'https://swapi.co/api/films/3/',
            'https://swapi.co/api/films/1/'
          ],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: [],
          starships: ['https://swapi.co/api/starships/13/'],
          created: '2014-12-10T15:18:20.704000Z',
          edited: '2014-12-20T21:17:50.313000Z',
          url: 'https://swapi.co/api/people/4/'
        },
        {
          name: 'Leia Organa',
          height: '150',
          mass: '49',
          hair_color: 'brown',
          skin_color: 'light',
          eye_color: 'brown',
          birth_year: '19BBY',
          gender: 'female',
          homeworld: 'https://swapi.co/api/planets/2/',
          films: [
            'https://swapi.co/api/films/2/',
            'https://swapi.co/api/films/6/',
            'https://swapi.co/api/films/3/',
            'https://swapi.co/api/films/1/',
            'https://swapi.co/api/films/7/'
          ],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: ['https://swapi.co/api/vehicles/30/'],
          starships: [],
          created: '2014-12-10T15:20:09.791000Z',
          edited: '2014-12-20T21:17:50.315000Z',
          url: 'https://swapi.co/api/people/5/'
        },
        {
          name: 'Owen Lars',
          height: '178',
          mass: '120',
          hair_color: 'brown, grey',
          skin_color: 'light',
          eye_color: 'blue',
          birth_year: '52BBY',
          gender: 'male',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: ['https://swapi.co/api/films/5/', 'https://swapi.co/api/films/6/', 'https://swapi.co/api/films/1/'],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: [],
          starships: [],
          created: '2014-12-10T15:52:14.024000Z',
          edited: '2014-12-20T21:17:50.317000Z',
          url: 'https://swapi.co/api/people/6/'
        },
        {
          name: 'Beru Whitesun lars',
          height: '165',
          mass: '75',
          hair_color: 'brown',
          skin_color: 'light',
          eye_color: 'blue',
          birth_year: '47BBY',
          gender: 'female',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: ['https://swapi.co/api/films/5/', 'https://swapi.co/api/films/6/', 'https://swapi.co/api/films/1/'],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: [],
          starships: [],
          created: '2014-12-10T15:53:41.121000Z',
          edited: '2014-12-20T21:17:50.319000Z',
          url: 'https://swapi.co/api/people/7/'
        },
        {
          name: 'R5-D4',
          height: '97',
          mass: '32',
          hair_color: 'n/a',
          skin_color: 'white, red',
          eye_color: 'red',
          birth_year: 'unknown',
          gender: 'n/a',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: ['https://swapi.co/api/films/1/'],
          species: ['https://swapi.co/api/species/2/'],
          vehicles: [],
          starships: [],
          created: '2014-12-10T15:57:50.959000Z',
          edited: '2014-12-20T21:17:50.321000Z',
          url: 'https://swapi.co/api/people/8/'
        },
        {
          name: 'Biggs Darklighter',
          height: '183',
          mass: '84',
          hair_color: 'black',
          skin_color: 'light',
          eye_color: 'brown',
          birth_year: '24BBY',
          gender: 'male',
          homeworld: 'https://swapi.co/api/planets/1/',
          films: ['https://swapi.co/api/films/1/'],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: [],
          starships: ['https://swapi.co/api/starships/12/'],
          created: '2014-12-10T15:59:50.509000Z',
          edited: '2014-12-20T21:17:50.323000Z',
          url: 'https://swapi.co/api/people/9/'
        },
        {
          name: 'Obi-Wan Kenobi',
          height: '182',
          mass: '77',
          hair_color: 'auburn, white',
          skin_color: 'fair',
          eye_color: 'blue-gray',
          birth_year: '57BBY',
          gender: 'male',
          homeworld: 'https://swapi.co/api/planets/20/',
          films: [
            'https://swapi.co/api/films/2/',
            'https://swapi.co/api/films/5/',
            'https://swapi.co/api/films/4/',
            'https://swapi.co/api/films/6/',
            'https://swapi.co/api/films/3/',
            'https://swapi.co/api/films/1/'
          ],
          species: ['https://swapi.co/api/species/1/'],
          vehicles: ['https://swapi.co/api/vehicles/38/'],
          starships: [
            'https://swapi.co/api/starships/48/',
            'https://swapi.co/api/starships/59/',
            'https://swapi.co/api/starships/64/',
            'https://swapi.co/api/starships/65/',
            'https://swapi.co/api/starships/74/'
          ],
          created: '2014-12-10T16:16:29.192000Z',
          edited: '2014-12-20T21:17:50.325000Z',
          url: 'https://swapi.co/api/people/10/'
        }
      ]
    }
  },
  methods: {
    queryPeople(filter) {
      if (!filter || filter.length <= 2) {
        this.filteredPeople = []
        return
      }

      const filteredList = this.people.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()))

      this.filteredPeople = (!!filteredList && !!filteredList.length && filteredList) || this.people
    }
  }
}
</script>
```

Props:

```js
props: {
    items: { type: Array, required: true, default: () => [] },
    label: { type: String, required: true, default: '' },
    // The text that will be shown inside the input
    inputText: { type: String, required: true, default: '' },
    headers: {
        type: Array,
        required: true,
        default: () => [
            {
                text: '',
                value: '',
                width: '',
                align: ''
            }
        ] },
    width: { type: String, required: false, default: '400px' },
    height: { type: String, required: false, default: '200px' },
    rules: { type: Array, required: false, default: () => [] },
    disabled: { type: Boolean, required: false, default: false },
    autoSelect: { type: Boolean, required: false, default: true },
    dense: { type: Boolean, required: false, default: true }
}
```

### Development

```sh
npm start // start the test app
npm run build // builds the component and publish to npm
```

Before building the component you need to advance the version using npm semver:

```sh
npm version patch // to patch version
npm version minor // to minor version
npm version major // to major version
```