@iankibetsh/shframework 4.1.1 → 4.1.4

package/dist/library.js

@@ -1910,7 +1910,7 @@ const countries = [
   }
 ];
 
-var script$u = {
+var script$v = {
   name: 'PhoneInput',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1980,7 +1980,7 @@ var script$u = {
   }
 };
 
-const _hoisted_1$n = { class: "sh-phone mb-3" };
+const _hoisted_1$o = { class: "sh-phone mb-3" };
 const _hoisted_2$e = {
   key: 0,
   style: {"display":"contents"}
@@ -1989,7 +1989,7 @@ const _hoisted_3$d = ["src"];
 const _hoisted_4$d = ["value"];
 
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
     ($data.selectedCountry)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
           vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$d),
@@ -2023,10 +2023,10 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$u.render = render$3;
-script$u.__file = "src/lib/components/form-components/PhoneInput.vue";
+script$v.render = render$3;
+script$v.__file = "src/lib/components/form-components/PhoneInput.vue";
 
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   key: 0,
   class: "dropdown sh-suggest"
 };
@@ -2047,7 +2047,7 @@ const _hoisted_10$6 = {
 };
 
 
-var script$t = {
+var script$u = {
   __name: 'ShSuggest',
   props: ['data','allowMultiple','url','modelValue'],
   emits: ['update:modelValue'],
@@ -2131,7 +2131,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (vue.unref(id))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
         vue.createElementVNode("div", {
           id: vue.unref(id),
           "data-bs-toggle": "dropdown",
@@ -2192,15 +2192,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$t.__scopeId = "data-v-71cc9569";
-script$t.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$u.__scopeId = "data-v-71cc9569";
+script$u.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$s = {
+var script$t = {
   name: 'ShForm',
   components: {
-    PhoneInput: script$u,
-    ShSuggest: script$t,
-    ShPhone: script$u
+    PhoneInput: script$v,
+    ShSuggest: script$u,
+    ShPhone: script$v
   },
   props: [
       'action',
@@ -2524,7 +2524,7 @@ var script$s = {
   }
 };
 
-const _hoisted_1$l = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_1$m = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
 const _hoisted_2$c = {
   ref: "ShAutoForm",
   class: "sh-form"
@@ -2585,7 +2585,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShSuggest = vue.resolveComponent("ShSuggest");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$l,
+    _hoisted_1$m,
     vue.createElementVNode("form", _hoisted_2$c, [
       vue.createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
       vue.createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
@@ -2793,10 +2793,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$s.render = render$2;
-script$s.__file = "src/lib/components/ShForm.vue";
+script$t.render = render$2;
+script$t.__file = "src/lib/components/ShForm.vue";
 
-var script$r = {
+var script$s = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2836,12 +2836,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$r.__file = "src/lib/components/form-components/EmailInput.vue";
+script$s.__file = "src/lib/components/form-components/EmailInput.vue";
 
-const _hoisted_1$k = ["min", "max"];
+const _hoisted_1$l = ["min", "max"];
 
 
-var script$q = {
+var script$r = {
   __name: 'NumberInput',
   props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2875,7 +2875,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$k)), [
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$l)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2883,9 +2883,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$q.__file = "src/lib/components/form-components/NumberInput.vue";
+script$r.__file = "src/lib/components/form-components/NumberInput.vue";
 
-var script$p = {
+var script$q = {
   __name: 'TextInput',
   props: ['modelValue','label','isInvalid'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2927,9 +2927,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$p.__file = "src/lib/components/form-components/TextInput.vue";
+script$q.__file = "src/lib/components/form-components/TextInput.vue";
 
-var script$o = {
+var script$p = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2969,12 +2969,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$o.__file = "src/lib/components/form-components/TextAreaInput.vue";
+script$p.__file = "src/lib/components/form-components/TextAreaInput.vue";
 
-const _hoisted_1$j = ["value"];
+const _hoisted_1$k = ["value"];
 
 
-var script$n = {
+var script$o = {
   __name: 'SelectInput',
   props: ['modelValue','label','data','dataUrl'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2992,8 +2992,9 @@ const modelValueUpdated = (e) => {
 };
 vue.onMounted(()=>{
   props.modelValue && (inputModel.value = props.modelValue);
-  if(props.data){
-    selectOptions.value = props.data.map(item=>{
+  const options = props.data ?? props.options;
+  if(options){
+    selectOptions.value = options.map(item=>{
       return {
         id: typeof item.id !== 'undefined' ? item.id : item.key ? item.key : item.value ? item.value:item.name ? item.name:item.label,
         name: item.label ? item.label : item.name ? item.name : item.value ? item.value:item.id ? item.id:item.option
@@ -3029,7 +3030,7 @@ return (_ctx, _cache) => {
       return (vue.openBlock(), vue.createElementBlock("option", {
         key: option.id,
         value: option.id
-      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$j))
+      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$k))
     }), 128 /* KEYED_FRAGMENT */))
   ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
     [vue.vModelSelect, inputModel.value]
@@ -3039,9 +3040,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$n.__file = "src/lib/components/form-components/SelectInput.vue";
+script$o.__file = "src/lib/components/form-components/SelectInput.vue";
 
-var script$m = {
+var script$n = {
   __name: 'PasswordInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -3077,9 +3078,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$m.__file = "src/lib/components/form-components/PasswordInput.vue";
+script$n.__file = "src/lib/components/form-components/PasswordInput.vue";
 
-const _hoisted_1$i = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
+const _hoisted_1$j = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
 const _hoisted_2$b = ["onUpdate:modelValue"];
 const _hoisted_3$a = ["innerHTML"];
 const _hoisted_4$a = ["innerHTML"];
@@ -3106,7 +3107,7 @@ const _hoisted_12$3 = {
 const _hoisted_13$3 = { key: 1 };
 
 
-var script$l = {
+var script$m = {
   __name: 'ShAutoForm',
   props: [
     'action','successCallback','retainDataAfterSubmission',
@@ -3139,19 +3140,19 @@ const getFieldComponent = (fieldObj)=>{
   const defaultPhones = ['phone'];
   const defaultEmails = ['email'];
   const formComponents = vue.inject('formComponents');
-  const TextComponent = formComponents.text ?? script$p;
-  const TextAreaComponent = formComponents.textArea ?? script$o;
-  const EmailComponent = formComponents.email ?? script$r;
-  const PhoneComponent = formComponents.phone ?? script$u;
-  const NumberComponent = formComponents.number ?? script$q;
-  const SelectComponent = formComponents.select ?? script$n;
-  const PasswordComponent = formComponents.password ?? script$m;
+  const TextComponent = formComponents.text ?? script$q;
+  const TextAreaComponent = formComponents.textArea ?? script$p;
+  const EmailComponent = formComponents.email ?? script$s;
+  const PhoneComponent = formComponents.phone ?? script$v;
+  const NumberComponent = formComponents.number ?? script$r;
+  const SelectComponent = formComponents.select ?? script$o;
+  const PasswordComponent = formComponents.password ?? script$n;
   if(props.customComponents && props.customComponents[field]) {
     return props.customComponents[field]
   }
   if(fieldObj.type){
     if(fieldObj.type === 'suggest' || fieldObj.type === 'suggests'){
-      return script$t
+      return script$u
     }
     return fieldObj.type === 'number' ? NumberComponent:fieldObj.type === 'textarea' ? TextAreaComponent : fieldObj.type === 'email' ? EmailComponent : fieldObj.type === 'phone' ? PhoneComponent : fieldObj.type === 'password' ? PasswordComponent:fieldObj.type === 'select' ? SelectComponent:TextComponent
   }else
@@ -3160,16 +3161,16 @@ const getFieldComponent = (fieldObj)=>{
   }
   else
   if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
-    return formComponents.textArea ?? script$o
+    return formComponents.textArea ?? script$p
   } else
   if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
-    return formComponents.email ?? script$r
+    return formComponents.email ?? script$s
   } else
   if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
-    return formComponents.phone ?? script$u
+    return formComponents.phone ?? script$v
   } else
   if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
-    return formComponents.number ?? script$q
+    return formComponents.number ?? script$r
   }
   // else
   // if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
@@ -3178,7 +3179,7 @@ const getFieldComponent = (fieldObj)=>{
   // if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
   //   return formComponents.date ?? DateInput
   // }
-  return formComponents.text ?? script$p
+  return formComponents.text ?? script$q
 };
 const shFormElementClasses = vue.ref(null);
 shFormElementClasses.value = vue.inject('shFormElementClasses');
@@ -3316,7 +3317,7 @@ vue.onMounted((ev)=>{
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$i,
+    _hoisted_1$j,
     vue.createElementVNode("form", {
       class: vue.normalizeClass([__props.formClass, "sh-form"]),
       ref_key: "shAutoForm",
@@ -3402,12 +3403,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$l.__file = "src/lib/components/ShAutoForm.vue";
+script$m.__file = "src/lib/components/ShAutoForm.vue";
 
-const _hoisted_1$h = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
+const _hoisted_1$i = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
 const _hoisted_2$a = { class: "dropdown" };
 
-var script$k = {
+var script$l = {
   __name: 'ShDropDownForm',
   props: ['action',
   'classes',
@@ -3437,7 +3438,7 @@ const dropdownId = 'rand' + (Math.random() + 1).toString(36).substring(2);
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$h,
+    _hoisted_1$i,
     vue.createElementVNode("div", _hoisted_2$a, [
       vue.createElementVNode("a", {
         class: vue.normalizeClass(vue.unref(btnClass)),
@@ -3454,7 +3455,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$s, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$t, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3463,9 +3464,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$k.__file = "src/lib/components/ShDropDownForm.vue";
+script$l.__file = "src/lib/components/ShDropDownForm.vue";
 
-const _hoisted_1$g = ["id"];
+const _hoisted_1$h = ["id"];
 const _hoisted_2$9 = { class: "modal-content" };
 const _hoisted_3$9 = { class: "modal-header" };
 const _hoisted_4$9 = { class: "modal-title" };
@@ -3478,7 +3479,7 @@ const _hoisted_6$5 = { class: "modal-body" };
 const _hoisted_7$4 = { class: "section" };
 
 
-var script$j = {
+var script$k = {
   __name: 'ShModal',
   props: {
     modalId: {
@@ -3535,17 +3536,17 @@ return (_ctx, _cache) => {
         ])
       ])
     ], 2 /* CLASS */)
-  ], 8 /* PROPS */, _hoisted_1$g))
+  ], 8 /* PROPS */, _hoisted_1$h))
 }
 }
 
 };
 
-script$j.__file = "src/lib/components/ShModal.vue";
+script$k.__file = "src/lib/components/ShModal.vue";
 
-const _hoisted_1$f = ["href"];
+const _hoisted_1$g = ["href"];
 
-var script$i = {
+var script$j = {
   __name: 'ShModalForm',
   props: ['action',
   'classes',
@@ -3584,13 +3585,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$f),
-    vue.createVNode(script$j, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$g),
+    vue.createVNode(script$k, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$s, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$t, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3600,11 +3601,11 @@ return (_ctx, _cache) => {
 
 };
 
-script$i.__file = "src/lib/components/ShModalForm.vue";
+script$j.__file = "src/lib/components/ShModalForm.vue";
 
-const _hoisted_1$e = ["href"];
+const _hoisted_1$f = ["href"];
 
-var script$h = {
+var script$i = {
   __name: 'ShModalFormAuto',
   props: ['action',
   'classes',
@@ -3644,13 +3645,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$e),
-    vue.createVNode(script$j, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$f),
+    vue.createVNode(script$k, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$l, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$m, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3660,9 +3661,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$h.__file = "src/lib/components/ShModalFormAuto.vue";
+script$i.__file = "src/lib/components/ShModalFormAuto.vue";
 
-const _hoisted_1$d = ["id"];
+const _hoisted_1$e = ["id"];
 const _hoisted_2$8 = { class: "offcanvas-header" };
 const _hoisted_3$8 = {
   class: "offcanvas-title",
@@ -3670,7 +3671,7 @@ const _hoisted_3$8 = {
 };
 const _hoisted_4$8 = { class: "offcanvas-body" };
 
-var script$g = {
+var script$h = {
   __name: 'ShCanvas',
   props: {
   canvasId: {
@@ -3729,13 +3730,29 @@ return (_ctx, _cache) => {
     vue.createElementVNode("div", _hoisted_4$8, [
       vue.renderSlot(_ctx.$slots, "default")
     ])
-  ], 10 /* CLASS, PROPS */, _hoisted_1$d))
+  ], 10 /* CLASS, PROPS */, _hoisted_1$e))
 }
 }
 
 };
 
-script$g.__file = "src/lib/components/ShCanvas.vue";
+script$h.__file = "src/lib/components/ShCanvas.vue";
+
+const _hoisted_1$d = { class: "callout callout-info" };
+
+function render$1(_ctx, _cache) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+      vue.createTextVNode(" No records found ")
+    ])
+  ]))
+}
+
+const script$g = {};
+
+script$g.render = render$1;
+script$g.__scopeId = "data-v-55cf77fb";
+script$g.__file = "src/lib/components/others/NoRecords.vue";
 
 var script$f = {
   name: 'Pagination',
@@ -3856,7 +3873,7 @@ const _hoisted_23$1 = {
   class: "spinner-border"
 };
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
         vue.createElementVNode("div", _hoisted_2$7, [
@@ -3933,7 +3950,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$f.render = render$1;
+script$f.render = render;
 script$f.__file = "src/lib/components/list_templates/Pagination.vue";
 
 const _hoisted_1$b = /*#__PURE__*/vue.createElementVNode("span", {
@@ -4326,309 +4343,6 @@ return (_ctx, _cache) => {
 
 script$c.__file = "src/lib/components/ShRange.vue";
 
-var script$b = {
-    name: 'sh-table',
-    props: ['endPoint', 'headers','cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange'],
-    data() {
-        return {
-            order_by: '',
-            order_method: '',
-            per_page: this.pageCount ?? shRepo.getShConfig('tablePerPage', 10),
-            page: 1,
-          exactMatch: false,
-            filter_value: '',
-            loading: 'loading',
-            loading_error: '',
-            records: [],
-            total: 0,
-            pagination_data: null,
-            moreDetailsId: null,
-            moreDetailsModel: null,
-            downloading: false,
-            appUrl: window.VITE_APP_API_URL,
-            hasCanvas: 0,
-            selectedRecord: null,
-            timeOut: null,
-            tableHeaders: [],
-            pageStyle: this.paginationStyle ?? shRepo.getShConfig('tablePaginationStyle', 'loadMore'),
-            range: null,
-            from: null,
-            to: null,
-            period: null
-        }
-    },
-    mounted() {
-        if (this.headers) {
-            this.tableHeaders = this.headers;
-        }
-
-        if (this.actions && this.actions.actions) {
-            this.actions.actions.forEach(action => {
-                if (action.canvasComponent) {
-                    this.hasCanvas = true;
-                }
-            });
-        }
-        if(this.cacheKey){
-            this.setCachedData();
-        }
-        this.reloadData();
-    },
-    methods: {
-        rangeChanged: function (newRange) {
-            this.range = newRange;
-            this.from = newRange.from.format('L');
-            this.to = newRange.to.format('L');
-            this.period = newRange.period;
-            this.reloadData();
-        },
-        userTyping: function () {
-            if (this.timeOut) {
-                clearTimeout(this.timeOut);
-            }
-            const self = this;
-            this.timeOut = setTimeout(() => {
-                self.reloadData(1);
-            }, 800);
-        },
-        cleanCanvasProps: function (actions) {
-            let replaced = actions;
-            replaced.class = null;
-            return replaced
-        },
-        newRecordAdded: function (ev) {
-            const record = ev.log;
-            if (record.user) {
-                record.user = record.user.name;
-            }
-            this.records.unshift(record);
-        },
-        canvasClosed: function () {
-            this.selectedRecord = null;
-        },
-        rowSelected: function (row) {
-            this.selectedRecord = null;
-            setTimeout(() => {
-                this.selectedRecord = row;
-                this.$emit('rowSelected', row);
-            }, 100);
-        },
-        changeKey: function (key, value) {
-            this[key] = value;
-            if (key === 'order_by') {
-                this.order_method = (this.order_method === 'desc') ? 'asc' : 'desc';
-            }
-            if (key === 'per_page') {
-                this.page = 1;
-            }
-            this.reloadData();
-        },
-        getLinkClass: function (config) {
-            if (typeof config === 'object') {
-                return config.class
-            }
-            return ''
-        },
-        reloadNotifications: function () {
-            this.reloadData();
-        },
-        replaceActionUrl: function (path, obj) {
-            if (path) {
-                var matches = path.match(/\{(.*?)\}/g);
-                try {
-                    matches.forEach(key => {
-                        key = key.replace('{', '');
-                        key = key.replace('}', '');
-                        path = path.replace(`{${key}}`, obj[key]);
-                    });
-                    return path
-                } catch (e) {
-                    return path
-                }
-            }
-            return ''
-        },
-        doEmitAction: function (action, data) {
-            if (typeof action === 'function') {
-                action(data);
-            } else {
-                this.$emit(action, data);
-            }
-        },
-        getFieldType: function (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'];
-            if (numbers.includes(field)) {
-                return 'numeric'
-            }
-            if (moneys.includes(field)) {
-                return 'money'
-            }
-            if (dates.includes(field)) {
-                return 'date'
-            }
-            return 'string'
-        },
-        replaceLinkUrl: function (path, obj) {
-            if (typeof path === 'object') {
-                path = path.link ?? path.url;
-            }
-            var matches = path.match(/\{(.*?)\}/g);
-            matches && matches.forEach(key => {
-                key = key.replace('{', '');
-                key = key.replace('}', '');
-                path = path.replace(`{${key}}`, obj[key]);
-            });
-            return path
-        },
-        formatDate: function (date) {
-            return moment__default["default"](date).format('lll')
-        },
-        setMoreDetailsModel: function (row) {
-            this.moreDetailsModel = null;
-            this.moreDetailsModel = row;
-        },
-        loadMoreRecords: function () {
-            this.reloadData(this.page + 1, 1);
-        },
-        exportData: function (template) {
-            this.downloading = true;
-            const headers = [];
-            const fields = this.downloadFields ? this.downloadFields : this.headers;
-            fields.forEach(header => {
-                if (typeof header === 'string') {
-                    headers.push(header);
-                }
-            });
-            const data = {
-                titles: headers,
-                export: 1
-            };
-            shApis.doPost(this.endPoint, data).then(res => {
-                this.downloading = false;
-                if (res.data.file) {
-                    const url = this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name;
-                    window.location.href = url;
-                    // window.open('https://facebook.com')
-                    // window.open(this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name, '_blank').focus()
-                }
-            }).catch(reason => {
-                this.downloading = false;
-                const error = (typeof reason.response === 'undefined') ? 'Error getting data from backend' : `${reason.response.status}:${reason.response.statusText}`;
-                shRepo.swalError('Error', error);
-            });
-        },
-        setCachedData: function () {
-            if (this.cacheKey) {
-                this.records = ShStorage.getItem('sh_table_cache_' + this.cacheKey, []);
-            }
-        },
-        reloadData: function (page, append) {
-            if (typeof page !== 'undefined') {
-                this.page = page;
-            }
-            if (this.cacheKey && this.records && this.records.length > 0 && this.page < 2 ) {
-              this.loading = 'done';
-            } else if(!append){
-                this.loading = 'loading';
-            }
-            const data = {
-                order_by: this.order_by,
-                order_method: this.order_method,
-                per_page: this.per_page,
-                page: this.page,
-                filter_value: this.filter_value,
-                paginated: true,
-                from: this.from,
-                to: this.to,
-                period: this.period,
-              exact: this.exactMatch
-            };
-            if (this.pagination_data) {
-                this.pagination_data.loading = 1;
-            }
-            let endPoint = this.endPoint;
-            if (!this.endPoint && this.query) {
-                //send ql query
-                endPoint = 'sh-ql';
-                data.query = this.query;
-            }
-            shApis.doGet(endPoint, data).then(req => {
-                this.$emit('dataReloaded', this.pagination_data);
-                this.loading = 'done';
-                const response = req.data.data;
-              if(this.page < 2 && this.cacheKey){
-                ShStorage.setItem('sh_table_cache_' + this.cacheKey, response.data);
-              }
-                this.pagination_data = {
-                    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 (!this.headers && response.total > 0) {
-                    this.tableHeaders = Object.keys(response.data[0]);
-                }
-                if (append) {
-                    this.records.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;
-                    }
-                    this.pagination_data.displayCount = totalShown;
-                    const scrollingElement = (document.scrollingElement || document.body);
-                    scrollingElement.scrollTop = scrollingElement.scrollHeight;
-                } else {
-                    this.records = response.data;
-                }
-            }).catch(reason => {
-                const error = (typeof reason.response === 'undefined') ? 'Error getting data from backend' : `${reason.response.status}:${reason.response.statusText} (${this.endPoint})`;
-                this.loading_error = error;
-                this.loading = 'error';
-            });
-        }
-    },
-    watch: {
-        hideIds: {
-            handler(newValue) {
-                this.records = this.records.filter(record => !newValue.includes(record.id) && record);
-            },
-            deep: true
-        },
-        reload() {
-            this.reloadData();
-        },
-        endPoint() {
-            this.reloadData();
-        }
-    },
-    components: {
-        ShRange: script$c,
-        ShSilentAction: script$d,
-        ShConfirmAction: script$e,
-        ShCanvas: script$g,
-        pagination: script$f
-    },
-    computed: {
-        windowWidth: function () {
-            return window.innerWidth
-        },
-        user() {
-            return null
-        },
-        hasDefaultSlot() {
-            return !!this.$slots.default
-        },
-        hasRecordsSlot() {
-            return !!this.$slots.records
-        }
-    }
-};
-
 const _hoisted_1$8 = { class: "auto-table mt-2" };
 const _hoisted_2$5 = {
   key: 0,
@@ -4674,40 +4388,39 @@ const _hoisted_16$1 = {
   key: 1,
   class: "alert alert-danger"
 };
-const _hoisted_17$1 = { colspan: 2 };
-const _hoisted_18$1 = {
+const _hoisted_17$1 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_19 = /*#__PURE__*/vue.createElementVNode("div", {
+const _hoisted_18$1 = /*#__PURE__*/vue.createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, [
   /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
-const _hoisted_20 = [
-  _hoisted_19
+const _hoisted_19 = [
+  _hoisted_18$1
 ];
-const _hoisted_21 = {
+const _hoisted_20 = {
   key: 1,
   class: "alert alert-danger"
 };
-const _hoisted_22 = { colspan: 2 };
-const _hoisted_23 = { class: "sh-thead" };
+const _hoisted_21 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
+const _hoisted_22 = { class: "sh-thead" };
+const _hoisted_23 = ["onClick"];
 const _hoisted_24 = ["onClick"];
 const _hoisted_25 = ["onClick"];
-const _hoisted_26 = ["onClick"];
-const _hoisted_27 = {
+const _hoisted_26 = {
   key: 0,
   class: "text-capitalize"
 };
-const _hoisted_28 = { class: "sh-tbody" };
-const _hoisted_29 = {
+const _hoisted_27 = { class: "sh-tbody" };
+const _hoisted_28 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_30 = ["colspan"];
-const _hoisted_31 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
+const _hoisted_29 = ["colspan"];
+const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
   /*#__PURE__*/vue.createElementVNode("div", {
     class: "spinner-border",
     role: "status"
@@ -4715,42 +4428,42 @@ const _hoisted_31 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-ce
     /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
   ])
 ], -1 /* HOISTED */);
-const _hoisted_32 = [
-  _hoisted_31
+const _hoisted_31 = [
+  _hoisted_30
 ];
-const _hoisted_33 = {
+const _hoisted_32 = {
   key: 1,
   class: "text-center alert alert-danger"
 };
-const _hoisted_34 = ["colspan"];
-const _hoisted_35 = {
+const _hoisted_33 = ["colspan"];
+const _hoisted_34 = {
   key: 2,
   class: "text-center alert alert-info no_records"
 };
-const _hoisted_36 = ["colspan"];
-const _hoisted_37 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
-const _hoisted_38 = ["onClick"];
-const _hoisted_39 = { key: 1 };
-const _hoisted_40 = {
+const _hoisted_35 = ["colspan"];
+const _hoisted_36 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
+const _hoisted_37 = ["onClick"];
+const _hoisted_38 = { key: 1 };
+const _hoisted_39 = {
   key: 2,
   class: "text-success fw-bold"
 };
-const _hoisted_41 = { key: 3 };
+const _hoisted_40 = { key: 3 };
+const _hoisted_41 = ["innerHTML"];
 const _hoisted_42 = ["innerHTML"];
 const _hoisted_43 = ["innerHTML"];
-const _hoisted_44 = ["innerHTML"];
-const _hoisted_45 = {
+const _hoisted_44 = {
   key: 0,
   style: {"white-space":"nowrap"}
 };
-const _hoisted_46 = ["href"];
-const _hoisted_47 = ["title", "onClick"];
-const _hoisted_48 = { key: 5 };
-const _hoisted_49 = {
+const _hoisted_45 = ["href"];
+const _hoisted_46 = ["title", "onClick"];
+const _hoisted_47 = { key: 5 };
+const _hoisted_48 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_50 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
+const _hoisted_49 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
   /*#__PURE__*/vue.createElementVNode("div", {
     class: "spinner-border",
     role: "status"
@@ -4758,58 +4471,362 @@ const _hoisted_50 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-ce
     /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
   ])
 ], -1 /* HOISTED */);
-const _hoisted_51 = [
-  _hoisted_50
+const _hoisted_50 = [
+  _hoisted_49
 ];
-const _hoisted_52 = { key: 1 };
-const _hoisted_53 = {
+const _hoisted_51 = { key: 1 };
+const _hoisted_52 = {
   key: 2,
   class: "mobile-list-items"
 };
-const _hoisted_54 = ["onClick"];
-const _hoisted_55 = {
+const _hoisted_53 = ["onClick"];
+const _hoisted_54 = {
   key: 0,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_56 = {
+const _hoisted_55 = {
   key: 1,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_57 = {
+const _hoisted_56 = {
   key: 2,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_58 = { key: 1 };
-const _hoisted_59 = {
+const _hoisted_57 = { key: 1 };
+const _hoisted_58 = {
   key: 2,
   class: "text-primary fw-bold"
 };
-const _hoisted_60 = { key: 3 };
+const _hoisted_59 = { key: 3 };
+const _hoisted_60 = ["innerHTML"];
 const _hoisted_61 = ["innerHTML"];
 const _hoisted_62 = ["innerHTML"];
-const _hoisted_63 = ["innerHTML"];
-const _hoisted_64 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
-const _hoisted_65 = { key: 0 };
-const _hoisted_66 = ["href"];
-const _hoisted_67 = ["title", "onClick"];
+const _hoisted_63 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
+const _hoisted_64 = { key: 0 };
+const _hoisted_65 = ["href"];
+const _hoisted_66 = ["title", "onClick"];
+
+const __default__ = {
+  name: 'sh-table',
+  props: ['endPoint', 'headers', 'cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange','noRecordsMessage'],
+  data(){
+    return {
+      order_by: '',
+      order_method: '',
+      per_page: this.pageCount ?? shRepo.getShConfig('tablePerPage', 10),
+      page: 1,
+      exactMatch: false,
+      filter_value: '',
+      loading: 'loading',
+      loading_error: '',
+      records: [],
+      total: 0,
+      pagination_data: null,
+      moreDetailsId: null,
+      moreDetailsModel: null,
+      downloading: false,
+      appUrl: window.VITE_APP_API_URL,
+      hasCanvas: 0,
+      selectedRecord: null,
+      timeOut: null,
+      tableHeaders: [],
+      pageStyle: this.paginationStyle ?? shRepo.getShConfig('tablePaginationStyle', 'loadMore'),
+      range: null,
+      from: null,
+      to: null,
+      period: null
+    }
+  },
+  mounted(){
+    if (this.headers) {
+      this.tableHeaders = this.headers;
+    }
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_sh_range = vue.resolveComponent("sh-range");
+    if (this.actions && this.actions.actions) {
+      this.actions.actions.forEach(action => {
+        if (action.canvasComponent) {
+          this.hasCanvas = true;
+        }
+      });
+    }
+    if (this.cacheKey) {
+      this.setCachedData();
+    }
+    this.reloadData();
+  },
+  methods: {
+    rangeChanged: function (newRange){
+      this.range = newRange;
+      this.from = newRange.from.format('L');
+      this.to = newRange.to.format('L');
+      this.period = newRange.period;
+      this.reloadData();
+    },
+    userTyping: function (){
+      if (this.timeOut) {
+        clearTimeout(this.timeOut);
+      }
+      const self = this;
+      this.timeOut = setTimeout(() => {
+        self.reloadData(1);
+      }, 800);
+    },
+    cleanCanvasProps: function (actions){
+      let replaced = actions;
+      replaced.class = null;
+      return replaced
+    },
+    newRecordAdded: function (ev){
+      const record = ev.log;
+      if (record.user) {
+        record.user = record.user.name;
+      }
+      this.records.unshift(record);
+    },
+    canvasClosed: function (){
+      this.selectedRecord = null;
+    },
+    rowSelected: function (row){
+      this.selectedRecord = null;
+      setTimeout(() => {
+        this.selectedRecord = row;
+        this.$emit('rowSelected', row);
+      }, 100);
+    },
+    changeKey: function (key, value){
+      this[key] = value;
+      if (key === 'order_by') {
+        this.order_method = (this.order_method === 'desc') ? 'asc' : 'desc';
+      }
+      if (key === 'per_page') {
+        this.page = 1;
+      }
+      this.reloadData();
+    },
+    getLinkClass: function (config){
+      if (typeof config === 'object') {
+        return config.class
+      }
+      return ''
+    },
+    reloadNotifications: function (){
+      this.reloadData();
+    },
+    replaceActionUrl: function (path, obj){
+      if (path) {
+        var matches = path.match(/\{(.*?)\}/g);
+        try {
+          matches.forEach(key => {
+            key = key.replace('{', '');
+            key = key.replace('}', '');
+            path = path.replace(`{${key}}`, obj[key]);
+          });
+          return path
+        } catch (e) {
+          return path
+        }
+      }
+      return ''
+    },
+    doEmitAction: function (action, data){
+      if (typeof action === 'function') {
+        action(data);
+      } else {
+        this.$emit(action, data);
+      }
+    },
+    getFieldType: function (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'];
+      if (numbers.includes(field)) {
+        return 'numeric'
+      }
+      if (moneys.includes(field)) {
+        return 'money'
+      }
+      if (dates.includes(field)) {
+        return 'date'
+      }
+      return 'string'
+    },
+    replaceLinkUrl: function (path, obj){
+      if (typeof path === 'object') {
+        path = path.link ?? path.url;
+      }
+      var matches = path.match(/\{(.*?)\}/g);
+      matches && matches.forEach(key => {
+        key = key.replace('{', '');
+        key = key.replace('}', '');
+        path = path.replace(`{${key}}`, obj[key]);
+      });
+      return path
+    },
+    formatDate: function (date){
+      return moment__default["default"](date).format('lll')
+    },
+    setMoreDetailsModel: function (row){
+      this.moreDetailsModel = null;
+      this.moreDetailsModel = row;
+    },
+    loadMoreRecords: function (){
+      this.reloadData(this.page + 1, 1);
+    },
+    exportData: function (template){
+      this.downloading = true;
+      const headers = [];
+      const fields = this.downloadFields ? this.downloadFields : this.headers;
+      fields.forEach(header => {
+        if (typeof header === 'string') {
+          headers.push(header);
+        }
+      });
+      const data = {
+        titles: headers,
+        export: 1
+      };
+      shApis.doPost(this.endPoint, data).then(res => {
+        this.downloading = false;
+        if (res.data.file) {
+          const url = this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name;
+          window.location.href = url;
+          // window.open('https://facebook.com')
+          // window.open(this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name, '_blank').focus()
+        }
+      }).catch(reason => {
+        this.downloading = false;
+        const error = (typeof reason.response === 'undefined') ? 'Error getting data from backend' : `${reason.response.status}:${reason.response.statusText}`;
+        shRepo.swalError('Error', error);
+      });
+    },
+    setCachedData: function (){
+      if (this.cacheKey) {
+        this.records = ShStorage.getItem('sh_table_cache_' + this.cacheKey, []);
+      }
+    },
+    reloadData: function (page, append){
+      if (typeof page !== 'undefined') {
+        this.page = page;
+      }
+      if (this.cacheKey && this.records && this.page < 2) {
+        this.loading = 'done';
+      } else if (!append) {
+        this.loading = 'loading';
+      }
+      const data = {
+        order_by: this.order_by,
+        order_method: this.order_method,
+        per_page: this.per_page,
+        page: this.page,
+        filter_value: this.filter_value,
+        paginated: true,
+        from: this.from,
+        to: this.to,
+        period: this.period,
+        exact: this.exactMatch
+      };
+      if (this.pagination_data) {
+        this.pagination_data.loading = 1;
+      }
+      let endPoint = this.endPoint;
+      if (!this.endPoint && this.query) {
+        //send ql query
+        endPoint = 'sh-ql';
+        data.query = this.query;
+      }
+      shApis.doGet(endPoint, data).then(req => {
+        this.$emit('dataReloaded', this.pagination_data);
+        this.loading = 'done';
+        const response = req.data.data;
+        if (this.page < 2 && this.cacheKey) {
+          ShStorage.setItem('sh_table_cache_' + this.cacheKey, response.data);
+        }
+        this.pagination_data = {
+          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 (!this.headers && response.total > 0) {
+          this.tableHeaders = Object.keys(response.data[0]);
+        }
+        if (append) {
+          this.records.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;
+          }
+          this.pagination_data.displayCount = totalShown;
+          const scrollingElement = (document.scrollingElement || document.body);
+          scrollingElement.scrollTop = scrollingElement.scrollHeight;
+        } else {
+          this.records = response.data;
+        }
+      }).catch(reason => {
+        const error = (typeof reason.response === 'undefined') ? 'Error getting data from backend' : `${reason.response.status}:${reason.response.statusText} (${this.endPoint})`;
+        this.loading_error = error;
+        this.loading = 'error';
+      });
+    }
+  },
+  watch: {
+    hideIds: {
+      handler(newValue){
+        this.records = this.records.filter(record => !newValue.includes(record.id) && record);
+      },
+      deep: true
+    },
+    reload(){
+      this.reloadData();
+    },
+    endPoint(){
+      this.reloadData();
+    }
+  },
+  components: {
+    ShRange: script$c,
+    ShSilentAction: script$d,
+    ShConfirmAction: script$e,
+    ShCanvas: script$h,
+    pagination: script$f
+  },
+  computed: {
+    windowWidth: function (){
+      return window.innerWidth
+    },
+    user(){
+      return null
+    },
+    hasDefaultSlot(){
+      return !!this.$slots.default
+    },
+    hasRecordsSlot(){
+      return !!this.$slots.records
+    }
+  }
+};
+
+
+var script$b = /*#__PURE__*/Object.assign(__default__, {
+  setup(__props) {
+
+const noRecordsComponent = vue.inject('noRecordsComponent', script$g);
+
+return (_ctx, _cache) => {
   const _component_router_link = vue.resolveComponent("router-link");
-  const _component_sh_confirm_action = vue.resolveComponent("sh-confirm-action");
-  const _component_sh_silent_action = vue.resolveComponent("sh-silent-action");
-  const _component_pagination = vue.resolveComponent("pagination");
-  const _component_sh_canvas = vue.resolveComponent("sh-canvas");
 
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-    ($props.hasDownload)
+    (__props.hasDownload)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
           vue.createElementVNode("button", {
-            disabled: $data.downloading,
+            disabled: _ctx.downloading,
             class: "btn btn-warning btn-sm",
-            onClick: _cache[0] || (_cache[0] = $event => ($options.exportData()))
+            onClick: _cache[0] || (_cache[0] = $event => (_ctx.exportData()))
           }, [
-            (!$data.downloading)
+            (!_ctx.downloading)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                   _hoisted_4$5,
                   vue.createTextVNode(" Export ")
@@ -4821,37 +4838,37 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 8 /* PROPS */, _hoisted_3$5)
         ]))
       : vue.createCommentVNode("v-if", true),
-    (!$props.hideSearch)
+    (!__props.hideSearch)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
           vue.createElementVNode("div", _hoisted_8$2, [
-            ($props.hasRange)
+            (__props.hasRange)
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
-                  vue.createVNode(_component_sh_range, { onRangeSelected: $options.rangeChanged }, null, 8 /* PROPS */, ["onRangeSelected"])
+                  vue.createVNode(script$c, { onRangeSelected: _ctx.rangeChanged }, null, 8 /* PROPS */, ["onRangeSelected"])
                 ]))
               : vue.createCommentVNode("v-if", true),
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["sh-search-bar input-group", $props.hasRange ? 'ms-2':''])
+              class: vue.normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'ms-2':''])
             }, [
               vue.withDirectives(vue.createElementVNode("input", {
-                onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.userTyping && $options.userTyping(...args))),
-                onKeyup: _cache[2] || (_cache[2] = (...args) => ($options.userTyping && $options.userTyping(...args))),
+                onKeydown: _cache[1] || (_cache[1] = (...args) => (_ctx.userTyping && _ctx.userTyping(...args))),
+                onKeyup: _cache[2] || (_cache[2] = (...args) => (_ctx.userTyping && _ctx.userTyping(...args))),
                 type: "search",
-                onChange: _cache[3] || (_cache[3] = $event => ($options.reloadData(1))),
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (($data.filter_value) = $event)),
-                placeholder: $props.searchPlaceholder ? $props.searchPlaceholder : 'Search',
+                onChange: _cache[3] || (_cache[3] = $event => (_ctx.reloadData(1))),
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((_ctx.filter_value) = $event)),
+                placeholder: __props.searchPlaceholder ? __props.searchPlaceholder : 'Search',
                 class: "form-control sh-search-input"
               }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_10$1), [
-                [vue.vModelText, $data.filter_value]
+                [vue.vModelText, _ctx.filter_value]
               ]),
-              ($data.filter_value.length > 1)
+              (_ctx.filter_value.length > 1)
                 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, [
                     vue.withDirectives(vue.createElementVNode("input", {
-                      onChange: _cache[5] || (_cache[5] = (...args) => ($options.reloadData && $options.reloadData(...args))),
+                      onChange: _cache[5] || (_cache[5] = (...args) => (_ctx.reloadData && _ctx.reloadData(...args))),
                       value: true,
-                      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => (($data.exactMatch) = $event)),
+                      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((_ctx.exactMatch) = $event)),
                       type: "checkbox"
                     }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
-                      [vue.vModelCheckbox, $data.exactMatch]
+                      [vue.vModelCheckbox, _ctx.exactMatch]
                     ]),
                     _hoisted_12$1
                   ]))
@@ -4860,17 +4877,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ]))
       : vue.createCommentVNode("v-if", true),
-    ($options.hasDefaultSlot)
+    (_ctx.hasDefaultSlot)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          ($data.loading === 'loading')
+          (_ctx.loading === 'loading')
             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, _hoisted_15$1))
-            : ($data.loading === 'error')
+            : (_ctx.loading === 'error')
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
-                  vue.createElementVNode("span", _hoisted_17$1, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
+                  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
                 ]))
               : vue.createCommentVNode("v-if", true),
-          ($data.loading === 'done')
-            ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList($data.records, (record) => {
+          (_ctx.loading === 'done')
+            ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.records, (record) => {
                 return vue.renderSlot(_ctx.$slots, "default", {
                   key: record.id,
                   record: record
@@ -4878,137 +4895,145 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }), 128 /* KEYED_FRAGMENT */))
             : vue.createCommentVNode("v-if", true)
         ], 64 /* STABLE_FRAGMENT */))
-      : ($options.hasRecordsSlot)
+      : (_ctx.hasRecordsSlot)
         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-            ($data.loading === 'loading')
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, _hoisted_20))
-              : ($data.loading === 'error')
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, [
-                    vue.createElementVNode("span", _hoisted_22, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
+            (_ctx.loading === 'loading')
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, _hoisted_19))
+              : (_ctx.loading === 'error')
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
+                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
                   ]))
                 : vue.createCommentVNode("v-if", true),
-            ($data.loading === 'done')
-              ? vue.renderSlot(_ctx.$slots, "records", {
-                  key: 2,
-                  records: $data.records
-                })
+            (_ctx.loading === 'done')
+              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                  (_ctx.records.length === 0)
+                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(noRecordsComponent)), { key: 0 }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_21,
+                          vue.createTextVNode(" " + vue.toDisplayString(__props.noRecordsMessage ?? 'No records found'), 1 /* TEXT */)
+                        ]),
+                        _: 1 /* STABLE */
+                      }))
+                    : vue.createCommentVNode("v-if", true),
+                  vue.renderSlot(_ctx.$slots, "records", { records: _ctx.records })
+                ], 64 /* STABLE_FRAGMENT */))
               : vue.createCommentVNode("v-if", true)
           ], 64 /* STABLE_FRAGMENT */))
-        : ($options.windowWidth > 700)
+        : (_ctx.windowWidth > 700)
           ? (vue.openBlock(), vue.createElementBlock("table", {
               key: 4,
-              class: vue.normalizeClass(["table sh-table", $props.tableHover ? 'table-hover':''])
+              class: vue.normalizeClass(["table sh-table", __props.tableHover ? 'table-hover':''])
             }, [
-              vue.createElementVNode("thead", _hoisted_23, [
+              vue.createElementVNode("thead", _hoisted_22, [
                 vue.createElementVNode("tr", null, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.tableHeaders, (title) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tableHeaders, (title) => {
                     return (vue.openBlock(), vue.createElementBlock("th", { key: title }, [
                       (typeof title === 'string')
                         ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "text-capitalize",
-                            onClick: $event => ($options.changeKey('order_by',title))
-                          }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
+                            onClick: $event => (_ctx.changeKey('order_by',title))
+                          }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
                         : (typeof title === 'function')
                           ? (vue.openBlock(), vue.createElementBlock("a", {
                               key: 1,
                               class: "text-capitalize",
-                              onClick: $event => ($options.changeKey('order_by',title(null)))
-                            }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
+                              onClick: $event => (_ctx.changeKey('order_by',title(null)))
+                            }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
                           : (typeof title !== 'undefined')
                             ? (vue.openBlock(), vue.createElementBlock("a", {
                                 key: 2,
                                 class: "text-capitalize",
-                                onClick: $event => ($options.changeKey('order_by',title))
-                              }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_26))
+                                onClick: $event => (_ctx.changeKey('order_by',title))
+                              }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
                             : vue.createCommentVNode("v-if", true)
                     ]))
                   }), 128 /* KEYED_FRAGMENT */)),
-                  ($props.actions)
-                    ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_27, vue.toDisplayString($props.actions.label), 1 /* TEXT */))
+                  (__props.actions)
+                    ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_26, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
                     : vue.createCommentVNode("v-if", true)
                 ])
               ]),
-              vue.createElementVNode("tbody", _hoisted_28, [
-                ($data.loading === 'loading')
-                  ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_29, [
+              vue.createElementVNode("tbody", _hoisted_27, [
+                (_ctx.loading === 'loading')
+                  ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_28, [
                       vue.createElementVNode("td", {
-                        colspan: $data.tableHeaders.length
-                      }, _hoisted_32, 8 /* PROPS */, _hoisted_30)
+                        colspan: _ctx.tableHeaders.length
+                      }, _hoisted_31, 8 /* PROPS */, _hoisted_29)
                     ]))
-                  : ($data.loading === 'error')
-                    ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_33, [
+                  : (_ctx.loading === 'error')
+                    ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_32, [
                         vue.createElementVNode("td", {
-                          colspan: $data.tableHeaders.length
-                        }, vue.toDisplayString($data.loading_error), 9 /* TEXT, PROPS */, _hoisted_34)
+                          colspan: _ctx.tableHeaders.length
+                        }, vue.toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
                       ]))
-                    : ($data.records.length === 0)
-                      ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_35, [
+                    : (_ctx.records.length === 0)
+                      ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_34, [
                           vue.createElementVNode("td", {
-                            colspan: $props.actions ? $data.tableHeaders.length + 1 : $data.tableHeaders.length
+                            colspan: __props.actions ? _ctx.tableHeaders.length + 1 : _ctx.tableHeaders.length
                           }, [
-                            _hoisted_37,
+                            _hoisted_36,
                             vue.createTextVNode(" No records found ")
-                          ], 8 /* PROPS */, _hoisted_36)
+                          ], 8 /* PROPS */, _hoisted_35)
                         ]))
-                      : ($data.loading === 'done')
-                        ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList($data.records, (record, index) => {
+                      : (_ctx.loading === 'done')
+                        ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(_ctx.records, (record, index) => {
                             return (vue.openBlock(), vue.createElementBlock("tr", {
                               key: record.id,
                               class: vue.normalizeClass(record.class),
-                              onClick: $event => ($options.rowSelected(record))
+                              onClick: $event => (_ctx.rowSelected(record))
                             }, [
-                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.tableHeaders, (key) => {
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tableHeaders, (key) => {
                                 return (vue.openBlock(), vue.createElementBlock("td", { key: key }, [
-                                  (typeof key === 'string' && $props.links && $props.links[key])
+                                  (typeof key === 'string' && __props.links && __props.links[key])
                                     ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                         key: 0,
-                                        target: $props.links[key].target ? '_blank':'',
-                                        to: $options.replaceLinkUrl($props.links[key],record),
-                                        class: vue.normalizeClass($options.getLinkClass($props.links[key])),
+                                        target: __props.links[key].target ? '_blank':'',
+                                        to: _ctx.replaceLinkUrl(__props.links[key],record),
+                                        class: vue.normalizeClass(_ctx.getLinkClass(__props.links[key])),
                                         innerHTML: record[key]
                                       }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
-                                    : ($options.getFieldType(key) === 'numeric')
-                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                      : ($options.getFieldType(key) === 'money')
-                                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                        : ($options.getFieldType(key) === 'date')
-                                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_41, vue.toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
+                                    : (_ctx.getFieldType(key) === 'numeric')
+                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_38, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                      : (_ctx.getFieldType(key) === 'money')
+                                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                        : (_ctx.getFieldType(key) === 'date')
+                                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
                                           : (typeof key === 'string')
                                             ? (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 4,
                                                 innerHTML: record[key]
-                                              }, null, 8 /* PROPS */, _hoisted_42))
+                                              }, null, 8 /* PROPS */, _hoisted_41))
                                             : (typeof key === 'function')
                                               ? (vue.openBlock(), vue.createElementBlock("span", {
                                                   key: 5,
                                                   innerHTML: key(record, index)
-                                                }, null, 8 /* PROPS */, _hoisted_43))
+                                                }, null, 8 /* PROPS */, _hoisted_42))
                                               : (vue.openBlock(), vue.createElementBlock("span", {
                                                   key: 6,
                                                   innerHTML: record[key[0]]
-                                                }, null, 8 /* PROPS */, _hoisted_44))
+                                                }, null, 8 /* PROPS */, _hoisted_43))
                                 ]))
                               }), 128 /* KEYED_FRAGMENT */)),
