From 38eb932b538abb08d10e564308d92538ee345463 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 18 Mar 2024 17:19:06 +0100
Subject: [PATCH] feat(Slideover): new component

---
 playground/app.vue                            |   2 +-
 playground/pages/slideover.vue                |  93 +++++
 src/runtime/components/Slideover.vue          | 175 +++++++++
 src/theme/index.ts                            |   1 +
 src/theme/slideover.ts                        |  28 ++
 test/components/Slideover.spec.ts             |  27 ++
 .../__snapshots__/Slideover.spec.ts.snap      | 347 ++++++++++++++++++
 7 files changed, 672 insertions(+), 1 deletion(-)
 create mode 100644 playground/pages/slideover.vue
 create mode 100644 src/runtime/components/Slideover.vue
 create mode 100644 src/theme/slideover.ts
 create mode 100644 test/components/Slideover.spec.ts
 create mode 100644 test/components/__snapshots__/Slideover.spec.ts.snap

diff --git a/playground/app.vue b/playground/app.vue
index 3d8831d3..86e39137 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,7 +5,7 @@ useHead({
   }
 })
 
-const components = ['avatar', 'badge', 'button', 'card', 'chip', 'collapsible', 'kbd', 'modal', 'popover', 'skeleton', 'tabs', 'tooltip']
+const components = ['avatar', 'badge', 'button', 'card', 'chip', 'collapsible', 'kbd', 'modal', 'popover', 'skeleton', 'slideover', 'tabs', 'tooltip']
 </script>
 
 <template>
