Modal Dialog Component

The Modal Dialog component provides a powerful alternative to standard Vuetify dialogs with additional features like dialog stacking, Promise-based API, and integration with DynamicForms.

Basic Usage

A message dialog, a yes/no confirmation, a validated form dialog, and sized dialogs, all driven from code via the modal service. Requires a single <modal-view /> mounted in your app root - see Installation.

Modal Dialog Examples

The modal system provides several types of dialogs that can be triggered programmatically:

Message Dialog

Simple dialog with information message and a close button.

Confirmation Dialog

Dialog with Yes/No options for confirmation.

Form Dialog

Dialog with a form including validation.

Dialog Sizes

Dialogs with different sizes (small, medium, large, x-large).

Features

• One dialog at a time - a nested modal.* call suspends the dialog that opened it (kept open but hidden) and shows the new one on top; the suspended dialog reappears once the new one closes.
• Message dialogs - modal.message('Title', 'Text') shows an info dialog with a single close action. The demo's message also shows Markdown content (via MdString) with a custom CSS class attached through RenderableValue.
• Confirmations - modal.yesNo('Title', 'Text') shows yes / no actions and resolves to whichever was clicked.
• Form dialogs - pass a @dynamicforms/vue-forms Group (with validation) as options.form; its Action fields (e.g. submit, cancel) become the dialog's buttons - the dialog adds its own close only where none of them is drawn - and the returned promise resolves to whichever one was clicked. An action of either class is drawn: the @dynamicforms/vuetify-inputs Action adds the responsive render options, not the ability to be drawn. Each Field is laid out as the component it names in field.extra.component
  • a <df-input> where it names none - carrying the field's own label, and a nested Group or List member is not laid out at all - see <modal-view>.
• Custom components - modal.custom('Title', componentName, componentProps) renders any registered component as the dialog body instead of a message/form.
• Sizing - options.size picks DialogSize.SMALL / MEDIUM / LARGE / X_LARGE, each of which goes fullscreen below its own breakpoint. The default sizes itself to its content.

Full method signatures, ModalOptions, and DialogSize are documented in the modal service API reference.

See also

• Template Dialog - declaring a dialog directly in an SFC template with <df-modal>, instead of opening it from code.
• API Reference - full prop/method/option tables for the modal service, <df-modal>, <modal-view> and DialogSize.