-                              ($props.actions)
-                                ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_45, [
-                                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.actions.actions, (act) => {
+                              (__props.actions)
+                                ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_44, [
+                                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions.actions, (act) => {
                                       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                         key: act.path
                                       }, [
-                                        (!act.permission || $options.user.isAllowedTo(act.permission))
+                                        (!act.permission || _ctx.user.isAllowedTo(act.permission))
                                           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                               (!act.validator || act.validator(record))
                                                 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                                     (['confirmAction','confirmaction','confirm-action','confirm'].includes(act.type))
-                                                      ? (vue.openBlock(), vue.createBlock(_component_sh_confirm_action, {
+                                                      ? (vue.openBlock(), vue.createBlock(script$e, {
                                                           key: 0,
-                                                          onActionSuccessful: $event => ($options.doEmitAction('actionSuccessful',record)),
-                                                          onActionFailed: $event => ($options.doEmitAction('actionFailed',record)),
-                                                          onActionCanceled: $event => ($options.doEmitAction('actionCanceled',record)),
+                                                          onActionSuccessful: $event => (_ctx.doEmitAction('actionSuccessful',record)),
+                                                          onActionFailed: $event => (_ctx.doEmitAction('actionFailed',record)),
+                                                          onActionCanceled: $event => (_ctx.doEmitAction('actionCanceled',record)),
                                                           "loading-message": act.label,
                                                           class: vue.normalizeClass(act.class),
-                                                          url: $options.replaceActionUrl(act.url,record)
+                                                          url: _ctx.replaceActionUrl(act.url,record)
                                                         }, {
                                                           default: vue.withCtx(() => [
                                                             (act.icon)
@@ -5022,14 +5047,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                           _: 2 /* DYNAMIC */
                                                         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onActionSuccessful", "onActionFailed", "onActionCanceled", "loading-message", "class", "url"]))
                                                       : (['silentAction','silentaction','silent-action','silent'].includes(act.type))
-                                                        ? (vue.openBlock(), vue.createBlock(_component_sh_silent_action, {
+                                                        ? (vue.openBlock(), vue.createBlock(script$d, {
                                                             key: 1,
-                                                            onActionSuccessful: $event => ($options.doEmitAction('actionSuccessful',record)),
-                                                            onActionFailed: $event => ($options.doEmitAction('actionFailed',record)),
-                                                            onActionCanceled: $event => ($options.doEmitAction('actionCanceled',record)),
+                                                            onActionSuccessful: $event => (_ctx.doEmitAction('actionSuccessful',record)),
+                                                            onActionFailed: $event => (_ctx.doEmitAction('actionFailed',record)),
+                                                            onActionCanceled: $event => (_ctx.doEmitAction('actionCanceled',record)),
                                                             "loading-message": act.label,
                                                             class: vue.normalizeClass(act.class),
-                                                            url: $options.replaceActionUrl(act.url,record)
+                                                            url: _ctx.replaceActionUrl(act.url,record)
                                                           }, {
                                                             default: vue.withCtx(() => [
                                                               (act.icon)
@@ -5056,13 +5081,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                                   }, null, 2 /* CLASS */))
                                                                 : vue.createCommentVNode("v-if", true),
                                                               vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
-                                                            ], 10 /* CLASS, PROPS */, _hoisted_46))
+                                                            ], 10 /* CLASS, PROPS */, _hoisted_45))
                                                           : (act.emits)
                                                             ? (vue.openBlock(), vue.createElementBlock("button", {
                                                                 key: 3,
                                                                 title: act.title,
                                                                 class: vue.normalizeClass(act.class ? act.class:'btn btn-default'),
-                                                                onClick: $event => ($options.doEmitAction(act.emits,record))
+                                                                onClick: $event => (_ctx.doEmitAction(act.emits,record))
                                                               }, [
                                                                 (act.icon)
                                                                   ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -5071,12 +5096,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                                     }, null, 2 /* CLASS */))
                                                                   : vue.createCommentVNode("v-if", true),
                                                                 vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
-                                                              ], 10 /* CLASS, PROPS */, _hoisted_47))
+                                                              ], 10 /* CLASS, PROPS */, _hoisted_46))
                                                             : (!act.emits)
                                                               ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                                                   key: 4,
                                                                   title: act.title,
-                                                                  to: $options.replaceActionUrl(act.path,record),
+                                                                  to: _ctx.replaceActionUrl(act.path,record),
                                                                   class: vue.normalizeClass(act.class)
                                                                 }, {
                                                                   default: vue.withCtx(() => [
@@ -5099,74 +5124,74 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     }), 128 /* KEYED_FRAGMENT */))
                                   ]))
                                 : vue.createCommentVNode("v-if", true)
