Modal

Formalar, tafsilotlar va murakkab kontent uchun umumiy maqsadli overlay panel. Sudrash, fullscreen, drawer rejimi, maxsus animatsiyalar, ustma-ust modallar, focus trap, avtomatik yopilish, dasturiy API va boshqa koʻplab imkoniyatlarni qoʻllab-quvvatlaydi.

<script setup>
const show = ref(false)
</script>

<template>
  <button @click="show = true">Open Modal</button>
  <VxModal v-model="show" title="Basic Modal">
    <p>This is a basic modal.</p>
  </VxModal>
</template>

With Description

<template>
  <VxModal v-model="show" title="Edit Profile" description="Make changes here." />
</template>

Sizes

<template>
  <VxModal size="sm" />
  <VxModal size="md" />
  <VxModal size="lg" />
  <VxModal size="xl" />
  <VxModal size="full" />
</template>

Custom Width

width prop orqali istalgan kenglikni belgilang.

<template>
  <VxModal v-model="show" :width="666" title="Custom Width" />
  <VxModal v-model="show" width="80%" title="Percentage Width" />
</template>

Draggable

Modalni joyidan koʻchirish uchun uning sarlavhasidan ushlab sudrang.

<template>
  <VxModal v-model="show" title="Drag Me" draggable />
</template>

Fullscreen Toggle

Sarlavhadagi tugma foydalanuvchilarga modalni fullscreen rejimga va orqaga qaytarishga imkon beradi.

<template>
  <VxModal v-model="show" title="Expand Me" fullscreenable />
</template>

Before Close

Yopilishdan oldin ishga tushadigan asinxron himoya. Yopilishni toʻxtatish uchun false qaytaring.

<script setup>
// Sync — native browser confirm
function beforeClose() {
  return window.confirm('Discard changes?')
}

// Async — with useConfirm dialog
import { useConfirm } from 'veloxui'
const dialog = useConfirm()

async function beforeCloseAsync() {
  // resolves = allow close, rejects = block close
  await dialog.warning({
    title: 'Discard Changes?',
    confirmText: 'Discard',
    cancelText: 'Keep Editing',
  })
}
</script>

<template>
  <VxModal v-model="show" :before-close="beforeClose" title="Guard" />
</template>

Drawer Mode

Istalgan chetdan sirgʻalib chiqadi. drawer propda left, right, top yoki bottom qiymatlaridan foydalaning.

<template>
  <VxModal v-model="show" drawer="left" title="Left" />
  <VxModal v-model="show" drawer="right" title="Right" />
  <VxModal v-model="show" drawer="top" title="Top" />
  <VxModal v-model="show" drawer="bottom" title="Bottom" />
  <VxModal v-model="show" drawer="right" size="lg" title="Wide Drawer" />
</template>

Custom Transitions

Animatsiyani tanlang: zoom (standart), fade, slide-up, slide-down, flip.

<template>
  <VxModal transition="fade" />
  <VxModal transition="slide-up" />
  <VxModal transition="slide-down" />
  <VxModal transition="flip" />
</template>

Stacked Modals

Boshqa modallar ustiga modal oching. Har biriga avtomatik ravishda yuqoriroq z-index beriladi.

<template>
  <VxModal v-model="first" title="First">
    <template #footer>
      <button @click="second = true">Open Second</button>
    </template>
  </VxModal>
  <VxModal v-model="second" title="Second" />
</template>

Focus Trap

Standart holatda yoqilgan. Tab tugmasi foydalanish qulayligi uchun modal ichida aylanadi.

<template>
  <!-- Focus trap is enabled by default -->
  <VxModal v-model="show" title="Focus Trap">
    <input placeholder="Tab cycles here" />
  </VxModal>

  <!-- Disable it -->
  <VxModal v-model="show" :focus-trap="false" />
</template>

Auto Close

Belgilangan vaqtdan (ms) keyin avtomatik yopiladi.

<template>
  <VxModal v-model="show" :auto-close="3000" title="Closes in 3s" />
</template>

Destroy on Close

Standart holatda, modal yopilganda kontent yoʻq qilinadi (destroy-on-close). Kontentni saqlab qolish uchun (forma holati, scroll joylashuvi va h.k. saqlanadi) uni false qilib belgilang.

<template>
  <VxModal v-model="show" :destroy-on-close="false" title="Keep Alive" />
</template>

