classcard-ui 0.2.300 → 0.2.301

package/package.json

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

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,