Initial Commit

2026-10-03 20:07:49 +02:00
commit a1346c98b1
427 changed files with 59320 additions and 0 deletions
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+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<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+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"
+    data-slot="command-item"
+    :class="cn('data-highlighted:bg-muted data-highlighted:text-foreground data-highlighted:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 min-h-7 rounded-xl px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl [&_svg:not([class*=size-])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+    <Icon name="ph:check-fill" class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+  </ListboxItem>
+</template>