classcard-ui 0.2.985 → 0.2.986

package/src/components/CPagination/CPagination.vue

@@ -1,233 +1,233 @@
-<template>
-  <div
-    class="flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6"
-  >
-    <div class="flex flex-1 justify-between sm:hidden">
-      <div
-        href="#"
-        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-        @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
-      >
-        Previous
-      </div>
-      <div
-        href="#"
-        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-        @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
-      >
-        Next
-      </div>
-    </div>
-    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-      <div class="flex">
-        <c-select
-          v-if="showEntryPicker"
-          class="mx-2 w-20"
-          :options="rowOptions"
-          :isValidate="true"
-          :value="totalRecordsOnPage.value"
-          :isRequired="false"
-          dropDownToTop="bottom-full"
-          dropDownToTop2="absolute bottom-full z-50 bg-white right-0"
-          @onChangeValue="(value) => $emit('handle-Row-Count-Change', value)"
-        ></c-select>
-        <p class="pt-2 text-sm text-gray-700">
-          Showing
-          <span class="font-medium">{{ setPaginationRecords.from }}</span>
-          to
-          <span class="font-medium">{{ setPaginationRecords.to }}</span>
-          of
-          <span class="font-medium">{{
-            setPaginationRecords.totalRecords
-          }}</span>
-          results
-        </p>
-      </div>
-      <div>
-        <nav
-          class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
-          aria-label="Pagination"
-        >
-          <div class="hidden md:-mt-px md:flex">
-            <div
-              href="#"
-              @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
-              class="relative inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
-              :class="
-                currentPageNumber == '1'
-                  ? 'pointer-events-none text-gray-400'
-                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
-              "
-            >
-              <span class="sr-only">Previous</span>
-              <!-- Heroicon name: solid/chevron-left -->
-              <svg
-                class="h-5 w-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </div>
-            <div
-              v-for="page in pageRange"
-              :key="page"
-              class="cursor-pointer"
-              :class="[
-                page == currentPageNumber
-                  ? 'relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600'
-                  : '',
-                page === '...'
-                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
-                  : '',
-                page !== currentPageNumber && page !== '...'
-                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
-                  : '',
-                page == currentPageNumber + 1 ? 'border-l-0' : '',
-              ]"
-              @click="changePage(page)"
-            >
-              <div v-if="page === '...'">...</div>
-              <div v-else>
-                {{ page }}
-              </div>
-            </div>
-            <div
-              href="#"
-              class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
-              @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
-              :class="
-                currentPageNumber == lastPageNumber
-                  ? 'pointer-events-none text-gray-400'
-                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
-              "
-            >
-              <span class="sr-only">Next</span>
-              <!-- Heroicon name: solid/chevron-right -->
-              <svg
-                class="h-5 w-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </div>
-          </div>
-        </nav>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { isEqual } from "lodash-es";
-import CSelect from "../CSelect/CSelect.vue";
-
-export default {
-  name: "CPagination",
-  props: {
-    setPaginationRecords: {
-      type: Object,
-    },
-    setCurrentPage: {
-      type: Function,
-    },
-    setPreviousPage: {
-      type: Function,
-    },
-    setNextPage: {
-      type: Function,
-    },
-    showEntryPicker: {
-      type: Boolean,
-      default: false,
-    },
-    totalRecordsOnPage: {
-      type: Object,
-    },
-  },
-  components: { CSelect },
-  data() {
-    return {
-      currentPageNumber: this.setPaginationRecords.currentPage,
-      lastPageNumber: this.setPaginationRecords.lastPage,
-      rowOptions: [
-        {
-          option: 10,
-          value: 10,
-        },
-        {
-          option: 25,
-          value: 25,
-        },
-      ],
-    };
-  },
-  computed: {
-    pageRange() {
-      var current = this.setPaginationRecords.currentPage,
-        last = this.setPaginationRecords.lastPage,
-        delta = 2,
-        left = current - delta,
-        right = current + delta + 1,
-        range = [],
-        rangeWithDots = [],
-        l;
-      for (let i = 1; i <= last; i++) {
-        if (i == 1 || i == last || (i >= left && i < right)) {
-          range.push(i);
-        }
-      }
-      for (let i of range) {
-        if (l) {
-          if (i - l === 2) {
-            rangeWithDots.push(l + 1);
-          } else if (i - l !== 1) {
-            rangeWithDots.push("...");
-          }
-        }
-        rangeWithDots.push(i);
-        l = i;
-      }
-      return rangeWithDots;
-    },
-  },
-  methods: {
-    changePage(page) {
-      if (page !== "...") {
-        this.$emit("setCurrentPage", page);
-        this.currentPageNumber = page;
-      }
-    },
-    goToPreviousPage() {
-      var previousPage = this.currentPageNumber - 1;
-      this.currentPageNumber = previousPage;
-      this.$emit("setPreviousPage", previousPage);
-    },
-    goToNextPage() {
-      var nextPage = this.currentPageNumber + 1;
-      this.currentPageNumber = nextPage;
-      this.$emit("setNextPage", nextPage);
-    },
-  },
-  watch: {
-    setPaginationRecords(newVal, oldVal) {
-      if (!isEqual(newVal, oldVal)) {
-        this.currentPageNumber = newVal.currentPage;
-        this.lastPageNumber = newVal.lastPage;
-      }
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6"
+  >
+    <div class="flex flex-1 justify-between sm:hidden">
+      <div
+        href="#"
+        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
+      >
+        Previous
+      </div>
+      <div
+        href="#"
+        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
+      >
+        Next
+      </div>
+    </div>
+    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+      <div class="flex">
+        <c-select
+          v-if="showEntryPicker"
+          class="mx-2 w-20"
+          :options="rowOptions"
+          :isValidate="true"
+          :value="totalRecordsOnPage.value"
+          :isRequired="false"
+          dropDownToTop="bottom-full"
+          dropDownToTop2="absolute bottom-full z-50 bg-white right-0"
+          @onChangeValue="(value) => $emit('handle-Row-Count-Change', value)"
+        ></c-select>
+        <p class="pt-2 text-sm text-gray-700">
+          Showing
+          <span class="font-medium">{{ setPaginationRecords.from }}</span>
+          to
+          <span class="font-medium">{{ setPaginationRecords.to }}</span>
+          of
+          <span class="font-medium">{{
+            setPaginationRecords.totalRecords
+          }}</span>
+          results
+        </p>
+      </div>
+      <div>
+        <nav
+          class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
+          aria-label="Pagination"
+        >
+          <div class="hidden md:-mt-px md:flex">
+            <div
+              href="#"
+              @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
+              class="relative inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
+              :class="
+                currentPageNumber == '1'
+                  ? 'pointer-events-none text-gray-400'
+                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
+              "
+            >
+              <span class="sr-only">Previous</span>
+              <!-- Heroicon name: solid/chevron-left -->
+              <svg
+                class="h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <div
+              v-for="page in pageRange"
+              :key="page"
+              class="cursor-pointer"
+              :class="[
+                page == currentPageNumber
+                  ? 'relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600'
+                  : '',
+                page === '...'
+                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
+                  : '',
+                page !== currentPageNumber && page !== '...'
+                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
+                  : '',
+                page == currentPageNumber + 1 ? 'border-l-0' : '',
+              ]"
+              @click="changePage(page)"
+            >
+              <div v-if="page === '...'">...</div>
+              <div v-else>
+                {{ page }}
+              </div>
+            </div>
+            <div
+              href="#"
+              class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
+              @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
+              :class="
+                currentPageNumber == lastPageNumber
+                  ? 'pointer-events-none text-gray-400'
+                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
+              "
+            >
+              <span class="sr-only">Next</span>
+              <!-- Heroicon name: solid/chevron-right -->
+              <svg
+                class="h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isEqual } from "lodash-es";
+import CSelect from "../CSelect/CSelect.vue";
+
+export default {
+  name: "CPagination",
+  props: {
+    setPaginationRecords: {
+      type: Object,
+    },
+    setCurrentPage: {
+      type: Function,
+    },
+    setPreviousPage: {
+      type: Function,
+    },
+    setNextPage: {
+      type: Function,
+    },
+    showEntryPicker: {
+      type: Boolean,
+      default: false,
+    },
+    totalRecordsOnPage: {
+      type: Object,
+    },
+  },
+  components: { CSelect },
+  data() {
+    return {
+      currentPageNumber: this.setPaginationRecords.currentPage,
+      lastPageNumber: this.setPaginationRecords.lastPage,
+      rowOptions: [
+        {
+          option: 10,
+          value: 10,
+        },
+        {
+          option: 25,
+          value: 25,
+        },
+      ],
+    };
+  },
+  computed: {
+    pageRange() {
+      var current = this.setPaginationRecords.currentPage,
+        last = this.setPaginationRecords.lastPage,
+        delta = 2,
+        left = current - delta,
+        right = current + delta + 1,
+        range = [],
+        rangeWithDots = [],
+        l;
+      for (let i = 1; i <= last; i++) {
+        if (i == 1 || i == last || (i >= left && i < right)) {
+          range.push(i);
+        }
+      }
+      for (let i of range) {
+        if (l) {
+          if (i - l === 2) {
+            rangeWithDots.push(l + 1);
+          } else if (i - l !== 1) {
+            rangeWithDots.push("...");
+          }
+        }
+        rangeWithDots.push(i);
+        l = i;
+      }
+      return rangeWithDots;
+    },
+  },
+  methods: {
+    changePage(page) {
+      if (page !== "...") {
+        this.$emit("setCurrentPage", page);
+        this.currentPageNumber = page;
+      }
+    },
+    goToPreviousPage() {
+      var previousPage = this.currentPageNumber - 1;
+      this.currentPageNumber = previousPage;
+      this.$emit("setPreviousPage", previousPage);
+    },
+    goToNextPage() {
+      var nextPage = this.currentPageNumber + 1;
+      this.currentPageNumber = nextPage;
+      this.$emit("setNextPage", nextPage);
+    },
+  },
+  watch: {
+    setPaginationRecords(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.currentPageNumber = newVal.currentPage;
+        this.lastPageNumber = newVal.lastPage;
+      }
+    },
+  },
+};
+</script>

package/src/components/CPagination/index.js

@@ -1,3 +1,3 @@
-import CPagination from './CPagination.vue'
-
+import CPagination from './CPagination.vue'
+
 export default CPagination