component
Modal
Nuxt UI's UModal with a colored top edge.
ZModal is UModal with a 3px top edge in its color, Zoo UI's danger dialog. Focus trapping, Escape and focus return are Nuxt UI's, untouched.
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<UButton color="error" variant="outline" @click="open = true">Delete workspace</UButton>
<ZModal v-model:open="open" color="error" title="Delete workspace?" description="This cannot be undone.">
<template #body>
<p class="text-sm text-muted">Every service, token and log in this workspace is removed.</p>
</template>
<template #footer>
<div class="flex justify-end gap-2 w-full">
<UButton color="neutral" variant="ghost" @click="open = false">Cancel</UButton>
<UButton color="error" @click="open = false">Delete</UButton>
</div>
</template>
</ZModal>
</template>The dialog portals to <body>, so with color="accent" it carries the data-accent of the section it was opened from.
API
Everything else is UModal's
Only the props below are ZModal's own. Every other prop,
v-model, event and slot passes straight through to Nuxt UI's UModal. Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | "accent" | — | — |
| ui | Record<string, any> | — | — |