# @qubeekio/vue-fio-autocomplete

> Simple and lightweight package, that helps with russian fio

Latest version **2.2.3** (published 2022-01-11) · 0 weekly downloads

## Install

```sh
npm install @qubeekio/vue-fio-autocomplete
pnpm add @qubeekio/vue-fio-autocomplete
yarn add @qubeekio/vue-fio-autocomplete
bun add @qubeekio/vue-fio-autocomplete
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.3 |
| Published | 2022-01-11 |
| First published | 2021-07-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 92.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | shek.maxim |
| Keywords | vue, fio, russian, dadata, autocomplete, helper |

## Links

- npm: https://www.npmjs.com/package/@qubeekio/vue-fio-autocomplete
- Repository: https://github.com/qubeekio/vue-fio-autocomplete
- Homepage: https://github.com/qubeekio/vue-fio-autocomplete#readme
- Issues: https://github.com/qubeekio/vue-fio-autocomplete/issues
- npm.io page: https://npm.io/package/@qubeekio/vue-fio-autocomplete

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 2.2.3 (latest) — 2022-01-11
- 2.2.2 — 2022-01-11
- 2.2.1 — 2021-07-18
- 2.2.0 — 2021-07-18
- 2.1.0 — 2021-07-18

## README

# Fio suggestion field 
![](https://github.styleci.io/repos/371502967/shield?branch=master)
![MIT License](https://img.shields.io/github/license/qubeekio/vue-fio-autocomplete.svg?style=flat-square)

> **Simple and lightweight package, that helps with russian fio**

An input field that helps users fill in their full name faster and more correctly. 
Fully customizable and ready for production, just change styles, and let's rock. 
It works with [dadata.ru](https://dadata.ru) or your own custom service.

## Usage

### Install

```bash
$ npm install @qubeekio/vue-fio-autocomplete
```

### Init

```js

import FioAutocomplete from "@qubeekio/vue-fio-autocomplete"

...

methods: {
  async fetch(data) {
    return await axios
      .request({
        method: 'POST',
        url: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/fio',
        headers: {
          Authorization: 'Token ' + 'Your token'
        },
        data
      })
      .then(({ data }) => {
        return data.suggestions
      })
  }
}

...

<fio-autocomplete-field
  v-model="fio" 
  :load-using="fetch"
/>

```

### Output value
Field returns user input and splits it into the right parts of fio.

```js
fio: {
  surname: "Иванов",
  name: "Иван",
  patronymic: "Иванович",
  gender: "MALE"
}
```

### Styles

The component includes SCSS. 

You can find [list of SCSS variables here](https://github.com/qubeekio/vue-fio-autocomplete/blob/master/styles/main.scss).

```scss
@import "@qubeekio/vue-fio-autocomplete/styles/main.scss";
```

## Estimated response from the server
--
```json
{
  "suggestions": [
    {
      "value": "Виктор",
      "unrestricted_value": "Виктор",
      "data": {
        "surname": null,
        "name": "Виктор",
        "patronymic": null,
        "gender": "MALE",
        "source": null,
        "qc": "0"
      }
    },
  ]
}
```

## License

[MIT](https://github.com/qubeekio/vue-fio-autocomplete/blob/master/LICENSE)

---
_Source: https://npm.io/package/@qubeekio/vue-fio-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._