classcard-ui 0.2.297 → 0.2.301

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.297",
+  "version": "0.2.301",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -53,6 +53,8 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "postcss": "^7.0.36",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.6",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
     "vue-template-compiler": "^2.6.14"
   },

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/components/CTable/CTable.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <div
-      slot="table-actions"
-      v-if="tableActions"
-      class="bg-gray-50 rounded-lg p-3 mb-4"
-    >
+    <div slot="table-actions" v-if="tableActions" class="mb-4 rounded-lg bg-gray-50 p-3">
       <div class="flex justify-between">
         <div v-if="searching">
           <c-input
@@ -22,55 +18,22 @@
             <div>
               <button
                 @click="handleToggle"
-                class="
-                  inline-flex
-                  justify-center
-                  w-full
-                  rounded-md
-                  border border-gray-200
-                  shadow-sm
-                  px-2
-                  py-2
-                  bg-white
-                  text-sm
-                  font-medium
-                  hover:bg-gray-50
-                  focus:outline-none focus:outline-none
-                  focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600
-                "
+                class="focus:outline-none inline-flex w-full justify-center rounded-md border border-gray-200 bg-white px-2 py-2 text-sm font-medium shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                <c-icon
-                  name="view-board"
-                  type="solid"
-                  class="text-gray-400 h-5 w-5"
-                ></c-icon>
+                <c-icon name="view-board" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
                 <c-icon
                   name="chevron-down"
                   type="solid"
-                  class="ml-1 text-gray-400 h-5 w-5"
+                  class="ml-1 h-5 w-5 text-gray-400"
                 ></c-icon>
               </button>
             </div>
             <!-- dropdown having list of all columns to show hide -->
             <div
               v-if="toggleDropdown"
-              class="
-                origin-top-right
-                absolute
-                right-0
-                mt-2
-                -mr-1
-                w-56
-                rounded-md
-                shadow-lg
-                bg-white
-                ring-1 ring-gray-900 ring-opacity-5
-                z-100
-                overflow-y-auto
-                max-h-96
-              "
+              class="absolute right-0 z-10 mt-2 -mr-1 max-h-96 w-56 origin-top-right overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
               tabindex="0"
               @blur="handleToggle"
             >
@@ -84,15 +47,7 @@
                   href="#"
                   v-for="column in showHideColumnList"
                   v-bind:key="column.field"
-                  class="
-                    flex
-                    block
-                    px-4
-                    py-2
-                    text-sm text-gray-700
-                    hover:bg-gray-100
-                    hover:text-gray-900
-                  "
+                  class="block flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                   role="menuitem"
                 >
                   <c-checkbox
@@ -121,12 +76,10 @@
     </div>
 
     <vue-good-table
-      class="border-solid border-2 border-gray-100 rounded-lg overflow-hidden"
+      class="overflow-hidden rounded-lg border-2 border-solid border-gray-100"
       mode="remote"
       ref="my-table"
-      :styleClass="
-        showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
-      "
+      :styleClass="showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'"
       row-style-class="focus:outline-none"
       min-height="400px"
       :globalSearch="true"
@@ -170,21 +123,21 @@
           <c-icon
             v-if="props.column.direction == null"
             name="sort-ascending-solid"
-            class="h-5 w-5 ml-3 invisible sortingIcon"
+            class="sortingIcon invisible ml-3 h-5 w-5"
             type="solid"
           ></c-icon>
           <!-- renders when direction is asc -->
           <c-icon
             v-else-if="props.column.direction == 'asc'"
             name="sort-ascending-solid"
-            class="h-5 w-5 ml-3"
+            class="ml-3 h-5 w-5"
             type="solid"
           ></c-icon>
           <!-- renders when direction is desc -->
           <c-icon
             v-else-if="props.column.direction == 'desc'"
             name="sort-descending-solid"
-            class="h-5 w-5 ml-3"
+            class="ml-3 h-5 w-5"
             type="solid"
           ></c-icon>
         </span>
@@ -195,11 +148,7 @@
       <template slot="table-row" slot-scope="props">
         <!-- renders if drag and drop is present in table -->
         <span v-if="props.column.field == 'drag'">
-          <c-icon
-            name="menu-solid"
-            type="solid"
-            class="h-5 w-5 text-gray-500 handle"
-          ></c-icon>
+          <c-icon name="menu-solid" type="solid" class="handle h-5 w-5 text-gray-500"></c-icon>
         </span>
         <!-- if customization or adding another form element is required -->
         <span v-else-if="props.column.customizeColumn">
@@ -223,7 +172,7 @@
       <!-- Custom loader for table -->
       <template slot="loadingContent">
         <svg
-          class="animate-spin h-7 w-7 text-white ml-auto mr-auto"
+          class="ml-auto mr-auto h-7 w-7 animate-spin text-white"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -376,12 +325,8 @@ export default {
     },
     // array of rows after drag and drop
     rearrange(oldIndex, newIndex) {
-      const movedItem = this.reorderedArray.find(
-        (item, index) => index === oldIndex
-      );
-      const remainingItems = this.reorderedArray.filter(
-        (item, index) => index !== oldIndex
-      );
+      const movedItem = this.reorderedArray.find((item, index) => index === oldIndex);
+      const remainingItems = this.reorderedArray.filter((item, index) => index !== oldIndex);
       const reorderedItems = [
         ...remainingItems.slice(0, newIndex),
         movedItem,

package/src/icons.js

@@ -39,8 +39,10 @@ export default {
     "M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z",
   integration:
     "M10,13H4a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14A1,1,0,0,0,10,13ZM9,19H5V15H9ZM20,3H14a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V4A1,1,0,0,0,20,3ZM19,9H15V5h4Zm1,7H18V14a1,1,0,0,0-2,0v2H14a1,1,0,0,0,0,2h2v2a1,1,0,0,0,2,0V18h2a1,1,0,0,0,0-2ZM10,3H4A1,1,0,0,0,3,4v6a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V4A1,1,0,0,0,10,3ZM9,9H5V5H9Z",
-  clipboard:
+  "clipboard-solid":
     "M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z",
+  clipboard:
+    "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 2",
   package:
     "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7",
   document:
@@ -199,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"
 };