feat(Modal): pass transitioning prop to slots

src/runtime/components/Modal.vue

@@ -2,9 +2,8 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/modal'
-import type { ButtonProps, IconProps } from '../types'
-import type { EmitsToProps } from '../types/utils'
-import type { ComponentConfig } from '../types/tv'
+import type { ButtonProps } from '../types'
+import type { EmitsToProps, ComponentConfig } from '../types/utils'
 
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>
 
@@ -44,7 +43,7 @@
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: IconProps['name']
+  closeIcon?: string
   /**
    * When `false`, the modal will not close when clicking outside or pressing escape.
    * @defaultValue true
@@ -55,26 +54,28 @@
 }
 
 export interface ModalEmits extends DialogRootEmits {
-  'after:leave': []
+  'enter': []
+  'leave': []
   'after:enter': []
+  'after:leave': []
   'close:prevent': []
 }
 
 export interface ModalSlots {
-  default(props: { open: boolean }): any
-  content(props: { close: () => void }): any
-  header(props: { close: () => void }): any
-  title(props?: {}): any
-  description(props?: {}): any
-  actions(props?: {}): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props: { close: () => void }): any
-  footer(props: { close: () => void }): any
+  default(props: { open: boolean, transitioning: boolean }): any
+  content(props: { close: () => void, transitioning: boolean }): any
+  header(props: { close: () => void, transitioning: boolean }): any
+  title(props: { transitioning: boolean }): any
+  description(props: { transitioning: boolean }): any
+  actions(props: { transitioning: boolean }): any
+  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string }, transitioning: boolean }): any
+  body(props: { close: () => void, transitioning: boolean }): any
+  footer(props: { close: () => void, transitioning: boolean }): any
 }
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, toRef, ref } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -97,6 +98,8 @@
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
 
+const transitioning = ref(false)
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
@@ -124,54 +127,82 @@
   transition: props.transition,
   fullscreen: props.fullscreen
 }))
+
+function handleAfterEnter() {
+  transitioning.value = false
+  emits('after:enter')
+}
+
+function handleAfterLeave() {
+  transitioning.value = false
+  emits('after:leave')
+}
+
+function handleEnter() {
+  transitioning.value = true
+  emits('enter')
+}
+
+function handleLeave() {
+  transitioning.value = true
+  emits('leave')
+}
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" />
+      <slot :open="open" :transitioning="transitioning" />
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
+      <DialogContent
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+        @after-enter="handleAfterEnter"
+        @after-leave="handleAfterLeave"
+        @enter="handleEnter"
+        @leave="handleLeave"
+        v-on="contentEvents"
+      >
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
-            <slot name="title">
+            <slot name="title" :transitioning="transitioning">
               {{ title }}
             </slot>
           </DialogTitle>
 
           <DialogDescription v-if="description || !!slots.description">
-            <slot name="description">
+            <slot name="description" :transitioning="transitioning">
               {{ description }}
             </slot>
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content" :close="close">
+        <slot name="content" :close="close" :transitioning="transitioning">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header" :close="close">
+            <slot name="header" :close="close" :transitioning="transitioning">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title">
+                  <slot name="title" :transitioning="transitioning">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
                 <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description">
+                  <slot name="description" :transitioning="transitioning">
                     {{ description }}
                   </slot>
                 </DialogDescription>
               </div>
 
-              <slot name="actions" />
+              <slot name="actions" :transitioning="transitioning" />
 
               <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
+                <slot name="close" :close="close" :ui="ui" :transitioning="transitioning">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
@@ -187,14 +218,14 @@
           </div>
 
           <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" :close="close" />
+            <slot name="body" :close="close" :transitioning="transitioning" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" :close="close" />
+            <slot name="footer" :close="close" :transitioning="transitioning" />
           </div>
         </slot>
       </DialogContent>
     </DialogPortal>
   </DialogRoot>
-</template>
+</template>