FontPickerRoot

FontPickerRoot est un sélecteur de police headless avec recherche, construit sur les primitives Reka UI Combobox.

Props

Prop	Default	Type
listFamilies* Source asynchrone des familles de polices disponibles.	—	() => Promise<string[]>
triggerClass Classe optionnelle pour le déclencheur par défaut.	—	string | undefined
contentClass Classe optionnelle pour le contenu déroulant.	—	string | undefined
itemClass Classe optionnelle pour les éléments par défaut.	—	string | undefined
searchClass Classe optionnelle pour le champ de recherche.	—	string | undefined
viewportClass Classe optionnelle pour le viewport de défilement.	—	string | undefined
emptyClass Classe optionnelle pour les états vides.	—	string | undefined
emptySearchText Texte affiché quand la recherche ne retourne aucune police.	—	string | undefined
emptyFontsText Texte affiché quand aucune police n'est disponible.	—	string | undefined
emptyFontsHint Texte d'aide optionnel pour l'état sans polices.	—	string | undefined

Modèle

Prop	Default	Type
v-model* Famille de polices sélectionnée.	—	string

Événements

Event	Payload	Description
select	family: string	Émis après la sélection d'une famille de polices.

Slots

Slot	Props	Description
trigger	{ value: string, open: boolean }	Contenu du déclencheur personnalisé.
search	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Slot de champ de recherche personnalisé.
item	{ family: string, selected: boolean }	Rendu d'élément personnalisé.
indicator	{ selected: boolean }	Indicateur de sélection personnalisé.
empty	—	Affiché quand aucune police n'est disponible.

Exemple

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

API associées

• useTypography