From 86641d55cf7723803563e882a39a31c84afee3d8 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 14 Jun 2022 14:58:38 +0300 Subject: [PATCH] Finished docs of Dynamic Dialog --- .../dialogservice/DialogService.d.ts | 4 +- src/components/dialogservice/DialogService.js | 2 +- .../dynamicdialog/DynamicDialog.vue | 4 +- src/views/dynamicdialog/DynamicDialogDemo.vue | 6 +- src/views/dynamicdialog/DynamicDialogDoc.vue | 68 +++++++++++++++---- src/views/dynamicdialog/InfoDemo.vue | 2 +- src/views/dynamicdialog/ProductListDemo.vue | 2 +- 7 files changed, 65 insertions(+), 23 deletions(-) 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 {
Closing a Dialog
-

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.

Options API

@@ -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 API
+

DialogService is the main entry point to open a dialog and load any content within.

+
@@ -216,14 +218,15 @@ export default { -
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.
-
Dialog Options
+
Dialog Open Configuration API
+

Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.

@@ -254,7 +257,7 @@ export default { - + @@ -263,7 +266,46 @@ export default {
Templates of a dialog including, header and footer.
onHideonClose function null Function callback to invoke when dialog is closed.
- +
Dialog Ref API
+

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.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
contentobjectnullLoaded content of a dialog.
optionsobjectnullOptions used to open a dialog.
dataobjectnullData passed to the dialog.
closefunctionnullFunction to close a dialog.
+
diff --git a/src/views/dynamicdialog/InfoDemo.vue b/src/views/dynamicdialog/InfoDemo.vue index e3587e339..05d73bc94 100644 --- a/src/views/dynamicdialog/InfoDemo.vue +++ b/src/views/dynamicdialog/InfoDemo.vue @@ -20,7 +20,7 @@ export default { }, methods: { closeDialog() { - this.dialogRef.hide(); + this.dialogRef.close(); } } } diff --git a/src/views/dynamicdialog/ProductListDemo.vue b/src/views/dynamicdialog/ProductListDemo.vue index e959c30a9..cd251cfb3 100644 --- a/src/views/dynamicdialog/ProductListDemo.vue +++ b/src/views/dynamicdialog/ProductListDemo.vue @@ -43,7 +43,7 @@ export default { }, methods: { selectProduct(data) { - this.dialogRef.hide(data); + this.dialogRef.close(data); }, showInfo() { this.$dialog.open(InfoDemo, {