@iankibetsh/shframework 4.1.7 → 4.1.8

package/dist/library.js

@@ -2033,10 +2033,10 @@ const _hoisted_1$n = {
 const _hoisted_2$d = ["id"];
 const _hoisted_3$c = { class: "badge bg-secondary m-1 sh-selected-item" };
 const _hoisted_4$c = ["onClick"];
-const _hoisted_5$9 = ["id"];
-const _hoisted_6$8 = ["id", "aria-labelledby"];
-const _hoisted_7$7 = { key: 0 };
-const _hoisted_8$6 = ["onClick"];
+const _hoisted_5$a = ["id"];
+const _hoisted_6$9 = ["id", "aria-labelledby"];
+const _hoisted_7$8 = { key: 0 };
+const _hoisted_8$7 = ["onClick"];
 const _hoisted_9$7 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
@@ -2158,7 +2158,7 @@ return (_ctx, _cache) => {
             onInput: filterData,
             onChange: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$9)
+          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$a)
         ], 8 /* PROPS */, _hoisted_2$d),
         vue.createElementVNode("ul", {
           class: "dropdown-menu w-100",
@@ -2171,12 +2171,12 @@ return (_ctx, _cache) => {
                   key: suggestion.id
                 }, [
                   (suggestion.name)
-                    ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_7$7, [
+                    ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_7$8, [
                         vue.createElementVNode("a", {
                           onClick: $event => (addSuggestion(suggestion)),
                           class: vue.normalizeClass(["dropdown-item", vue.unref(selectedSuggestions).includes(suggestion) ? 'active':'']),
                           href: "#"
-                        }, vue.toDisplayString(suggestion.name ?? suggestion.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_8$6)
+                        }, vue.toDisplayString(suggestion.name ?? suggestion.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_8$7)
                       ]))
                     : vue.createCommentVNode("v-if", true)
                 ], 64 /* STABLE_FRAGMENT */))
@@ -2184,7 +2184,7 @@ return (_ctx, _cache) => {
             : (vue.unref(searchText))
               ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$7, " No results found "))
               : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$6, " Type to search... "))
-        ], 8 /* PROPS */, _hoisted_6$8)
+        ], 8 /* PROPS */, _hoisted_6$9)
       ]))
     : vue.createCommentVNode("v-if", true)
 }
@@ -2535,10 +2535,10 @@ const _hoisted_3$b = {
   role: "alert"
 };
 const _hoisted_4$b = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
-const _hoisted_5$8 = { key: 0 };
-const _hoisted_6$7 = { key: 1 };
-const _hoisted_7$6 = { class: "row" };
-const _hoisted_8$5 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
+const _hoisted_5$9 = { key: 0 };
+const _hoisted_6$8 = { key: 1 };
+const _hoisted_7$7 = { class: "row" };
+const _hoisted_8$6 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_9$6 = { class: "col-md-12" };
 const _hoisted_10$5 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
 const _hoisted_11$5 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
