Input Select

Tanlov dropdown'i bilan birlashtirilgan input. Select obyekt kalitini tanlaydi, input uning qiymatini tahrirlaydi. v-model butun obyektga bog'lanadi. Har bir variant o'zining mask, shortLabel, icon, regex va currency xususiyatlariga ega bo'lishi mumkin.

Basic

{"uz":"","en":"","ru":""}

<script setup>
const form = ref({
  typeNames: { uz: '', en: '', ru: '' },
})
</script>

<template>
  <VxInputSelect
    v-model="form.typeNames"
    :options="[
      { label: 'Uzbek', value: 'uz', shortLabel: 'UZ' },
      { label: 'English', value: 'en', shortLabel: 'EN' },
      { label: 'Russian', value: 'ru', shortLabel: 'RU' },
    ]"
    placeholder="Enter name"
  />
</template>

Per-Option Mask

Har bir variant o'z input mask'ini belgilashi mumkin. Boshqa variantni tanlaganingizda mask avtomatik tarzda almashtiriladi.

{"mobile":"","home":"","work":""}

<VxInputSelect
  v-model="form.phones"
  :options="[
    { label: 'Mobile', value: 'mobile', shortLabel: 'Mobile', mask: '+### ## ###-##-##' },
    { label: 'Home', value: 'home', shortLabel: 'Home', mask: '(##) ###-##-##' },
    { label: 'Work', value: 'work', shortLabel: 'Work', mask: '### (##) ###-####' },
  ]"
/>

With Icons

Variantlar icon sifatida Vue komponentini o'z ichiga olishi mumkin.

{"mobile":"","home":"","work":""}

<script setup>
import {
  RoundedStrokeSmartPhone01Icon,
  RoundedStrokeHome09Icon,
  RoundedStrokeBriefcase01Icon,
} from 'vexel-icons'

const form = ref({
  contacts: { mobile: '', home: '', work: '' },
})
</script>

<template>
  <VxInputSelect
    v-model="form.contacts"
    :options="[
      { label: 'Mobile', value: 'mobile', shortLabel: 'Mobile', icon: RoundedStrokeSmartPhone01Icon, mask: '+### ## ###-##-##' },
      { label: 'Home', value: 'home', shortLabel: 'Home', icon: RoundedStrokeHome09Icon, mask: '(##) ###-##-##' },
      { label: 'Work', value: 'work', shortLabel: 'Work', icon: RoundedStrokeBriefcase01Icon, mask: '### (##) ###-####' },
    ]"
  />
</template>

Currency Options

Har bir variant prefix, suffix, thousands, decimal va precision bilan currency'ni belgilashi mumkin.

{"usd":"","eur":"","uzs":""}

<VxInputSelect
  v-model="form.prices"
  :options="[
    { label: 'US Dollar', value: 'usd', shortLabel: 'USD', currency: { prefix: '$ ', thousands: ',', precision: 2 } },
    { label: 'Euro', value: 'eur', shortLabel: 'EUR', currency: { prefix: '€ ', thousands: '.', decimal: ',', precision: 2 } },
    { label: 'UZS', value: 'uzs', shortLabel: 'UZS', currency: { suffix: ' sum', thousands: ' ', precision: 0 } },
  ]"
/>

Regex Per Option

Har bir variant ruxsat etilgan belgilarni cheklash uchun regex'ni belgilashi mumkin.

{"hex":"","alpha":"","digits":""}

<VxInputSelect
  v-model="form.codes"
  :options="[
    { label: 'Hex Code', value: 'hex', shortLabel: 'HEX', regex: /[0-9a-fA-F]/ },
    { label: 'Letters Only', value: 'alpha', shortLabel: 'ABC', regex: /[a-zA-Z]/ },
    { label: 'Digits Only', value: 'digits', shortLabel: '123', regex: /[0-9]/ },
  ]"
  placeholder="Type here..."
/>

String Options

{"uz":"","en":"","ru":""}

<VxInputSelect
  v-model="form.typeNames"
  :options="['uz', 'en', 'ru']"
  placeholder="Enter name"
/>

Select at End

{"USD":"","EUR":"","GBP":""}

<VxInputSelect
  v-model="form.prices"
  :options="['USD', 'EUR', 'GBP']"
  placeholder="0.00"
  select-position="end"
/>

Sizes

Clearable

Props

Prop	Type	Default	Description
modelValue	Record<string, string>	{}	Kalit-qiymat juftliklari bo'lgan obyekt (v-model)
options	(string | InputSelectOption)[]	[]	label, value, shortLabel, icon, mask, regex, currency bilan tanlov variantlari
placeholder	string	''	Input placeholder (faol mask'ga qaytadi)
selectPlaceholder	string	'Select'	Select placeholder
disabled	boolean	false	Komponentni o'chirish
readonly	boolean	false	Faqat o'qish uchun input
clearable	boolean	false	Tozalash tugmasini ko'rsatish
size	'sm' | 'default' | 'lg'	'default'	Komponent o'lchami
selectPosition	'start' | 'end'	'start'	Select joylashuvi
type	string	'text'	Input turi
maxlength	number	—	Maksimal input uzunligi
autofocus	boolean	false	Mount paytida avtomatik fokus
mask	string	''	Umumiy mask (har bir variant mask'i ustuvor)

Option Interface

interface InputSelectOption {
  label: string             // Full label in dropdown
  value: string             // Object key
  shortLabel?: string       // Short label in trigger button
  icon?: Component          // Icon component
  mask?: string             // Per-option input mask
  regex?: RegExp            // Per-option character filter
  currency?: CurrencyOptions // Per-option currency formatting
  disabled?: boolean
}

interface CurrencyOptions {
  decimal?: string    // Decimal separator (default '.')
  thousands?: string  // Thousands separator (default ',')
  prefix?: string     // e.g. '$ '
  suffix?: string     // e.g. ' USD'
  precision?: number  // Decimal places (default 2)
}

Events

Event	Payload	Description
update:modelValue	Record<string, string>	Obyekt yangilandi
input	(key, value)	Joriy kalit uchun input
change	(key, value)	Joriy kalit uchun o'zgarish
select	key	Dropdown'dan kalit tanlandi
focus	FocusEvent	Input fokuslandi
blur	FocusEvent	Input fokusdan chiqdi
clear	—	Joriy kalit qiymati tozalandi