changes

app/components/SearchBox.vue

@@ -34,13 +34,13 @@
             <span class="icon is-left">
               <Icon
                 name="material-symbols:search"
-                :size="22"
+                :size="20"
               />
             </span>
             <span class="icon is-right">
               <Icon
                 name="material-symbols:keyboard-arrow-down-rounded"
-                :size="22"
+                :size="20"
               />
             </span>
           </div>
@@ -54,14 +54,8 @@
               class="dropdown-content px-3"
               style="min-width: 100%"
             >
-              <p
-                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-if="data.length > 0"
                 v-bind="{
                   data: data,
                   name: field,
@@ -71,34 +65,55 @@
                 }"
                 @selected="choose"
               />
+              <p
+                v-else
+                class="has-text-grey px-2 py-1"
+              >
+                <Icon
+                  v-if="isLoading"
+                  name="svg-spinners:90-ring"
+                  :size="22"
+                />
+                <span v-else>Không có giá trị thoả mãn</span>
+              </p>
             </div>
           </div>
         </div>
       </div>
       <div
-        class="control"
         v-if="clearable && value"
+        class="control"
       >
         <button
-          class="button is-primary px-2"
+          class="button is-light"
           @click="clearValue"
           style="height: 100%"
           type="button"
         >
-          <SvgIcon v-bind="{ name: 'close.svg', type: 'white', size: 24 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              name="material-symbols:close-rounded"
+              :size="16"
+            />
+          </span>
         </button>
       </div>
       <div
-        class="control"
         v-if="viewaddon"
+        class="control"
       >
         <button
-          class="button is-dark px-2"
+          class="button is-primary is-light"
           @click="viewInfo()"
           style="height: 100%"
           type="button"
         >
-          <SvgIcon v-bind="{ name: 'view.svg', type: 'white', size: 24 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              name="material-symbols:visibility-rounded"
+              :size="20"
+            />
+          </span>
         </button>
       </div>
       <div
@@ -106,15 +121,15 @@
         v-if="addon"
       >
         <button
-          class="button is-primary"
+          class="button is-success is-light"
           @click="addNew()"
           style="height: 100%"
           type="button"
         >
           <span class="icon">
             <Icon
-              name="material-symbols:add-2-rounded"
-              :size="22"
+              name="material-symbols:add-rounded"
+              :size="18"
             />
           </span>
         </button>
@@ -124,8 +139,7 @@
       @dataevent="dataevent"
       @close="showmodal = undefined"
       v-bind="showmodal"
-      v-if="showmodal"
-    ></Modal>
+    />
   </div>
 </template>
 
@@ -157,6 +171,7 @@ export default {
     return {
       search: undefined,
       data: [],
+      isLoading: false,
       timer: undefined,
       value: undefined,
       selected: undefined,
@@ -266,8 +281,10 @@ export default {
       }
     },
     async getData() {
+      this.isLoading = false;
       this.params.filter = this.filter;
       let data = await this.$getdata(this.api, undefined, this.params);
+      this.isLoading = true;
       return data;
     },
     async getApi(val) {
@@ -373,4 +390,11 @@ export default {
 .field:not(:last-child) {
   margin-bottom: 0;
 }
+.button.is-light {
+  --bulma-button-background-l: 89%;
+}
+.button:hover,
+.button.is-hovered {
+  --bulma-button-background-l-delta: -10%;
+}
 </style>