replace some el-select with VirtualCombobox

src/components/ui/command/index.js

@@ -0,0 +1,16 @@
+import { createContext } from 'reka-ui';
+
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+export { default as CommandShortcut } from './CommandShortcut.vue';
+
+export const [useCommand, provideCommandContext] = createContext('Command');
+
+export const [useCommandGroup, provideCommandGroupContext] =
+    createContext('CommandGroup');

src/components/ui/dialog/index.js

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

src/components/ui/input/Input.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultValue: { type: [String, Number], required: false },
+  modelValue: { type: [String, Number], required: false },
+  class: { type: null, required: false },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )
+    "
+  />
+</template>

src/components/ui/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";

src/components/ui/virtual-combobox/VirtualCombobox.vue

@@ -1,3 +1,78 @@
+<template>
+    <Popover v-model:open="isOpen">
+        <PopoverTrigger as-child>
+            <Button variant="outline" size="sm" role="combobox" class="w-full justify-between" :disabled="disabled">
+                <slot name="trigger" :text="selectionSummaryText" :clear="clearSelection">
+                    <span class="truncate">
+                        {{ selectionSummaryText || placeholder }}
+                    </span>
+                </slot>
+
+                <div class="flex items-center gap-2">
+                    <span class="opacity-60">▾</span>
+                </div>
+            </Button>
+        </PopoverTrigger>
+
+        <PopoverContent class="w-(--reka-popover-trigger-width) p-2">
+            <Input v-if="searchable" v-model="searchText" :placeholder="searchPlaceholder" class="mb-2" />
+
+            <div
+                ref="scrollContainerRef"
+                class="overflow-auto rounded-md border"
+                :style="{ maxHeight: `${maxHeight}px` }">
+                <div
+                    :style="{
+                        height: `${virtualizer.getTotalSize()}px`,
+                        position: 'relative'
+                    }">
+                    <template v-for="virtualRow in virtualizer.getVirtualItems()" :key="String(virtualRow.key)">
+                        <div
+                            class="absolute left-0 top-0 w-full"
+                            :style="{ transform: `translateY(${virtualRow.start}px)` }">
+                            <template v-if="virtualListEntries[virtualRow.index]?.type === 'group'">
+                                <div
+                                    class="px-2 text-xs font-medium opacity-70 flex items-center"
+                                    :style="{ height: `${groupHeaderHeight}px` }">
+                                    <slot name="group" :group="virtualListEntries[virtualRow.index].group">
+                                        {{ virtualListEntries[virtualRow.index].group.label }}
+                                    </slot>
+                                </div>
+                            </template>
+
+                            <template v-else>
+                                <button
+                                    type="button"
+                                    class="flex w-full items-center gap-2 px-2 text-left"
+                                    :style="{ height: `${itemHeight}px` }"
+                                    @click="toggleSelection(virtualListEntries[virtualRow.index].value)">
+                                    <slot
+                                        name="item"
+                                        :item="virtualListEntries[virtualRow.index].item"
+                                        :selected="selectedValueSet.has(virtualListEntries[virtualRow.index].value)">
+                                        <span class="truncate text-sm">
+                                            {{ virtualListEntries[virtualRow.index].item.label }}
+                                        </span>
+                                        <span
+                                            v-if="selectedValueSet.has(virtualListEntries[virtualRow.index].value)"
+                                            class="ml-auto opacity-70">
+                                            ✓
+                                        </span>
+                                    </slot>
+                                </button>
+                            </template>
+                        </div>
+                    </template>
+
+                    <div v-if="virtualListEntries.length === 0" class="p-3 text-sm opacity-70">
+                        <slot name="empty">Nothing found</slot>
+                    </div>
+                </div>
+            </div>
+        </PopoverContent>
+    </Popover>
+</template>
+
 <script setup>
     import { computed, ref, shallowRef, watch } from 'vue';
     import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -22,7 +97,8 @@
         itemHeight: { type: Number, default: 40 },
         groupHeaderHeight: { type: Number, default: 28 },
 
-        closeOnSelect: { type: Boolean, default: false }
+        closeOnSelect: { type: Boolean, default: false },
+        deselectOnReselect: { type: Boolean, default: false }
     });
 
     const emit = defineEmits(['update:modelValue', 'change', 'clear']);
@@ -31,6 +107,8 @@
     const searchText = ref('');
     const scrollContainerRef = shallowRef(null);
 
