Alert Dialog ​

<script lang="ts" setup>
import {
  AlertDialog,
  AlertDialogActionButton,
  AlertDialogCancelButton,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  Button,
} from '@returnless/focus-ui';

const alertDialogOpen = ref(false);
</script>

<template>
  <Button v-on:click="alertDialogOpen = true">
    Open Dialog
  </Button>
  
  <AlertDialog :open="alertDialogOpen" v-on:cancel="alertDialogOpen = false">
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancelButton>Cancel</AlertDialogCancelButton>
        <AlertDialogActionButton>Continue</AlertDialogActionButton>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>