Select

Компонент Select позволяет выбирать одно или несколько значений среди фиксированных вариантов (можно будет расширить до поиска значений по запросу к бэкенду).

Файл: app/components/ui/select/Select.vue

Быстрый старт

<script setup lang="ts">
import { Select } from 'components/ui/select';

const testSelect = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt', label: 'Nuxt' },
];
</script>

<template>
  <Select :options="testSelect" />
</template>

API

Props

Prop	Type	По умолчанию
`options`	`SelectOption[]`	`undefined`
`placeholder`	`string`	`''`
`multiple`	`boolean`	`false`
`multipleSelectedLabel`	`string`	`''`
`showSearch`	`boolean`	`false`
`noResultsText`	`string`	`''`
`searchPlaceholder`	`string`	`''`

Models

Prop	Type	По умолчанию
`model`	`string	string

Поведение

multiple переводит селект в режим множественного выбора
multipleSelectedLabel изменяет текст перед числом при множественном выборе (Выбрано: 2)
showSearch отображает строку поиска
noResultsText изменяет текст отсутствия результатов поиска
searchPlaceholder изменяет плейсхолдер у строки поиска
options принимает опции в формате {value: 'text', label: 'Текст'}

Варианты

С поиском

<script setup lang="ts">
import { Select } from 'components/ui/select';

const testSelect = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt', label: 'Nuxt' },
];
</script>

<template>
  <Select :options="testSelect" show-search />
</template>

Мультиселект

<script setup lang="ts">
import { Select } from 'components/ui/select';

const testSelect = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt', label: 'Nuxt' },
];
</script>

<template>
  <Select :options="testSelect" multiple />
</template>