[DynamicDialog] how footer can communicate with the content component ?

[Mantalo]

I would use the dynamicdialog injecting a form component and un generic "save/cancel" footer. I would like to now how can a catch the button in the footer an trigger an event in the form component or in the dynamicdialog configuration.

Parent component

Code: Select all

function openDeviceModal(myData) {
  dialog.open(MyForm, {
    data: {
      myData,
    },
    templates: {
      footer: markRaw(ModalFooter),
    },
    onClose(test) {
      console.log(test)
    },
  })
}

ModalFooter
<script lang="ts" setup>
import { inject } from 'vue'

const { t } = useI18n()
const dialogRef = inject('dialogRef')
function closeDialog(e) {
dialogRef.value.close(e)
}
</script>

<template>
<Button
:label="t('core.action.cancel')"
class="p-button-outlined p-button-secondary"
type="button"
@click="closeDialog({ toUpdate: false })"
/>
<Button
:label="t('core.action.validate')"
autofocus
type="button"
@click="closeDialog({ toUpdate: true })"
/>
</template>

[/code]

MyForm

Code: Select all

<script lang="ts" setup>
const dialogRef: any = inject('dialogRef')
const newData = ref(dialogRef.value.data.myData)
</script>

<template>
  <form action="#" class="py-4 flex flex-col">
    <input v-model="newData"
  </form>
</template>

An idea how to proceed to use the template modal footer with the injected form component ?