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-* العامة؛ والمكوّنات داخل القائمة البيضاء patternComponents فقط هي التي تطبّق 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">زر أخضر صنوبري (تجاوز منفصل عبر 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 (تصبح نصوص أداة الترقيم إنجليزية).</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 المفردة.