feat(Slidover): add prevent-close prop

docs/components/content/examples/SlideoverExampleBasic.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExampleCard.vue

@@ -0,0 +1,23 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <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>
+          <Placeholder class="h-8" />
+        </template>
+
+        <Placeholder class="h-full" />
+
+        <template #footer>
+          <Placeholder class="h-8" />
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExampleDisableOverlay.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :overlay="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExampleDisableTransition.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :transition="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExamplePreventClose.vue

@@ -0,0 +1,24 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" prevent-close>
+      <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">
+              Slideover
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </USlideover>
+  </div>
+</template>

docs/content/6.overlays/1.modal.md

@@ -68,6 +68,8 @@ const isOpen = ref(false)
 
 ### Disable overlay
 
+Set the `overlay` prop to `false` to disable it.
+
 ::component-example
 #default
 :modal-example-disable-overlay
@@ -94,6 +96,8 @@ const isOpen = ref(false)
 
 ### Disable transition
 
+Set the `transition` prop to `false` to disable it.
+
 ::component-example
 #default
 :modal-example-disable-transition
@@ -120,6 +124,8 @@ const isOpen = ref(false)
 
 ### Prevent close
 
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+
 ::component-example
 #default
 :modal-example-prevent-close
@@ -153,6 +159,22 @@ const isOpen = ref(false)
 ```
 ::
 
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup>
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
 ## Props
 
 :component-props

docs/content/6.overlays/2.slideover.md

@@ -8,9 +8,11 @@ headlessui:
 
 ## Usage
 
+Use a `v-model` to control the Slideover state.
+
 ::component-example
 #default
-:slideover-example
+:slideover-example-basic
 #code
 ```vue
 <script setup>
@@ -29,6 +31,149 @@ const isOpen = ref(false)
 ```
 ::
 
+You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
+
+::component-example
+#default
+:slideover-example-card
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <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>
+          <!-- Content -->
+        </template>
+
+        <!-- Content -->
+
+        <template #footer>
+          <!-- Content -->
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Disable overlay
+
+Set the `overlay` prop to `false` to disable it.
+
+::component-example
+#default
+:slideover-example-disable-overlay
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :overlay="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Disable transition
+
+Set the `transition` prop to `false` to disable it.
+
+::component-example
+#default
+:slideover-example-disable-transition
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :transition="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Prevent close
+
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+
+::component-example
+#default
+:slideover-example-prevent-close
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" prevent-close>
+      <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">
+              Slideover
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup>
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
 ## Props
 
 :component-props

src/runtime/components/overlays/Slideover.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="close">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -55,6 +55,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    preventClose: {
+      type: Boolean,
+      default: false
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
       default: () => appConfig.ui.slideover