From 2bdeb04f56053d00a5536a0350b86d670b9d94e7 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 17 May 2023 15:13:34 +0200
Subject: [PATCH] docs: add CommandPalette async search example

---
 .../examples/CommandPaletteExampleAsync.vue   | 21 +++++++++++
 .../content/4.navigation/2.command-palette.md | 37 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 docs/components/content/examples/CommandPaletteExampleAsync.vue

diff --git a/docs/components/content/examples/CommandPaletteExampleAsync.vue b/docs/components/content/examples/CommandPaletteExampleAsync.vue
new file mode 100644
index 00000000..d4ca13f7
--- /dev/null
+++ b/docs/components/content/examples/CommandPaletteExampleAsync.vue
@@ -0,0 +1,21 @@
+<script setup>
+const groups = computed(() => {
+  return [{
+    key: 'users',
+    label: q => q && `Users matching “${q}”...`,
+    search: async (q) => {
+      if (!q) {
+        return []
+      }
+
+      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+
+      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+    }
+  }].filter(Boolean)
+})
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" :autoselect="false" />
+</template>
diff --git a/docs/content/4.navigation/2.command-palette.md b/docs/content/4.navigation/2.command-palette.md
index adc8fbfe..470f5cfd 100644
--- a/docs/content/4.navigation/2.command-palette.md
+++ b/docs/content/4.navigation/2.command-palette.md
@@ -261,6 +261,43 @@ You can also highlight the matches in the command by setting the `fuse.fuseOptio
 Try it yourself in this documentation's search by pressing :badge-shortcut{value="meta"} :badge-shortcut{value="K" class="ml-1"}.
 ::
 
+## Async search
+
+You can also pass an `async` function to the `search` property of a group to perform an async search. The function will receive the query as its first argument and should return an array of commands.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-example-async{class="h-[274px]"}
+#code
+```vue
+<script setup>
+const groups = computed(() => {
+  return [{
+    key: 'users',
+    label: q => q && `Users matching “${q}”...`,
+    search: async (q) => {
+      if (!q) {
+        return []
+      }
+
+      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+
+      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+    }
+  }].filter(Boolean)
+})
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" />
+</template>
+```
+::
+
 ## Themes
 
 Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.