classcard-ui 0.2.299 → 0.2.303

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.299",
+  "version": "0.2.303",
   "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()"
@@ -43,7 +47,11 @@
         </div>
       </template>
     </v-date-picker>
-    <p v-if="helpText" class="mt-1 text-sm text-gray-500">
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
       {{ helpText }}
     </p>
   </div>
@@ -63,6 +71,9 @@ export default {
     classes: {
       type: String,
     },
+    isRequired: {
+      type: Boolean,
+    },
     label: {
       type: String,
     },
@@ -84,6 +95,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
   },
   data() {
     const masks = {

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;

package/src/components/CSelect/CSelect.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="flex justify-between w-full" v-if="label">
+    <div class="flex w-full justify-between" v-if="label">
       <div class="flex items-center">
         <!-- label of select field -->
         <label class="block text-sm font-medium text-gray-900">
           {{ label }}
         </label>
         <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="text-red-600 ml-1">*</p>
+        <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>
@@ -24,12 +24,12 @@
         aria-expanded="true"
         aria-labelledby="listbox-label"
         :class="classes"
-        class="relative w-full rounded-md pl-3 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm disabled:opacity-50"
+        class="focus:outline-none relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left disabled:opacity-50 sm:text-sm"
         :disabled="isDisabled"
       />
 
-      <div class="absolute top-2 left-3 flex pointer-events-none">
-        <span class="flex items-center">
+      <div class="pointer-events-none absolute top-2 left-3 flex">
+        <span class="flex items-center" :style="selectedOptionStyles">
           <c-avatar
             v-if="showImage && !selectSearch"
             size="extraextrasmall"
@@ -54,10 +54,10 @@
           </span>
         </span>
       </div>
-      <div class="absolute top-2.5 right-3 flex pointer-events-none">
+      <div class="pointer-events-none absolute top-2.5 right-3 flex">
         <div
           v-if="type == 'tertiary' ? showFocus : true"
-          class="right-0 flex items-center pointer-events-none"
+          class="pointer-events-none right-0 flex items-center"
         >
           <c-icon name="selector" type="solid" class="h-5 w-5"></c-icon>
         </div>
@@ -72,22 +72,22 @@
       >
         <div
           v-if="toggleDropdown && !isDisabled"
-          class="absolute mt-1 rounded-md bg-white shadow-lg z-10 w-full"
+          class="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg"
         >
           <ul
             tabindex="-1"
             role="listbox"
             aria-labelledby="listbox-label"
-            class="max-h-60 rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+            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"
           >
             <li
               v-if="addAction"
               @mousedown="actionEvent($event)"
-              class="flex hover:bg-indigo-100 text-indigo-500 hover:text-indigo-700 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+              class="relative flex cursor-pointer select-none py-2 pl-3 pr-9 text-indigo-500 hover:bg-indigo-100 hover:text-indigo-700"
             >
               <c-icon
                 type="outline"
-                class="h-5 w-5 mr-1 text-indigo-400 group-hover:text-indigo-500"
+                class="mr-1 h-5 w-5 text-indigo-400 group-hover:text-indigo-500"
                 name="plus"
               ></c-icon>
               {{ addAction.label }}
@@ -98,8 +98,8 @@
               id="listbox-option-0"
               role="option"
               @mousedown="handleSelect($event, option)"
-              class="text-gray-900 hover:bg-indigo-700 hover:text-white select-none relative py-2 pl-3 pr-9 cursor-pointer"
-              :class="option.isDisabled ? 'opacity-50 pointer-events-none' : ''"
+              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' : ''"
             >
               <span class="flex items-center">
                 <c-avatar
@@ -110,12 +110,12 @@
                 ></c-avatar>
                 <span
                   :class="showImage && option.image ? 'ml-3' : ''"
-                  class="font-normal block break-words list-options"
+                  class="list-options block break-words font-normal"
                   >{{ option[renderOptionName] }}
                 </span>
               </span>
 
-              <span class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
+              <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
                 <c-icon
                   id="list-icon"
                   v-show="showSelectedValue"
@@ -129,7 +129,7 @@
         </div>
       </transition>
       <!-- validation error message -->
-      <p v-if="!isValidate" class="mt-2 text-sm text-left text-red-600">
+      <p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
         {{ errorMessage }}
       </p>
       <p v-if="helpText" class="mt-2 text-sm text-gray-500">
@@ -173,6 +173,10 @@ export default {
     },
     // validation is passed or not
     isValidate: { type: Boolean },
+    // will truncate the text in input field
+    selectedOptionStyles: {
+      type: String,
+    },
     // validation error message
     errorMessage: {
       type: String,

package/src/icons.js

@@ -201,4 +201,6 @@ export default {
     "M9 2a1 1 0 000 2h2a1 1 0 100-2H9z M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z",
   "clipboard-check-outline":
     "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4",
+  "home":
+    "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
 };