classcard-ui 0.2.389 → 0.2.392

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.389",
+  "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/CIcon/CIcon.vue

@@ -20,8 +20,7 @@
     </svg>
     <svg
       v-if="name !== 'loader' && type == 'solid'"
-      :class="classes"
-      class="cursor-pointer"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : ' cursor-pointer')"
       :viewBox="viewBox"
       fill="currentColor"
       fill-rule="evenodd"
@@ -30,11 +29,10 @@
     </svg>
     <svg
       v-if="name !== 'loader' && type == 'outline'"
-      fill="none"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : ' cursor-pointer')"
       viewBox="0 0 24 24"
+      fill="none"
       stroke="currentColor"
-      :class="classes"
-      class="cursor-pointer"
     >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="path" />
     </svg>
@@ -60,6 +58,10 @@ export default {
       type: String,
       default: "0 0 20 20",
     },
+    cursorType: {
+      type: String,
+      default: "cursor-pointer",
+    },
   },
   computed: {
     path() {

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="flex items-center">
-      <label v-if="label" class="text-sm font-medium text-gray-900">{{ label }}</label>
+      <label v-if="label" class="text-sm font-medium text-gray-900">{{
+        label
+      }}</label>
       <!-- asterisk sign to render if field is required -->
       <p v-if="isRequired" class="ml-1 text-red-600">*</p>
     </div>
@@ -42,7 +44,9 @@
       </template>
       <!-- eslint-disable-next-line vue/no-unused-vars  -->
       <template #no-options="{ search, searching, loading }">
-        <span v-if="search.length < 1">Start typing to search for options...</span>
+        <span v-if="search.length < 1"
+          >Start typing to search for options...</span
+        >
         <span v-else>No options found, try searching something else.</span>
       </template>
       <template #spinner="{ loading }">
@@ -91,7 +95,34 @@
         </div>
       </template>
       <template #list-footer>
-        <li ref="load" class="loader" v-show="hasNextPage">Loading more options...</li>
+        <li ref="load" class="loader" v-show="hasNextPage">
+          Loading more options...
+        </li>
+        <li
+          v-if="showFooterButton"
+          class="group sticky bottom-0 mt-1 cursor-pointer select-none bg-gray-50 py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          id="listbox-option-0"
+          role="option"
+          @click="$emit('footerButtonClick')"
+        >
+          <div class="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 flex-shrink-0 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            <span class="ml-3 block truncate font-semibold">
+              {{ footerButtonText }}
+            </span>
+          </div>
+        </li>
       </template>
     </v-select>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
@@ -113,6 +144,14 @@ export default {
       type: Array,
       required: true,
     },
+    showFooterButton: {
+      type: Boolean,
+      default: false,
+    },
+    footerButtonText: {
+      type: String,
+      default: "",
+    },
     label: String,
     isRequired: {
       type: Boolean,
@@ -184,7 +223,10 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
       observer: null,
     };
   },
@@ -262,7 +304,7 @@ export default {
   @apply pt-0 pr-3;
 }
 .vs__dropdown-menu {
-  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
+  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-0 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;

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"></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>