feat(command-bar): context api (input, select, etc.)

Author: Gianthard-cyh

app/components/CommandBar.vue

@@ -1,29 +1,28 @@
 <template>
   <Transition name="fade">
     <div
-      class="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      class="fixed inset-0 z-[1000] flex items-start justify-center bg-black/50 backdrop-blur-sm"
       v-show="show"
     >
       <div
-        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2"
+        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2 mt-5rem"
       >
         <label for="command-input" class="sr-only">command-input</label>
 
         <search class="relative w-xl h-12 flex items-center">
           <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none"> > </span>
           <input
             type="text"
-            label="Enter command..."
             v-model="inputVal"
             id="command-input"
             ref="inputRef"
             class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
-            placeholder="Enter command..."
+            :placeholder="placeholderText"
             @keydown="handleKeydown"
           />
         </search>
 
-        <div class="w-xl h-lg overflow-auto">
+        <div class="w-xl max-h-lg overflow-auto" v-if="view.type != 'INPUT'">
           <div
             v-for="item in filteredCmdList"
             :key="item.id"
@@ -32,7 +31,7 @@
               'bg-bg-subtle': item.id === selected,
               'trigger-anim': item.id === triggeringId,
             }"
-            @click="triggerCommand(item.id)"
+            @click="onTrigger(item.id)"
           >
             <div class="text-fg">{{ item.name }}</div>
             <div class="text-fg-subtle text-sm">{{ item.description }}</div>
@@ -44,6 +43,27 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
+
+type ViewState =
+  | { type: 'ROOT' }
+  | { type: 'INPUT'; prompt: string; resolve: (val: string) => void }
+  | { type: 'SELECT'; prompt: string; items: any[]; resolve: (val: any) => void }
+const view = ref<ViewState>({ type: 'ROOT' })
+
+const cmdCtx: CommandContext = {
+  async input(options) {
+    return new Promise(resolve => {
+      view.value = { type: 'INPUT', prompt: options.prompt, resolve }
+    })
+  },
+  async select(options) {
+    return new Promise(resolve => {
+      view.value = { type: 'SELECT', prompt: options.prompt, items: options.items, resolve }
+    })
+  },
+}
+
 const { commands } = useCommandRegistry()
 
 const selected = shallowRef(commands.value[0]?.id || '')
@@ -54,13 +74,26 @@ const inputRef = useTemplateRef('inputRef')
 
 const { focused: inputFocused } = useFocus(inputRef)
 
