VstFilterAutocomplete

Компонент vst-filter-autocomplete є кастомізованим випадаючим списком, призначеним для вибору значень з розгорнутого списку. Компонент має підтримку як вибору одного значення, так і множинного вибору.

Component API

Behaviour

Name	Description	Type
value	Значення обраного/заданого селекту	String
id	Обов'язковий унікальний ідентифікатор фільтру	String

Content

Name	Description	Type
placeholder	Декоративний текст-підсказка	String
options	Масив об'єктів або стрінгових значень. Допустимими ключами об'єкту є: id, value, val або сама опція, що будуть значеннями для v-model, та label, key, text, title, label, id або сама опція, яка піде текстом у опції	String
multiple	Можливість мультиселекту. По дефолту false.	Boolean

State

Name	Description	Type
clearable	Кнопка очищення значення інпуту. За замовчуванням true	Boolean
disabled	Атрибут відключення інпуту	Boolean

Events

Name	Description	Return value
@input	Івент зміни значення компонента	String
@change	Івент зміни значення компонента	String

Приклади

Звичайний селект

Нижче наведено базове використання компоненти, де задано пропси id, placeholder. label - назва випадаючого акордеону, type - ключ, який визначає, який фільтр виводити.

Приклад пропсу scheme

Details

export default {
  data() {
    return {
      filter: [
        {
          type: "autocomplete",
          label: "Label test",
          placeholder: "Placeholder test",
          id: "autocomplete",
          options: [
            { id: 1, text: "Eric Clapton" },
            { id: 2, text: "John Mayer" },
            { id: 3, text: "Stevie Ray Vaughn" },
            { id: 4, text: "Jimi Hendrix" },
            { id: 5, text: "Albert King" },
            { id: 6, text: "Eric Clapton1" },
            { id: 7, text: "John Mayer1" },
            { id: 8, text: "Stevie Ray Vaughn1" },
            { id: 9, text: "Jimi Hendrix1" },
            { id: 10, text: "Albert King1" },
            { id: 11, text: "Eric Clapton2" },
          ],
        },
      ],
    };
  },
};

Приклад компоненту

  <template>
    <div>
      <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
      <VsFilter name="autocomplete" :vueRouter="router" :scheme="filter" :history="history"  @change="filterState = $event" />
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          filterState: null,
          filter: [
            {
              type: "autocomplete",
              label: "Label test",
              placeholder: "Placeholder test",
              id: "autocomplete",
              options: [
                { id: 1, text: "Eric Clapton" },
                { id: 2, text: "John Mayer" },
                { id: 3, text: "Stevie Ray Vaughn" },
                { id: 4, text: "Jimi Hendrix" },
                { id: 5, text: "Albert King" },
                { id: 6, text: "Eric Clapton1" },
                { id: 7, text: "John Mayer1" },
                { id: 8, text: "Stevie Ray Vaughn1" },
                { id: 9, text: "Jimi Hendrix1" },
                { id: 10, text: "Albert King1" },
                { id: 11, text: "Eric Clapton2" },
              ],
            },
          ],
        };
      },
    };
  </script>
  

Мультивибірний селект

Мультивибірним автокомпліт робить властивість multiple, яку потрібно зробити true у об'єкті конкретного компонету автокомпліту у пропсі scheme. При мультивиборі опції у випадалці відмічаються галочками, а в самому інпуті автокомпліту виводиться кількість обраних значень. Перелік заданих пропсів: id, placeholder, multiple, label - назва випадаючого акордеону, type - ключ, який визначає, який фільтр виводити.

Приклад пропсу scheme

Details

export default {
  data() {
    return {
      filter: [
        {
          type: "autocomplete",
          label: "Label test",
          placeholder: "Placeholder test",
          id: "id3",
          multiple: true,
          options: [
            { id: 1, text: "Eric Clapton" },
            { id: 2, text: "John Mayer" },
            { id: 3, text: "Stevie Ray Vaughn" },
            { id: 4, text: "Jimi Hendrix" },
            { id: 5, text: "Albert King" },
            { id: 6, text: "Eric Clapton1" },
            { id: 7, text: "John Mayer1" },
            { id: 8, text: "Stevie Ray Vaughn1" },
            { id: 9, text: "Jimi Hendrix1" },
            { id: 10, text: "Albert King1" },
            { id: 11, text: "Eric Clapton2" },
          ],
        },
      ],
    };
  },
};

Приклад компоненту

  <template>
    <div>
      <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
      <VsFilter name="autocomplete" :vueRouter="router" :scheme="filter" :history="history"  @change="filterState = $event" />
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          filterState: null,
          filter: [
            {
              type: "autocomplete",
              label: "Label test",
              placeholder: "Placeholder test",
              id: "autocomplete",
              multiple: true,
              options: [
                { id: 1, text: "Eric Clapton" },
                { id: 2, text: "John Mayer" },
                { id: 3, text: "Stevie Ray Vaughn" },
                { id: 4, text: "Jimi Hendrix" },
                { id: 5, text: "Albert King" },
                { id: 6, text: "Eric Clapton1" },
                { id: 7, text: "John Mayer1" },
                { id: 8, text: "Stevie Ray Vaughn1" },
                { id: 9, text: "Jimi Hendrix1" },
                { id: 10, text: "Albert King1" },
                { id: 11, text: "Eric Clapton2" },
              ],
            },
          ],
        };
      },
    };
  </script>