@@ -2549,16 +2549,16 @@ const _hoisted_15$3 = ["disabled", "placeholder", "name", "onFocus", "onUpdate:m
 const _hoisted_16$3 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_17$3 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_18$3 = ["value"];
-const _hoisted_19$2 = {
+const _hoisted_19$1 = {
   key: 11,
   class: "invalid-feedback"
 };
-const _hoisted_20$2 = {
+const _hoisted_20$1 = {
   key: 1,
   class: "row"
 };
-const _hoisted_21$2 = /*#__PURE__*/vue.createElementVNode("h5", null, "Confirm and Submit", -1 /* HOISTED */);
-const _hoisted_22$2 = /*#__PURE__*/vue.createElementVNode("p", null, [
+const _hoisted_21$1 = /*#__PURE__*/vue.createElementVNode("h5", null, "Confirm and Submit", -1 /* HOISTED */);
+const _hoisted_22$1 = /*#__PURE__*/vue.createElementVNode("p", null, [
   /*#__PURE__*/vue.createTextVNode("By clicking submit, you agree to our "),
   /*#__PURE__*/vue.createElementVNode("a", {
     target: "_blank",
@@ -2570,9 +2570,9 @@ const _hoisted_22$2 = /*#__PURE__*/vue.createElementVNode("p", null, [
     href: "https://hauzisha.co.ke/privacy-policy"
   }, "privacy policy")
 ], -1 /* HOISTED */);
-const _hoisted_23$2 = [
-  _hoisted_21$2,
-  _hoisted_22$2
+const _hoisted_23$1 = [
+  _hoisted_21$1,
+  _hoisted_22$1
 ];
 const _hoisted_24$1 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
@@ -2593,8 +2593,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [
             _hoisted_4$b,
             (_ctx.errorText)
-              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$8, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
-              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$7, "Unexpected Error Occurred")),
+              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$9, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
+              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$8, "Unexpected Error Occurred")),
             vue.createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
         : vue.createCommentVNode("v-if", true),
@@ -2604,13 +2604,13 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512 /* NEED_PATCH */), [
         [vue.vModelText, _ctx.form_elements['id']]
       ]),
-      vue.createElementVNode("div", _hoisted_7$6, [
+      vue.createElementVNode("div", _hoisted_7$7, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.fields, (field) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
             class: vue.normalizeClass(["form-group", 'col-md-' + $options.getColumns()]),
             key: field
           }, [
-            vue.createElementVNode("label", _hoisted_8$5, vue.toDisplayString($options.getLabel(field)), 1 /* TEXT */),
+            vue.createElementVNode("label", _hoisted_8$6, vue.toDisplayString($options.getLabel(field)), 1 /* TEXT */),
             vue.createElementVNode("div", _hoisted_9$6, [
               ($options.getFieldType(field) === 'component')
                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.customComponent[field]), {
@@ -2763,14 +2763,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 : vue.createCommentVNode("v-if", true),
               (_ctx.form_errors[field] != null )
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19$2, vue.toDisplayString(_ctx.form_errors[field][0]), 1 /* TEXT */))
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19$1, vue.toDisplayString(_ctx.form_errors[field][0]), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true)
             ])
           ], 2 /* CLASS */))
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       ($props.hasTerms)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$2, _hoisted_23$2))
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$1, _hoisted_23$1))
         : vue.createCommentVNode("v-if", true),
       (_ctx.form_status == 1)
         ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -3084,17 +3084,17 @@ const _hoisted_1$j = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /
 const _hoisted_2$b = ["onUpdate:modelValue"];
 const _hoisted_3$a = ["innerHTML"];
 const _hoisted_4$a = ["innerHTML"];
-const _hoisted_5$7 = {
+const _hoisted_5$8 = {
   key: 2,
   class: "form-notch"
 };
-const _hoisted_6$6 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */);
-const _hoisted_7$5 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */);
-const _hoisted_8$4 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */);
+const _hoisted_6$7 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */);
+const _hoisted_7$6 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */);
+const _hoisted_8$5 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */);
 const _hoisted_9$5 = [
-  _hoisted_6$6,
-  _hoisted_7$5,
-  _hoisted_8$4
+  _hoisted_6$7,
+  _hoisted_7$6,
+  _hoisted_8$5
 ];
 const _hoisted_10$4 = ["innerHTML"];
 const _hoisted_11$4 = ["disabled"];
@@ -3360,7 +3360,7 @@ return (_ctx, _cache) => {
                     }, null, 10 /* CLASS, PROPS */, _hoisted_4$a))
                   : vue.createCommentVNode("v-if", true),
                 (vue.unref(isFloating))
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, _hoisted_9$5))
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, _hoisted_9$5))
                   : vue.createCommentVNode("v-if", true),
                 (field.helper)
                   ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -3470,13 +3470,13 @@ const _hoisted_1$h = ["id"];
 const _hoisted_2$9 = { class: "modal-content" };
 const _hoisted_3$9 = { class: "modal-header" };
 const _hoisted_4$9 = { class: "modal-title" };
-const _hoisted_5$6 = /*#__PURE__*/vue.createElementVNode("button", {
+const _hoisted_5$7 = /*#__PURE__*/vue.createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
   "data-dismiss": "modal"
 }, "×", -1 /* HOISTED */);
