src/components/SelectInput.vue

@@ -44,15 +44,15 @@ const submit = () => {
 </script>
 
 <template>
-    <div @click="isOpen = true" v-on-click-outside="() => isOpen = false">
+    <div class="relative" @click="isOpen = true" v-on-click-outside="() => isOpen = false">
       <div class="fake-input" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp">
         <slot name="input" :value="modelValue" />
       </div>
-        <div v-if="isOpen && items.length" class="z-20 absolute">
+        <div v-if="isOpen && items.length" class="z-20 absolute w-full">
             <div v-bind="containerProps" class="rounded-b" style="height: 300px">
                 <div v-bind="wrapperProps">
                     <div v-for="s in list" :key="s.index"
-                        class="hover:bg-slate-700 cursor-pointer"
+                        class="hover:bg-slate-700 cursor-pointer overflow-hidden"
                         :class="s.index === currentIndex ? 'bg-emerald-500' : 'bg-slate-500'"
                         @click.stop="select(s.data)">
                         <slot name="item" :item="s.data" />

src/market/location/MarketLocation.ts

@@ -5,11 +5,26 @@ export type MarketLocation = MarketLocationResponse;
 
 const cache = new Map<number, MarketLocation>();
 
+const defaultHubIds = [
+    60003760, // Jita IV - Moon 4 - Caldari Navy Assembly Plant
+    60008494, // Amarr VIII (Oris) - Emperor Family Academy
+    60011866, // Dodixie IX - Moon 20 - Federation Navy Assembly Plant
+    60004588, // Rens VI - Moon 8 - Brutor Tribe Treasury
+    60005686, // Hek VIII - Moon 12 - Boundless Creation Factory
+];
+
+const hubRank = (id: number) => {
+    const rank = defaultHubIds.indexOf(id);
+    return rank < 0 ? defaultHubIds.length : rank;
+};
+
+export const isDefaultHub = (id: number): boolean => defaultHubIds.includes(id);
+
 export const searchMarketLocations = async (search: string): Promise<MarketLocation[]> => {
     if (search.length === 0) {
         return [];
     }
     const locations = await universeApi.searchLocations(search).then(r => r.data);
     locations.forEach(l => cache.set(l.id, l));
-    return locations;
+    return locations.toSorted((a, b) => hubRank(a.id) - hubRank(b.id));
 };

src/market/location/MarketLocationInput.vue

@@ -1,22 +1,14 @@
 <script setup lang="ts">
-import {vOnClickOutside} from '@vueuse/components';
 import {watchDebounced} from '@vueuse/core';
 import {ref, watch} from 'vue';
-import {MarketLocation, searchMarketLocations} from './MarketLocation';
+import {SelectInput} from '@/components';
+import {isDefaultHub, MarketLocation, searchMarketLocations} from './MarketLocation';
 
 const modelValue = defineModel<MarketLocation>();
 
-const isOpen = ref(false);
 const search = ref(modelValue.value?.name ?? '');
 const suggestions = ref<MarketLocation[]>([]);
 
-const select = (location: MarketLocation) => {
-    modelValue.value = location;
-    search.value = location.name;
-    suggestions.value = [];
-    isOpen.value = false;
-};
-
 watch(() => modelValue.value, v => {
     search.value = v?.name ?? '';
 });
@@ -24,7 +16,7 @@ watch(() => modelValue.value, v => {
 watchDebounced(search, async value => {
     const term = value.trim();
 
-    if (!isOpen.value || term.length < 3 || term === modelValue.value?.name) {
+    if (term.length < 3 || term === modelValue.value?.name) {
         suggestions.value = [];
     } else {
         suggestions.value = await searchMarketLocations(term);
@@ -33,19 +25,22 @@ watchDebounced(search, async value => {
 </script>
 
 <template>
-    <div @click="isOpen = true" v-on-click-outside="() => isOpen = false">
+    <SelectInput v-model="modelValue" :items="suggestions" class="w-96">
-        <input type="text" class="w-96" v-model="search" placeholder="Search a market location…" />
+        <template #input>
-        <div v-if="isOpen && suggestions.length > 0" class="z-20 absolute w-96">
+            <input type="text" v-model="search" placeholder="Search a market location…" />
-            <div class="rounded-b bg-slate-500 max-h-72 overflow-y-auto">
+        </template>
-                <div
+        <template #item="{ item }">
-                    v-for="s in suggestions"
+            <div class="px-1 whitespace-nowrap overflow-hidden text-ellipsis" :class="{'text-emerald-400': isDefaultHub(item.id)}">
-                    :key="s.id"
+                {{ item.name }} <span class="text-slate-300">({{ item.regionName }})</span>
-                    class="px-1 py-0.5 cursor-pointer whitespace-nowrap overflow-hidden hover:bg-slate-700"
-                    @click="select(s)"
-                >
-                    {{ s.name }} <span class="text-slate-300">({{ s.regionName }})</span>
-                </div>
-            </div>
-        </div>
             </div>
         </template>
+    </SelectInput>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+input {
+    @apply w-full border-none bg-transparent block focus-visible:outline-none;
+    box-sizing: border-box;
+}
+</style>