From 8ee2a3cf5baaa8ff1cd88aa0c80115a8692df791 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 8 Oct 2022 23:22:06 +0200
Subject: [PATCH] chore(CommandPalette): expose to take control from textarea

---
 .../components/navigation/CommandPalette.vue  | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 8b4e7493..a9b52cc4 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -1,12 +1,13 @@
 <template>
   <Combobox
+    ref="comboboxRef"
     :model-value="modelValue"
     :multiple="multiple"
     :nullable="nullable"
     @update:model-value="onSelect"
   >
     <div class="flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800">
-      <div class="relative flex items-center">
+      <div v-show="searchable" class="relative flex items-center">
         <Icon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
@@ -30,7 +31,7 @@
 
       <div v-else class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
         <Icon :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400" aria-hidden="true" />
-        <p class="mt-4 text-sm u-text-gray-900">
+        <p v-show="searchable" class="mt-4 text-sm text-center u-text-gray-900">
           {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
         </p>
       </div>
@@ -63,6 +64,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  searchable: {
+    type: Boolean,
+    default: true
+  },
   groups: {
     type: Array as PropType<Group[]>,
     default: () => []
@@ -105,6 +110,14 @@ const emit = defineEmits(['update:modelValue', 'close'])
 
 const query = ref('')
 const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
+const comboboxApi = ref(null)
+
+defineExpose({
+  updateQuery: (q) => {
+    query.value = q
+  },
+  comboboxApi
+})
 
 onMounted(() => {
   if (props.autoselect) {
@@ -112,6 +125,17 @@ onMounted(() => {
   }
 })
 
+onMounted(() => {
+  setTimeout(() => {
+    const popoverProvides = comboboxInput.value?.$.provides
+    if (!popoverProvides) {
+      return
+    }
+    const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
+    comboboxApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
+  }, 200)
+})
+
 const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, props.options, {
   fuseOptions: {
     keys: [props.commandAttribute]