@iankibetsh/shframework 1.8.7 → 1.9.0

package/dist/library.js

@@ -14,6 +14,24 @@ var bootstrap = require('bootstrap');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var Axios__default = /*#__PURE__*/_interopDefaultLegacy(Axios);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var Swal__default = /*#__PURE__*/_interopDefaultLegacy(Swal);
@@ -359,6 +377,7 @@ const updateSession = () =>{
   ShStorage.setItem('last_activity', timeNow);
 };
 
+const graphQlEndpoint = 'sh-ql';
 let apiUrl = undefined.VITE_APP_API_URL;
 // eslint-disable-next-line no-undef
 if (process.env.NODE_ENV === 'production') {
@@ -394,10 +413,24 @@ function doPost (endPoint, data) {
     }
   )
 }
+function graphQlQuery(query) {
+  const data = {
+    query
+  };
+  return doGet(graphQlEndpoint,data)
+}
+function graphQlMutate(mutation) {
+  const data = {
+    query: `mutation ${mutation}`
+  };
+  return doPost(graphQlEndpoint,data)
+}
 
 var shApis = {
   doGet,
-  doPost
+  doPost,
+  graphQlQuery,
+  graphQlMutate
 };
 
 const countries = [
@@ -1873,7 +1906,7 @@ const countries = [
   }
 ];
 
-var script$s = {
+var script$w = {
   name: 'PhoneInput',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1943,19 +1976,19 @@ var script$s = {
   }
 };
 
-const _hoisted_1$n = { class: "sh-phone mb-3" };
-const _hoisted_2$e = {
+const _hoisted_1$o = { class: "sh-phone mb-3" };
+const _hoisted_2$f = {
   key: 0,
   style: {"display":"contents"}
 };
-const _hoisted_3$d = ["src"];
-const _hoisted_4$d = ["value"];
+const _hoisted_3$e = ["src"];
+const _hoisted_4$e = ["value"];
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
     ($data.selectedCountry)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
-          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$d),
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
+          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$e),
           vue.createTextVNode(" " + vue.toDisplayString($data.selectedCountry.dialCode), 1 /* TEXT */)
         ]))
       : vue.createCommentVNode("v-if", true),
@@ -1968,7 +2001,7 @@ function render$3(_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$d))
+        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$e))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
       [vue.vModelSelect, $data.selectedCountry]
@@ -1986,16 +2019,16 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$s.render = render$3;
-script$s.__file = "src/lib/components/form-components/PhoneInput.vue";
+script$w.render = render$5;
+script$w.__file = "src/lib/components/form-components/PhoneInput.vue";
 
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   key: 0,
   class: "dropdown sh-suggest"
 };
-const _hoisted_2$d = ["id"];
-const _hoisted_3$c = { class: "badge bg-secondary m-1 sh-selected-item" };
-const _hoisted_4$c = ["onClick"];
+const _hoisted_2$e = ["id"];
+const _hoisted_3$d = { class: "badge bg-secondary m-1 sh-selected-item" };
+const _hoisted_4$d = ["onClick"];
 const _hoisted_5$a = ["id"];
 const _hoisted_6$9 = ["id", "aria-labelledby"];
 const _hoisted_7$7 = { key: 0 };
@@ -2010,7 +2043,7 @@ const _hoisted_10$5 = {
 };
 
 
-var script$r = {
+var script$v = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2091,7 +2124,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (vue.unref(id))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
         vue.createElementVNode("div", {
           id: vue.unref(id),
           "data-bs-toggle": "dropdown",
@@ -2100,14 +2133,14 @@ return (_ctx, _cache) => {
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedSuggestions), (sgt) => {
-              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_3$c, [
+              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_3$d, [
                 vue.createTextVNode(vue.toDisplayString(sgt.name) + " ", 1 /* TEXT */),
                 vue.createElementVNode("button", {
                   onClick: $event => (removeSuggestion(sgt.id)),
                   type: "button",
                   class: "btn-close border-start border-1 ms-1",
                   "aria-label": "Close"
-                }, null, 8 /* PROPS */, _hoisted_4$c)
+                }, null, 8 /* PROPS */, _hoisted_4$d)
               ]))
             }), 256 /* UNKEYED_FRAGMENT */))
           ]),
@@ -2118,7 +2151,7 @@ return (_ctx, _cache) => {
             onInput: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
           }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$a)
