vue-dadata
Version:
Vue component for hinting addresses using dadata.ru
94 lines (74 loc) • 6.6 kB
Markdown
# Vue Dadata
[](https://badge.fury.io/js/vue-dadata)
[](https://badge.fury.io/js/vue-dadata)
[](https://github.com/ikloster03/vue-dadata/blob/main/LICENSE)
[](https://github.com/ikloster03/vue-dadata)
[comment]: <> ()
It's a vue component for hinting addresses using [DaData.ru](https://dadata.ru).
| Version | Description |
|-----------|----------------------|
| 1.\*.\* | Old version for vue2 |
| 2.\*.\* | New version for vue2 |
| 3.\*.\* | New version for vue3 |
## Install
[npm package](https://www.npmjs.com/package/vue-dadata)
```bash
# old version vue2
$ npm install vue-dadata@1.4.12 --save
# new version vue2 (in progress)
$ npm install vue-dadata@2.0.0-beta.2 --save
# vue3 (in progress)
$ npm install vue-dadata --save
```
## Usage
```html
<template>
<div class="vue-truncate-html-example">
<vue-dadata
v-model="query"
:token="token" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { VueDadata } from 'vue-dadata';
import 'vue-dadata/dist/style.css';
export default defineComponent({
name: 'VueTruncateHtmlExample',
components: {
VueDadata,
},
setup() {
const query = ref('');
return {
token: import.meta.env.VITE_APP_DADATA_API_KEY,
query,
};
},
});
</script>
```
### Properties
| Prop | Required | Type | Description | Default |
|------------------|----------|------------|----------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|
| token | Yes | `string` | Auth token DaData.ru | - |
| modelValue | Yes | `string` | v-model for query | - |
| suggestion | No | `object` | v-model for [suggestion](https://github.com/ikloster03/vue-dadata/blob/master/src/types/suggestion.dto.ts#L24) | `undefined` |
| placeholder | No | `string` | Text placeholder | `''` |
| url | No | `string` | special url for dadata api | `'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address'` |
| debounceWait | No | `string` | waiting time | `'1000ms'` |
| disabled | No | `boolean` | disabled | `false` |
| fromBound | No | `string` | Dadata bound type FROM | `undefined` |
| toBound | No | `string` | Dadata bound type TO | `undefined` |
| inputName | No | `string` | Input name attribute | `'vue-dadata-input'` |
| locationOptions | No | `object` | Location options for choosing cities or countries | `undefined` |
| classes | No | `object` | classes | [DEFAULT_CLASSES](https://github.com/ikloster03/vue-dadata/blob/master/src/const/classes.const.ts) |
| highlightOptions | No | `object` | highlight options for [vue-word-highlighter](https://github.com/kawamataryo/vue-word-highlighter) | [DEFAULT_HIGHLIGHT_OPTIONS](https://github.com/ikloster03/vue-dadata/blob/master/src/const/highlight-options.const.ts) |
| autocomplete | No | `boolean` | can autocomplete query, after blur | `undefined` |
## Peer dependencies
- [vue](https://github.com/vuejs/vue)
## Dependencies
- [axios](https://github.com/axios/axios)
- [vue-debounce](https://github.com/dhershman1/vue-debounce)
- [vue-word-highlighter](https://github.com/kawamataryo/vue-word-highlighter)
Copyright (c) 2019 - 2022 Ivan Monastyrev <ikloster@yandex.ru>. Licensed under the [MIT license](https://github.com/ikloster03/vue-dadata/blob/master/LICENSE).