Chat Input

Avtomatik o'lchamini o'zgartiruvchi textarea, amallar paneli, yuborish tugmasi va ixtiyoriy biriktirish/emoji/ovoz amallari bilan Telegram uslubidagi suhbat pastki paneli.

Basic

Xabarni yozing va yuborish uchun Enter ni bosing (yangi qator uchun Shift+Enter). Amallar panelini ochish uchun qog'oz qisqichini bosing.

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

<VxChatInput v-model="msg" @send="handleSend" />

Actions Panel

Telegram uslubidagi amallar panelini ko'rsatish uchun qog'oz qisqichi belgisini bosing. Belgi faol bo'lganda 45 daraja aylanadi. Standart amallar: Photo, File, Location, Contact, Poll.

<script setup>
function onAction(key, item) {
  console.log('Action:', key, item)
}
</script>

<VxChatInput @action="onAction" />

Custom Actions

O'zingizning amal elementlari massivingizni uzating.

<VxChatInput
  :actions="[
    { key: 'camera', label: 'Camera', color: '#E91E63' },
    { key: 'gif', label: 'GIF', color: '#FF9800' },
    { key: 'sticker', label: 'Sticker', color: '#9C27B0' },
  ]"
  @action="onAction"
/>

Disable Actions Panel

Qog'oz qisqichi tugmasi panelni ochish o'rniga attach event ni chiqarishi uchun :actions="false" ni uzating.

<VxChatInput :actions="false" @attach="openFilePicker" />

Variants

Uchta vizual uslub: default, outline va ghost.

Default

Outline

Ghost

<VxChatInput variant="default" />
<VxChatInput variant="outline" />
<VxChatInput variant="ghost" />

Voice Button

show-voice bilan kiritish bo'sh bo'lganda mikrofon tugmasini ko'rsating. Matn kiritilganda mikrofon aylantirish animatsiyasi bilan yuborish tugmasiga aylanadi.

<VxChatInput show-voice @voice="startRecording" />

Reply Preview

Kiritish ustida javob oldindan ko'rinishini ko'rsatish uchun reply-to obyektini uzating. Animatsiya bilan sirpanib chiqadi/kiradi.

AliceHey, did you finish the design?

<script setup>
import { ref } from 'vue'

const replyTo = ref({ name: 'Alice', content: 'Hey, did you finish the design?' })
</script>

<VxChatInput
  :reply-to="replyTo"
  @cancel-reply="replyTo = null"
/>

Disabled

<VxChatInput disabled />

Custom Actions (Slots)

Standart amal tugmalarini butunlay almashtirish uchun prepend va append slotlaridan foydalaning.

<VxChatInput>
  <template #prepend>
    <button @click="openCamera">📷</button>
  </template>
  <template #append>
    <button @click="openGif">GIF</button>
  </template>
</VxChatInput>

API

Props

Prop	Type	Default	Description
model-value	string	''	v-model matn qiymati
placeholder	string	'Type a message...'	Placeholder matni
variant	'default' | 'outline' | 'ghost'	'default'	Vizual uslub
disabled	boolean	false	Kiritishni o'chirish
show-attach	boolean	true	Biriktirish/amallar tugmasini ko'rsatish
show-emoji	boolean	true	Emoji tugmasini ko'rsatish
show-voice	boolean	false	Ovoz/mikrofon tugmasini ko'rsatish (kiritish bo'sh bo'lganda)
max-rows	number	5	Avtomatik o'sishning maksimal qatorlari
reply-to	{ name?: string; content?: string } | null	null	Javob oldindan ko'rinishi
actions	ChatInputAction[] | false	default 5 items	Amallar paneli elementlari. Panelni o'chirish uchun false ni uzating

Events

Event	Payload	Description
update:modelValue	string	v-model yangilanishi
send	string	Enter yoki yuborish tugmasi bosilganda chiqariladi (kesilgan matn)
attach	—	Biriktirish tugmasi bosildi (faqat actions false bo'lganda)
emoji	—	Emoji tugmasi bosildi
voice	—	Ovoz tugmasi bosildi
cancel-reply	—	Javobni yopish tugmasi bosildi
action	key, item	Amallar paneli elementi bosildi

Slots

Slot	Description
prepend	Chap amal tugmalarini almashtiring (standart: biriktirish)
append	O'ng amal tugmalarini almashtiring (standart: emoji)

Exposed

Method	Description
focus()	Textarea ni dasturiy ravishda fokuslash

ChatInputAction

interface ChatInputAction {
  key: string      // Noyob amal kaliti
  label: string    // Ko'rsatiladigan yorliq
  icon?: string    // Moslashtirilgan belgi (ixtiyoriy)
  color?: string   // Aylana fon rangi
}