@appsoftware/gigdata-inputs

Установка в nuxt

Установка из npm

npm i @appsoftware/gigdata-inputs

Подключение в плагинах и передача токена

Nuxt 3

// plugins/gigdata-inputs.js
import InputWithHints from "@appsoftware/gigdata-inputs/src/components/DefaultInput.vue";

export default defineNuxtPlugin((nuxtApp) => {
  InputWithHints.props.token.default = "TOKEN";
  InputWithHints.props.apiURL.default = "URL";
  nuxtApp.vueApp.component('InputWithHints', InputWithHints)
});

Nuxt 2

// plugins/gigdata-inputs.js
import InputWithHints from "@appsoftware/gigdata-inputs/src/components/DefaultInput.vue";
import Vue from "vue"

InputWithHints.props.token.default = "TOKEN"
InputWithHints.props.apiURL.default = "URL"
Vue.component("InputWithHints", InputWithHints)

// nuxt config 
plugins:[
  {src: "~/plugins/gigdata-inputs.js", mode: "client"}
]

Пропсы

Название	Тип	Описание
count	number	количество выдаваемых подсказок
token	string	токен для доступа к api
apiURL	string	адрес api
params	object	дополнительные параметры для запроса, можно найти в основной документации api
type	string	тип запроса (email, fio, address...), можно найти в enums.js
placeholder	string	стандартный placeholder
onSelectChangeValue	boolean	Меняется ли значение в инпуте при select
htmlInputType	string	Устанавливает тип поля ввода
disabled	bool	Устанавливает disabled поля ввода
modelValue	modelValue	Для быстрого двухстороннего связывания

Эвенты

Название	тип	Описание
input	string, event	срабатывает при вводе текста в инпуте, возвращает введенный текст
select	Object, event	срабатывает при выборе подсказки, возвращает выбранный элемент, со всеми данными
focus	Object	стандартный эвент
blur	Object	стандартный эвент
update:modelValue	Object	стандартный эвент для связки

Пример использования

<InputWithHints
    :type="type"
    :placeholder="placeholder"
    :value="value"
    @input="onInput"
/>

Полный кастом

Чтобы полносью кастомизировать коппонент, следует скопировать его себе на проект из каталога @/appsoftware/gigdata-inputs и заменить импорты

import {maskit, maskTokens} from "../helpers/mask";
import highlightSubString from "../helpers/highlightSubString";
import {getGigdataHints} from "../api/gigdataHints";
import debounce from "../helpers/debounce";
import config from "../config";

на

import {
config,
debounce,
getGigdataHints,
highlightSubString,
maskit,
maskTokens,
requestEnum
} from "@appsoftware/gigdata-inputs"

ВНИМАНИЕ

Есть стили которые желательно переписывать с помощью !important;

При билде могут возникать конфликты, которые могут не проявиться в dev режиме

Ниже стили которые необходимо переписывать через !important;

.defaultInput {
  position: relative;
  background: white;

  input {
    width: 100%;
    outline: none;
    background: inherit;
  }

  &__suggestions {
    z-index: 1;

    &__item {
      cursor: pointer;
    }

    width: 100%;
    background: inherit;
    position: absolute;
    top: 100%;
    list-style: none;

    .selected {
      background: rgba(128, 128, 128, 0.19);
    }
  }
}