Persistent

Overlay bosish yoki Escape tugmasi orqali yopib boʻlmaydi. Silkinish animatsiyasini koʻrsatadi.

<template>
  <VxModal v-model="show" persistent title="Persistent" />
</template>

Position

Modalni viewportning istalgan burchagi yoki chetiga joylashtiring.

<template>
  <VxModal v-model="show" position="top-left" title="Top Left" />
  <VxModal v-model="show" position="top-center" title="Top Center" />
  <VxModal v-model="show" position="top-right" title="Top Right" />
  <VxModal v-model="show" position="center" title="Center (default)" />
  <VxModal v-model="show" position="bottom-left" title="Bottom Left" />
  <VxModal v-model="show" position="bottom-center" title="Bottom Center" />
  <VxModal v-model="show" position="bottom-right" title="Bottom Right" />
</template>

Centered vs Top

<template>
  <VxModal v-model="show" :centered="false" title="Top" />
</template>

Hide Overlay

<template>
  <VxModal v-model="show" hide-overlay />
</template>

Loading

<template>
  <VxModal v-model="show" loading title="Processing..." />
</template>

Scrollable Content

<template>
  <VxModal v-model="show" title="Terms" size="sm">
    <div v-for="i in 20" :key="i"><p>Long content...</p></div>
  </VxModal>
</template>

Custom Header & Footer

<template>
  <VxModal v-model="show">
    <template #header>Custom header</template>
    <template #footer>
      <button @click="show = false">Cancel</button>
      <button @click="show = false">Confirm</button>
    </template>
  </VxModal>
</template>

Programmatic API

Template markup yozmasdan JavaScript orqali modallarni ochish uchun useModal() composable’idan foydalaning.

<script setup>
import { useModal } from 'veloxui'

const { open } = useModal()

function showModal() {
  const instance = open({
    title: 'Hello',
    content: 'Created from JavaScript!',
    size: 'sm',
  })

  // Close programmatically
  // instance.close()
}

function showDrawer() {
  open({
    title: 'Drawer',
    drawer: 'right',
    content: 'A programmatic drawer.',
    autoClose: 3000,
  })
}
</script>

Teleport Target

Modalni body oʻrniga maxsus konteynerga joylashtiring.

<template>
  <VxModal v-model="show" teleport-to="#my-container" />
</template>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Koʻrsatish/yashirish (v-model)
title	string	''	Sarlavha matni
description	string	''	Sarlavha ostidagi qoʻshimcha matn
size	'sm' | 'md' | 'lg' | 'xl' | 'full'	'md'	Modal kengligi
width	string | number	—	Maxsus kenglik (size’ni almashtiradi)
closable	boolean	true	Yopish tugmasini koʻrsatish
closeOnOverlay	boolean	true	Overlay bosilganda yopilish
closeOnEsc	boolean	true	Escape bosilganda yopilish
centered	boolean	true	Vertikal markazlash
persistent	boolean	false	Yopish oʻrniga silkinish
hideOverlay	boolean	false	Shaffof fon
loading	boolean	false	Yuklash overlay’ini koʻrsatish
draggable	boolean	false	Sarlavhadan sudrash
fullscreenable	boolean	false	Fullscreen tugmasini koʻrsatish
beforeClose	() => boolean | Promise<boolean>	—	Yopilishdan oldingi himoya
drawer	'left' | 'right' | 'top' | 'bottom'	—	Drawer rejimi
transition	'zoom' | 'fade' | 'slide-up' | 'slide-down' | 'flip'	—	Animatsiya
focusTrap	boolean	true	Tab modal ichida qoladi
autoClose	number	0	ms’dan keyin avtomatik yopilish
destroyOnClose	boolean	true	Yopilganda kontentni yoʻq qilish
teleportTo	string	'body'	Teleport selektor nishoni
position	'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'	'center'	Modal joylashuvi

Events

Event	Description
update:modelValue	Qiymat oʻzgardi
close	Yopish ishga tushirildi
opened	Kirish animatsiyasi tugadi
closed	Chiqish animatsiyasi tugadi

Slots

Slot	Description
default	Asosiy kontent
header	Maxsus sarlavha
footer	Footer amallari (standart: Yopish tugmasi)

Exposed Methods

Method	Description
close()	Modalni dasturiy tarzda yopish
toggleFullscreen()	Fullscreen holatini almashtirish