From c3306acaf58cb53be8908f9f5c7940540861506f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 14 Jun 2022 14:46:56 +0300
Subject: [PATCH] Docs for DynamicDialog

---
 src/views/dynamicdialog/DynamicDialogDoc.vue | 278 +++++++++++++------
 src/views/toast/ToastDoc.vue                 |   7 +
 2 files changed, 197 insertions(+), 88 deletions(-)

diff --git a/src/views/dynamicdialog/DynamicDialogDoc.vue b/src/views/dynamicdialog/DynamicDialogDoc.vue
index db78dda00..15cab651f 100644
--- a/src/views/dynamicdialog/DynamicDialogDoc.vue
+++ b/src/views/dynamicdialog/DynamicDialogDoc.vue
@@ -1,7 +1,8 @@
 <template>
     <AppDoc name="DynamicDialogDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
         <h5>DialogService</h5>
-        <p></p>
+        <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
+
 <pre v-code.script><code>
 import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
@@ -25,37 +26,171 @@ import DynamicDialog from 'primevue/dynamicdialog';
 </code></pre>
 
         <h5>Getting Started</h5>
-        <p></p>
+        <p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
+
+<pre v-code><code>
+&lt;template&gt;
+    &lt;DynamicDialog /&gt;
+&lt;template&gt;
+
+</code></pre>
 
         <h5>Options API</h5>
         <p><i>$dialog</i> is available as a property in the application instance.</p>
 <pre v-code.script><code>
+const dialogRef = this.$dialog;
+
+</code></pre>
+
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useDialog</i> function.</p>
+<pre v-code.script><code>
+const dialog = useDialog();
+
+</code></pre>
+
+
+        <h5>Opening a Dialog</h5>
+        <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
+
+        <h6>Options API</h6>
+<pre v-code.script><code>
+import ProductListDemo from './ProductListDemo';
+
 export default {
     methods:{
-        onShow() {
+        showProducts() {
+            this.$dialog.open(ProductListDemo, {});
+        }
+    }
+}
+
+</code></pre>
+
+        <h6>Composition API</h6>
+<pre v-code.script><code>
+import ProductListDemo from './ProductListDemo';
+
+export default {
+    methods:{
+        showProducts() {
+            const dialog = useDialog();
+            dialog.open(ProductListDemo, {});
+        }
+    }
+}
+
+</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>
+
+        <h6>Options API</h6>
+<pre v-code.script><code>
+export default {
+    inject: ['dialogRef'],
+    methods:{
+        closeDialog() {
+            this.dialogRef.hide();
+        }
+    }
+}
+
+</code></pre>
+
+        <h6>Composition API</h6>
+<pre v-code.script><code>
+import { inject } from 'vue'
+
+export default {
+    methods:{
+        closeDialog() {
+            const dialogRef = inject('dialogRef');
+            dialogRef.hide();
+        }
+    }
+}
+
+</code></pre>
+
+        <h5>Passing Data</h5>
+        <p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
+
+<pre v-code.script><code>
+this.$dialog.open(ProductListDemo, {
+    data: {
+        user: 'primetime'
+    }
+};
+
+</code></pre>
+
+<pre v-code.script><code>
+export default {
+    inject: ['dialogRef'],
+    mounted:{
+        const params = this.dialogRef.data; //{user: 'primetime'}
+    }
+}
+
+</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>
+<pre v-code.script><code>
+this.$dialog.open(ProductListDemo, {
+    onHide(options) {
+        const callbackParams = options.data; //{id: 12}
+    }
+);
+
+</code></pre>
+
+<pre v-code.script><code>
+export default {
+    inject: ['dialogRef'],
+    methods:{
+        closeDialog() {
+            this.dialogRef.hide({id: 12});
+        }
+    }
+}
+
+</code></pre>
+
+        <h5>Customizing a Dialog</h5>
+        <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p>
+
+<pre v-code.script><code>
+import { h } from 'vue';
+import Button from 'primevue/button';
+import ProductListDemo from './ProductListDemo';
+
+export default {
+    methods:{
+        showProducts() {
             const dialogRef = this.$dialog.open(ProductListDemo, {
                 props: {
                     header: 'Product List',
                     style: {
-                        width: '50%',
-                        height: '550px',
+                        width: '50vw',
+                    },
+                    breakpoints:{
+                        '960px': '75vw',
+                        '640px': '90vw'
                     },
                     modal: true
                 },
                 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.hide(), class: "p-button-text" }),
+                            h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide(), autofocus: true})
                         ]
                     }
                 },
                 onHide: (options) => {
                     const data = options.data;
                     if (data) {
-                        const buttonType = data.buttonType;
-                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
-
                         this.$toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
                     }
                 }
@@ -63,84 +198,8 @@ export default {
         }
     }
 }
-
 </code></pre>
 
-        <h5>Composition API</h5>
-        <p>The dialog instance can be injected with the <i>useDialog</i> function.</p>
-<pre v-code.script><code>
-import { defineComponent } from "vue";
-import { useDialog } from "primevue/usedialog";
-
-export default defineComponent({
-    setup() {
-        const dialog = useDialog();
-        const dialogRef = dialog.open(ProductListDemo, {
-            props: {
-                header: 'Product List',
-                style: {
-                    width: '50%',
-                    height: '550px',
-                },
-                modal: true
-            },
-            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 })
-                    ]
-                }
-            },
-            onHide: (options) => {
-                const data = options.data;
-                if (data) {
-                    const buttonType = data.buttonType;
-                    const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
-
-                    this.$toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
-                }
-            }
-        })
-    }
-})
-
-</code></pre>
-
-        <h5>Dialog API</h5>
-        <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>props</td>
-                        <td>object</td>
-                        <td>null</td>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <td>templates</td>
-                        <td>object</td>
-                        <td>null</td>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <td>onHide</td>
-                        <td>function</td>
-                        <td>null</td>
-                        <td>Close function of the dialog.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
         <h5>DialogService API</h5>
         <div class="doc-tablewrapper">
 			<table class="doc-table">
@@ -155,14 +214,57 @@ export default defineComponent({
                     <tr>
                         <td>open</td>
                         <td>content: The component to load<br />
-                            options: configuration of the Dialog
+                            options: Configuration of the Dialog
                         </td>
-                        <td>Creates 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
+                        the avaiable properties.</td>
                     </tr>
                 </tbody>
             </table>
         </div>
 
+        <h5>Dialog Options</h5>
+        <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>props</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Properties of a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Data to pass to the loaded component.</td>
+                    </tr>
+                    <tr>
+                        <td>templates</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
+                    </tr>
+                    <tr>
+                        <td>onHide</td>
+                        <td>function</td>
+                        <td>null</td>
+                        <td>Function callback to invoke when dialog is closed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+
+
     </AppDoc>
 </template>
 
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index e26a7b3c6..96af65b42 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -29,6 +29,13 @@ import Toast from 'primevue/toast';
         <p>Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
 			summary and detail.</p>
 
+<pre v-code><code>
+&lt;template&gt;
+    &lt;Toast /&gt;
+&lt;template&gt;
+
+</code></pre>
+
         <h5>Options API</h5>
         <p><i>$toast</i> is available as a property in the application instance.</p>
 <pre v-code.script><code>