20260810223432

code/fms/fms-vue/src/components/ui/command/CommandItem.vue

@@ -1,62 +1,59 @@
 <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 "."
+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 props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ListboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-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)
+    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
+      return true;
     }
 
     // Check with filter
-    return filteredCurrentItem > 0
+    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>
@@ -66,10 +63,17 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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 = ''
-    }"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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>