@iankibetsh/shframework 0.4.1 → 0.4.4

package/dist/library.js

@@ -1612,7 +1612,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 (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
@@ -1631,7 +1631,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
         return (vue.openBlock(), vue.createElementBlock("option", {
           value: country,
           key: country.dialCode
-        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$5))
+        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$6))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
       [vue.vModelSelect, $data.selectedCountry]
@@ -2033,10 +2033,10 @@ const _hoisted_2$5 = {
   class: "alert alert-danger"
 };
 const _hoisted_3$5 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-warning" }, null, -1 /* HOISTED */);
-const _hoisted_4$4 = /*#__PURE__*/vue.createTextVNode(" Error");
-const _hoisted_5$3 = [
+const _hoisted_4$5 = /*#__PURE__*/vue.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" };
@@ -2090,7 +2090,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
     vue.createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
     (_ctx.form_status == 3)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, _hoisted_5$3))
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, _hoisted_5$4))
       : vue.createCommentVNode("v-if", true),
     vue.withDirectives(vue.createElementVNode("input", {
       type: "hidden",
@@ -2293,7 +2293,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 (vue.openBlock(), vue.createElementBlock("div", {
@@ -2314,7 +2314,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": "Close"
       }, null, 512 /* NEED_PATCH */)
     ]),
-    vue.createElementVNode("div", _hoisted_4$3, [
+    vue.createElementVNode("div", _hoisted_4$4, [
       vue.renderSlot(_ctx.$slots, "default")
     ])
   ], 10 /* CLASS, PROPS */, _hoisted_1$4))
@@ -2333,8 +2333,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__*/vue.createElementVNode("button", {
+const _hoisted_4$3 = { class: "modal-title" };
+const _hoisted_5$3 = /*#__PURE__*/vue.createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
   "data-dismiss": "modal"
@@ -2355,8 +2355,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       vue.createElementVNode("div", _hoisted_2$3, [
         vue.createElementVNode("div", _hoisted_3$3, [
-          vue.createElementVNode("h3", _hoisted_4$2, vue.toDisplayString($props.modalTitle), 1 /* TEXT */),
-          _hoisted_5$2
+          vue.createElementVNode("h3", _hoisted_4$3, vue.toDisplayString($props.modalTitle), 1 /* TEXT */),
+          _hoisted_5$3
         ]),
         vue.createElementVNode("div", _hoisted_6$1, [
           vue.createElementVNode("div", _hoisted_7$1, [
@@ -2445,10 +2445,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__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
-const _hoisted_4$1 = /*#__PURE__*/vue.createTextVNode("  ");
-const _hoisted_5$1 = /*#__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_4$2 = /*#__PURE__*/vue.createTextVNode("  ");
+const _hoisted_5$2 = /*#__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_10$1 = [
-  _hoisted_5$1
+  _hoisted_5$2
 ];
 const _hoisted_11$1 = { class: "record_counts" };
 const _hoisted_12$1 = {
@@ -2492,7 +2492,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
         vue.createElementVNode("div", _hoisted_2$2, [
           _hoisted_3$2,
-          _hoisted_4$1,
+          _hoisted_4$2,
           vue.withDirectives(vue.createElementVNode("select", {
             class: "select_per_page",
             onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
@@ -2959,8 +2959,8 @@ const _hoisted_2$1 = {
   class: "col-md-4 mb-2"
 };
 const _hoisted_3$1 = ["disabled"];
-const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
-const _hoisted_5 = /*#__PURE__*/vue.createTextVNode(" Export ");
+const _hoisted_4$1 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
+const _hoisted_5$1 = /*#__PURE__*/vue.createTextVNode(" Export ");
 const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
@@ -3126,8 +3126,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             (!$data.downloading)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_4,
-                  _hoisted_5
+                  _hoisted_4$1,
+                  _hoisted_5$1
                 ], 64 /* STABLE_FRAGMENT */))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   _hoisted_6,
@@ -3447,10 +3447,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: {
@@ -3470,9 +3472,16 @@ var script = {
     }
   },
   mounted () {
+    this.generatedId =  'tab' + Math.random().toString(36).slice(2);
     this.resetTabCounts();
+    this.setTab(this.tabs[0]);
   },
   methods: {
+    setTab: function(tab){
+      if(tab){
+        this.currentTab = tab.replace(/_/g, ' ');
+      }
+    },
     setTabCounts: function (tabCounts) {
       if (typeof tabCounts === 'object') {
         this.setCounts(tabCounts);
@@ -3504,7 +3513,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];
@@ -3517,47 +3526,75 @@ var script = {
   }
 };
 
-const _hoisted_1 = { class: "common_tabs sh-horizontal-tabs" };
-const _hoisted_2 = {
-  class: "nav nav-tabs mb-2",
-  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__*/vue.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 = vue.resolveComponent("router-link");
   const _component_router_view = vue.resolveComponent("router-view");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("ul", _hoisted_2, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.tabs, (tab) => {
-        return (vue.openBlock(), vue.createElementBlock("li", {
-          class: "nav-item",
-          key: tab
-        }, [
-          vue.createVNode(_component_router_link, {
-            "active-class": 'active',
-            class: "nav-link text-capitalize",
-            to: $props.baseUrl+'/tab/'+tab,
-            role: "tab",
-            id: 'sh_tab_' + tab
-          }, {
-            default: vue.withCtx(() => [
-              vue.createTextVNode(vue.toDisplayString(tab.replace(/_/g, ' ')), 1 /* TEXT */)
-            ]),
-            _: 2 /* DYNAMIC */
-          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to", "id"])
+  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    ($data.generatedId)
+      ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
+          ($data.isResponsive)
+            ? (vue.openBlock(), vue.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"
+              }, [
+                vue.createTextVNode(vue.toDisplayString($data.currentTab) + " ", 1 /* TEXT */),
+                _hoisted_3
+              ], 8 /* PROPS */, _hoisted_2))
+            : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass($data.isResponsive ? 'collapse navbar-collapse':''),
+            id: $data.generatedId
+          }, [
+            vue.createElementVNode("ul", {
+              class: vue.normalizeClass($data.isResponsive ? 'navbar-nav nav':'nav')
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.tabs, (tab) => {
+                return (vue.openBlock(), vue.createElementBlock("li", {
+                  class: "nav-item",
+                  key: tab
+                }, [
+                  vue.createVNode(_component_router_link, {
+                    onClick: $event => ($options.setTab(tab)),
+                    "active-class": 'active',
+                    class: vue.normalizeClass(["nav-link text-capitalize", 'sh_tab_' + tab]),
+                    to: $props.baseUrl+'/tab/'+tab,
+                    role: "tab"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.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 */))
-    ]),
-    vue.createElementVNode("div", _hoisted_3, [
+      : vue.createCommentVNode("v-if", true),
+    vue.createElementVNode("div", _hoisted_5, [
       vue.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;

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",
@@ -3114,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,
@@ -3435,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: {
@@ -3458,9 +3460,16 @@ var script = {
     }
   },
   mounted () {
+    this.generatedId =  'tab' + Math.random().toString(36).slice(2);
     this.resetTabCounts();
+    this.setTab(this.tabs[0]);
   },
   methods: {
+    setTab: function(tab){
+      if(tab){
+        this.currentTab = tab.replace(/_/g, ' ');
+      }
+    },
     setTabCounts: function (tabCounts) {
       if (typeof tabCounts === 'object') {
         this.setCounts(tabCounts);
@@ -3492,7 +3501,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];
@@ -3505,47 +3514,75 @@ var script = {
   }
 };
 
-const _hoisted_1 = { class: "common_tabs sh-horizontal-tabs" };
-const _hoisted_2 = {
-  class: "nav nav-tabs mb-2",
-  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;

package/package.json

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