Events not working on Dynamic Dialog

[lukas-pierce]

Describe the bug

I am trying to send events from a dynamic dialog as shown in the example in your documentation:
https://primevue.org/dynamicdialog/#events

However, this does not work. Maybe I'm doing something wrong?

index.vue

<template>
  <div>
    <h1>Example Page</h1>
    <Button label="Open Dynamic Dialog" @click="openDialog" />
  </div>
</template>

<script setup lang="ts">
import ExampleDialog from '~/components/ExampleDialog.vue';

const dialog = useDialog();
const openDialog = () => {
  dialog.open(ExampleDialog, {
    props: {
      header: 'Example Dialog',
      modal: true,
    },
    onSaved: () => {
      alert('saved'); // ----------- Not called
    },
  });
};
</script>

ExampleDialog.vue

<template>
  <div>
    <p>Test stackblitz alert works</p>
    <Button label="Test alert" @click="testAlert" />
    <br />
    <br />

    <p>Ok, lets try emit 'saved' event from dynamic dialog</p>
    <Button label="Save" @click="save" />
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['saved']);

const testAlert = () => {
  alert('Its works!');
};

const save = () => {
  emit('saved');
};
</script>

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/nuxt-starter-mecvw6bm?file=pages%2Findex.vue,components%2FExampleDialog.vue

Environment

macOS Sequoia, Google Chrome

The problem reproducible in stackblitz

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

v18.19.0

Browser(s)

No response

Steps to reproduce the behavior

1. Open stackblitz link https://stackblitz.com/edit/nuxt-starter-mecvw6bm?file=pages%2Findex.vue,components%2FExampleDialog.vue
2. Open index.vue page
3. Click "Open Dynamic Dialog" button
4. Press "Save" button in the dialog

Expected behavior

I expected the event to be passed to the page and an alert to occur. But this does not happen.

[YannisJustine]

You need to add emits object.
It's written in the documentation but the example isn't updated:

The emits object defines callbacks to handle events emitted by the component within the Dialog.

Example

<template>
  <div>
    <h1>Example Page</h1>
    <Button label="Open Dynamic Dialog" @click="openDialog" />
  </div>
</template>

<script setup lang="ts">
import ExampleDialog from '~/components/ExampleDialog.vue';

const dialog = useDialog();
const openDialog = () => {
  dialog.open(ExampleDialog, {
    props: {
      header: 'Example Dialog',
      modal: true,
    },
    emits: {
      onSaved: () => {
        alert('saved'); 
      }
    }
  });
};
</script>

[tugcekucukoglu]

Thanks for the updates. The documentation will be updated.

[lukas-pierce]

Yes, now after wrapping into emits object it works

Updated code on same stackblitz https://stackblitz.com/edit/nuxt-starter-mecvw6bm?file=pages%2Findex.vue,components%2FExampleDialog.vue

---

@tugcekucukoglu @YannisJustine

Another small request for documentation.

The code selection highlight color for the API tab - it is almost invisible.

The FEATURES tab uses a dark background for code and uses a light selection highlight color, and the API tab has a light background and light highlight is not visible

In the screenshot, I selected the property