feat: search ui

open-isle-cli/src/components/Dropdown.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="dropdown" ref="wrapper">
     <div class="dropdown-display" @click="toggle">
-        <slot
+      <slot name="display" :selected="selectedLabels" :toggle="toggle" :search="search" :setSearch="setSearch">
-          name="display"
-          :selected="selectedLabels"
-          :toggle="toggle"
-          :search="search"
-          :setSearch="setSearch"
-        >
         <template v-if="multiple">
           <span v-if="selectedLabels.length">
             <template v-for="(label, idx) in selectedLabels" :key="label.id">

open-isle-cli/src/components/SearchDropdown.vue

@@ -9,12 +9,14 @@
         </div>
       </template>
       <template #option="{ option }">
+        <div class="search-option-item">
           <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.text)"></div>
             <div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div>
             <div v-if="option.extra" class="result-extra" v-html="highlight(option.extra)"></div>
           </div>
+        </div>
       </template>
     </Dropdown>
   </div>
@@ -89,6 +91,11 @@ export default {
   max-width: 600px;
 }
 
+.search-option-item {
+  display: flex;
+  gap: 10px;
+}
+
 .search-option {
   display: flex;
   align-items: center;