@iankibetsh/shframework 5.4.8 → 5.5.0

package/dist/library.js

@@ -2116,7 +2116,7 @@ const _hoisted_2$j = {
   style: {"display":"contents"}
 };
 const _hoisted_3$g = ["src"];
-const _hoisted_4$e = ["value"];
+const _hoisted_4$f = ["value"];
 const _hoisted_5$c = ["disabled"];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2136,7 +2136,7 @@ function render$4(_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$e))
+        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$f))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
       [vue.vModelSelect, $data.selectedCountry]
@@ -2164,7 +2164,7 @@ const _hoisted_1$q = {
 };
 const _hoisted_2$i = ["id"];
 const _hoisted_3$f = { class: "sh-suggestions-holder" };
-const _hoisted_4$d = { class: "badge bg-secondary m-1 sh-selected-item" };
+const _hoisted_4$e = { class: "badge bg-secondary m-1 sh-selected-item" };
 const _hoisted_5$b = ["onClick"];
 const _hoisted_6$9 = ["id"];
 const _hoisted_7$8 = ["id", "aria-labelledby"];
@@ -2333,7 +2333,7 @@ return (_ctx, _cache) => {
         }, [
           vue.createElementVNode("div", _hoisted_3$f, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedSuggestions), (sgt) => {
-              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_4$d, [
+              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_4$e, [
                 vue.createTextVNode(vue.toDisplayString(sgt.name) + " ", 1 /* TEXT */),
                 vue.createElementVNode("button", {
                   onClick: $event => (removeSuggestion(sgt.id)),
@@ -2760,7 +2760,7 @@ const _hoisted_2$h = {
   role: "alert"
 };
 const _hoisted_3$e = { key: 0 };
-const _hoisted_4$c = { key: 1 };
+const _hoisted_4$d = { key: 1 };
 const _hoisted_5$a = { class: "row" };
 const _hoisted_6$8 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_7$7 = { class: "col-md-12" };
@@ -2802,7 +2802,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             _cache[2] || (_cache[2] = vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */)),
             (_ctx.errorText)
               ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$e, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
-              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$c, "Unexpected Error Occurred")),
+              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$d, "Unexpected Error Occurred")),
             vue.createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
         : vue.createCommentVNode("v-if", true),
@@ -3373,7 +3373,7 @@ const _hoisted_3$d = {
   key: 0,
   class: "text-danger sh-required"
 };
-const _hoisted_4$b = ["innerHTML"];
+const _hoisted_4$c = ["innerHTML"];
 const _hoisted_5$9 = {
   key: 2,
   class: "form-notch"
@@ -3680,7 +3680,7 @@ return (_ctx, _cache) => {
                       key: 1,
                       class: vue.normalizeClass(getElementClass('formLabel')),
                       innerHTML: field.label
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$b))
+                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$c))
                   : vue.createCommentVNode("v-if", true),
                 (vue.unref(isFloating))
                   ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$9, [...(_cache[1] || (_cache[1] = [
@@ -3736,7 +3736,7 @@ script$q.__file = "src/lib/components/ShAutoForm.vue";
 const _hoisted_1$l = ["id", "data-bs-backdrop"];
 const _hoisted_2$f = { class: "modal-content" };
 const _hoisted_3$c = { class: "modal-header" };
-const _hoisted_4$a = { class: "modal-title flex-fill" };
+const _hoisted_4$b = { class: "modal-title flex-fill" };
 const _hoisted_5$8 = { class: "modal-body" };
 const _hoisted_6$6 = { class: "section" };
 
@@ -3801,7 +3801,7 @@ return (_ctx, _cache) => {
     }, [
       vue.createElementVNode("div", _hoisted_2$f, [
         vue.createElementVNode("div", _hoisted_3$c, [
-          vue.createElementVNode("h3", _hoisted_4$a, vue.toDisplayString(__props.modalTitle), 1 /* TEXT */),
+          vue.createElementVNode("h3", _hoisted_4$b, vue.toDisplayString(__props.modalTitle), 1 /* TEXT */),
           _cache[0] || (_cache[0] = vue.createElementVNode("button", {
             type: "button",
             class: "btn-close sh-modal-close",
@@ -4065,7 +4065,7 @@ const _hoisted_3$a = {
   class: "offcanvas-title",
   id: "offcanvasScrollingLabel"
 };
-const _hoisted_4$9 = {
+const _hoisted_4$a = {
   type: "button",
   ref: "closecanvas",
   class: "btn-close sh-offcanvas-close",
@@ -4122,7 +4122,7 @@ return (_ctx, _cache) => {
   }, [
     vue.createElementVNode("div", _hoisted_2$d, [
       vue.createElementVNode("h5", _hoisted_3$a, vue.toDisplayString(__props.canvasTitle), 1 /* TEXT */),
-      vue.createElementVNode("button", _hoisted_4$9, null, 512 /* NEED_PATCH */)
+      vue.createElementVNode("button", _hoisted_4$a, null, 512 /* NEED_PATCH */)
     ]),
     vue.createElementVNode("div", _hoisted_5$7, [
       vue.renderSlot(_ctx.$slots, "default")
@@ -4618,7 +4618,7 @@ const _hoisted_3$9 = {
   key: 1,
   class: "bi bi-three-dots"
 };
-const _hoisted_4$8 = {
+const _hoisted_4$9 = {
   key: 2,
   class: "bi bi-three-dots-vertical"
 };
@@ -4647,7 +4647,7 @@ return (_ctx, _cache) => {
               }, null, 2 /* CLASS */))
             : (vue.unref(type) === 'dropdown-horizontal')
               ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_3$9))
-              : (vue.openBlock(), vue.createElementBlock("i", _hoisted_4$8))
+              : (vue.openBlock(), vue.createElementBlock("i", _hoisted_4$9))
         ]),
         vue.createElementVNode("ul", _hoisted_5$6, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(actionItems), (act) => {
@@ -4765,7 +4765,7 @@ var script$f = {
 const _hoisted_1$d = { key: 0 };
 const _hoisted_2$a = { class: "record_count_body mb-3" };
 const _hoisted_3$8 = ["value"];
-const _hoisted_4$7 = { class: "record_counts" };
+const _hoisted_4$8 = { class: "record_counts" };
 const _hoisted_5$5 = {
   key: 0,
   "aria-label": "Page navigation"
@@ -4816,7 +4816,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
             [vue.vModelSelect, $data.per_page]
           ]),
-          vue.createElementVNode("span", _hoisted_4$7, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          vue.createElementVNode("span", _hoisted_4$8, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
           ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_5$5, [
@@ -4898,7 +4898,7 @@ const _hoisted_3$7 = {
   "data-bs-toggle": "dropdown",
   "aria-expanded": "false"
 };
-const _hoisted_4$6 = ["innerHTML"];
+const _hoisted_4$7 = ["innerHTML"];
 const _hoisted_5$4 = {
   class: "dropdown-menu sh-range-dropdown",
   "aria-labelledby": "dropdownMenuLink"
@@ -5024,7 +5024,7 @@ return (_ctx, _cache) => {
       vue.createElementVNode("div", _hoisted_3$7, [
         _cache[2] || (_cache[2] = vue.createElementVNode("i", { class: "bi-calendar text-dark" }, null, -1 /* HOISTED */)),
         _cache[3] || (_cache[3] = vue.createTextVNode()),
-        vue.createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$6)
+        vue.createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$7)
       ]),
       vue.createElementVNode("div", _hoisted_5$4, [
         vue.createElementVNode("ul", _hoisted_6$4, [
@@ -5084,7 +5084,7 @@ const _hoisted_2$8 = {
   class: "col-md-4 mb-2"
 };
 const _hoisted_3$6 = ["disabled"];
-const _hoisted_4$5 = {
+const _hoisted_4$6 = {
   key: 1,
   class: "row"
 };
@@ -5586,7 +5586,7 @@ return (_ctx, _cache) => {
         ]))
       : vue.createCommentVNode("v-if", true),
     (!__props.hideSearch)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
           vue.createElementVNode("div", _hoisted_5$3, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
@@ -5995,11 +5995,15 @@ return (_ctx, _cache) => {
 script$d.__file = "src/lib/components/ShTable.vue";
 
 const _hoisted_1$a = {
+  key: 0,
+  class: "sh_tab_count"
+};
+const _hoisted_2$7 = {
   key: 1,
   class: "alert alert-warning"
 };
-const _hoisted_2$7 = { key: 0 };
-const _hoisted_3$5 = { key: 1 };
+const _hoisted_3$5 = { key: 0 };
+const _hoisted_4$5 = { key: 1 };
 
 
 var script$c = {
@@ -6044,16 +6048,27 @@ const currentTab = vue.ref('');
 const path = vue.ref(route.path);
 const allowedTabs = vue.ref([]);
 const {user} = pinia.storeToRefs(useUserStore());
+const realTabCounts = vue.ref({});
 vue.onMounted(()=>{
   if(props.tabs.length === 0){
     return;
   }
   allowedTabs.value = props.tabs.filter(tab=>{
-    if(typeof tab === 'object' && tab.permission){
-      if(user.value && user.value.isAllowedTo(tab.permission)){
-        return tab
+    if(typeof tab === 'object'){
+      if(tab.count || tab.counts){
+        realTabCounts.value[tab.name || tab.key] = tab.count || tab.counts;
+      }
+      if(tab.validator){
+        if(tab.validator()){
+          return tab
+        }
+        return false
+      } else if(tab.permission){
+        if(user.value && user.value.isAllowedTo(tab.permission)){
+          return tab
+        }
+        return false
       }
-      return false
     }
     return tab
   });
@@ -6063,9 +6078,12 @@ vue.onMounted(()=>{
   }
 });
 
-vue.watch(()=>props.tabCounts, () => {
+vue.watch(()=>props, () => {
+  console.log('changed');
   resetTabCounts();
-});
+},{
+  deep: true}
+);
 
 vue.watch(()=>route.path,()=>{
   route.fullPath.split('/');
@@ -6086,16 +6104,6 @@ const setTab = (tab) => {
     currentTab.value = label.replace(/_/g, ' ');
   }
 };
-const setTabCounts = (tabCounts) => {
-  console.log('Setting tab counts', 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()) {
@@ -6104,12 +6112,16 @@ const resetTabCounts = () => {
     setTab(arr[arr.length - 1]);
   }
   let tbCounts = props.tabCounts;
-  if(!tbCounts && typeof props.tabs[0] == 'object'){
-    tbCounts = props.tabs;
-  }
-  if (props.tabCounts) {
-    setTabCounts(tbCounts);
+  // merge with realTabCounts
+  if (tbCounts && typeof tbCounts === 'object') {
+    realTabCounts.value = {...realTabCounts.value, ...tbCounts};
+  } else if(typeof tbCounts === 'string') {
+    // it is a string fetch from api
+    shApis.doGet(tbCounts).then(res => {
+      realTabCounts.value = {...realTabCounts.value, ...res.data};
+    });
   }
+
 };
 const tabExistsInUrl = () => {
   let exists = false;
@@ -6121,20 +6133,6 @@ const tabExistsInUrl = () => {
   });
   return exists
 };
-const setCounts = (res) => {
-  Object.keys(res).forEach(key => {
-    console.log('Setting count for tab', key, res[key]);
-    let elem = document.getElementsByClassName('sh_tab_' + key);
-    if (elem.length > 0) {
-      elem = elem[0];
-      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>';
-      }
-    }
-  });
-};
 
 const getTabKey = (tab)=>{
   if(typeof tab === 'string') {
@@ -6165,49 +6163,55 @@ return (_ctx, _cache) => {
   const _component_router_view = vue.resolveComponent("router-view");
   const _directive_if_user_can = vue.resolveDirective("if-user-can");
 
-  return (allowedTabs.value.length > 0)
-    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-        vue.createElementVNode("ul", {
-          class: vue.normalizeClass(["nav nav-tabs sh-tabs", __props.classes ?? vue.unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered')])
-        }, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(allowedTabs.value, (tab) => {
-            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
-              class: "nav-item",
-              key: getTabKey(tab)
-            }, [
-              vue.createVNode(_component_router_link, {
-                onClick: $event => (setTab(tab)),
-                "active-class": 'active',
-                class: vue.normalizeClass(["nav-link text-capitalize", 'sh_tab_' + getTabKey(tab)]),
-                to: __props.baseUrl+'/tab/'+getTabKey(tab),
-                role: "tab"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(getTabLabel(tab)), 1 /* TEXT */)
-                ]),
-                _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "to", "class"])
-            ])), [
-              [_directive_if_user_can, getTabPermission(tab)]
-            ])
-          }), 128 /* KEYED_FRAGMENT */))
-        ], 2 /* CLASS */),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["tab-content", __props.classTwo])
-        }, [
-          (vue.openBlock(), vue.createBlock(_component_router_view, vue.mergeProps(_ctx.$attrs, {
-            currentTab: currentTab.value,
-            key: path.value,
-            sharedData: __props.sharedData,
-            tabCounts: __props.tabCounts
-          }), null, 16 /* FULL_PROPS */, ["currentTab", "sharedData", "tabCounts"]))
-        ], 2 /* CLASS */)
-      ], 64 /* STABLE_FRAGMENT */))
-    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-        (__props.tabs.length)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, " 403 Not Allowed "))
-          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, " No tabs found "))
-      ]))
+  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createTextVNode(vue.toDisplayString(currentTab.value) + " ", 1 /* TEXT */),
+    (allowedTabs.value.length > 0)
+      ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.createElementVNode("ul", {
+            class: vue.normalizeClass(["nav nav-tabs sh-tabs", __props.classes ?? vue.unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered')])
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(allowedTabs.value, (tab) => {
+              return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+                class: "nav-item",
+                key: getTabKey(tab)
+              }, [
+                vue.createVNode(_component_router_link, {
+                  onClick: $event => (setTab(tab)),
+                  "active-class": 'active',
+                  class: vue.normalizeClass(["nav-link text-capitalize", 'sh_tab_' + getTabKey(tab)]),
+                  to: __props.baseUrl+'/tab/'+getTabKey(tab),
+                  role: "tab"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(getTabLabel(tab)) + " ", 1 /* TEXT */),
+                    (realTabCounts.value[getTabKey(tab)] !== undefined && realTabCounts.value[getTabKey(tab)] > 0)
+                      ? (vue.openBlock(), vue.createElementBlock("sup", _hoisted_1$a, vue.toDisplayString(realTabCounts.value[getTabKey(tab)]), 1 /* TEXT */))
+                      : vue.createCommentVNode("v-if", true)
+                  ]),
+                  _: 2 /* DYNAMIC */
+                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "to", "class"])
+              ])), [
+                [_directive_if_user_can, getTabPermission(tab)]
+              ])
+            }), 128 /* KEYED_FRAGMENT */))
+          ], 2 /* CLASS */),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["tab-content", __props.classTwo])
+          }, [
+            (vue.openBlock(), vue.createBlock(_component_router_view, vue.mergeProps(_ctx.$attrs, {
+              currentTab: currentTab.value,
+              key: path.value,
+              sharedData: __props.sharedData,
+              tabCounts: __props.tabCounts
+            }), null, 16 /* FULL_PROPS */, ["currentTab", "sharedData", "tabCounts"]))
+          ], 2 /* CLASS */)
+        ], 64 /* STABLE_FRAGMENT */))
+      : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
+          (__props.tabs.length)
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, " 403 Not Allowed "))
+            : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, " No tabs found "))
+        ]))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 

