classcard-ui 0.2.320 → 0.2.323

package/package.json

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

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="flex items-center">
-      <label v-if="label" class="text-sm font-medium text-gray-900">{{ label }}</label>
+      <label v-if="label" class="text-sm font-medium text-gray-900">{{
+        label
+      }}</label>
       <!-- asterisk sign to render if field is required -->
       <p v-if="isRequired" class="ml-1 text-red-600">*</p>
     </div>
@@ -40,7 +42,9 @@
       </template>
       <!-- eslint-disable-next-line vue/no-unused-vars  -->
       <template #no-options="{ search, searching, loading }">
-        <span v-if="search.length < 1">Start typing to search for options...</span>
+        <span v-if="search.length < 1"
+          >Start typing to search for options...</span
+        >
         <span v-else>No options found, try searching something else.</span>
       </template>
       <template #spinner="{ loading }">
@@ -97,6 +101,7 @@
 <script>
 import vSelect from "vue-select";
 import CAvatar from "../CAvatar/CAvatar.vue";
+import { debounce } from "lodash-es";
 // import Fuse from "fuse.js";
 import "vue-select/dist/vue-select.css";
 export default {
@@ -174,13 +179,21 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
+      localSearch: "",
     };
   },
   methods: {
     fetchOptions(search, loaderSearching) {
       this.$emit("getOptions", search, loaderSearching);
+      this.emitSearch(search);
     },
+    emitSearch: debounce((search) => {
+      this.$emit("search", search);
+    }, 500),
     setSelectedOptions(params) {
       this.value = params;
       this.$emit("onSelectOptions", params);
@@ -198,7 +211,7 @@ export default {
   @apply cursor-pointer;
 }
 .vs__dropdown-toggle {
-  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+  @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
 }
 .vs__selected-options {
   @apply flex-nowrap overflow-hidden;
@@ -221,7 +234,7 @@ export default {
   @apply pt-0 pr-3;
 }
 .vs__dropdown-menu {
-  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
+  @apply mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 focus:outline-none sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;