Fonctions JavaScript

Le paquet n'exporte que des fonctions nommées, et la liste est courte à dessein : de la configuration pour l'ensemble du design system, et rien qu'un composant aurait pu faire lui-même.

Ce qui est exporté

Export	Ce que ça fait
`setLocale(tag)`	Fixe la locale pour tout le design system. Les FORMATS dérivent d'`Intl` à partir de ce tag, qu'un dictionnaire lui corresponde ou non.
`registerMessages(tag, dict)`	Enregistre un dictionnaire. Les dictionnaires partiels sont légitimes : ce qui manque retombe sur l'anglais.
`en` · `fr`	Les deux dictionnaires livrés. `en` est toujours embarqué ; `fr` est optionnel, et ne pas l'importer l'élague.
`setIconResolver(fn)`	Branche une bibliothèque d'icônes tierce. Consulté AVANT le registre intégré ; renvoyez `undefined` pour passer la main.
`ligatureIconResolver()`	Résout un nom vers une ligature de police d'icônes, comme Material Symbols ou IcoMoon.
`classIconResolver()`	Résout un nom vers un jeu piloté par classe : Font Awesome, Phosphor, Bootstrap Icons. Strict par défaut, si bien qu'un nom non mappé retombe sur le SVG intégré plutôt que sur un carré vide.
`componentIconResolver()`	Résout un nom vers un composant de votre propre bibliothèque, comme Lucide ou Untitled UI.
`toast(options)` · `dismissToast(id)`	Ajoute et retire une notification. C'est la seule API impérative de la bibliothèque, parce qu'une notification n'a pas sa place dans l'arbre qui la demande.

// app entry: module level, never inside a setup()
import {
  fr,
  registerMessages,
  setLocale,
  setIconResolver,
  ligatureIconResolver,
} from 'vectis-ui'

registerMessages('fr', fr)
setLocale('fr-FR')
setIconResolver(ligatureIconResolver())

Tout ce qui précède écrit un état AU NIVEAU DU MODULE, ce qui permet de l'appeler depuis n'importe quel fichier .ts sans plugin ni provider, et fait que les composants déjà montés se rendent à nouveau quand il change. Cette même propriété est la contrainte : il appartient au processus et non à une requête, c'est donc de la configuration et jamais quelque chose qui varie selon le visiteur.

import { toast } from 'vectis-ui'

// client-side only: the queue is module state, shared by every
// request a server handles
toast({ message: 'Copied to the clipboard', duration: 1600 })

Les types sont exportés à côté (Messages, MessagesInput, IconSource, IconResolver, ToastOptions), plus un par composant dont l'API demande à être nommée, comme ComboboxOption, DataTableColumn ou DatePickerSelection.

Les fonctions internes, et pourquoi elles le restent

La bibliothèque porte un jeu complet d'aides pour les dates, les heures, les fichiers et le texte, et ce sont elles qui font VDatePicker, VDateInput, VTimePicker et VFilePicker. Elles ne sont PAS exportées, et la raison est énoncée au point d'entrée : les modules internes ne font pas partie de la surface publique, si bien que leurs signatures restent libres de changer avec les composants qui s'en servent.

Module	Fonctions internes
`utils/date.ts`	`parseISO`, `formatISO`, `addDays`, `addMonths`, `clampISO`, `isWithin`, `isDateAllowed`, `buildMonthGrid`, `firstDayOfWeekFor`, `weekdayNames`, `monthNames`, `formatDateDisplay`, `dateMaskFor`, `parseDateMask`
`utils/time.ts`	`parseTime`, `formatTime`, `to12h`, `to24h`, `withMeridiem`, `hourCycleFor`, `formatTimeDisplay`, `snapMinute`, `timeList`, `timeToMask`, `parseTimeMask`
`utils/file.ts`	`matchesAccept`, `formatBytes`, `screenFiles`
`utils/text.ts` · `number.ts` · `array.ts`	`normalizeText`, `pad2`, `digitsOf`, `clamp`, `toggleValue`
`utils/arrowNav.ts` · `matcher.ts`	`navigableItems`, `arrowNavigate`, `resolveMatcher`
`utils/css.ts` · `vnode.ts` · `env.ts` · `memo.ts`	`px`, `cssSize`, `flattenSlot`, `isDev`, `memo`

Deux d'entre elles méritent d'être recopiées plutôt qu'importées : hourCycleFor(locale) et firstDayOfWeekFor(locale) répondent à des questions auxquelles Intl ne répond qu'indirectement.

Composables

La même règle couvre les composables, usePopover, useFieldPanel, useMaskedField, useFocusoutDismiss, useTextLimit, useRootAttrs, useTimer et les leurs : internes, non exportés, et documentés dans leurs propres fichiers. Si vous vous surprenez à en vouloir un, c'est une demande de composant.