yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 21:14:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Clean code.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

87
components/ui/command/CommandItem.vue
View file

@ -1,32 +1,39 @@
<script setup lang="ts">
import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { useCurrentElement } from '@vueuse/core'
import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
import { useCommand, useCommandGroup } from '.'
import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
import { cn } from "@/lib/utils";
import { useCurrentElement } from "@vueuse/core";
import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
import {
computed,
type HTMLAttributes,
onMounted,
onUnmounted,
ref,
} from "vue";
import { useCommand, useCommandGroup } from ".";
const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<ListboxItemEmits>()
const props = defineProps<
ListboxItemProps & { class?: HTMLAttributes["class"] }
>();
const emits = defineEmits<ListboxItemEmits>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
const id = useId()
const { filterState, allItems, allGroups } = useCommand()
const groupContext = useCommandGroup()
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)
} 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) {
@ -36,30 +43,31 @@ const isRender = computed(() => {
// Check with filter
return filteredCurrentItem > 0;
}
})
});
const itemRef = ref()
const currentElement = useCurrentElement(itemRef)
const itemRef = ref();
const currentElement = useCurrentElement(itemRef);
onMounted(() => {
if (!(currentElement.value instanceof HTMLElement))
return
if (!(currentElement.value instanceof HTMLElement)) return;
// textValue to perform filter
allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
allItems.value.set(
id,
currentElement.value.textContent ?? props.value.toString(),
);
const groupId = groupContext?.id
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)
allGroups.value.set(groupId, new Set([id]));
} else {
allGroups.value.get(groupId)?.add(id);
}
}
})
});
onUnmounted(() => {
allItems.value.delete(id)
})
allItems.value.delete(id);
});
</script>
<template>
@ -68,10 +76,17 @@ onUnmounted(() => {
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 = ''
}"
: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>