DynamicForms Vuetify Modal Form KitModal dialogs and programmatic form layouts for Vue 3 + Vuetify 3

Dialogs opened from code, one on screen at a time, with keyboard shortcuts; form layouts defined in code

Dialogs from code or from a template
await modal.message() opens a dialog and resolves with the name of the action that closed it. The df-modal component declares a dialog in a template.
One dialog on screen
Dialogs are kept on a stack. Opening a second dialog hides the first without closing it; the first is shown again when the second closes.
Form layouts in code
FormBuilder defines responsive Vuetify grid layouts (rows → columns → components) in TypeScript.
Keyboard shortcuts
Enter confirms and Esc cancels the active dialog.

Introduction

@dynamicforms/vuetify-modal-form-kit is a Vue 3 + Vuetify 3 library for dialogs and form layouts:

Dialogs from code or from a template — await modal.message() and await modal.yesNo() open a dialog and resolve with the name of the action that closed it. <df-modal> declares a dialog in a template.
One dialog on screen — dialogs are kept on a stack. Opening a second dialog hides the first without closing it; the first is shown again when the second closes. The stack is module state: a page has one, shared by every Vue app on it. <modal-view> draws it and is mounted once; a second mounted <modal-view> warns on the console and renders nothing.
Form layouts in code — FormBuilder defines responsive Vuetify grid layouts in TypeScript.
Keyboard shortcuts — <Enter> confirms and <Esc> cancels the active dialog. While an overlay above the dialog is open, such as a select menu or a date picker, the key goes to that overlay.