@iankibetsh/shframework 5.8.0 → 5.8.3

package/dist/library.mjs

@@ -5,8 +5,8 @@ import { Modal, Offcanvas } from 'bootstrap';
 import NProgress from 'nprogress';
 import { ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, unref, vModelSelect, vModelText, normalizeClass, createBlock, resolveDynamicComponent, resolveComponent, inject, useTemplateRef, mergeProps, vShow, renderSlot, normalizeStyle, Teleport, createVNode, withCtx, useSlots, onBeforeUnmount, reactive, vModelCheckbox, withModifiers, resolveDirective, shallowRef, markRaw, isRef } from 'vue';
 import _ from 'lodash';
-import { defineStore, storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
+import { defineStore, storeToRefs } from 'pinia';
 
 function setItem (key, value) {
   let toStore = value;
@@ -4483,6 +4483,108 @@ return (_ctx, _cache) => {
 
 script$l.__file = "src/lib/components/ShCanvas.vue";
 
+const useUserStore = 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 ?? 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 = 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) {
@@ -4691,108 +4793,6 @@ return (_ctx, _cache) => {
 
 script$i.__file = "src/lib/components/ShSilentAction.vue";
 
-const useUserStore = 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 ?? 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 = 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"];
 
@@ -5482,112 +5482,125 @@ const _hoisted_10$2 = {
   class: "alert alert-danger"
 };
 const _hoisted_11$1 = {
+  key: 1,
+  class: "text-center bg-primary-light px-2 py-1 rounded no_records_div"
+};
+const _hoisted_12$1 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_12$1 = {
+const _hoisted_13$1 = {
   key: 1,
   class: "alert alert-danger error-loading"
 };
-const _hoisted_13$1 = { class: "sh-thead" };
-const _hoisted_14$1 = {
+const _hoisted_14$1 = { class: "sh-thead" };
+const _hoisted_15$1 = {
   key: 0,
   style: {"width":"40px"}
 };
-const _hoisted_15$1 = { key: 0 };
-const _hoisted_16 = ["onClick"];
+const _hoisted_16 = { key: 0 };
 const _hoisted_17 = ["onClick"];
 const _hoisted_18 = ["onClick"];
 const _hoisted_19 = ["onClick"];
-const _hoisted_20 = {
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = {
   key: 1,
   class: "text-capitalize"
 };
-const _hoisted_21 = { class: "sh-tbody" };
-const _hoisted_22 = {
+const _hoisted_22 = { class: "sh-tbody" };
+const _hoisted_23 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_23 = ["colspan"];
-const _hoisted_24 = {
+const _hoisted_24 = ["colspan"];
+const _hoisted_25 = {
   key: 1,
   class: "text-center alert alert-danger"
 };
-const _hoisted_25 = ["colspan"];
-const _hoisted_26 = {
+const _hoisted_26 = ["colspan"];
+const _hoisted_27 = {
   key: 2,
   class: "no_records"
 };
-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 = {
+const _hoisted_28 = ["colspan"];
+const _hoisted_29 = {
+  key: 1,
+  class: "text-center bg-primary-light px-2 py-1 rounded no_records_div"
+};
+const _hoisted_30 = ["onClick"];
+const _hoisted_31 = ["value", "checked", "onChange"];
+const _hoisted_32 = { key: 0 };
+const _hoisted_33 = { key: 1 };
+const _hoisted_34 = {
   key: 2,
   class: "text-success fw-bold"
 };
-const _hoisted_33 = { key: 3 };
-const _hoisted_34 = ["innerHTML"];
-const _hoisted_35 = ["innerHTML"];
+const _hoisted_35 = { key: 3 };
 const _hoisted_36 = ["innerHTML"];
 const _hoisted_37 = ["innerHTML"];
 const _hoisted_38 = ["innerHTML"];
 const _hoisted_39 = ["innerHTML"];
-const _hoisted_40 = {
+const _hoisted_40 = ["innerHTML"];
+const _hoisted_41 = ["innerHTML"];
+const _hoisted_42 = {
   key: 1,
   style: {"white-space":"nowrap"}
 };
-const _hoisted_41 = { key: 5 };
-const _hoisted_42 = {
-  key: 0,
-  class: "text-center"
-};
-const _hoisted_43 = { key: 1 };
-const _hoisted_44 = {
-  key: 2,
+const _hoisted_43 = {
+  key: 5,
   class: "mobile-list-items"
 };
-const _hoisted_45 = ["onClick"];
-const _hoisted_46 = { class: "form-check" };
-const _hoisted_47 = ["id", "checked", "onChange"];
-const _hoisted_48 = ["for"];
-const _hoisted_49 = {
+const _hoisted_44 = ["onClick"];
+const _hoisted_45 = { class: "form-check" };
+const _hoisted_46 = ["id", "checked", "onChange"];
+const _hoisted_47 = ["for"];
+const _hoisted_48 = {
   key: 0,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_50 = {
+const _hoisted_49 = {
   key: 1,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_51 = {
+const _hoisted_50 = {
   key: 2,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_52 = {
+const _hoisted_51 = {
   key: 3,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_53 = { key: 1 };
-const _hoisted_54 = {
+const _hoisted_52 = { key: 1 };
+const _hoisted_53 = {
   key: 2,
   class: "text-primary fw-bold"
 };
-const _hoisted_55 = { key: 3 };
+const _hoisted_54 = { key: 3 };
+const _hoisted_55 = ["innerHTML"];
 const _hoisted_56 = ["innerHTML"];
 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_61 = { key: 1 };
+const _hoisted_62 = { key: 6 };
 const _hoisted_63 = {
-  key: 8,
+  key: 0,
+  class: "text-center"
+};
+const _hoisted_64 = { key: 1 };
+const _hoisted_65 = { key: 2 };
+const _hoisted_66 = {
+  key: 1,
+  class: "text-center bg-primary-light px-2 py-1 rounded no_records_div"
+};
+const _hoisted_67 = {
+  key: 9,
   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"];
+const _hoisted_68 = { class: "badge bg-primary rounded-pill me-2" };
+const _hoisted_69 = { class: "d-flex gap-2" };
+const _hoisted_70 = ["onClick"];
 
 // --- Props / Emits
 
@@ -5596,18 +5609,18 @@ var script$d = {
   props: {
   endPoint: [String, null],
   orderBy: String,
-  orderMethod: {type: String, default: 'desc'},
+  orderMethod: { type: String, default: "desc" },
   headers: [Array, null],
-  disableMobileResponsive: {type: Boolean, default: false},
+  disableMobileResponsive: { type: Boolean, default: false },
   cacheKey: [String, null],
   query: [String, null],
   pageCount: [Number, null],
   actions: [Object, null],
-  hideCount: {type: Boolean, default: false},
-  hideLoadMore: {type: Boolean, default: false},
+  hideCount: { type: Boolean, default: false },
+  hideLoadMore: { type: Boolean, default: false },
   links: [Object, null],
   reload: [Number, Boolean, String, null],
-  hideSearch: {type: Boolean, default: false},
+  hideSearch: { type: Boolean, default: false },
   sharedData: [Object, null],
   searchPlaceholder: [String, null],
   event: [String, null],
@@ -5615,17 +5628,17 @@ var script$d = {
   displayMoreBtnClass: [String, null],
   moreDetailsColumns: [Array, null],
   moreDetailsFields: [Array, null],
-  hasDownload: {type: Boolean, default: false},
+  hasDownload: { type: Boolean, default: false },
   downloadFields: [Array, null],
-  tableHover: {type: Boolean, default: false},
-  hideIds: {type: Array, default: () => []},
+  tableHover: { type: Boolean, default: false },
+  hideIds: { type: Array, default: () => [] },
   paginationStyle: [String, null],
-  hasRange: {type: Boolean, default: false},
+  hasRange: { type: Boolean, default: false },
   selectedRange: [Object, null],
   noRecordsMessage: [String, null],
-  multiActions: {type: Array, default: () => []}
+  multiActions: { type: Array, default: () => [] },
 },
-  emits: ['rowSelected', 'dataReloaded', 'dataLoaded'],
+  emits: ["rowSelected", "dataReloaded", "dataLoaded"],
   setup(__props, { emit: __emit }) {
 
 const props = __props;
@@ -5633,29 +5646,33 @@ const props = __props;
 const emit = __emit;
 
 // --- Injection
-const noRecordsComponent = inject('noRecordsComponent', script$k);
+const noRecordsComponent = inject("noRecordsComponent", script$k);
 
 // --- Local State
 const order_by = ref(props.orderBy);
 const order_method = ref(props.orderMethod);
-const per_page = ref(props.pageCount ?? shRepo.getShConfig('tablePerPage', 10));
+const per_page = ref(props.pageCount ?? shRepo.getShConfig("tablePerPage", 10));
 const page = ref(1);
 const exactMatch = ref(false);
-const filter_value = ref('');
-const loading = ref('loading'); // 'loading' | 'done' | 'error'
-const loading_error = ref('');
+const filter_value = ref("");
+const loading = ref("loading"); // 'loading' | 'done' | 'error'
+const loading_error = ref("");
 const records = ref([]);
 ref(0);
 const pagination_data = ref(null);
 ref(null);
 ref(null);
 const downloading = ref(false);
-const appUrl = window?.VITE_APP_API_URL ?? import.meta?.env?.VITE_APP_API_URL ?? '';
+const appUrl =
+  window?.VITE_APP_API_URL ?? import.meta?.env?.VITE_APP_API_URL ?? "";
 const hasCanvas = ref(0);
 const selectedRecord = ref(null);
 const timeOut = ref(null);
 const tableHeaders = ref([]);
-const pageStyle = ref(props.paginationStyle ?? shRepo.getShConfig('tablePaginationStyle', 'loadMore'));
+const pageStyle = ref(
+  props.paginationStyle ??
+    shRepo.getShConfig("tablePaginationStyle", "loadMore"),
+);
 const range = ref(null);
 const from = ref(null);
 const to = ref(null);
@@ -5666,20 +5683,23 @@ const selectedItems = ref([]);
 const selectAll = ref(false);
 
 // Responsive width
-const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024);
+const windowWidth = ref(
+  typeof window !== "undefined" ? window.innerWidth : 1024,
+);
 const handleResize = () => (windowWidth.value = window.innerWidth);
 
 // --- Slots helpers
 const slots = useSlots();
 const hasDefaultSlot = computed(() => !!slots.default);
 const hasRecordsSlot = computed(() => !!slots.records);
+const hasEmptySlot = computed(() => !!slots.empty);
 
 // --- Lifecycle
 onMounted(() => {
   if (props.headers) tableHeaders.value = props.headers;
 
   if (props.actions?.actions) {
-    props.actions.actions.forEach(a => {
+    props.actions.actions.forEach((a) => {
       if (a.canvasComponent) hasCanvas.value = 1;
     });
   }
@@ -5688,65 +5708,74 @@ onMounted(() => {
 
   reloadData();
 
-  window.addEventListener('resize', handleResize);
+  window.addEventListener("resize", handleResize);
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize);
+  window.removeEventListener("resize", handleResize);
   if (timeOut.value) clearTimeout(timeOut.value);
 });
 
 // --- Utils used in template
 const getData = (record, key) => {
-  if (!key || !record) return ''
-  if (typeof key !== 'string') return ''
-  return key.split('.').reduce((obj, i) => (obj ? obj[i] : ''), record)
+  if (!key || !record) return "";
+  if (typeof key !== "string") return "";
+  return key.split(".").reduce((obj, i) => (obj ? obj[i] : ""), record);
 };
 
 const getLabel = (title) => {
-  if (typeof title === 'string') {
-    if (title.includes('.')) {
-      const parts = title.split('.');
-      return parts[parts.length - 1].replace(/_/g, ' ')
+  if (typeof title === "string") {
+    if (title.includes(".")) {
+      const parts = title.split(".");
+      return parts[parts.length - 1].replace(/_/g, " ");
     }
-    return title.replace(/_/g, ' ')
+    return title.replace(/_/g, " ");
   }
-  if (typeof title === 'object') {
-    if (title.label) return title.label
-    const key = title.key ?? title.field ?? '';
-    if (key.includes('.')) {
-      const parts = key.split('.');
-      return parts[parts.length - 1].replace(/_/g, ' ')
+  if (typeof title === "object") {
+    if (title.label) return title.label;
+    const key = title.key ?? title.field ?? "";
+    if (key.includes(".")) {
+      const parts = key.split(".");
+      return parts[parts.length - 1].replace(/_/g, " ");
     }
-    return key.replace(/_/g, ' ')
+    return key.replace(/_/g, " ");
   }
-  return ''
+  return "";
 };
 
 const getSlotName = (key) => {
-  if (typeof key === 'string') return key
-  if (typeof key === 'object') return key.key ?? key.field ?? ''
-  if (typeof key === 'function') return key(null)
-  return ''
+  if (typeof key === "string") return key;
+  if (typeof key === "object") return key.key ?? key.field ?? "";
+  if (typeof key === "function") return key(null);
+  return "";
 };
 
+const { user } = storeToRefs(useUserStore());
+
+const activeMultiActions = computed(() => {
+  return props.multiActions.filter((action) => {
+    if (!action.permission) return true;
+    return user.value.isAllowedTo(action.permission);
+  });
+});
+
 const cleanColumn = (col) => {
-  const newCol = {...col};
+  const newCol = { ...col };
   delete newCol.component;
   delete newCol.key;
-  return newCol
+  return newCol;
 };
 
 const showColumn = (header) => {
-  if (typeof header === 'string') return true
-  if (typeof header === 'object' && header.validator) return header.validator()
-  return true
+  if (typeof header === "string") return true;
+  if (typeof header === "object" && header.validator) return header.validator();
+  return true;
 };
 
 const cleanCanvasProps = (actions) => {
-  const replaced = {...actions};
+  const replaced = { ...actions };
   replaced.class = null;
-  return replaced
+  return replaced;
 };
 
 const canvasClosed = () => {
@@ -5757,15 +5786,15 @@ const rowSelected = (row) => {
   selectedRecord.value = null;
   setTimeout(() => {
     selectedRecord.value = row;
-    emit('rowSelected', row);
+    emit("rowSelected", row);
   }, 100);
 };
 
 const changeKey = (key, value) => {
-  if (key === 'order_by') {
+  if (key === "order_by") {
     order_by.value = value;
-    order_method.value = (order_method.value === 'desc') ? 'asc' : 'desc';
-  } else if (key === 'per_page') {
+    order_method.value = order_method.value === "desc" ? "asc" : "desc";
+  } else if (key === "per_page") {
     per_page.value = value;
     page.value = 1;
   } else {
@@ -5775,57 +5804,79 @@ const changeKey = (key, value) => {
       stateProxy[key] = value;
     } else {
       // fallback direct
-      if (key === 'page') page.value = value;
+      if (key === "page") page.value = value;
     }
   }
   reloadData();
 };
 
-const getLinkClass = (config) => (typeof config === 'object' ? (config.class || '') : '');
+const getLinkClass = (config) =>
+  typeof config === "object" ? config.class || "" : "";
 
 const doEmitAction = (action, data) => {
-  if (typeof action === 'function') action(data);
+  if (typeof action === "function") action(data);
   else emit(action, data);
 };
 
 const getFieldType = (field) => {
-  const numbers = ['age', 'interest_rate_pa'];
-  const moneys = ['amount', 'paid_amount', 'total_paid', 'total', 'monthly_fee', 'share_cost', 'min_contribution', 'min_membership_contribution'];
-  const dates = ['invoice_date', 'free_tier_days', 'updated_at', 'created_at', 'end_time'];
+  const numbers = ["age", "interest_rate_pa"];
+  const moneys = [
+    "amount",
+    "paid_amount",
+    "total_paid",
+    "total",
+    "monthly_fee",
+    "share_cost",
+    "min_contribution",
+    "min_membership_contribution",
+  ];
+  const dates = [
+    "invoice_date",
+    "free_tier_days",
+    "updated_at",
+    "created_at",
+    "end_time",
+  ];
 
-  const rawField = typeof field === 'object' ? (field.key ?? field.field ?? '') : field;
-  const lastPart = typeof rawField === 'string' && rawField.includes('.') ? rawField.split('.').pop() : rawField;
+  const rawField =
+    typeof field === "object" ? (field.key ?? field.field ?? "") : field;
+  const lastPart =
+    typeof rawField === "string" && rawField.includes(".")
+      ? rawField.split(".").pop()
+      : rawField;
 
-  if (typeof lastPart === 'string' && numbers.includes(lastPart)) return 'numeric'
-  if (typeof lastPart === 'string' && moneys.includes(lastPart)) return 'money'
-  if (typeof lastPart === 'string' && dates.includes(lastPart)) return 'date'
-  return 'string'
+  if (typeof lastPart === "string" && numbers.includes(lastPart))
+    return "numeric";
+  if (typeof lastPart === "string" && moneys.includes(lastPart)) return "money";
+  if (typeof lastPart === "string" && dates.includes(lastPart)) return "date";
+  return "string";
 };
 
 const replaceLinkUrl = (p, obj) => {
   let path = p;
-  if (typeof path === 'object') {
+  if (typeof path === "object") {
     if (path.link) path = path.link;
     else if (path.url) path = path.url;
     else if (path.path) path = path.path;
-    else path = '';
+    else path = "";
   }
   const matches = path.match(/\{(.*?)\}/g);
-  matches?.forEach(k => {
-    const key = k.replace('{', '').replace('}', '');
+  matches?.forEach((k) => {
+    const key = k.replace("{", "").replace("}", "");
     path = path.replace(`{${key}}`, obj[key]);
   });
-  return path
+  return path;
 };
 
-const formatDate = (date) => DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED);
+const formatDate = (date) =>
+  DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED);
 
 const loadMoreRecords = () => reloadData(page.value + 1, 1);
 
 const rangeChanged = (newRange) => {
   range.value = newRange;
-  from.value = newRange.from.toFormat('LL/dd/yyyy');
-  to.value = newRange.to.toFormat('LL/dd/yyyy');
+  from.value = newRange.from.toFormat("LL/dd/yyyy");
+  to.value = newRange.to.toFormat("LL/dd/yyyy");
   period.value = newRange.period;
   reloadData();
 };
@@ -5839,8 +5890,8 @@ const exportData = () => {
   downloading.value = true;
   const headers = [];
   const fields = props.downloadFields ? props.downloadFields : props.headers;
-  fields?.forEach(header => {
-    if (typeof header === 'string') headers.push(header);
+  fields?.forEach((header) => {
+    if (typeof header === "string") headers.push(header);
   });
 
   const data = {
@@ -5852,38 +5903,47 @@ const exportData = () => {
     from: from.value,
     to: to.value,
     period: period.value,
-    lastId: lastId.value
+    lastId: lastId.value,
   };
 
-  shApis.doPost(props.endPoint, data).then(res => {
-    downloading.value = false;
-    if (res.data.file) {
-      const url = appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name;
-      window.location.href = url;
-    }
-  }).catch(reason => {
-    downloading.value = false;
-    const error = (typeof reason.response === 'undefined')
-        ? 'Error getting data from backend'
-        : `${reason.response.status}:${reason.response.statusText}`;
-    shRepo.swalError('Error', error);
-  });
+  shApis
+    .doPost(props.endPoint, data)
+    .then((res) => {
+      downloading.value = false;
+      if (res.data.file) {
+        const url =
+          appUrl +
+          "external-download?file=" +
+          res.data.file +
+          "&name=" +
+          res.data.name;
+        window.location.href = url;
+      }
+    })
+    .catch((reason) => {
+      downloading.value = false;
+      const error =
+        typeof reason.response === "undefined"
+          ? "Error getting data from backend"
+          : `${reason.response.status}:${reason.response.statusText}`;
+      shRepo.swalError("Error", error);
+    });
 };
 
 const setCachedData = () => {
   if (props.cacheKey) {
-    records.value = shStorage.getItem('sh_table_cache_' + props.cacheKey, null);
+    records.value = shStorage.getItem("sh_table_cache_" + props.cacheKey, null);
   }
 };
 
 // Main loader
 const reloadData = (newPage, append) => {
-  if (typeof newPage !== 'undefined') page.value = newPage;
+  if (typeof newPage !== "undefined") page.value = newPage;
 
   if (props.cacheKey && records.value !== null) {
-    loading.value = 'done';
+    loading.value = "done";
   } else if (!append) {
-    loading.value = 'loading';
+    loading.value = "loading";
   }
 
   let data = {
@@ -5897,74 +5957,85 @@ const reloadData = (newPage, append) => {
     to: to.value,
     period: period.value,
     exact: exactMatch.value,
-    lastId: lastId.value
+    lastId: lastId.value,
   };
 
   // strip empty
-  Object.keys(data).forEach(k => {
-    if (data[k] === null || data[k] === '') delete data[k];
+  Object.keys(data).forEach((k) => {
+    if (data[k] === null || data[k] === "") delete data[k];
   });
 
   if (pagination_data.value) pagination_data.value.loading = 1;
 
   let endPoint = props.endPoint;
   if (!props.endPoint && props.query) {
-    endPoint = 'sh-ql';
+    endPoint = "sh-ql";
     data.query = props.query;
   }
 
-  shApis.doGet(endPoint, data).then(req => {
-    emit('dataReloaded', pagination_data.value);
-    loading.value = 'done';
-
-    const response = req.data.data;
-    emit('dataLoaded', response);
-
-    if (page.value < 2 && props.cacheKey) {
-      shStorage.setItem('sh_table_cache_' + props.cacheKey, response.data);
-    }
+  shApis
+    .doGet(endPoint, data)
+    .then((req) => {
+      emit("dataReloaded", pagination_data.value);
+      loading.value = "done";
 
-    pagination_data.value = {
-      current: response.current_page,
-      start: response.from,
-      end: response.last_page,
-      record_count: response.total,
-      per_page: response.per_page,
-      loading: 0,
-      displayCount: response.total > response.per_page ? response.per_page : response.total
-    };
+      const response = req.data.data;
+      emit("dataLoaded", response);
 
-    if (!props.headers && response.total > 0) {
-      tableHeaders.value = Object.keys(response.data[0]);
-    }
+      if (page.value < 2 && props.cacheKey) {
+        shStorage.setItem("sh_table_cache_" + props.cacheKey, response.data);
+      }
 
-    lastId.value = response.data.length > 0 ? response.data[response.data.length - 1].id : null;
+      pagination_data.value = {
+        current: response.current_page,
+        start: response.from,
+        end: response.last_page,
+        record_count: response.total,
+        per_page: response.per_page,
+        loading: 0,
+        displayCount:
+          response.total > response.per_page
+            ? response.per_page
+            : response.total,
+      };
 
-    if (append) {
-      records.value.push(...response.data);
-      let totalShown = response.total > response.per_page
-          ? response.per_page * response.current_page
-          : response.total;
-      if (totalShown > response.total) totalShown = response.total;
-      pagination_data.value.displayCount = totalShown;
+      if (!props.headers && response.total > 0) {
+        tableHeaders.value = Object.keys(response.data[0]);
+      }
 
-      const scrollingElement = (document.scrollingElement || document.body);
-      scrollingElement.scrollTop = scrollingElement.scrollHeight;
-    } else {
-      records.value = response.data;
-    }
-  }).catch(reason => {
-    const error = (typeof reason.response === 'undefined')
-        ? 'Error getting data from backend'
-        : `${reason.response.status}:${reason.response.statusText} (${props.endPoint})`;
-    loading_error.value = error;
-    loading.value = 'error';
-  });
+      lastId.value =
+        response.data.length > 0
+          ? response.data[response.data.length - 1].id
+          : null;
+
+      if (append) {
+        records.value.push(...response.data);
+        let totalShown =
+          response.total > response.per_page
+            ? response.per_page * response.current_page
+            : response.total;
+        if (totalShown > response.total) totalShown = response.total;
+        pagination_data.value.displayCount = totalShown;
+
+        const scrollingElement = document.scrollingElement || document.body;
+        scrollingElement.scrollTop = scrollingElement.scrollHeight;
+      } else {
+        records.value = response.data;
+      }
+    })
+    .catch((reason) => {
+      const error =
+        typeof reason.response === "undefined"
+          ? "Error getting data from backend"
+          : `${reason.response.status}:${reason.response.statusText} (${props.endPoint})`;
+      loading_error.value = error;
+      loading.value = "error";
+    });
 };
 
 const toggleSelectAll = (event) => {
   if (event.target.checked) {
-    selectedItems.value = records.value.map(r => r.id);
+    selectedItems.value = records.value.map((r) => r.id);
   } else {
     selectedItems.value = [];
   }
@@ -5980,31 +6051,50 @@ const toggleSelectItem = (id) => {
 };
 
 const runMultiAction = (action) => {
-  const selectedRecords = records.value.filter(r => selectedItems.value.includes(r.id));
-  if (typeof action.callback === 'function') {
+  const selectedRecords = records.value.filter((r) =>
+    selectedItems.value.includes(r.id),
+  );
+  if (typeof action.callback === "function") {
     action.callback(selectedRecords);
   }
   selectedItems.value = [];
 };
 
-watch(selectedItems, (newVal) => {
-  selectAll.value = newVal.length === records.value.length && records.value.length > 0;
-}, {deep: true});
-
+watch(
+  selectedItems,
+  (newVal) => {
+    selectAll.value =
+      newVal.length === records.value.length && records.value.length > 0;
+  },
+  { deep: true },
+);
 
 // --- Watches
-watch(() => props.hideIds, (newVal) => {
-  if (Array.isArray(newVal) && Array.isArray(records.value)) {
-    records.value = records.value.filter(r => !newVal.includes(r.id) && r);
-  }
-}, {deep: true});
+watch(
+  () => props.hideIds,
+  (newVal) => {
+    if (Array.isArray(newVal) && Array.isArray(records.value)) {
+      records.value = records.value.filter((r) => !newVal.includes(r.id) && r);
+    }
+  },
+  { deep: true },
+);
 
-watch(() => props.reload, () => reloadData());
-watch(() => props.endPoint, () => reloadData());
+watch(
+  () => props.reload,
+  () => reloadData(),
+);
+watch(
+  () => props.endPoint,
+  () => reloadData(),
+);
 
 // optional proxy (for changeKey generic setter)
 const stateProxy = reactive({
-  page, per_page, order_by, order_method
+  page,
+  per_page,
+  order_by,
+  order_method,
 });
 
 return (_ctx, _cache) => {
@@ -6034,11 +6124,11 @@ return (_ctx, _cache) => {
           ], 8 /* PROPS */, _hoisted_3$6)
         ]))
       : createCommentVNode("v-if", true),
-    (!__props.hideSearch)
+    (!__props.hideSearch && (records.value.length > 0 || !hasEmptySlot.value || filter_value.value.length > 0))
       ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
           createElementVNode("div", _hoisted_5$4, [
             createElementVNode("div", {
-              class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
+              class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2' : ''])
             }, [
               withDirectives(createElementVNode("input", {
                 onKeydown: userTyping,
@@ -6093,18 +6183,31 @@ return (_ctx, _cache) => {
                 ]))
               : createCommentVNode("v-if", true),
           (loading.value === 'done')
-            ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(records.value, (record) => {
-                return renderSlot(_ctx.$slots, "default", {
-                  key: record.id,
-                  record: record
-                })
-              }), 128 /* KEYED_FRAGMENT */))
+            ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                (records.value.length === 0)
+                  ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      (hasEmptySlot.value)
+                        ? renderSlot(_ctx.$slots, "empty", { key: 0 })
+                        : (!hasRecordsSlot.value)
+                          ? (openBlock(), createElementBlock("div", _hoisted_11$1, [...(_cache[14] || (_cache[14] = [
+                              createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */),
+                              createTextVNode(" No records found ", -1 /* CACHED */)
+                            ]))]))
+                          : createCommentVNode("v-if", true)
+                    ], 64 /* STABLE_FRAGMENT */))
+                  : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(records.value, (record) => {
+                      return renderSlot(_ctx.$slots, "default", {
+                        key: record.id,
+                        record: record
+                      })
+                    }), 128 /* KEYED_FRAGMENT */))
+              ], 64 /* STABLE_FRAGMENT */))
             : createCommentVNode("v-if", true)
         ], 64 /* STABLE_FRAGMENT */))
       : (hasRecordsSlot.value)
         ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             (loading.value === 'loading' && !__props.cacheKey)
-              ? (openBlock(), createElementBlock("div", _hoisted_11$1, [...(_cache[14] || (_cache[14] = [
+              ? (openBlock(), createElementBlock("div", _hoisted_12$1, [...(_cache[15] || (_cache[15] = [
                   createElementVNode("div", {
                     class: "spinner-border",
                     role: "status"
@@ -6113,34 +6216,38 @@ return (_ctx, _cache) => {
                   ], -1 /* CACHED */)
                 ]))]))
               : (loading.value === 'error' && !__props.cacheKey)
-                ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
+                ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
                     createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                   ]))
                 : createCommentVNode("v-if", true),
             (loading.value === 'done' || __props.cacheKey)
               ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                   (!records.value || records.value.length === 0)
-                    ? (openBlock(), createBlock(resolveDynamicComponent(unref(noRecordsComponent)), { key: 0 }, {
-                        default: withCtx(() => [
-                          _cache[15] || (_cache[15] = createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */)),
-                          createTextVNode(" " + toDisplayString(__props.noRecordsMessage ?? 'No records found'), 1 /* TEXT */)
-                        ]),
-                        _: 1 /* STABLE */
-                      }))
+                    ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        (hasEmptySlot.value)
+                          ? renderSlot(_ctx.$slots, "empty", { key: 0 })
+                          : (openBlock(), createBlock(resolveDynamicComponent(unref(noRecordsComponent)), { key: 1 }, {
+                              default: withCtx(() => [
+                                _cache[16] || (_cache[16] = createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */)),
+                                createTextVNode(" " + toDisplayString(__props.noRecordsMessage ?? "No records found"), 1 /* TEXT */)
+                              ]),
+                              _: 1 /* STABLE */
+                            }))
+                      ], 64 /* STABLE_FRAGMENT */))
                     : createCommentVNode("v-if", true),
                   renderSlot(_ctx.$slots, "records", { records: records.value })
                 ], 64 /* STABLE_FRAGMENT */))
               : createCommentVNode("v-if", true)
           ], 64 /* STABLE_FRAGMENT */))
-        : (windowWidth.value > 700 || __props.disableMobileResponsive)
+        : ((windowWidth.value > 700 || __props.disableMobileResponsive) && records.value.length > 0)
           ? (openBlock(), createElementBlock("table", {
               key: 4,
-              class: normalizeClass(["table sh-table", __props.tableHover ? 'table-hover':''])
+              class: normalizeClass(["table sh-table", __props.tableHover ? 'table-hover' : ''])
             }, [
-              createElementVNode("thead", _hoisted_13$1, [
+              createElementVNode("thead", _hoisted_14$1, [
                 createElementVNode("tr", null, [
-                  (__props.multiActions.length > 0)
-                    ? (openBlock(), createElementBlock("th", _hoisted_14$1, [
+                  (activeMultiActions.value.length > 0)
+                    ? (openBlock(), createElementBlock("th", _hoisted_15$1, [
                         withDirectives(createElementVNode("input", {
                           type: "checkbox",
                           class: "form-check-input",
@@ -6154,47 +6261,51 @@ return (_ctx, _cache) => {
                   (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (title) => {
                     return (openBlock(), createElementBlock(Fragment, { key: title }, [
                       (showColumn(title))
-                        ? (openBlock(), createElementBlock("th", _hoisted_15$1, [
+                        ? (openBlock(), createElementBlock("th", _hoisted_16, [
                             (typeof title === 'string')
                               ? (openBlock(), createElementBlock("a", {
                                   key: 0,
                                   class: "text-capitalize",
                                   onClick: $event => (changeKey('order_by', title))
-                                }, toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_16))
+                                }, toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_17))
                               : (typeof title === 'object')
                                 ? (openBlock(), createElementBlock("a", {
                                     key: 1,
                                     class: "text-capitalize",
                                     onClick: $event => (changeKey('order_by', title.key))
-                                  }, toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_17))
+                                  }, toDisplayString(getLabel(title)), 9 /* TEXT, PROPS */, _hoisted_18))
                                 : (typeof title === 'function')
                                   ? (openBlock(), createElementBlock("a", {
                                       key: 2,
                                       class: "text-capitalize",
                                       onClick: $event => (changeKey('order_by', title(null)))
-                                    }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_18))
+                                    }, toDisplayString(title(null).replace(/_/g, " ")), 9 /* TEXT, PROPS */, _hoisted_19))
                                   : (typeof title !== 'undefined')
                                     ? (openBlock(), createElementBlock("a", {
                                         key: 3,
                                         class: "text-capitalize",
                                         onClick: $event => (changeKey('order_by', title))
-                                      }, toDisplayString(String(getLabel(title))), 9 /* TEXT, PROPS */, _hoisted_19))
+                                      }, toDisplayString(String(getLabel(title))), 9 /* TEXT, PROPS */, _hoisted_20))
                                     : createCommentVNode("v-if", true)
                           ]))
                         : createCommentVNode("v-if", true)
                     ], 64 /* STABLE_FRAGMENT */))
                   }), 128 /* KEYED_FRAGMENT */)),
                   (__props.actions)
-                    ? (openBlock(), createElementBlock("th", _hoisted_20, toDisplayString(__props.actions.label), 1 /* TEXT */))
+                    ? (openBlock(), createElementBlock("th", _hoisted_21, toDisplayString(__props.actions.label), 1 /* TEXT */))
                     : createCommentVNode("v-if", true)
                 ])
               ]),
-              createElementVNode("tbody", _hoisted_21, [
+              createElementVNode("tbody", _hoisted_22, [
                 (loading.value === 'loading')
-                  ? (openBlock(), createElementBlock("tr", _hoisted_22, [
+                  ? (openBlock(), createElementBlock("tr", _hoisted_23, [
                       createElementVNode("td", {
-                        colspan: __props.multiActions.length > 0 ? tableHeaders.value.length + 1 : tableHeaders.value.length
-                      }, [...(_cache[16] || (_cache[16] = [
+                        colspan: 
+              activeMultiActions.value.length > 0
+                ? tableHeaders.value.length + 1
+                : tableHeaders.value.length
+            
+                      }, [...(_cache[17] || (_cache[17] = [
                         createElementVNode("div", { class: "text-center" }, [
                           createElementVNode("div", {
                             class: "spinner-border",
@@ -6203,24 +6314,34 @@ return (_ctx, _cache) => {
                             createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                           ])
                         ], -1 /* CACHED */)
-                      ]))], 8 /* PROPS */, _hoisted_23)
+                      ]))], 8 /* PROPS */, _hoisted_24)
                     ]))
                   : (loading.value === 'error')
-                    ? (openBlock(), createElementBlock("tr", _hoisted_24, [
+                    ? (openBlock(), createElementBlock("tr", _hoisted_25, [
                         createElementVNode("td", {
-                          colspan: __props.multiActions.length > 0 ? tableHeaders.value.length + 1 : tableHeaders.value.length
-                        }, toDisplayString(loading_error.value), 9 /* TEXT, PROPS */, _hoisted_25)
+                          colspan: 
+              activeMultiActions.value.length > 0
+                ? tableHeaders.value.length + 1
+                : tableHeaders.value.length
+            
+                        }, toDisplayString(loading_error.value), 9 /* TEXT, PROPS */, _hoisted_26)
                       ]))
                     : (records.value.length === 0)
-                      ? (openBlock(), createElementBlock("tr", _hoisted_26, [
+                      ? (openBlock(), createElementBlock("tr", _hoisted_27, [
                           createElementVNode("td", {
-                            colspan: __props.actions ? tableHeaders.value.length + (__props.multiActions.length > 0 ? 2:1) : tableHeaders.value.length + (__props.multiActions.length > 0 ? 1:0)
-                          }, [...(_cache[17] || (_cache[17] = [
-                            createElementVNode("div", { class: "text-center bg-primary-light px-2 py-1 rounded no_records_div" }, [
-                              createElementVNode("i", { class: "bi-info-circle" }),
-                              createTextVNode(" No records found ")
-                            ], -1 /* CACHED */)
-                          ]))], 8 /* PROPS */, _hoisted_27)
+                            colspan: 
+              __props.actions
+                ? tableHeaders.value.length + (activeMultiActions.value.length > 0 ? 2 : 1)
+                : tableHeaders.value.length + (activeMultiActions.value.length > 0 ? 1 : 0)
+            
+                          }, [
+                            (hasEmptySlot.value)
+                              ? renderSlot(_ctx.$slots, "empty", { key: 0 })
+                              : (openBlock(), createElementBlock("div", _hoisted_29, [...(_cache[18] || (_cache[18] = [
+                                  createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */),
+                                  createTextVNode(" No records found ", -1 /* CACHED */)
+                                ]))]))
+                          ], 8 /* PROPS */, _hoisted_28)
                         ]))
                       : (loading.value === 'done')
                         ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(records.value, (record, index) => {
@@ -6229,7 +6350,7 @@ return (_ctx, _cache) => {
                               class: normalizeClass(record.class),
                               onClick: $event => (rowSelected(record))
                             }, [
-                              (__props.multiActions.length > 0)
+                              (activeMultiActions.value.length > 0)
                                 ? (openBlock(), createElementBlock("td", {
                                     key: 0,
                                     onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
@@ -6240,13 +6361,13 @@ return (_ctx, _cache) => {
                                       value: record.id,
                                       checked: selectedItems.value.includes(record.id),
                                       onChange: $event => (toggleSelectItem(record.id))
-                                    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_29)
+                                    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_31)
                                   ]))
                                 : createCommentVNode("v-if", true),
                               (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (key) => {
                                 return (openBlock(), createElementBlock(Fragment, { key: key }, [
                                   (showColumn(key))
-                                    ? (openBlock(), createElementBlock("td", _hoisted_30, [
+                                    ? (openBlock(), createElementBlock("td", _hoisted_32, [
                                         renderSlot(_ctx.$slots, getSlotName(key), {
                                           row: record,
                                           index: index
@@ -6254,37 +6375,37 @@ return (_ctx, _cache) => {
                                           (typeof key === 'string' && __props.links && __props.links[key])
                                             ? (openBlock(), createBlock(_component_router_link, {
                                                 key: 0,
-                                                target: __props.links[key].target ? '_blank':'',
+                                                target: __props.links[key].target ? '_blank' : '',
                                                 to: replaceLinkUrl(__props.links[key], record),
                                                 class: normalizeClass(getLinkClass(__props.links[key])),
                                                 innerHTML: getData(record, key)
                                               }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
                                             : (getFieldType(key) === 'numeric')
-                                              ? (openBlock(), createElementBlock("span", _hoisted_31, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                              ? (openBlock(), createElementBlock("span", _hoisted_33, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
                                               : (getFieldType(key) === 'money')
-                                                ? (openBlock(), createElementBlock("span", _hoisted_32, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                                ? (openBlock(), createElementBlock("span", _hoisted_34, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
                                                 : (getFieldType(key) === 'date')
-                                                  ? (openBlock(), createElementBlock("span", _hoisted_33, toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
+                                                  ? (openBlock(), createElementBlock("span", _hoisted_35, toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
                                                   : (typeof key === 'string')
                                                     ? (openBlock(), createElementBlock("span", {
                                                         key: 4,
                                                         innerHTML: getData(record, key)
-                                                      }, null, 8 /* PROPS */, _hoisted_34))
+                                                      }, null, 8 /* PROPS */, _hoisted_36))
                                                     : (typeof key === 'function')
                                                       ? (openBlock(), createElementBlock("span", {
                                                           key: 5,
                                                           innerHTML: key(record, index)
-                                                        }, null, 8 /* PROPS */, _hoisted_35))
+                                                        }, null, 8 /* PROPS */, _hoisted_37))
                                                       : (typeof key === 'object' && key.callBack)
                                                         ? (openBlock(), createElementBlock("span", {
                                                             key: 6,
                                                             innerHTML: key.callBack(record, index)
-                                                          }, null, 8 /* PROPS */, _hoisted_36))
+                                                          }, null, 8 /* PROPS */, _hoisted_38))
                                                         : (typeof key === 'object' && key.callback)
                                                           ? (openBlock(), createElementBlock("span", {
                                                               key: 7,
                                                               innerHTML: key.callback(record, index)
-                                                            }, null, 8 /* PROPS */, _hoisted_37))
+                                                            }, null, 8 /* PROPS */, _hoisted_39))
                                                           : (typeof key === 'object' && key.component)
                                                             ? (openBlock(), createBlock(resolveDynamicComponent(key.component), mergeProps({
                                                                 key: 8,
@@ -6294,18 +6415,18 @@ return (_ctx, _cache) => {
                                                               ? (openBlock(), createElementBlock("span", {
                                                                   key: 9,
                                                                   innerHTML: getData(record, key.key ?? key.field)
-                                                                }, null, 8 /* PROPS */, _hoisted_38))
+                                                                }, null, 8 /* PROPS */, _hoisted_40))
                                                               : (openBlock(), createElementBlock("span", {
                                                                   key: 10,
                                                                   innerHTML: getData(record, key[0])
-                                                                }, null, 8 /* PROPS */, _hoisted_39))
+                                                                }, null, 8 /* PROPS */, _hoisted_41))
                                         ])
                                       ]))
                                     : createCommentVNode("v-if", true)
                                 ], 64 /* STABLE_FRAGMENT */))
                               }), 128 /* KEYED_FRAGMENT */)),
                               (__props.actions)
-                                ? (openBlock(), createElementBlock("td", _hoisted_40, [
+                                ? (openBlock(), createElementBlock("td", _hoisted_42, [
                                     createVNode(script$g, {
                                       emitAction: doEmitAction,
                                       actions: __props.actions,
@@ -6313,145 +6434,154 @@ return (_ctx, _cache) => {
                                     }, null, 8 /* PROPS */, ["actions", "record"])
                                   ]))
                                 : createCommentVNode("v-if", true)
-                            ], 10 /* CLASS, PROPS */, _hoisted_28))
+                            ], 10 /* CLASS, PROPS */, _hoisted_30))
                           }), 128 /* KEYED_FRAGMENT */))
                         : createCommentVNode("v-if", true)
               ])
             ], 2 /* CLASS */))
-          : (openBlock(), createElementBlock("div", _hoisted_41, [
-              (loading.value === 'loading')
-                ? (openBlock(), createElementBlock("div", _hoisted_42, [...(_cache[18] || (_cache[18] = [
-                    createElementVNode("div", { class: "text-center" }, [
-                      createElementVNode("div", {
-                        class: "spinner-border",
-                        role: "status"
+          : (loading.value === 'done' && records.value.length > 0)
+            ? (openBlock(), createElementBlock("div", _hoisted_43, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (record, index) => {
+                  return (openBlock(), createElementBlock("div", {
+                    key: record.id,
+                    class: "single-mobile-req bg-light p-3",
+                    onClick: $event => (rowSelected(record))
+                  }, [
+                    (activeMultiActions.value.length > 0)
+                      ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          class: "mb-2",
+                          onClick: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"]))
+                        }, [
+                          createElementVNode("div", _hoisted_45, [
+                            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_46),
+                            createElementVNode("label", {
+                              class: "form-check-label",
+                              for: 'mobile-check-' + record.id
+                            }, "Select Item", 8 /* PROPS */, _hoisted_47)
+                          ])
+                        ]))
+                      : createCommentVNode("v-if", true),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (key) => {
+                      return (openBlock(), createElementBlock(Fragment, {
+                        key: key[0]
                       }, [
-                        createElementVNode("span", { class: "visually-hidden" }, "Loading...")
-                      ])
-                    ], -1 /* CACHED */)
-                  ]))]))
-                : (loading.value === 'error')
-                  ? (openBlock(), createElementBlock("div", _hoisted_43, [
-                      createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
-                    ]))
-                  : (loading.value === 'done')
-                    ? (openBlock(), createElementBlock("div", _hoisted_44, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (record, index) => {
-                          return (openBlock(), createElementBlock("div", {
-                            key: record.id,
-                            class: "single-mobile-req bg-light p-3",
-                            onClick: $event => (rowSelected(record))
-                          }, [
-                            (__props.multiActions.length > 0)
-                              ? (openBlock(), createElementBlock("div", {
-                                  key: 0,
-                                  class: "mb-2",
-                                  onClick: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"]))
-                                }, [
-                                  createElementVNode("div", _hoisted_46, [
-                                    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),
-                                    createElementVNode("label", {
-                                      class: "form-check-label",
-                                      for: 'mobile-check-'+record.id
-                                    }, "Select Item", 8 /* PROPS */, _hoisted_48)
-                                  ])
-                                ]))
-                              : createCommentVNode("v-if", true),
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (key) => {
-                              return (openBlock(), createElementBlock(Fragment, {
-                                key: key[0]
-                              }, [
-                                (showColumn(key))
-                                  ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                                      (typeof key === 'string' )
-                                        ? (openBlock(), createElementBlock("p", _hoisted_49, toDisplayString(getLabel(key)), 1 /* TEXT */))
-                                        : (typeof key === 'function')
-                                          ? (openBlock(), createElementBlock("p", _hoisted_50, toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
-                                          : (typeof key === 'object')
-                                            ? (openBlock(), createElementBlock("p", _hoisted_51, toDisplayString(getLabel(key)), 1 /* TEXT */))
-                                            : (openBlock(), createElementBlock("p", _hoisted_52, toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
-                                      createElementVNode("span", null, [
-                                        renderSlot(_ctx.$slots, getSlotName(key), {
-                                          row: record,
-                                          index: index
-                                        }, () => [
-                                          (typeof key === 'string' && __props.links && __props.links[key])
-                                            ? (openBlock(), createBlock(_component_router_link, {
-                                                key: 0,
-                                                to: replaceLinkUrl(__props.links[key],record),
-                                                class: normalizeClass(getLinkClass(__props.links[key])),
+                        (showColumn(key))
+                          ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                              (typeof key === 'string')
+                                ? (openBlock(), createElementBlock("p", _hoisted_48, toDisplayString(getLabel(key)), 1 /* TEXT */))
+                                : (typeof key === 'function')
+                                  ? (openBlock(), createElementBlock("p", _hoisted_49, toDisplayString(key(null).replace(/_/g, " ")), 1 /* TEXT */))
+                                  : (typeof key === 'object')
+                                    ? (openBlock(), createElementBlock("p", _hoisted_50, toDisplayString(getLabel(key)), 1 /* TEXT */))
+                                    : (openBlock(), createElementBlock("p", _hoisted_51, toDisplayString(key[1].replace(/_/g, " ")), 1 /* TEXT */)),
+                              createElementVNode("span", null, [
+                                renderSlot(_ctx.$slots, getSlotName(key), {
+                                  row: record,
+                                  index: index
+                                }, () => [
+                                  (typeof key === 'string' && __props.links && __props.links[key])
+                                    ? (openBlock(), createBlock(_component_router_link, {
+                                        key: 0,
+                                        to: replaceLinkUrl(__props.links[key], record),
+                                        class: normalizeClass(getLinkClass(__props.links[key])),
+                                        innerHTML: getData(record, key)
+                                      }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
+                                    : (getFieldType(key) === 'numeric')
+                                      ? (openBlock(), createElementBlock("span", _hoisted_52, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                      : (getFieldType(key) === 'money')
+                                        ? (openBlock(), createElementBlock("span", _hoisted_53, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
+                                        : (getFieldType(key) === 'date')
+                                          ? (openBlock(), createElementBlock("span", _hoisted_54, toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
+                                          : (typeof key === 'string')
+                                            ? (openBlock(), createElementBlock("span", {
+                                                key: 4,
                                                 innerHTML: getData(record, key)
-                                              }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
-                                            : (getFieldType(key) === 'numeric')
-                                              ? (openBlock(), createElementBlock("span", _hoisted_53, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
-                                              : (getFieldType(key) === 'money')
-                                                ? (openBlock(), createElementBlock("span", _hoisted_54, toDisplayString(Intl.NumberFormat().format(getData(record, key))), 1 /* TEXT */))
-                                                : (getFieldType(key) === 'date')
-                                                  ? (openBlock(), createElementBlock("span", _hoisted_55, toDisplayString(formatDate(getData(record, key))), 1 /* TEXT */))
-                                                  : (typeof key === 'string')
+                                              }, null, 8 /* PROPS */, _hoisted_55))
+                                            : (typeof key === 'object' && key.callBack)
+                                              ? (openBlock(), createElementBlock("span", {
+                                                  key: 5,
+                                                  innerHTML: key.callBack(record, index)
+                                                }, null, 8 /* PROPS */, _hoisted_56))
+                                              : (typeof key === 'object' && key.callback)
+                                                ? (openBlock(), createElementBlock("span", {
+                                                    key: 6,
+                                                    innerHTML: key.callback(record, index)
+                                                  }, null, 8 /* PROPS */, _hoisted_57))
+                                                : (typeof key === 'object' && key.component)
+                                                  ? (openBlock(), createBlock(resolveDynamicComponent(key.component), mergeProps({
+                                                      key: 7,
+                                                      item: record
+                                                    }, { ref_for: true }, cleanColumn(key)), null, 16 /* FULL_PROPS */, ["item"]))
+                                                  : (typeof key === 'object')
                                                     ? (openBlock(), createElementBlock("span", {
-                                                        key: 4,
-                                                        innerHTML: getData(record, key)
-                                                      }, null, 8 /* PROPS */, _hoisted_56))
-                                                    : (typeof key === 'object' && key.callBack)
+                                                        key: 8,
+                                                        innerHTML: getData(record, key.key ?? key.field)
+                                                      }, null, 8 /* PROPS */, _hoisted_58))
+                                                    : (typeof key === 'function')
                                                       ? (openBlock(), createElementBlock("span", {
-                                                          key: 5,
-                                                          innerHTML: key.callBack(record, index)
-                                                        }, null, 8 /* PROPS */, _hoisted_57))
-                                                      : (typeof key === 'object' && key.callback)
-                                                        ? (openBlock(), createElementBlock("span", {
-                                                            key: 6,
-                                                            innerHTML: key.callback(record, index)
-                                                          }, null, 8 /* PROPS */, _hoisted_58))
-                                                        : (typeof key === 'object' && key.component)
-                                                          ? (openBlock(), createBlock(resolveDynamicComponent(key.component), mergeProps({
-                                                              key: 7,
-                                                              item: record
-                                                            }, { ref_for: true }, cleanColumn(key)), null, 16 /* FULL_PROPS */, ["item"]))
-                                                          : (typeof key === 'object')
-                                                            ? (openBlock(), createElementBlock("span", {
-                                                                key: 8,
-                                                                innerHTML: getData(record, key.key ?? key.field)
-                                                              }, null, 8 /* PROPS */, _hoisted_59))
-                                                            : (typeof key === 'function')
-                                                              ? (openBlock(), createElementBlock("span", {
-                                                                  key: 9,
-                                                                  innerHTML: key(record, index)
-                                                                }, null, 8 /* PROPS */, _hoisted_60))
-                                                              : (openBlock(), createElementBlock("span", {
-                                                                  key: 10,
-                                                                  innerHTML: getData(record, key[0])
-                                                                }, null, 8 /* PROPS */, _hoisted_61))
-                                        ])
-                                      ])
-                                    ], 64 /* STABLE_FRAGMENT */))
-                                  : createCommentVNode("v-if", true),
-                                _cache[19] || (_cache[19] = createElementVNode("hr", { class: "my-2" }, null, -1 /* CACHED */))
-                              ], 64 /* STABLE_FRAGMENT */))
-                            }), 128 /* KEYED_FRAGMENT */)),
-                            (__props.actions)
-                              ? (openBlock(), createElementBlock("div", _hoisted_62, [
-                                  createVNode(script$g, {
-                                    emitAction: doEmitAction,
-                                    actions: __props.actions,
-                                    record: record
-                                  }, null, 8 /* PROPS */, ["actions", "record"])
-                                ]))
-                              : createCommentVNode("v-if", true)
-                          ], 8 /* PROPS */, _hoisted_45))
-                        }), 128 /* KEYED_FRAGMENT */))
+                                                          key: 9,
+                                                          innerHTML: key(record, index)
+                                                        }, null, 8 /* PROPS */, _hoisted_59))
+                                                      : (openBlock(), createElementBlock("span", {
+                                                          key: 10,
+                                                          innerHTML: getData(record, key[0])
+                                                        }, null, 8 /* PROPS */, _hoisted_60))
+                                ])
+                              ])
+                            ], 64 /* STABLE_FRAGMENT */))
+                          : createCommentVNode("v-if", true),
+                        _cache[19] || (_cache[19] = createElementVNode("hr", { class: "my-2" }, null, -1 /* CACHED */))
+                      ], 64 /* STABLE_FRAGMENT */))
+                    }), 128 /* KEYED_FRAGMENT */)),
+                    (__props.actions)
+                      ? (openBlock(), createElementBlock("div", _hoisted_61, [
+                          createVNode(script$g, {
+                            emitAction: doEmitAction,
+                            actions: __props.actions,
+                            record: record
+                          }, null, 8 /* PROPS */, ["actions", "record"])
+                        ]))
+                      : createCommentVNode("v-if", true)
+                  ], 8 /* PROPS */, _hoisted_44))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]))
+            : (openBlock(), createElementBlock("div", _hoisted_62, [
+                (loading.value === 'loading')
+                  ? (openBlock(), createElementBlock("div", _hoisted_63, [...(_cache[20] || (_cache[20] = [
+                      createElementVNode("div", { class: "text-center" }, [
+                        createElementVNode("div", {
+                          class: "spinner-border",
+                          role: "status"
+                        }, [
+                          createElementVNode("span", { class: "visually-hidden" }, "Loading...")
+                        ])
+                      ], -1 /* CACHED */)
+                    ]))]))
+                  : (loading.value === 'error')
+                    ? (openBlock(), createElementBlock("div", _hoisted_64, [
+                        createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                       ]))
-                    : createCommentVNode("v-if", true)
-            ])),
-    (pagination_data.value)
+                    : (loading.value === 'done' && records.value.length === 0)
+                      ? (openBlock(), createElementBlock("div", _hoisted_65, [
+                          (hasEmptySlot.value)
+                            ? renderSlot(_ctx.$slots, "empty", { key: 0 })
+                            : (openBlock(), createElementBlock("div", _hoisted_66, [...(_cache[21] || (_cache[21] = [
+                                createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */),
+                                createTextVNode(" No records found ", -1 /* CACHED */)
+                              ]))]))
+                        ]))
+                      : createCommentVNode("v-if", true)
+              ])),
+    (pagination_data.value && (records.value.length > 0 || !hasEmptySlot.value || filter_value.value.length > 0))
       ? (openBlock(), createBlock(script$e, {
-          key: 6,
+          key: 7,
           onLoadMoreRecords: loadMoreRecords,
           "hide-load-more": __props.hideLoadMore,
           "per-page": per_page.value,
@@ -6462,7 +6592,7 @@ return (_ctx, _cache) => {
         }, null, 8 /* PROPS */, ["hide-load-more", "per-page", "hide-count", "pagination_data", "pagination-style"]))
       : createCommentVNode("v-if", true),
     (__props.actions)
-      ? (openBlock(true), createElementBlock(Fragment, { key: 7 }, renderList(__props.actions.actions, (action) => {
+      ? (openBlock(true), createElementBlock(Fragment, { key: 8 }, renderList(__props.actions.actions, (action) => {
           return (openBlock(), createElementBlock(Fragment, {
             key: action.label
           }, [
@@ -6489,14 +6619,14 @@ return (_ctx, _cache) => {
           ], 64 /* STABLE_FRAGMENT */))
         }), 128 /* KEYED_FRAGMENT */))
       : createCommentVNode("v-if", true),
-    (selectedItems.value.length > 0)
-      ? (openBlock(), createElementBlock("div", _hoisted_63, [
+    (selectedItems.value.length > 0 && activeMultiActions.value.length > 0)
+      ? (openBlock(), createElementBlock("div", _hoisted_67, [
           createElementVNode("div", null, [
-            createElementVNode("span", _hoisted_64, toDisplayString(selectedItems.value.length), 1 /* TEXT */),
-            _cache[20] || (_cache[20] = createTextVNode(" items selected ", -1 /* CACHED */))
+            createElementVNode("span", _hoisted_68, toDisplayString(selectedItems.value.length), 1 /* TEXT */),
+            _cache[22] || (_cache[22] = createTextVNode(" items selected ", -1 /* CACHED */))
           ]),
-          createElementVNode("div", _hoisted_65, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.multiActions, (action) => {
+          createElementVNode("div", _hoisted_69, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(activeMultiActions.value, (action) => {
               return (openBlock(), createElementBlock("button", {
                 key: action.label,
                 class: normalizeClass(["btn btn-sm", action.class ?? 'btn-outline-primary']),
@@ -6509,12 +6639,12 @@ return (_ctx, _cache) => {
                     }, null, 2 /* CLASS */))
                   : createCommentVNode("v-if", true),
                 createTextVNode(" " + toDisplayString(action.label), 1 /* TEXT */)
-              ], 10 /* CLASS, PROPS */, _hoisted_66))
+              ], 10 /* CLASS, PROPS */, _hoisted_70))
             }), 128 /* KEYED_FRAGMENT */)),
             createElementVNode("button", {
               class: "btn btn-sm btn-light",
               onClick: _cache[7] || (_cache[7] = $event => (selectedItems.value = []))
-            }, "Cancel")
+            }, " Cancel ")
           ])
         ]))
       : createCommentVNode("v-if", true)