|
| 1 | +<script setup lang="ts"> |
| 2 | +import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui' |
| 3 | +import { reactiveOmit, useCurrentElement } from '@vueuse/core' |
| 4 | +import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui' |
| 5 | +import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue' |
| 6 | +import { cn } from '@/lib/shadcn/utils' |
| 7 | +import { useCommand, useCommandGroup } from '~/lib/shadcn/components/ui/command' |
| 8 | +
|
| 9 | +const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>() |
| 10 | +const emits = defineEmits<ListboxItemEmits>() |
| 11 | +
|
| 12 | +const delegatedProps = reactiveOmit(props, 'class') |
| 13 | +
|
| 14 | +const forwarded = useForwardPropsEmits(delegatedProps, emits) |
| 15 | +
|
| 16 | +const id = useId() |
| 17 | +const { filterState, allItems, allGroups } = useCommand() |
| 18 | +const groupContext = useCommandGroup() |
| 19 | +
|
| 20 | +const isRender = computed(() => { |
| 21 | + if (!filterState.search) { |
| 22 | + return true |
| 23 | + } |
| 24 | + else { |
| 25 | + const filteredCurrentItem = filterState.filtered.items.get(id) |
| 26 | + // If the filtered items is undefined means not in the all times map yet |
| 27 | + // Do the first render to add into the map |
| 28 | + if (filteredCurrentItem === undefined) { |
| 29 | + return true |
| 30 | + } |
| 31 | +
|
| 32 | + // Check with filter |
| 33 | + return filteredCurrentItem > 0 |
| 34 | + } |
| 35 | +}) |
| 36 | +
|
| 37 | +const itemRef = ref() |
| 38 | +const currentElement = useCurrentElement(itemRef) |
| 39 | +onMounted(() => { |
| 40 | + if (!(currentElement.value instanceof HTMLElement)) |
| 41 | + return |
| 42 | +
|
| 43 | + // textValue to perform filter |
| 44 | + allItems.value.set(id, currentElement.value.textContent ?? props?.value!.toString()) |
| 45 | +
|
| 46 | + const groupId = groupContext?.id |
| 47 | + if (groupId) { |
| 48 | + if (!allGroups.value.has(groupId)) { |
| 49 | + allGroups.value.set(groupId, new Set([id])) |
| 50 | + } |
| 51 | + else { |
| 52 | + allGroups.value.get(groupId)?.add(id) |
| 53 | + } |
| 54 | + } |
| 55 | +}) |
| 56 | +onUnmounted(() => { |
| 57 | + allItems.value.delete(id) |
| 58 | +}) |
| 59 | +</script> |
| 60 | + |
| 61 | +<template> |
| 62 | + <ListboxItem |
| 63 | + v-if="isRender" |
| 64 | + v-bind="forwarded" |
| 65 | + :id="id" |
| 66 | + ref="itemRef" |
| 67 | + :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)" |
| 68 | + > |
| 69 | + <slot /> |
| 70 | + </ListboxItem> |
| 71 | +</template> |
0 commit comments