feat: allow hooking on Dialog animation end

[noook]

Resolves #878

Not sure this is the expected method, I'd love to have feedback on it

[zernonia]

Thanks for the PR @noook . I'm thinking a more general solution for components that are using Presence. I did some test with dispatching custom event, and seems to work pretty well.

something like this

  const dispatchCustomEvent = (name: 'enter' | 'after-enter' | 'leave' | 'after-leave') => {
    const customEvent = new CustomEvent(name, { bubbles: false, cancelable: false })
    node.value?.dispatchEvent(customEvent)
  }

Then in the DialogOverlay (or any components with Presence) can add listener as such

<DialogOverlay class="animation" @leave="" @after-leave=""  />

[noook]

I get it, what do you think of it now @zernonia ?

I'm not sure all events can be fired, for example I haven't seen the leave event fired. Also, I am not sure I can detect after-enter either

[zernonia]

No prob @noook ! I've pushed some dispatchCustomEvent to cater for after-X event.

I believe this feature fit your original request right? where you can hook into the animation state 😁

[noook]

That looks fine ! And yes, I tested in the stories it fits the request 🔥

[zernonia]

Let'sss goo!! Thanks for the PR @noook !!

[zernonia]

Right now it's not explicit that which component has the hook, but I'm planning to add them in docs soon 😁

[luigigorlero]

We’re getting a fatal error on latest Nuxt and 1.8.0

500

CustomEvent is not defined

at ee.immediate (./node_modules/.pnpm/[email protected][email protected][email protected]_/node_modules/radix-vue/dist/index.js:1506:163)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

In console:

Loading Failed for the module with source “http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/perfect-debounce.js?v=768501e7”.

and

Uncaught (in promise) TypeError: error loading dynamically imported module: http://localhost:3000/_nuxt/@fs/Users/[PERSONAL_FOLDER]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@[email protected]_gpokhtbjebjqlsaipxd7yrpxba/node_modules/@nuxt/devtools/dist/runtime/plugins/view/client.mjs?v=57a21bdb

[stevebauman]

I'm not seeing anywhere in the docs on how to do this? Was this removed in a later patch? I.e. this does not work (no events fired):

<DialogOverlay 
    @leave="onLeave"
    @after-leave="onLeave"
    v-on:leave="onLeave"
    v-on:after-leave="onLeave"
>...

Am I missing something?