Update dynamic demo

doc/dynamicdialog/CustomizationDoc.vue

@@ -11,9 +11,9 @@ export default {
         return {
             code: {
                 basic: `
-import { h } from 'vue';
+import { markRaw } from 'vue';
-import Button from 'primevue/button';
 import ProductListDemo from './ProductListDemo';
+import FooterDemo from './FooterDemo';
 
 export default {
     methods:{
@@ -31,12 +31,7 @@ export default {
                     modal: true
                 },
                 templates: {
-                    footer: () => {
+                    footer: markRaw(FooterDemo)
-                        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})
-                        ]
-                    }
                 },
                 onClose: (options) => {
                     const data = options.data;

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>

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>

doc/dynamicdialog/UsageDoc.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import Button from 'primevue/button';
+import { markRaw } from 'vue';
-import { h } 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: () => {
+                    footer: markRaw(FooterDemo)
-                        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 })
-                        ];
-                    }
                 },
                 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: () => {
+            footer: markRaw(FooterDemo)
-                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})
-                ]
-            }
         },
         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: () => {
+                    footer: markRaw(FooterDemo)
-                        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 })
-                        ];
-                    }
                 },
                 onClose: (options) => {
                     const data = options.data;

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>

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