Input

Текстовое поле ввода со стилем shadcn/ui. Поддерживает маску, дебаунс, форматтер, textarea, счётчик чисел, поиск и многое другое.

<template>
  <VxInput v-model="value" placeholder="Type something..." />
</template>

Sizes

<template>
  <VxInput size="sm" />
  <VxInput />
  <VxInput size="lg" />
</template>

Clearable

<template>
  <VxInput v-model="value" clearable />
</template>

Password

<template>
  <VxInput type="password" placeholder="Enter password..." />
</template>

Prefix & Suffix

<template>
  <VxInput placeholder="Search...">
    <template #prefix><SearchIcon /></template>
  </VxInput>
</template>

Mask

# = цифра, A = буква, * = любой символ. Разделители вставляются автоматически.

Phone: ###-###-####

Card: #### #### #### ####

<template>
  <VxInput mask="###-###-####" placeholder="Phone" />
  <VxInput mask="#### #### #### ####" placeholder="Card" />
</template>

Mask with Unmasked Value

v-model возвращает маскированное значение (например, +1 (234) 567-89-01). Используйте v-model:unmasked-value, чтобы получить только сырые цифры.

Phone: +# (###) ###-##-##

v-model (masked): –

unmasked-value: –

Credit Card: #### #### #### ####

v-model (masked): –

unmasked-value: –

<script setup>
const phone = ref('')
const phoneRaw = ref('')
// phone will be "+1 (234) 567-89-01" (masked)
// phoneRaw will be "12345678901" (unmasked)
</script>

<template>
  <VxInput v-model="phone" v-model:unmasked-value="phoneRaw" mask="+# (###) ###-##-##" />
</template>

Debounce

Откладывает обновление v-model. @input по-прежнему срабатывает сразу.

Debounced: –

<template>
  <VxInput v-model="value" :debounce="500" />
</template>

Trim

Автоматически убирает пробелы по краям при потере фокуса.

""

<template>
  <VxInput v-model="value" trim />
</template>

Lazy

Обновляет v-model при потере фокуса, а не при каждом нажатии клавиши.

v-model: –

<template>
  <VxInput v-model="value" lazy />
</template>

Autofocus

<template>
  <VxInput autofocus />
</template>

Loading

<template>
  <VxInput v-model="value" loading />
</template>

Formatter / Parser

Отображает форматированное значение, хранит сырое. Форматтер срабатывает при потере фокуса, парсер — при вводе.

Raw: 1234567 (number)

<script setup>
function formatter(v) { return Number(v).toLocaleString('en-US') }
function parser(v) { return v.replace(/,/g, '') }
</script>

<template>
  <VxInput v-model="value" :formatter="formatter" :parser="parser" />
</template>

Textarea

<template>
  <VxInput v-model="value" type="textarea" :rows="4" />
</template>

Autosize Textarea

<template>
  <VxInput type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" />
</template>

Number

С кнопками-степперами и поддержкой стрелок клавиатуры.

Basic

0

Min: 0, Max: 10, Step: 2

5

Precision: 2

1.5

<template>
  <VxInput v-model="value" type="number" />
  <VxInput v-model="value" type="number" :min="0" :max="10" :step="2" />
  <VxInput v-model="value" type="number" :step="0.25" :precision="2" />
</template>

Regex

Ограничивает ввод символами, соответствующими regex-паттерну. Несоответствующие символы удаляются в реальном времени.

Numbers only (/[0-9]/)

Letters only (/[a-zA-Z]/)

Alphanumeric (/[a-zA-Z0-9]/)

<template>
  <!-- Numbers only -->
  <VxInput v-model="value" :regex="/[0-9]/" />

  <!-- Letters only -->
  <VxInput v-model="value" :regex="/[a-zA-Z]/" />

  <!-- Alphanumeric -->
  <VxInput v-model="value" :regex="/[a-zA-Z0-9]/" />
</template>

Search

Встроенная иконка поиска. Эмитит @search при нажатии Enter.

<template>
  <VxInput type="search" placeholder="Search..." @search="onSearch" clearable />
</template>

Word Limit

0 / 50

<template>
  <VxInput :maxlength="50" show-word-limit />
</template>

Floating Label

При включённом floating-label плейсхолдер анимированно перемещается к верхней границе при фокусе или когда поле содержит значение.

Username

Email

Password

<template>
  <VxInput v-model="val" placeholder="Username" floating-label />
  <VxInput v-model="email" placeholder="Email" floating-label type="email" />
  <VxInput v-model="pass" placeholder="Password" floating-label type="password" />
</template>

Disabled & Readonly

<template>
  <VxInput disabled />
  <VxInput readonly />
</template>

Props

Prop	Type	Default	Description
modelValue	string | number	''	Значение (v-model)
placeholder	string	''	Плейсхолдер
type	'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'textarea'	'text'	Тип поля ввода
size	'sm' | 'default' | 'lg'	'default'	Размер
disabled	boolean	false	Отключить
readonly	boolean	false	Только для чтения
clearable	boolean	false	Кнопка очистки
debounce	number	0	Дебаунс обновления v-model (мс)
mask	string	''	Маска ввода (#=цифра, A=буква, *=любой)
unmaskedValue	string	—	Сырое значение без символов маски (v-model:unmasked-value)
trim	boolean	false	Убирать пробелы по краям при потере фокуса
lazy	boolean	false	Обновлять v-model только при потере фокуса
autofocus	boolean	false	Фокус при монтировании
loading	boolean	false	Показывать индикатор загрузки
formatter	(v: string) => string	—	Форматирование отображаемого значения (при потере фокуса)
parser	(v: string) => string	—	Парсинг значения перед эмитом
maxlength	number	—	Максимум символов
showWordLimit	boolean	false	Показывать счётчик символов
rows	number	3	Количество строк textarea
autosize	boolean | { minRows, maxRows }	false	Автоматическое увеличение textarea
min	number	—	Минимальное значение (тип number)
max	number	—	Максимальное значение (тип number)
step	number	1	Шаг изменения (тип number)
precision	number	—	Знаков после запятой (тип number)
regex	RegExp	—	Разрешать только символы, соответствующие regex
inputClass	string | string[] | Record	''	Кастомный класс обёртки
inputStyle	Record<string, string>	—	Кастомные стили обёртки
floatingLabel	boolean	false	Анимировать плейсхолдер к верхней границе при фокусе

Events

Event	Type	Description
update:modelValue	(v: string | number)	Значение изменилось
input	(v: string | number)	При каждом нажатии клавиши
change	(v: string | number)	При потере фокуса/Enter
focus	(e: FocusEvent)	Получен фокус
blur	(e: FocusEvent)	Потерян фокус
clear	()	Очищено
search	(v: string)	Нажат Enter (тип search)

Slots

Slot	Description
prefix	Перед полем ввода (автоматическая иконка поиска для type="search")
suffix	После поля ввода