@iankibetsh/shframework 0.3.9 → 0.4.2

package/dist/library.mjs

@@ -1600,7 +1600,7 @@ const _hoisted_2$6 = {
   style: {"display":"contents"}
 };
 const _hoisted_3$6 = ["src"];
-const _hoisted_4$5 = ["value"];
+const _hoisted_4$6 = ["value"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$7, [
@@ -1619,7 +1619,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
         return (openBlock(), createElementBlock("option", {
           value: country,
           key: country.dialCode
-        }, toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$5))
+        }, toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$6))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
       [vModelSelect, $data.selectedCountry]
@@ -2021,10 +2021,10 @@ const _hoisted_2$5 = {
   class: "alert alert-danger"
 };
 const _hoisted_3$5 = /*#__PURE__*/createElementVNode("i", { class: "fa fa-warning" }, null, -1 /* HOISTED */);
-const _hoisted_4$4 = /*#__PURE__*/createTextVNode(" Error");
-const _hoisted_5$3 = [
+const _hoisted_4$5 = /*#__PURE__*/createTextVNode(" Error");
+const _hoisted_5$4 = [
   _hoisted_3$5,
-  _hoisted_4$4
+  _hoisted_4$5
 ];
 const _hoisted_6$2 = { class: "row" };
 const _hoisted_7$2 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
@@ -2078,7 +2078,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
     createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
     (_ctx.form_status == 3)
-      ? (openBlock(), createElementBlock("div", _hoisted_2$5, _hoisted_5$3))
+      ? (openBlock(), createElementBlock("div", _hoisted_2$5, _hoisted_5$4))
       : createCommentVNode("v-if", true),
     withDirectives(createElementVNode("input", {
       type: "hidden",
@@ -2281,7 +2281,7 @@ const _hoisted_3$4 = {
   class: "offcanvas-title",
   id: "offcanvasScrollingLabel"
 };
-const _hoisted_4$3 = { class: "offcanvas-body" };
+const _hoisted_4$4 = { class: "offcanvas-body" };
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
@@ -2302,7 +2302,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": "Close"
       }, null, 512 /* NEED_PATCH */)
     ]),
-    createElementVNode("div", _hoisted_4$3, [
+    createElementVNode("div", _hoisted_4$4, [
       renderSlot(_ctx.$slots, "default")
     ])
   ], 10 /* CLASS, PROPS */, _hoisted_1$4))
