Input

shadcn/ui uslubidagi matn inputi. Mask, debounce, formatter, textarea, raqamli stepper, qidiruv va boshqalarni qo'llab-quvvatlaydi.

<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

# = raqam, A = harf, * = istalgan belgi. Ajratgichlar avtomatik qo'shiladi.

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

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

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

Mask with Unmasked Value

v-model mask qilingan qiymatni qaytaradi (masalan, +1 (234) 567-89-01). Faqat xom raqamlarni olish uchun v-model:unmasked-value dan foydalaning.

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 yangilanishini kechiktiradi. @input baribir darhol ishga tushadi.

Debounced: –

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

Trim

Blur paytida bo'sh joylarni avtomatik tozalaydi.

""

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

Lazy

v-model'ni har bir tugma bosilishida emas, balki blur paytida yangilaydi.

v-model: –

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

Autofocus

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

Loading

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

Formatter / Parser

Formatlangan qiymatni ko'rsatish, xom qiymatni saqlash. Formatter blur paytida, parser input paytida ishga tushadi.

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

Stepper tugmalari va strelka tugmalari qo'llab-quvvatlashi bilan.

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

Input'ni regex shabloniga mos keladigan belgilar bilan cheklang. Mos kelmaydigan belgilar real vaqtda olib tashlanadi.

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

O'rnatilgan qidiruv ikoni. Enter bosilganda @search hodisasini chiqaradi.

<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 yoqilganda, placeholder fokus paytida yoki input qiymatga ega bo'lganda yuqori chegaraga animatsiya bilan ko'tariladi.

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	''	Qiymat (v-model)
placeholder	string	''	Placeholder
type	'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'textarea'	'text'	Input turi
size	'sm' | 'default' | 'lg'	'default'	O'lchami
disabled	boolean	false	O'chirish
readonly	boolean	false	Faqat o'qish uchun
clearable	boolean	false	Tozalash tugmasi
debounce	number	0	v-model yangilanishini kechiktirish (ms)
mask	string	''	Input mask (#=raqam, A=harf, *=istalgan)
unmaskedValue	string	—	Mask belgilaridan tashqari xom qiymat (v-model:unmasked-value)
trim	boolean	false	Blur paytida bo'sh joylarni tozalash
lazy	boolean	false	v-model'ni faqat blur paytida yangilash
autofocus	boolean	false	Mount paytida fokus
loading	boolean	false	Yuklanish spinnerini ko'rsatish
formatter	(v: string) => string	—	Ko'rinadigan qiymatni formatlash (blur paytida)
parser	(v: string) => string	—	Emit oldidan qiymatni parse qilish
maxlength	number	—	Maksimal belgilar
showWordLimit	boolean	false	Belgilar sonini ko'rsatish
rows	number	3	Textarea qatorlari
autosize	boolean | { minRows, maxRows }	false	Textarea'ning avtomatik kengayishi
min	number	—	Minimal qiymat (number turi)
max	number	—	Maksimal qiymat (number turi)
step	number	1	Qadam o'sishi (number turi)
precision	number	—	O'nlik belgilari (number turi)
regex	RegExp	—	Faqat regex'ga mos keluvchi belgilarga ruxsat berish
inputClass	string | string[] | Record	''	O'zgartirilgan wrapper klassi
inputStyle	Record<string, string>	—	O'zgartirilgan wrapper uslubi
floatingLabel	boolean	false	Fokus paytida placeholder'ni yuqori chegaraga animatsiya qilish

Events

Event	Type	Description
update:modelValue	(v: string | number)	Qiymat o'zgardi
input	(v: string | number)	Har bir tugma bosilishida
change	(v: string | number)	Blur/Enter paytida
focus	(e: FocusEvent)	Fokuslandi
blur	(e: FocusEvent)	Fokusdan chiqdi
clear	()	Tozalandi
search	(v: string)	Enter bosildi (search turi)

Slots

Slot	Description
prefix	Input'dan oldin (type="search" uchun avtomatik qidiruv ikoni)
suffix	Input'dan keyin