Dialogs

Open modal dialogs with props and handle close. Dialogs stack independently of the page navigation, each with its own lifecycle and transitions.

Open, close, and pass props

const { openDialog, closeDialog, closeAllDialogs } = useMicroRouter();

// Open with props
openDialog('confirm', {
  title: 'Delete item?',
  onConfirm: () => handleDelete(),
});

// Close specific dialog
closeDialog('confirm');

// From the dialog's own close button — reported as tracker closeReason
closeDialog('confirm', 'close_button');

// Close all open dialogs
closeAllDialogs();

Dialog options

registerDialog({
  path: 'settings-modal',
  component: SettingsModal,
  activated: false,
  position: 'right',          // 'standard' | 'top' | 'right' | 'bottom' | 'left'
  transition: 'slide',        // 'fade' | 'slide' | 'scale'
  transitionDuration: 400,
  fullscreen: false,
  persistent: true,           // prevent close on backdrop click / Escape
  seamless: true,             // transparent background, no shadow
  meta: { screen: 'settings' }, // free-form — handed to tracker.onEvent and getRegistry()
});

Reading dialog props

Inside a dialog component, read props with useMicroState() — same bridge as pages:

<!-- ConfirmDialog.vue -->
<script setup lang="ts">
export interface Attrs {
  title?: string;
  message?: string;
  onConfirm?: () => void;
}
const { title, message, onConfirm } = useMicroState<Attrs>({
  title: 'Confirm',
  message: 'Are you sure?',
});
</script>

See GUI Controls & Lifecycle for dialog lifecycle hooks (onDialogEnter / onDialogLeave).