@@ -2321,8 +2321,8 @@ var script$3 = {
 const _hoisted_1$3 = ["id"];
 const _hoisted_2$3 = { class: "modal-content" };
 const _hoisted_3$3 = { class: "modal-header" };
-const _hoisted_4$2 = { class: "modal-title" };
-const _hoisted_5$2 = /*#__PURE__*/createElementVNode("button", {
+const _hoisted_4$3 = { class: "modal-title" };
+const _hoisted_5$3 = /*#__PURE__*/createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
   "data-dismiss": "modal"
@@ -2343,8 +2343,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       createElementVNode("div", _hoisted_2$3, [
         createElementVNode("div", _hoisted_3$3, [
-          createElementVNode("h3", _hoisted_4$2, toDisplayString($props.modalTitle), 1 /* TEXT */),
-          _hoisted_5$2
+          createElementVNode("h3", _hoisted_4$3, toDisplayString($props.modalTitle), 1 /* TEXT */),
+          _hoisted_5$3
         ]),
         createElementVNode("div", _hoisted_6$1, [
           createElementVNode("div", _hoisted_7$1, [
@@ -2433,10 +2433,10 @@ var script$2 = {
 const _hoisted_1$2 = { key: 0 };
 const _hoisted_2$2 = { class: "record_count_body mb-3" };
 const _hoisted_3$2 = /*#__PURE__*/createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
-const _hoisted_4$1 = /*#__PURE__*/createTextVNode("  ");
-const _hoisted_5$1 = /*#__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_4$2 = /*#__PURE__*/createTextVNode("  ");
+const _hoisted_5$2 = /*#__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_10$1 = [
-  _hoisted_5$1
+  _hoisted_5$2
 ];
 const _hoisted_11$1 = { class: "record_counts" };
 const _hoisted_12$1 = {
@@ -2480,7 +2480,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
         createElementVNode("div", _hoisted_2$2, [
           _hoisted_3$2,
-          _hoisted_4$1,
+          _hoisted_4$2,
           withDirectives(createElementVNode("select", {
             class: "select_per_page",
             onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
@@ -2947,8 +2947,8 @@ const _hoisted_2$1 = {
   class: "col-md-4 mb-2"
 };
 const _hoisted_3$1 = ["disabled"];
-const _hoisted_4 = /*#__PURE__*/createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
-const _hoisted_5 = /*#__PURE__*/createTextVNode(" Export ");
+const _hoisted_4$1 = /*#__PURE__*/createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
+const _hoisted_5$1 = /*#__PURE__*/createTextVNode(" Export ");
 const _hoisted_6 = /*#__PURE__*/createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
@@ -2962,60 +2962,57 @@ const _hoisted_8 = {
 const _hoisted_9 = { class: "col-12 mb-3" };
 const _hoisted_10 = { class: "sh-search-bar" };
 const _hoisted_11 = ["placeholder"];
-const _hoisted_12 = /*#__PURE__*/createElementVNode("span", { class: "sh-search-icon" }, [
-  /*#__PURE__*/createElementVNode("i", { class: "bi bi-search mb-0" })
-], -1 /* HOISTED */);
-const _hoisted_13 = {
+const _hoisted_12 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_14 = /*#__PURE__*/createElementVNode("div", {
+const _hoisted_13 = /*#__PURE__*/createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, [
   /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
-const _hoisted_15 = [
-  _hoisted_14
+const _hoisted_14 = [
+  _hoisted_13
 ];
-const _hoisted_16 = {
+const _hoisted_15 = {
   key: 1,
   class: "alert alert-danger"
 };
-const _hoisted_17 = { colspan: 2 };
-const _hoisted_18 = {
+const _hoisted_16 = { colspan: 2 };
+const _hoisted_17 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_19 = /*#__PURE__*/createElementVNode("div", {
+const _hoisted_18 = /*#__PURE__*/createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, [
   /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
-const _hoisted_20 = [
-  _hoisted_19
+const _hoisted_19 = [
+  _hoisted_18
 ];
-const _hoisted_21 = {
+const _hoisted_20 = {
   key: 1,
   class: "alert alert-danger"
 };
-const _hoisted_22 = { colspan: 2 };
-const _hoisted_23 = { class: "sh-thead" };
+const _hoisted_21 = { colspan: 2 };
+const _hoisted_22 = { class: "sh-thead" };
+const _hoisted_23 = ["onClick"];
 const _hoisted_24 = ["onClick"];
 const _hoisted_25 = ["onClick"];
-const _hoisted_26 = ["onClick"];
-const _hoisted_27 = {
+const _hoisted_26 = {
   key: 0,
   class: "text-capitalize"
 };
-const _hoisted_28 = { class: "sh-tbody" };
-const _hoisted_29 = {
+const _hoisted_27 = { class: "sh-tbody" };
+const _hoisted_28 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_30 = ["colspan"];
-const _hoisted_31 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
+const _hoisted_29 = ["colspan"];
+const _hoisted_30 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
   /*#__PURE__*/createElementVNode("div", {
     class: "spinner-border",
     role: "status"
@@ -3023,46 +3020,46 @@ const _hoisted_31 = /*#__PURE__*/createElementVNode("div", { class: "text-center
     /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
   ])
 ], -1 /* HOISTED */);
-const _hoisted_32 = [
-  _hoisted_31
+const _hoisted_31 = [
+  _hoisted_30
 ];
-const _hoisted_33 = {
+const _hoisted_32 = {
   key: 1,
   class: "text-center alert alert-danger"
 };
-const _hoisted_34 = ["colspan"];
-const _hoisted_35 = {
+const _hoisted_33 = ["colspan"];
+const _hoisted_34 = {
   key: 2,
   class: "text-center alert alert-info no_records"
 };
-const _hoisted_36 = ["colspan"];
-const _hoisted_37 = /*#__PURE__*/createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
-const _hoisted_38 = /*#__PURE__*/createTextVNode(" No records found ");
-const _hoisted_39 = [
-  _hoisted_37,
-  _hoisted_38
+const _hoisted_35 = ["colspan"];
+const _hoisted_36 = /*#__PURE__*/createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
+const _hoisted_37 = /*#__PURE__*/createTextVNode(" No records found ");
+const _hoisted_38 = [
+  _hoisted_36,
+  _hoisted_37
 ];
-const _hoisted_40 = ["onClick"];
-const _hoisted_41 = { key: 1 };
-const _hoisted_42 = {
+const _hoisted_39 = ["onClick"];
+const _hoisted_40 = { key: 1 };
+const _hoisted_41 = {
   key: 2,
   class: "text-success fw-bold"
 };
-const _hoisted_43 = { key: 3 };
+const _hoisted_42 = { key: 3 };
+const _hoisted_43 = ["innerHTML"];
 const _hoisted_44 = ["innerHTML"];
 const _hoisted_45 = ["innerHTML"];
-const _hoisted_46 = ["innerHTML"];
-const _hoisted_47 = {
+const _hoisted_46 = {
   key: 0,
   style: {"white-space":"nowrap"}
 };
-const _hoisted_48 = ["title", "onClick"];
-const _hoisted_49 = { key: 5 };
-const _hoisted_50 = {
+const _hoisted_47 = ["title", "onClick"];
+const _hoisted_48 = { key: 5 };
+const _hoisted_49 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_51 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
+const _hoisted_50 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
   /*#__PURE__*/createElementVNode("div", {
     class: "spinner-border",
     role: "status"
@@ -3070,38 +3067,38 @@ const _hoisted_51 = /*#__PURE__*/createElementVNode("div", { class: "text-center
     /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
   ])
 ], -1 /* HOISTED */);
-const _hoisted_52 = [
-  _hoisted_51
+const _hoisted_51 = [
+  _hoisted_50
 ];
-const _hoisted_53 = { key: 1 };
-const _hoisted_54 = {
+const _hoisted_52 = { key: 1 };
+const _hoisted_53 = {
   key: 2,
   class: "mobile-list-items"
 };
-const _hoisted_55 = ["onClick"];
-const _hoisted_56 = {
+const _hoisted_54 = ["onClick"];
+const _hoisted_55 = {
   key: 0,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_57 = {
+const _hoisted_56 = {
   key: 1,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_58 = {
+const _hoisted_57 = {
   key: 2,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_59 = { key: 1 };
-const _hoisted_60 = {
+const _hoisted_58 = { key: 1 };
+const _hoisted_59 = {
   key: 2,
   class: "text-primary fw-bold"
 };
+const _hoisted_60 = ["innerHTML"];
 const _hoisted_61 = ["innerHTML"];
 const _hoisted_62 = ["innerHTML"];
-const _hoisted_63 = ["innerHTML"];
-const _hoisted_64 = /*#__PURE__*/createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
-const _hoisted_65 = { key: 0 };
-const _hoisted_66 = ["title", "onClick"];
+const _hoisted_63 = /*#__PURE__*/createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
+const _hoisted_64 = { key: 0 };
+const _hoisted_65 = ["title", "onClick"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
@@ -3117,8 +3114,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             (!$data.downloading)
               ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  _hoisted_4,
-                  _hoisted_5
+                  _hoisted_4$1,
+                  _hoisted_5$1
                 ], 64 /* STABLE_FRAGMENT */))
               : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   _hoisted_6,
@@ -3132,15 +3129,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("div", _hoisted_9, [
             createElementVNode("div", _hoisted_10, [
               withDirectives(createElementVNode("input", {
-                type: "text",
+                type: "search",
                 onChange: _cache[1] || (_cache[1] = $event => ($options.reloadData(1))),
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (($data.filter_value) = $event)),
                 placeholder: $props.searchPlaceholder ? $props.searchPlaceholder : 'Search',
                 class: "form-control sh-search-input"
               }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_11), [
                 [vModelText, $data.filter_value]
-              ]),
-              _hoisted_12
+              ])
             ])
           ])
         ]))
@@ -3148,10 +3144,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ($options.hasDefaultSlot)
       ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           ($data.loading === 'loading')
-            ? (openBlock(), createElementBlock("div", _hoisted_13, _hoisted_15))
+            ? (openBlock(), createElementBlock("div", _hoisted_12, _hoisted_14))
             : ($data.loading === 'error')
-              ? (openBlock(), createElementBlock("div", _hoisted_16, [
-                  createElementVNode("span", _hoisted_17, toDisplayString($data.loading_error), 1 /* TEXT */)
+              ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                  createElementVNode("span", _hoisted_16, toDisplayString($data.loading_error), 1 /* TEXT */)
                 ]))
               : createCommentVNode("v-if", true),
           ($data.loading === 'done')
@@ -3167,10 +3163,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ($options.hasRecordsSlot)
       ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
           ($data.loading === 'loading')
-            ? (openBlock(), createElementBlock("div", _hoisted_18, _hoisted_20))
+            ? (openBlock(), createElementBlock("div", _hoisted_17, _hoisted_19))
             : ($data.loading === 'error')
-              ? (openBlock(), createElementBlock("div", _hoisted_21, [
-                  createElementVNode("span", _hoisted_22, toDisplayString($data.loading_error), 1 /* TEXT */)
+              ? (openBlock(), createElementBlock("div", _hoisted_20, [
+                  createElementVNode("span", _hoisted_21, toDisplayString($data.loading_error), 1 /* TEXT */)
                 ]))
               : createCommentVNode("v-if", true),
           ($data.loading === 'done')
@@ -3185,7 +3181,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             key: 4,
             class: normalizeClass(["table sh-table", $props.tableHover ? 'table-hover':''])
           }, [
-            createElementVNode("thead", _hoisted_23, [
+            createElementVNode("thead", _hoisted_22, [
               createElementVNode("tr", null, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (title) => {
                   return (openBlock(), createElementBlock("th", {
@@ -3196,43 +3192,43 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           key: 0,
                           class: "text-capitalize",
                           onClick: $event => ($options.changeKey('order_by',title))
-                        }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
+                        }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
                       : (typeof title === 'function')
                         ? (openBlock(), createElementBlock("a", {
                             key: 1,
                             class: "text-capitalize",
                             onClick: $event => ($options.changeKey('order_by',title))
-                          }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
+                          }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
                         : (openBlock(), createElementBlock("a", {
                             key: 2,
                             class: "text-capitalize",
                             onClick: $event => ($options.changeKey('order_by',title[0]))
-                          }, toDisplayString(title[1].replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_26))
+                          }, toDisplayString(title[1].replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
                   ]))
                 }), 128 /* KEYED_FRAGMENT */)),
                 ($props.actions)
-                  ? (openBlock(), createElementBlock("th", _hoisted_27, toDisplayString($props.actions.label), 1 /* TEXT */))
+                  ? (openBlock(), createElementBlock("th", _hoisted_26, toDisplayString($props.actions.label), 1 /* TEXT */))
                   : createCommentVNode("v-if", true)
               ])
             ]),
-            createElementVNode("tbody", _hoisted_28, [
+            createElementVNode("tbody", _hoisted_27, [
               ($data.loading === 'loading')
-                ? (openBlock(), createElementBlock("tr", _hoisted_29, [
+                ? (openBlock(), createElementBlock("tr", _hoisted_28, [
                     createElementVNode("td", {
                       colspan: $props.headers.length
-                    }, _hoisted_32, 8 /* PROPS */, _hoisted_30)
+                    }, _hoisted_31, 8 /* PROPS */, _hoisted_29)
                   ]))
                 : ($data.loading === 'error')
-                  ? (openBlock(), createElementBlock("tr", _hoisted_33, [
+                  ? (openBlock(), createElementBlock("tr", _hoisted_32, [
                       createElementVNode("td", {
                         colspan: $props.headers.length
-                      }, toDisplayString($data.loading_error), 9 /* TEXT, PROPS */, _hoisted_34)
+                      }, toDisplayString($data.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
                     ]))
                   : ($data.records.length === 0)
-                    ? (openBlock(), createElementBlock("tr", _hoisted_35, [
+                    ? (openBlock(), createElementBlock("tr", _hoisted_34, [
                         createElementVNode("td", {
                           colspan: $props.actions ? $props.headers.length + 1 : $props.headers.length
-                        }, _hoisted_39, 8 /* PROPS */, _hoisted_36)
+                        }, _hoisted_38, 8 /* PROPS */, _hoisted_35)
                       ]))
                     : ($data.loading === 'done')
                       ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList($data.records, (record, index) => {
@@ -3253,29 +3249,29 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                       innerHTML: record[key]
                                     }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
                                   : ($options.getFieldType(key) === 'numeric')
-                                    ? (openBlock(), createElementBlock("span", _hoisted_41, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                    ? (openBlock(), createElementBlock("span", _hoisted_40, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                     : ($options.getFieldType(key) === 'money')
-                                      ? (openBlock(), createElementBlock("span", _hoisted_42, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                      ? (openBlock(), createElementBlock("span", _hoisted_41, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                       : ($options.getFieldType(key) === 'date')
-                                        ? (openBlock(), createElementBlock("span", _hoisted_43, toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
+                                        ? (openBlock(), createElementBlock("span", _hoisted_42, toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
                                         : (typeof key === 'string')
                                           ? (openBlock(), createElementBlock("span", {
                                               key: 4,
                                               innerHTML: record[key]
-                                            }, null, 8 /* PROPS */, _hoisted_44))
+                                            }, null, 8 /* PROPS */, _hoisted_43))
                                           : (typeof key === 'function')
                                             ? (openBlock(), createElementBlock("span", {
                                                 key: 5,
                                                 innerHTML: key(record, index)
-                                              }, null, 8 /* PROPS */, _hoisted_45))
+                                              }, null, 8 /* PROPS */, _hoisted_44))
                                             : (openBlock(), createElementBlock("span", {
                                                 key: 6,
                                                 innerHTML: record[key[0]]
-                                              }, null, 8 /* PROPS */, _hoisted_46))
+                                              }, null, 8 /* PROPS */, _hoisted_45))
                               ]))
                             }), 128 /* KEYED_FRAGMENT */)),
                             ($props.actions)
-                              ? (openBlock(), createElementBlock("td", _hoisted_47, [
+                              ? (openBlock(), createElementBlock("td", _hoisted_46, [
                                   (openBlock(true), createElementBlock(Fragment, null, renderList($props.actions.actions, (act) => {
                                     return (openBlock(), createElementBlock(Fragment, {
                                       key: act.path
@@ -3290,7 +3286,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                                         title: act.title,
                                                         class: normalizeClass(act.class ? act.class:'btn btn-default'),
                                                         onClick: $event => ($options.doEmitAction(act.emits,record))
-                                                      }, toDisplayString(act.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_48))
+                                                      }, toDisplayString(act.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_47))
                                                     : createCommentVNode("v-if", true),
                                                   (!act.emits)
                                                     ? (openBlock(), createBlock(_component_router_link, {
@@ -3313,20 +3309,20 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                   }), 128 /* KEYED_FRAGMENT */))
                                 ]))
                               : createCommentVNode("v-if", true)
-                          ], 10 /* CLASS, PROPS */, _hoisted_40))
+                          ], 10 /* CLASS, PROPS */, _hoisted_39))
                         }), 128 /* KEYED_FRAGMENT */))
                       : createCommentVNode("v-if", true)
             ])
           ], 2 /* CLASS */))
-        : (openBlock(), createElementBlock("div", _hoisted_49, [
+        : (openBlock(), createElementBlock("div", _hoisted_48, [
             ($data.loading === 'loading')
-              ? (openBlock(), createElementBlock("div", _hoisted_50, _hoisted_52))
+              ? (openBlock(), createElementBlock("div", _hoisted_49, _hoisted_51))
               : ($data.loading === 'error')
-                ? (openBlock(), createElementBlock("div", _hoisted_53, [
+                ? (openBlock(), createElementBlock("div", _hoisted_52, [
                     createElementVNode("span", null, toDisplayString($data.loading_error), 1 /* TEXT */)
                   ]))
                 : ($data.loading === 'done')
-                  ? (openBlock(), createElementBlock("div", _hoisted_54, [
+                  ? (openBlock(), createElementBlock("div", _hoisted_53, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList($data.records, (record, index) => {
                         return (openBlock(), createElementBlock(Fragment, {
                           key: record.id
@@ -3341,10 +3337,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 key: key[0]
                               }, [
                                 (typeof key === 'string' )
-                                  ? (openBlock(), createElementBlock("p", _hoisted_56, toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
+                                  ? (openBlock(), createElementBlock("p", _hoisted_55, toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
                                   : (typeof key === 'function')
-                                    ? (openBlock(), createElementBlock("p", _hoisted_57, toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
-                                    : (openBlock(), createElementBlock("p", _hoisted_58, toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
+                                    ? (openBlock(), createElementBlock("p", _hoisted_56, toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
+                                    : (openBlock(), createElementBlock("p", _hoisted_57, toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
                                 createElementVNode("span", null, [
                                   (typeof key === 'string' && $props.links && $props.links[key])
                                     ? (openBlock(), createBlock(_component_router_link, {
@@ -3354,29 +3350,29 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                         innerHTML: record[key]
                                       }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
                                     : ($options.getFieldType(key) === 'numeric')
-                                      ? (openBlock(), createElementBlock("span", _hoisted_59, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                      ? (openBlock(), createElementBlock("span", _hoisted_58, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                       : ($options.getFieldType(key) === 'money')
-                                        ? (openBlock(), createElementBlock("span", _hoisted_60, "KES " + toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                        ? (openBlock(), createElementBlock("span", _hoisted_59, "KES " + toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                         : (typeof key    === 'string')
                                           ? (openBlock(), createElementBlock("span", {
                                               key: 3,
                                               innerHTML: record[key]
-                                            }, null, 8 /* PROPS */, _hoisted_61))
+                                            }, null, 8 /* PROPS */, _hoisted_60))
                                           : (typeof key === 'function')
                                             ? (openBlock(), createElementBlock("span", {
                                                 key: 4,
                                                 innerHTML: key(record, index )
-                                              }, null, 8 /* PROPS */, _hoisted_62))
+                                              }, null, 8 /* PROPS */, _hoisted_61))
                                             : (openBlock(), createElementBlock("span", {
                                                 key: 5,
                                                 innerHTML: record[key[0]]
-                                              }, null, 8 /* PROPS */, _hoisted_63))
+                                              }, null, 8 /* PROPS */, _hoisted_62))
                                 ]),
-                                _hoisted_64
+                                _hoisted_63
                               ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */)),
                             ($props.actions)
-                              ? (openBlock(), createElementBlock("div", _hoisted_65, [
+                              ? (openBlock(), createElementBlock("div", _hoisted_64, [
                                   (openBlock(true), createElementBlock(Fragment, null, renderList($props.actions.actions, (act) => {
                                     return (openBlock(), createElementBlock(Fragment, {
                                       key: act.path
@@ -3391,7 +3387,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                                         title: act.title,
                                                         class: normalizeClass(act.class ? act.class:'btn btn-default'),
                                                         onClick: $event => ($options.doEmitAction(act.emits,record))
-                                                      }, toDisplayString(act.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_66))
+                                                      }, toDisplayString(act.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_65))
                                                     : createCommentVNode("v-if", true),
                                                   (!act.emits)
                                                     ? (openBlock(), createBlock(_component_router_link, {
@@ -3414,7 +3410,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                   }), 128 /* KEYED_FRAGMENT */))
                                 ]))
                               : createCommentVNode("v-if", true)
-                          ], 8 /* PROPS */, _hoisted_55)
+                          ], 8 /* PROPS */, _hoisted_54)
                         ], 64 /* STABLE_FRAGMENT */))
                       }), 128 /* KEYED_FRAGMENT */))
                     ]))
@@ -3439,10 +3435,12 @@ script$1.__file = "src/views/ShTable.vue";
 
 var script = {
   name: 'ShTabs',
-  props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts'],
+  props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive'],
   data () {
     return {
-      currentTab: ''
+      currentTab: '',
+      generatedId: null,
+      isResponsive: typeof this.responsive !== 'undefined'
     }
   },
   watch: {
@@ -3462,9 +3460,14 @@ var script = {
     }
   },
   mounted () {
+    this.generatedId =  'tab' + Math.random().toString(36).slice(2);
     this.resetTabCounts();
+    this.setTab(this.tabs[0]);
   },
   methods: {
+    setTab: function(tab){
+      this.currentTab = tab.replace(/_/g, ' ');
+    },
     setTabCounts: function (tabCounts) {
       if (typeof tabCounts === 'object') {
         this.setCounts(tabCounts);
@@ -3496,7 +3499,7 @@ var script = {
     },
     setCounts: function (res) {
       Object.keys(res).forEach(key => {
-        const elem = document.getElementById('sh_tab_' + key);
+        let elem = document.getElementsByClassName('sh_tab_' + key);
         if (elem) {
           let txt = elem.innerHTML;
           txt = txt.split('<i class="d-none"></i>')[0];
@@ -3509,48 +3512,75 @@ var script = {
   }
 };
 
-const _hoisted_1 = { class: "common_tabs" };
-const _hoisted_2 = {
-  class: "nav nav-tabs mb-2",
-  id: "myTab",
-  role: "tablist"
+const _hoisted_1 = {
+  key: 0,
+  class: "navbar navbar-expand-lg sh-horizontal-tabs"
 };
-const _hoisted_3 = { class: "tab-content" };
+const _hoisted_2 = ["data-bs-target"];
+const _hoisted_3 = /*#__PURE__*/createElementVNode("i", { class: "bi-chevron-right float-end" }, null, -1 /* HOISTED */);
+const _hoisted_4 = ["id"];
+const _hoisted_5 = { class: "tab-content" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
   const _component_router_view = resolveComponent("router-view");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("ul", _hoisted_2, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList($props.tabs, (tab) => {
-        return (openBlock(), createElementBlock("li", {
-          class: "nav-item",
-          key: tab
-        }, [
-          createVNode(_component_router_link, {
-            "active-class": 'active',
-            class: "nav-link text-capitalize",
-            to: $props.baseUrl+'/tab/'+tab,
-            role: "tab",
-            id: 'sh_tab_' + tab
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(tab.replace(/_/g, ' ')), 1 /* TEXT */)
-            ]),
-            _: 2 /* DYNAMIC */
-          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to", "id"])
+  return (openBlock(), createElementBlock(Fragment, null, [
+    ($data.generatedId)
+      ? (openBlock(), createElementBlock("nav", _hoisted_1, [
+          ($data.isResponsive)
+            ? (openBlock(), createElementBlock("a", {
+                key: 0,
+                href: "#",
+                class: "form-control navbar-toggler text-capitalize",
+                "data-bs-toggle": "collapse",
+                "data-bs-target": '#' + $data.generatedId,
+                "aria-controls": "navbarNav",
+                "aria-expanded": "false",
+                "aria-label": "Toggle navigation"
+              }, [
+                createTextVNode(toDisplayString($data.currentTab) + " ", 1 /* TEXT */),
+                _hoisted_3
+              ], 8 /* PROPS */, _hoisted_2))
+            : createCommentVNode("v-if", true),
+          createElementVNode("div", {
+            class: normalizeClass($data.isResponsive ? 'collapse navbar-collapse':''),
+            id: $data.generatedId
+          }, [
+            createElementVNode("ul", {
+              class: normalizeClass($data.isResponsive ? 'navbar-nav nav':'nav')
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($props.tabs, (tab) => {
+                return (openBlock(), createElementBlock("li", {
+                  class: "nav-item",
+                  key: tab
+                }, [
+                  createVNode(_component_router_link, {
+                    onClick: $event => ($options.setTab(tab)),
+                    "active-class": 'active',
+                    class: normalizeClass(["nav-link text-capitalize", 'sh_tab_' + tab]),
+                    to: $props.baseUrl+'/tab/'+tab,
+                    role: "tab"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(tab.replace(/_/g, ' ')), 1 /* TEXT */)
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "to", "class"])
+                ]))
+              }), 128 /* KEYED_FRAGMENT */))
+            ], 2 /* CLASS */)
+          ], 10 /* CLASS, PROPS */, _hoisted_4)
         ]))
-      }), 128 /* KEYED_FRAGMENT */))
-    ]),
-    createElementVNode("div", _hoisted_3, [
+      : createCommentVNode("v-if", true),
+    createElementVNode("div", _hoisted_5, [
       createVNode(_component_router_view, {
         currentTab: $data.currentTab,
         sharedData: $props.sharedData,
         tabCounts: $props.tabCounts
       }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"])
     ])
-  ]))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 
 script.render = render;