Dialog | Dialog

`Dialog`#

Description#

Root dialog component. Renders nothing itself: controls open/closed state via v-model:open and provides the context used by child components.

Props#

open (boolean) — Whether the dialog is open. Default: false.

Emits#

update:open — Emitted with false when the dialog closes.

Usage#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, ActionButton } from '@vasakgroup/vue-libvasak'

const open = ref(false)
</script>

<template>
  <ActionButton label="Open" @click="open = true" />

  <Dialog v-model:open="open">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Confirm action</DialogTitle>
      </DialogHeader>
      <p>Are you sure you want to continue?</p>
      <DialogFooter>
        <ActionButton label="Cancel" variant="secondary" @click="open = false" />
        <ActionButton label="Confirm" @click="open = false" />
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>