Modal - Vue

Modal

Impor

import { Modal } from '@idds/vue';

Contoh Penggunaan

Contoh 1

Contoh 2

Global Provider Integration

Confirmation Provider Setup

ConfirmationProvider memungkinkan Anda memanggil modal konfirmasi secara imperatif menggunakan promise, tanpa perlu me-manage state isOpen atau render modal secara manual di setiap komponen.

<template>
  <ConfirmationProvider>
    <router-view />
  </ConfirmationProvider>
</template>

<script setup lang="ts">
import { ConfirmationProvider } from '@idds/vue';
</script>

Penggunaan (useConfirmation Hook)

Gunakan hook useConfirmation untuk menampilkan modal. Fungsi confirm() mengembalikan Promise yang akan resolve ke true (dikonfirmasi) atau false (dibatalkan).

<script setup lang="ts">
import { useConfirmation, Button } from '@idds/vue';

const { confirm } = useConfirmation();

const handleDelete = async () => {
  const isConfirmed = await confirm({
    title: 'Hapus Data?',
    message: 'Apakah Anda yakin ingin menghapus data ini?',
    confirmText: 'Hapus',
    cancelText: 'Batal',
    confirmClassName: 'bg-red-600 hover:bg-red-700',
  });

  if (isConfirmed) {
    console.log('User confirmed deletion');
  }
};
</script>

<template>
  <Button @click="handleDelete" variant="error">Hapus Item</Button>
</template>

Props

Name	Type	Default	Required	Description
`modelValue?`	`boolean`	`false`	No	Value yang dikontrol (v-model) - apakah modal terbuka.
`title?`	`string`	—	No	Judul modal (atau gunakan slot title).
`description?`	`string`	—	No	Deskripsi modal (opsional).
`size?`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	No	Ukuran modal.
`variant?`	`'default' \| 'centered' \| 'fullscreen'`	`'default'`	No	Variant modal.
`showCloseButton?`	`boolean`	`true`	No	Apakah tombol close ditampilkan.
`showHeader?`	`boolean`	`true`	No	Apakah header ditampilkan.
`showFooter?`	`boolean`	`false`	No	Apakah footer ditampilkan (gunakan slot footer untuk konten).
`closeLabel?`	`string`	`'Close modal'`	No	Label untuk tombol close (accessibility).
`closeOnBackdrop?`	`boolean`	`true`	No	Apakah modal bisa ditutup dengan klik backdrop.
`closeOnEscape?`	`boolean`	`true`	No	Apakah modal bisa ditutup dengan tombol Escape.
`persistent?`	`boolean`	`false`	No	Jika true, modal tidak bisa ditutup (harus ditutup secara programmatic).
`paddingBody?`	`string`	`'16px 24px'`	No	Custom padding untuk body modal.