Clean code.

This commit is contained in:
yuanhau 2025-05-10 22:05:10 +08:00
parent bf357f1c84
commit 5d58016b1d
39 changed files with 481 additions and 381 deletions

View file

@ -1,44 +1,55 @@
<script setup lang="ts">
import type { ListboxGroupProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
import { provideCommandGroupContext, useCommand } from '.'
import type { ListboxGroupProps } from "reka-ui";
import { cn } from "@/lib/utils";
import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
import { computed, type HTMLAttributes, onMounted, onUnmounted } from "vue";
import { provideCommandGroupContext, useCommand } from ".";
const props = defineProps<ListboxGroupProps & {
class?: HTMLAttributes['class']
heading?: string
}>()
const props = defineProps<
ListboxGroupProps & {
class?: HTMLAttributes["class"];
heading?: string;
}
>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
const { allGroups, filterState } = useCommand()
const id = useId()
const { allGroups, filterState } = useCommand();
const id = useId();
const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
const isRender = computed(() =>
!filterState.search ? true : filterState.filtered.groups.has(id),
);
provideCommandGroupContext({ id })
provideCommandGroupContext({ id });
onMounted(() => {
if (!allGroups.value.has(id))
allGroups.value.set(id, new Set())
})
if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
});
onUnmounted(() => {
allGroups.value.delete(id)
})
allGroups.value.delete(id);
});
</script>
<template>
<ListboxGroup
v-bind="delegatedProps"
:id="id"
:class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
:class="
cn(
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
props.class,
)
"
:hidden="isRender ? undefined : true"
>
<ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
<ListboxGroupLabel
v-if="heading"
class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
>
{{ heading }}
</ListboxGroupLabel>
<slot />