From e7731e8a06b01aed3a09e9a8939ea456c7d3a811 Mon Sep 17 00:00:00 2001 From: Eugen Istoc Date: Thu, 4 Apr 2024 15:39:58 -0400 Subject: [PATCH 1/2] fix(slideover) close behavior --- src/runtime/composables/useSlideover.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/runtime/composables/useSlideover.ts b/src/runtime/composables/useSlideover.ts index 3f221e2ca6..2f7515e01d 100644 --- a/src/runtime/composables/useSlideover.ts +++ b/src/runtime/composables/useSlideover.ts @@ -28,6 +28,11 @@ function _useSlideover () { if (!slideoverState) return isOpen.value = false + + slideoverState.value = { + component: 'div', + props: {} + } } /** From d6dc348b68a0195614e0c8f38575c2f196637d0b Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Fri, 5 Apr 2024 12:30:12 +0200 Subject: [PATCH 2/2] up --- src/runtime/composables/useModal.ts | 18 ++++-- src/runtime/composables/useSlideover.ts | 83 +++++++++++++------------ 2 files changed, 56 insertions(+), 45 deletions(-) diff --git a/src/runtime/composables/useModal.ts b/src/runtime/composables/useModal.ts index 50b6acdf70..2586ce2f84 100644 --- a/src/runtime/composables/useModal.ts +++ b/src/runtime/composables/useModal.ts @@ -8,19 +8,27 @@ export const modalInjectionKey: InjectionKey> = Symbol('n function _useModal () { const modalState = inject(modalInjectionKey) - + const isOpen = ref(false) function open (component: T, props?: Modal & ComponentProps) { + 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 (props: Partial>) { + 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) \ No newline at end of file +export const useModal = createSharedComposable(_useModal) diff --git a/src/runtime/composables/useSlideover.ts b/src/runtime/composables/useSlideover.ts index 2f7515e01d..f9d527ea79 100644 --- a/src/runtime/composables/useSlideover.ts +++ b/src/runtime/composables/useSlideover.ts @@ -1,60 +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> = - Symbol('nuxt-ui.slideover') +export const slidOverInjectionKey: InjectionKey> = Symbol('nuxt-ui.slideover') function _useSlideover () { - const slideoverState = inject(slidOverInjectionKey) - const isOpen = ref(false) + const slideoverState = inject(slidOverInjectionKey) - function open (component: T, props?: Slideover & ComponentProps) { - if (!slideoverState) { - throw new Error('useSlideover() is called without provider') - } + const isOpen = ref(false) - slideoverState.value = { - component, - props: props ?? {} - } + function open (component: T, props?: Slideover & ComponentProps) { + 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 - - slideoverState.value = { - component: 'div', - props: {} - } - } + function close () { + if (!slideoverState) return + + isOpen.value = false - /** - * Allows updating the slideover props - */ - function patch (props: Partial>) { - 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 (props: Partial>) { + if (!slideoverState) return + + slideoverState.value = { + ...slideoverState.value, + props: { + ...slideoverState.value.props, + ...props + } } + } + + return { + open, + close, + patch, + isOpen + } } export const useSlideover = createSharedComposable(_useSlideover)