classcard-ui 0.2.272 → 0.2.273

package/package.json

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

package/src/components/CTable/CTable.vue

@@ -1,10 +1,19 @@
 <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="bg-gray-50 rounded-lg p-3 mb-4"
+    >
       <div class="flex justify-between">
         <div v-if="searching">
-          <c-input v-model="searchTerm" :isValidate="searching" :placeholder="searchPlaceholder" class="-mt-1 w-56" type="text"></c-input>
+          <c-input
+            v-model="searchTerm"
+            :isValidate="searching"
+            :placeholder="searchPlaceholder"
+            class="-mt-1 w-56"
+            type="text"
+          ></c-input>
         </div>
         <div class="flex">
           <!-- dropdown icon on top right of table -->
@@ -13,11 +22,30 @@
             <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="
+                  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
+                "
                 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="text-gray-400 h-5 w-5"
+                ></c-icon>
                 <c-icon
                   name="chevron-down"
                   type="solid"
@@ -28,10 +56,24 @@
             <!-- 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="
+                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
+              "
               tabindex="0"
               @blur="handleToggle"
-              >
+            >
               <div
                 class="py-1"
                 role="menu"
@@ -42,7 +84,15 @@
                   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="
+                    flex
+                    block
+                    px-4
+                    py-2
+                    text-sm text-gray-700
+                    hover:bg-gray-100
+                    hover:text-gray-900
+                  "
                   role="menuitem"
                 >
                   <c-checkbox
@@ -58,7 +108,11 @@
           <div>
             <c-button-icon
               type="white"
-              :icon="{ name: 'download-solid', type: 'solid', class: 'h-5 w-5 text-gray-400' }"
+              :icon="{
+                name: 'download-solid',
+                type: 'solid',
+                class: 'h-5 w-5 text-gray-400',
+              }"
               class="ml-3"
             ></c-button-icon>
           </div>
@@ -70,7 +124,9 @@
       class="border-solid border-2 border-gray-100 rounded-lg overflow-hidden"
       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"
@@ -139,7 +195,11 @@
       <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="h-5 w-5 text-gray-500 handle"
+          ></c-icon>
         </span>
         <!-- if customization or adding another form element is required -->
         <span v-else-if="props.column.customizeColumn">
@@ -163,7 +223,7 @@
       <!-- Custom loader for table -->
       <template slot="loadingContent">
         <svg
-          class="animate-spin h-10 w-10 ml-auto mr-auto"
+          class="animate-spin h-7 w-7 text-white ml-auto mr-auto"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -196,7 +256,7 @@ import CButtonIcon from "../CButtonIcon/CButtonIcon.vue";
 import "vue-good-table/dist/vue-good-table.css";
 import { VueGoodTable } from "vue-good-table";
 import Sortable from "@shopify/draggable/lib/es5/sortable.js";
-import CInput from '../CInput/CInput.vue';
+import CInput from "../CInput/CInput.vue";
 
 export default {
   name: "CTable",
@@ -298,7 +358,7 @@ export default {
     return {
       toggleDropdown: false,
       showLoader: this.isLoading,
-      searchTerm: '',
+      searchTerm: "",
       paginationRecords: this.paginationData,
       reorderedArray: [...this.rows],
     };
@@ -316,15 +376,19 @@ 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,
         ...remainingItems.slice(newIndex),
       ];
       this.reorderedArray = [...reorderedItems];
-      this.$emit('reordered', this.reorderedArray);
+      this.$emit("reordered", this.reorderedArray);
     },
     // listing functions
     sortChange(params) {