Input Select

Поле ввода в сочетании с выпадающим списком. Селект выбирает ключ объекта, поле ввода редактирует его значение. v-model связывается со всем объектом. Каждая опция может иметь собственные mask, shortLabel, icon, regex и currency.

Basic

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

vue

<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

Каждая опция может определять собственную маску ввода. Маска автоматически переключается при выборе другой опции.

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

vue

<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

Опции могут включать Vue-компонент в качестве icon.

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

vue

<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

Каждая опция может определять currency с prefix, suffix, thousands, decimal и precision.

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

vue

<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

Каждая опция может определять regex, чтобы ограничить допустимые символы.

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

vue

<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":""}

vue

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

Select at End

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

vue

<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>`	`{}`	Объект с парами ключ-значение (v-model)
`options`	`(string \| InputSelectOption)[]`	`[]`	Опции селекта с `label`, `value`, `shortLabel`, `icon`, `mask`, `regex`, `currency`
`placeholder`	`string`	`''`	Плейсхолдер поля ввода (по умолчанию активная маска)
`selectPlaceholder`	`string`	`'Select'`	Плейсхолдер селекта
`disabled`	`boolean`	`false`	Отключить компонент
`readonly`	`boolean`	`false`	Поле только для чтения
`clearable`	`boolean`	`false`	Показать кнопку очистки
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Размер компонента
`selectPosition`	`'start' \| 'end'`	`'start'`	Позиция селекта
`type`	`string`	`'text'`	Тип поля ввода
`maxlength`	`number`	—	Максимальная длина ввода
`autofocus`	`boolean`	`false`	Автофокус при монтировании
`mask`	`string`	`''`	Глобальная маска (маска опции приоритетнее)

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>`	Объект обновлён
`input`	`(key, value)`	Ввод для текущего ключа
`change`	`(key, value)`	Изменение для текущего ключа
`select`	`key`	Ключ выбран из выпадающего списка
`focus`	`FocusEvent`	Поле ввода получило фокус
`blur`	`FocusEvent`	Поле ввода потеряло фокус
`clear`	—	Значение текущего ключа очищено

Input Select ​

Basic ​

Per-Option Mask ​

With Icons ​

Currency Options ​

Regex Per Option ​

String Options ​

Select at End ​

Sizes ​

Clearable ​

Props ​

Option Interface ​

Events ​