classcard-ui 0.2.664 → 0.2.667

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.664",
+  "version": "0.2.667",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/vue": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/vue": "^6.5.10",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <div class="flex items-center">
-      <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 class="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">{{ label }}</label>
+        <!-- asterisk sign to render if field is required -->
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <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"
@@ -44,9 +46,7 @@
       </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 }">
@@ -76,11 +76,7 @@
         <slot name="custom-option" v-bind:option="option"></slot>
       </template>
       <template v-if="showOptionImage" v-slot:option="option">
-        <div
-          :class="`flex w-full ${
-            option.description ? 'items-start' : 'items-center'
-          }`"
-        >
+        <div :class="`flex w-full ${option.description ? 'items-start' : 'items-center'}`">
           <c-avatar
             v-if="option.image"
             size="extraextrasmall"
@@ -106,9 +102,7 @@
         </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"
@@ -235,15 +229,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    // text adjacent to label of dropdown to provide hint about field
+    hint: { type: String },
   },
   computed: {},
   data() {
     return {
       loaderSearching: true,
-      value:
-        this.optionsSelected && this.optionsSelected.length
-          ? this.optionsSelected
-          : [],
+      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
       observer: null,
     };
   },
@@ -298,7 +291,7 @@ export default {
   @apply cursor-pointer;
 }
 .vs__dropdown-toggle {
-  @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;
+  @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;
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
 }
@@ -326,7 +319,7 @@ export default {
   @apply pt-0 pr-3;
 }
 .vs__dropdown-menu {
-  @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;
+  @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;
 }
 .vs__dropdown-option {
   @apply py-2;

package/src/components/CRadio/CRadio.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="-space-y-px rounded-md bg-white">
+    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
       <div
         v-for="(item, index) in items"
         class="relative pb-4 first:rounded-t-md last:rounded-b-md"
@@ -17,26 +17,17 @@
             class="mt-0.5 h-4 w-4 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
             :disabled="isDisabled"
           />
-          <label
-            class="ml-3 flex cursor-pointer flex-col"
-            @click="onChange(item.value)"
-          >
+          <label class="ml-3 flex cursor-pointer flex-col" @click="onChange(item.value)">
             <span
               class="block text-sm font-medium text-gray-900"
-              :class="
-                customClasses && item.value === selectedItem
-                  ? 'text-indigo-900'
-                  : ''
-              "
+              :class="customClasses && item.value === selectedItem ? 'text-indigo-900' : ''"
             >
               {{ item[labelName] }}
             </span>
             <span
               class="block text-sm"
               :class="
-                customClasses && item.value === selectedItem
-                  ? 'text-indigo-700'
-                  : 'text-gray-500'
+                customClasses && item.value === selectedItem ? 'text-indigo-700' : 'text-gray-500'
               "
             >
               {{ item.description }}
@@ -67,14 +58,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    customWrapperClasses: {
+      type: String,
+    },
     name: {
       type: String,
       required: true,
     },
-    labelName:{
-      type:String,
-      default:'label'
-    }
+    labelName: {
+      type: String,
+      default: "label",
+    },
   },
   data() {
     return {
@@ -91,18 +85,10 @@ export default {
     classes(item, index) {
       let classForRadio = "";
       if (item.value === this.selectedItem && index === 0) {
-        classForRadio =
-          "border p-4 border-indigo-200 rounded-t-md bg-indigo-50";
-      } else if (
-        item.value === this.selectedItem &&
-        index === this.items.length - 1
-      ) {
-        classForRadio =
-          "border p-4 border-indigo-200 rounded-b-md bg-indigo-50";
-      } else if (
-        item.value === this.selectedItem &&
-        0 < index < this.items.length - 1
-      ) {
+        classForRadio = "border p-4 border-indigo-200 rounded-t-md bg-indigo-50";
+      } else if (item.value === this.selectedItem && index === this.items.length - 1) {
+        classForRadio = "border p-4 border-indigo-200 rounded-b-md bg-indigo-50";
+      } else if (item.value === this.selectedItem && 0 < index < this.items.length - 1) {
         classForRadio = "border p-4 border-indigo-200 bg-indigo-50";
       } else {
         classForRadio = "border p-4 border-gray-200";

package/src/components/CSelect/CSelect.vue

@@ -13,7 +13,7 @@
     </div>
 
     <div class="relative">
-      <div class="relative truncate" :class="label ? 'mt-1' : ''">
+      <div class="relative" :class="label ? 'mt-1' : ''">
         <input
           type="text"
           v-model="selectSearch"