diff --git a/src/components/dialogservice/DialogService.d.ts b/src/components/dialogservice/DialogService.d.ts index c63008ae9..afb0bbeaf 100644 --- a/src/components/dialogservice/DialogService.d.ts +++ b/src/components/dialogservice/DialogService.d.ts @@ -19,10 +19,10 @@ export interface DialogInstance { */ data: any; /** - * Hides the dialog. + * Closes the dialog. * @param {*} params - Parameters sent by the user to the root instance */ - hide: (params?: any) => void; + close: (params?: any) => void; } export interface DialogServiceMethods { diff --git a/src/components/dialogservice/DialogService.js b/src/components/dialogservice/DialogService.js index d90477e54..08e9d5d3e 100644 --- a/src/components/dialogservice/DialogService.js +++ b/src/components/dialogservice/DialogService.js @@ -10,7 +10,7 @@ export default { content: content && markRaw(content), options: options || {}, data: options && options.data, - hide: (params) => { + close: (params) => { DynamicDialogEventBus.emit('close', { instance, params }); } } diff --git a/src/components/dynamicdialog/DynamicDialog.vue b/src/components/dynamicdialog/DynamicDialog.vue index 28852d395..a92b35d92 100644 --- a/src/components/dynamicdialog/DynamicDialog.vue +++ b/src/components/dynamicdialog/DynamicDialog.vue @@ -43,7 +43,7 @@ export default { if (currentInstance) { currentInstance.visible = false; - currentInstance.options.onHide && currentInstance.options.onHide({ data: params, type: 'config-close' }); + currentInstance.options.onClose && currentInstance.options.onClose({ data: params, type: 'config-close' }); this.currentInstance = currentInstance; } @@ -58,7 +58,7 @@ export default { }, methods: { onDialogHide(instance) { - !this.currentInstance && instance.options.onHide && instance.options.onHide({ type: 'dialog-close' }); + !this.currentInstance && instance.options.onClose && instance.options.onClose({ type: 'dialog-close' }); }, onDialogAfterHide() { this.currentInstance && (delete this.currentInstance); diff --git a/src/views/dynamicdialog/DynamicDialogDemo.vue b/src/views/dynamicdialog/DynamicDialogDemo.vue index 5f1be3584..5d648e167 100644 --- a/src/views/dynamicdialog/DynamicDialogDemo.vue +++ b/src/views/dynamicdialog/DynamicDialogDemo.vue @@ -44,12 +44,12 @@ export default { templates: { footer: () => { return [ - h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.hide({ buttonType: 'No' }), class: "p-button-text" }), - h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide({ buttonType: 'Yes' }), autofocus: true}) + h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close({ buttonType: 'No' }), class: "p-button-text" }), + h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true}) ] } }, - onHide: (options) => { + onClose: (options) => { const data = options.data; if (data) { const buttonType = data.buttonType; diff --git a/src/views/dynamicdialog/DynamicDialogDoc.vue b/src/views/dynamicdialog/DynamicDialogDoc.vue index 15cab651f..8fdf67f7b 100644 --- a/src/views/dynamicdialog/DynamicDialogDoc.vue +++ b/src/views/dynamicdialog/DynamicDialogDoc.vue @@ -83,7 +83,7 @@ export default {
The hide function of the dialogRef is used to hide a Dialog. The dialogRef is injected to the component that is loaded by the dialog.
+The close function of the dialogRef is used to hide a Dialog. The dialogRef is injected to the component that is loaded by the dialog.
@@ -91,7 +91,7 @@ export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
- this.dialogRef.hide();
+ this.dialogRef.close();
}
}
}
@@ -106,7 +106,7 @@ export default {
methods:{
closeDialog() {
const dialogRef = inject('dialogRef');
- dialogRef.hide();
+ dialogRef.close();
}
}
}
@@ -135,10 +135,10 @@ export default {
- Similarly when hiding a Dialog, any parameter passed to the hide function is received from the onHide callback defined by the open function at the caller.
+Similarly when hiding a Dialog, any parameter passed to the close function is received from the onClose callback defined by the open function at the caller.
this.$dialog.open(ProductListDemo, {
- onHide(options) {
+ onClose(options) {
const callbackParams = options.data; //{id: 12}
}
);
@@ -150,7 +150,7 @@ export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
- this.dialogRef.hide({id: 12});
+ this.dialogRef.close({id: 12});
}
}
}
@@ -183,12 +183,12 @@ export default {
templates: {
footer: () => {
return [
- h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.hide(), class: "p-button-text" }),
- h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide(), autofocus: true})
+ h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close(), class: "p-button-text" }),
+ h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close(), autofocus: true})
]
}
},
- onHide: (options) => {
+ onClose: (options) => {
const data = options.data;
if (data) {
this.$toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
@@ -201,6 +201,8 @@ export default {
DialogService is the main entry point to open a dialog and load any content within.
+content: The component to load options: Configuration of the Dialog |
- Creates a dialog dynamically with the given options and loads the component. See the Dialog Options section below for + | Creates a dialog dynamically with the given options and loads the component. See the Dialog Open Configuration API section below for the avaiable properties. |
Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.
Templates of a dialog including, header and footer. | ||||
onHide | +onClose | function | null | Function callback to invoke when dialog is closed. | @@ -263,7 +266,46 @@ export default {
Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.
+Name | +Type | +Default | +Description | +
---|---|---|---|
content | +object | +null | +Loaded content of a dialog. | +
options | +object | +null | +Options used to open a dialog. | +
data | +object | +null | +Data passed to the dialog. | +
close | +function | +null | +Function to close a dialog. | +