ConfigProvider (configuración)

Aporta tamaño, idioma y variables de tema globales al subárbol. Lo que se inyecta mediante provide es una referencia computed (no una instantánea), de modo que los cambios en las props del provider se propagan en tiempo real a todos los componentes consumidores.

Personalización de tema local

<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">Botón con tema verde bambú</LhButton>
        <LhTag type="primary">Etiqueta verde bambú</LhTag>
        <LhInput placeholder="Campo de texto verde bambú" style="width: 180px" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">themeVars anula las variables --lh-* globales; solo los componentes de la lista blanca de patternComponents reciben 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">Botón verde pino (anulación individual con componentTheme)</LhButton>
        <LhTag type="primary">Etiqueta verde pino</LhTag>
      </div>
    </LhConfigProvider>
    <p class="demo-note">componentTheme anula el tema por componente (con prioridad sobre el themeVars global).</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 fija el tamaño global y locale cambia el paquete de idioma (los textos del paginador pasan al inglés).</p>
  </div>
</template>

Props

Prop	Descripción	Tipo	Predeterminado
size	Tamaño global (surte efecto cuando el componente secundario no recibe size explícitamente)	LhSizes	—
locale	Idioma global (un watch immediate lo sincroniza con la instancia única lhlocale)	LhLocaleType	—
themeVars	Variables de tema globales (la clave puede omitir el prefijo --lh-)	Record<string, string>	—
patternComponents	Lista blanca de componentes a los que se aplica bg-pattern	LhThemeableComponent[]	—
componentTheme	Anula las variables de tema por componente	Partial<Record<Component, Vars>>	—

API de composición

import { useLhConfigContext } from '@lh-ui/vue2'
// Inyección dentro de un componente personalizado: devuelve ComputedRef<LhConfigContext> | null
const ctx = useLhConfigContext()

Advertencia

Los servicios imperativos (montados con new Vue) no heredan el contexto de provide/inject; para leer el size/locale global se recurre a la instancia única lhlocale.