command

1<script setup lang="ts">
2import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
6import { reactive, ref, watch } from "vue"
7import { cn } from "@/lib/utils"
8import { provideCommandContext } from "."
9 
10const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
11  modelValue: "",
12})
13 
14const emits = defineEmits<ListboxRootEmits>()
15 
16const delegatedProps = reactiveOmit(props, "class")
17 
18const forwarded = useForwardPropsEmits(delegatedProps, emits)
19 
20const allItems = ref<Map<string, string>>(new Map())
21const allGroups = ref<Map<string, Set<string>>>(new Map())
22 
23const { contains } = useFilter({ sensitivity: "base" })
24const filterState = reactive({
25  search: "",
26  filtered: {
27    /** The count of all visible items. */
28    count: 0,
29    /** Map from visible item id to its search score. */
30    items: new Map() as Map<string, number>,
31    /** Set of groups with at least one visible item. */
32    groups: new Set() as Set<string>,
33  },
34})
35 
36function filterItems() {
37  if (!filterState.search) {
38    filterState.filtered.count = allItems.value.size
39    // Do nothing, each item will know to show itself because search is empty
40    return
41  }
42 
43  // Reset the groups
44  filterState.filtered.groups = new Set()
45  let itemCount = 0
46 
47  // Check which items should be included
48  for (const [id, value] of allItems.value) {
49    const score = contains(value, filterState.search)
50    filterState.filtered.items.set(id, score ? 1 : 0)
51    if (score)
52      itemCount++
53  }
54 
55  // Check which groups have at least 1 item shown
56  for (const [groupId, group] of allGroups.value) {
57    for (const itemId of group) {
58      if (filterState.filtered.items.get(itemId)! > 0) {
59        filterState.filtered.groups.add(groupId)
60        break
61      }
62    }
63  }
64 
65  filterState.filtered.count = itemCount
66}
67 
68watch(() => filterState.search, () => {
69  filterItems()
70})
71 
72provideCommandContext({
73  allItems,
74  allGroups,
75  filterState,
76})
77</script>
78 
79<template>
80  <ListboxRoot
81    v-bind="forwarded"
82    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
83  >
84    <slot />
85  </ListboxRoot>
86</template>