classcard-ui 0.2.139 → 0.2.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.139",
+  "version": "0.2.143",
   "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"
         />
@@ -54,11 +54,22 @@
         aria-activedescendant="listbox-option-3"
         v-if="showDropDown && options.length > 0"
       >
+        <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"
@@ -81,7 +92,7 @@
                 subOption.label === value.label
                   ? 'font-semibold'
                   : 'font-normal',
-                ' block truncate',
+                ' block break-words',
               ]"
             >
               {{ subOption.label }}
@@ -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 {
@@ -143,7 +157,11 @@ export default {
       this.emitSearch(e.target.value);
     },
     emitSearch: debounce(function (value) {
-      this.$emit("search", value);
+      if (value !== this.value.label) {
+        this.$emit("search", value);
+      } else {
+        this.$emit("search", "");
+      }
     }, 500),
     handleOptionClick(option) {
       this.$emit("input", option);
@@ -153,6 +171,10 @@ export default {
       this.inputValue = this.value.label;
       this.showDropDown = false;
     },
+    openDropDown() {
+      this.showDropDown = true;
+      this.emitSearch("");
+    },
   },
   watch: {
     value(newValue) {