From 6a10b27b987f28165164c97fbb8650a46f24ef70 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 23 Aug 2024 16:02:28 +0200
Subject: [PATCH] playground(modal/slideover): update

---
 playground/app/components/ModalExample.vue    | 15 +++++++++++++++
 .../components/ModalProgrammaticExample.vue   | 18 ------------------
 .../app/components/SlideoverExample.vue       | 19 +++++++++++++++++++
 .../SlideoverProgrammaticExample.vue          | 18 ------------------
 playground/app/pages/components/modal.vue     |  6 +++---
 playground/app/pages/components/slideover.vue |  6 +++---
 6 files changed, 40 insertions(+), 42 deletions(-)
 create mode 100644 playground/app/components/ModalExample.vue
 delete mode 100644 playground/app/components/ModalProgrammaticExample.vue
 create mode 100644 playground/app/components/SlideoverExample.vue
 delete mode 100644 playground/app/components/SlideoverProgrammaticExample.vue

diff --git a/playground/app/components/ModalExample.vue b/playground/app/components/ModalExample.vue
new file mode 100644
index 00000000..da190874
--- /dev/null
+++ b/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>
diff --git a/playground/app/components/ModalProgrammaticExample.vue b/playground/app/components/ModalProgrammaticExample.vue
deleted file mode 100644
index 1b1749ac..00000000
--- a/playground/app/components/ModalProgrammaticExample.vue
+++ /dev/null
@@ -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>
diff --git a/playground/app/components/SlideoverExample.vue b/playground/app/components/SlideoverExample.vue
new file mode 100644
index 00000000..b2fc5570
--- /dev/null
+++ b/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>
diff --git a/playground/app/components/SlideoverProgrammaticExample.vue b/playground/app/components/SlideoverProgrammaticExample.vue
deleted file mode 100644
index c087f7e6..00000000
--- a/playground/app/components/SlideoverProgrammaticExample.vue
+++ /dev/null
@@ -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>
diff --git a/playground/app/pages/components/modal.vue b/playground/app/pages/components/modal.vue
index e9d65520..8f44e2b6 100644
--- a/playground/app/pages/components/modal.vue
+++ b/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, {
-    description: 'And you can even provide a description !',
+  modal.open(LazyModalExample, {
+    description: 'And you can even provide a description!',
     count: count.value
   })
 }
diff --git a/playground/app/pages/components/slideover.vue b/playground/app/pages/components/slideover.vue
index b55bb91e..2856f020 100644
--- a/playground/app/pages/components/slideover.vue
+++ b/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, {
-    description: 'And you can even provide a description!',
+  slideover.open(LazySlideoverExample, {
+    title: 'Slideover',
     count: count.value
   })
 }