@iankibetsh/shframework 5.5.9 → 5.6.1

package/dist/dist/library.mjs.css

@@ -1,36 +1,4 @@
 
-.colored-toast.swal2-icon-success {
-  background-color: #a5dc86 !important;
-}
-
-.colored-toast.swal2-icon-error {
-  background-color: #f27474 !important;
-}
-
-.colored-toast.swal2-icon-warning {
-  background-color: #f8bb86 !important;
-}
-
-.colored-toast.swal2-icon-info {
-  background-color: #3fc3ee !important;
-}
-
-.colored-toast.swal2-icon-question {
-  background-color: #87adbd !important;
-}
-
-.colored-toast .swal2-title {
-  color: white;
-}
-
-.colored-toast .swal2-close {
-  color: white;
-}
-
-.colored-toast .swal2-html-container {
-  color: white;
-}
-
 .sh-phone{
   display: flex;
   width: 100%;
@@ -63,6 +31,38 @@
   opacity: 0.5;
 }
 
+.colored-toast.swal2-icon-success {
+  background-color: #a5dc86 !important;
+}
+
+.colored-toast.swal2-icon-error {
+  background-color: #f27474 !important;
+}
+
+.colored-toast.swal2-icon-warning {
+  background-color: #f8bb86 !important;
+}
+
+.colored-toast.swal2-icon-info {
+  background-color: #3fc3ee !important;
+}
+
+.colored-toast.swal2-icon-question {
+  background-color: #87adbd !important;
+}
+
+.colored-toast .swal2-title {
+  color: white;
+}
+
+.colored-toast .swal2-close {
+  color: white;
+}
+
+.colored-toast .swal2-html-container {
+  color: white;
+}
+
 .permissions-main {
   background: #edeff2;
 }

package/dist/library.js

@@ -2150,7 +2150,7 @@ const _hoisted_2$i = {
 };
 const _hoisted_3$f = ["src"];
 const _hoisted_4$f = ["value"];
-const _hoisted_5$c = ["disabled"];
+const _hoisted_5$d = ["disabled"];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
@@ -2182,7 +2182,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
       placeholder: "712345678",
       "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.input) = $event))
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$c), [
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$d), [
       [vue.vModelText, $data.input]
     ])
   ]))
@@ -2198,7 +2198,7 @@ const _hoisted_1$p = {
 const _hoisted_2$h = ["id"];
 const _hoisted_3$e = { class: "sh-suggestions-holder" };
 const _hoisted_4$e = { class: "badge bg-secondary m-1 sh-selected-item" };
-const _hoisted_5$b = ["onClick"];
+const _hoisted_5$c = ["onClick"];
 const _hoisted_6$9 = ["id"];
 const _hoisted_7$8 = ["id", "aria-labelledby"];
 const _hoisted_8$7 = ["onClick"];
@@ -2374,7 +2374,7 @@ return (_ctx, _cache) => {
                   type: "button",
                   class: "btn-close border-start border-1 ms-1",
                   "aria-label": "Close"
-                }, null, 8 /* PROPS */, _hoisted_5$b)
+                }, null, 8 /* PROPS */, _hoisted_5$c)
               ]))
             }), 256 /* UNKEYED_FRAGMENT */))
           ]),
@@ -2795,7 +2795,7 @@ const _hoisted_2$g = {
 };
 const _hoisted_3$d = { key: 0 };
 const _hoisted_4$d = { key: 1 };
-const _hoisted_5$a = { class: "row" };
+const _hoisted_5$b = { 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" };
 const _hoisted_8$6 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
@@ -2846,7 +2846,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512 /* NEED_PATCH */), [
         [vue.vModelText, _ctx.form_elements['id']]
       ]),