-                            ], 10 /* CLASS, PROPS */, _hoisted_38))
+                            ], 10 /* CLASS, PROPS */, _hoisted_37))
                           }), 128 /* KEYED_FRAGMENT */))
                         : vue.createCommentVNode("v-if", true)
               ])
             ], 2 /* CLASS */))
-          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [
-              ($data.loading === 'loading')
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, _hoisted_51))
-                : ($data.loading === 'error')
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
-                      vue.createElementVNode("span", null, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
+          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, [
+              (_ctx.loading === 'loading')
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, _hoisted_50))
+                : (_ctx.loading === 'error')
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_51, [
+                      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
                     ]))
-                  : ($data.loading === 'done')
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_53, [
-                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.records, (record, index) => {
+                  : (_ctx.loading === 'done')
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
+                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.records, (record, index) => {
                           return (vue.openBlock(), vue.createElementBlock("div", {
                             key: record.id,
                             class: "single-mobile-req bg-light p-3",
-                            onClick: $event => ($options.rowSelected(record))
+                            onClick: $event => (_ctx.rowSelected(record))
                           }, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.tableHeaders, (key) => {
+                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tableHeaders, (key) => {
                               return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                 key: key[0]
                               }, [
                                 (typeof key === 'string' )
-                                  ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_55, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
+                                  ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_54, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
                                   : (typeof key === 'function')
-                                    ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_56, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
-                                    : (vue.openBlock(), vue.createElementBlock("p", _hoisted_57, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
+                                    ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_55, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
+                                    : (vue.openBlock(), vue.createElementBlock("p", _hoisted_56, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
                                 vue.createElementVNode("span", null, [
-                                  (typeof key === 'string' && $props.links && $props.links[key])
+                                  (typeof key === 'string' && __props.links && __props.links[key])
                                     ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                         key: 0,
-                                        to: $options.replaceLinkUrl($props.links[key],record),
-                                        class: vue.normalizeClass($options.getLinkClass($props.links[key])),
+                                        to: _ctx.replaceLinkUrl(__props.links[key],record),
+                                        class: vue.normalizeClass(_ctx.getLinkClass(__props.links[key])),
                                         innerHTML: record[key]
                                       }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
-                                    : ($options.getFieldType(key) === 'numeric')
-                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_58, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                      : ($options.getFieldType(key) === 'money')
-                                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_59, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                        : ($options.getFieldType(key) === 'date')
-                                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_60, vue.toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
+                                    : (_ctx.getFieldType(key) === 'numeric')
+                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_57, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                      : (_ctx.getFieldType(key) === 'money')
+                                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_58, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                        : (_ctx.getFieldType(key) === 'date')
+                                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_59, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
                                           : (typeof key    === 'string')
                                             ? (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 4,
                                                 innerHTML: record[key]
-                                              }, null, 8 /* PROPS */, _hoisted_61))
+                                              }, null, 8 /* PROPS */, _hoisted_60))
                                             : (typeof key === 'function')
                                               ? (vue.openBlock(), vue.createElementBlock("span", {
                                                   key: 5,
                                                   innerHTML: key(record, index )
-                                                }, null, 8 /* PROPS */, _hoisted_62))
+                                                }, null, 8 /* PROPS */, _hoisted_61))
                                               : (vue.openBlock(), vue.createElementBlock("span", {
                                                   key: 6,
                                                   innerHTML: record[key[0]]
-                                                }, null, 8 /* PROPS */, _hoisted_63))
+                                                }, null, 8 /* PROPS */, _hoisted_62))
                                 ]),
