changes

app/components/SearchBox.vue

@@ -4,9 +4,9 @@
       class="field has-addons"
       :id="docid"
     >
-      <div class="control has-icons-left is-expanded">
+      <div class="control has-icons-left has-icons-right is-expanded">
         <div
-          :class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`"
+          :class="['dropdown', pos, { 'is-active': focused }]"
           style="width: 100%"
         >
           <div
@@ -14,16 +14,35 @@
             style="width: 100%"
           >
             <input
+              :class="[
+                'input',
+                {
+                  'is-danger': error,
+                  'has-text-dark': disabled,
+                },
+              ]"
               :disabled="disabled"
-              :class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-dark' : ''}`"
               type="text"
               @focus="setFocus"
               @blur="lostFocus"
               @keyup.enter="pressEnter"
+              @keyup.esc="lostFocus"
               @keyup="beginSearch"
               v-model="value"
               :placeholder="placeholder"
             />
+            <span class="icon is-left">
+              <Icon
+                name="material-symbols:search"
+                :size="22"
+              />
+            </span>
+            <span class="icon is-right">
+              <Icon
+                name="material-symbols:keyboard-arrow-down-rounded"
+                :size="22"
+              />
+            </span>
           </div>
           <div
             class="dropdown-menu"
@@ -36,12 +55,13 @@
               style="min-width: 100%"
             >
               <p
-                class="has-text-warning"
                 v-if="data.length === 0"
+                class="has-text-grey px-2 py-1"
               >
                 {{ isVietnamese ? "Không có giá trị thỏa mãn" : "No matching values" }}
               </p>
               <ScrollBox
+                v-else
                 v-bind="{
                   data: data,
                   name: field,
@@ -50,14 +70,10 @@
                   notick: true,
                 }"
                 @selected="choose"
-                v-else
-              ></ScrollBox>
+              />
             </div>
           </div>
         </div>
-        <span class="icon is-left">
-          <SvgIcon v-bind="{ name: 'magnify.svg', type: 'gray', size: 22 }"></SvgIcon>
-        </span>
       </div>
       <div
         class="control"
@@ -90,12 +106,17 @@
         v-if="addon"
       >
         <button
-          class="button is-primary px-2"
+          class="button is-primary"
           @click="addNew()"
           style="height: 100%"
           type="button"
         >
-          <SvgIcon v-bind="{ name: 'add1.png', type: 'white', size: 24 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              name="material-symbols:add-2-rounded"
+              :size="22"
+            />
+          </span>
         </button>
       </div>
     </div>