mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { cn } from "@/lib/utils";
|
|
import { useCurrentElement } from "@vueuse/core";
|
|
import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
|
|
import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
|
|
import {
|
|
type HTMLAttributes,
|
|
computed,
|
|
onMounted,
|
|
onUnmounted,
|
|
ref,
|
|
} from "vue";
|
|
import { useCommand, useCommandGroup } from ".";
|
|
|
|
const props = defineProps<
|
|
ListboxItemProps & { class?: HTMLAttributes["class"] }
|
|
>();
|
|
const emits = defineEmits<ListboxItemEmits>();
|
|
|
|
const delegatedProps = computed(() => {
|
|
const { class: _, ...delegated } = props;
|
|
|
|
return delegated;
|
|
});
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|
|
|
const id = useId();
|
|
const { filterState, allItems, allGroups } = useCommand();
|
|
const groupContext = useCommandGroup();
|
|
|
|
const isRender = computed(() => {
|
|
if (filterState.search) {
|
|
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;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
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.get(groupId)?.add(id);
|
|
} else {
|
|
allGroups.value.set(groupId, new Set([id]));
|
|
}
|
|
}
|
|
});
|
|
onUnmounted(() => {
|
|
allItems.value.delete(id);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ListboxItem
|
|
v-if="isRender"
|
|
v-bind="forwarded"
|
|
:id="id"
|
|
ref="itemRef"
|
|
: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
|
|
)
|
|
"
|
|
@select="
|
|
() => {
|
|
filterState.search = '';
|
|
}
|
|
"
|
|
>
|
|
<slot />
|
|
</ListboxItem>
|
|
</template>
|