@appsoftware/gigdata-inputs v2.0.2

@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"}
]

Пропсы

Эвенты

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

<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);
    }
  }
}