@iankibetsh/shframework 1.6.7 → 1.6.9

package/dist/dist/library.mjs.css

@@ -95,21 +95,6 @@
   flex-grow: 1;
 }
 
-.sh-selected-item{
-  line-height: unset!important;
-}
-.sh-suggestion-input{
-  padding: 0.375rem 0.75rem;
-}
-.sh-suggest{
-  margin-bottom: 1rem;
-}
-.sh-suggest-control::after{
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 0.255em;
-}
-
 :root {
   --ck-z-default: 10555 !important;
   --ck-z-modal: calc(var(--ck-z-default) + 999) !important;
@@ -131,6 +116,21 @@
   }
 }
 
+.sh-selected-item{
+  line-height: unset!important;
+}
+.sh-suggestion-input{
+  padding: 0.375rem 0.75rem;
+}
+.sh-suggest{
+  margin-bottom: 1rem;
+}
+.sh-suggest-control::after{
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.255em;
+}
+
 .sh-forgot-link, .sh-register-link{
   cursor: pointer;
 }

package/dist/library.js

@@ -1945,7 +1945,7 @@ const _hoisted_2$d = {
 const _hoisted_3$c = ["src"];
 const _hoisted_4$c = ["value"];
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
     ($data.selectedCountry)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
@@ -1980,7 +1980,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$s.render = render$5;
+script$s.render = render$4;
 script$s.__file = "src/lib/components/form-components/PhoneInput.vue";
 
 var script$r = {
@@ -2028,7 +2028,7 @@ const _hoisted_1$m = /*#__PURE__*/vue.createElementVNode("textarea", {
   "data-cy": "tinymce_editor"
 }, null, -1 /* HOISTED */);
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = vue.resolveComponent("editor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -2057,7 +2057,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$r.render = render$4;
+script$r.render = render$3;
 script$r.__file = "src/lib/components/form-components/ShEditor.vue";
 
 const _hoisted_1$l = {
@@ -2609,7 +2609,7 @@ const _hoisted_24$1 = /*#__PURE__*/vue.createElementVNode("span", {
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_phone_input = vue.resolveComponent("phone-input");
   const _component_ShSuggest = vue.resolveComponent("ShSuggest");
   const _component_ShEditor = vue.resolveComponent("ShEditor");
@@ -2832,7 +2832,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$p.render = render$3;
+script$p.render = render$2;
 script$p.__file = "src/lib/components/ShForm.vue";
 
 var script$o = {
@@ -3798,7 +3798,7 @@ const _hoisted_22$1 = {
   class: "text-center"
 };
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
         vue.createElementVNode("div", _hoisted_2$6, [
@@ -3872,7 +3872,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$c.render = render$2;
+script$c.render = render$1;
 script$c.__file = "src/lib/components/list_templates/Pagination.vue";
 
 const _hoisted_1$a = /*#__PURE__*/vue.createElementVNode("span", {
@@ -4481,7 +4481,7 @@ const _hoisted_63 = { key: 0 };
 const _hoisted_64 = ["href"];
 const _hoisted_65 = ["title", "onClick"];
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
   const _component_sh_confirm_action = vue.resolveComponent("sh-confirm-action");
   const _component_sh_silent_action = vue.resolveComponent("sh-silent-action");
@@ -4582,11 +4582,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               class: "text-capitalize",
                               onClick: $event => ($options.changeKey('order_by',title(null)))
                             }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
-                          : (vue.openBlock(), vue.createElementBlock("a", {
-                              key: 2,
-                              class: "text-capitalize",
-                              onClick: $event => ($options.changeKey('order_by',title[0]))
-                            }, vue.toDisplayString(title[1].replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
+                          : (typeof title !== 'undefined')
+                            ? (vue.openBlock(), vue.createElementBlock("a", {
+                                key: 2,
+                                class: "text-capitalize",
+                                onClick: $event => ($options.changeKey('order_by',title))
+                              }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
+                            : vue.createCommentVNode("v-if", true)
                     ]))
                   }), 128 /* KEYED_FRAGMENT */)),
                   ($props.actions)
@@ -4624,9 +4626,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               onClick: $event => ($options.rowSelected(record))
                             }, [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.headers, (key) => {
-                                return (vue.openBlock(), vue.createElementBlock("td", {
-                                  key: key[0]
-                                }, [
+                                return (vue.openBlock(), vue.createElementBlock("td", { key: key }, [
                                   (typeof key === 'string' && $props.links && $props.links[key])
                                     ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                         key: 0,
@@ -4940,108 +4940,128 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$9.render = render$1;
+script$9.render = render;
 script$9.__file = "src/lib/components/ShTable.vue";
 
 var script$8 = {
-  name: 'ShTabs',
-  props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive','classOne','classTwo','classes'],
-  data () {
-    return {
-      currentTab: '',
-      generatedId: null,
-      isResponsive: typeof this.responsive !== 'undefined'
-    }
+  __name: 'ShTabs',
+  props: {
+  tabs: {
+    type: Array,
+    required: true
   },
-  watch: {
-    refreshStatus: function (state) {
-      if (state === 0) {
-        if (this.tabCounts) {
-          this.setTabCounts(this.tabCounts);
-        }
-      }
-    },
-    tabCounts: function () {
-      this.resetTabCounts();
-    }
+  baseUrl: {
+    type: String,
+    required: true
   },
-  computed: {
-    refreshStatus () {
-    }
+  sharedData: {
+    type: Object
   },
-  mounted () {
-    this.generatedId = 'tab' + Math.random().toString(36).slice(2);
-    this.resetTabCounts();
-    this.setTab(this.tabs[0]);
+  tabCounts: {
+    type: Object
   },
-  methods: {
-    setTab: function (tab) {
-      if (tab) {
-        this.currentTab = tab.replace(/_/g, ' ');
-      }
-    },
-    setTabCounts: function (tabCounts) {
-      if (typeof tabCounts === 'object') {
-        this.setCounts(tabCounts);
-      } else {
-        shApis.doGet(tabCounts).then(res => {
-          this.setCounts(res.data);
-        });
-      }
-    },
-    resetTabCounts: function () {
-      const arr = this.$route.fullPath.split('/');
-      if (!this.tabExistsInUrl()) {
-        this.$router.push(this.$route.fullPath + '/tab/' + this.tabs[0]);
-      } else {
-        this.currentTab = arr[arr.length - 1];
-      }
-      if (this.tabCounts) {
-        this.setTabCounts(this.tabCounts);
+  responsive: {
+    type: Object
+  },
+  classes: {
+    type: String
+  },
+  classOne: {
+    type: String
+  },
+  classTwo: {
+    type: String
+  }
+},
+  setup(__props) {
+
+const props = __props;
+
+
+const route = vueRouter.useRoute();
+const router = vueRouter.useRouter();
+const currentTab = vue.ref('');
+const path = vue.ref(route.path);
+
+vue.onMounted(()=>{
+  resetTabCounts();
+  setTab(props.tabs[0]);
+});
+
+vue.watch(()=>props.tabCounts, () => {
+  resetTabCounts();
+});
+
+vue.watch(()=>route.path,(newPath)=>{
+  path.value = newPath;
+});
+
+const setTab = (tab) => {
+  if (tab) {
+    currentTab.value = tab.replace(/_/g, ' ');
+  }
+};
+const setTabCounts = (tabCounts) => {
+  if (typeof tabCounts === 'object') {
+    setCounts(tabCounts);
+  } else {
+    shApis.doGet(tabCounts).then(res => {
+      setCounts(res.data);
+    });
+  }
+};
+const resetTabCounts = () => {
+  const arr = route.fullPath.split('/');
+  if (!tabExistsInUrl()) {
+    router.push(route.fullPath + '/tab/' + props.tabs[0]);
+  } else {
+    currentTab.value = arr[arr.length - 1];
+  }
+  if (props.tabCounts) {
+    setTabCounts(props.tabCounts);
+  }
+};
+const tabExistsInUrl = () => {
+  let exists = false;
+  props.tabs.forEach(tab => {
+    if (route.fullPath.includes(`/${tab}`)) {
+      exists = true;
+    }
+  });
+  return exists
+};
+const setCounts = (res) => {
+  Object.keys(res).forEach(key => {
+    let elem = document.getElementsByClassName('sh_tab_' + key);
+    if (elem) {
+      let txt = elem.innerHTML;
+      txt = txt.split('<i class="d-none"></i>')[0];
+      if (parseInt(res[key]) > 0) {
+        elem.innerHTML = txt + '<i class="d-none"></i><sup class="sh_tab_count">' + res[key] + '</sup>';
       }
-    },
-    tabExistsInUrl: function () {
-      let exists = false;
-      this.tabs.forEach(tab => {
-        if (this.$route.fullPath.includes(tab)) {
-          exists = true;
-        }
-      });
-      return exists
-    },
-    setCounts: function (res) {
-      Object.keys(res).forEach(key => {
-        let elem = document.getElementsByClassName('sh_tab_' + key);
-        if (elem) {
-          let txt = elem.innerHTML;
-          txt = txt.split('<i class="d-none"></i>')[0];
-          if (parseInt(res[key]) > 0) {
-            elem.innerHTML = txt + '<i class="d-none"></i><sup class="sh_tab_count">' + res[key] + '</sup>';
-          }
-        }
-      });
     }
-  }
+  });
 };
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   const _component_router_link = vue.resolveComponent("router-link");
   const _component_router_view = vue.resolveComponent("router-view");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createElementVNode("h3", null, vue.toDisplayString(path.value), 1 /* TEXT */),
     vue.createElementVNode("ul", {
-      class: vue.normalizeClass(["nav nav-tabs sh-tabs", $props.classes])
+      class: vue.normalizeClass(["nav nav-tabs sh-tabs", __props.classes])
     }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.tabs, (tab) => {
+      (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)),
+            onClick: $event => (setTab(tab)),
             "active-class": 'active',
             class: vue.normalizeClass(["nav-link text-capitalize", 'sh_tab_' + tab]),
-            to: $props.baseUrl+'/tab/'+tab,
+            to: __props.baseUrl+'/tab/'+tab,
             role: "tab"
           }, {
             default: vue.withCtx(() => [
@@ -5053,18 +5073,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), 128 /* KEYED_FRAGMENT */))
     ], 2 /* CLASS */),
     vue.createElementVNode("div", {
-      class: vue.normalizeClass(["tab-content", $props.classTwo])
+      class: vue.normalizeClass(["tab-content", __props.classTwo])
     }, [
-      vue.createVNode(_component_router_view, {
-        currentTab: $data.currentTab,
-        sharedData: $props.sharedData,
-        tabCounts: $props.tabCounts
-      }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"])
+      (vue.openBlock(), vue.createBlock(_component_router_view, {
+        currentTab: currentTab.value,
+        key: path.value,
+        sharedData: __props.sharedData,
+        tabCounts: __props.tabCounts
+      }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"]))
     ], 2 /* CLASS */)
   ], 64 /* STABLE_FRAGMENT */))
 }
+}
+
+};
 
-script$8.render = render;
 script$8.__file = "src/lib/components/ShTabs.vue";
 
 const _hoisted_1$7 = {
@@ -5516,6 +5539,7 @@ script$4.__file = "src/lib/components/core/Departments/department/ManagePermissi
 
 const _hoisted_1$3 = ["href"];
 
+
 var script$3 = {
   __name: 'ShPopups',
   setup(__props) {
@@ -5530,58 +5554,65 @@ const router = vueRouter.useRouter();
 const position = vue.ref(null);
 const size = vue.ref(null);
 const popups = [];
-const popupPaths =[];
-vue.watch(()=>route.meta, meta=>{
+const popupPaths = [];
+vue.watch(() => route.meta, meta => {
   popUp.value = meta.popUp ?? meta.popup;
-  if(popUp.value){
+  if (popUp.value) {
     // popups.push(meta)
     !popupPaths.includes(route.path) && popupPaths.push(route.path) && popups.push(meta);
     position.value = meta.position ?? meta.side;
     size.value = meta.size;
-    componentView.value = vue.markRaw(route.matched[route.matched.length-1].components.default);
-    setTimeout(()=>{
+    componentView.value = vue.markRaw(route.matched[route.matched.length - 1].components.default);
+    setTimeout(() => {
       initPopup();
-    },100);
+    }, 100);
   } else {
     //no pop up, check if we have any unclosed backdrop
-    setTimeout(()=>{
+    setTimeout(() => {
       closeOrphanedBackdrops();
-    },100);
+    }, 100);
   }
 });
-const closeOrphanedBackdrops = ()=>{
+const closeOrphanedBackdrops = () => {
   const offCanvasBackdrop = document.querySelector('.offcanvas-backdrop');
-  if(offCanvasBackdrop) {
-    if(!document.querySelector('.offcanvas.show')){
+  if (offCanvasBackdrop) {
+    if (!document.querySelector('.offcanvas.show')) {
       offCanvasBackdrop.remove();
     }
   }
   const modalBackdrop = document.querySelector('.modal-backdrop');
-  if(modalBackdrop) {
-    if(!document.querySelector('.modal.show')){
+  if (modalBackdrop) {
+    if (!document.querySelector('.modal.show')) {
       modalBackdrop.remove();
     }
   }
 };
-const initPopup = ()=>{
-  if(popUp.value === 'modal') {
+const initPopup = () => {
+  if (popUp.value === 'modal') {
     // modalButton.value.click()
     const modal = document.getElementById(modalId);
-    const bsModal = new bootstrap.Modal(modal,{});
+    const bsModal = new bootstrap.Modal(modal, {});
     bsModal.show();
     modal.addEventListener('hidden.bs.modal', event => {
       event.target.id === modalId && goBack();
     });
-  } else if (['offcanvas','canvas','offCanvas'].includes(popUp.value)){
+  } else if (['offcanvas', 'canvas', 'offCanvas'].includes(popUp.value)) {
     const offCanvas = document.getElementById(canvasId);
-    const bsOffCanvas = new bootstrap.Offcanvas(offCanvas,{});
+    const bsOffCanvas = new bootstrap.Offcanvas(offCanvas, {});
     bsOffCanvas.show();
     offCanvas.addEventListener('hidden.bs.offcanvas', event => {
       event.target.id === canvasId && goBack();
     });
   }
 };
-const goBack = ()=> route.matched.length > 1 && router.back();
+const goBack = () => {
+  if (route.matched.length) {
+    let backUrl = route.matched[route.matched.length - 2].path;
+    const params = route.params;
+    Object.keys(params).map(key => backUrl = backUrl.replace(`:${key}`,params[key]));
+    router.push(backUrl);
+  }
+};
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [

package/dist/library.mjs

@@ -1932,7 +1932,7 @@ const _hoisted_2$d = {
 const _hoisted_3$c = ["src"];
 const _hoisted_4$c = ["value"];
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$n, [
     ($data.selectedCountry)
       ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
@@ -1967,7 +1967,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$s.render = render$5;
+script$s.render = render$4;
 script$s.__file = "src/lib/components/form-components/PhoneInput.vue";
 
 var script$r = {
@@ -2015,7 +2015,7 @@ const _hoisted_1$m = /*#__PURE__*/createElementVNode("textarea", {
   "data-cy": "tinymce_editor"
 }, null, -1 /* HOISTED */);
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = resolveComponent("editor");
 
   return (openBlock(), createElementBlock(Fragment, null, [
@@ -2044,7 +2044,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$r.render = render$4;
+script$r.render = render$3;
 script$r.__file = "src/lib/components/form-components/ShEditor.vue";
 
 const _hoisted_1$l = {
@@ -2596,7 +2596,7 @@ const _hoisted_24$1 = /*#__PURE__*/createElementVNode("span", {
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_phone_input = resolveComponent("phone-input");
   const _component_ShSuggest = resolveComponent("ShSuggest");
   const _component_ShEditor = resolveComponent("ShEditor");
@@ -2819,7 +2819,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$p.render = render$3;
+script$p.render = render$2;
 script$p.__file = "src/lib/components/ShForm.vue";
 
 var script$o = {
@@ -3785,7 +3785,7 @@ const _hoisted_22$1 = {
   class: "text-center"
 };
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
     ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", _hoisted_2$6, [
@@ -3859,7 +3859,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$c.render = render$2;
+script$c.render = render$1;
 script$c.__file = "src/lib/components/list_templates/Pagination.vue";
 
 const _hoisted_1$a = /*#__PURE__*/createElementVNode("span", {
@@ -4468,7 +4468,7 @@ const _hoisted_63 = { key: 0 };
 const _hoisted_64 = ["href"];
 const _hoisted_65 = ["title", "onClick"];
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
   const _component_sh_confirm_action = resolveComponent("sh-confirm-action");
   const _component_sh_silent_action = resolveComponent("sh-silent-action");
@@ -4569,11 +4569,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               class: "text-capitalize",
                               onClick: $event => ($options.changeKey('order_by',title(null)))
                             }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
-                          : (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_24))
+                          : (typeof title !== 'undefined')
+                            ? (openBlock(), createElementBlock("a", {
+                                key: 2,
+                                class: "text-capitalize",
+                                onClick: $event => ($options.changeKey('order_by',title))
+                              }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
+                            : createCommentVNode("v-if", true)
                     ]))
                   }), 128 /* KEYED_FRAGMENT */)),
                   ($props.actions)
@@ -4611,9 +4613,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               onClick: $event => ($options.rowSelected(record))
                             }, [
                               (openBlock(true), createElementBlock(Fragment, null, renderList($props.headers, (key) => {
-                                return (openBlock(), createElementBlock("td", {
-                                  key: key[0]
-                                }, [
+                                return (openBlock(), createElementBlock("td", { key: key }, [
                                   (typeof key === 'string' && $props.links && $props.links[key])
                                     ? (openBlock(), createBlock(_component_router_link, {
                                         key: 0,
@@ -4927,108 +4927,128 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$9.render = render$1;
+script$9.render = render;
 script$9.__file = "src/lib/components/ShTable.vue";
 
 var script$8 = {
-  name: 'ShTabs',
-  props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive','classOne','classTwo','classes'],
-  data () {
-    return {
-      currentTab: '',
-      generatedId: null,
-      isResponsive: typeof this.responsive !== 'undefined'
-    }
+  __name: 'ShTabs',
+  props: {
+  tabs: {
+    type: Array,
+    required: true
   },
-  watch: {
-    refreshStatus: function (state) {
-      if (state === 0) {
-        if (this.tabCounts) {
-          this.setTabCounts(this.tabCounts);
-        }
-      }
-    },
-    tabCounts: function () {
-      this.resetTabCounts();
-    }
+  baseUrl: {
+    type: String,
+    required: true
   },
-  computed: {
-    refreshStatus () {
-    }
+  sharedData: {
+    type: Object
   },
-  mounted () {
-    this.generatedId = 'tab' + Math.random().toString(36).slice(2);
-    this.resetTabCounts();
-    this.setTab(this.tabs[0]);
+  tabCounts: {
+    type: Object
   },
-  methods: {
-    setTab: function (tab) {
-      if (tab) {
-        this.currentTab = tab.replace(/_/g, ' ');
-      }
-    },
-    setTabCounts: function (tabCounts) {
-      if (typeof tabCounts === 'object') {
-        this.setCounts(tabCounts);
-      } else {
-        shApis.doGet(tabCounts).then(res => {
-          this.setCounts(res.data);
-        });
-      }
-    },
-    resetTabCounts: function () {
-      const arr = this.$route.fullPath.split('/');
-      if (!this.tabExistsInUrl()) {
-        this.$router.push(this.$route.fullPath + '/tab/' + this.tabs[0]);
-      } else {
-        this.currentTab = arr[arr.length - 1];
-      }
-      if (this.tabCounts) {
-        this.setTabCounts(this.tabCounts);
+  responsive: {
+    type: Object
+  },
+  classes: {
+    type: String
+  },
+  classOne: {
+    type: String
+  },
+  classTwo: {
+    type: String
+  }
+},
+  setup(__props) {
+
+const props = __props;
+
+
+const route = useRoute();
+const router = useRouter();
+const currentTab = ref('');
+const path = ref(route.path);
+
+onMounted(()=>{
+  resetTabCounts();
+  setTab(props.tabs[0]);
+});
+
+watch(()=>props.tabCounts, () => {
+  resetTabCounts();
+});
+
+watch(()=>route.path,(newPath)=>{
+  path.value = newPath;
+});
+
+const setTab = (tab) => {
+  if (tab) {
+    currentTab.value = tab.replace(/_/g, ' ');
+  }
+};
+const setTabCounts = (tabCounts) => {
+  if (typeof tabCounts === 'object') {
+    setCounts(tabCounts);
+  } else {
+    shApis.doGet(tabCounts).then(res => {
+      setCounts(res.data);
+    });
+  }
+};
+const resetTabCounts = () => {
+  const arr = route.fullPath.split('/');
+  if (!tabExistsInUrl()) {
+    router.push(route.fullPath + '/tab/' + props.tabs[0]);
+  } else {
+    currentTab.value = arr[arr.length - 1];
+  }
+  if (props.tabCounts) {
+    setTabCounts(props.tabCounts);
+  }
+};
+const tabExistsInUrl = () => {
+  let exists = false;
+  props.tabs.forEach(tab => {
+    if (route.fullPath.includes(`/${tab}`)) {
+      exists = true;
+    }
+  });
+  return exists
+};
+const setCounts = (res) => {
+  Object.keys(res).forEach(key => {
+    let elem = document.getElementsByClassName('sh_tab_' + key);
+    if (elem) {
+      let txt = elem.innerHTML;
+      txt = txt.split('<i class="d-none"></i>')[0];
+      if (parseInt(res[key]) > 0) {
+        elem.innerHTML = txt + '<i class="d-none"></i><sup class="sh_tab_count">' + res[key] + '</sup>';
       }
-    },
-    tabExistsInUrl: function () {
-      let exists = false;
-      this.tabs.forEach(tab => {
-        if (this.$route.fullPath.includes(tab)) {
-          exists = true;
-        }
-      });
-      return exists
-    },
-    setCounts: function (res) {
-      Object.keys(res).forEach(key => {
-        let elem = document.getElementsByClassName('sh_tab_' + key);
-        if (elem) {
-          let txt = elem.innerHTML;
-          txt = txt.split('<i class="d-none"></i>')[0];
-          if (parseInt(res[key]) > 0) {
-            elem.innerHTML = txt + '<i class="d-none"></i><sup class="sh_tab_count">' + res[key] + '</sup>';
-          }
-        }
-      });
     }
-  }
+  });
 };
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   const _component_router_link = resolveComponent("router-link");
   const _component_router_view = resolveComponent("router-view");
 
   return (openBlock(), createElementBlock(Fragment, null, [
+    createElementVNode("h3", null, toDisplayString(path.value), 1 /* TEXT */),
     createElementVNode("ul", {
-      class: normalizeClass(["nav nav-tabs sh-tabs", $props.classes])
+      class: normalizeClass(["nav nav-tabs sh-tabs", __props.classes])
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList($props.tabs, (tab) => {
+      (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)),
+            onClick: $event => (setTab(tab)),
             "active-class": 'active',
             class: normalizeClass(["nav-link text-capitalize", 'sh_tab_' + tab]),
-            to: $props.baseUrl+'/tab/'+tab,
+            to: __props.baseUrl+'/tab/'+tab,
             role: "tab"
           }, {
             default: withCtx(() => [
@@ -5040,18 +5060,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), 128 /* KEYED_FRAGMENT */))
     ], 2 /* CLASS */),
     createElementVNode("div", {
-      class: normalizeClass(["tab-content", $props.classTwo])
+      class: normalizeClass(["tab-content", __props.classTwo])
     }, [
-      createVNode(_component_router_view, {
-        currentTab: $data.currentTab,
-        sharedData: $props.sharedData,
-        tabCounts: $props.tabCounts
-      }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"])
+      (openBlock(), createBlock(_component_router_view, {
+        currentTab: currentTab.value,
+        key: path.value,
+        sharedData: __props.sharedData,
+        tabCounts: __props.tabCounts
+      }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"]))
     ], 2 /* CLASS */)
   ], 64 /* STABLE_FRAGMENT */))
 }
+}
+
+};
 
-script$8.render = render;
 script$8.__file = "src/lib/components/ShTabs.vue";
 
 const _hoisted_1$7 = {
@@ -5503,6 +5526,7 @@ script$4.__file = "src/lib/components/core/Departments/department/ManagePermissi
 
 const _hoisted_1$3 = ["href"];
 
+
 var script$3 = {
   __name: 'ShPopups',
   setup(__props) {
@@ -5517,58 +5541,65 @@ const router = useRouter();
 const position = ref(null);
 const size = ref(null);
 const popups = [];
-const popupPaths =[];
-watch(()=>route.meta, meta=>{
+const popupPaths = [];
+watch(() => route.meta, meta => {
   popUp.value = meta.popUp ?? meta.popup;
-  if(popUp.value){
+  if (popUp.value) {
     // popups.push(meta)
     !popupPaths.includes(route.path) && popupPaths.push(route.path) && popups.push(meta);
     position.value = meta.position ?? meta.side;
     size.value = meta.size;
-    componentView.value = markRaw(route.matched[route.matched.length-1].components.default);
-    setTimeout(()=>{
+    componentView.value = markRaw(route.matched[route.matched.length - 1].components.default);
+    setTimeout(() => {
       initPopup();
-    },100);
+    }, 100);
   } else {
     //no pop up, check if we have any unclosed backdrop
-    setTimeout(()=>{
+    setTimeout(() => {
       closeOrphanedBackdrops();
-    },100);
+    }, 100);
   }
 });
-const closeOrphanedBackdrops = ()=>{
+const closeOrphanedBackdrops = () => {
   const offCanvasBackdrop = document.querySelector('.offcanvas-backdrop');
-  if(offCanvasBackdrop) {
-    if(!document.querySelector('.offcanvas.show')){
+  if (offCanvasBackdrop) {
+    if (!document.querySelector('.offcanvas.show')) {
       offCanvasBackdrop.remove();
     }
   }
   const modalBackdrop = document.querySelector('.modal-backdrop');
-  if(modalBackdrop) {
-    if(!document.querySelector('.modal.show')){
+  if (modalBackdrop) {
+    if (!document.querySelector('.modal.show')) {
       modalBackdrop.remove();
     }
   }
 };
-const initPopup = ()=>{
-  if(popUp.value === 'modal') {
+const initPopup = () => {
+  if (popUp.value === 'modal') {
     // modalButton.value.click()
     const modal = document.getElementById(modalId);
-    const bsModal = new Modal(modal,{});
+    const bsModal = new Modal(modal, {});
     bsModal.show();
     modal.addEventListener('hidden.bs.modal', event => {
       event.target.id === modalId && goBack();
     });
-  } else if (['offcanvas','canvas','offCanvas'].includes(popUp.value)){
+  } else if (['offcanvas', 'canvas', 'offCanvas'].includes(popUp.value)) {
     const offCanvas = document.getElementById(canvasId);
-    const bsOffCanvas = new Offcanvas(offCanvas,{});
+    const bsOffCanvas = new Offcanvas(offCanvas, {});
     bsOffCanvas.show();
     offCanvas.addEventListener('hidden.bs.offcanvas', event => {
       event.target.id === canvasId && goBack();
     });
   }
 };
-const goBack = ()=> route.matched.length > 1 && router.back();
+const goBack = () => {
+  if (route.matched.length) {
+    let backUrl = route.matched[route.matched.length - 2].path;
+    const params = route.params;
+    Object.keys(params).map(key => backUrl = backUrl.replace(`:${key}`,params[key]));
+    router.push(backUrl);
+  }
+};
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock(Fragment, null, [

package/package.json

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