From 91873a8ae71fc14f43cf66fff188bab734e78828 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 13 Mar 2023 12:36:33 +0000
Subject: [PATCH] Update dynamic demo

---
 doc/dynamicdialog/CustomizationDoc.vue | 11 ++---
 doc/dynamicdialog/DialogServiceDoc.vue |  2 +-
 doc/dynamicdialog/EmitsDoc.vue         | 49 +++++++++++++++++++
 doc/dynamicdialog/UsageDoc.vue         | 66 +++++++++++++++++---------
 doc/dynamicdialog/demo/FooterDemo.vue  | 15 ++++++
 pages/dynamicdialog/index.vue          |  6 +++
 6 files changed, 118 insertions(+), 31 deletions(-)
 create mode 100644 doc/dynamicdialog/EmitsDoc.vue
 create mode 100644 doc/dynamicdialog/demo/FooterDemo.vue

diff --git a/doc/dynamicdialog/CustomizationDoc.vue b/doc/dynamicdialog/CustomizationDoc.vue
index c995541ed..dd65751a6 100644
--- a/doc/dynamicdialog/CustomizationDoc.vue
+++ b/doc/dynamicdialog/CustomizationDoc.vue
@@ -11,9 +11,9 @@ export default {
         return {
             code: {
                 basic: `
-import { h } from 'vue';
-import Button from 'primevue/button';
+import { markRaw } from 'vue';
 import ProductListDemo from './ProductListDemo';
+import FooterDemo from './FooterDemo';
 
 export default {
     methods:{
@@ -31,12 +31,7 @@ export default {
                     modal: true
                 },
                 templates: {
-                    footer: () => {
-                        return [
-                            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})
-                        ]
-                    }
+                    footer: markRaw(FooterDemo)
                 },
                 onClose: (options) => {
                     const data = options.data;
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index fb7c2a477..4c9ca587b 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -6,7 +6,7 @@
     <div class="doc-section-description">
         <p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
     </div>
-    <DocSectionCode :code="code2" import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/EmitsDoc.vue b/doc/dynamicdialog/EmitsDoc.vue
new file mode 100644
index 000000000..5a1adc5ec
--- /dev/null
+++ b/doc/dynamicdialog/EmitsDoc.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <i>emits</i> object can be used to handle events emitted by the child component. Each method name used in this object must begin with 'on'. Then the emit name should come. This is an
+            <a href="https://vuejs.org/guide/essentials/event-handling.html#listening-to-events">event handling</a> rule of Vue.
+        </p>
+
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+this.$dialog.open(ProductListDemo, {
+    emits: {
+        onInfo: (e) => {     // The 'on' prefix and same emit name are required.
+            console.log(e);  // {user: 'primetime'}
+        }
+    },
+};`
+            },
+            code2: {
+                basic: `
+// ProductListDemo
+<template>
+    <Button label="Submit" @click="showInfo" />
+</template>
+
+<script>
+export default {
+    emits: ['info'],
+    methods: {
+        showInfo() {
+            this.$emit('info', { user: 'primetime' });
+        }
+    }
+};
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dynamicdialog/UsageDoc.vue b/doc/dynamicdialog/UsageDoc.vue
index 6c5898c0c..2fa311947 100644
--- a/doc/dynamicdialog/UsageDoc.vue
+++ b/doc/dynamicdialog/UsageDoc.vue
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import Button from 'primevue/button';
-import { h } from 'vue';
+import { markRaw } from 'vue';
+import FooterDemo from './demo/FooterDemo.vue';
 import ProductListDemo from './demo/ProductListDemo';
 
 export default {
@@ -37,8 +37,9 @@ export default {
 
 <script>
 import Button from 'primevue/button';
-import { h, defineAsyncComponent } from 'vue';
+import { markRaw, defineAsyncComponent } from 'vue';
 const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
 
 export default {
     methods: {
@@ -56,12 +57,7 @@ export default {
                     modal: true
                 },
                 templates: {
-                    footer: () => {
-                        return [
-                            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 })
-                        ];
-                    }
+                    footer: markRaw(FooterDemo)
                 },
                 onClose: (options) => {
                     const data = options.data;
@@ -88,11 +84,12 @@ export default {
 </template>
 
 <script setup>
-import { h, defineAsyncComponent } from 'vue';
+import { markRaw, defineAsyncComponent } from 'vue';
 import { useDialog } from 'primevue/usedialog';
 import { useToast } from 'primevue/usetoast';
 import Button from 'primevue/button';
 const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
 
 const dialog = useDialog();
 const toast = useToast();
@@ -111,12 +108,7 @@ const showProducts = () => {
             modal: true
         },
         templates: {
-            footer: () => {
-                return [
-                    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})
-                ]
-            }
+            footer: markRaw(FooterDemo)
         },
         onClose: (options) => {
             const data = options.data;
@@ -239,6 +231,24 @@ export default {
 }
 <\/script>
                             `
+                    },
+                    'src/components/FooterDemo.vue': {
+                        content: `
+<template>
+    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
+    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    methods: {
+        closeDialog(e) {
+            this.dialogRef.close(e);
+        }
+    }
+};
+<\/script>`
                     }
                 },
                 composition: {
@@ -329,6 +339,23 @@ const closeDialog = () => {
 };
 <\/script>
                             `
+                    },
+                    'src/components/FooterDemo.vue': {
+                        content: `
+<template>
+    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
+    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
+</template>
+
+<script setup>
+import { inject } from "vue";
+
+const dialogRef = inject("dialogRef");
+
+const closeDialog = (e) => {
+    dialogRef.value.close(e);
+};
+<\/script>`
                     }
                 }
             }
@@ -349,12 +376,7 @@ const closeDialog = () => {
                     modal: true
                 },
                 templates: {
-                    footer: () => {
-                        return [
-                            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 })
-                        ];
-                    }
+                    footer: markRaw(FooterDemo)
                 },
                 onClose: (options) => {
                     const data = options.data;
diff --git a/doc/dynamicdialog/demo/FooterDemo.vue b/doc/dynamicdialog/demo/FooterDemo.vue
new file mode 100644
index 000000000..3605dd9e7
--- /dev/null
+++ b/doc/dynamicdialog/demo/FooterDemo.vue
@@ -0,0 +1,15 @@
+<template>
+    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
+    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    methods: {
+        closeDialog(e) {
+            this.dialogRef.close(e);
+        }
+    }
+};
+</script>
diff --git a/pages/dynamicdialog/index.vue b/pages/dynamicdialog/index.vue
index 78ae1e5f8..e06efc641 100644
--- a/pages/dynamicdialog/index.vue
+++ b/pages/dynamicdialog/index.vue
@@ -13,6 +13,7 @@ import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc';
 import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc';
 import CustomizationDoc from '@/doc/dynamicdialog/CustomizationDoc';
 import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc';
+import EmitsDoc from '@/doc/dynamicdialog/EmitsDoc';
 import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
 import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
 import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc';
@@ -52,6 +53,11 @@ export default {
                     label: 'Passing Data',
                     component: PassingDataDoc
                 },
+                {
+                    id: 'emits',
+                    label: 'Emits',
+                    component: EmitsDoc
+                },
                 {
                     id: 'customization',
                     label: 'Customization',