classcard-ui 0.2.391 → 0.2.392

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.391",
+  "version": "0.2.392",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.4.20",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/vue": "^6.4.20",
+    "@storybook/addon-actions": "^6.4.21",
+    "@storybook/addon-essentials": "^6.4.21",
+    "@storybook/addon-links": "^6.4.21",
+    "@storybook/vue": "^6.4.21",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",

package/src/components/CTable/CTable.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <div slot="table-actions" v-if="tableActions" class="mb-4 rounded-lg bg-gray-50 p-3">
+    <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
@@ -18,11 +22,15 @@
             <div>
               <button
                 @click="handleToggle"
-                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"
+                class="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:outline-none 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="h-5 w-5 text-gray-400"></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"
@@ -79,7 +87,9 @@
       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"
@@ -148,7 +158,12 @@
       <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="handle h-5 w-5 text-gray-500" :cursorType="'cursor-move'"></c-icon>
+          <c-icon
+            name="menu-solid"
+            type="solid"
+            class="handle h-5 w-5 text-gray-500"
+            :cursorType="'cursor-move'"
+          ></c-icon>
         </span>
         <!-- if customization or adding another form element is required -->
         <span v-else-if="props.column.customizeColumn">
@@ -206,6 +221,7 @@ 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 { debounce, isEqual } from "lodash-es";
 
 export default {
   name: "CTable",
@@ -333,8 +349,12 @@ 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,
@@ -350,9 +370,9 @@ export default {
       }
       this.$emit("onSortChange", params);
     },
-    onSearching(params) {
+    onSearching: debounce(function (params) {
       this.$emit("onSearch", params);
-    },
+    }, 500),
     setCurrentPageRecords(page) {
       this.paginationRecords.currentPage = page;
       this.$emit("pageChange", page);
@@ -377,6 +397,11 @@ export default {
     isLoading() {
       this.showLoader = this.isLoading;
     },
+    paginationData() {
+      if (!isEqual(this.paginationRecords, this.paginationData)) {
+        this.paginationRecords = this.paginationData;
+      }
+    },
   },
 };
 </script>