Events emitted when modal is opened and closed

[ibanjo]

Thank you for the wrapper, it made my day! I just added a couple (possibly) useful events, fired when the modal is opening/closing and after the show/hide methods have been called on the A11yDialog instance.

[morkro]

Hey @ibanjo, thanks for your pull request! Just thinking, wouldn't these features potentially be better suited in user land? These events could be implemented on consumer level with the dialog-ref instance as well. What are your thoughts?

[ibanjo]

Interesting enough, actually. I introspected the A11yDialog class and found it actually fires events on the dialog container. So maybe I'm wrong, but the suggested approach would be something like

// In parent component
this.assignedDialog.on('event-name', callback)

following your idea of managing the actual A11yDialog instance outside the component. While browsing through your code, I've found that maybe it could be more "vue-ish" to follow a component-oriented approach, such as

// Template
<a11y-dialog ref="a11y-comp">...</a11y-dialog>
// JS
this.$refs['a11y-comp'].dialog.on('event-name', callback)

This actually does not leverage your @dialog-ref idea, but results in one less method (i.e. the one in which you assign the dialog-refs) and actually one less object reference, strictly binding the A11yDialog to its component, that is, in my opinion, a better practice in a Vue application.

As a compromise, we may think about proxying the native A11yDialog events in the mounted hook, as in

mounted () {
    this.$nextTick(() => {
        this.dialog = new A11yDialog(this.$refs.rootElement, this.appRoot)

        // Event proxies here
        this.dialog.on('event-name', (data) => this.$emit('a11y-event-name', data))

        this.$emit('dialog-ref', this.dialog)
    })
}

thus allowing the user to simply bind them to the <a11y-dialog> component instance as

<a11y-dialog @event-name="handler"></a11y-dialog>

Shall I try this?

[mgiraldo]

this would be useful for my use case also

[roblevintennis]

Where is dialog.shown coming from exactly?

Also, since this is Vue 3, we should leverage import { ref, watch } from 'vue' idiom and stick it inside the setup (I'd actually like to convert the props to use defineProps as well but didn't quite know about that at the time when I helped with the Vue 3 port).
https://vuejs.org/guide/essentials/watchers.html#basic-example

Another question is how do we deal with when lower-level a11y-dialog opens/closes based off the data attributes not instance?

[roblevintennis]

How do/will these play with the case when the consumer asks for the dialog-ref instance? Wouldn't this neuter or create a double callback situation? I suppose both would be handled by the consumer so I suppose they would be silly to both utilize the instance and also listen for the callback. But maybe there's a case where consumer wants to control opening/closing via the instance, but still listen for these events? Also, can the consumer not just do this themselves via the instance 🤔