AEditDialog.vue

<template>
  <ADialog ref="dialog" is-modal class="tw-max-w-2xl tw-w-full">
    <form :id="id" @submit.prevent.stop="doSave">
      <slot />
    </form>

    <template #footer>
      <slot name="footer" :close="close">
        <button type="button" class="btn" @click="dialog.close()">{{ t('cancel') }}</button>
        <button type="button" class="btn tw-bg-aura-primary tw-text-white" @click="doSave">
          {{ t('save') }}
        </button>
      </slot>
    </template>
  </ADialog>
</template>
<script setup lang="ts">
import ADialog from '@/components/generic/ADialog.vue'
import { useId } from '@/util'
import { ref } from 'vue'
import { useI18n } from '@/i18n'

defineOptions({ compatConfig: { MODE: 3 } })

const props = defineProps<{
  save?: () => Promise<void>
}>()

const { t } = useI18n()
const id = useId('dialog-form')
const dialog = ref()

function open() {
  dialog.value.open()
}

function close() {
  dialog.value.close()
}

function doSave() {
  props.save?.()
}

defineExpose({
  open,
  close,
})
</script>