-      vue.createElementVNode("div", _hoisted_5$a, [
+      vue.createElementVNode("div", _hoisted_5$b, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.fields, (field) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
             class: vue.normalizeClass(["form-group", 'col-md-' + $options.getColumns()]),
@@ -3408,7 +3408,7 @@ const _hoisted_3$c = {
   class: "text-danger sh-required"
 };
 const _hoisted_4$c = ["innerHTML"];
-const _hoisted_5$9 = {
+const _hoisted_5$a = {
   key: 2,
   class: "form-notch"
 };
@@ -3719,7 +3719,7 @@ return (_ctx, _cache) => {
                   }, 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] = [
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$a, [...(_cache[1] || (_cache[1] = [
                     vue.createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* CACHED */),
                     vue.createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* CACHED */),
                     vue.createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* CACHED */)
@@ -3772,7 +3772,7 @@ const _hoisted_1$k = ["id", "data-bs-backdrop"];
 const _hoisted_2$e = { class: "modal-content" };
 const _hoisted_3$b = { class: "modal-header" };
 const _hoisted_4$b = { class: "modal-title flex-fill" };
-const _hoisted_5$8 = { class: "modal-body" };
+const _hoisted_5$9 = { class: "modal-body" };
 const _hoisted_6$6 = { class: "section" };
 
 
@@ -3844,7 +3844,7 @@ return (_ctx, _cache) => {
             "aria-label": "Close"
           }, null, -1 /* CACHED */))
         ]),
-        vue.createElementVNode("div", _hoisted_5$8, [
+        vue.createElementVNode("div", _hoisted_5$9, [
           vue.createElementVNode("div", _hoisted_6$6, [
             vue.renderSlot(_ctx.$slots, "default")
           ])
@@ -3859,7 +3859,11 @@ return (_ctx, _cache) => {
 
 script$p.__file = "src/lib/components/ShModal.vue";
 
-const _hoisted_1$j = { class: "dropdown sh-dropdown-form" };
+const _hoisted_1$j = {
+  class: "dropdown sh-dropdown-form",
+  "data-bs-auto-close": "outside",
+  "aria-expanded": "false"
+};
 
 var script$o = {
   __name: 'ShDropDownForm',
@@ -3907,36 +3911,38 @@ const formError = (res)=>{
   emit('formError',res);
 };
 const dropdownId = 'dropdown' + (Math.random() + 1).toString(36).substring(2);
+const cleanedProp = vue.computed(()=>{
+  const p = {...props};
+  delete p.class;
+  return p
+});
 
 return (_ctx, _cache) => {
-  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _cache[0] || (_cache[0] = vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* CACHED */)),
-    vue.createElementVNode("div", _hoisted_1$j, [
-      vue.createElementVNode("a", {
-        class: vue.normalizeClass(vue.unref(btnClass)),
-        href: "#",
-        role: "button",
-        id: dropdownId,
-        "data-bs-toggle": "dropdown",
-        "data-bs-auto-close": "outside",
-        "aria-expanded": "false"
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2 /* CLASS */),
-      vue.createElementVNode("div", {
-        class: "dropdown-menu px-2 py-1",
-        "aria-labelledby": dropdownId
-      }, [
-        (vue.openBlock(), vue.createBlock(script$q, vue.mergeProps({
-          onSuccess: success,
-          onFieldChanged: fieldChanged,
-          onFormSubmitted: formSubmitted,
-          onFormError: formError,
-          key: JSON.stringify(__props.currentData ?? {})
-        }, props), null, 16 /* FULL_PROPS */))
-      ])
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+    vue.createElementVNode("a", {
+      class: vue.normalizeClass(vue.unref(btnClass)),
+      href: "#",
+      role: "button",
+      id: dropdownId,
+      "data-bs-toggle": "dropdown",
+      "data-bs-auto-close": "outside",
+      "aria-expanded": "false"
+    }, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 2 /* CLASS */),
+    vue.createElementVNode("div", {
+      class: "dropdown-menu px-2 py-1",
+      "aria-labelledby": dropdownId
+    }, [
+      (vue.openBlock(), vue.createBlock(script$q, vue.mergeProps({
+        onSuccess: success,
+        onFieldChanged: fieldChanged,
+        onFormSubmitted: formSubmitted,
+        onFormError: formError,
+        key: JSON.stringify(__props.currentData ?? {})
+      }, cleanedProp.value), null, 16 /* FULL_PROPS */))
     ])
-  ], 64 /* STABLE_FRAGMENT */))
+  ]))
 }
 }
 
@@ -4073,7 +4079,7 @@ const _hoisted_4$a = {
   "data-bs-dismiss": "offcanvas",
   "aria-label": "Close"
 };
-const _hoisted_5$7 = { class: "offcanvas-body" };
+const _hoisted_5$8 = { class: "offcanvas-body" };
 
 var script$l = {
   __name: 'ShCanvas',
@@ -4125,7 +4131,7 @@ return (_ctx, _cache) => {
       vue.createElementVNode("h5", _hoisted_3$a, vue.toDisplayString(__props.canvasTitle), 1 /* TEXT */),
       vue.createElementVNode("button", _hoisted_4$a, null, 512 /* NEED_PATCH */)
     ]),
-    vue.createElementVNode("div", _hoisted_5$7, [
+    vue.createElementVNode("div", _hoisted_5$8, [
       vue.renderSlot(_ctx.$slots, "default")
     ])
   ], 10 /* CLASS, PROPS */, _hoisted_1$h))
@@ -4623,7 +4629,7 @@ const _hoisted_4$9 = {
   key: 2,
   class: "bi bi-three-dots-vertical"
 };
-const _hoisted_5$6 = { class: "dropdown-menu" };
+const _hoisted_5$7 = { class: "dropdown-menu" };
 
 
 var script$g = {
@@ -4650,7 +4656,7 @@ return (_ctx, _cache) => {
               ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_3$9))
               : (vue.openBlock(), vue.createElementBlock("i", _hoisted_4$9))
         ]),