package/dist/library.mjs

@@ -2104,7 +2104,7 @@ const _hoisted_2$j = {
   style: {"display":"contents"}
 };
 const _hoisted_3$g = ["src"];
-const _hoisted_4$e = ["value"];
+const _hoisted_4$f = ["value"];
 const _hoisted_5$c = ["disabled"];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2124,7 +2124,7 @@ function render$4(_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$e))
+        }, toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$f))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
       [vModelSelect, $data.selectedCountry]
@@ -2152,7 +2152,7 @@ const _hoisted_1$q = {
 };
 const _hoisted_2$i = ["id"];
 const _hoisted_3$f = { class: "sh-suggestions-holder" };
-const _hoisted_4$d = { class: "badge bg-secondary m-1 sh-selected-item" };
+const _hoisted_4$e = { class: "badge bg-secondary m-1 sh-selected-item" };
 const _hoisted_5$b = ["onClick"];
 const _hoisted_6$9 = ["id"];
 const _hoisted_7$8 = ["id", "aria-labelledby"];
@@ -2321,7 +2321,7 @@ return (_ctx, _cache) => {
         }, [
           createElementVNode("div", _hoisted_3$f, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedSuggestions), (sgt) => {
-              return (openBlock(), createElementBlock("h5", _hoisted_4$d, [
+              return (openBlock(), createElementBlock("h5", _hoisted_4$e, [
                 createTextVNode(toDisplayString(sgt.name) + " ", 1 /* TEXT */),
                 createElementVNode("button", {
                   onClick: $event => (removeSuggestion(sgt.id)),
@@ -2748,7 +2748,7 @@ const _hoisted_2$h = {
   role: "alert"
 };
 const _hoisted_3$e = { key: 0 };
-const _hoisted_4$c = { key: 1 };
+const _hoisted_4$d = { key: 1 };
 const _hoisted_5$a = { class: "row" };
 const _hoisted_6$8 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_7$7 = { class: "col-md-12" };
@@ -2790,7 +2790,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             _cache[2] || (_cache[2] = createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */)),
             (_ctx.errorText)
               ? (openBlock(), createElementBlock("span", _hoisted_3$e, toDisplayString(_ctx.errorText), 1 /* TEXT */))
-              : (openBlock(), createElementBlock("span", _hoisted_4$c, "Unexpected Error Occurred")),
+              : (openBlock(), createElementBlock("span", _hoisted_4$d, "Unexpected Error Occurred")),
             createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
         : createCommentVNode("v-if", true),
@@ -3361,7 +3361,7 @@ const _hoisted_3$d = {
   key: 0,
   class: "text-danger sh-required"
 };
-const _hoisted_4$b = ["innerHTML"];
+const _hoisted_4$c = ["innerHTML"];
 const _hoisted_5$9 = {
   key: 2,
   class: "form-notch"
@@ -3668,7 +3668,7 @@ return (_ctx, _cache) => {
                       key: 1,
                       class: normalizeClass(getElementClass('formLabel')),
                       innerHTML: field.label
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$b))
+                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$c))
                   : createCommentVNode("v-if", true),
                 (unref(isFloating))
                   ? (openBlock(), createElementBlock("div", _hoisted_5$9, [...(_cache[1] || (_cache[1] = [
@@ -3724,7 +3724,7 @@ script$q.__file = "src/lib/components/ShAutoForm.vue";
 const _hoisted_1$l = ["id", "data-bs-backdrop"];
 const _hoisted_2$f = { class: "modal-content" };
 const _hoisted_3$c = { class: "modal-header" };
-const _hoisted_4$a = { class: "modal-title flex-fill" };
+const _hoisted_4$b = { class: "modal-title flex-fill" };
 const _hoisted_5$8 = { class: "modal-body" };
 const _hoisted_6$6 = { class: "section" };
 
@@ -3789,7 +3789,7 @@ return (_ctx, _cache) => {
     }, [
       createElementVNode("div", _hoisted_2$f, [
         createElementVNode("div", _hoisted_3$c, [
-          createElementVNode("h3", _hoisted_4$a, toDisplayString(__props.modalTitle), 1 /* TEXT */),
+          createElementVNode("h3", _hoisted_4$b, toDisplayString(__props.modalTitle), 1 /* TEXT */),
           _cache[0] || (_cache[0] = createElementVNode("button", {
             type: "button",
             class: "btn-close sh-modal-close",
@@ -4053,7 +4053,7 @@ const _hoisted_3$a = {
   class: "offcanvas-title",
   id: "offcanvasScrollingLabel"
 };
-const _hoisted_4$9 = {
+const _hoisted_4$a = {
   type: "button",
   ref: "closecanvas",
   class: "btn-close sh-offcanvas-close",
@@ -4110,7 +4110,7 @@ return (_ctx, _cache) => {
   }, [
     createElementVNode("div", _hoisted_2$d, [
       createElementVNode("h5", _hoisted_3$a, toDisplayString(__props.canvasTitle), 1 /* TEXT */),
-      createElementVNode("button", _hoisted_4$9, null, 512 /* NEED_PATCH */)
+      createElementVNode("button", _hoisted_4$a, null, 512 /* NEED_PATCH */)
     ]),
     createElementVNode("div", _hoisted_5$7, [
       renderSlot(_ctx.$slots, "default")
@@ -4606,7 +4606,7 @@ const _hoisted_3$9 = {
   key: 1,
   class: "bi bi-three-dots"
 };
-const _hoisted_4$8 = {
+const _hoisted_4$9 = {
   key: 2,
   class: "bi bi-three-dots-vertical"
 };
@@ -4635,7 +4635,7 @@ return (_ctx, _cache) => {
               }, null, 2 /* CLASS */))
             : (unref(type) === 'dropdown-horizontal')
               ? (openBlock(), createElementBlock("i", _hoisted_3$9))
-              : (openBlock(), createElementBlock("i", _hoisted_4$8))
+              : (openBlock(), createElementBlock("i", _hoisted_4$9))
         ]),
         createElementVNode("ul", _hoisted_5$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(actionItems), (act) => {
@@ -4753,7 +4753,7 @@ var script$f = {
 const _hoisted_1$d = { key: 0 };
 const _hoisted_2$a = { class: "record_count_body mb-3" };
 const _hoisted_3$8 = ["value"];
-const _hoisted_4$7 = { class: "record_counts" };
+const _hoisted_4$8 = { class: "record_counts" };
 const _hoisted_5$5 = {
   key: 0,
   "aria-label": "Page navigation"
@@ -4804,7 +4804,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
             [vModelSelect, $data.per_page]
           ]),
-          createElementVNode("span", _hoisted_4$7, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          createElementVNode("span", _hoisted_4$8, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
           ? (openBlock(), createElementBlock("nav", _hoisted_5$5, [
@@ -4886,7 +4886,7 @@ const _hoisted_3$7 = {
   "data-bs-toggle": "dropdown",
   "aria-expanded": "false"
 };
-const _hoisted_4$6 = ["innerHTML"];
+const _hoisted_4$7 = ["innerHTML"];
 const _hoisted_5$4 = {
   class: "dropdown-menu sh-range-dropdown",
   "aria-labelledby": "dropdownMenuLink"
@@ -5012,7 +5012,7 @@ return (_ctx, _cache) => {
       createElementVNode("div", _hoisted_3$7, [
         _cache[2] || (_cache[2] = createElementVNode("i", { class: "bi-calendar text-dark" }, null, -1 /* HOISTED */)),
         _cache[3] || (_cache[3] = createTextVNode()),
-        createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$6)
+        createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$7)
       ]),
       createElementVNode("div", _hoisted_5$4, [
         createElementVNode("ul", _hoisted_6$4, [
@@ -5072,7 +5072,7 @@ const _hoisted_2$8 = {
   class: "col-md-4 mb-2"
 };
 const _hoisted_3$6 = ["disabled"];
-const _hoisted_4$5 = {
+const _hoisted_4$6 = {
   key: 1,
   class: "row"
 };
@@ -5574,7 +5574,7 @@ return (_ctx, _cache) => {
         ]))
       : createCommentVNode("v-if", true),
     (!__props.hideSearch)
-      ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+      ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
           createElementVNode("div", _hoisted_5$3, [
             createElementVNode("div", {
               class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
@@ -5983,11 +5983,15 @@ return (_ctx, _cache) => {
 script$d.__file = "src/lib/components/ShTable.vue";
 
 const _hoisted_1$a = {
+  key: 0,
+  class: "sh_tab_count"
+};
+const _hoisted_2$7 = {
   key: 1,
   class: "alert alert-warning"
 };
-const _hoisted_2$7 = { key: 0 };
-const _hoisted_3$5 = { key: 1 };
+const _hoisted_3$5 = { key: 0 };
+const _hoisted_4$5 = { key: 1 };
 
 
 var script$c = {
@@ -6032,16 +6036,27 @@ const currentTab = ref('');
 const path = ref(route.path);
 const allowedTabs = ref([]);
 const {user} = storeToRefs(useUserStore());
+const realTabCounts = ref({});
 onMounted(()=>{
   if(props.tabs.length === 0){
     return;
   }
   allowedTabs.value = props.tabs.filter(tab=>{
-    if(typeof tab === 'object' && tab.permission){
-      if(user.value && user.value.isAllowedTo(tab.permission)){
-        return tab
+    if(typeof tab === 'object'){
+      if(tab.count || tab.counts){
+        realTabCounts.value[tab.name || tab.key] = tab.count || tab.counts;
+      }
+      if(tab.validator){
+        if(tab.validator()){
+          return tab
+        }
+        return false
+      } else if(tab.permission){
+        if(user.value && user.value.isAllowedTo(tab.permission)){
+          return tab
+        }
+        return false
       }
-      return false
     }
     return tab
   });
@@ -6051,9 +6066,12 @@ onMounted(()=>{
   }
 });
 
-watch(()=>props.tabCounts, () => {
+watch(()=>props, () => {
+  console.log('changed');
   resetTabCounts();
-});
+},{
+  deep: true}
+);
 
 watch(()=>route.path,()=>{
   route.fullPath.split('/');
@@ -6074,16 +6092,6 @@ const setTab = (tab) => {
     currentTab.value = label.replace(/_/g, ' ');
   }
 };
-const setTabCounts = (tabCounts) => {
-  console.log('Setting tab counts', 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()) {
@@ -6092,12 +6100,16 @@ const resetTabCounts = () => {
     setTab(arr[arr.length - 1]);
   }
   let tbCounts = props.tabCounts;
-  if(!tbCounts && typeof props.tabs[0] == 'object'){
-    tbCounts = props.tabs;
-  }
-  if (props.tabCounts) {
-    setTabCounts(tbCounts);
+  // merge with realTabCounts
+  if (tbCounts && typeof tbCounts === 'object') {
+    realTabCounts.value = {...realTabCounts.value, ...tbCounts};
+  } else if(typeof tbCounts === 'string') {
+    // it is a string fetch from api
+    shApis.doGet(tbCounts).then(res => {
+      realTabCounts.value = {...realTabCounts.value, ...res.data};
+    });
   }
+
 };
 const tabExistsInUrl = () => {
   let exists = false;
@@ -6109,20 +6121,6 @@ const tabExistsInUrl = () => {
   });
   return exists
 };
-const setCounts = (res) => {
-  Object.keys(res).forEach(key => {
-    console.log('Setting count for tab', key, res[key]);
-    let elem = document.getElementsByClassName('sh_tab_' + key);
-    if (elem.length > 0) {
-      elem = elem[0];
-      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>';
-      }
-    }
-  });
-};
 
 const getTabKey = (tab)=>{
   if(typeof tab === 'string') {
@@ -6153,49 +6151,55 @@ return (_ctx, _cache) => {
   const _component_router_view = resolveComponent("router-view");
   const _directive_if_user_can = resolveDirective("if-user-can");
 
-  return (allowedTabs.value.length > 0)
-    ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        createElementVNode("ul", {
-          class: normalizeClass(["nav nav-tabs sh-tabs", __props.classes ?? unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered')])
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(allowedTabs.value, (tab) => {
-            return withDirectives((openBlock(), createElementBlock("li", {
-              class: "nav-item",
-              key: getTabKey(tab)
-            }, [
-              createVNode(_component_router_link, {
-                onClick: $event => (setTab(tab)),
-                "active-class": 'active',
-                class: normalizeClass(["nav-link text-capitalize", 'sh_tab_' + getTabKey(tab)]),
-                to: __props.baseUrl+'/tab/'+getTabKey(tab),
-                role: "tab"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(getTabLabel(tab)), 1 /* TEXT */)
-                ]),
-                _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "to", "class"])
-            ])), [
-              [_directive_if_user_can, getTabPermission(tab)]
-            ])
-          }), 128 /* KEYED_FRAGMENT */))
-        ], 2 /* CLASS */),
-        createElementVNode("div", {
-          class: normalizeClass(["tab-content", __props.classTwo])
-        }, [
-          (openBlock(), createBlock(_component_router_view, mergeProps(_ctx.$attrs, {
-            currentTab: currentTab.value,
-            key: path.value,
-            sharedData: __props.sharedData,
-            tabCounts: __props.tabCounts
-          }), null, 16 /* FULL_PROPS */, ["currentTab", "sharedData", "tabCounts"]))
-        ], 2 /* CLASS */)
-      ], 64 /* STABLE_FRAGMENT */))
-    : (openBlock(), createElementBlock("div", _hoisted_1$a, [
-        (__props.tabs.length)
-          ? (openBlock(), createElementBlock("div", _hoisted_2$7, " 403 Not Allowed "))
-          : (openBlock(), createElementBlock("div", _hoisted_3$5, " No tabs found "))
-      ]))
+  return (openBlock(), createElementBlock(Fragment, null, [
+    createTextVNode(toDisplayString(currentTab.value) + " ", 1 /* TEXT */),
+    (allowedTabs.value.length > 0)
+      ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("ul", {
+            class: normalizeClass(["nav nav-tabs sh-tabs", __props.classes ?? unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered')])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(allowedTabs.value, (tab) => {
+              return withDirectives((openBlock(), createElementBlock("li", {
+                class: "nav-item",
+                key: getTabKey(tab)
+              }, [
+                createVNode(_component_router_link, {
+                  onClick: $event => (setTab(tab)),
+                  "active-class": 'active',
+                  class: normalizeClass(["nav-link text-capitalize", 'sh_tab_' + getTabKey(tab)]),
+                  to: __props.baseUrl+'/tab/'+getTabKey(tab),
+                  role: "tab"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(getTabLabel(tab)) + " ", 1 /* TEXT */),
+                    (realTabCounts.value[getTabKey(tab)] !== undefined && realTabCounts.value[getTabKey(tab)] > 0)
+                      ? (openBlock(), createElementBlock("sup", _hoisted_1$a, toDisplayString(realTabCounts.value[getTabKey(tab)]), 1 /* TEXT */))
+                      : createCommentVNode("v-if", true)
+                  ]),
+                  _: 2 /* DYNAMIC */
+                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "to", "class"])
+              ])), [
+                [_directive_if_user_can, getTabPermission(tab)]
+              ])
+            }), 128 /* KEYED_FRAGMENT */))
+          ], 2 /* CLASS */),
+          createElementVNode("div", {
+            class: normalizeClass(["tab-content", __props.classTwo])
+          }, [
+            (openBlock(), createBlock(_component_router_view, mergeProps(_ctx.$attrs, {
+              currentTab: currentTab.value,
+              key: path.value,
+              sharedData: __props.sharedData,
+              tabCounts: __props.tabCounts
+            }), null, 16 /* FULL_PROPS */, ["currentTab", "sharedData", "tabCounts"]))
+          ], 2 /* CLASS */)
+        ], 64 /* STABLE_FRAGMENT */))
+      : (openBlock(), createElementBlock("div", _hoisted_2$7, [
+          (__props.tabs.length)
+            ? (openBlock(), createElementBlock("div", _hoisted_3$5, " 403 Not Allowed "))
+            : (openBlock(), createElementBlock("div", _hoisted_4$5, " No tabs found "))
+        ]))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 

package/package.json

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