ConfigProvider (настройка)

Предоставляет поддереву глобальный размер, язык и переменные темы. Через provide передаётся вычисляемая ссылка (computed), а не снимок: изменения prop провайдера в реальном времени доходят до всех компонентов-потребителей.

Локальная настройка темы

<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">Кнопка бамбуковой темы</LhButton>
        <LhTag type="primary">Метка бамбуковой темы</LhTag>
        <LhInput placeholder="Бамбуковое поле ввода" style="width: 180px" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">themeVars переопределяет глобальные переменные --lh-*; bg-pattern применяется только к компонентам из белого списка patternComponents.</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">Кнопка темы «сосновая зелень» (отдельное переопределение через componentTheme)</LhButton>
        <LhTag type="primary">Метка темы «сосновая зелень»</LhTag>
      </div>
    </LhConfigProvider>
    <p class="demo-note">componentTheme переопределяет переменные по отдельным компонентам (приоритет выше, чем у глобальных themeVars).</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 — глобальный размер + locale переключает языковой пакет (текст pagination становится английским).</p>
  </div>
</template>

Props

Проп	Описание	Тип	По умолчанию
size	Глобальный размер (применяется, когда дочернему компоненту не передан size явно)	LhSizes	—
locale	Глобальный язык (watch immediate синхронизирует синглтон lhlocale)	LhLocaleType	—
themeVars	Глобальные переменные темы (префикс --lh- в ключах можно опускать)	Record<string, string>	—
patternComponents	Белый список компонентов, к которым применяется bg-pattern	LhThemeableComponent[]	—
componentTheme	Переопределение переменных темы по компонентам	Partial<Record<Component, Vars>>	—

Композиционный API

import { useLhConfigContext } from '@lh-ui/vue2'
// Внедрение в пользовательский компонент: возвращает ComputedRef<LhConfigContext> | null
const ctx = useLhConfigContext()

Предупреждение

Императивные сервисы (монтирование через new Vue) не наследуют контекст provide/inject: глобальные size/locale читаются через синглтон lhlocale.