classcard-ui 0.2.546 → 0.2.549

package/package.json

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

package/src/components/CAvatar/CAvatar.vue

@@ -13,7 +13,7 @@
       <div
         v-else
         :class="nameInitialsClasses"
-        class="text-center bg-red-100 text-red-600 font-medium border-red-300"
+        class="flex-none border-red-300 bg-red-100 text-center font-medium text-red-600"
         :style="[
           size == 'medium' ? { 'line-height': '3rem' } : '',
           size == 'large' ? { 'line-height': '3.5rem' } : '',

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,11 +1,12 @@
 <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>
-    <p v-if="subLabel" class="text-sm text-gray-500">{{ subLabel }}</p>
     <v-select
       class="mt-1 text-sm"
       :placeholder="placeholder"
@@ -42,7 +43,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 }">
@@ -91,7 +94,9 @@
         </div>
       </template>
       <template #list-footer>
-        <li ref="load" class="loader" v-show="hasNextPage">Loading more options...</li>
+        <li ref="load" class="loader" v-show="hasNextPage">
+          Loading more options...
+        </li>
         <li
           v-if="showFooterButton"
           class="group sticky bottom-0 mt-1 cursor-pointer select-none bg-gray-50 py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-100 hover:text-gray-900"
@@ -119,6 +124,8 @@
         </li>
       </template>
     </v-select>
+
+    <p v-if="subLabel" class="text-sm text-gray-500">{{ subLabel }}</p>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -217,7 +224,10 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
       observer: null,
     };
   },
@@ -272,7 +282,7 @@ export default {
   @apply cursor-pointer;
 }
 .vs__dropdown-toggle {
-  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white 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 pl-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
 }
@@ -299,7 +309,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-0 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-0 text-base shadow-lg ring-1 ring-opacity-5 focus:outline-none sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;

package/src/components/CTabs/CTabs.vue

@@ -9,7 +9,9 @@
         class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
         id="tabs"
       >
-        <option v-for="tab in tabs" :key="tab.text">{{ tab.text }}</option>
+        <option v-for="tab in tabs" :key="tab.text" :value="tab.name">
+          {{ tab.text }}
+        </option>
       </select>
       <div>
         <slot :name="tabPanelSlotName"></slot>
@@ -93,7 +95,7 @@ export default {
     },
     switchTabForMobile(index) {
       var selectedOption = this.tabs[index];
-      this.activeTab = selectedOption.text;
+      this.activeTab = selectedOption.name;
     },
     tabHeadSlotName(tabName) {
       return `tab-head-${tabName}`;