87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<script setup>
|
|
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({
|
|
value: { type: null, required: true },
|
|
disabled: { type: Boolean, required: false },
|
|
asChild: { type: Boolean, required: false },
|
|
as: { type: null, required: false },
|
|
class: { type: null, required: false },
|
|
});
|
|
const emits = defineEmits(["select"]);
|
|
|
|
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"
|
|
: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>
|