feat(Slideovers): Allow multiple instances of programmatic slideover

docs/components/content/examples/SlideoverExampleComponent.vue

@@ -1,19 +1,40 @@
 <script lang="ts" setup>
+import { SlideoverExampleComponentB } from '#components'
 
 const props = defineProps({
   count: {
     type: Number,
     default: 0
+  },
+  side: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right'
   }
 })
 
 const emits = defineEmits<{
   close: [];
 }>()
+
+const slideover = useSlideover()
+const anotherCount = ref(0)
+
+
+function openAnotherSlideover () {
+  anotherCount.value += 1
+
+  const instance = slideover.open(SlideoverExampleComponentB, {
+    count: anotherCount.value,
+    side: 'left',
+    onClose: () => {
+      instance.close()
+    }
+  })
+}
 </script>
 
 <template>
-  <USlideover>
+  <USlideover :side="props.side">
     <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
       <template #header>
         <div class="flex items-center justify-between">
@@ -24,7 +45,12 @@ const emits = defineEmits<{
         </div>
       </template>
 
-      <Placeholder class="h-full" />
+      <div class="flex gap-2 flex-col h-full">
+        <div class="flex justify-around">
+          <UButton label="Reveal another slideover" @click="openAnotherSlideover" />
+        </div>
+        <Placeholder class="flex-grow" />
+      </div>
     </UCard>
   </USlideover>
 </template>

docs/components/content/examples/SlideoverExampleComponentB.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+const props = defineProps({
+  count: {
+    type: Number,
+    default: 0
+  },
+  side: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right'
+  }
+})
+
+const emits = defineEmits<{
+  close: [];
+}>()
+
+</script>
+
+<template>
+  <USlideover :side="props.side">
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Opened programmatically: {{ props.count }} times
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" />
+        </div>
+      </template>
+      <Placeholder class="h-full" />
+    </UCard>
+  </USlideover>
+</template>

docs/components/content/examples/SlideoverExampleComposable.vue

@@ -5,9 +5,12 @@ const slideover = useSlideover()
 const count = ref(0)
 function openSlideover () {
   count.value += 1
-  slideover.open(SlideoverExampleComponent, {
+  const instance = slideover.open(SlideoverExampleComponent, {
     count: count.value,
-    onClose: slideover.close
+    side: 'right',
+    onClose: () => {
+      instance.close()
+    }
   })
 }
 </script>

playground/components/SlideoverExampleComponent.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { SlideoverExampleComponentB } from '#components'
+
+const props = defineProps({
+  count: {
+    type: Number,
+    default: 0
+  },
+  side: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right'
+  }
+})
+
+const emits = defineEmits<{
+  close: [];
+  switch: [];
+}>()
+
+const slideover = useSlideover()
+const anotherCount = ref(0)
+
+
+function openAnotherSlideover () {
+  anotherCount.value += 1
+
+  slideover.open(SlideoverExampleComponentB)
+
+}
+</script>
+
+<template>
+  <USlideover :side="props.side">
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Opened programmatically: {{ props.count }} times
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" />
+        </div>
+      </template>
+
+      <div class="flex gap-2 flex-col h-full">
+        <div class="flex justify-around flex-col">
+          <pre>{{ $props }}</pre>
+          <UButton label="Reveal another slideover" @click="openAnotherSlideover" />
+          <UButton label="Switch" @click="$emit('switch')" />
+        </div>
+      </div>
+    </UCard>
+  </USlideover>
+</template>

playground/components/SlideoverExampleComponentB.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const props = defineProps({
+  count: {
+    type: Number,
+    default: 0
+  },
+  side: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right'
+  }
+})
+
+const emits = defineEmits<{
+  close: [];
+}>()
+
+</script>
+
+<template>
+  <USlideover :side="props.side">
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Opened programmatically: {{ props.count }} times
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" />
+        </div>
+      </template>
+    </UCard>
+  </USlideover>
+</template>

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

@@ -1,18 +1,37 @@
 <template>
   <component
-    :is="slideoverState.component"
-    v-if="slideoverState"
-    v-bind="slideoverState.props"
-    v-model="isOpen"
-    @after-leave="reset"
+    :is="instance.component"
+    v-for="instance in slideoverInstances"
+    :key="instance.id"
+    v-bind="instance.props"
+    :model-value="instance.isOpen"
+    :prevent-close="true"
+    @close-prevented="onClosePrevented(instance)"
+    @after-leave="remove(instance.id)"
+    @update:model-value="close(instance.id)"
   />
 </template>
 
 <script lang="ts" setup>
 import { inject } from 'vue'
 import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideover'
 
-const slideoverState = inject(slidOverInjectionKey)
+const slideoverInstances = inject(slidOverInjectionKey)
 
