@hz-libs/bpe-ui-dialog

Dialog primitive for Vue 3.

Docs

Install

pnpm add @hz-libs/bpe-ui-dialog

The app must already depend on Vue ^3.5.0. Component CSS is included in the JavaScript import.

Use

v-model:open shows the dialog. It closes from a control inside the slot, the backdrop, or Escape.

<script setup>
import { ref } from 'vue'
import { Dialog } from '@hz-libs/bpe-ui-dialog'

const open = ref(false)
</script>

<template>
  <button type="button" @click="open = true">Open dialog</button>
  <Dialog v-model:open="open">
    <h3>Dialog</h3>
    <p>Close this from the button, the backdrop, or Escape.</p>
    <button type="button" @click="open = false">Close</button>
  </Dialog>
</template>

Set :close-on-backdrop="false" and :close-on-escape="false" when the dialog should close only from your own control.

Exports

Dialog, DIALOG_ANIMATED_CLASS, disableDialogAnimation, restoreDialogAnimation.