SSelect

Обзор

Combobox: выбор из списка с триггером SInput, поиском и multiple.

Usage

Одиночный выбор с label и placeholder.

API

Краткий справочник props, slots и events — см. API Reference.

Guide

SSelect — combobox для выбора из списка: триггер на базе SInput, панель — SDropdown + SList.

Значение — v-model (примитив поля itemValue или объект опции при returnObject).
multiple — массив значений; отображение выбора в триггере через слот #selection (по умолчанию текст через запятую, для тегов — STag).
searchable="input" — фильтра в поле триггера; searchable="content" — отдельное поле поиска в шапке панели.
closeOnSelect — закрывать панель после выбора в single (по умолчанию true).
closableOptions — крестик справа у выбранных строк в списке (multiple).
Кастомная строка — слот #option (scope как у SList #item).

vue

<SSelect
  v-model="status"
  label="Status"
  placeholder="Select option"
  :options="statusOptions"
  clearable
/>

vue

<SSelect v-model="tags" multiple closable-options :options="options">
  <template #selection="slotScope">
    <STag
      v-for="(label, index) in slotScope.labels"
      :key="slotScope.values[index]"
      closable
      :model-value="label"
      @close="slotScope.removeValue(slotScope.values[index])"
    />
  </template>
</SSelect>

Props

Multiple

Clearable

Searchable (input)

Searchable (content)

Multiple с тегами

Слот #selection и STag для chips в триггере.

Теги и поиск в поле

Крестик в списке

Проп closableOptions — снятие выбора в строке списка.

Панель остаётся открытой

Проп closeOnSelect: false для single.

Return object

С ошибкой

Кастомная строка

Слот #option и SListItem.

API Reference

Свойства

Имя	Тип	Описание	По умолчанию
`options` обязательный	`TItem[]`	Набор опций выпадающего списка.
`itemValue`	`keyof TItem & string`	Поле значения для `v-model` и фильтрации; по умолчанию `value`.	`'value'`
`itemTitle`	`keyof TItem & string`	Поле подписи в списке и на триггере.	`'label'`
`itemSubtitle`	`keyof TItem & string`	Поле подзаголовка строки списка.	`'subtitle'`
`itemId`	`keyof TItem & string`	Поле ключа строки для `SList`; по умолчанию совпадает с `itemValue`.	—
`itemDisabled`	`keyof TItem & string`	Поле флага `disabled`.	`'disabled'`
`itemIconLeft`	`keyof TItem & string`	Поле имени иконки слева.	`'iconLeft'`
`multiple`	`boolean & TMultiple`	Разрешает выбор нескольких значений; `v-model` при этом — массив.	`false`
`returnObject`	`boolean & TReturnObject`	В `v-model` отдавать объект опции целиком, а не значение `itemValue`.	`false`
`clearable`	`boolean`	Кнопка очистки выбранных значений.	`false`
`closableOptions`	`boolean`	Крестик справа в выбранных строках списка для снятия выбора.	`false`
`searchable`	`ESSelectSearchable \| false`	Фильтрация: в поле (`input`) или в шапке панели (`content`).	`false`
`closeOnSelect`	`boolean`	Закрывает панель после выбора в single-режиме.	`true`
`listHeight`	`number \| string`	Максимальная высота списка опций; при малом числе пунктов подстраивается под контент.	`320`
`searchPlaceholder`	`string`	Плейсхолдер поля поиска в панели при `searchable="content"`.	`'Search'`
`filterOption`	`(…) => …`	Пользовательский предикат фильтрации опций.	—
`fitViewport`	`boolean`	Ограничивать панель пересечением overflow-предков reference. Отключите (`false`) внутри контейнеров с `overflow: hidden`, если панель не появляется.	`true`
`panelWidth`	`number \| string`	Фиксированная ширина панели вместо ширины триггера. Без него панель повторяет ширину триггера; заданное значение эту привязку отключает.	—
`surfaceClass`	`string`	Дополнительный CSS-класс поверхности панели.	—
`canLoadMore`	`(…) => …`	Предикат подгрузки для infinite scroll: можно ли запрашивать следующую порцию опций. Прокидывается в `SList`; при отсутствии `endReached` эмитится, пока есть, куда скроллить.	—
`endReachedDistance`	`number`	Расстояние в px до низа списка опций, на котором эмитится `endReached`.	`0`
`modelValue / v-model:searchQuery`	`string`	Двустороннее значение для `v-model:searchQuery`.	`''`

События

Имя	Описание	Payload
`clear`	Срабатывает после очистки значения кнопкой clear.	—
`focus`	Триггер получил фокус.	`FocusEvent`
`blur`	Триггер потерял фокус.	`FocusEvent`
`open`	Панель открылась.	—
`close`	Панель закрылась.	—
`endReached`	Скролл списка опций достиг низа — запросите следующую порцию (infinite scroll).	`{

direction: "bottom";

}` |

Слоты

Имя	Описание
`panel-header`	Шапка панели над списком (табы/переключатель); при searchable=content поиск рендерится ниже
`option`	Кастомная строка; scope — `SList` (`item`, `key`, …)
`option-icon`	Медиа слева в строке опции (иконка / эмодзи / аватар)
`empty`	Состояние пустой выдачи после фильтрации
`panel-footer`	Дополнительный блок под списком опций
`label`
`prefix`
`prepend`
`selection`	Отображение выбранных значений в multiple (теги, chips). При `searchable="input"` поле фильтрации рендерится в control после содержимого слота.
`value-suffix`
`message`

SSelect ​

Обзор ​

Usage ​

API ​

Guide ​

Props ​

Multiple ​

Clearable ​

Searchable (input) ​

Searchable (content) ​

Multiple с тегами ​

Теги и поиск в поле ​

Крестик в списке ​

Панель остаётся открытой ​

Return object ​

С ошибкой ​

Кастомная строка ​

API Reference ​

Свойства ​

События ​

Слоты ​