docs(slideover): update

docs/app/components/content/examples/modal/ModalExample.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const modal = useModal()
+
+defineProps<{
+  count: number
+}>()
+</script>
+
+<template>
+  <UModal :title="`This modal was opened programmatically ${count} times`">
+    <template #footer>
+      <UButton color="gray" label="Close" @click="modal.close()" />
+    </template>
+  </UModal>
+</template>

docs/app/components/content/examples/modal/ModalProgrammaticExample.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { LazyExampleModalComponent } from '#components'
+import { LazyModalExample } from '#components'
 
 const count = ref(0)
 
 const modal = useModal()
 
-function openModal() {
+function open() {
   count.value++
 
-  modal.open(LazyExampleModalComponent, {
-    description: 'And you can even provide a description !',
+  modal.open(LazyModalExample, {
+    description: 'And you can even provide a description!',
     count: count.value
   })
 }
 </script>
 
 <template>
-  <UButton label="Open" color="gray" variant="subtle" @click="openModal" />
+  <UButton label="Open" color="gray" variant="subtle" @click="open" />
 </template>

docs/app/components/content/examples/slideover/SlideoverExample.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const slideover = useSlideover()
+
+defineProps<{
+  count: number
+}>()
+</script>
+
+<template>
+  <USlideover :description="`This slideover was opened programmatically ${count} times`">
+    <template #body>
+      <Placeholder class="h-full" />
+    </template>
+
+    <template #footer>
+      <UButton color="gray" label="Close" @click="slideover.close()" />
+    </template>
+  </USlideover>
+</template>

docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <USlideover v-model:open="open" title="Slideover with footer" description="This is useful when you want a form in a Slideover." :ui="{ footer: 'justify-end' }">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #body>
+      <Placeholder class="h-full" />
+    </template>
+
+    <template #footer>
+      <UButton label="Cancel" color="gray" variant="outline" @click="open = false" />
+      <UButton label="Submit" color="gray" />
+    </template>
+  </USlideover>
+</template>

docs/app/components/content/examples/slideover/SlideoverNestedExample.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const first = ref(false)
+const second = ref(false)
+</script>
+
+<template>
+  <USlideover v-model:open="first" title="First slideover" :ui="{ footer: 'justify-end' }">
+    <UButton color="gray" variant="subtle" label="Open" />
+
+    <template #body>
+      <Placeholder class="h-full" />
+    </template>
+
+    <template #footer>
+      <UButton label="Close" color="gray" variant="outline" @click="first = false" />
+
+      <USlideover v-model:open="second" title="Second slideover" :ui="{ footer: 'justify-end' }">
+        <UButton label="Open second" color="gray" />
+
+        <template #body>
+          <Placeholder class="h-full" />
+        </template>
+
+        <template #footer>
+          <UButton label="Close" color="gray" variant="outline" @click="second = false" />
+        </template>
+      </USlideover>
+    </template>
+  </USlideover>
+</template>

docs/app/components/content/examples/slideover/SlideoverOpenExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const open = ref(false)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <USlideover v-model:open="open">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="h-full m-4" />
+    </template>
+  </USlideover>
+</template>

docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { LazySlideoverExample } from '#components'
+
+const count = ref(0)
+
+const slideover = useSlideover()
+
+function open() {
+  count.value++
+
+  slideover.open(LazySlideoverExample, {
+    title: 'Slideover',
+    count: count.value
+  })
+}
+</script>
+
+<template>
+  <UButton label="Open" color="gray" variant="subtle" @click="open" />
+</template>