-                                _hoisted_64
+                                _hoisted_63
                               ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */)),
-                            ($props.actions)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_65, [
-                                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.actions.actions, (act) => {
+                            (__props.actions)
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_64, [
+                                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions.actions, (act) => {
                                     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                       key: act.path
                                     }, [
-                                      (!act.permission || $options.user.isAllowedTo(act.permission))
+                                      (!act.permission || _ctx.user.isAllowedTo(act.permission))
                                         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                             (!act.validator || act.validator(record))
                                               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -5184,13 +5209,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                             }, null, 2 /* CLASS */))
                                                           : vue.createCommentVNode("v-if", true),
                                                         vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
-                                                      ], 10 /* CLASS, PROPS */, _hoisted_66))
+                                                      ], 10 /* CLASS, PROPS */, _hoisted_65))
                                                     : (act.emits)
                                                       ? (vue.openBlock(), vue.createElementBlock("button", {
                                                           key: 1,
                                                           title: act.title,
                                                           class: vue.normalizeClass(act.class ? act.class:'btn btn-default'),
-                                                          onClick: $event => ($options.doEmitAction(act.emits,record))
+                                                          onClick: $event => (_ctx.doEmitAction(act.emits,record))
                                                         }, [
                                                           (act.icon)
                                                             ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -5199,12 +5224,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                               }, null, 2 /* CLASS */))
                                                             : vue.createCommentVNode("v-if", true),
                                                           vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
