@iankibetsh/shframework 5.7.9 → 5.8.1

package/dist/library.js

@@ -9,8 +9,8 @@ var bootstrap = require('bootstrap');
 var NProgress = require('nprogress');
 var vue = require('vue');
 var _ = require('lodash');
-var pinia = require('pinia');
 var vueRouter = require('vue-router');
+var pinia = require('pinia');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4494,6 +4494,108 @@ return (_ctx, _cache) => {
 
 script$l.__file = "src/lib/components/ShCanvas.vue";
 
+const useUserStore = pinia.defineStore('user-store', {
+  state: () => ({
+    user: null,
+    role: null,
+    permissions: null,
+    menus: [],
+    loggedOut: false
+  }),
+  actions: {
+    setUser (defaultEndpoint) {
+      let user = null;
+      try {
+         user = shStorage.getItem('user') ? shStorage.getItem('user') : null;
+      } catch (error) {
+        user= null;
+      }
+      if(typeof user !== 'object'){
+        user = null;
+      }
+      if (user ) {
+        user.isAllowedTo = function (slug) {
+          if (this.permissions) {
+            let permissions = [];
+            if (typeof this.permissions === 'string') {
+              permissions = this.permissions;
+            } else {
+              permissions = this.permissions;
+            }
+            return permissions.includes(slug)
+          }
+          return false
+        };
+      }
+      this.user = user;
+      const userEndpoint = defaultEndpoint ?? vue.inject('userEndpoint','auth/user') ?? 'auth/user?defaults=1';
+
+      shApis.doGet(userEndpoint).then(res => {
+        let user = res.data.user;
+        if (typeof(user) === 'undefined') {
+           user = res.data;
+        }
+        shStorage.setItem('user',user);
+        user.signOut = this.signOut;
+        user.logout = this.signOut;
+        user.logOut = this.signOut;
+        user.isAllowedTo = function (slug) {
+          if(!slug){
+            return true
+          }
+          if (this.permissions) {
+            let permissions = [];
+            if (typeof this.permissions === 'string') {
+              permissions = this.permissions;
+            } else {
+              permissions = this.permissions;
+            }
+            return permissions.includes(slug)
+          }
+          return false
+        };
+        user.can = user.isAllowedTo;
+        this.user = user;
+      }).catch((reason) => {
+        if (reason.response && reason.response.status) {
+          if(reason.response.status === 401) {
+            shStorage.setItem('user',null);
+            this.user = null;
+          }
+          this.loggedOut = true;
+        }
+      });
+      if (this.user) {
+        if (typeof this.user.permissions === 'string') {
+          this.permissions = this.user.permissions;
+        } else {
+          this.permissions = this.user.permissions;
+        }
+      }
+      const timeNow = luxon.DateTime.now().toISO();
+      shStorage.setItem('session_start',timeNow);
+    },
+    signOut () {
+      shRepo.signOutUser();
+    },
+    logOut () {
+      this.signOut();
+    },
+    getUser () {
+      this.setUser();
+    },
+    setAccessToken (accessToken) {
+      shStorage.setItem('access_token', accessToken);
+      this.setUser();
+    }
+  },
+  getters: {
+    userId (state) {
+      return state.user === null ? null:state.user.id
+    }
+  }
+});
+
 const _hoisted_1$g = { class: "callout callout-info" };
 
 function render$2(_ctx, _cache) {
@@ -4702,108 +4804,6 @@ return (_ctx, _cache) => {
 
 script$i.__file = "src/lib/components/ShSilentAction.vue";
 
-const useUserStore = pinia.defineStore('user-store', {
-  state: () => ({
-    user: null,
-    role: null,
-    permissions: null,
-    menus: [],
-    loggedOut: false
-  }),
-  actions: {
-    setUser (defaultEndpoint) {
-      let user = null;
-      try {
-         user = shStorage.getItem('user') ? shStorage.getItem('user') : null;
-      } catch (error) {
-        user= null;
-      }
-      if(typeof user !== 'object'){
-        user = null;
-      }
-      if (user ) {
-        user.isAllowedTo = function (slug) {
-          if (this.permissions) {
-            let permissions = [];
-            if (typeof this.permissions === 'string') {
-              permissions = this.permissions;
-            } else {
-              permissions = this.permissions;
-            }
-            return permissions.includes(slug)
-          }
-          return false
-        };
-      }
-      this.user = user;
-      const userEndpoint = defaultEndpoint ?? vue.inject('userEndpoint','auth/user') ?? 'auth/user?defaults=1';
-
-      shApis.doGet(userEndpoint).then(res => {
-        let user = res.data.user;
-        if (typeof(user) === 'undefined') {
-           user = res.data;
-        }
-        shStorage.setItem('user',user);
-        user.signOut = this.signOut;
-        user.logout = this.signOut;
-        user.logOut = this.signOut;
-        user.isAllowedTo = function (slug) {
-          if(!slug){
-            return true
-          }
-          if (this.permissions) {
-            let permissions = [];
-            if (typeof this.permissions === 'string') {
-              permissions = this.permissions;
-            } else {
-              permissions = this.permissions;
-            }
-            return permissions.includes(slug)
-          }
-          return false
-        };
-        user.can = user.isAllowedTo;
-        this.user = user;
-      }).catch((reason) => {
-        if (reason.response && reason.response.status) {
-          if(reason.response.status === 401) {
-            shStorage.setItem('user',null);
-            this.user = null;
-          }
-          this.loggedOut = true;
-        }
-      });
-      if (this.user) {
-        if (typeof this.user.permissions === 'string') {
-          this.permissions = this.user.permissions;
-        } else {
-          this.permissions = this.user.permissions;
-        }
-      }
-      const timeNow = luxon.DateTime.now().toISO();
-      shStorage.setItem('session_start',timeNow);
-    },
-    signOut () {
-      shRepo.signOutUser();
-    },
-    logOut () {
-      this.signOut();
-    },
-    getUser () {
-      this.setUser();
-    },
-    setAccessToken (accessToken) {
-      shStorage.setItem('access_token', accessToken);
-      this.setUser();
-    }
-  },
-  getters: {
-    userId (state) {
-      return state.user === null ? null:state.user.id
-    }
-  }
-});
-
 const _hoisted_1$f = ["href"];
 const _hoisted_2$c = ["title"];
 
@@ -4820,6 +4820,9 @@ const props = __props;
 
 const url = vue.ref(props.action.path || props.action.url || props.action.link);
 
+const hasAction = vue.computed(() => !!(props.action.callback || props.action.callBack || props.action.emits));
+const actionValue = vue.computed(() => props.action.callback || props.action.callBack || props.action.emits);
+
 vue.onMounted(()=>{
   if(!url.value) {
     url.value = '';
@@ -4922,7 +4925,7 @@ return (_ctx, _cache) => {
                           : vue.createCommentVNode("v-if", true),
                         vue.createTextVNode(" " + vue.toDisplayString(__props.action.label), 1 /* TEXT */)
                       ], 10 /* CLASS, PROPS */, _hoisted_1$f))
-                    : (__props.action.emits)
+                    : (hasAction.value)
                       ? (vue.openBlock(), vue.createElementBlock("span", {
                           key: 3,
                           title: __props.action.title,
@@ -4933,7 +4936,7 @@ return (_ctx, _cache) => {
             },
             __props.actionClass
         ]),
-                          onClick: _cache[2] || (_cache[2] = $event => (doEmitAction(__props.action.emits, __props.record)))
+                          onClick: _cache[2] || (_cache[2] = $event => (doEmitAction(actionValue.value, __props.record)))
                         }, [
                           (__props.action.icon)
                             ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -4943,7 +4946,7 @@ return (_ctx, _cache) => {
                             : vue.createCommentVNode("v-if", true),
                           vue.createTextVNode(" " + vue.toDisplayString(__props.action.label), 1 /* TEXT */)
                         ], 10 /* CLASS, PROPS */, _hoisted_2$c))
-                      : (!__props.action.emits)
+                      : (!hasAction.value)
                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                             key: 4,
                             title: __props.action.title,
@@ -5498,89 +5501,104 @@ const _hoisted_12$1 = {
   class: "alert alert-danger error-loading"
 };
 const _hoisted_13$1 = { class: "sh-thead" };
-const _hoisted_14$1 = { key: 0 };
-const _hoisted_15$1 = ["onClick"];
+const _hoisted_14$1 = {
+  key: 0,
+  style: {"width":"40px"}
+};
+const _hoisted_15$1 = { key: 0 };
 const _hoisted_16 = ["onClick"];
 const _hoisted_17 = ["onClick"];
 const _hoisted_18 = ["onClick"];
-const _hoisted_19 = {
-  key: 0,
+const _hoisted_19 = ["onClick"];
+const _hoisted_20 = {
+  key: 1,
   class: "text-capitalize"
 };
-const _hoisted_20 = { class: "sh-tbody" };
-const _hoisted_21 = {
+const _hoisted_21 = { class: "sh-tbody" };
+const _hoisted_22 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_22 = ["colspan"];
-const _hoisted_23 = {
+const _hoisted_23 = ["colspan"];
+const _hoisted_24 = {
   key: 1,
   class: "text-center alert alert-danger"
 };
-const _hoisted_24 = ["colspan"];
-const _hoisted_25 = {
+const _hoisted_25 = ["colspan"];
+const _hoisted_26 = {
   key: 2,
   class: "no_records"
 };
-const _hoisted_26 = ["colspan"];
-const _hoisted_27 = ["onClick"];
-const _hoisted_28 = { key: 0 };
-const _hoisted_29 = { key: 1 };
-const _hoisted_30 = {
+const _hoisted_27 = ["colspan"];
+const _hoisted_28 = ["onClick"];
+const _hoisted_29 = ["value", "checked", "onChange"];
+const _hoisted_30 = { key: 0 };
+const _hoisted_31 = { key: 1 };
+const _hoisted_32 = {
   key: 2,
   class: "text-success fw-bold"
 };
-const _hoisted_31 = { key: 3 };
-const _hoisted_32 = ["innerHTML"];
-const _hoisted_33 = ["innerHTML"];
+const _hoisted_33 = { key: 3 };
 const _hoisted_34 = ["innerHTML"];
 const _hoisted_35 = ["innerHTML"];
 const _hoisted_36 = ["innerHTML"];
 const _hoisted_37 = ["innerHTML"];
-const _hoisted_38 = {
-  key: 0,
+const _hoisted_38 = ["innerHTML"];
+const _hoisted_39 = ["innerHTML"];
+const _hoisted_40 = {
+  key: 1,
   style: {"white-space":"nowrap"}
 };
-const _hoisted_39 = { key: 5 };
-const _hoisted_40 = {
+const _hoisted_41 = { key: 5 };
+const _hoisted_42 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_41 = { key: 1 };
-const _hoisted_42 = {
+const _hoisted_43 = { key: 1 };
+const _hoisted_44 = {
   key: 2,
   class: "mobile-list-items"
 };
-const _hoisted_43 = ["onClick"];
-const _hoisted_44 = {
+const _hoisted_45 = ["onClick"];
+const _hoisted_46 = { class: "form-check" };
+const _hoisted_47 = ["id", "checked", "onChange"];
+const _hoisted_48 = ["for"];
+const _hoisted_49 = {
   key: 0,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_45 = {
+const _hoisted_50 = {
   key: 1,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_46 = {
+const _hoisted_51 = {
   key: 2,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_47 = {
+const _hoisted_52 = {
   key: 3,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_48 = { key: 1 };
-const _hoisted_49 = {
+const _hoisted_53 = { key: 1 };
+const _hoisted_54 = {
   key: 2,
   class: "text-primary fw-bold"
 };
-const _hoisted_50 = { key: 3 };
-const _hoisted_51 = ["innerHTML"];
-const _hoisted_52 = ["innerHTML"];
-const _hoisted_53 = ["innerHTML"];
-const _hoisted_54 = ["innerHTML"];
-const _hoisted_55 = ["innerHTML"];
+const _hoisted_55 = { key: 3 };
 const _hoisted_56 = ["innerHTML"];
-const _hoisted_57 = { key: 0 };
+const _hoisted_57 = ["innerHTML"];
+const _hoisted_58 = ["innerHTML"];
+const _hoisted_59 = ["innerHTML"];
+const _hoisted_60 = ["innerHTML"];
+const _hoisted_61 = ["innerHTML"];
+const _hoisted_62 = { key: 1 };
+const _hoisted_63 = {
+  key: 8,
+  class: "sh-multi-actions-bar shadow-lg border rounded p-3 bg-white d-flex justify-content-between align-items-center animate__animated animate__slideInUp"
+};
+const _hoisted_64 = { class: "badge bg-primary rounded-pill me-2" };
+const _hoisted_65 = { class: "d-flex gap-2" };
+const _hoisted_66 = ["onClick"];
 
 // --- Props / Emits
 
@@ -5615,7 +5633,8 @@ var script$d = {
   paginationStyle: [String, null],
   hasRange: {type: Boolean, default: false},
   selectedRange: [Object, null],
-  noRecordsMessage: [String, null]
+  noRecordsMessage: [String, null],
+  multiActions: {type: Array, default: () => []}
 },
   emits: ['rowSelected', 'dataReloaded', 'dataLoaded'],
   setup(__props, { emit: __emit }) {
@@ -5654,6 +5673,9 @@ const to = vue.ref(null);
 const period = vue.ref(null);
 const lastId = vue.ref(null);
 
+const selectedItems = vue.ref([]);
+const selectAll = vue.ref(false);
+
 // Responsive width
 const windowWidth = vue.ref(typeof window !== 'undefined' ? window.innerWidth : 1024);
 const handleResize = () => (windowWidth.value = window.innerWidth);
@@ -5719,6 +5741,15 @@ const getSlotName = (key) => {
   return ''
 };
 
+const {user} = pinia.storeToRefs(useUserStore());
+
+const activeMultiActions = vue.computed(() => {
+  return props.multiActions.filter(action => {
+    if (!action.permission) return true
+    return user.value.isAllowedTo(action.permission)
+  })
+});
+
 const cleanColumn = (col) => {
   const newCol = {...col};
   delete newCol.component;
@@ -5951,6 +5982,36 @@ const reloadData = (newPage, append) => {
   });
 };
 
+const toggleSelectAll = (event) => {
+  if (event.target.checked) {
+    selectedItems.value = records.value.map(r => r.id);
+  } else {
+    selectedItems.value = [];
+  }
+};
+
+const toggleSelectItem = (id) => {
+  const index = selectedItems.value.indexOf(id);
+  if (index > -1) {
+    selectedItems.value.splice(index, 1);
+  } else {
+    selectedItems.value.push(id);
+  }
+};
+
+const runMultiAction = (action) => {
+  const selectedRecords = records.value.filter(r => selectedItems.value.includes(r.id));
+  if (typeof action.callback === 'function') {
+    action.callback(selectedRecords);
+  }
+  selectedItems.value = [];
+};
+
+vue.watch(selectedItems, (newVal) => {
+  selectAll.value = newVal.length === records.value.length && records.value.length > 0;
+}, {deep: true});
+
+
 // --- Watches
 vue.watch(() => props.hideIds, (newVal) => {
   if (Array.isArray(newVal) && Array.isArray(records.value)) {
@@ -5979,16 +6040,16 @@ return (_ctx, _cache) => {
           }, [
             (!downloading.value)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _cache[4] || (_cache[4] = vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* CACHED */)),
-                  _cache[5] || (_cache[5] = vue.createTextVNode(" Export ", -1 /* CACHED */))
+                  _cache[8] || (_cache[8] = vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* CACHED */)),
+                  _cache[9] || (_cache[9] = vue.createTextVNode(" Export ", -1 /* CACHED */))
                 ], 64 /* STABLE_FRAGMENT */))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  _cache[6] || (_cache[6] = vue.createElementVNode("span", {
+                  _cache[10] || (_cache[10] = vue.createElementVNode("span", {
                     class: "spinner-border spinner-border-sm",
                     role: "status",
                     "aria-hidden": "true"
                   }, null, -1 /* CACHED */)),
-                  _cache[7] || (_cache[7] = vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* CACHED */))
+                  _cache[11] || (_cache[11] = vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* CACHED */))
                 ], 64 /* STABLE_FRAGMENT */))
           ], 8 /* PROPS */, _hoisted_3$6)
         ]))
@@ -6020,7 +6081,7 @@ return (_ctx, _cache) => {
                     }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
                       [vue.vModelCheckbox, exactMatch.value]
                     ]),
-                    _cache[8] || (_cache[8] = vue.createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* CACHED */))
+                    _cache[12] || (_cache[12] = vue.createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* CACHED */))
                   ]))
                 : vue.createCommentVNode("v-if", true)
             ], 2 /* CLASS */),
@@ -6038,7 +6099,7 @@ return (_ctx, _cache) => {
     (hasDefaultSlot.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
           (loading.value === 'loading')
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [...(_cache[9] || (_cache[9] = [
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [...(_cache[13] || (_cache[13] = [
                 vue.createElementVNode("div", {
                   class: "spinner-border",
                   role: "status"
@@ -6063,7 +6124,7 @@ return (_ctx, _cache) => {
       : (hasRecordsSlot.value)
         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
             (loading.value === 'loading' && !__props.cacheKey)
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [...(_cache[10] || (_cache[10] = [
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [...(_cache[14] || (_cache[14] = [
                   vue.createElementVNode("div", {
                     class: "spinner-border",
                     role: "status"
@@ -6081,7 +6142,7 @@ return (_ctx, _cache) => {
                   (!records.value || records.value.length === 0)
                     ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(noRecordsComponent)), { key: 0 }, {
                         default: vue.withCtx(() => [
-                          _cache[11] || (_cache[11] = vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */)),
+                          _cache[15] || (_cache[15] = vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */)),
                           vue.createTextVNode(" " + vue.toDisplayString(__props.noRecordsMessage ?? 'No records found'), 1 /* TEXT */)
                         ]),
                         _: 1 /* STABLE */
@@ -6098,50 +6159,62 @@ return (_ctx, _cache) => {
             }, [
               vue.createElementVNode("thead", _hoisted_13$1, [
                 vue.createElementVNode("tr", null, [
+                  (activeMultiActions.value.length > 0)
+                    ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_14$1, [
+                        vue.withDirectives(vue.createElementVNode("input", {
+                          type: "checkbox",
+                          class: "form-check-input",
+                          "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((selectAll).value = $event)),
+                          onChange: toggleSelectAll
+                        }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
+                          [vue.vModelCheckbox, selectAll.value]
+                        ])
+                      ]))
+                    : vue.createCommentVNode("v-if", true),
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableHeaders.value, (title) => {
                     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: title }, [
                       (showColumn(title))
-                        ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_14$1, [
+                        ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_15$1, [
                             (typeof title === 'string')
                               ? (vue.openBlock(), vue.createElementBlock("a", {
                                   key: 0,
                                   class: "text-capitalize",
                                   onClick: $event => (changeKey('order_by', title))
-                                }, vue.toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_15$1))
+                                }, vue.toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_16))
                               : (typeof title === 'object')
                                 ? (vue.openBlock(), vue.createElementBlock("a", {
                                     key: 1,
                                     class: "text-capitalize",
                                     onClick: $event => (changeKey('order_by', title.key))
-                                  }, vue.toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_16))
+                                  }, vue.toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_17))
                                 : (typeof title === 'function')
                                   ? (vue.openBlock(), vue.createElementBlock("a", {
                                       key: 2,
                                       class: "text-capitalize",
                                       onClick: $event => (changeKey('order_by', title(null)))
-                                    }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_17))
+                                    }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_18))
                                   : (typeof title !== 'undefined')
                                     ? (vue.openBlock(), vue.createElementBlock("a", {
                                         key: 3,
                                         class: "text-capitalize",
                                         onClick: $event => (changeKey('order_by', title))
-                                      }, vue.toDisplayString(String(getLabel(title))), 9 /* TEXT, PROPS */, _hoisted_18))
+                                      }, vue.toDisplayString(String(getLabel(title))), 9 /* TEXT, PROPS */, _hoisted_19))
                                     : vue.createCommentVNode("v-if", true)
                           ]))
                         : vue.createCommentVNode("v-if", true)
                     ], 64 /* STABLE_FRAGMENT */))
                   }), 128 /* KEYED_FRAGMENT */)),
                   (__props.actions)
-                    ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_19, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
+                    ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_20, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
                     : vue.createCommentVNode("v-if", true)
                 ])
               ]),
-              vue.createElementVNode("tbody", _hoisted_20, [
+              vue.createElementVNode("tbody", _hoisted_21, [
                 (loading.value === 'loading')
-                  ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [
+                  ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_22, [
                       vue.createElementVNode("td", {
-                        colspan: tableHeaders.value.length
-                      }, [...(_cache[12] || (_cache[12] = [
+                        colspan: activeMultiActions.value.length > 0 ? tableHeaders.value.length + 1 : tableHeaders.value.length
+                      }, [...(_cache[16] || (_cache[16] = [
                         vue.createElementVNode("div", { class: "text-center" }, [
                           vue.createElementVNode("div", {
                             class: "spinner-border",
@@ -6150,24 +6223,24 @@ return (_ctx, _cache) => {
                             vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                           ])
                         ], -1 /* CACHED */)
-                      ]))], 8 /* PROPS */, _hoisted_22)
+                      ]))], 8 /* PROPS */, _hoisted_23)
                     ]))
                   : (loading.value === 'error')
-                    ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_23, [
+                    ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_24, [
                         vue.createElementVNode("td", {
-                          colspan: tableHeaders.value.length
-                        }, vue.toDisplayString(loading_error.value), 9 /* TEXT, PROPS */, _hoisted_24)
+                          colspan: activeMultiActions.value.length > 0 ? tableHeaders.value.length + 1 : tableHeaders.value.length
+                        }, vue.toDisplayString(loading_error.value), 9 /* TEXT, PROPS */, _hoisted_25)
                       ]))
                     : (records.value.length === 0)
-                      ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_25, [
+                      ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_26, [
                           vue.createElementVNode("td", {
-                            colspan: __props.actions ? tableHeaders.value.length + 1 : tableHeaders.value.length
-                          }, [...(_cache[13] || (_cache[13] = [
+                            colspan: __props.actions ? tableHeaders.value.length + (activeMultiActions.value.length > 0 ? 2:1) : tableHeaders.value.length + (activeMultiActions.value.length > 0 ? 1:0)
+                          }, [...(_cache[17] || (_cache[17] = [
                             vue.createElementVNode("div", { class: "text-center bg-primary-light px-2 py-1 rounded no_records_div" }, [
                               vue.createElementVNode("i", { class: "bi-info-circle" }),
                               vue.createTextVNode(" No records found ")
                             ], -1 /* CACHED */)
-                          ]))], 8 /* PROPS */, _hoisted_26)
+                          ]))], 8 /* PROPS */, _hoisted_27)
                         ]))
                       : (loading.value === 'done')
                         ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(records.value, (record, index) => {
@@ -6176,10 +6249,24 @@ return (_ctx, _cache) => {
                               class: vue.normalizeClass(record.class),
                               onClick: $event => (rowSelected(record))
                             }, [
+                              (activeMultiActions.value.length > 0)
+                                ? (vue.openBlock(), vue.createElementBlock("td", {
+                                    key: 0,
+                                    onClick: _cache[5] || (_cache[5] = vue.withModifiers(() => {}, ["stop"]))
+                                  }, [
+                                    vue.createElementVNode("input", {
+                                      type: "checkbox",
+                                      class: "form-check-input",
+                                      value: record.id,
+                                      checked: selectedItems.value.includes(record.id),
+                                      onChange: $event => (toggleSelectItem(record.id))
+                                    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_29)
+                                  ]))
+                                : vue.createCommentVNode("v-if", true),
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableHeaders.value, (key) => {
                                 return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: key }, [
                                   (showColumn(key))
-                                    ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_28, [
+                                    ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_30, [
                                         vue.renderSlot(_ctx.$slots, getSlotName(key), {
                                           row: record,
                                           index: index
@@ -6193,31 +6280,31 @@ return (_ctx, _cache) => {
                                                 innerHTML: getData(record, key)
                                               }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
                                             : (getFieldType(key) === 'numeric')
-                                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_29, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_31, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
                                               : (getFieldType(key) === 'money')
-                                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_30, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_32, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
                                                 : (getFieldType(key) === 'date')
-                                                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_31, vue.toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
+                                                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_33, vue.toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
                                                   : (typeof key === 'string')
                                                     ? (vue.openBlock(), vue.createElementBlock("span", {
                                                         key: 4,
                                                         innerHTML: getData(record, key)
-                                                      }, null, 8 /* PROPS */, _hoisted_32))
+                                                      }, null, 8 /* PROPS */, _hoisted_34))
                                                     : (typeof key === 'function')
                                                       ? (vue.openBlock(), vue.createElementBlock("span", {
                                                           key: 5,
                                                           innerHTML: key(record, index)
-                                                        }, null, 8 /* PROPS */, _hoisted_33))
+                                                        }, null, 8 /* PROPS */, _hoisted_35))
                                                       : (typeof key === 'object' && key.callBack)
                                                         ? (vue.openBlock(), vue.createElementBlock("span", {
                                                             key: 6,
                                                             innerHTML: key.callBack(record, index)
-                                                          }, null, 8 /* PROPS */, _hoisted_34))
+                                                          }, null, 8 /* PROPS */, _hoisted_36))
                                                         : (typeof key === 'object' && key.callback)
                                                           ? (vue.openBlock(), vue.createElementBlock("span", {
                                                               key: 7,
                                                               innerHTML: key.callback(record, index)
-                                                            }, null, 8 /* PROPS */, _hoisted_35))
+                                                            }, null, 8 /* PROPS */, _hoisted_37))
                                                           : (typeof key === 'object' && key.component)
                                                             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(key.component), vue.mergeProps({
                                                                 key: 8,
@@ -6227,18 +6314,18 @@ return (_ctx, _cache) => {
                                                               ? (vue.openBlock(), vue.createElementBlock("span", {
                                                                   key: 9,
                                                                   innerHTML: getData(record, key.key ?? key.field)
-                                                                }, null, 8 /* PROPS */, _hoisted_36))
+                                                                }, null, 8 /* PROPS */, _hoisted_38))
                                                               : (vue.openBlock(), vue.createElementBlock("span", {
                                                                   key: 10,
                                                                   innerHTML: getData(record, key[0])
-                                                                }, null, 8 /* PROPS */, _hoisted_37))
+                                                                }, null, 8 /* PROPS */, _hoisted_39))
                                         ])
                                       ]))
                                     : vue.createCommentVNode("v-if", true)
                                 ], 64 /* STABLE_FRAGMENT */))
                               }), 128 /* KEYED_FRAGMENT */)),
                               (__props.actions)
