classcard-ui 0.2.251 → 0.2.256

package/package.json

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

package/src/components/CMultiselect/CMultiselect.vue

@@ -15,8 +15,10 @@
       :options="options"
       @input="setSelectedOptions"
       @search="fetchOptions"
+      @search:focus="$emit('search:focus')"
       :label="optionLabel"
       :clearable="clearable"
+      :loading="loading"
     >
       <template #open-indicator="{ attributes }">
         <span v-bind="attributes">
@@ -41,6 +43,29 @@
         >
         <span v-else>No options found, try searching something else.</span>
       </template>
+      <template #spinner="{ loading }">
+        <svg
+          class="animate-spin h-5 w-5 text-gray-400"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          v-if="loading"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+      </template>
       <template slot="option" slot-scope="option">
         <slot name="custom-option" v-bind:option="option"></slot>
       </template>
@@ -137,6 +162,10 @@ export default {
     errorMessage: {
       type: String,
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {},
   data() {

package/src/components/CSelect/CSelect.vue

@@ -43,9 +43,9 @@
             :type="icon.type"
             >
           </c-icon>
-          <span :class="showImage ? 'ml-3' : ''" class="block truncate">
-            {{ selectedValue ? selectedValue : 
-              selectSearch && selectSearch.length > 0 ? null : placeholder  
+          <span :class="showImage ? 'ml-3' : ''" class="block truncate text-sm">
+             {{ selectedValue ? selectedValue : 
+              !selectSearch || selectSearch == '' ? placeholder : null
             }}
           </span>
         </span>
@@ -136,6 +136,7 @@
 <script>
 import CIcon from "../CIcon/CIcon.vue";
 import CAvatar from "../CAvatar/CAvatar.vue";
+import { isNumber } from 'lodash';
 export default {
   name: "CSelect",
   components: { CIcon, CAvatar },
@@ -216,6 +217,7 @@ export default {
   },
   methods: {
     handleSelect(event, option) {
+      this.selectSearch = null;
       this.selectedValue = option[this.renderOptionName];
       this.$emit("onChangeValue", option);
       this.toggleDropdown = false;
@@ -224,18 +226,21 @@ export default {
       this.$emit("listAction", event);
     },
     close() {
+      this.selectSearch = null;
       this.toggleDropdown = false;
       this.type === "tertiary" ? (this.showFocus = false) : "";
     },
     search() {
+      this.selectedValue = null;
       if(!this.selectSearch && this.selectSearch == '') {
           this.renderOptions = this.options;
+          return;
       }
       let options = [...this.options];
       this.renderOptions = options.filter((option) => {
+        isNumber(option[this.renderOptionName]) ? option[this.renderOptionName] = option[this.renderOptionName].toString() : "";
         return option[this.renderOptionName].toLowerCase().includes(this.selectSearch.toLowerCase());
       });
-      console.log(this.renderOptions);
     }
   },
   watch: {
@@ -243,6 +248,9 @@ export default {
       this.selectedValue =
         this.value !== null && this.value.option ? this.value.option : this.value;
     },
+    options() {
+      this.renderOptions = this.options;
+    },
   },
 };
 </script>