-                                                        ], 10 /* CLASS, PROPS */, _hoisted_67))
+                                                        ], 10 /* CLASS, PROPS */, _hoisted_66))
                                                       : (!act.emits)
                                                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                                             key: 2,
                                                             title: act.title,
-                                                            to: $options.replaceActionUrl(act.path,record),
+                                                            to: _ctx.replaceActionUrl(act.path,record),
                                                             class: vue.normalizeClass(act.class)
                                                           }, {
                                                             default: vue.withCtx(() => [
@@ -5227,42 +5252,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   }), 128 /* KEYED_FRAGMENT */))
                                 ]))
                               : vue.createCommentVNode("v-if", true)
-                          ], 8 /* PROPS */, _hoisted_54))
+                          ], 8 /* PROPS */, _hoisted_53))
                         }), 128 /* KEYED_FRAGMENT */))
                       ]))
                     : vue.createCommentVNode("v-if", true)
             ])),
-    ($data.pagination_data)
-      ? (vue.openBlock(), vue.createBlock(_component_pagination, {
+    (_ctx.pagination_data)
+      ? (vue.openBlock(), vue.createBlock(script$f, {
           key: 6,
-          onLoadMoreRecords: $options.loadMoreRecords,
-          "hide-load-more": $props.hideLoadMore,
-          "hide-count": $props.hideCount,
-          pagination_data: $data.pagination_data,
-          onChangeKey: $options.changeKey,
-          "pagination-style": $data.pageStyle
+          onLoadMoreRecords: _ctx.loadMoreRecords,
+          "hide-load-more": __props.hideLoadMore,
+          "hide-count": __props.hideCount,
+          pagination_data: _ctx.pagination_data,
+          onChangeKey: _ctx.changeKey,
+          "pagination-style": _ctx.pageStyle
         }, null, 8 /* PROPS */, ["onLoadMoreRecords", "hide-load-more", "hide-count", "pagination_data", "onChangeKey", "pagination-style"]))
       : vue.createCommentVNode("v-if", true),
-    ($props.actions)
-      ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 7 }, vue.renderList($props.actions.actions, (action) => {
+    (__props.actions)
+      ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 7 }, vue.renderList(__props.actions.actions, (action) => {
           return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: action.label
           }, [
             (action.canvasId)
-              ? (vue.openBlock(), vue.createBlock(_component_sh_canvas, {
+              ? (vue.openBlock(), vue.createBlock(script$h, {
                   key: 0,
-                  onOffcanvasClosed: $options.canvasClosed,
+                  onOffcanvasClosed: _ctx.canvasClosed,
                   position: action.canvasPosition,
                   "canvas-size": action.canvasSize,
                   "canvas-title": action.canvasTitle,
                   "canvas-id": action.canvasId
                 }, {
                   default: vue.withCtx(() => [
-                    ($data.selectedRecord)
+                    (_ctx.selectedRecord)
                       ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(action.canvasComponent), vue.mergeProps({
                           key: 0,
-                          onRecordUpdated: $options.reloadData
-                        }, $options.cleanCanvasProps(action), { record: $data.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
+                          onRecordUpdated: _ctx.reloadData
+                        }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
                       : vue.createCommentVNode("v-if", true)
                   ]),
                   _: 2 /* DYNAMIC */
@@ -5273,8 +5298,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : vue.createCommentVNode("v-if", true)
   ]))
 }
+}
+
+});
 
-script$b.render = render;
 script$b.__file = "src/lib/components/ShTable.vue";
 
 var script$a = {
@@ -5957,7 +5984,7 @@ return (_ctx, _cache) => {
       class: "d-none"
     }, "Open Modal", 8 /* PROPS */, _hoisted_1$3),
     (popUp.value === 'modal')
-      ? (vue.openBlock(), vue.createBlock(script$j, {
+      ? (vue.openBlock(), vue.createBlock(script$k, {
           key: 0,
           "modal-title": title.value,
           "modal-id": vue.unref(modalId),
@@ -5972,7 +5999,7 @@ return (_ctx, _cache) => {
         }, 8 /* PROPS */, ["modal-title", "modal-id", "modal-size"]))
       : vue.createCommentVNode("v-if", true),
     (['offcanvas','canvas','offCanvas'].includes(popUp.value))
-      ? (vue.openBlock(), vue.createBlock(script$g, {
+      ? (vue.openBlock(), vue.createBlock(script$h, {
           key: 1,
           "canvas-id": vue.unref(canvasId),
           "canvas-title": title.value,
@@ -6003,7 +6030,7 @@ const fields = route.query.fields.split(',');
 const action = route.query.action;
 
 return (_ctx, _cache) => {
-  return (vue.openBlock(), vue.createBlock(script$l, {
+  return (vue.openBlock(), vue.createBlock(script$m, {
     fields: vue.unref(fields),
     action: vue.unref(action)
   }, null, 8 /* PROPS */, ["fields", "action"]))
@@ -6104,7 +6131,7 @@ const goBack = () => {
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
     (popUp.value === 'modal')
-      ? (vue.openBlock(), vue.createBlock(script$j, {
+      ? (vue.openBlock(), vue.createBlock(script$k, {
           key: 0,
           "modal-title": title.value,
           "data-bs-backdrop": "static",
@@ -6119,7 +6146,7 @@ return (_ctx, _cache) => {
         }, 8 /* PROPS */, ["modal-title", "modal-id", "modal-size"]))
       : vue.createCommentVNode("v-if", true),
     (['offcanvas','canvas','offCanvas'].includes(popUp.value))
-      ? (vue.openBlock(), vue.createBlock(script$g, {
+      ? (vue.openBlock(), vue.createBlock(script$h, {
           "canvas-title": title.value,
           key: size.value + position.value,
           "canvas-id": vue.unref(canvasId),
@@ -6224,12 +6251,12 @@ return (_ctx, _cache) => {
       ]
     }
         }, null, 8 /* PROPS */, ["reload", "actions"]),
-        vue.createVNode(script$j, {
+        vue.createVNode(script$k, {
           "modal-id": "sh_department_modal",
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$s, {
+            vue.createVNode(script$t, {
               "success-callback": "departmentAdded",
               "current-data": department.value,
               onDepartmentAdded: departmentAdded,
@@ -6384,12 +6411,12 @@ return (_ctx, _cache) => {
             headers: ['id',showModule,'created_at'],
             "end-point": 'admin/departments/department/list-modules/' + id.value
           }, null, 8 /* PROPS */, ["actions", "reload", "headers", "end-point"]),
-          vue.createVNode(script$j, {
+          vue.createVNode(script$k, {
             "modal-id": "addModule",
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$s, {
+              vue.createVNode(script$t, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -6411,7 +6438,7 @@ return (_ctx, _cache) => {
             ref: permissionCanvasBtn,
             "data-bs-toggle": "offcanvas"
           }, null, 512 /* NEED_PATCH */),
-          vue.createVNode(script$g, {
+          vue.createVNode(script$h, {
             "canvas-id": "permissionsCanvas",
             position: "end enlarged",
             "canvas-title": "Module Permissions"
@@ -6526,7 +6553,7 @@ return (_ctx, _cache) => {
     : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
         (section.value === 'login')
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createVNode(script$s, {
+              vue.createVNode(script$t, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -6551,7 +6578,7 @@ return (_ctx, _cache) => {
               (vue.unref(registerSubTitle))
                 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
-              vue.createVNode(script$s, {
+              vue.createVNode(script$t, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -6598,10 +6625,11 @@ const ShFrontend = {
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
-    options.formTextInput ?? script$p;
+    options.formTextInput ?? script$q;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
+    const noRecordsComponent = options.noRecordsComponent ?? script$g;
     const registrationFields = options.registrationFields ?? ['name','email','phone','password','password_confirmation'];
     const AuthComponent = options.authComponent ?? script;
     app.provide('loginEndpoint',loginEndpoint);
@@ -6615,6 +6643,7 @@ const ShFrontend = {
     app.provide('formComponents', options.shFormComponents ?? {});
     app.provide('loginUrl', loginUrl);
     app.provide('shFormElementClasses',defaultFormElementClasses);
+    app.provide('noRecordsComponent',noRecordsComponent);
     window.swalPosition = swalPosition;
     if(options.router) {
       options.router.addRoute({
@@ -6658,24 +6687,24 @@ var shGql = {
 
 exports.Countries = countries;
 exports.ManagePermissions = script$6;
-exports.ShAutoForm = script$l;
-exports.ShCanvas = script$g;
+exports.ShAutoForm = script$m;
+exports.ShCanvas = script$h;
 exports.ShCanvasBtn = script$7;
 exports.ShConfirmAction = script$e;
-exports.ShDropDownForm = script$k;
+exports.ShDropDownForm = script$l;
 exports.ShDynamicTabs = script$9;
-exports.ShForm = script$s;
+exports.ShForm = script$t;
 exports.ShFrontend = ShFrontend;
-exports.ShModal = script$j;
+exports.ShModal = script$k;
 exports.ShModalBtn = script$8;
-exports.ShModalForm = script$i;
-exports.ShModalFormAuto = script$h;
-exports.ShPhone = script$u;
+exports.ShModalForm = script$j;
+exports.ShModalFormAuto = script$i;
+exports.ShPhone = script$v;
 exports.ShQueryPopups = script$3;
 exports.ShRange = script$c;
 exports.ShRoutePopups = script$5;
 exports.ShSilentAction = script$d;
-exports.ShSuggest = script$t;
+exports.ShSuggest = script$u;
 exports.ShTable = script$b;
 exports.ShTabs = script$a;
 exports.shApis = shApis;