-const { isOpen, reset } = useSlideover()
+const { remove, close } = useSlideover()
+
+/**
+ * We must set preventClose: true to prevent closing all of the instances.
+ * Instead, we listen for the close-prevented event and remove the top level instance only.
+ *
+ * @param instance the instance that is being closed
+ */
+const onClosePrevented = (instance) => {
+  if (instance.props.preventClose) {
+    return
+  }
+
+  // Close the top level instance only
+  close(slideoverInstances.value[slideoverInstances.value.length - 1].id)
+}
 </script>

src/runtime/composables/useSlideover.ts

@@ -1,63 +1,91 @@
-import { ref, inject } from 'vue'
+import { inject } from 'vue'
 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'
+import type { Slideover, SlideoverInstance } from '../types/slideover'
 
-export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> = Symbol('nuxt-ui.slideover')
+export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverInstance<any>[]>> = Symbol('nuxt-ui.slideover')
 
 function _useSlideover () {
-  const slideoverState = inject(slidOverInjectionKey)
-
-  const isOpen = ref(false)
+  const slideoverInstances = inject(slidOverInjectionKey)
 
   function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
-    if (!slideoverState) {
+    if (!slideoverInstances) {
       throw new Error('useSlideover() is called without provider')
     }
 
-    slideoverState.value = {
-      component,
-      props: props ?? {}
-    }
+    const instance = createInstance(component, props)
 
-    isOpen.value = true
+    slideoverInstances.value = [
+      ...slideoverInstances.value,
+      instance
+    ]
+
+    return instance
   }
 
-  async function close () {
-    if (!slideoverState) return
+  function close (id: number) {
+    const slideoverInstance = slideoverInstances.value.find((slideover) => slideover.id === id)
+
+    if (!slideoverInstance) return
 
-    isOpen.value = false
+    slideoverInstance.isOpen = false
+
+    slideoverInstances.value = [
+      ...slideoverInstances.value.filter((slideover) => slideover.id !== id),
+      slideoverInstance
+    ]
   }
 
-  function reset () {
-    slideoverState.value = {
-      component: 'div',
-      props: {}
-    }
+  function remove (id: number) {
+    slideoverInstances.value = slideoverInstances.value.filter((slideover) => slideover.id !== id)
   }
 
   /**
    * 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
+  function patch<T extends Component = {}> (id: number, props: Partial<Slideover & ComponentProps<T>>) {
+    const slideoverInstance = slideoverInstances.value.find((slideover) => slideover.id === id)
+
+    if (!slideoverInstance) return
+
+    slideoverInstances.value = [
+      ...slideoverInstances.value.filter((slideover) => slideover.id !== id),
+      {
+        ...slideoverInstance,
+        props: {
+          ...slideoverInstance.props,
+          ...props
+        }
       }
-    }
+    ]
   }
 
+  function createInstance<T extends Component> (component: T, props?: Slideover & ComponentProps<T>): SlideoverInstance<ComponentProps<T>> {
+    // Random short id
+    const id = Math.floor(Math.random() * 1000000)
+
+    return {
+        id,
+        isOpen: true,
+        component,
+        props: {
+          ...props,
+          onClose () {
+            props?.onClose?.()
+            close(id)
+          }
+        },
+        patch: (props) => patch(id, props),
+        close: () => close(id)
+      }
+}
+
   return {
     open,
     close,
-    reset,
-    patch,
-    isOpen
+    remove,
+    patch
   }
 }
 

src/runtime/plugins/slideovers.ts

@@ -1,13 +1,10 @@
 import { defineNuxtPlugin } from '#imports'
 import { shallowRef } from 'vue'
 import { slidOverInjectionKey } from '../composables/useSlideover'
-import type { SlideoverState } from '../types/slideover'
+import type { SlideoverInstance } from '../types/slideover'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const slideoverState = shallowRef<SlideoverState>({
-    component: 'div',
-    props: {}
-  })
+  const slideoverInstances = shallowRef<SlideoverInstance<any>[]>([])
 
-  nuxtApp.vueApp.provide(slidOverInjectionKey, slideoverState)
+  nuxtApp.vueApp.provide(slidOverInjectionKey, slideoverInstances)
 })

src/runtime/types/slideover.d.ts

@@ -10,7 +10,11 @@ export interface Slideover {
   modelValue?: boolean
 }
 
-export interface SlideoverState {
-  component: Component | string
-  props: Slideover
-}
+export interface SlideoverInstance<T> {
+  id: number,
+  isOpen: boolean
+  component: Component
+  props: Slideover & T
+  patch (props: Partial<Slideover & T>): void
+  close: () => void,
+}