classcard-ui 0.2.139 → 0.2.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.139",
+  "version": "0.2.140",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -13,7 +13,7 @@
           aria-labelledby="listbox-label"
           :value="inputValue"
           :placeholder="placeholder"
-          @focus="showDropDown = true"
+          @focus="openDropDown()"
           @blur="closeDropDown()"
           @input="onInput"
         />
@@ -52,13 +52,24 @@
         role="listbox"
         aria-labelledby="listbox-label"
         aria-activedescendant="listbox-option-3"
-        v-if="showDropDown && options.length > 0"
+        v-if="(showDropDown && options.length > 0) || isSearching"
       >
+        <div
+          v-if="isSearching"
+          class="w-full h-8 relative block top-0 left-0 bg-white opacity-75 z-50"
+        >
+          <span
+            class="text-gray-500 opacity-75 top-1/4 my-0 mx-auto block relative w-0 h-0"
+          >
+            <c-icon name="loader" class="h-5 w-5"></c-icon>
+          </span>
+        </div>
         <!--
         Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
         Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
       -->
+
         <span v-for="option in options" :key="option.id">
           <li
             class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
@@ -122,14 +133,17 @@
 
 <script>
 import { debounce } from "lodash-es";
+import CIcon from "../CIcon/CIcon.vue";
 
 export default {
   name: "CGroupedSelect",
+  components: { CIcon },
   props: {
     label: String,
     options: Array,
     value: Object,
     placeholder: String,
+    isSearching: Boolean,
   },
   data() {
     return {
@@ -153,6 +167,10 @@ export default {
       this.inputValue = this.value.label;
       this.showDropDown = false;
     },
+    openDropDown() {
+      this.showDropDown = true;
+      this.emitSearch("");
+    },
   },
   watch: {
     value(newValue) {