fix(Slideover): remove dynamic component when closing (#1615)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/composables/useModal.ts

@@ -12,15 +12,23 @@ function _useModal () {
   const isOpen = ref(false)
 
   function open<T extends Component> (component: T, props?: Modal & ComponentProps<T>) {
+    if (!modalState) {
+      throw new Error('useModal() is called without provider')
+    }
+
     modalState.value = {
       component,
       props: props ?? {}
     }
+
     isOpen.value = true
   }
 
   function close () {
+    if (!modalState) return
+
     isOpen.value = false
+
     modalState.value = {
       component: 'div',
       props: {}
@@ -31,6 +39,8 @@ function _useModal () {
    * Allows updating the modal props
    */
   function patch <T extends Component = {}> (props: Partial<Modal & ComponentProps<T>>) {
+    if (!modalState) return
+
     modalState.value = {
       ...modalState.value,
       props: {
@@ -41,10 +51,10 @@ function _useModal () {
   }
 
   return {
-    isOpen,
     open,
     close,
-    patch
+    patch,
+    isOpen
   }
 }
 

src/runtime/composables/useSlideover.ts

@@ -1,55 +1,61 @@
 import { ref, inject } from 'vue'
-import { createSharedComposable } from '@vueuse/core'
 import type { ShallowRef, Component, InjectionKey } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
 import type { ComponentProps } from '../types/component'
 import type { Slideover, SlideoverState } from '../types/slideover'
 
-export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> =
+export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> = Symbol('nuxt-ui.slideover')
-    Symbol('nuxt-ui.slideover')
 
 function _useSlideover () {
-    const slideoverState = inject(slidOverInjectionKey)
+  const slideoverState = inject(slidOverInjectionKey)
-    const isOpen = ref(false)
 
-    function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
+  const isOpen = ref(false)
-        if (!slideoverState) {
-            throw new Error('useSlideover() is called without provider')
-        }
 
-        slideoverState.value = {
+  function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
-            component,
+    if (!slideoverState) {
-            props: props ?? {}
+      throw new Error('useSlideover() is called without provider')
-        }
-
-        isOpen.value = true
     }
 
-    function close () {
+    slideoverState.value = {
-        if (!slideoverState) return
+      component,
-
+      props: props ?? {}
-        isOpen.value = false
     }
 
-    /**
+    isOpen.value = true
-     * Allows updating the slideover props
+  }
-     */
-    function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) {
-        if (!slideoverState) return
 
-        slideoverState.value = {
+  function close () {
-            ...slideoverState.value,
+    if (!slideoverState) return
-            props: {
+
-                ...slideoverState.value.props,
+    isOpen.value = false
-                ...props
+
-            }
+    slideoverState.value = {
-        }
+      component: 'div',
+      props: {}
     }
-    return {
+  }
-        open,
+
-        close,
+  /**
-        patch,
+   * Allows updating the slideover props
-        isOpen
+   */
+  function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) {
+    if (!slideoverState) return
+
+    slideoverState.value = {
+      ...slideoverState.value,
+      props: {
+        ...slideoverState.value.props,
+        ...props
+      }
     }
+  }
+
+  return {
+    open,
+    close,
+    patch,
+    isOpen
+  }
 }
 
 export const useSlideover = createSharedComposable(_useSlideover)