-                                ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_38, [
+                                ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_40, [
                                     vue.createVNode(script$g, {
                                       emitAction: doEmitAction,
                                       actions: __props.actions,
@@ -6246,14 +6333,14 @@ return (_ctx, _cache) => {
                                     }, null, 8 /* PROPS */, ["actions", "record"])
                                   ]))
                                 : vue.createCommentVNode("v-if", true)
-                            ], 10 /* CLASS, PROPS */, _hoisted_27))
+                            ], 10 /* CLASS, PROPS */, _hoisted_28))
                           }), 128 /* KEYED_FRAGMENT */))
                         : vue.createCommentVNode("v-if", true)
               ])
             ], 2 /* CLASS */))
-          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_39, [
+          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
               (loading.value === 'loading')
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [...(_cache[14] || (_cache[14] = [
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, [...(_cache[18] || (_cache[18] = [
                     vue.createElementVNode("div", { class: "text-center" }, [
                       vue.createElementVNode("div", {
                         class: "spinner-border",
@@ -6264,17 +6351,38 @@ return (_ctx, _cache) => {
                     ], -1 /* CACHED */)
                   ]))]))
                 : (loading.value === 'error')
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_43, [
                       vue.createElementVNode("span", null, vue.toDisplayString(loading_error.value), 1 /* TEXT */)
                     ]))
                   : (loading.value === 'done')
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_42, [
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_44, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (record, index) => {
                           return (vue.openBlock(), vue.createElementBlock("div", {
                             key: record.id,
                             class: "single-mobile-req bg-light p-3",
                             onClick: $event => (rowSelected(record))
                           }, [
+                            (activeMultiActions.value.length > 0)
+                              ? (vue.openBlock(), vue.createElementBlock("div", {
+                                  key: 0,
+                                  class: "mb-2",
+                                  onClick: _cache[6] || (_cache[6] = vue.withModifiers(() => {}, ["stop"]))
+                                }, [
+                                  vue.createElementVNode("div", _hoisted_46, [
+                                    vue.createElementVNode("input", {
+                                      type: "checkbox",
+                                      class: "form-check-input",
+                                      id: 'mobile-check-'+record.id,
+                                      checked: selectedItems.value.includes(record.id),
+                                      onChange: $event => (toggleSelectItem(record.id))
+                                    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_47),
+                                    vue.createElementVNode("label", {
+                                      class: "form-check-label",
+                                      for: 'mobile-check-'+record.id
+                                    }, "Select Item", 8 /* PROPS */, _hoisted_48)
+                                  ])
+                                ]))
+                              : vue.createCommentVNode("v-if", true),
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableHeaders.value, (key) => {
                               return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                 key: key[0]
@@ -6282,12 +6390,12 @@ return (_ctx, _cache) => {
                                 (showColumn(key))
                                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                       (typeof key === 'string' )
-                                        ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_44, vue.toDisplayString(getLabel(key)), 1 /* TEXT */))
+                                        ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_49, vue.toDisplayString(getLabel(key)), 1 /* TEXT */))
                                         : (typeof key === 'function')
-                                          ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_45, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
+                                          ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_50, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
                                           : (typeof key === 'object')
-                                            ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_46, vue.toDisplayString(getLabel(key)), 1 /* TEXT */))
-                                            : (vue.openBlock(), vue.createElementBlock("p", _hoisted_47, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
+                                            ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_51, vue.toDisplayString(getLabel(key)), 1 /* TEXT */))
+                                            : (vue.openBlock(), vue.createElementBlock("p", _hoisted_52, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
                                       vue.createElementVNode("span", null, [
                                         vue.renderSlot(_ctx.$slots, getSlotName(key), {
                                           row: record,
@@ -6301,26 +6409,26 @@ return (_ctx, _cache) => {
                                                 innerHTML: getData(record, key)
                                               }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
                                             : (getFieldType(key) === 'numeric')
-                                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_48, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_53, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
                                               : (getFieldType(key) === 'money')
-                                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_49, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_54, vue.toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
                                                 : (getFieldType(key) === 'date')
-                                                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_50, vue.toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
+                                                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_55, vue.toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
                                                   : (typeof key === 'string')
                                                     ? (vue.openBlock(), vue.createElementBlock("span", {
                                                         key: 4,
                                                         innerHTML: getData(record, key)
-                                                      }, null, 8 /* PROPS */, _hoisted_51))
+                                                      }, null, 8 /* PROPS */, _hoisted_56))
                                                     : (typeof key === 'object' && key.callBack)
                                                       ? (vue.openBlock(), vue.createElementBlock("span", {
                                                           key: 5,
                                                           innerHTML: key.callBack(record, index)
-                                                        }, null, 8 /* PROPS */, _hoisted_52))
+                                                        }, null, 8 /* PROPS */, _hoisted_57))
                                                       : (typeof key === 'object' && key.callback)
                                                         ? (vue.openBlock(), vue.createElementBlock("span", {
                                                             key: 6,
                                                             innerHTML: key.callback(record, index)
-                                                          }, null, 8 /* PROPS */, _hoisted_53))
+                                                          }, null, 8 /* PROPS */, _hoisted_58))
                                                         : (typeof key === 'object' && key.component)
                                                           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(key.component), vue.mergeProps({
                                                               key: 7,
@@ -6330,25 +6438,25 @@ return (_ctx, _cache) => {
                                                             ? (vue.openBlock(), vue.createElementBlock("span", {
                                                                 key: 8,
                                                                 innerHTML: getData(record, key.key ?? key.field)
-                                                              }, null, 8 /* PROPS */, _hoisted_54))
+                                                              }, null, 8 /* PROPS */, _hoisted_59))
                                                             : (typeof key === 'function')
                                                               ? (vue.openBlock(), vue.createElementBlock("span", {
                                                                   key: 9,
                                                                   innerHTML: key(record, index)
-                                                                }, null, 8 /* PROPS */, _hoisted_55))
+                                                                }, null, 8 /* PROPS */, _hoisted_60))
                                                               : (vue.openBlock(), vue.createElementBlock("span", {
                                                                   key: 10,
                                                                   innerHTML: getData(record, key[0])
-                                                                }, null, 8 /* PROPS */, _hoisted_56))
+                                                                }, null, 8 /* PROPS */, _hoisted_61))
                                         ])
                                       ])
                                     ], 64 /* STABLE_FRAGMENT */))
                                   : vue.createCommentVNode("v-if", true),
