fix(Slideover): wait for transition to complete to reset state (#1624)

src/runtime/components/overlays/Slideover.vue

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+  <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
@@ -71,7 +71,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'close', 'close-prevented'],
+  emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -109,6 +109,10 @@ export default defineComponent({
       emit('close')
     }
 
+    const onAfterLeave = () => {
+      emit('after-leave')
+    }
+
     provideUseId(() => useId())
 
     return {
@@ -117,6 +121,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     }
   }

src/runtime/components/overlays/Slideovers.client.vue

@@ -4,6 +4,7 @@
     v-if="slideoverState"
     v-bind="slideoverState.props"
     v-model="isOpen"
+    @after-leave="reset"
   />
 </template>
 
@@ -13,5 +14,5 @@ import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideov
 
 const slideoverState = inject(slidOverInjectionKey)
 
-const { isOpen } = useSlideover()
+const { isOpen, reset } = useSlideover()
 </script>

src/runtime/composables/useSlideover.ts

@@ -24,11 +24,13 @@ function _useSlideover () {
     isOpen.value = true
   }
 
-  function close () {
+  async function close () {
     if (!slideoverState) return
 
     isOpen.value = false
+  }
 
+  function reset () {
     slideoverState.value = {
       component: 'div',
       props: {}
@@ -53,6 +55,7 @@ function _useSlideover () {
   return {
     open,
     close,
+    reset,
     patch,
     isOpen
   }