Dialogs

useOokoDialog opens a nested component in the application poppable host.

import { useOokoDialog } from "ooko-ui/dialog";

const dialog = useOokoDialog();
const handle = dialog.open({ title: "Confirm", component: ConfirmDelete });

handle.close();

Render one <OPoppableHost /> near the application root. close() restores the preceding dialog or drawer; close({ flush: true }) and flush() discard the suspended queue. The controller is isolated to its Vue application and does not access browser APIs during server rendering.

API reference

Returns the application-scoped controller used to open dialogs programmatically.

function useOokoDialog(): OokoDialogController

Parameters

Parameter	Type	Required	Default	Description
none	none	none	none	none

Returns

Member	Type	Description
open	(options: OokoDialogOptions) => OokoPoppableHandle	Opens a dialog and returns a handle for closing it.
flush	() => void	Closes the active dialog or drawer and clears suspended entries.

Related types

Type	Definition
OokoDialogController	interface OokoDialogController { /** Opens a dialog and returns a handle for closing it. */ open: (options: OokoDialogOptions) => OokoPoppableHandle; /** Closes the active dialog or drawer and clears suspended entries. */ flush: () => void; }
OokoDialogOptions	type OokoDialogOptions = OokoPoppableOptions;
OokoPoppableCloseOptions	interface OokoPoppableCloseOptions { /** Removes every suspended poppable instead of restoring the preceding one. */ flush?: boolean; }
OokoPoppableHandle	interface OokoPoppableHandle { /** Stable identifier of the opened poppable. */ id: OokoPoppableId; /** Closes this poppable. By default, the preceding suspended poppable is restored. */ close: (options?: OokoPoppableCloseOptions) => void; }