-const _hoisted_6$5 = { class: "modal-body" };
-const _hoisted_7$4 = { class: "section" };
+const _hoisted_6$6 = { class: "modal-body" };
+const _hoisted_7$5 = { class: "section" };
 
 
 var script$k = {
@@ -3527,10 +3527,10 @@ return (_ctx, _cache) => {
       vue.createElementVNode("div", _hoisted_2$9, [
         vue.createElementVNode("div", _hoisted_3$9, [
           vue.createElementVNode("h3", _hoisted_4$9, vue.toDisplayString(__props.modalTitle), 1 /* TEXT */),
-          _hoisted_5$6
+          _hoisted_5$7
         ]),
-        vue.createElementVNode("div", _hoisted_6$5, [
-          vue.createElementVNode("div", _hoisted_7$4, [
+        vue.createElementVNode("div", _hoisted_6$6, [
+          vue.createElementVNode("div", _hoisted_7$5, [
             vue.renderSlot(_ctx.$slots, "default")
           ])
         ])
@@ -3852,12 +3852,20 @@ const useUserStore = pinia.defineStore('user-store', {
 
 var script$f = {
   name: 'Pagination',
-  props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle'],
+  props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle','perPage'],
   data () {
     return {
       current_page: this.pagination_data.current,
       per_page: this.pagination_data.per_page,
-      loadingMore: 0
+      loadingMore: 0,
+      pageOptions: [10,25,50,100,200,400]
+    }
+  },
+  mounted(){
+    if(!this.pageOptions.includes(this.perPage)){
+      const recordCount = this.pagination_data.record_count;
+      recordCount > 0 && recordCount < this.perPage && this.pageOptions.push(recordCount);
+      recordCount > 0 && recordCount >= this.perPage && this.pageOptions.push(this.perPage);
     }
   },
   methods: {
@@ -3924,47 +3932,44 @@ var script$f = {
 const _hoisted_1$c = { key: 0 };
 const _hoisted_2$7 = { class: "record_count_body mb-3" };
 const _hoisted_3$7 = /*#__PURE__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
-const _hoisted_4$7 = /*#__PURE__*/vue.createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
-const _hoisted_9$4 = [
-  _hoisted_4$7
-];
-const _hoisted_10$3 = { class: "record_counts" };
-const _hoisted_11$3 = {
+const _hoisted_4$7 = ["value"];
+const _hoisted_5$6 = { class: "record_counts" };
+const _hoisted_6$5 = {
   key: 0,
   "aria-label": "Page navigation"
 };
-const _hoisted_12$2 = { class: "pagination" };
-const _hoisted_13$2 = {
+const _hoisted_7$4 = { class: "pagination" };
+const _hoisted_8$4 = {
   key: 0,
   class: "page-link"
 };
-const _hoisted_14$2 = {
+const _hoisted_9$4 = {
   key: 1,
   class: "page-link"
 };
-const _hoisted_15$2 = ["onClick"];
-const _hoisted_16$2 = { key: 1 };
-const _hoisted_17$2 = {
+const _hoisted_10$3 = ["onClick"];
+const _hoisted_11$3 = { key: 1 };
+const _hoisted_12$2 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_18$2 = /*#__PURE__*/vue.createElementVNode("div", {
+const _hoisted_13$2 = /*#__PURE__*/vue.createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, null, -1 /* HOISTED */);
-const _hoisted_19$1 = [
-  _hoisted_18$2
+const _hoisted_14$2 = [
+  _hoisted_13$2
 ];
-const _hoisted_20$1 = {
+const _hoisted_15$2 = {
   key: 1,
   class: "text-center"
 };
-const _hoisted_21$1 = { class: "per_page_show" };
-const _hoisted_22$1 = {
+const _hoisted_16$2 = { class: "per_page_show" };
+const _hoisted_17$2 = {
   key: 2,
   class: "text-center"
 };
-const _hoisted_23$1 = {
+const _hoisted_18$2 = {
   key: 1,
   class: "spinner-border"
 };
@@ -3979,14 +3984,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "select_per_page",
             onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
-          }, _hoisted_9$4, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.pageOptions, (option) => {
+              return (vue.openBlock(), vue.createElementBlock("option", { value: option }, vue.toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_4$7))
+            }), 256 /* UNKEYED_FRAGMENT */))
+          ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
             [vue.vModelSelect, $data.per_page]
           ]),
-          vue.createElementVNode("span", _hoisted_10$3, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          vue.createElementVNode("span", _hoisted_5$6, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_11$3, [
-              vue.createElementVNode("ul", _hoisted_12$2, [
+          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_6$5, [
+              vue.createElementVNode("ul", _hoisted_7$4, [
                 vue.createElementVNode("li", {
                   class: vue.normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
                 }, [
@@ -4001,14 +4010,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     key: page
                   }, [
                     ($options.getActivePage === page)
-                      ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_13$2, vue.toDisplayString(page), 1 /* TEXT */))
+                      ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_8$4, vue.toDisplayString(page), 1 /* TEXT */))
                       : (['..','...'].includes(page))
-                        ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_14$2, vue.toDisplayString(page), 1 /* TEXT */))
+                        ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_9$4, vue.toDisplayString(page), 1 /* TEXT */))
                         : (vue.openBlock(), vue.createElementBlock("a", {
                             key: 2,
                             onClick: $event => ($options.changeTableKey('page',page)),
                             class: "page-link"
-                          }, vue.toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_15$2))
+                          }, vue.toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_10$3))
                   ], 2 /* CLASS */))
                 }), 128 /* KEYED_FRAGMENT */)),
                 vue.createElementVNode("li", {
@@ -4023,24 +4032,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]))
           : vue.createCommentVNode("v-if", true)
       ]))
-    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$2, [
+    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$3, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$2, _hoisted_19$1))
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, _hoisted_14$2))
           : vue.createCommentVNode("v-if", true),
         (!$props.hideCount)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$1, [
-              vue.createElementVNode("span", _hoisted_21$1, "Showing " + vue.toDisplayString($props.pagination_data.displayCount) + " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$2, [
+              vue.createElementVNode("span", _hoisted_16$2, "Showing " + vue.toDisplayString($props.pagination_data.displayCount) + " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
             ]))
           : vue.createCommentVNode("v-if", true),
         ($props.pagination_data.displayCount < $props.pagination_data.record_count && !$props.hideLoadMore)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_22$1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$2, [
               (this.pagination_data.loading !== 1)
                 ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 0,
                     class: "btn btn-sm btn-primary mt-1",
                     onClick: _cache[4] || (_cache[4] = (...args) => ($options.loadMoreRecords && $options.loadMoreRecords(...args)))
                   }, " Load More "))
