Updated DynamicDialog documentation

doc/dynamicdialog/PassingDataDoc.vue

@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <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>
+        <p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
 
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 
-        <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>
+        <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
         <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
@@ -17,41 +17,51 @@ export default {
         return {
             code1: {
                 basic: `
-this.$dialog.open(ProductListDemo, {
-    data: {
-        user: 'primetime'
-    }
-};
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        data: {
+            user: 'primetime'
+        }
+    });
+}
 `
             },
             code2: {
                 basic: `
-export default {
-    inject: ['dialogRef'],
-    mounted:{
-        const params = this.dialogRef.data; // {user: 'primetime'}
-    }
-}
+import { inject, onMounted } from "vue";
+
+const dialogRef = inject('dialogRef');
+
+onMounted(() => {
+    const params = this.dialogRef.data; // {user: 'primetime'}
+})
 `
             },
             code3: {
                 basic: `
-this.$dialog.open(ProductListDemo, {
-    onClose(options) {
-        const callbackParams = options.data; // {id: 12}
-    }
-);
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        onClose: (opt) => {
+            const callbackParams = opt.data; // {selectedId: 12}
+        }
+    });
+}
 `
             },
             code4: {
                 basic: `
-export default {
-    inject: ['dialogRef'],
-    methods:{
-        closeDialog() {
-            this.dialogRef.close({id: 12});
-        }
-    }
+import { inject } from "vue";
+
+const dialogRef = inject('dialogRef');
+
+const closeDialog = () => {
+    dialogRef.value.close({
+        selectedId: 12
+    });
 }
 `
             }