classcard-ui 0.2.229 → 0.2.233

package/package.json

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

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -45,12 +45,12 @@
         v-for="(button, index) in buttonObject"
         v-bind:key="button.label"
         type="button"
+        class="relative inline-flex items-center px-2 py-2 border-r border-l border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
         :class="{
           'rounded-r-md border-l-0': index == buttonObject.length - 1,
-          'rounded-l-md border-r-0 border-l': index == 0,
+          'rounded-l-md border-r-0': index == 0,
           'px-4': button.label,
         }"
-        class="relative inline-flex items-center px-2 py-2 border-r border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
         @click="buttonAction($event, button.value)"
       >
         <div v-if="button.icon == ''" class="h-5"></div>

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <label v-if="label" class="text-sm text-gray-900">{{ label }}</label>
+    <p v-if="subLabel" class="text-sm text-gray-500">{{ subLabel }}</p>
     <v-select
       class="text-sm mt-1"
       :placeholder="placeholder"
@@ -33,7 +34,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 slot="option" slot-scope="option">
@@ -59,6 +62,9 @@
         </div>
       </template>
     </v-select>
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
   </div>
 </template>
 <script>
@@ -75,7 +81,8 @@ export default {
       required: true,
     },
     label: String,
-    placeholder:{
+    subLabel: String,
+    placeholder: {
       type: String,
       default: "Start typing... (min 2 characters) to search options",
     },
@@ -121,12 +128,22 @@ export default {
       type: Boolean,
       default: true,
     },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
   },
   computed: {},
   data() {
     return {
       loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
     };
   },
   methods: {
@@ -178,7 +195,7 @@ export default {
 .vs__dropdown-toggle.vs__dropdown-option--highlight {
   @apply bg-indigo-700 text-white;
 }
-.vs__dropdown-option--highlight { 
+.vs__dropdown-option--highlight {
   @apply bg-indigo-700 text-white;
 }
 </style>

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -2,7 +2,11 @@
   <div>
     <label class="text-sm text-gray-900">{{ label }}</label>
     <div class="w-full mt-1">
-      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
+      <vue-tel-input
+        v-bind="bindProps"
+        :autoFormat="false"
+        v-model="value"
+      ></vue-tel-input>
     </div>
   </div>
 </template>
@@ -34,6 +38,11 @@ export default {
       },
     };
   },
+  watch: {
+    value(newVal) {
+      this.$emit("onChange", newVal);
+    },
+  },
 };
 </script>
 <style>