-                : (vue.openBlock(), vue.createElementBlock("span", _hoisted_23$1))
+                : (vue.openBlock(), vue.createElementBlock("span", _hoisted_18$2))
             ]))
           : vue.createCommentVNode("v-if", true)
       ]))
@@ -4615,7 +4624,7 @@ const __default__ = {
       filter_value: '',
       loading: 'loading',
       loading_error: '',
-      records: [],
+      records: null,
       total: 0,
       pagination_data: null,
       moreDetailsId: null,
@@ -4797,14 +4806,14 @@ const __default__ = {
     },
     setCachedData: function (){
       if (this.cacheKey) {
-        this.records = ShStorage.getItem('sh_table_cache_' + this.cacheKey, []);
+        this.records = ShStorage.getItem('sh_table_cache_' + this.cacheKey, null);
       }
     },
     reloadData: function (page, append){
       if (typeof page !== 'undefined') {
         this.page = page;
       }
-      if (this.cacheKey && this.records && this.page < 2) {
+      if (this.cacheKey && this.records !== null) {
         this.loading = 'done';
       } else if (!append) {
         this.loading = 'loading';
@@ -5360,11 +5369,12 @@ return (_ctx, _cache) => {
           key: 6,
           onLoadMoreRecords: _ctx.loadMoreRecords,
           "hide-load-more": __props.hideLoadMore,
+          "per-page": _ctx.per_page,
           "hide-count": __props.hideCount,
           pagination_data: _ctx.pagination_data,
           onChangeKey: _ctx.changeKey,
           "pagination-style": _ctx.pageStyle
-        }, null, 8 /* PROPS */, ["onLoadMoreRecords", "hide-load-more", "hide-count", "pagination_data", "onChangeKey", "pagination-style"]))
+        }, null, 8 /* PROPS */, ["onLoadMoreRecords", "hide-load-more", "per-page", "hide-count", "pagination_data", "onChangeKey", "pagination-style"]))
       : vue.createCommentVNode("v-if", true),
     (__props.actions)
       ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 7 }, vue.renderList(__props.actions.actions, (action) => {

package/dist/library.mjs

@@ -3,7 +3,7 @@ import moment from 'moment';
 import Swal from 'sweetalert2';
 import { Modal, Offcanvas } from 'bootstrap';
 import NProgress from 'nprogress';
-import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, ref, onMounted, unref, normalizeClass, resolveComponent, createBlock, resolveDynamicComponent, watch, inject, mergeProps, normalizeStyle, renderSlot, createVNode, normalizeProps, guardReactiveProps, withCtx, createStaticVNode, vModelCheckbox, shallowRef, pushScopeId, popScopeId, markRaw, computed, isRef } from 'vue';
+import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, ref, onMounted, unref, normalizeClass, resolveComponent, createBlock, resolveDynamicComponent, watch, inject, mergeProps, normalizeStyle, renderSlot, createVNode, normalizeProps, guardReactiveProps, withCtx, vModelCheckbox, shallowRef, pushScopeId, popScopeId, markRaw, computed, isRef } from 'vue';
 import _ from 'lodash';
 import { defineStore, storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
@@ -2021,10 +2021,10 @@ const _hoisted_1$n = {
 const _hoisted_2$d = ["id"];
 const _hoisted_3$c = { class: "badge bg-secondary m-1 sh-selected-item" };
 const _hoisted_4$c = ["onClick"];
-const _hoisted_5$9 = ["id"];
-const _hoisted_6$8 = ["id", "aria-labelledby"];
-const _hoisted_7$7 = { key: 0 };
-const _hoisted_8$6 = ["onClick"];
+const _hoisted_5$a = ["id"];
+const _hoisted_6$9 = ["id", "aria-labelledby"];
+const _hoisted_7$8 = { key: 0 };
+const _hoisted_8$7 = ["onClick"];
 const _hoisted_9$7 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
@@ -2146,7 +2146,7 @@ return (_ctx, _cache) => {
             onInput: filterData,
             onChange: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$9)
+          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$a)
         ], 8 /* PROPS */, _hoisted_2$d),
         createElementVNode("ul", {
           class: "dropdown-menu w-100",
@@ -2159,12 +2159,12 @@ return (_ctx, _cache) => {
                   key: suggestion.id
                 }, [
                   (suggestion.name)
-                    ? (openBlock(), createElementBlock("li", _hoisted_7$7, [
+                    ? (openBlock(), createElementBlock("li", _hoisted_7$8, [
                         createElementVNode("a", {
                           onClick: $event => (addSuggestion(suggestion)),
                           class: normalizeClass(["dropdown-item", unref(selectedSuggestions).includes(suggestion) ? 'active':'']),
                           href: "#"
-                        }, toDisplayString(suggestion.name ?? suggestion.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_8$6)
+                        }, toDisplayString(suggestion.name ?? suggestion.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_8$7)
                       ]))
                     : createCommentVNode("v-if", true)
                 ], 64 /* STABLE_FRAGMENT */))
@@ -2172,7 +2172,7 @@ return (_ctx, _cache) => {
             : (unref(searchText))
               ? (openBlock(), createElementBlock("li", _hoisted_9$7, " No results found "))
               : (openBlock(), createElementBlock("li", _hoisted_10$6, " Type to search... "))
-        ], 8 /* PROPS */, _hoisted_6$8)
+        ], 8 /* PROPS */, _hoisted_6$9)
       ]))
     : createCommentVNode("v-if", true)
 }
