Initial Commit

app/components/ui/command/CommandInput.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxFilter, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { InputGroup, InputGroupAddon } from '@/components/ui/input-group'
+import { useCommand } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="p-1 pb-0"
+  >
+    <InputGroup class="bg-input/50 h-8!">
+      <ListboxFilter
+        v-bind="{ ...forwardedProps, ...$attrs }"
+        v-model="filterState.search"
+        data-slot="command-input"
+        auto-focus
+        :class="cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      />
+      <InputGroupAddon>
+        <Icon name="ph:magnifying-glass-fill" class="size-4 shrink-0 opacity-50" />
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+</template>