diff --git a/playground/pages/slideover.vue b/playground/pages/slideover.vue
new file mode 100644
index 00000000..24b1820f
--- /dev/null
+++ b/playground/pages/slideover.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <USlideover title="First slideover">
+      <UButton color="white" label="Open with nested" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+
+      <template #footer>
+        <USlideover title="Second slideover">
+          <UButton label="Open second" />
+        </USlideover>
+      </template>
+    </USlideover>
+
+    <USlideover v-model:open="open" title="Slideover with v-model" description="This can be useful to control the state of the slideover yourself.">
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <UButton label="Open with v-model" color="gray" @click="open = true" />
+
+    <USlideover title="Slideover on left side" description="This slideover has `side: 'left'` prop." side="left">
+      <UButton label="Open on left" color="white" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover without overlay" description="This slideover has `overlay: false` prop." :overlay="false">
+      <UButton label="Open without overlay" color="white" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover without modal & overlay" description="This slideover has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
+      <UButton label="Open without modal" color="gray" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover without transition" description="This slideover has `transition: false` prop." :transition="false">
+      <UButton label="Open without transition" color="white" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover without portal" description="This slideover has `portal: false` prop." :portal="false">
+      <UButton label="Open without portal" color="gray" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover prevent close" description="This slideover has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
+      <UButton label="Open unclosable" color="gray" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover without close button" description="This slideover has `close: null` prop." :close="null">
+      <UButton label="Open without close button" color="white" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+
+    <USlideover title="Slideover with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
+      <UButton label="Open with custom close button" color="gray" />
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
+  </div>
+</template>
+
+<script setup lang="ts">
+const open = ref(false)
+</script>
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
new file mode 100644
index 00000000..6fb04371
--- /dev/null
+++ b/src/runtime/components/Slideover.vue
@@ -0,0 +1,175 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slideover'
+import type { ButtonProps } from './Button.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
+
+const slideover = tv({ extend: tv(theme), ...(appConfig.ui?.slideover || {}) })
+
+export interface SlideoverProps extends DialogRootProps {
+  title?: string
+  description?: string
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  overlay?: boolean
+  transition?: boolean
+  side?: 'left' | 'right'
+  preventClose?: boolean
+  portal?: boolean
+  close?: ButtonProps | null
+  class?: any
+  ui?: Partial<typeof slideover.slots>
+}
+
+export interface SlideoverEmits extends DialogRootEmits {}
+
+export interface SlideoverSlots {
+  default(): any
+  content(): any
+  header(): any
+  title(): any
+  description(): any
+  close(): any
+  body(): any
+  footer(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#app'
+
+const props = withDefaults(defineProps<SlideoverProps>(), { portal: true, overlay: true, transition: true, side: 'right' })
+const emits = defineEmits<SlideoverEmits>()
+defineSlots<SlideoverSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (props.preventClose) {
+    return {
+      'pointerDownOutside': (e: Event) => e.preventDefault(),
+      'interactOutside': (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+
+const appConfig = useAppConfig()
+
+const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
+  transition: props.transition,
+  side: props.side
+}))
+</script>
+
+<template>
+  <DialogRoot v-bind="rootProps">
+    <DialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DialogTrigger>
+
+    <DialogPortal :disabled="!portal">
+      <DialogOverlay v-if="overlay" :class="ui.overlay()" />
+
+      <DialogContent :data-side="side" :class="ui.content({ class: props.class })" v-bind="contentProps" v-on="contentEvents">
+        <slot name="content">
+          <div :class="ui.header()">
+            <slot name="header">
+              <DialogTitle v-if="title || $slots.title" :class="ui.title()">
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogDescription v-if="description || $slots.description" :class="ui.description()">
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </DialogDescription>
+
+              <DialogClose as-child>
+                <slot name="close" :class="ui.close()">
+                  <UButton
+                    v-if="close !== null"
+                    :icon="appConfig.ui.icons.close"
+                    color="gray"
+                    variant="ghost"
+                    aria-label="Close"
+                    v-bind="close"
+                    :class="ui.close()"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div :class="ui.body()">
+            <slot name="body" />
+          </div>
+
+          <div v-if="$slots.footer" :class="ui.footer()">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<style>
+@keyframes slideover-overlay-open {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideover-overlay-closed {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slideover-content-right-open {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideover-content-right-closed {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes slideover-content-left-open {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideover-content-left-closed {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+</style>
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 551504db..faaa1420 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -10,5 +10,6 @@ export { default as kbd } from './kbd'
 export { default as modal } from './modal'
 export { default as popover } from './popover'
 export { default as skeleton } from './skeleton'
+export { default as slideover } from './slideover'
 export { default as tabs } from './tabs'
 export { default as tooltip } from './tooltip'
diff --git a/src/theme/slideover.ts b/src/theme/slideover.ts
new file mode 100644
index 00000000..a55c1e7b
--- /dev/null
+++ b/src/theme/slideover.ts
@@ -0,0 +1,28 @@
+export default {
+  slots: {
+    overlay: 'fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75',
+    content: 'fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none',
+    header: 'px-4 py-5 sm:px-6',
+    body: 'flex-1 overflow-y-auto p-4 sm:p-6',
+    footer: 'flex items-center gap-x-1.5 p-4 sm:px-6',
+    title: 'text-gray-900 dark:text-white font-semibold',
+    description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
+    close: 'absolute top-4 right-4'
+  },
+  variants: {
+    side: {
+      left: {
+        content: 'left-0'
+      },
+      right: {
+        content: 'right-0'
+      }
+    },
+    transition: {
+      true: {
+        overlay: 'data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]',
+        content: 'data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]'
+      }
+    }
+  }
+}
diff --git a/test/components/Slideover.spec.ts b/test/components/Slideover.spec.ts
new file mode 100644
index 00000000..409fa033
--- /dev/null
+++ b/test/components/Slideover.spec.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import Slideover, { type SlideoverProps } from '../../src/runtime/components/Slideover.vue'
+import ComponentRender from '../component-render'
+
+describe('Slideover', () => {
+  it.each([
+    ['basic case', { props: { open: true, portal: false } }],
+    ['with title', { props: { open: true, portal: false, title: 'Title' } }],
+    ['with description', { props: { open: true, portal: false, title: 'Title', description: 'Description' } }],
+    ['with left side', { props: { open: true, portal: false, side: 'left' as const, title: 'Title', description: 'Description' } }],
+    ['without overlay', { props: { open: true, portal: false, overlay: false, title: 'Title', description: 'Description' } }],
+    ['without transition', { props: { open: true, portal: false, transition: false, title: 'Title', description: 'Description' } }],
+    ['with class', { props: { open: true, portal: false, class: 'bg-gray-50 dark:bg-gray-800' } }],
+    ['with ui', { props: { open: true, portal: false, ui: { close: 'right-2' } } }],
+    ['with default slot', { props: { open: true, portal: false }, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }],
+    ['with header slot', { props: { open: true, portal: false }, slots: { header: () => 'Header slot' } }],
+    ['with title slot', { props: { open: true, portal: false }, slots: { title: () => 'Title slot' } }],
+    ['with description slot', { props: { open: true, portal: false }, slots: { description: () => 'Description slot' } }],
+    ['with close slot', { props: { open: true, portal: false }, slots: { close: () => 'Close slot' } }],
+    ['with body slot', { props: { open: true, portal: false }, slots: { body: () => 'Body slot' } }],
+    ['with footer slot', { props: { open: true, portal: false }, slots: { footer: () => 'Footer slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SlideoverProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Slideover)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
new file mode 100644
index 00000000..02454aa0
--- /dev/null
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -0,0 +1,347 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Slideover > renders basic case correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-2" aria-labelledby="radix-vue-dialog-title-1" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]" style="pointer-events: auto;">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with body slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-31" aria-labelledby="radix-vue-dialog-title-30" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-14" aria-labelledby="radix-vue-dialog-title-13" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out] bg-gray-50 dark:bg-gray-800">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with close slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-29" aria-labelledby="radix-vue-dialog-title-28" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if-->Close slot
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with content slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-21" aria-labelledby="radix-vue-dialog-title-20" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">Content slot</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with default slot correctly 1`] = `
+"Default slot
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-17" role="dialog" aria-describedby="radix-vue-dialog-description-19" aria-labelledby="radix-vue-dialog-title-18" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with description correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-6" aria-labelledby="radix-vue-dialog-title-5" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <h2 id="radix-vue-dialog-title-5" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+    <p id="radix-vue-dialog-description-6" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with description slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-27" aria-labelledby="radix-vue-dialog-title-26" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <p id="radix-vue-dialog-description-27" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description slot</p><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with footer slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-33" aria-labelledby="radix-vue-dialog-title-32" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div class="flex items-center gap-x-1.5 p-4 sm:px-6">Footer slot</div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with header slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-23" aria-labelledby="radix-vue-dialog-title-22" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">Header slot</div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with left side correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-8" aria-labelledby="radix-vue-dialog-title-7" data-state="open" data-side="left" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none left-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <h2 id="radix-vue-dialog-title-7" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+    <p id="radix-vue-dialog-description-8" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with title correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-4" aria-labelledby="radix-vue-dialog-title-3" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <h2 id="radix-vue-dialog-title-3" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with title slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-25" aria-labelledby="radix-vue-dialog-title-24" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <h2 id="radix-vue-dialog-title-24" class="text-gray-900 dark:text-white font-semibold">Title slot</h2>
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-16" aria-labelledby="radix-vue-dialog-title-15" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <!--v-if-->
+    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-2" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders without overlay correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<!--v-if-->
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-10" aria-labelledby="radix-vue-dialog-title-9" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0 data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]">
+  <div class="px-4 py-5 sm:px-6">
+    <h2 id="radix-vue-dialog-title-9" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+    <p id="radix-vue-dialog-description-10" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Slideover > renders without transition correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-12" aria-labelledby="radix-vue-dialog-title-11" data-state="open" data-side="right" tabindex="-1" class="fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none right-0">
+  <div class="px-4 py-5 sm:px-6">
+    <h2 id="radix-vue-dialog-title-11" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+    <p id="radix-vue-dialog-description-12" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4" aria-label="Close">
+      <!---->
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <!--v-if-->
+</div>
+
+
+<!--teleport end-->"
+`;