classcard-ui 0.2.799 → 0.2.801

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.799",
+  "version": "0.2.801",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -26,6 +26,7 @@
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
     "lodash-es": "^4.17.21",
+    "skeleton-loader-vue": "^1.0.10",
     "v-calendar": "^2.3.2",
     "v-scroll-lock": "^1.3.1",
     "vue": "^2.6.14",

package/src/components/CTable/CTable.vue

@@ -166,13 +166,10 @@
       }`"
       mode="remote"
       ref="my-table"
-      :styleClass="
-        showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
-      "
+      styleClass="vgt-table"
       :row-style-class="rowStyleClassFn"
       min-height="400px"
       :globalSearch="true"
-      :isLoading="showLoader"
       :totalRows="totalRecords"
       :columns="cols"
       :rows="rows"
@@ -235,6 +232,19 @@
           {{ props.column.label }}
         </span>
       </template>
+      <div slot="emptystate">
+        <vue-skeleton-loader
+          v-for="(item, index) in 10"
+          :key="index"
+          type="table-tbody: table-row-divider@6"
+          animation="fade"
+          :width="1220"
+          :rounded="true"
+          :radius="6"
+          class="skeleton mt-2"
+          :height="50"
+        ></vue-skeleton-loader>
+      </div>
       <template slot="table-row" slot-scope="props">
         <!-- renders if drag and drop is present in table -->
         <span v-if="props.column.field == 'drag'">
@@ -264,30 +274,6 @@
           @setNextPage="setNextPageRecords"
         ></c-pagination>
       </template>
-      <!-- Custom loader for table -->
-      <template slot="loadingContent">
-        <svg
-          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"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          ></circle>
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-      </template>
-      <!-- <div slot="emptystate"></div> -->
     </vue-good-table>
   </div>
 </template>
@@ -302,6 +288,7 @@ import { VueGoodTable } from "vue-good-table";
 import Sortable from "@shopify/draggable/lib/es5/sortable.js";
 import CInput from "../CInput/CInput.vue";
 import { debounce, isEqual } from "lodash-es";
+import VueSkeletonLoader from "skeleton-loader-vue";
 
 export default {
   name: "CTable",
@@ -312,6 +299,7 @@ export default {
     CPagination,
     CButtonIcon,
     CInput,
+    VueSkeletonLoader,
   },
   props: {
     // To show or hide pagination section
@@ -338,10 +326,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    // To show and hide loader on table
-    isLoading: {
-      type: Boolean,
-    },
     // All the buttons displayed on top right side of table
     tableActions: {
       type: Boolean,
@@ -449,11 +433,14 @@ export default {
     return {
       toggleDropdown: false,
       toggleDownloadDropdown: false,
-      showLoader: this.isLoading,
       searchTerm: this.searchQuery ? this.searchQuery : "",
       paginationRecords: this.paginationData,
       reorderedArray: [...this.rows],
       controlClick: false,
+      attrs: {
+        boilerplate: true,
+        elevation: 2,
+      },
     };
   },
   methods: {
@@ -544,9 +531,6 @@ export default {
     },
   },
   watch: {
-    isLoading() {
-      this.showLoader = this.isLoading;
-    },
     paginationData(newValue, oldValue) {
       if (!isEqual(newValue, oldValue)) {
         this.paginationRecords = newValue;

package/src/stories/CTable.stories.js

@@ -22,7 +22,8 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { CTable },
-  template: '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
+  template:
+    '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
 });
 
 export const Default = Template.bind({});
@@ -35,8 +36,8 @@ Default.args = {
       field: "menuOptions",
       hidden: false,
       customizeColumn: true,
-      width: "60px"
-    }
+      width: "60px",
+    },
   ],
   showHideColumnList: [
     { label: "", field: "drag", hidden: false },
@@ -45,9 +46,100 @@ Default.args = {
       field: "mode",
       hidden: false,
       sortable: true,
-    }
+    },
+  ],
+  rows: [
+    {
+      id: 5,
+      mode: "ATM Machine 1",
+      sort_order: 2,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-02T12:53:09.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 11,
+      mode: "QA 1",
+      sort_order: 3,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T09:57:47.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 7,
+      mode: "ATM Machine 2",
+      sort_order: 4,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T09:45:47.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 18,
+      mode: "QA 3",
+      sort_order: 8,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T10:05:15.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 12,
+      mode: "QA 2",
+      sort_order: 21,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T09:57:55.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 15,
+      mode: "QA 4",
+      sort_order: 22,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T10:00:23.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 162,
+      mode: "Yes bank",
+      sort_order: 62,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:22:43.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 163,
+      mode: "SBI bank",
+      sort_order: 63,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:33:17.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 164,
+      mode: "BOB bank",
+      sort_order: 64,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:35:12.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 165,
+      mode: "PNB bank",
+      sort_order: 65,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:55:16.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
   ],
-  rows: [{"id":5,"mode":"ATM Machine 1","sort_order":2,"status":1,"rcInstitutionID":82,"created_at":"2020-09-02T12:53:09.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":11,"mode":"QA 1","sort_order":3,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:57:47.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":7,"mode":"ATM Machine 2","sort_order":4,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:45:47.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":18,"mode":"QA 3","sort_order":8,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T10:05:15.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":12,"mode":"QA 2","sort_order":21,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:57:55.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":15,"mode":"QA 4","sort_order":22,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T10:00:23.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":162,"mode":"Yes bank","sort_order":62,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:22:43.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":163,"mode":"SBI bank","sort_order":63,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:33:17.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":164,"mode":"BOB bank","sort_order":64,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:35:12.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":165,"mode":"PNB bank","sort_order":65,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:55:16.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"}],
   pagination: true,
   sorting: false,
   searching: true,
@@ -70,8 +162,8 @@ Default.args = {
   },
   handleReorder(val) {
     Default.args.rows = val;
-    val.forEach((item, index) => {
+    val.forEach((item) => {
       console.log(item);
     });
-  }
+  },
 };