playground(modal/slideover): update

playground/app/components/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>

playground/app/components/ModalProgrammaticExample.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-const modal = useModal()
-
-defineProps<{
-  count: number
-}>()
-</script>
-
-<template>
-  <UModal title="This modal was opened programmatically">
-    <template #footer>
-      <div class="flex w-full justify-between">
-        <p>Count: {{ count }}</p>
-        <UButton color="gray" label="Close" @click="modal.close()" />
-      </div>
-    </template>
-  </UModal>
-</template>

playground/app/components/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>

playground/app/components/SlideoverProgrammaticExample.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-const slideover = useSlideover()
-
-defineProps<{
-  count: number
-}>()
-</script>
-
-<template>
-  <USlideover title="This slideover was opened programmatically">
-    <template #footer>
-      <div class="flex w-full justify-between">
-        <p>Count: {{ count }}</p>
-        <UButton color="gray" label="Close" @click="slideover.close()" />
-      </div>
-    </template>
-  </USlideover>
-</template>

playground/app/pages/components/modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LazyModalProgrammaticExample } from '#components'
+import { LazyModalExample } from '#components'
 
 const open = ref(false)
 const count = ref(0)
@@ -9,8 +9,8 @@ const modal = useModal()
 function openModal() {
   count.value++
 
-  modal.open(LazyModalProgrammaticExample, {
+  modal.open(LazyModalExample, {
-    description: 'And you can even provide a description !',
+    description: 'And you can even provide a description!',
     count: count.value
   })
 }

playground/app/pages/components/slideover.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LazySlideoverProgrammaticExample } from '#components'
+import { LazySlideoverExample } from '#components'
 
 const open = ref(false)
 const count = ref(0)
@@ -9,8 +9,8 @@ const slideover = useSlideover()
 function openSlideover() {
   count.value++
 
-  slideover.open(LazySlideoverProgrammaticExample, {
+  slideover.open(LazySlideoverExample, {
-    description: 'And you can even provide a description!',
+    title: 'Slideover',
     count: count.value
   })
 }