FontPickerRoot

FontPickerRoot — headless-пикер шрифта с поиском, построенный на примитивах Reka UI Combobox.

Props

Prop	Default	Type
listFamilies* Асинхронный источник доступных семейств шрифтов.	—	() => Promise<string[]>
triggerClass Опциональный класс для триггера по умолчанию.	—	string | undefined
contentClass Опциональный класс для содержимого выпадающего списка.	—	string | undefined
itemClass Опциональный класс для элементов по умолчанию.	—	string | undefined
searchClass Опциональный класс для поля поиска.	—	string | undefined
viewportClass Опциональный класс для области прокрутки.	—	string | undefined
emptyClass Опциональный класс для состояний «пусто».	—	string | undefined
emptySearchText Текст, отображаемый при отсутствии результатов поиска.	—	string | undefined
emptyFontsText Текст, отображаемый при отсутствии доступных шрифтов.	—	string | undefined
emptyFontsHint Опциональный вспомогательный текст для состояния «нет шрифтов».	—	string | undefined

Model

Prop	Default	Type
v-model* Выбранное семейство шрифтов.	—	string

Events

Event	Payload	Description
select	family: string	Генерируется после выбора семейства шрифтов.

Slots

Slot	Props	Description
trigger	{ value: string, open: boolean }	Кастомное содержимое триггера.
search	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Слот кастомного поля поиска.
item	{ family: string, selected: boolean }	Кастомный рендерер элемента.
indicator	{ selected: boolean }	Кастомный индикатор выбранного элемента.
empty	—	Отображается при отсутствии доступных шрифтов.

Пример

<FontPickerRoot v-model="fontFamily" :list-families="listFamilies">
  <template #trigger="{ value }">
    <button class="w-full truncate">{{ value }}</button>
  </template>
</FontPickerRoot>

Связанные API

• useTypography