+    const normalizedGroups = computed(() => /** @type {Array<any>} */ (props.groups ?? []));
+
     const selectedValueSet = computed(() => {
         if (props.multiple) {
             const values = Array.isArray(props.modelValue) ? props.modelValue : [];
@@ -44,8 +122,8 @@
 
         const entries = [];
 
-        for (const group of props.groups) {
-            const groupItems = Array.isArray(group.items) ? group.items : [];
+        for (const group of normalizedGroups.value) {
+            const groupItems = Array.isArray(group?.items) ? group.items : [];
 
             const filteredItems = normalizedSearch
                 ? groupItems.filter((item) =>
@@ -57,14 +135,14 @@
 
             entries.push({
                 type: 'group',
-                key: `group:${group.key}`,
+                key: `group:${group?.key ?? ''}`,
                 group
             });
 
             for (const item of filteredItems) {
                 entries.push({
                     type: 'item',
-                    key: `item:${group.key}:${item.value}`,
+                    key: `item:${group?.key ?? ''}:${item?.value}`,
                     group,
                     item,
                     value: String(item.value)
@@ -81,8 +159,8 @@
 
         const valueToLabelMap = new Map();
 
-        for (const group of props.groups) {
-            for (const item of group.items ?? []) {
+        for (const group of normalizedGroups.value) {
+            for (const item of group?.items ?? []) {
                 valueToLabelMap.set(String(item.value), item.label);
             }
         }
@@ -103,6 +181,13 @@
             emit('update:modelValue', next);
             emit('change', next);
         } else {
+            if (props.deselectOnReselect && selectedValueSet.value.has(value)) {
+                clearSelection();
+                if (props.closeOnSelect) {
+                    isOpen.value = false;
+                }
+                return;
+            }
             emit('update:modelValue', value);
             emit('change', value);
 
@@ -133,85 +218,3 @@
         virtualizer.value?.scrollToOffset?.(0);
     });
 </script>
-
-<template>
-    <Popover v-model:open="isOpen">
-        <PopoverTrigger as-child>
-            <Button variant="outline" size="sm" role="combobox" class="w-full justify-between" :disabled="disabled">
-                <slot name="trigger" :text="selectionSummaryText" :clear="clearSelection">
-                    <span class="truncate">
-                        {{ selectionSummaryText || placeholder }}
-                    </span>
-                </slot>
-
-                <div class="flex items-center gap-2">
-                    <button
-                        v-if="clearable && selectedValueSet.size && !disabled"
-                        type="button"
-                        class="opacity-60 hover:opacity-90"
-                        @click.stop="clearSelection">
-                        ✕
-                    </button>
-                    <span class="opacity-60">▾</span>
-                </div>
-            </Button>
-        </PopoverTrigger>
-
-        <PopoverContent class="w-(--reka-popover-trigger-width) p-2">
-            <Input v-if="searchable" v-model="searchText" :placeholder="searchPlaceholder" class="mb-2" />
-
-            <div
-                ref="scrollContainerRef"
-                class="overflow-auto rounded-md border"
-                :style="{ maxHeight: `${maxHeight}px` }">
-                <div
-                    :style="{
-                        height: `${virtualizer.getTotalSize()}px`,
-                        position: 'relative'
-                    }">
-                    <template v-for="virtualRow in virtualizer.getVirtualItems()" :key="virtualRow.key">
-                        <div
-                            class="absolute left-0 top-0 w-full"
-                            :style="{ transform: `translateY(${virtualRow.start}px)` }">
-                            <template v-if="virtualListEntries[virtualRow.index]?.type === 'group'">
-                                <div
-                                    class="px-2 text-xs font-medium opacity-70 flex items-center"
-                                    :style="{ height: `${groupHeaderHeight}px` }">
-                                    <slot name="group" :group="virtualListEntries[virtualRow.index].group">
-                                        {{ virtualListEntries[virtualRow.index].group.label }}
-                                    </slot>
-                                </div>
-                            </template>
-
-                            <template v-else>
-                                <button
-                                    type="button"
-                                    class="flex w-full items-center gap-2 px-2 hover:bg-accent text-left"
-                                    :style="{ height: `${itemHeight}px` }"
-                                    @click="toggleSelection(virtualListEntries[virtualRow.index].value)">
-                                    <slot
-                                        name="item"
-                                        :item="virtualListEntries[virtualRow.index].item"
-                                        :selected="selectedValueSet.has(virtualListEntries[virtualRow.index].value)">
-                                        <span class="truncate text-sm">
-                                            {{ virtualListEntries[virtualRow.index].item.label }}
-                                        </span>
-                                        <span
-                                            v-if="selectedValueSet.has(virtualListEntries[virtualRow.index].value)"
-                                            class="ml-auto opacity-70">
-                                            ✓
-                                        </span>
-                                    </slot>
-                                </button>
-                            </template>
-                        </div>
-                    </template>
-
-                    <div v-if="virtualListEntries.length === 0" class="p-3 text-sm opacity-70">
-                        <slot name="empty">Nothing found</slot>
-                    </div>
-                </div>
-            </div>
-        </PopoverContent>
-    </Popover>
-</template>

src/components/ui/virtual-combobox/index.js

@@ -0,0 +1 @@
+export { default as VirtualCombobox } from './VirtualCombobox.vue';