# ConfigProvider (configuration)

Fournit à la sous-arborescence la taille globale, la langue et les variables de thème. Ce qui est fourni est une référence computed (et non un instantané) : les changements de props du provider se propagent en temps réel à tous les composants consommateurs.

<template>
  <div class="demo-col" style="gap: 20px">
    <LhConfigProvider
      :theme-vars="{
        'primary-color': '#4a6741',
        'bg-color': '#f4f7ee',
        'text-primary': '#2c2a26',
        'text-regular': '#5a5a5a',
      }"
      :pattern-components="['button', 'tag']"
    >
      <div
        style="
          padding: 16px;
          background: var(--lh-bg-color);
          border: 1px dashed var(--lh-primary-color);
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        "
      >
        <LhButton type="primary">Bouton thème bambou</LhButton>
        <LhTag type="primary">Étiquette thème bambou</LhTag>
        <LhInput placeholder="Champ thème bambou" style="width: 180px" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">themeVars remplace les variables --lh-* globales ; seuls les composants de la liste blanche patternComponents appliquent bg-pattern.</p>
    <LhConfigProvider
      :theme-vars="{ 'primary-color': '#8b5a2b' }"
      :component-theme="{ button: { 'primary-color': '#2f6f5e' }, tag: { 'primary-color': '#2f6f5e' } }"
    >
      <div style="padding: 16px; display: flex; gap: 12px; flex-wrap: wrap">
        <LhButton type="primary">Bouton vert pin (componentTheme remplace individuellement)</LhButton>
        <LhTag type="primary">Étiquette vert pin</LhTag>
      </div>
    </LhConfigProvider>
    <p class="demo-note">componentTheme remplace le thème composant par composant (prioritaire sur les themeVars globales).</p>
    <LhConfigProvider size="large" locale="en-US">
      <div style="padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center">
        <LhInput placeholder="size=large" style="width: 180px" />
        <LhPagination :total="50" :page-size="10" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">size définit la taille globale + locale change le pack de langue (les textes du paginateur passent en anglais).</p>
  </div>
</template>

# Props

Prop	Description	Type	Valeur par défaut
size	Taille globale (effective lorsque le composant enfant ne reçoit pas de size explicite)	`LhSizes`	—
locale	Langue globale (synchronisée avec le singleton lhlocale via watch immediate)	`LhLocaleType`	—
themeVars	Variables de thème globales (le préfixe `--lh-` peut être omis)	`Record<string, string>`	—
patternComponents	Liste blanche des composants pour lesquels bg-pattern s'applique	`LhThemeableComponent[]`	—
componentTheme	Remplacement des variables de thème par composant	`Partial<Record<Component, Vars>>`	—

# Composition API

import { useLhConfigContext } from '@lh-ui/vue2'
// Injection dans un composant personnalisé : renvoie ComputedRef<LhConfigContext> | null
const ctx = useLhConfigContext()

Avertissement

Les services impératifs (montage via new Vue) n'héritent pas du contexte provide/inject ; ils lisent la taille et la langue globales via le singleton lhlocale.

Bouton →