Dialog

#Basic usage

dialog/basic.vue

<script setup lang="ts">
import { Dialog } from "@bysages/vue";
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Delete item</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Delete item</Dialog.Title>
          <Dialog.Description>This action cannot be undone.</Dialog.Description>
          <p>Removed items stay recoverable for 30 days.</p>
          <Dialog.CloseTrigger>×</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

#Props

#Backdrop

A styled part — no props of its own; it takes the anatomy's shared styling.

#CloseTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Description

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`aria-label`	`string`		Human readable label for the dialog, in event the dialog title is not rendered
`closeOnEscape`	`boolean`	`true`	Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`boolean`	`true`	Whether to close the dialog when the outside is clicked
`defaultOpen`	`boolean`	`false`	The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`finalFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the dialog is closed
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>`		The ids of the elements in the dialog. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the dialog is opened
`modal`	`boolean`	`true`	Whether to prevent pointer interaction outside the element and hide all content below it
`open`	`boolean`		The controlled open state of the dialog
`persistentElements`	`(() => Element \| null)[]`		Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`preventScroll`	`boolean`	`true`	Whether to prevent scrolling behind the dialog when it's opened
`restoreFocus`	`boolean`		Whether to restore focus to the element that had focus before the dialog was opened
`role`	`'dialog' \| 'alertdialog'`	`"dialog"`	The dialog's role
`trapFocus`	`boolean`	`true`	Whether to trap focus inside the dialog when it's opened
`triggerValue`	`string \| null`		The value of the trigger that currently open the dialog

#Title

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

Prop	Type	Default	Description
`value`	`string`		The value that identifies this specific trigger