gitart-manage-vue-dialog

The dialog utilities allow you to manage dialogs consistently without putting the components in the template. Or even launch dialogs from a store.

Works with any dialog component. The component should have modelValue prop that is used to open and close the dialog.

You can import all these properties from the gitart-manage-vue-dialog module.

• gitartDialogInjectionKey - vue injection key for the dialog controller
• gitartDialogPlugin - vue plugin. Usage below
• GDialogSpawn - component to use with plugin. Usage below
• IGDialog - read the codebase for more information
• IGDialogItem - read the codebase for more information
• useDialogConfirm - read the codebase for more information
• useDialogReturnData - read the codebase for more information
• useGDialog - helper to use the dialog controller. Usage below

Installation

App.vue

1import { GDialogSpawn } from 'gitart-manage-vue-dialog'

1<GDialogSpawn />

main.ts

1import { gitartDialogPlugin } from 'gitart-manage-vue-dialog'
2
3app.use(gitartDialogPlugin)

Usage

You can receive the dialog controller by injection or by using the useGDialog function.

1  import { gitartDialogInjectionKey } from 'gitart-manage-vue-dialog'
2
3  const $dialog = inject(gitartDialogInjectionKey)!
4
5  const openDialog = () => {
6    $dialog.addDialog({
7      component: MyDialog,
8      props: {
9        title: 'My dialog',
10      },
11    })
12  }

1  import { useGDialog } from 'gitart-manage-vue-dialog'
2
3  const $dialog = useGDialog()
4
5  const openDialog = () => {
6    $dialog.addDialog({
7      component: MyDialog,
8      props: {
9        title: 'My dialog',
10      },
11    })
12  }

$dialog has the following methods and properties:

• addDialog - add a dialog to the queue
• dialogs - list of dialogs
• removeDialog - remove a dialog from the queue