docs(modal): update

docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue

@@ -3,7 +3,7 @@ const open = ref(false)
 </script>
 
 <template>
-  <UDrawer v-model:open="open" title="Drawer with actions" description="This is useful when you want a form in a drawer.">
+  <UDrawer v-model:open="open" title="Drawer with footer" description="This is useful when you want a form in a Drawer.">
     <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
 
     <template #body>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const searchTerm = ref('')
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  params: { q: searchTerm },
+  transform: (data: any[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || [],
+  filter: false
+}])
+</script>
+
+<template>
+  <UModal>
+    <UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
+
+    <template #content>
+      <UCommandPalette
+        v-model:search-term="searchTerm"
+        :loading="status === 'pending'"
+        :groups="groups"
+        placeholder="Search users..."
+        class="h-96 border-t border-gray-200 dark:border-gray-800"
+      />
+    </template>
+  </UModal>
+</template>

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

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

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

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

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

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

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

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

docs/app/components/example/ExampleModalComponent.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+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>