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

Co-authored-by: Benjamin Canac <[email protected]>

src/runtime/composables/useModal.ts

@@ -8,19 +8,27 @@ export const modalInjectionKey: InjectionKey<ShallowRef<ModalState>> = Symbol('n
 
 function _useModal () {
   const modalState = inject(modalInjectionKey)
-  
+
   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,11 +51,11 @@ function _useModal () {
   }
 
   return {
-    isOpen,
     open,
     close,
-    patch
+    patch,
+    isOpen
   }
 }
 
-export const useModal = createSharedComposable(_useModal)
+export const useModal = createSharedComposable(_useModal)

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>> =
-    Symbol('nuxt-ui.slideover')
+export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> = Symbol('nuxt-ui.slideover')
 
 function _useSlideover () {
-    const slideoverState = inject(slidOverInjectionKey)
-    const isOpen = ref(false)
+  const slideoverState = inject(slidOverInjectionKey)
 
-    function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
-        if (!slideoverState) {
-            throw new Error('useSlideover() is called without provider')
-        }
+  const isOpen = ref(false)
 
-        slideoverState.value = {
-            component,
-            props: props ?? {}
-        }
+  function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
+    if (!slideoverState) {
+      throw new Error('useSlideover() is called without provider')
+    }
 
-        isOpen.value = true
+    slideoverState.value = {
+      component,
+      props: props ?? {}
     }
 
-    function close () {
-        if (!slideoverState) return
+    isOpen.value = true
+  }
 
-        isOpen.value = false
-    }
+  function close () {
+    if (!slideoverState) return
+
+    isOpen.value = false
 
-    /**
-     * Allows updating the slideover props
-     */
-    function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) {
-        if (!slideoverState) return
-
-        slideoverState.value = {
-            ...slideoverState.value,
-            props: {
-                ...slideoverState.value.props,
-                ...props
-            }
-        }
+    slideoverState.value = {
+      component: 'div',
+      props: {}
     }
-    return {
-        open,
-        close,
-        patch,
-        isOpen
+  }
+
+  /**
+   * Allows updating the slideover props
+   */
+  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)