classcard-ui 0.2.301 → 0.2.302

package/package.json

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -1,9 +1,13 @@
 <template>
   <div>
-    <div v-if="label">
-      <label class="block text-sm font-medium text-gray-900">
-        {{ label }}
-      </label>
+    <div class="flex items-center">
+      <div v-if="label">
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+      </div>
+      <!-- asterisk sign to render if field is required -->
+      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
     </div>
     <v-date-picker
       :class="{ 'inline-block h-full': true, 'w-full': isExpanded }"
@@ -14,12 +18,12 @@
       firstDayOfWeek="2"
     >
       <template v-slot="{ inputValue, togglePopover }">
-        <div class="flex items-center mt-1">
+        <div class="mt-1 flex items-center">
           <button
             type="button"
             :class="[
-              disabled ? 'border-gray-100 pointer-events-none' : 'border-gray-300',
-              'shadow-sm p-2 bg-blue-100 border  hover:bg-blue-200 text-blue-600 rounded-l-md focus:bg-blue-500 focus:text-white focus:border-blue-500 focus:outline-none',
+              disabled ? 'pointer-events-none border-gray-100' : 'border-gray-300',
+              'bg-blue-100 hover:bg-blue-200 text-blue-600 focus:bg-blue-500  focus:border-blue-500 focus:outline-none rounded-l-md border p-2 shadow-sm focus:text-white',
             ]"
             @click="togglePopover()"
           >
@@ -33,9 +37,9 @@
             :value="inputValue"
             :class="[
               disabled
-                ? 'border-gray-100 border-l-0 text-gray-400'
-                : 'border-gray-300 border-l-0 text-gray-900',
-              'shadow-sm bg-white w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
+                ? 'border-l-0 border-gray-100 text-gray-400'
+                : 'border-l-0 border-gray-300 text-gray-900',
+              'focus:outline-none focus:border-blue-500 w-full appearance-none rounded-r-md border  bg-white p-2 text-sm shadow-sm',
             ]"
             :readonly="disabled"
             @click="togglePopover()"
@@ -63,6 +67,9 @@ export default {
     classes: {
       type: String,
     },
+    isRequired: {
+      type: Boolean,
+    },
     label: {
       type: String,
     },

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <label v-if="label" class="text-sm font-medium text-gray-900">{{
-      label
-    }}</label>
+    <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>
     <p v-if="subLabel" class="text-sm text-gray-500">{{ subLabel }}</p>
     <v-select
-      class="text-sm mt-1"
+      class="mt-1 text-sm"
       :placeholder="placeholder"
       :multiple="isMultiple"
       :taggable="isTaggable"
@@ -24,7 +26,7 @@
         <span v-bind="attributes">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 text-gray-400 cursor-pointer"
+            class="h-5 w-5 cursor-pointer text-gray-400"
             viewBox="0 0 20 20"
             fill="currentColor"
           >
@@ -38,14 +40,12 @@
       </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 }">
         <svg
-          class="animate-spin h-5 w-5 text-gray-400"
+          class="h-5 w-5 animate-spin text-gray-400"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -108,6 +108,9 @@ export default {
       required: true,
     },
     label: String,
+    isRequired: {
+      type: Boolean,
+    },
     subLabel: String,
     placeholder: {
       type: String,
@@ -145,7 +148,7 @@ export default {
       type: Function,
     },
     optionsSelected: {
-      type: Array,
+      type: [Array, Object],
     },
     filterable: {
       type: Boolean,
@@ -171,10 +174,7 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value:
-        this.optionsSelected && this.optionsSelected.length
-          ? this.optionsSelected
-          : [],
+      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
     };
   },
   methods: {
@@ -198,17 +198,17 @@ export default {
   @apply cursor-pointer;
 }
 .vs__dropdown-toggle {
-  @apply bg-white w-full border border-gray-300 rounded-md shadow-sm pl-3 py-2 text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
+  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
 }
 .vs__selected-options {
-  @apply overflow-hidden flex-nowrap;
+  @apply flex-nowrap overflow-hidden;
 }
 .vs--open .vs__dropdown-toggle {
   border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity));
   @apply rounded-b-md;
 }
 .vs__selected {
-  @apply border-none m-0 py-0 pl-0 pr-1.5 mr-1;
+  @apply m-0 mr-1 border-none py-0 pl-0 pr-1.5;
 }
 .vs__selected-options {
   @apply pl-0;
@@ -221,7 +221,7 @@ export default {
   @apply pt-0 pr-3;
 }
 .vs__dropdown-menu {
-  @apply mt-2 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm;
+  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;