Finished docs of Dynamic Dialog

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 {

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 });
                     }
                 }

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);

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: "No", icon: "pi pi-times", onClick: () => dialogRef.close({ buttonType: 'No' }), class: "p-button-text" }),
-                            h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide({ buttonType: 'Yes' }), autofocus: true})
+                            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;

src/views/dynamicdialog/DynamicDialogDoc.vue

@@ -83,7 +83,7 @@ export default {
 </code></pre>
 
         <h5>Closing a Dialog</h5>
-        <p>The <i>hide</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
+        <p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
 
         <h6>Options API</h6>
 <pre v-code.script><code>
@@ -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 {
 
 </code></pre>
 
-        <p>Similarly when hiding a Dialog, any parameter passed to the <i>hide</i> function is received from the <i>onHide</i> callback defined by the <i>open</i> function at the caller.</p>
+        <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
 <pre v-code.script><code>
 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: "No", icon: "pi pi-times", onClick: () => dialogRef.close(), class: "p-button-text" }),
-                            h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide(), autofocus: true})
+                            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 {
 </code></pre>
 
         <h5>DialogService API</h5>
+        <p>DialogService is the main entry point to open a dialog and load any content within.</p>
+
         <div class="doc-tablewrapper">
 			<table class="doc-table">
                 <thead>
@@ -216,14 +218,15 @@ export default {
                         <td>content: The component to load<br />
                             options: Configuration of the Dialog
                         </td>
-                        <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Options</i> section below for
+                        <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for
                         the avaiable properties.</td>
                     </tr>
                 </tbody>
             </table>
         </div>
 
-        <h5>Dialog Options</h5>
+        <h5>Dialog Open Configuration API</h5>
+        <p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
         <div class="doc-tablewrapper">
             <table class="doc-table">
                 <thead>
@@ -254,7 +257,7 @@ export default {
                         <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
                     </tr>
                     <tr>
-                        <td>onHide</td>
+                        <td>onClose</td>
                         <td>function</td>
                         <td>null</td>
                         <td>Function callback to invoke when dialog is closed.</td>
@@ -263,7 +266,46 @@ export default {
             </table>
         </div>
 
-
+        <h5>Dialog Ref API</h5>
+        <p>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.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>content</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Loaded content of a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Options used to open a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Data passed to the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>function</td>
+                        <td>null</td>
+                        <td>Function to close a dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
     </AppDoc>
 </template>

src/views/dynamicdialog/InfoDemo.vue

@@ -20,7 +20,7 @@ export default {
     },
     methods: {
         closeDialog() {
-            this.dialogRef.hide();
+            this.dialogRef.close();
         }
     }
 }

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, {