-        vue.createElementVNode("ul", _hoisted_5$6, [
+        vue.createElementVNode("ul", _hoisted_5$7, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(actionItems), (act) => {
             return (vue.openBlock(), vue.createElementBlock("li", {
               key: act.label
@@ -4695,7 +4701,7 @@ const _hoisted_3$8 = {
   "aria-expanded": "false"
 };
 const _hoisted_4$8 = ["innerHTML"];
-const _hoisted_5$5 = {
+const _hoisted_5$6 = {
   class: "dropdown-menu sh-range-dropdown",
   "aria-labelledby": "dropdownMenuLink"
 };
@@ -4836,7 +4842,7 @@ return (_ctx, _cache) => {
         _cache[3] || (_cache[3] = vue.createTextVNode()),
         vue.createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$8)
       ]),
-      vue.createElementVNode("div", _hoisted_5$5, [
+      vue.createElementVNode("div", _hoisted_5$6, [
         vue.createElementVNode("ul", _hoisted_6$5, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dates.value, (date) => {
             return (vue.openBlock(), vue.createElementBlock("li", {
@@ -4971,7 +4977,7 @@ const _hoisted_1$c = { key: 0 };
 const _hoisted_2$9 = { class: "record_count_body mb-3" };
 const _hoisted_3$7 = ["value"];
 const _hoisted_4$7 = { class: "record_counts" };
-const _hoisted_5$4 = {
+const _hoisted_5$5 = {
   key: 0,
   "aria-label": "Page navigation"
 };
@@ -5024,7 +5030,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           vue.createElementVNode("span", _hoisted_4$7, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_5$4, [
+          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_5$5, [
               vue.createElementVNode("ul", _hoisted_6$4, [
                 vue.createElementVNode("li", {
                   class: vue.normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
@@ -5103,7 +5109,7 @@ const _hoisted_4$6 = {
   key: 1,
   class: "row"
 };
-const _hoisted_5$3 = { class: "col-12 mb-3 d-flex justify-content-between flex-column flex-md-row flex-lg-row" };
+const _hoisted_5$4 = { class: "col-12 mb-3 d-flex justify-content-between flex-column flex-md-row flex-lg-row" };
 const _hoisted_6$3 = ["placeholder"];
 const _hoisted_7$3 = {
   key: 0,
@@ -5590,7 +5596,7 @@ return (_ctx, _cache) => {
       : vue.createCommentVNode("v-if", true),
     (!__props.hideSearch)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
-          vue.createElementVNode("div", _hoisted_5$3, [
+          vue.createElementVNode("div", _hoisted_5$4, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
             }, [
@@ -6222,59 +6228,146 @@ const _hoisted_1$9 = {
 };
 const _hoisted_2$6 = ["onClick"];
 const _hoisted_3$4 = { class: "sh_tab_count" };
-const _hoisted_4$4 = { class: "tab-content" };
+const _hoisted_4$4 = { class: "sh_tab_count" };
+const _hoisted_5$3 = { class: "tab-content" };
+
+// const props = defineProps(['tabs', 'data', 'classes', 'currentTab', 'component', 'baseUrl', 'defaultComponent','addTabQuery'])
 
 var script$b = {
   __name: 'ShDynamicTabs',
-  props: ['tabs','data','classes','currentTab'],
+  props: {
+  tabs: {
+    type: Array,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  classes: {
+    type: String,
+    default: ''
+  },
+  currentTab: {
+    type: String,
+    default: null
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  baseUrl: {
+    type: String,
+    default: null
+  },
+  defaultComponent: {
+    type: Object,
+    default: () => ({ template: '<div></div>' })
+  },
+  addTabQuery: {
+    type: Boolean,
+    default: false
+  }
+},
   setup(__props) {
 
 const props = __props;
-const tabs = props.tabs;
+const route = vueRouter.useRoute();
+const router = vueRouter.useRouter();
+const formattedTabs = vue.computed(() => {
+  if (!props.tabs || props.tabs.length === 0) {
+    return []
+  }
+  return props.tabs.map(tab => {
+    if (typeof tab === 'string') {
+      return {key: tab, label: tab.replace(/_/g, ' ')}
+    }
+    if (typeof tab === 'function') {
+      return tab(props.data)
+    }
+    return tab
+  })
+});
+const tabsBaseUrl = props.baseUrl ?? route.path;
 let currentTab = vue.shallowRef(null);
 const generatedId = vue.ref(null);
 vue.ref(null);
-vue.onMounted(()=>{
-  generatedId.value =  'tab' + Math.random().toString(36).slice(2);
-  if(tabs.length > 0) {
-   if (props.currentTab) {
-      currentTab.value = tabs.find(tab=>tab.label === props.currentTab);
-   } else {
-     currentTab.value = tabs[0];
-   }
+vue.onMounted(() => {
+  generatedId.value = 'tab' + Math.random().toString(36).slice(2);
+  if (formattedTabs.value.length > 0) {
+    if (props.currentTab) {
+      currentTab.value = formattedTabs.value.find(tab => tab.label === props.currentTab);
+    } else {
+      currentTab.value = formattedTabs.value[0];
+    }
+    const tabParam = route.query.tab;
+    if (tabParam) {
+      const tabFromParam = formattedTabs.value.find(tab => getTabKey(tab) === tabParam);
+      if (tabFromParam) {
+        currentTab.value = tabFromParam;
+      }
+    } else if(currentTab.value && props.addTabQuery) {
+      router.replace({path: tabsBaseUrl, query: {...route.query, tab: getTabKey(currentTab.value)}});
+    }
+
   }
 });
 
-function setTab(tab){
+function setTab(tab) {
   currentTab.value = tab;
 }
 
+const getTabKey = (tab) => {
+  return tab.key ?? tab.label.replace(/\s+/g, '_').toLowerCase()
+};
+
 return (_ctx, _cache) => {
+  const _component_router_link = vue.resolveComponent("router-link");
+
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
     vue.createElementVNode("ul", {
-      class: vue.normalizeClass(["nav nav-tabs", vue.unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered') + __props.classes]),
+      class: vue.normalizeClass(["nav nav-tabs nav-tabs-bordered", vue.unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered') + __props.classes]),
       role: "tablist"
     }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab) => {
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(formattedTabs.value, (tab) => {
         return (vue.openBlock(), vue.createElementBlock("li", _hoisted_1$9, [
-          vue.createElementVNode("button", {
-            onClick: $event => (setTab(tab)),
-            class: vue.normalizeClass(["nav-link", vue.unref(currentTab) === tab ? 'active':''])
-          }, [
-            vue.createTextVNode(vue.toDisplayString(tab.label) + " ", 1 /* TEXT */),
-            (tab.count || tab.tabCount)
-              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _cache[0] || (_cache[0] = vue.createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
-                  vue.createElementVNode("sup", _hoisted_3$4, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
-                ], 64 /* STABLE_FRAGMENT */))
-              : vue.createCommentVNode("v-if", true)
-          ], 10 /* CLASS, PROPS */, _hoisted_2$6)
+          (!__props.addTabQuery)
+            ? (vue.openBlock(), vue.createElementBlock("button", {
+                key: 0,
+                onClick: $event => (setTab(tab)),
+                class: vue.normalizeClass(["nav-link", vue.unref(currentTab) === tab ? 'active':''])
+              }, [
+                vue.createTextVNode(vue.toDisplayString(tab.label) + " ", 1 /* TEXT */),
+                (tab.count || tab.tabCount)
+                  ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      _cache[0] || (_cache[0] = vue.createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
+                      vue.createElementVNode("sup", _hoisted_3$4, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
+                    ], 64 /* STABLE_FRAGMENT */))
+                  : vue.createCommentVNode("v-if", true)
+              ], 10 /* CLASS, PROPS */, _hoisted_2$6))
+            : (vue.openBlock(), vue.createBlock(_component_router_link, {
+                key: 1,
+                to: `${vue.unref(tabsBaseUrl)}?tab=${getTabKey(tab)}`,
+                onClick: $event => (setTab(tab)),
+                class: vue.normalizeClass(["nav-link", vue.unref(currentTab) === tab ? 'active':''])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(tab.label) + " ", 1 /* TEXT */),
+                  (tab.count || tab.tabCount)
+                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                        _cache[1] || (_cache[1] = vue.createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
+                        vue.createElementVNode("sup", _hoisted_4$4, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
+                      ], 64 /* STABLE_FRAGMENT */))
+                    : vue.createCommentVNode("v-if", true)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to", "onClick", "class"]))
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ], 2 /* CLASS */),
-    vue.createElementVNode("div", _hoisted_4$4, [
+    vue.createElementVNode("div", _hoisted_5$3, [
       (vue.unref(currentTab))
-        ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(currentTab).component), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(currentTab))), null, 16 /* FULL_PROPS */))
+        ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(currentTab).component ?? __props.defaultComponent), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(currentTab))), null, 16 /* FULL_PROPS */))
         : vue.createCommentVNode("v-if", true)
     ])
   ], 64 /* STABLE_FRAGMENT */))

package/dist/library.mjs

@@ -2139,7 +2139,7 @@ const _hoisted_2$i = {
 };
 const _hoisted_3$f = ["src"];
 const _hoisted_4$f = ["value"];
-const _hoisted_5$c = ["disabled"];
+const _hoisted_5$d = ["disabled"];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$q, [
@@ -2171,7 +2171,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
       placeholder: "712345678",
       "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.input) = $event))
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$c), [
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$d), [
       [vModelText, $data.input]
     ])
   ]))
@@ -2187,7 +2187,7 @@ const _hoisted_1$p = {
 const _hoisted_2$h = ["id"];
 const _hoisted_3$e = { class: "sh-suggestions-holder" };
 const _hoisted_4$e = { class: "badge bg-secondary m-1 sh-selected-item" };
-const _hoisted_5$b = ["onClick"];
+const _hoisted_5$c = ["onClick"];
 const _hoisted_6$9 = ["id"];
 const _hoisted_7$8 = ["id", "aria-labelledby"];
 const _hoisted_8$7 = ["onClick"];
@@ -2363,7 +2363,7 @@ return (_ctx, _cache) => {
                   type: "button",
                   class: "btn-close border-start border-1 ms-1",
                   "aria-label": "Close"
-                }, null, 8 /* PROPS */, _hoisted_5$b)
+                }, null, 8 /* PROPS */, _hoisted_5$c)
               ]))
             }), 256 /* UNKEYED_FRAGMENT */))
           ]),
@@ -2784,7 +2784,7 @@ const _hoisted_2$g = {
 };
 const _hoisted_3$d = { key: 0 };
 const _hoisted_4$d = { key: 1 };
-const _hoisted_5$a = { class: "row" };
+const _hoisted_5$b = { 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" };
 const _hoisted_8$6 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
@@ -2835,7 +2835,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512 /* NEED_PATCH */), [
         [vModelText, _ctx.form_elements['id']]
       ]),
-      createElementVNode("div", _hoisted_5$a, [
+      createElementVNode("div", _hoisted_5$b, [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.fields, (field) => {
           return (openBlock(), createElementBlock("div", {
             class: normalizeClass(["form-group", 'col-md-' + $options.getColumns()]),
@@ -3397,7 +3397,7 @@ const _hoisted_3$c = {
   class: "text-danger sh-required"
 };
 const _hoisted_4$c = ["innerHTML"];
-const _hoisted_5$9 = {
+const _hoisted_5$a = {
   key: 2,
   class: "form-notch"
 };
@@ -3708,7 +3708,7 @@ return (_ctx, _cache) => {
                   }, null, 10 /* CLASS, PROPS */, _hoisted_4$c))
                 : createCommentVNode("v-if", true),
               (unref(isFloating))
-                ? (openBlock(), createElementBlock("div", _hoisted_5$9, [...(_cache[1] || (_cache[1] = [
+                ? (openBlock(), createElementBlock("div", _hoisted_5$a, [...(_cache[1] || (_cache[1] = [
                     createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* CACHED */),
                     createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* CACHED */),
                     createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* CACHED */)
@@ -3761,7 +3761,7 @@ const _hoisted_1$k = ["id", "data-bs-backdrop"];
 const _hoisted_2$e = { class: "modal-content" };
 const _hoisted_3$b = { class: "modal-header" };
 const _hoisted_4$b = { class: "modal-title flex-fill" };
-const _hoisted_5$8 = { class: "modal-body" };
+const _hoisted_5$9 = { class: "modal-body" };
 const _hoisted_6$6 = { class: "section" };
 
 
@@ -3833,7 +3833,7 @@ return (_ctx, _cache) => {
             "aria-label": "Close"
           }, null, -1 /* CACHED */))
         ]),
-        createElementVNode("div", _hoisted_5$8, [
+        createElementVNode("div", _hoisted_5$9, [
           createElementVNode("div", _hoisted_6$6, [
             renderSlot(_ctx.$slots, "default")
           ])
@@ -3848,7 +3848,11 @@ return (_ctx, _cache) => {
 
 script$p.__file = "src/lib/components/ShModal.vue";
 
-const _hoisted_1$j = { class: "dropdown sh-dropdown-form" };
+const _hoisted_1$j = {
+  class: "dropdown sh-dropdown-form",
+  "data-bs-auto-close": "outside",
+  "aria-expanded": "false"
+};
 
 var script$o = {
   __name: 'ShDropDownForm',
@@ -3896,36 +3900,38 @@ const formError = (res)=>{
   emit('formError',res);
 };
 const dropdownId = 'dropdown' + (Math.random() + 1).toString(36).substring(2);
+const cleanedProp = computed(()=>{
+  const p = {...props};
+  delete p.class;
+  return p
+});
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock(Fragment, null, [
-    _cache[0] || (_cache[0] = createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* CACHED */)),
-    createElementVNode("div", _hoisted_1$j, [
-      createElementVNode("a", {
-        class: normalizeClass(unref(btnClass)),
-        href: "#",
-        role: "button",
-        id: dropdownId,
-        "data-bs-toggle": "dropdown",
-        "data-bs-auto-close": "outside",
-        "aria-expanded": "false"
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2 /* CLASS */),
-      createElementVNode("div", {
-        class: "dropdown-menu px-2 py-1",
-        "aria-labelledby": dropdownId
-      }, [
-        (openBlock(), createBlock(script$q, mergeProps({
-          onSuccess: success,
-          onFieldChanged: fieldChanged,
-          onFormSubmitted: formSubmitted,
-          onFormError: formError,
-          key: JSON.stringify(__props.currentData ?? {})
-        }, props), null, 16 /* FULL_PROPS */))
-      ])
+  return (openBlock(), createElementBlock("div", _hoisted_1$j, [
+    createElementVNode("a", {
+      class: normalizeClass(unref(btnClass)),
+      href: "#",
+      role: "button",
+      id: dropdownId,
+      "data-bs-toggle": "dropdown",
+      "data-bs-auto-close": "outside",
+      "aria-expanded": "false"
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 2 /* CLASS */),
+    createElementVNode("div", {
+      class: "dropdown-menu px-2 py-1",
+      "aria-labelledby": dropdownId
+    }, [
+      (openBlock(), createBlock(script$q, mergeProps({
+        onSuccess: success,
+        onFieldChanged: fieldChanged,
+        onFormSubmitted: formSubmitted,
+        onFormError: formError,
+        key: JSON.stringify(__props.currentData ?? {})
+      }, cleanedProp.value), null, 16 /* FULL_PROPS */))
     ])
-  ], 64 /* STABLE_FRAGMENT */))
+  ]))
 }
 }
 
@@ -4062,7 +4068,7 @@ const _hoisted_4$a = {
   "data-bs-dismiss": "offcanvas",
   "aria-label": "Close"
 };
-const _hoisted_5$7 = { class: "offcanvas-body" };
+const _hoisted_5$8 = { class: "offcanvas-body" };
 
 var script$l = {
   __name: 'ShCanvas',
@@ -4114,7 +4120,7 @@ return (_ctx, _cache) => {
       createElementVNode("h5", _hoisted_3$a, toDisplayString(__props.canvasTitle), 1 /* TEXT */),
       createElementVNode("button", _hoisted_4$a, null, 512 /* NEED_PATCH */)
     ]),
-    createElementVNode("div", _hoisted_5$7, [
+    createElementVNode("div", _hoisted_5$8, [
       renderSlot(_ctx.$slots, "default")
     ])
   ], 10 /* CLASS, PROPS */, _hoisted_1$h))
@@ -4612,7 +4618,7 @@ const _hoisted_4$9 = {
   key: 2,
   class: "bi bi-three-dots-vertical"
 };
-const _hoisted_5$6 = { class: "dropdown-menu" };
+const _hoisted_5$7 = { class: "dropdown-menu" };
 
 
 var script$g = {
@@ -4639,7 +4645,7 @@ return (_ctx, _cache) => {
               ? (openBlock(), createElementBlock("i", _hoisted_3$9))
               : (openBlock(), createElementBlock("i", _hoisted_4$9))
         ]),
-        createElementVNode("ul", _hoisted_5$6, [
+        createElementVNode("ul", _hoisted_5$7, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(actionItems), (act) => {
             return (openBlock(), createElementBlock("li", {
               key: act.label
@@ -4684,7 +4690,7 @@ const _hoisted_3$8 = {
   "aria-expanded": "false"
 };
 const _hoisted_4$8 = ["innerHTML"];
-const _hoisted_5$5 = {
+const _hoisted_5$6 = {
   class: "dropdown-menu sh-range-dropdown",
   "aria-labelledby": "dropdownMenuLink"
 };
@@ -4825,7 +4831,7 @@ return (_ctx, _cache) => {
         _cache[3] || (_cache[3] = createTextVNode()),
         createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$8)
       ]),
-      createElementVNode("div", _hoisted_5$5, [
+      createElementVNode("div", _hoisted_5$6, [
         createElementVNode("ul", _hoisted_6$5, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(dates.value, (date) => {
             return (openBlock(), createElementBlock("li", {
@@ -4960,7 +4966,7 @@ const _hoisted_1$c = { key: 0 };
 const _hoisted_2$9 = { class: "record_count_body mb-3" };
 const _hoisted_3$7 = ["value"];
 const _hoisted_4$7 = { class: "record_counts" };
-const _hoisted_5$4 = {
+const _hoisted_5$5 = {
   key: 0,
   "aria-label": "Page navigation"
 };
@@ -5013,7 +5019,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("span", _hoisted_4$7, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (openBlock(), createElementBlock("nav", _hoisted_5$4, [
+          ? (openBlock(), createElementBlock("nav", _hoisted_5$5, [
               createElementVNode("ul", _hoisted_6$4, [
                 createElementVNode("li", {
                   class: normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
@@ -5092,7 +5098,7 @@ const _hoisted_4$6 = {
   key: 1,
   class: "row"
 };
-const _hoisted_5$3 = { class: "col-12 mb-3 d-flex justify-content-between flex-column flex-md-row flex-lg-row" };
+const _hoisted_5$4 = { class: "col-12 mb-3 d-flex justify-content-between flex-column flex-md-row flex-lg-row" };
 const _hoisted_6$3 = ["placeholder"];
 const _hoisted_7$3 = {
   key: 0,
@@ -5579,7 +5585,7 @@ return (_ctx, _cache) => {
       : createCommentVNode("v-if", true),
     (!__props.hideSearch)
       ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
-          createElementVNode("div", _hoisted_5$3, [
+          createElementVNode("div", _hoisted_5$4, [
             createElementVNode("div", {
               class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
             }, [
@@ -6211,59 +6217,146 @@ const _hoisted_1$9 = {
 };
 const _hoisted_2$6 = ["onClick"];
 const _hoisted_3$4 = { class: "sh_tab_count" };
-const _hoisted_4$4 = { class: "tab-content" };
+const _hoisted_4$4 = { class: "sh_tab_count" };
+const _hoisted_5$3 = { class: "tab-content" };
+
+// const props = defineProps(['tabs', 'data', 'classes', 'currentTab', 'component', 'baseUrl', 'defaultComponent','addTabQuery'])
 
 var script$b = {
   __name: 'ShDynamicTabs',
-  props: ['tabs','data','classes','currentTab'],
+  props: {
+  tabs: {
+    type: Array,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  classes: {
+    type: String,
+    default: ''
+  },
+  currentTab: {
+    type: String,
+    default: null
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  baseUrl: {
+    type: String,
+    default: null
+  },
+  defaultComponent: {
+    type: Object,
+    default: () => ({ template: '<div></div>' })
+  },
+  addTabQuery: {
+    type: Boolean,
+    default: false
+  }
+},
   setup(__props) {
 
 const props = __props;
-const tabs = props.tabs;
+const route = useRoute();
+const router = useRouter();
+const formattedTabs = computed(() => {
+  if (!props.tabs || props.tabs.length === 0) {
+    return []
+  }
+  return props.tabs.map(tab => {
+    if (typeof tab === 'string') {
+      return {key: tab, label: tab.replace(/_/g, ' ')}
+    }
+    if (typeof tab === 'function') {
+      return tab(props.data)
+    }
+    return tab
+  })
+});
+const tabsBaseUrl = props.baseUrl ?? route.path;
 let currentTab = shallowRef(null);
 const generatedId = ref(null);
 ref(null);
-onMounted(()=>{
-  generatedId.value =  'tab' + Math.random().toString(36).slice(2);
-  if(tabs.length > 0) {
-   if (props.currentTab) {
-      currentTab.value = tabs.find(tab=>tab.label === props.currentTab);
-   } else {
-     currentTab.value = tabs[0];
-   }
+onMounted(() => {
+  generatedId.value = 'tab' + Math.random().toString(36).slice(2);
+  if (formattedTabs.value.length > 0) {
+    if (props.currentTab) {
+      currentTab.value = formattedTabs.value.find(tab => tab.label === props.currentTab);
+    } else {
+      currentTab.value = formattedTabs.value[0];
+    }
+    const tabParam = route.query.tab;
+    if (tabParam) {
+      const tabFromParam = formattedTabs.value.find(tab => getTabKey(tab) === tabParam);
+      if (tabFromParam) {
+        currentTab.value = tabFromParam;
+      }
+    } else if(currentTab.value && props.addTabQuery) {
+      router.replace({path: tabsBaseUrl, query: {...route.query, tab: getTabKey(currentTab.value)}});
+    }
+
   }
 });
 
-function setTab(tab){
+function setTab(tab) {
   currentTab.value = tab;
 }
 
+const getTabKey = (tab) => {
+  return tab.key ?? tab.label.replace(/\s+/g, '_').toLowerCase()
+};
+
 return (_ctx, _cache) => {
+  const _component_router_link = resolveComponent("router-link");
+
   return (openBlock(), createElementBlock(Fragment, null, [
     createElementVNode("ul", {
-      class: normalizeClass(["nav nav-tabs", unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered') + __props.classes]),
+      class: normalizeClass(["nav nav-tabs nav-tabs-bordered", unref(shRepo).getShConfig('tabsClass','sh-tabs nav-tabs-bordered') + __props.classes]),
       role: "tablist"
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(tabs), (tab) => {
+      (openBlock(true), createElementBlock(Fragment, null, renderList(formattedTabs.value, (tab) => {
         return (openBlock(), createElementBlock("li", _hoisted_1$9, [
-          createElementVNode("button", {
-            onClick: $event => (setTab(tab)),
-            class: normalizeClass(["nav-link", unref(currentTab) === tab ? 'active':''])
-          }, [
-            createTextVNode(toDisplayString(tab.label) + " ", 1 /* TEXT */),
-            (tab.count || tab.tabCount)
-              ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  _cache[0] || (_cache[0] = createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
-                  createElementVNode("sup", _hoisted_3$4, toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
-                ], 64 /* STABLE_FRAGMENT */))
-              : createCommentVNode("v-if", true)
-          ], 10 /* CLASS, PROPS */, _hoisted_2$6)
+          (!__props.addTabQuery)
+            ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                onClick: $event => (setTab(tab)),
+                class: normalizeClass(["nav-link", unref(currentTab) === tab ? 'active':''])
+              }, [
+                createTextVNode(toDisplayString(tab.label) + " ", 1 /* TEXT */),
+                (tab.count || tab.tabCount)
+                  ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      _cache[0] || (_cache[0] = createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
+                      createElementVNode("sup", _hoisted_3$4, toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
+                    ], 64 /* STABLE_FRAGMENT */))
+                  : createCommentVNode("v-if", true)
+              ], 10 /* CLASS, PROPS */, _hoisted_2$6))
+            : (openBlock(), createBlock(_component_router_link, {
+                key: 1,
+                to: `${unref(tabsBaseUrl)}?tab=${getTabKey(tab)}`,
+                onClick: $event => (setTab(tab)),
+                class: normalizeClass(["nav-link", unref(currentTab) === tab ? 'active':''])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(tab.label) + " ", 1 /* TEXT */),
+                  (tab.count || tab.tabCount)
+                    ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        _cache[1] || (_cache[1] = createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
+                        createElementVNode("sup", _hoisted_4$4, toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
+                      ], 64 /* STABLE_FRAGMENT */))
+                    : createCommentVNode("v-if", true)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to", "onClick", "class"]))
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ], 2 /* CLASS */),
-    createElementVNode("div", _hoisted_4$4, [
+    createElementVNode("div", _hoisted_5$3, [
       (unref(currentTab))
-        ? (openBlock(), createBlock(resolveDynamicComponent(unref(currentTab).component), normalizeProps(mergeProps({ key: 0 }, unref(currentTab))), null, 16 /* FULL_PROPS */))
+        ? (openBlock(), createBlock(resolveDynamicComponent(unref(currentTab).component ?? __props.defaultComponent), normalizeProps(mergeProps({ key: 0 }, unref(currentTab))), null, 16 /* FULL_PROPS */))
         : createCommentVNode("v-if", true)
     ])
   ], 64 /* STABLE_FRAGMENT */))

package/package.json

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