classcard-ui 0.2.753 → 0.2.755

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.753",
+  "version": "0.2.755",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex w-full items-center justify-between" v-if="label">
+    <div class="mb-1 flex w-full items-center justify-between" v-if="label">
       <div class="flex items-center">
         <!-- label of multiselect field -->
         <label v-if="label" class="text-sm font-medium text-gray-900">{{
@@ -12,7 +12,7 @@
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
     <v-select
-      class="disabled-opacity-50 disabled-pointer-events-none disabled-cursor-default mt-1 text-sm"
+      class="disabled-opacity-50 disabled-pointer-events-none disabled-cursor-default text-sm"
       :placeholder="placeholder"
       :multiple="isMultiple"
       :taggable="isTaggable"

package/src/components/CSelect/CSelect.vue

@@ -20,12 +20,12 @@
           @click="toggleDropdown = !toggleDropdown"
           @focus="type == 'tertiary' ? (showFocus = true) : ''"
           @blur="close()"
-          @keyup="search()"
+          @input="search()"
           aria-haspopup="listbox"
           aria-expanded="true"
           aria-labelledby="listbox-label"
           :class="{ ...classes, [inputClasses]: true }"
-          class="focus:outline-none relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left text-sm disabled:opacity-50 sm:text-sm"
+          class="relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left text-sm focus:outline-none disabled:opacity-50 sm:text-sm"
           :disabled="isDisabled"
           autocomplete="off"
         />
@@ -72,7 +72,11 @@
             v-if="type == 'tertiary' ? showFocus : true"
             class="pointer-events-none right-0 flex items-center"
           >
-            <c-icon name="selector" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
+            <c-icon
+              name="selector"
+              type="solid"
+              class="h-5 w-5 text-gray-400"
+            ></c-icon>
           </div>
         </div>
       </div>
@@ -92,7 +96,7 @@
             tabindex="-1"
             role="listbox"
             aria-labelledby="listbox-label"
-            class="focus:outline-none max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 sm:text-sm"
+            class="max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 focus:outline-none sm:text-sm"
           >
             <li
               v-if="addAction"
@@ -114,7 +118,10 @@
               :ref="`option-${String(index)}`"
               @mousedown="handleSelect($event, option)"
               class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-indigo-700 hover:text-white"
-              :class="[option.isDisabled ? 'pointer-events-none opacity-50' : '', optionClasses]"
+              :class="[
+                option.isDisabled ? 'pointer-events-none opacity-50' : '',
+                optionClasses,
+              ]"
             >
               <span class="flex items-center">
                 <div v-if="option.showImage">
@@ -147,7 +154,9 @@
                 </span>
               </span>
 
-              <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
+              <span
+                class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
+              >
                 <c-icon
                   id="list-icon"
                   v-show="showSelectedValue"
@@ -293,7 +302,8 @@ export default {
       let options = [...this.options];
       this.renderOptions = options.filter((option) => {
         isNumber(option[this.renderOptionName])
-          ? (option[this.renderOptionName] = option[this.renderOptionName].toString())
+          ? (option[this.renderOptionName] =
+              option[this.renderOptionName].toString())
           : "";
         return option[this.renderOptionName]
           .toLowerCase()