vue-dadata-3

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

Обновление 2.0

Запуск

npm install vue-dadata-3

yarn add vue-dadata-3

<template>
   <div>
        <DaDataNext v-model="value"></DaDataNext>
   </div>

</template>
<script setup lang="ts">

import { ref } from 'vue';
import { DaDataNext } from 'vue-dadata-3'

const value = ref(null);

</script>

или

import DaDataNext from 'vue-dadata-3';

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

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

import { useDaData } from 'vue-dadata-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";

Входные параметры

{
    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<AxiosRequestConfig>,
      default: () => ({}),
    },
    debounceWait: {
       type: Number,
       default: 300,
    },
    debounceOptions: {
        type: Object as PropType<DebounceSettings>,
        default: () => ({})
    },
    cssClasses: {
      type: Object as PropType<CssClasses>,
      default: () => ({}),
    },
    locations: {
      type: Object as PropType<LocationOptions>,
      default: () => ({}),
    },
    fromBound: {
      type: String as PropType<DaDataAddressBounds>,
    },
    toBound: {
      type: String as PropType<DaDataAddressBounds>,
    },
}

• 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 - гранулярные подсказки. Передаётся в строки, содержащий нужный тип. Например, следующий элемент будет искать исключительно по городам:

  <DaDataNext from-bound="city" to-bound="city"/>

События

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

Методы

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

Слоты

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

 <da-data-next>
  <template #list-item="{ prop, prepareValue}">
    <span v-html="prepareValue(prop, 'value')"></span>
  </template>
 </da-data-next>

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