-                                _cache[15] || (_cache[15] = vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* CACHED */))
+                                _cache[19] || (_cache[19] = vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* CACHED */))
                               ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */)),
                             (__props.actions)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_57, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_62, [
                                   vue.createVNode(script$g, {
                                     emitAction: doEmitAction,
                                     actions: __props.actions,
@@ -6356,7 +6464,7 @@ return (_ctx, _cache) => {
                                   }, null, 8 /* PROPS */, ["actions", "record"])
                                 ]))
                               : vue.createCommentVNode("v-if", true)
-                          ], 8 /* PROPS */, _hoisted_43))
+                          ], 8 /* PROPS */, _hoisted_45))
                         }), 128 /* KEYED_FRAGMENT */))
                       ]))
                     : vue.createCommentVNode("v-if", true)
@@ -6400,6 +6508,35 @@ return (_ctx, _cache) => {
               : vue.createCommentVNode("v-if", true)
           ], 64 /* STABLE_FRAGMENT */))
         }), 128 /* KEYED_FRAGMENT */))
+      : vue.createCommentVNode("v-if", true),
+    (selectedItems.value.length > 0 && activeMultiActions.value.length > 0)
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_63, [
+          vue.createElementVNode("div", null, [
+            vue.createElementVNode("span", _hoisted_64, vue.toDisplayString(selectedItems.value.length), 1 /* TEXT */),
+            _cache[20] || (_cache[20] = vue.createTextVNode(" items selected ", -1 /* CACHED */))
+          ]),
+          vue.createElementVNode("div", _hoisted_65, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(activeMultiActions.value, (action) => {
+              return (vue.openBlock(), vue.createElementBlock("button", {
+                key: action.label,
+                class: vue.normalizeClass(["btn btn-sm", action.class ?? 'btn-outline-primary']),
+                onClick: $event => (runMultiAction(action))
+              }, [
+                (action.icon)
+                  ? (vue.openBlock(), vue.createElementBlock("i", {
+                      key: 0,
+                      class: vue.normalizeClass(action.icon)
+                    }, null, 2 /* CLASS */))
+                  : vue.createCommentVNode("v-if", true),
+                vue.createTextVNode(" " + vue.toDisplayString(action.label), 1 /* TEXT */)
+              ], 10 /* CLASS, PROPS */, _hoisted_66))
+            }), 128 /* KEYED_FRAGMENT */)),
+            vue.createElementVNode("button", {
+              class: "btn btn-sm btn-light",
+              onClick: _cache[7] || (_cache[7] = $event => (selectedItems.value = []))
+            }, "Cancel")
+          ])
+        ]))
       : vue.createCommentVNode("v-if", true)
   ]))
 }