vue-dadata-3

Компонент для работы с сервисом dadata

Обновление 2.0

$3

``
npm install vue-dadata-3

`

`
yarn add vue-dadata-3

`

`


`

или

`
import DaDataNext from 'vue-dadata-3';

createApp(App).use(DaDataNext, {
tag: 'ИМЯ КОМПОНЕНТА. По умолчанию da-data-next',
token: 'ВАШ ТОКЕН',
}).mount('#app');

`
Можно импортировать composable и использовать в своем компоненте:

`
import { useDaData } from 'vue-dadata-3';

`


Установив токен глобально далее его можно будет переопределить через пропсы.

$3

Стилизация согласно новому стандарту sass.

Доступные переменные:

`
$dadata_v_3_base_font_size: 16px!default;
$dadata_v_3_input_width: 280px!default;
$dadata_v_3_input_height: 40px!default;
$dadata_v_3_borders_color: #797979!default;
$dadata_v_3_list_bg_color: #fff!default;
$dadata_v_3_list_font_size: 14px!default;
$dadata_v_3_row_hover: #a8a8a8!default;

`
Переопределяем переменные следующим образом:

`
@use "vue-dadata-3/styles" with (
$dadata_v_3_base_font_size: 14px;
);

`

Или можно подключить готовый css, например в main.js

`
import "vue-dadata-3/index.css";

`

$3

`
{
modelValue: {
type: String,
required: true
},
token: {
type: String,
default: null,
},
type: {
type: String,
default: 'address',
},
setInputValue: {
type: Function as PropType<(item: DaDataSuggestionAnyType) => string>,
},
apiUrl: {
type: String,
default: null,
},
inputName: {
type: String,
default: 'address',
},
inputId: {
type: String,
default: null
},
placeholder: {
type: String,
default: null,
},
mergeParams: {
type: Object as PropType,
default: () => ({}),
},
debounceWait: {
type: Number,
default: 300,
},
debounceOptions: {
type: Object as PropType,
default: () => ({})
},
cssClasses: {
type: Object as PropType,
default: () => ({}),
},
locations: {
type: Object as PropType,
default: () => ({}),
},
fromBound: {
type: String as PropType,
},
toBound: {
type: String as PropType,
},
enabledCacheQuery: {
type: Boolean,
default: false
}
}

`

- token - токен сервиса

- type - тип подсказок по умолчанию address

- mergeParams - параметры запроса.

- setInputValue - коллбэк-функция, которая обрабатывает значение после выбора из подсказок. Принимает параметр объекта suggestion.

- apiUrl - кастомный урл для отправки запросов, заменяет дефолтный.

- inputName - значение атрибута name у input

- inputId - значение атрибута id у input

- placeholder - значение атрибута placeholder у input

- debounceWait - время задержки перед отправкой запроса

- debounceOptions - опции плагина debounce пакета lodash

- cssClasses - переопределение дефолтных css классов
`
type CssClasses = {
root: string,
input: string,
listEmpty: string,
row: string,
list: string
}
`
- locations - настройка ограничений и приоритетов для местности по которой осуществляется поиск.
Передаётся объектом со следующими опциональными полями:

| Название | Тип | Описание |
|-----------------|-------------------------------|---------------------------------------------------------------------------------------------------------------------|
| division | "municipal"\|"administrative" | Административное либо муниципальное деление |
| locations | array[object] | Ограничение сектора поиска |
| locations_geo | array[object] | Ограничение по радиусу окружности |
| locations_boost | array[object] | Приоритет города при ранжировании |

- fromBound и toBound - гранулярные подсказки. Передаётся в строки, содержащий нужный тип. Например, следующий элемент будет искать исключительно по городам:

`vue

`
- enabledCacheQuery - настройка включения и отключения кэширования строки поиска

$3

onSelected - возвращает объект, выбранной подсказки.

$3

restoreSuggestion - выполняет очистку данных по строке из текстового поля. Объект подсказки возвращается как обычно в событии onSelected

$3

list-item - слот для отдельной подсказки. Слот принимает два параметра - объект подсказки и функция для обработки подсказки

`



``

Функция prepareValue нужна для сохранения подсветки соответствий запроса.
Эта функция опциональна. Если все-таки решили её использовать, то нужно выводить, как в примере выше через директиву v-html.