Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow hooking on Dialog animation end #901

Merged
merged 5 commits into from
May 9, 2024

Conversation

noook
Copy link
Contributor

@noook noook commented May 7, 2024

Resolves #878

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

@zernonia
Copy link
Collaborator

zernonia commented May 8, 2024

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
Copy link
Contributor Author

noook commented May 8, 2024

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
Copy link
Collaborator

zernonia commented May 9, 2024

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
Copy link
Contributor Author

noook commented May 9, 2024

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

Copy link
Collaborator

@zernonia zernonia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@zernonia zernonia merged commit a615de2 into radix-vue:main May 9, 2024
2 checks passed
@zernonia
Copy link
Collaborator

zernonia commented May 9, 2024

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

@luigigorlero
Copy link

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

500

CustomEvent is not defined

at ee.immediate (./node_modules/.pnpm/radix-vue@1.8.0_vue@3.4.27_typescript@5.4.5_/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/@nuxt+devtools@1.3.1_@unocss+reset@0.60.2_change-case@4.1.2_floating-vue@5.2.2_@nuxt+kit@3.11_gpokhtbjebjqlsaipxd7yrpxba/node_modules/@nuxt/devtools/dist/runtime/plugins/view/client.mjs?v=57a21bdb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: Emit event when Dialog's animation are completed
3 participants