+const placeholderText = computed(() => {
+  if (view.value.type === 'INPUT' || view.value.type === 'SELECT') {
+    return view.value.prompt
+  }
+  return t('command.placeholder')
+})
+
 const filteredCmdList = computed(() => {
+  if (view.value.type === 'INPUT') {
+    return []
+  }
+
+  const list = view.value.type === 'SELECT' ? view.value.items : commands.value
+
   if (!inputVal.value) {
-    return commands.value
+    return list
   }
   const filter = inputVal.value.trim().toLowerCase()
-  return commands.value.filter(
-    item =>
+  return list.filter(
+    (item: any) =>
       item.name.toLowerCase().includes(filter) ||
       item.description?.toLowerCase().includes(filter) ||
       item.id.includes(filter),
@@ -84,6 +117,7 @@ function open() {
   inputVal.value = ''
   selected.value = commands.value[0]?.id || ''
   show.value = true
+  view.value = { type: 'ROOT' }
   nextTick(focusInput)
 }
 
@@ -101,20 +135,36 @@ function toggle() {
   }
 }
 
-function triggerCommand(id: string) {
-  const selectedItem = filteredCmdList.value.find(item => item.id === id)
-  selectedItem?.handler?.({} as CommandContext)
+function onTrigger(id: string) {
   triggeringId.value = id
-  setTimeout(() => {
+
+  if (view.value.type === 'ROOT') {
+    const selectedItem = filteredCmdList.value.find((item: any) => item.id === id)
+    selectedItem?.handler?.(cmdCtx)
+    setTimeout(() => {
+      triggeringId.value = ''
+      if (view.value.type === 'ROOT') {
+        close()
+      }
+    }, 100)
+  } else if (view.value.type === 'INPUT') {
+    view.value.resolve(inputVal.value)
+    close()
+  } else if (view.value.type === 'SELECT') {
+    const selectedItem = filteredCmdList.value.find((item: any) => item.id === id)
+    view.value.resolve(selectedItem)
     close()
-    triggeringId.value = ''
-  }, 100)
+  }
 }
 
 const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
-  if (!filteredCmdList.value.length) return
+  if (view.value.type === 'INPUT' && e.key === 'Enter') {
+    e.preventDefault()
+    onTrigger('') // Trigger for input doesn't need ID
+    return
+  }
 
-  const currentIndex = filteredCmdList.value.findIndex(item => item.id === selected.value)
+  const currentIndex = filteredCmdList.value.findIndex((item: any) => item.id === selected.value)
 
   if (e.key === 'ArrowDown') {
     e.preventDefault()
@@ -127,7 +177,7 @@ const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
     selected.value = filteredCmdList.value[prevIndex]?.id || ''
   } else if (e.key === 'Enter') {
     e.preventDefault()
-    triggerCommand(selected.value)
+    onTrigger(selected.value)
   } else if (e.key === 'Escape') {
     e.preventDefault()
     close()

app/components/InstallCommandTerminal.vue

@@ -2,6 +2,8 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { PackageManagerId } from '~/utils/install-command'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   packageName: string
   requestedVersion?: string | null
@@ -93,6 +95,37 @@ const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+
+registerScopedCommand({
+  id: 'package:install',
+  name: t('command.copy_install'),
+  description: t('command.copy_install_desc'),
+  handler: async () => {
+    copyInstallCommand()
+  },
+})
+
+if (props.executableInfo?.hasExecutable) {
+  registerScopedCommand({
+    id: 'packages:copy-run',
+    name: t('command.copy_run'),
+    description: t('command.copy_run_desc'),
+    handler: async () => {
+      copyRunCommand()
+    },
+  })
+}
+
+if (props.createPackageInfo) {
+  registerScopedCommand({
+    id: 'packages:copy-create',
+    name: t('command.copy_create'),
+    description: t('command.copy_create_desc'),
+    handler: async () => {
+      copyCreateCommand()
+    },
+  })
+}
 </script>
 
 <template>

app/plugins/commands.ts

@@ -1,11 +1,22 @@
 export default defineNuxtPlugin(() => {
   const { register } = useCommandRegistry()
+  const router = useRouter()
+
   register({
-    id: 'npmx:hello',
-    name: 'Hello',
-    description: 'Say hello to npmx',
+    id: 'packages:search',
+    name: 'Search Packages',
+    description: 'Search for npm packages',
     handler: async () => {
-      console.log('Hello npmx!')
+      const searchInput = document.querySelector<HTMLInputElement>(
+        'input[type="search"], input[name="q"]',
+      )
+
+      if (searchInput) {
+        searchInput.focus()
+        return
+      }
+
+      router.push('/search')
     },
   })
 })

i18n/locales/en.json

@@ -748,5 +748,14 @@
       "empty": "No organizations found",
       "view_all": "View all"
     }
+  },
+  "command": {
+    "placeholder": "Enter command...",
+    "copy_install": "Copy install command",
+    "copy_install_desc": "Copy install command to clipboard",
+    "copy_run": "Copy run command",
+    "copy_run_desc": "Copy run command to clipboard",
+    "copy_create": "Copy create command",
+    "copy_create_desc": "Copy create command to clipboard"
   }
 }

i18n/locales/zh-CN.json

@@ -747,5 +747,14 @@
       "empty": "未找到组织",
       "view_all": "查看全部"
     }
+  },
+  "command": {
+    "placeholder": "输入命令...",
+    "copy_install": "复制安装命令",
+    "copy_install_desc": "复制安装命令到剪贴板",
+    "copy_run": "复制运行命令",
+    "copy_run_desc": "复制运行命令到剪贴板",
+    "copy_create": "复制创建命令",
+    "copy_create_desc": "复制创建命令到剪贴板"
   }
 }