@@ -2523,10 +2523,10 @@ const _hoisted_3$b = {
   role: "alert"
 };
 const _hoisted_4$b = /*#__PURE__*/createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
-const _hoisted_5$8 = { key: 0 };
-const _hoisted_6$7 = { key: 1 };
-const _hoisted_7$6 = { class: "row" };
-const _hoisted_8$5 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
+const _hoisted_5$9 = { key: 0 };
+const _hoisted_6$8 = { key: 1 };
+const _hoisted_7$7 = { class: "row" };
+const _hoisted_8$6 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_9$6 = { class: "col-md-12" };
 const _hoisted_10$5 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
 const _hoisted_11$5 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
@@ -2537,16 +2537,16 @@ const _hoisted_15$3 = ["disabled", "placeholder", "name", "onFocus", "onUpdate:m
 const _hoisted_16$3 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_17$3 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_18$3 = ["value"];
-const _hoisted_19$2 = {
+const _hoisted_19$1 = {
   key: 11,
   class: "invalid-feedback"
 };
-const _hoisted_20$2 = {
+const _hoisted_20$1 = {
   key: 1,
   class: "row"
 };
-const _hoisted_21$2 = /*#__PURE__*/createElementVNode("h5", null, "Confirm and Submit", -1 /* HOISTED */);
-const _hoisted_22$2 = /*#__PURE__*/createElementVNode("p", null, [
+const _hoisted_21$1 = /*#__PURE__*/createElementVNode("h5", null, "Confirm and Submit", -1 /* HOISTED */);
+const _hoisted_22$1 = /*#__PURE__*/createElementVNode("p", null, [
   /*#__PURE__*/createTextVNode("By clicking submit, you agree to our "),
   /*#__PURE__*/createElementVNode("a", {
     target: "_blank",
@@ -2558,9 +2558,9 @@ const _hoisted_22$2 = /*#__PURE__*/createElementVNode("p", null, [
     href: "https://hauzisha.co.ke/privacy-policy"
   }, "privacy policy")
 ], -1 /* HOISTED */);
-const _hoisted_23$2 = [
-  _hoisted_21$2,
-  _hoisted_22$2
+const _hoisted_23$1 = [
+  _hoisted_21$1,
+  _hoisted_22$1
 ];
 const _hoisted_24$1 = /*#__PURE__*/createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
@@ -2581,8 +2581,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
             _hoisted_4$b,
             (_ctx.errorText)
-              ? (openBlock(), createElementBlock("span", _hoisted_5$8, toDisplayString(_ctx.errorText), 1 /* TEXT */))
-              : (openBlock(), createElementBlock("span", _hoisted_6$7, "Unexpected Error Occurred")),
+              ? (openBlock(), createElementBlock("span", _hoisted_5$9, toDisplayString(_ctx.errorText), 1 /* TEXT */))
+              : (openBlock(), createElementBlock("span", _hoisted_6$8, "Unexpected Error Occurred")),
             createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
         : createCommentVNode("v-if", true),
@@ -2592,13 +2592,13 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512 /* NEED_PATCH */), [
         [vModelText, _ctx.form_elements['id']]
       ]),
-      createElementVNode("div", _hoisted_7$6, [
+      createElementVNode("div", _hoisted_7$7, [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.fields, (field) => {
           return (openBlock(), createElementBlock("div", {
             class: normalizeClass(["form-group", 'col-md-' + $options.getColumns()]),
             key: field
           }, [
-            createElementVNode("label", _hoisted_8$5, toDisplayString($options.getLabel(field)), 1 /* TEXT */),
+            createElementVNode("label", _hoisted_8$6, toDisplayString($options.getLabel(field)), 1 /* TEXT */),
             createElementVNode("div", _hoisted_9$6, [
               ($options.getFieldType(field) === 'component')
                 ? (openBlock(), createBlock(resolveDynamicComponent($props.customComponent[field]), {
@@ -2751,14 +2751,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 : createCommentVNode("v-if", true),
               (_ctx.form_errors[field] != null )
-                ? (openBlock(), createElementBlock("div", _hoisted_19$2, toDisplayString(_ctx.form_errors[field][0]), 1 /* TEXT */))
+                ? (openBlock(), createElementBlock("div", _hoisted_19$1, toDisplayString(_ctx.form_errors[field][0]), 1 /* TEXT */))
                 : createCommentVNode("v-if", true)
             ])
           ], 2 /* CLASS */))
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       ($props.hasTerms)
-        ? (openBlock(), createElementBlock("div", _hoisted_20$2, _hoisted_23$2))
+        ? (openBlock(), createElementBlock("div", _hoisted_20$1, _hoisted_23$1))
         : createCommentVNode("v-if", true),
       (_ctx.form_status == 1)
         ? (openBlock(), createElementBlock("button", {
@@ -3072,17 +3072,17 @@ const _hoisted_1$j = /*#__PURE__*/createElementVNode("div", null, null, -1 /* HO
 const _hoisted_2$b = ["onUpdate:modelValue"];
 const _hoisted_3$a = ["innerHTML"];
 const _hoisted_4$a = ["innerHTML"];
-const _hoisted_5$7 = {
+const _hoisted_5$8 = {
   key: 2,
   class: "form-notch"
 };
-const _hoisted_6$6 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */);
-const _hoisted_7$5 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */);
-const _hoisted_8$4 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */);
+const _hoisted_6$7 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */);
+const _hoisted_7$6 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */);
+const _hoisted_8$5 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */);
 const _hoisted_9$5 = [
-  _hoisted_6$6,
-  _hoisted_7$5,
-  _hoisted_8$4
+  _hoisted_6$7,
+  _hoisted_7$6,
+  _hoisted_8$5
 ];
 const _hoisted_10$4 = ["innerHTML"];
 const _hoisted_11$4 = ["disabled"];
@@ -3348,7 +3348,7 @@ return (_ctx, _cache) => {
                     }, null, 10 /* CLASS, PROPS */, _hoisted_4$a))
                   : createCommentVNode("v-if", true),
                 (unref(isFloating))
-                  ? (openBlock(), createElementBlock("div", _hoisted_5$7, _hoisted_9$5))
+                  ? (openBlock(), createElementBlock("div", _hoisted_5$8, _hoisted_9$5))
                   : createCommentVNode("v-if", true),
                 (field.helper)
                   ? (openBlock(), createElementBlock("div", {
@@ -3458,13 +3458,13 @@ const _hoisted_1$h = ["id"];
 const _hoisted_2$9 = { class: "modal-content" };
 const _hoisted_3$9 = { class: "modal-header" };
 const _hoisted_4$9 = { class: "modal-title" };
-const _hoisted_5$6 = /*#__PURE__*/createElementVNode("button", {
+const _hoisted_5$7 = /*#__PURE__*/createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
   "data-dismiss": "modal"
 }, "×", -1 /* HOISTED */);
-const _hoisted_6$5 = { class: "modal-body" };
-const _hoisted_7$4 = { class: "section" };
+const _hoisted_6$6 = { class: "modal-body" };
+const _hoisted_7$5 = { class: "section" };
 
 
 var script$k = {
@@ -3515,10 +3515,10 @@ return (_ctx, _cache) => {
       createElementVNode("div", _hoisted_2$9, [
         createElementVNode("div", _hoisted_3$9, [
           createElementVNode("h3", _hoisted_4$9, toDisplayString(__props.modalTitle), 1 /* TEXT */),
-          _hoisted_5$6
+          _hoisted_5$7
         ]),
-        createElementVNode("div", _hoisted_6$5, [
-          createElementVNode("div", _hoisted_7$4, [
+        createElementVNode("div", _hoisted_6$6, [
+          createElementVNode("div", _hoisted_7$5, [
             renderSlot(_ctx.$slots, "default")
           ])
         ])
@@ -3840,12 +3840,20 @@ const useUserStore = defineStore('user-store', {
 
 var script$f = {
   name: 'Pagination',
-  props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle'],
+  props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle','perPage'],
   data () {
     return {
       current_page: this.pagination_data.current,
       per_page: this.pagination_data.per_page,
-      loadingMore: 0
+      loadingMore: 0,
+      pageOptions: [10,25,50,100,200,400]
+    }
+  },
+  mounted(){
+    if(!this.pageOptions.includes(this.perPage)){
+      const recordCount = this.pagination_data.record_count;
+      recordCount > 0 && recordCount < this.perPage && this.pageOptions.push(recordCount);
+      recordCount > 0 && recordCount >= this.perPage && this.pageOptions.push(this.perPage);
     }
   },
   methods: {
@@ -3912,47 +3920,44 @@ var script$f = {
 const _hoisted_1$c = { key: 0 };
 const _hoisted_2$7 = { class: "record_count_body mb-3" };
 const _hoisted_3$7 = /*#__PURE__*/createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
-const _hoisted_4$7 = /*#__PURE__*/createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
-const _hoisted_9$4 = [
-  _hoisted_4$7
-];
-const _hoisted_10$3 = { class: "record_counts" };
-const _hoisted_11$3 = {
+const _hoisted_4$7 = ["value"];
+const _hoisted_5$6 = { class: "record_counts" };
+const _hoisted_6$5 = {
   key: 0,
   "aria-label": "Page navigation"
 };
-const _hoisted_12$2 = { class: "pagination" };
-const _hoisted_13$2 = {
+const _hoisted_7$4 = { class: "pagination" };
+const _hoisted_8$4 = {
   key: 0,
   class: "page-link"
 };
-const _hoisted_14$2 = {
+const _hoisted_9$4 = {
   key: 1,
   class: "page-link"
 };
-const _hoisted_15$2 = ["onClick"];
-const _hoisted_16$2 = { key: 1 };
-const _hoisted_17$2 = {
+const _hoisted_10$3 = ["onClick"];
+const _hoisted_11$3 = { key: 1 };
+const _hoisted_12$2 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_18$2 = /*#__PURE__*/createElementVNode("div", {
+const _hoisted_13$2 = /*#__PURE__*/createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, null, -1 /* HOISTED */);
-const _hoisted_19$1 = [
-  _hoisted_18$2
+const _hoisted_14$2 = [
+  _hoisted_13$2
 ];
-const _hoisted_20$1 = {
+const _hoisted_15$2 = {
   key: 1,
   class: "text-center"
 };
-const _hoisted_21$1 = { class: "per_page_show" };
-const _hoisted_22$1 = {
+const _hoisted_16$2 = { class: "per_page_show" };
+const _hoisted_17$2 = {
   key: 2,
   class: "text-center"
 };
-const _hoisted_23$1 = {
+const _hoisted_18$2 = {
   key: 1,
   class: "spinner-border"
 };
@@ -3967,14 +3972,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "select_per_page",
             onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
-          }, _hoisted_9$4, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList($data.pageOptions, (option) => {
+              return (openBlock(), createElementBlock("option", { value: option }, toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_4$7))
+            }), 256 /* UNKEYED_FRAGMENT */))
+          ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
             [vModelSelect, $data.per_page]
           ]),
-          createElementVNode("span", _hoisted_10$3, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          createElementVNode("span", _hoisted_5$6, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (openBlock(), createElementBlock("nav", _hoisted_11$3, [
-              createElementVNode("ul", _hoisted_12$2, [
+          ? (openBlock(), createElementBlock("nav", _hoisted_6$5, [
+              createElementVNode("ul", _hoisted_7$4, [
                 createElementVNode("li", {
                   class: normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
                 }, [
@@ -3989,14 +3998,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     key: page
                   }, [
                     ($options.getActivePage === page)
-                      ? (openBlock(), createElementBlock("a", _hoisted_13$2, toDisplayString(page), 1 /* TEXT */))
+                      ? (openBlock(), createElementBlock("a", _hoisted_8$4, toDisplayString(page), 1 /* TEXT */))
                       : (['..','...'].includes(page))
-                        ? (openBlock(), createElementBlock("a", _hoisted_14$2, toDisplayString(page), 1 /* TEXT */))
+                        ? (openBlock(), createElementBlock("a", _hoisted_9$4, toDisplayString(page), 1 /* TEXT */))
                         : (openBlock(), createElementBlock("a", {
                             key: 2,
                             onClick: $event => ($options.changeTableKey('page',page)),
                             class: "page-link"
-                          }, toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_15$2))
+                          }, toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_10$3))
                   ], 2 /* CLASS */))
                 }), 128 /* KEYED_FRAGMENT */)),
                 createElementVNode("li", {
@@ -4011,24 +4020,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]))
           : createCommentVNode("v-if", true)
       ]))
-    : (openBlock(), createElementBlock("div", _hoisted_16$2, [
+    : (openBlock(), createElementBlock("div", _hoisted_11$3, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
-          ? (openBlock(), createElementBlock("div", _hoisted_17$2, _hoisted_19$1))
+          ? (openBlock(), createElementBlock("div", _hoisted_12$2, _hoisted_14$2))
           : createCommentVNode("v-if", true),
         (!$props.hideCount)
-          ? (openBlock(), createElementBlock("div", _hoisted_20$1, [
-              createElementVNode("span", _hoisted_21$1, "Showing " + toDisplayString($props.pagination_data.displayCount) + " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          ? (openBlock(), createElementBlock("div", _hoisted_15$2, [
+              createElementVNode("span", _hoisted_16$2, "Showing " + toDisplayString($props.pagination_data.displayCount) + " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
             ]))
           : createCommentVNode("v-if", true),
         ($props.pagination_data.displayCount < $props.pagination_data.record_count && !$props.hideLoadMore)
-          ? (openBlock(), createElementBlock("div", _hoisted_22$1, [
+          ? (openBlock(), createElementBlock("div", _hoisted_17$2, [
               (this.pagination_data.loading !== 1)
                 ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     class: "btn btn-sm btn-primary mt-1",
                     onClick: _cache[4] || (_cache[4] = (...args) => ($options.loadMoreRecords && $options.loadMoreRecords(...args)))
                   }, " Load More "))
-                : (openBlock(), createElementBlock("span", _hoisted_23$1))
+                : (openBlock(), createElementBlock("span", _hoisted_18$2))
             ]))
           : createCommentVNode("v-if", true)
       ]))
@@ -4603,7 +4612,7 @@ const __default__ = {
       filter_value: '',
       loading: 'loading',
       loading_error: '',
-      records: [],
+      records: null,
       total: 0,
       pagination_data: null,
       moreDetailsId: null,
@@ -4785,14 +4794,14 @@ const __default__ = {
     },
     setCachedData: function (){
       if (this.cacheKey) {
-        this.records = ShStorage.getItem('sh_table_cache_' + this.cacheKey, []);
+        this.records = ShStorage.getItem('sh_table_cache_' + this.cacheKey, null);
       }
     },
     reloadData: function (page, append){
       if (typeof page !== 'undefined') {
         this.page = page;
       }
-      if (this.cacheKey && this.records && this.page < 2) {
+      if (this.cacheKey && this.records !== null) {
         this.loading = 'done';
       } else if (!append) {
         this.loading = 'loading';
@@ -5348,11 +5357,12 @@ return (_ctx, _cache) => {
           key: 6,
           onLoadMoreRecords: _ctx.loadMoreRecords,
           "hide-load-more": __props.hideLoadMore,
+          "per-page": _ctx.per_page,
           "hide-count": __props.hideCount,
           pagination_data: _ctx.pagination_data,
           onChangeKey: _ctx.changeKey,
           "pagination-style": _ctx.pageStyle
-        }, null, 8 /* PROPS */, ["onLoadMoreRecords", "hide-load-more", "hide-count", "pagination_data", "onChangeKey", "pagination-style"]))
+        }, null, 8 /* PROPS */, ["onLoadMoreRecords", "hide-load-more", "per-page", "hide-count", "pagination_data", "onChangeKey", "pagination-style"]))
       : createCommentVNode("v-if", true),
     (__props.actions)
       ? (openBlock(true), createElementBlock(Fragment, { key: 7 }, renderList(__props.actions.actions, (action) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",