fix(Dialog): add afterLeave event (#19664)

fixes #19660

packages/vuetify/src/components/VDialog/VDialog.tsx

@@ -47,7 +47,7 @@ export const VDialog = genericComponent<OverlaySlots>()({
  afterLeave: () => true,
  },
 
- setup (props, { slots }) {
+ setup (props, { emit, slots }) {
  const isActive = useProxiedModel(props, 'modelValue')
  const { scopeId } = useScopeId()
 
@@ -95,6 +95,10 @@ export const VDialog = genericComponent<OverlaySlots>()({
  }
  }
 
+ function onAfterLeave () {
+ emit('afterLeave')
+ }
+
  watch(isActive, async val => {
  if (!val) {
  await nextTick()
@@ -131,6 +135,7 @@ export const VDialog = genericComponent<OverlaySlots>()({
  contentProps={ contentProps }
  role="dialog"
  onAfterEnter={ onAfterEnter }
+ onAfterLeave={ onAfterLeave }
  { ...scopeId }
  >
  {{

packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx

@@ -0,0 +1,39 @@
+/// <reference types="../../../../types/cypress" />
+
+// Components
+import { VDialog } from '..'
+
+// Utilities
+import { ref } from 'vue'
+
+// Tests
+describe('VDialog', () => {
+ it('should render correctly', () => {
+ const model = ref(false)
+ cy.mount(() => (
+ <VDialog v-model={ model.value } data-test="dialog">
+ <div data-test="content">Content</div>
+ </VDialog>
+ )).get('[data-test="dialog"]').should('not.exist')
+ .then(() => { model.value = true })
+ .get('[data-test="dialog"]').should('be.visible')
+ .get('[data-test="content"]').should('be.visible')
+ .get('body').click()
+ .then(() => {
+ expect(model.value).to.be.false
+ })
+ .get('[data-test="dialog"]').should('not.exist')
+ .get('[data-test="content"]').should('not.exist')
+ })
+
+ it('should emit afterLeave', () => {
+ const model = ref(true)
+ const onAfterLeave = cy.spy().as('afterLeave')
+ cy.mount(() => (
+ <VDialog v-model={ model.value } onAfterLeave={ onAfterLeave }>
+ <div data-test="content">Content</div>
+ </VDialog>
+ )).get('body').click()
+ .get('@afterLeave').should('have.been.calledOnce')
+ })
+})