35b96042f0
* chore: add storybook * chore: unify FE codeabse * chore: update eslint rules * chore: harmonize the use of "subtle" color * chore: remove an extra sidebar rail * refactor: make panel items more consistent * chore: cleanups after merging new code from base * refactor: refine composables * fix: add lost import * chore: make icon style consistent * fix: don't show empty "supported" methods * refactor: solidify select items
106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @component AppCommandItem
|
|
* @description An individual selectable item within a command group or list.
|
|
*/
|
|
import { cn } from '@/utils/ui';
|
|
import { reactiveOmit, useCurrentElement } from '@vueuse/core';
|
|
import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui';
|
|
import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui';
|
|
import type { HTMLAttributes } from 'vue';
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
|
import { useCommand, useCommandGroup } from '.';
|
|
|
|
/*
|
|
* Types & Interfaces.
|
|
*/
|
|
|
|
export interface AppCommandItemProps extends ListboxItemProps {
|
|
class?: HTMLAttributes['class'];
|
|
}
|
|
|
|
/*
|
|
* Component Setup.
|
|
*/
|
|
|
|
const props = defineProps<AppCommandItemProps>();
|
|
const emits = defineEmits<ListboxItemEmits>();
|
|
|
|
const delegatedProps = reactiveOmit(props, 'class');
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|
|
|
/*
|
|
* Computed & Methods.
|
|
*/
|
|
|
|
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-subtle data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-subtle-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
|
|
props.class,
|
|
)
|
|
"
|
|
@select="
|
|
() => {
|
|
filterState.search = '';
|
|
}
|
|
"
|
|
>
|
|
<slot />
|
|
</ListboxItem>
|
|
</template>
|