forked from BRETT/BRETT
79 lines
2.6 KiB
Vue
79 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
|
|
|
|
import type { HTMLAttributes } from 'vue'
|
|
import { reactiveOmit, useCurrentElement } from '@vueuse/core'
|
|
import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
import { cn } from '@/lib/utils'
|
|
import { useCommand, useCommandGroup } from '.'
|
|
|
|
const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
|
|
const emits = defineEmits<ListboxItemEmits>()
|
|
|
|
const delegatedProps = reactiveOmit(props, 'class')
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
|
|
|
const id = useId()
|
|
const { filterState, allItems, allGroups } = useCommand()
|
|
const groupContext = useCommandGroup()
|
|
|
|
const isRender = computed(() => {
|
|
if (!filterState.search) {
|
|
return true
|
|
}
|
|
else {
|
|
const filteredCurrentItem = filterState.filtered.items.get(id)
|
|
// If the filtered items is undefined means not in the all times map yet
|
|
// Do the first render to add into the map
|
|
if (filteredCurrentItem === undefined) {
|
|
return true
|
|
}
|
|
|
|
// Check with filter
|
|
return filteredCurrentItem > 0
|
|
}
|
|
})
|
|
|
|
const itemRef = ref()
|
|
const currentElement = useCurrentElement(itemRef)
|
|
onMounted(() => {
|
|
if (!(currentElement.value instanceof HTMLElement))
|
|
return
|
|
|
|
// textValue to perform filter
|
|
allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ''))
|
|
|
|
const groupId = groupContext?.id
|
|
if (groupId) {
|
|
if (!allGroups.value.has(groupId)) {
|
|
allGroups.value.set(groupId, new Set([id]))
|
|
}
|
|
else {
|
|
allGroups.value.get(groupId)?.add(id)
|
|
}
|
|
}
|
|
})
|
|
onUnmounted(() => {
|
|
allItems.value.delete(id)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ListboxItem
|
|
v-if="isRender"
|
|
v-bind="forwarded"
|
|
:id="id"
|
|
ref="itemRef"
|
|
data-slot="command-item"
|
|
:class="cn('data-highlighted:bg-muted data-highlighted:text-foreground data-highlighted:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 min-h-7 rounded-xl px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl [&_svg:not([class*=size-])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', props.class)"
|
|
@select="() => {
|
|
filterState.search = ''
|
|
}"
|
|
>
|
|
<slot />
|
|
<Icon name="ph:check-fill" class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
|
|
</ListboxItem>
|
|
</template>
|