diff --git a/README.md b/README.md index d1ab7a2..3eacda7 100644 --- a/README.md +++ b/README.md @@ -153,9 +153,12 @@ let ok = await confirm("Are you sure ?"); ### Closing dialogs Your dialog must define a `returnValue` function. You may do so either in the setup function using Composition API or as -a method using Options API. To close the dialog, call `closeDialog()`. When you do so, the promise will resolve to the +a method using Options API. To close the dialog, call `resolveDialog()`. When you do so, the promise will resolve to the result of the `returnValue` function. You may also resolve the promise to something else (for example null) by passing a -value to `closeDialog()`. +value to `resolveDialog()`. + +Alertnatively, you can call `rejectDialog()`. This will throw a `DismissedDialog` error (you can also pass your own error as an argument), +meaning your promise won't be resolved, but rejected. As a result, the dialog will be closed as well. ### Typescript @@ -178,8 +181,8 @@ for the centered div. It has one slot which is the content of the centered div. The OkCancelBox.vue component is a Box that serves as base for all dialogs that include OK and CANCEL buttons. It has two slots : `header` and `body`. Body is where the controls of the dialog reside. It has a `valid` prop. If `valid` is false, the OK button is disabled. The whole thing is included into a `form` tag so that hitting enter when a control has -focus triggers a click on the OK button. When OK is clicked, `closeDialog` is called. -When CANCEL is clicked, `closeDialog` is called with a null return value. +focus triggers a click on the OK button. When OK is clicked, `resolveDialog` is called. +When CANCEL is clicked, `resolveDialog` is called with a null return value. ### ConfirmDialog.vue @@ -189,4 +192,4 @@ resolves to true if the user clicks OK and to null if the use clicks CANCEL. ### TextDialog.vue A TextBox is an OkCancelBox with a text field and a `returnValue` function that returns the content of the text field. -If the text field is empty, the valid prop is set to false on OkCancelBox. \ No newline at end of file +If the text field is empty, the valid prop is set to false on OkCancelBox. diff --git a/lib/index.ts b/lib/index.ts index 7c6f62d..a708589 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -1,9 +1,11 @@ import DialogWrapper from "./components/DialogWrapper.vue" -import {openDialog, closeDialog, PromiseDialog} from "./ts/lib"; +import {openDialog, closeDialog, resolveDialog, rejectDialog, PromiseDialog} from "./ts/lib"; export { DialogWrapper, PromiseDialog, openDialog, - closeDialog + closeDialog, + resolveDialog, + rejectDialog } diff --git a/lib/ts/lib.ts b/lib/ts/lib.ts index b4a51bf..c70a4b4 100644 --- a/lib/ts/lib.ts +++ b/lib/ts/lib.ts @@ -7,15 +7,18 @@ export interface DialogInstance { wrapper: string; props: any; resolve: (data: any) => void; + reject: (err: Error) => void; } +export class DismissedDialog extends Error {} + export const dialogRef = shallowRef(); /** * Closes the currently opened dialog, resolving the promise with the return value of the dialog, or with the given * data if any. */ -export function closeDialog(data?: any) { +export function resolveDialog(data?: any): void { if (data === undefined) { data = dialogRef.value.comp.returnValue(); } @@ -23,6 +26,27 @@ export function closeDialog(data?: any) { dialogRef.value = null; } +/** + * Closes the currently opened dialog, rejecting the promise with a DismissedDialog error, or with the given + * error if any. + */ +export function rejectDialog(err?: Error): void { + dialogRef.value.reject(err ?? new DismissedDialog('Dialog was dismissed.')); + dialogRef.value = null; +} + +/** + * This is kept for backward compatility. Call either `resolveDialog()` or `rejectDialog()` instead. + * @deprecated + */ +export function closeDialog(data?: any): void { + if (data instanceof Error) { + rejectDialog(data); + } else { + resolveDialog(data); + } +} + /** * Extracts the type of props from a component definition. */ @@ -55,12 +79,13 @@ type ReturnType> = BindingRet * @return A promise that resolves when the dialog is closed */ export function openDialog>(dialog: C, props?: PropsType, wrapper: string = 'default'): Promise> { - return new Promise(resolve => { + return new Promise((resolve, reject) => { dialogRef.value = { dialog, props, wrapper, - resolve + resolve, + reject } }); }