-        ], 8 /* PROPS */, _hoisted_2$d),
+        ], 8 /* PROPS */, _hoisted_2$e),
         vue.createElementVNode("ul", {
           class: "dropdown-menu w-100",
           id: 'dropwdown_section' + vue.unref(id),
@@ -2151,15 +2184,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$r.__scopeId = "data-v-71cc9569";
-script$r.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$v.__scopeId = "data-v-71cc9569";
+script$v.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$q = {
+var script$u = {
   name: 'ShForm',
   components: {
-    PhoneInput: script$s,
-    ShSuggest: script$r,
-    ShPhone: script$s
+    PhoneInput: script$w,
+    ShSuggest: script$v,
+    ShPhone: script$w
   },
   props: [
       'action',
@@ -2481,17 +2514,17 @@ var script$q = {
   }
 };
 
-const _hoisted_1$l = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
-const _hoisted_2$c = {
+const _hoisted_1$m = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_2$d = {
   ref: "ShAutoForm",
   class: "sh-form"
 };
-const _hoisted_3$b = {
+const _hoisted_3$c = {
   key: 0,
   class: "alert alert-danger alert-dismissible fade show sh-form-submission-error",
   role: "alert"
 };
-const _hoisted_4$b = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
+const _hoisted_4$c = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
 const _hoisted_5$9 = { key: 0 };
 const _hoisted_6$8 = { key: 1 };
 const _hoisted_7$6 = { class: "row" };
@@ -2537,18 +2570,18 @@ const _hoisted_24$1 = /*#__PURE__*/vue.createElementVNode("span", {
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_phone_input = vue.resolveComponent("phone-input");
   const _component_ShSuggest = vue.resolveComponent("ShSuggest");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$l,
-    vue.createElementVNode("form", _hoisted_2$c, [
+    _hoisted_1$m,
+    vue.createElementVNode("form", _hoisted_2$d, [
       vue.createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
       vue.createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
       (_ctx.form_status == 3)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [
-            _hoisted_4$b,
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$c, [
+            _hoisted_4$c,
             (_ctx.errorText)
               ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$9, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
               : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$8, "Unexpected Error Occurred")),
@@ -2748,10 +2781,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$q.render = render$2;
-script$q.__file = "src/lib/components/ShForm.vue";
+script$u.render = render$4;
+script$u.__file = "src/lib/components/ShForm.vue";
 
-var script$p = {
+var script$t = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2791,12 +2824,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$p.__file = "src/lib/components/form-components/EmailInput.vue";
+script$t.__file = "src/lib/components/form-components/EmailInput.vue";
 
-const _hoisted_1$k = ["min", "max"];
+const _hoisted_1$l = ["min", "max"];
 
 
-var script$o = {
+var script$s = {
   __name: 'NumberInput',
   props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2830,7 +2863,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$k)), [
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$l)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2838,9 +2871,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$o.__file = "src/lib/components/form-components/NumberInput.vue";
+script$s.__file = "src/lib/components/form-components/NumberInput.vue";
 
-var script$n = {
+var script$r = {
   __name: 'TextInput',
   props: ['modelValue','label','isInvalid'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2882,9 +2915,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$n.__file = "src/lib/components/form-components/TextInput.vue";
+script$r.__file = "src/lib/components/form-components/TextInput.vue";
 
-var script$m = {
+var script$q = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2924,12 +2957,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$m.__file = "src/lib/components/form-components/TextAreaInput.vue";
+script$q.__file = "src/lib/components/form-components/TextAreaInput.vue";
 
-const _hoisted_1$j = ["value"];
+const _hoisted_1$k = ["value"];
 
 
-var script$l = {
+var script$p = {
   __name: 'SelectInput',
   props: ['modelValue','label','data','dataUrl'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2984,7 +3017,7 @@ return (_ctx, _cache) => {
       return (vue.openBlock(), vue.createElementBlock("option", {
         key: option.id,
         value: option.id
-      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$j))
+      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$k))
     }), 128 /* KEYED_FRAGMENT */))
   ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
     [vue.vModelSelect, inputModel.value]
@@ -2994,9 +3027,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$l.__file = "src/lib/components/form-components/SelectInput.vue";
+script$p.__file = "src/lib/components/form-components/SelectInput.vue";
 
-var script$k = {
+var script$o = {
   __name: 'PasswordInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -3032,12 +3065,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$k.__file = "src/lib/components/form-components/PasswordInput.vue";
+script$o.__file = "src/lib/components/form-components/PasswordInput.vue";
 
-const _hoisted_1$i = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
-const _hoisted_2$b = ["onUpdate:modelValue"];
-const _hoisted_3$a = ["innerHTML"];
-const _hoisted_4$a = ["innerHTML"];
+const _hoisted_1$j = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
+const _hoisted_2$c = ["onUpdate:modelValue"];
+const _hoisted_3$b = ["innerHTML"];
+const _hoisted_4$b = ["innerHTML"];
 const _hoisted_5$8 = ["innerHTML"];
 const _hoisted_6$7 = ["disabled"];
 const _hoisted_7$5 = {
@@ -3049,7 +3082,7 @@ const _hoisted_7$5 = {
 const _hoisted_8$4 = { key: 1 };
 
 
-var script$j = {
+var script$n = {
   __name: 'ShAutoForm',
   props: [
     'action','successCallback','retainDataAfterSubmission',
@@ -3061,7 +3094,7 @@ var script$j = {
     'textAreas',
     'currentData',
     'emails',
-    'phones','numbers','selects','dates'
+    'phones','numbers','selects','dates','gqlMutation'
 ],
   emits: ['success'],
   setup(__props, { emit }) {
@@ -3082,13 +3115,13 @@ const getFieldComponent = (fieldObj)=>{
   const defaultPhones = ['phone'];
   const defaultEmails = ['email'];
   const formComponents = vue.inject('formComponents');
-  const TextComponent = formComponents.text ?? script$n;
-  const TextAreaComponent = formComponents.textArea ?? script$m;
-  const EmailComponent = formComponents.email ?? script$p;
-  const PhoneComponent = formComponents.phone ?? script$s;
-  const NumberComponent = formComponents.number ?? script$o;
-  const SelectComponent = formComponents.select ?? script$l;
-  const PasswordComponent = formComponents.password ?? script$k;
+  const TextComponent = formComponents.text ?? script$r;
+  const TextAreaComponent = formComponents.textArea ?? script$q;
+  const EmailComponent = formComponents.email ?? script$t;
+  const PhoneComponent = formComponents.phone ?? script$w;
+  const NumberComponent = formComponents.number ?? script$s;
+  const SelectComponent = formComponents.select ?? script$p;
+  const PasswordComponent = formComponents.password ?? script$o;
   if(props.customComponents && props.customComponents[field]) {
     return props.customComponents[field]
   }
@@ -3100,16 +3133,16 @@ const getFieldComponent = (fieldObj)=>{
   }
   else
   if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
-    return formComponents.textArea ?? script$m
+    return formComponents.textArea ?? script$q
   } else
   if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
-    return formComponents.email ?? script$p
+    return formComponents.email ?? script$t
   } else
   if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
-    return formComponents.phone ?? script$s
+    return formComponents.phone ?? script$w
   } else
   if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
-    return formComponents.number ?? script$o
+    return formComponents.number ?? script$s
   }
   // else
   // if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
@@ -3118,7 +3151,7 @@ const getFieldComponent = (fieldObj)=>{
   // if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
   //   return formComponents.date ?? DateInput
   // }
-  return formComponents.text ?? script$n
+  return formComponents.text ?? script$r
 };
 const shFormElementClasses = vue.ref(null);
 shFormElementClasses.value = vue.inject('shFormElementClasses');
@@ -3156,30 +3189,54 @@ const submitForm = e => {
   e.preventDefault();
   loading.value = true;
   const data = {};
-  formFields.value.map(field=>data[field.field] = field.value);
-  shApis.doPost(props.action,data).then(res=>{
-    loading.value = false;
-    emit('formSubmitted',res.data);
-    emit('success',res.data);
-    props.successMessage && shRepo.showToast(props.successMessage);
-    props.successCallback && props.successCallback(res.data);
-    !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
-    closeModal();
-  }).catch(reason=>{
-    console.log(reason);
-    loading.value = false;
-    const httpStatus = reason.response ? reason.response.status:0;
-    formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
-    let httpErrors = {};
-    httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
-    if(httpErrors && reason.response){
-      Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
-    }
-    (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
-    validationErrors.value;
+  formFields.value.map(field=>{
+    data[field.field] = field.value;
   });
+  if(props.gqlMutation) {
+    let args = `(`;
+    let selectFields = Object.keys(data);
+    selectFields.forEach(key=>{
+      if(data[key]) {
+        args +=`${key}: "${data[key]}",`;
+      }
+    });
+    args+=`)`;
+    args = args.replace(',)',')');
+    if(args == '()') {
+      args = '';
+    }
+    const mutation = `{\n${props.gqlMutation} ${args} {\n${selectFields.join(`\n`)}\n}\n}`;
+    console.log(mutation);
+    shApis.graphQlMutate(mutation).then(res=>handleSuccessRequest(res)).catch(reason=>handlefailedRequest(reason));
+  } else {
+    shApis.doPost(props.action,data).then(res=>handleSuccessRequest(res)).catch(reason=>handlefailedRequest(reason));
+  }
   return false
 };
+
+const handleSuccessRequest = res=>{
+  loading.value = false;
+  emit('formSubmitted',res.data);
+  emit('success',res.data);
+  props.successMessage && shRepo.showToast(props.successMessage);
+  props.successCallback && props.successCallback(res.data);
+  !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
+  closeModal();
+};
+
+const handlefailedRequest = reason=>{
+  console.log(reason);
+  loading.value = false;
+  const httpStatus = reason.response ? reason.response.status:0;
+  formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
+  let httpErrors = {};
+  httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
+  if(httpErrors && reason.response){
+    Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
+  }
+  (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
+  validationErrors.value;
+};
 const submitBtnWidth = vue.ref(null);
 const setExistingData = (existingData)=>{
   if (props.currentData) {
@@ -3232,7 +3289,7 @@ vue.onMounted((ev)=>{
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$i,
+    _hoisted_1$j,
     vue.createElementVNode("form", {
       class: vue.normalizeClass([__props.formClass, "sh-form"]),
       ref_key: "shAutoForm",
@@ -3249,7 +3306,7 @@ return (_ctx, _cache) => {
                 key: 0,
                 type: "hidden",
                 "onUpdate:modelValue": $event => ((formFields.value[index].value) = $event)
-              }, null, 8 /* PROPS */, _hoisted_2$b)), [
+              }, null, 8 /* PROPS */, _hoisted_2$c)), [
                 [vue.vModelText, formFields.value[index].value]
               ])
             : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
@@ -3258,7 +3315,7 @@ return (_ctx, _cache) => {
                       key: 0,
                       class: vue.normalizeClass(getElementClass('formLabel')),
                       innerHTML: field.label
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_3$a))
+                    }, null, 10 /* CLASS, PROPS */, _hoisted_3$b))
                   : vue.createCommentVNode("v-if", true),
                 (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps(getComponentProps(field), {
                   isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
@@ -3272,7 +3329,7 @@ return (_ctx, _cache) => {
                       key: 1,
                       class: vue.normalizeClass(getElementClass('formLabel')),
                       innerHTML: field.label
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$a))
+                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$b))
                   : vue.createCommentVNode("v-if", true),
                 (field.helper)
                   ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -3315,12 +3372,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$j.__file = "src/lib/components/ShAutoForm.vue";
+script$n.__file = "src/lib/components/ShAutoForm.vue";
 
-const _hoisted_1$h = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
-const _hoisted_2$a = { class: "dropdown" };
+const _hoisted_1$i = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
+const _hoisted_2$b = { class: "dropdown" };
 
-var script$i = {
+var script$m = {
   __name: 'ShDropDownForm',
   props: ['action',
   'classes',
@@ -3350,8 +3407,8 @@ const dropdownId = 'rand' + (Math.random() + 1).toString(36).substring(2);
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$h,
-    vue.createElementVNode("div", _hoisted_2$a, [
+    _hoisted_1$i,
+    vue.createElementVNode("div", _hoisted_2$b, [
       vue.createElementVNode("a", {
         class: vue.normalizeClass(vue.unref(btnClass)),
         href: "#",
@@ -3367,7 +3424,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$q, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$u, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3376,12 +3433,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$i.__file = "src/lib/components/ShDropDownForm.vue";
+script$m.__file = "src/lib/components/ShDropDownForm.vue";
 
-const _hoisted_1$g = ["id"];
-const _hoisted_2$9 = { class: "modal-content" };
-const _hoisted_3$9 = { class: "modal-header" };
-const _hoisted_4$9 = { class: "modal-title" };
+const _hoisted_1$h = ["id"];
+const _hoisted_2$a = { class: "modal-content" };
+const _hoisted_3$a = { class: "modal-header" };
+const _hoisted_4$a = { class: "modal-title" };
 const _hoisted_5$7 = /*#__PURE__*/vue.createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
@@ -3390,7 +3447,7 @@ const _hoisted_5$7 = /*#__PURE__*/vue.createElementVNode("button", {
 const _hoisted_6$6 = { class: "modal-body" };
 const _hoisted_7$4 = { class: "section" };
 
-var script$h = {
+var script$l = {
   __name: 'ShModal',
   props: {
   modalId: {
@@ -3427,9 +3484,9 @@ return (_ctx, _cache) => {
     vue.createElementVNode("div", {
       class: vue.normalizeClass(["modal-dialog", `modal-${__props.modalSize}`])
     }, [
-      vue.createElementVNode("div", _hoisted_2$9, [
-        vue.createElementVNode("div", _hoisted_3$9, [
-          vue.createElementVNode("h3", _hoisted_4$9, vue.toDisplayString(__props.modalTitle), 1 /* TEXT */),
+      vue.createElementVNode("div", _hoisted_2$a, [
+        vue.createElementVNode("div", _hoisted_3$a, [
+          vue.createElementVNode("h3", _hoisted_4$a, vue.toDisplayString(__props.modalTitle), 1 /* TEXT */),
           _hoisted_5$7
         ]),
         vue.createElementVNode("div", _hoisted_6$6, [
@@ -3439,17 +3496,17 @@ return (_ctx, _cache) => {
         ])
       ])
     ], 2 /* CLASS */)
-  ], 8 /* PROPS */, _hoisted_1$g))
+  ], 8 /* PROPS */, _hoisted_1$h))
 }
 }
 
 };
 
-script$h.__file = "src/lib/components/ShModal.vue";
+script$l.__file = "src/lib/components/ShModal.vue";
 
-const _hoisted_1$f = ["href"];
+const _hoisted_1$g = ["href"];
 
-var script$g = {
+var script$k = {
   __name: 'ShModalForm',
   props: ['action',
   'classes',
@@ -3488,13 +3545,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$f),
-    vue.createVNode(script$h, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$g),
+    vue.createVNode(script$l, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$q, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$u, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3504,11 +3561,11 @@ return (_ctx, _cache) => {
 
 };
 
-script$g.__file = "src/lib/components/ShModalForm.vue";
+script$k.__file = "src/lib/components/ShModalForm.vue";
 
-const _hoisted_1$e = ["href"];
+const _hoisted_1$f = ["href"];
 
-var script$f = {
+var script$j = {
   __name: 'ShModalFormAuto',
   props: ['action',
   'classes',
@@ -3548,13 +3605,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$e),
-    vue.createVNode(script$h, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$f),
+    vue.createVNode(script$l, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$j, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$n, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3564,17 +3621,17 @@ return (_ctx, _cache) => {
 
 };
 
-script$f.__file = "src/lib/components/ShModalFormAuto.vue";
+script$j.__file = "src/lib/components/ShModalFormAuto.vue";
 
-const _hoisted_1$d = ["id"];
-const _hoisted_2$8 = { class: "offcanvas-header" };
-const _hoisted_3$8 = {
+const _hoisted_1$e = ["id"];
+const _hoisted_2$9 = { class: "offcanvas-header" };
+const _hoisted_3$9 = {
   class: "offcanvas-title",
   id: "offcanvasScrollingLabel"
 };
-const _hoisted_4$8 = { class: "offcanvas-body" };
+const _hoisted_4$9 = { class: "offcanvas-body" };
 
-var script$e = {
+var script$i = {
   __name: 'ShCanvas',
   props: {
   canvasId: {
@@ -3619,8 +3676,8 @@ return (_ctx, _cache) => {
     id: __props.canvasId,
     "aria-labelledby": "offcanvasScrollingLabel"
   }, [
-    vue.createElementVNode("div", _hoisted_2$8, [
-      vue.createElementVNode("h5", _hoisted_3$8, vue.toDisplayString(__props.canvasTitle), 1 /* TEXT */),
+    vue.createElementVNode("div", _hoisted_2$9, [
+      vue.createElementVNode("h5", _hoisted_3$9, vue.toDisplayString(__props.canvasTitle), 1 /* TEXT */),
       vue.createElementVNode("button", {
         type: "button",
         ref: "closecanvas",
@@ -3630,18 +3687,18 @@ return (_ctx, _cache) => {
         "aria-label": "Close"
       }, null, 512 /* NEED_PATCH */)
     ]),
-    vue.createElementVNode("div", _hoisted_4$8, [
+    vue.createElementVNode("div", _hoisted_4$9, [
       vue.renderSlot(_ctx.$slots, "default")
     ])
-  ], 10 /* CLASS, PROPS */, _hoisted_1$d))
+  ], 10 /* CLASS, PROPS */, _hoisted_1$e))
 }
 }
 
 };
 
-script$e.__file = "src/lib/components/ShCanvas.vue";
+script$i.__file = "src/lib/components/ShCanvas.vue";
 
-var script$d = {
+var script$h = {
   name: 'Pagination',
   props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle'],
   data () {
@@ -3712,12 +3769,12 @@ var script$d = {
   }
 };
 
-const _hoisted_1$c = { key: 0 };
-const _hoisted_2$7 = { class: "record_count_body mb-3" };
-const _hoisted_3$7 = /*#__PURE__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
-const _hoisted_4$7 = /*#__PURE__*/vue.createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
+const _hoisted_1$d = { key: 0 };
+const _hoisted_2$8 = { class: "record_count_body mb-3" };
+const _hoisted_3$8 = /*#__PURE__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
+const _hoisted_4$8 = /*#__PURE__*/vue.createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
 const _hoisted_9$4 = [
-  _hoisted_4$7
+  _hoisted_4$8
 ];
 const _hoisted_10$3 = { class: "record_counts" };
 const _hoisted_11$2 = {
@@ -3760,11 +3817,11 @@ const _hoisted_23$1 = {
   class: "spinner-border"
 };
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-        vue.createElementVNode("div", _hoisted_2$7, [
-          _hoisted_3$7,
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        vue.createElementVNode("div", _hoisted_2$8, [
+          _hoisted_3$8,
           vue.createTextVNode("  "),
           vue.withDirectives(vue.createElementVNode("select", {
             class: "select_per_page",
@@ -3837,17 +3894,17 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$d.render = render$1;
-script$d.__file = "src/lib/components/list_templates/Pagination.vue";
+script$h.render = render$3;
+script$h.__file = "src/lib/components/list_templates/Pagination.vue";
 
-const _hoisted_1$b = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_1$c = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
 
-var script$c = {
+var script$g = {
   __name: 'ShConfirmAction',
   props: {
   data: Object,
@@ -3920,7 +3977,7 @@ return (_ctx, _cache) => {
   }, [
     (processing.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _hoisted_1$b,
+          _hoisted_1$c,
           vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : vue.createCommentVNode("v-if", true),
@@ -3933,15 +3990,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$c.__file = "src/lib/components/ShConfirmAction.vue";
+script$g.__file = "src/lib/components/ShConfirmAction.vue";
 
-const _hoisted_1$a = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_1$b = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-var script$b = {
+var script$f = {
   __name: 'ShSilentAction',
   props: {
   data: Object,
@@ -4016,7 +4073,7 @@ return (_ctx, _cache) => {
   }, [
     (processing.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _hoisted_1$a,
+          _hoisted_1$b,
           vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : vue.createCommentVNode("v-if", true),
@@ -4029,9 +4086,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$b.__file = "src/lib/components/ShSilentAction.vue";
+script$f.__file = "src/lib/components/ShSilentAction.vue";
 
-var script$a = {
+var script$e = {
   name: 'sh-table',
   props: ['endPoint', 'headers','query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle'],
   inject: ['channel'],
@@ -4221,7 +4278,8 @@ var script$a = {
         order_method: this.order_method,
         per_page: this.per_page,
         page: this.page,
-        filter_value: this.filter_value
+        filter_value: this.filter_value,
+        paginated: true
       };
       if (this.pagination_data) {
         this.pagination_data.loading = 1;
@@ -4285,10 +4343,10 @@ var script$a = {
     this.reloadData();
   },
   components: {
-    ShSilentAction: script$b,
-    ShConfirmAction: script$c,
-    ShCanvas: script$e,
-    pagination: script$d
+    ShSilentAction: script$f,
+    ShConfirmAction: script$g,
+    ShCanvas: script$i,
+    pagination: script$h
   },
   computed: {
     windowWidth: function () {
@@ -4306,13 +4364,13 @@ var script$a = {
   }
 };
 
-const _hoisted_1$9 = { class: "auto-table mt-2" };
-const _hoisted_2$6 = {
+const _hoisted_1$a = { class: "auto-table mt-2" };
+const _hoisted_2$7 = {
   key: 0,
   class: "col-md-4 mb-2"
 };
-const _hoisted_3$6 = ["disabled"];
-const _hoisted_4$6 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
+const _hoisted_3$7 = ["disabled"];
+const _hoisted_4$7 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
 const _hoisted_5$6 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
@@ -4462,16 +4520,16 @@ const _hoisted_63 = { key: 0 };
 const _hoisted_64 = ["href"];
 const _hoisted_65 = ["title", "onClick"];
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_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");
   const _component_pagination = vue.resolveComponent("pagination");
   const _component_sh_canvas = vue.resolveComponent("sh-canvas");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
     ($props.hasDownload)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
           vue.createElementVNode("button", {
             disabled: $data.downloading,
             class: "btn btn-warning btn-sm",
@@ -4479,14 +4537,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             (!$data.downloading)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_4$6,
+                  _hoisted_4$7,
                   vue.createTextVNode(" Export ")
                 ], 64 /* STABLE_FRAGMENT */))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   _hoisted_5$6,
                   _hoisted_6$5
                 ], 64 /* STABLE_FRAGMENT */))
-          ], 8 /* PROPS */, _hoisted_3$6)
+          ], 8 /* PROPS */, _hoisted_3$7)
         ]))
       : vue.createCommentVNode("v-if", true),
     (!$props.hideSearch)
@@ -4922,10 +4980,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$a.render = render;
-script$a.__file = "src/lib/components/ShTable.vue";
+script$e.render = render$2;
+script$e.__file = "src/lib/components/ShTable.vue";
 
-var script$9 = {
+var script$d = {
   __name: 'ShTabs',
   props: {
   tabs: {
@@ -5070,22 +5128,22 @@ return (_ctx, _cache) => {
 
 };
 
-script$9.__file = "src/lib/components/ShTabs.vue";
+script$d.__file = "src/lib/components/ShTabs.vue";
 
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   class: "nav nav-tabs",
   role: "tablist"
 };
-const _hoisted_2$5 = {
+const _hoisted_2$6 = {
   class: "nav-item",
   role: "presentation"
 };
-const _hoisted_3$5 = ["onClick"];
-const _hoisted_4$5 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_3$6 = ["onClick"];
+const _hoisted_4$6 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */);
 const _hoisted_5$5 = { class: "sh_tab_count" };
 const _hoisted_6$4 = { class: "tab-content" };
 
-var script$8 = {
+var script$c = {
   __name: 'ShDynamicTabs',
   props: ['tabs','data'],
   setup(__props) {
@@ -5110,9 +5168,9 @@ function setTab(tab){
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    vue.createElementVNode("ul", _hoisted_1$8, [
+    vue.createElementVNode("ul", _hoisted_1$9, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab) => {
-        return (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$5, [
+        return (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$6, [
           vue.createElementVNode("button", {
             onClick: $event => (setTab(tab)),
             class: vue.normalizeClass(["nav-link", vue.unref(currentTab) === tab ? 'active':''])
@@ -5120,11 +5178,11 @@ return (_ctx, _cache) => {
             vue.createTextVNode(vue.toDisplayString(tab.label) + " ", 1 /* TEXT */),
             (tab.count || tab.tabCount)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_4$5,
+                  _hoisted_4$6,
                   vue.createElementVNode("sup", _hoisted_5$5, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
                 ], 64 /* STABLE_FRAGMENT */))
               : vue.createCommentVNode("v-if", true)
-          ], 10 /* CLASS, PROPS */, _hoisted_3$5)
+          ], 10 /* CLASS, PROPS */, _hoisted_3$6)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ]),
@@ -5139,12 +5197,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$8.__file = "src/lib/components/ShDynamicTabs.vue";
+script$c.__file = "src/lib/components/ShDynamicTabs.vue";
 
-const _hoisted_1$7 = ["href"];
+const _hoisted_1$8 = ["href"];
 
 
-var script$7 = {
+var script$b = {
   __name: 'ShModalBtn',
   props: {
   modalId: {
@@ -5161,18 +5219,18 @@ return (_ctx, _cache) => {
     "data-bs-toggle": "modal"
   }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 8 /* PROPS */, _hoisted_1$7))
+  ], 8 /* PROPS */, _hoisted_1$8))
 }
 }
 
 };
 
-script$7.__file = "src/lib/components/ShModalBtn.vue";
+script$b.__file = "src/lib/components/ShModalBtn.vue";
 
-const _hoisted_1$6 = ["href"];
+const _hoisted_1$7 = ["href"];
 
 
-var script$6 = {
+var script$a = {
   __name: 'ShCanvasBtn',
   props: {
   canvasId: {
@@ -5190,13 +5248,13 @@ return (_ctx, _cache) => {
     "data-bs-toggle": "offcanvas"
   }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 8 /* PROPS */, _hoisted_1$6))
+  ], 8 /* PROPS */, _hoisted_1$7))
 }
 }
 
 };
 
-script$6.__file = "src/lib/components/ShCanvasBtn.vue";
+script$a.__file = "src/lib/components/ShCanvasBtn.vue";
 
 const useUserStore = pinia.defineStore('user-store', {
   state: () => ({
@@ -5295,18 +5353,18 @@ const useUserStore = pinia.defineStore('user-store', {
 });
 
 const _withScopeId$1 = n => (vue.pushScopeId("data-v-0d4fa0ac"),n=n(),vue.popScopeId(),n);
-const _hoisted_1$5 = { class: "row permissions-main d-flex" };
-const _hoisted_2$4 = {
+const _hoisted_1$6 = { class: "row permissions-main d-flex" };
+const _hoisted_2$5 = {
   id: "permissions-nav",
   class: "col-md-3 d-flex align-items-center py-4"
 };
-const _hoisted_3$4 = {
+const _hoisted_3$5 = {
   key: 0,
   class: "mx-auto"
 };
-const _hoisted_4$4 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("span", { class: "spinner-grow mx-auto" }, null, -1 /* HOISTED */));
+const _hoisted_4$5 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("span", { class: "spinner-grow mx-auto" }, null, -1 /* HOISTED */));
 const _hoisted_5$4 = [
-  _hoisted_4$4
+  _hoisted_4$5
 ];
 const _hoisted_6$3 = {
   key: 1,
@@ -5335,7 +5393,7 @@ const _hoisted_17 = { class: "col-md-3" };
 const _hoisted_18 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("i", { class: "bi-check" }, null, -1 /* HOISTED */));
 
 
-var script$5 = {
+var script$9 = {
   __name: 'ManagePermissions',
   emits: ['success'],
   setup(__props, { emit }) {
@@ -5439,10 +5497,10 @@ const getPermissionStyle = permission => {
 };
 
 return (_ctx, _cache) => {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-    vue.createElementVNode("div", _hoisted_2$4, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+    vue.createElementVNode("div", _hoisted_2$5, [
       (loadingModules.value)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, _hoisted_5$4))
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, _hoisted_5$4))
         : (vue.openBlock(), vue.createElementBlock("ul", _hoisted_6$3, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modules.value, (module) => {
               return (vue.openBlock(), vue.createElementBlock("li", {
@@ -5493,7 +5551,7 @@ return (_ctx, _cache) => {
               (permissionsChanged.value)
                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
                     vue.createElementVNode("div", _hoisted_17, [
-                      vue.createVNode(script$b, {
+                      vue.createVNode(script$f, {
                         onSuccess: permissionsUpdated,
                         url: `sh-departments/department/permissions/${vue.unref(departmentId)}/${selectedModule.value}`,
                         data: {permissions: selectedPermissions.value},
@@ -5517,14 +5575,167 @@ return (_ctx, _cache) => {
 
 };
 
-script$5.__scopeId = "data-v-0d4fa0ac";
-script$5.__file = "src/lib/components/core/Departments/department/ManagePermissions.vue";
+script$9.__scopeId = "data-v-0d4fa0ac";
+script$9.__file = "src/lib/components/core/Departments/department/ManagePermissions.vue";
+
+const _hoisted_1$5 = { class: "alert alert-info" };
+const _hoisted_2$4 = /*#__PURE__*/vue.createElementVNode("span", { class: "spinner-border" }, null, -1 /* HOISTED */);
+const _hoisted_3$4 = /*#__PURE__*/vue.createElementVNode("span", null, "Loading", -1 /* HOISTED */);
+const _hoisted_4$4 = [
+  _hoisted_2$4,
+  _hoisted_3$4
+];
+
+function render$1(_ctx, _cache) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, _hoisted_4$4))
+}
+
+const script$8 = {};
+
+
+script$8.render = render$1;
+script$8.__file = "src/lib/components/popups/etc/PopupLoading.vue";
+
+function render(_ctx, _cache) {
+  return (vue.openBlock(), vue.createElementBlock("h5", null, "Error loading popup"))
+}
+
+const script$7 = {};
+
+
+script$7.render = render;
+script$7.__file = "src/lib/components/popups/etc/ErrorLoadingPopup.vue";
+
+var script$6 = {
+  __name: 'Popups',
+  setup(__props) {
+
+const route = vueRouter.useRoute();
+const popUp = vue.ref(route.meta.popUp);
+const modalId = ___default["default"].uniqueId('modal_');
+const canvasId = ___default["default"].uniqueId('canvas_');
+let PopupComponent = vue.ref(null);
+vue.ref(null);
+const router = vueRouter.useRouter();
+const position = vue.ref(null);
+const size = vue.ref(null);
+const AsyncComp =vue.ref(null);
+vue.watch(() => route.query.popup, pop => {
+  popUp.value = pop;
+  position.value = route.query.position ?? route.query.side;
+  size.value = route.query.size;
+  if (popUp.value) {
+    loadPopupComponent();
+    setTimeout(() => {
+      initPopup();
+    }, 100);
+  } else {
+    //no pop up, check if we have any unclosed backdrop
+    setTimeout(() => {
+      closeOrphanedBackdrops();
+    }, 100);
+  }
+});
+ const loadPopupComponent = ()=>{
+  const component =  route.query.comp || '';
+   PopupComponent.value = vue.defineAsyncComponent({
+     // the loader function
+     loader: () => (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(/* @vite-ignore */ `/src/views/popups/${component}Popup.vue`),
+
+     // A component to use while the async component is loading
+     loadingComponent: script$8,
+     // Delay before showing the loading component. Default: 200ms.
+     delay: 200,
+
+     // A component to use if the load fails
+     errorComponent: script$7,
+     // The error component will be displayed if a timeout is
+     // provided and exceeded. Default: Infinity.
+     timeout: 3000
+   });
+ };
+const closeOrphanedBackdrops = () => {
+  const offCanvasBackdrop = document.querySelector('.offcanvas-backdrop');
+  if (offCanvasBackdrop) {
+    if (!document.querySelector('.offcanvas.show')) {
+      offCanvasBackdrop.remove();
+    }
+  }
+  const modalBackdrop = document.querySelector('.modal-backdrop');
+  if (modalBackdrop) {
+    if (!document.querySelector('.modal.show')) {
+      modalBackdrop.remove();
+    }
+  }
+};
+const initPopup = () => {
+  if (popUp.value === 'modal') {
+    // modalButton.value.click()
+    const modal = document.getElementById(modalId);
+    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)) {
+    const offCanvas = document.getElementById(canvasId);
+    const bsOffCanvas = new bootstrap.Offcanvas(offCanvas, {});
+    bsOffCanvas.show();
+    offCanvas.addEventListener('hidden.bs.offcanvas', event => {
+      event.target.id === canvasId && goBack();
+    });
+  }
+};
+const goBack = () => {
+  if (route.matched.length) {
+    let backUrl = route.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, [
+    (popUp.value === 'modal')
+      ? (vue.openBlock(), vue.createBlock(script$l, {
+          key: 0,
+          "modal-id": vue.unref(modalId),
+          "modal-size": size.value
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(PopupComponent))
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["modal-id", "modal-size"]))
+      : vue.createCommentVNode("v-if", true),
+    (['offcanvas','canvas','offCanvas'].includes(popUp.value))
+      ? (vue.openBlock(), vue.createBlock(script$i, {
+          key: 1,
+          "canvas-id": vue.unref(canvasId),
+          "canvas-size": size.value,
+          position: position.value
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(PopupComponent)),
+            vue.createVNode(vue.unref(AsyncComp))
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["canvas-id", "canvas-size", "position"]))
+      : vue.createCommentVNode("v-if", true)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+};
+
+script$6.__file = "src/lib/components/popups/Popups.vue";
 
 const _hoisted_1$4 = ["href"];
 
 
-var script$4 = {
-  __name: 'ShPopups',
+var script$5 = {
+  __name: 'RoutePopups',
   setup(__props) {
 
 const route = vueRouter.useRoute();
@@ -5536,13 +5747,11 @@ vue.ref(null);
 const router = vueRouter.useRouter();
 const position = vue.ref(null);
 const size = vue.ref(null);
-const popups = [];
-const popupPaths = [];
 vue.watch(() => route.meta, meta => {
   popUp.value = meta.popUp ?? meta.popup;
   if (popUp.value) {
     // popups.push(meta)
-    !popupPaths.includes(route.path) && popupPaths.push(route.path) && 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);
@@ -5606,7 +5815,7 @@ return (_ctx, _cache) => {
       class: "d-none"
     }, "Open Modal", 8 /* PROPS */, _hoisted_1$4),
     (popUp.value === 'modal')
-      ? (vue.openBlock(), vue.createBlock(script$h, {
+      ? (vue.openBlock(), vue.createBlock(script$l, {
           key: 0,
           "modal-id": vue.unref(modalId),
           "modal-size": size.value
@@ -5618,7 +5827,7 @@ return (_ctx, _cache) => {
         }, 8 /* PROPS */, ["modal-id", "modal-size"]))
       : vue.createCommentVNode("v-if", true),
     (['offcanvas','canvas','offCanvas'].includes(popUp.value))
-      ? (vue.openBlock(), vue.createBlock(script$e, {
+      ? (vue.openBlock(), vue.createBlock(script$i, {
           key: 1,
           "canvas-id": vue.unref(canvasId),
           "canvas-size": size.value,
@@ -5636,6 +5845,23 @@ return (_ctx, _cache) => {
 
 };
 
+script$5.__file = "src/lib/components/popups/RoutePopups.vue";
+
+var script$4 = {
+  __name: 'ShPopups',
+  setup(__props) {
+
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createVNode(script$6),
+    vue.createVNode(script$5)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+};
+
 script$4.__file = "src/lib/components/ShPopups.vue";
 
 const _hoisted_1$3 = { class: "sh-range" };
@@ -5852,7 +6078,7 @@ return (_ctx, _cache) => {
           _hoisted_5$2,
           vue.createTextVNode(" ADD DEPARTMENT")
         ], 512 /* NEED_PATCH */),
-        vue.createVNode(script$a, {
+        vue.createVNode(script$e, {
           headers: ['id','name','description', 'created_at'],
           "end-point": "sh-departments/list",
           actions: {
@@ -5866,12 +6092,12 @@ return (_ctx, _cache) => {
       ]
     }
         }),
-        vue.createVNode(script$h, {
+        vue.createVNode(script$l, {
           "modal-id": "sh-department_modal",
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$q, {
+            vue.createVNode(script$u, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -6005,7 +6231,7 @@ return (_ctx, _cache) => {
         vue.createElementVNode("div", _hoisted_2$1, [
           _hoisted_3$1,
           vue.createElementVNode("h5", null, "Department #" + vue.toDisplayString(vue.unref(department).id) + " - " + vue.toDisplayString(vue.unref(department).name) + " Allowed Modules", 1 /* TEXT */),
-          vue.createVNode(script$a, {
+          vue.createVNode(script$e, {
             actions: {
       label: 'Actions',
       actions: [
@@ -6025,12 +6251,12 @@ return (_ctx, _cache) => {
             headers: ['id',showModule,'created_at'],
             "end-point": 'admin/departments/department/list-modules/' + id.value
           }, null, 8 /* PROPS */, ["actions", "reload", "headers", "end-point"]),
-          vue.createVNode(script$h, {
+          vue.createVNode(script$l, {
             "modal-id": "addModule",
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$q, {
+              vue.createVNode(script$u, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -6052,7 +6278,7 @@ return (_ctx, _cache) => {
             ref: permissionCanvasBtn,
             "data-bs-toggle": "offcanvas"
           }, null, 512 /* NEED_PATCH */),
-          vue.createVNode(script$e, {
+          vue.createVNode(script$i, {
             "canvas-id": "permissionsCanvas",
             position: "end enlarged",
             "canvas-title": "Module Permissions"
@@ -6167,7 +6393,7 @@ return (_ctx, _cache) => {
     : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
         (section.value === 'login')
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createVNode(script$q, {
+              vue.createVNode(script$u, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -6192,7 +6418,7 @@ return (_ctx, _cache) => {
               (vue.unref(registerSubTitle))
                 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
-              vue.createVNode(script$q, {
+              vue.createVNode(script$u, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -6239,7 +6465,7 @@ const ShFrontend = {
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
-    options.formTextInput ?? script$n;
+    options.formTextInput ?? script$r;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
@@ -6272,7 +6498,7 @@ const ShFrontend = {
       });
       options.router.addRoute({
         path: '/sh-departments/manage-permissions/:id',
-        component: script$5
+        component: script$9
       });
     }
     //filter unwanted config items from options to be put in local storage
@@ -6285,25 +6511,25 @@ const ShFrontend = {
 };
 
 exports.Countries = countries;
-exports.ManagePermissions = script$5;
-exports.ShAutoForm = script$j;
-exports.ShCanvas = script$e;
-exports.ShCanvasBtn = script$6;
-exports.ShConfirmAction = script$c;
-exports.ShDropDownForm = script$i;
-exports.ShDynamicTabs = script$8;
-exports.ShForm = script$q;
+exports.ManagePermissions = script$9;
+exports.ShAutoForm = script$n;
+exports.ShCanvas = script$i;
+exports.ShCanvasBtn = script$a;
+exports.ShConfirmAction = script$g;
+exports.ShDropDownForm = script$m;
+exports.ShDynamicTabs = script$c;
+exports.ShForm = script$u;
 exports.ShFrontend = ShFrontend;
-exports.ShModal = script$h;
-exports.ShModalBtn = script$7;
-exports.ShModalForm = script$g;
-exports.ShModalFormAuto = script$f;
-exports.ShPhone = script$s;
+exports.ShModal = script$l;
+exports.ShModalBtn = script$b;
+exports.ShModalForm = script$k;
+exports.ShModalFormAuto = script$j;
+exports.ShPhone = script$w;
 exports.ShPopups = script$4;
 exports.ShRange = script$3;
-exports.ShSilentAction = script$b;
-exports.ShTable = script$a;
-exports.ShTabs = script$9;
+exports.ShSilentAction = script$f;
+exports.ShTable = script$e;
+exports.ShTabs = script$d;
 exports.shApis = shApis;
 exports.shRepo = shRepo;
 exports.shStorage = ShStorage;