Config Provider

Global konfiguratsiya komponenti. Barcha VeloxUI komponentlariga locale va boshqa sozlamalarni taqdim etish uchun ilovangizni o'rab oladi.

Basic Usage

Languageen

button.loadingLoading

input.placeholderPlease input

modal.confirmConfirm

modal.cancelCancel

table.emptyTextNo data

<script setup>
import { ref } from 'vue'
import { en, ru, uz } from 'veloxui'

const locale = ref(en)
</script>

<template>
  <VxConfigProvider :locale="locale">
    <App />
  </VxConfigProvider>
</template>

Using in Components

Tarjimalarga kirish uchun istalgan komponent ichida useLocale composable dan foydalaning.

<script setup>
import { useLocale } from 'veloxui'

const { t, name } = useLocale()
// t('modal.confirm') → 'Confirm' or 'Подтвердить' etc.
// name.value → 'en' or 'ru' etc.
</script>

<template>
  <p>Current language: {{ name }}</p>
  <button>{{ t('modal.confirm') }}</button>
</template>

Available Locales

Locale	Name	Import
English	en	import { en } from 'veloxui'
Russian	ru	import { ru } from 'veloxui'
Uzbek	uz	import { uz } from 'veloxui'

Locale JSON

Quyidagi istalgan locale ni nusxalang va o'z tarjimangizni yaratish uchun uni o'zgartiring.

{
  "name": "en",
  "vx": {
    "button": {
      "loading": "Loading"
    },
    "input": {
      "placeholder": "Please input"
    },
    "modal": {
      "close": "Close",
      "confirm": "Confirm",
      "cancel": "Cancel"
    },
    "scrollbar": {
      "loading": "Loading..."
    },
    "pagination": {
      "prev": "Previous",
      "next": "Next",
      "total": "Total {total}"
    },
    "datepicker": {
      "date": "Date",
      "range": "Range"
    },
    "select": {
      "placeholder": "Select",
      "noData": "No data",
      "noMatch": "No matching data"
    },
    "table": {
      "emptyText": "No data"
    },
    "upload": {
      "upload": "Upload",
      "delete": "Delete",
      "preview": "Preview"
    }
  }
}

Custom Locale

Yuqoridagi tuzilmaga mos keladigan o'z locale obyektingizni yarating:

const myLocale = {
  name: 'fr',
  vx: {
    button: { loading: 'Chargement' },
    input: { placeholder: 'Veuillez saisir' },
    modal: { close: 'Fermer', confirm: 'Confirmer', cancel: 'Annuler' },
    scrollbar: { loading: 'Chargement...' },
    pagination: { prev: 'Précédent', next: 'Suivant', total: 'Total {total}' },
    datepicker: { date: 'Date', range: 'Plage' },
    select: { placeholder: 'Sélectionner', noData: 'Pas de données', noMatch: 'Aucune correspondance' },
    table: { emptyText: 'Pas de données' },
    upload: { upload: 'Télécharger', delete: 'Supprimer', preview: 'Aperçu' },
  },
}

<template>
  <VxConfigProvider :locale="myLocale">
    <App />
  </VxConfigProvider>
</template>

Props

Prop	Type	Default	Description
locale	VxLocale	en	Locale konfiguratsiya obyekti

Component Typings

Barcha turlar veloxui dan eksport qilinadi va to'g'ridan-to'g'ri import qilinishi mumkin.

import type {
  // Config Provider
  ConfigProviderProps,
  VxLocale,

  // Button
  ButtonProps,
  ButtonVariant,    // 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
  ButtonSize,       // 'sm' | 'default' | 'lg' | 'icon'

  // Layout Container
  ContainerProps,
  ContainerDirection, // 'horizontal' | 'vertical'
  HeaderProps,
  FooterProps,
  AsideProps,

  // Scrollbar
  ScrollbarProps,
  ScrollbarSize,    // 'sm' | 'default' | 'lg'

  // Splitter
  SplitterProps,
  SplitterDirection, // 'horizontal' | 'vertical'
  SplitterPanelProps,
  SplitterHandleProps,
} from 'veloxui'

VxConfigProvider

interface ConfigProviderProps {
  locale?: VxLocale   // Locale konfiguratsiya obyekti
}

type VxLocale = {
  name: string
  vx: {
    button:     { loading: string }
    input:      { placeholder: string }
    modal:      { close: string; confirm: string; cancel: string }
    scrollbar:  { loading: string }
    pagination: { prev: string; next: string; total: string }
    select:     { placeholder: string; noData: string; noMatch: string }
    table:      { emptyText: string }
    upload:     { upload: string; delete: string; preview: string }
  }
}

VxButton

interface ButtonProps {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
  size?: 'sm' | 'default' | 'lg' | 'icon'
  bg?: string
  disabled?: boolean
  loading?: boolean
  loadingIcon?: Component
  buttonClass?: string | string[] | Record<string, boolean>
  icon?: Component
  round?: boolean
  circle?: boolean
}

VxContainer / VxHeader / VxFooter / VxAside

interface ContainerProps {
  direction?: 'horizontal' | 'vertical'  // bolalardan avtomatik aniqlanadi
}

interface HeaderProps {
  height?: string   // standart: '60px'
}

interface FooterProps {
  height?: string   // standart: '60px'
}

interface AsideProps {
  width?: string    // standart: '200px'
}

VxScrollbar

interface ScrollbarProps {
  height?: string
  maxHeight?: string
  native?: boolean
  always?: boolean
  size?: 'sm' | 'default' | 'lg'
  infinite?: boolean
  distance?: number
  noresize?: boolean
  tag?: string
}

// Exposed methods
interface ScrollbarExposed {
  scrollTo(options: ScrollToOptions): void
  setScrollTop(top: number): void
  setScrollLeft(left: number): void
  update(): void
  wrapRef: Ref<HTMLElement>
}

// Events: scroll, scrollend, infinite

VxSplitter / VxSplitterPanel / VxSplitterHandle

interface SplitterProps {
  direction?: 'horizontal' | 'vertical'
  lazy?: boolean
}

interface SplitterPanelProps {
  size?: number       // foiz
  minSize?: number    // standart: 0
  maxSize?: number    // standart: 100
  collapsible?: boolean
  collapsed?: boolean
}

interface SplitterHandleProps {
  disabled?: boolean
}

// Events: resize(sizes: number[])

useLocale

import { useLocale } from 'veloxui'

const { locale, name, t } = useLocale()

locale  // ComputedRef<VxLocale> — to'liq locale obyekti
name    // ComputedRef<string>   — masalan, 'en', 'ru', 'uz'
t(path: string, options?: Record<string, string | number>): string
// t('modal.confirm')              → 'Confirm'
// t('pagination.total', { total: 42 }) → 'Total 42'