@iankibetsh/shframework 1.6.2 → 1.6.4

package/dist/library.js

@@ -1874,7 +1874,7 @@ const countries = [
   }
 ];
 
-var script$p = {
+var script$r = {
   name: 'PhoneInput',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1936,7 +1936,7 @@ var script$p = {
   }
 };
 
-const _hoisted_1$k = { class: "sh-phone mb-3" };
+const _hoisted_1$m = { class: "sh-phone mb-3" };
 const _hoisted_2$d = {
   key: 0,
   style: {"display":"contents"}
@@ -1944,8 +1944,8 @@ const _hoisted_2$d = {
 const _hoisted_3$c = ["src"];
 const _hoisted_4$c = ["value"];
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
     ($data.selectedCountry)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
           vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$c),
@@ -1979,10 +1979,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$p.render = render$7;
-script$p.__file = "src/lib/components/form-components/PhoneInput.vue";
+script$r.render = render$5;
+script$r.__file = "src/lib/components/form-components/PhoneInput.vue";
 
-var script$o = {
+var script$q = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2021,17 +2021,17 @@ var script$o = {
   }
 };
 
-const _hoisted_1$j = /*#__PURE__*/vue.createElementVNode("textarea", {
+const _hoisted_1$l = /*#__PURE__*/vue.createElementVNode("textarea", {
   id: "tiny",
   style: {"display":"none"},
   "data-cy": "tinymce_editor"
 }, null, -1 /* HOISTED */);
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = vue.resolveComponent("editor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$j,
+    _hoisted_1$l,
     vue.createElementVNode("div", {
       onFocusin: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["stop"])),
       class: "sh-editor w-100"
@@ -2056,10 +2056,10 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$o.render = render$6;
-script$o.__file = "src/lib/components/form-components/ShEditor.vue";
+script$q.render = render$4;
+script$q.__file = "src/lib/components/form-components/ShEditor.vue";
 
-const _hoisted_1$i = {
+const _hoisted_1$k = {
   key: 0,
   class: "dropdown sh-suggest"
 };
@@ -2080,7 +2080,7 @@ const _hoisted_10$4 = {
 };
 
 
-var script$n = {
+var script$p = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2161,7 +2161,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (vue.unref(id))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
         vue.createElementVNode("div", {
           id: vue.unref(id),
           "data-bs-toggle": "dropdown",
@@ -2221,16 +2221,16 @@ return (_ctx, _cache) => {
 
 };
 
-script$n.__scopeId = "data-v-71cc9569";
-script$n.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$p.__scopeId = "data-v-71cc9569";
+script$p.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$m = {
+var script$o = {
   name: 'ShForm',
   components: {
-    PhoneInput: script$p,
-    ShSuggest: script$n,
-    ShEditor: script$o,
-    ShPhone: script$p
+    PhoneInput: script$r,
+    ShSuggest: script$p,
+    ShEditor: script$q,
+    ShPhone: script$r
   },
   props: [
       'action',
@@ -2396,10 +2396,21 @@ var script$m = {
     closeModal: function () {
       document.body.style = '';
       setTimeout(() => {
-        const modal = this.$refs.ShAutoForm.closest('.modal-dialog');
-        if(modal){
-          const closeBtn = modal.querySelector('[data-bs-dismiss="modal"]');
-          closeBtn && closeBtn.click();
+        const form = this.$refs.ShAutoForm;
+        if(form){
+          const modal = form.closest('.modal-dialog');
+          if(modal){
+            const closeBtn = modal.querySelector('[data-bs-dismiss="modal"]');
+            closeBtn && closeBtn.click();
+          }
+        } else {
+          //form was mysteriously unmounted! try remove any modal backdrop if possible
+          const modalBackdrop = document.querySelector('.modal-backdrop');
+          if(modalBackdrop) {
+            if(!document.querySelector('.modal.show')){
+              modalBackdrop.remove();
+            }
+          }
         }
         this.form_status = 0;
       }, 1500);
@@ -2541,7 +2552,7 @@ var script$m = {
   }
 };
 
-const _hoisted_1$h = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_1$j = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
 const _hoisted_2$b = {
   ref: "ShAutoForm",
   class: "sh-form"
@@ -2597,13 +2608,13 @@ const _hoisted_24$1 = /*#__PURE__*/vue.createElementVNode("span", {
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_phone_input = vue.resolveComponent("phone-input");
   const _component_ShSuggest = vue.resolveComponent("ShSuggest");
   const _component_ShEditor = vue.resolveComponent("ShEditor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$h,
+    _hoisted_1$j,
     vue.createElementVNode("form", _hoisted_2$b, [
       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>"),
@@ -2820,10 +2831,10 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$m.render = render$5;
-script$m.__file = "src/lib/components/ShForm.vue";
+script$o.render = render$3;
+script$o.__file = "src/lib/components/ShForm.vue";
 
-var script$l = {
+var script$n = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2859,12 +2870,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$l.__file = "src/lib/components/form-components/EmailInput.vue";
+script$n.__file = "src/lib/components/form-components/EmailInput.vue";
 
-const _hoisted_1$g = ["min", "max"];
+const _hoisted_1$i = ["min", "max"];
 
 
-var script$k = {
+var script$m = {
   __name: 'NumberInput',
   props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2894,7 +2905,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$g)), [
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$i)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2902,9 +2913,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$k.__file = "src/lib/components/form-components/NumberInput.vue";
+script$m.__file = "src/lib/components/form-components/NumberInput.vue";
 
-var script$j = {
+var script$l = {
   __name: 'TextInput',
   props: ['modelValue','label','isInvalid'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2940,9 +2951,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$j.__file = "src/lib/components/form-components/TextInput.vue";
+script$l.__file = "src/lib/components/form-components/TextInput.vue";
 
-var script$i = {
+var script$k = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2978,12 +2989,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$i.__file = "src/lib/components/form-components/TextAreaInput.vue";
+script$k.__file = "src/lib/components/form-components/TextAreaInput.vue";
 
-const _hoisted_1$f = ["value"];
+const _hoisted_1$h = ["value"];
 
 
-var script$h = {
+var script$j = {
   __name: 'SelectInput',
   props: ['modelValue','label','data','dataUrl'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -3034,7 +3045,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$f))
+      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$h))
     }), 128 /* KEYED_FRAGMENT */))
   ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
     [vue.vModelSelect, inputModel.value]
@@ -3044,9 +3055,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$h.__file = "src/lib/components/form-components/SelectInput.vue";
+script$j.__file = "src/lib/components/form-components/SelectInput.vue";
 
-var script$g = {
+var script$i = {
   __name: 'PasswordInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -3082,9 +3093,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$g.__file = "src/lib/components/form-components/PasswordInput.vue";
+script$i.__file = "src/lib/components/form-components/PasswordInput.vue";
 
-const _hoisted_1$e = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
+const _hoisted_1$g = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
 const _hoisted_2$a = ["innerHTML"];
 const _hoisted_3$9 = ["innerHTML"];
 const _hoisted_4$9 = ["innerHTML"];
@@ -3098,13 +3109,14 @@ const _hoisted_6$6 = {
 const _hoisted_7$4 = { key: 1 };
 
 
-var script$f = {
+var script$h = {
   __name: 'ShAutoForm',
   props: [
     'action','successCallback','retainDataAfterSubmission',
   'successMessage','fields','customComponents','placeHolders',
   'formClasses',
   'helperTexts','labels','data',
+  'formClass',
   'actionLabel',
     'textAreas',
     'currentData',
@@ -3130,13 +3142,13 @@ const getFieldComponent = (fieldObj)=>{
   const defaultPhones = ['phone'];
   const defaultEmails = ['email'];
   const formComponents = vue.inject('formComponents');
-  const TextComponent = formComponents.text ?? script$j;
-  const TextAreaComponent = formComponents.textArea ?? script$i;
-  const EmailComponent = formComponents.email ?? script$l;
-  const PhoneComponent = formComponents.phone ?? script$p;
-  const NumberComponent = formComponents.number ?? script$k;
-  const SelectComponent = formComponents.select ?? script$h;
-  const PasswordComponent = formComponents.password ?? script$g;
+  const TextComponent = formComponents.text ?? script$l;
+  const TextAreaComponent = formComponents.textArea ?? script$k;
+  const EmailComponent = formComponents.email ?? script$n;
+  const PhoneComponent = formComponents.phone ?? script$r;
+  const NumberComponent = formComponents.number ?? script$m;
+  const SelectComponent = formComponents.select ?? script$j;
+  const PasswordComponent = formComponents.password ?? script$i;
   if(props.customComponents && props.customComponents[field]) {
     return props.customComponents[field]
   }
@@ -3148,16 +3160,16 @@ const getFieldComponent = (fieldObj)=>{
   }
   else
   if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
-    return formComponents.textArea ?? script$i
+    return formComponents.textArea ?? script$k
   } else
   if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
-    return formComponents.email ?? script$l
+    return formComponents.email ?? script$n
   } else
   if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
-    return formComponents.phone ?? script$p
+    return formComponents.phone ?? script$r
   } else
   if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
-    return formComponents.number ?? script$k
+    return formComponents.number ?? script$m
   }
   // else
   // if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
@@ -3166,14 +3178,14 @@ const getFieldComponent = (fieldObj)=>{
   // if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
   //   return formComponents.date ?? DateInput
   // }
-  return formComponents.text ?? script$j
+  return formComponents.text ?? script$l
 };
 const shFormElementClasses = vue.ref(null);
 shFormElementClasses.value = vue.inject('shFormElementClasses');
 const shAutoForm = vue.ref(null);
 const closeModal = e => {
   setTimeout(() => {
-    const modal = script$f.value.closest('.modal-dialog');
+    const modal = script$h.value.closest('.modal-dialog');
     if(modal){
       const closeBtn = modal.querySelector('[data-bs-dismiss="modal"]');
       closeBtn && closeBtn.click();
@@ -3269,11 +3281,11 @@ vue.onMounted((ev)=>{
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$e,
+    _hoisted_1$g,
     vue.createElementVNode("form", {
+      class: vue.normalizeClass([__props.formClass, "sh-form"]),
       ref_key: "shAutoForm",
       ref: shAutoForm,
-      class: "sh-form",
       onSubmit: _cache[0] || (_cache[0] = e => submitForm(e))
     }, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(formFields.value, (field, index) => {
@@ -3337,19 +3349,19 @@ return (_ctx, _cache) => {
             : vue.createCommentVNode("v-if", true)
         ], 14 /* CLASS, STYLE, PROPS */, _hoisted_5$7)
       ], 2 /* CLASS */)
-    ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)
+    ], 34 /* CLASS, HYDRATE_EVENTS */)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
 };
 
-script$f.__file = "src/lib/components/ShAutoForm.vue";
+script$h.__file = "src/lib/components/ShAutoForm.vue";
 
-const _hoisted_1$d = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
+const _hoisted_1$f = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
 const _hoisted_2$9 = { class: "dropdown" };
 
-var script$e = {
+var script$g = {
   __name: 'ShDropDownForm',
   props: ['action',
   'classes',
@@ -3379,7 +3391,7 @@ const dropdownId = 'rand' + (Math.random() + 1).toString(36).substring(2);
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$d,
+    _hoisted_1$f,
     vue.createElementVNode("div", _hoisted_2$9, [
       vue.createElementVNode("a", {
         class: vue.normalizeClass(vue.unref(btnClass)),
@@ -3396,7 +3408,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$m, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$o, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3405,16 +3417,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$e.__file = "src/lib/components/ShDropDownForm.vue";
+script$g.__file = "src/lib/components/ShDropDownForm.vue";
 
-var script$d = {
-  name: 'ShModal',
-  props: ['modalTitle', 'modalId', 'modalSize'],
-  components: {
-  }
-};
-
-const _hoisted_1$c = ["id"];
+const _hoisted_1$e = ["id"];
 const _hoisted_2$8 = { class: "modal-content" };
 const _hoisted_3$8 = { class: "modal-header" };
 const _hoisted_4$8 = { class: "modal-title" };
@@ -3426,18 +3431,46 @@ const _hoisted_5$6 = /*#__PURE__*/vue.createElementVNode("button", {
 const _hoisted_6$5 = { class: "modal-body" };
 const _hoisted_7$3 = { class: "section" };
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+var script$f = {
+  __name: 'ShModal',
+  props: {
+  modalId: {
+    required: true,
+    type: String
+  },
+  modalTitle: {
+    type: String
+  },
+  modalSize: {
+    type: String
+  }
+},
+  emits: ['modalClosed'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+vue.onMounted(()=>{
+  const modal = document.getElementById(props.modalId);
+  modal.addEventListener('hidden.bs.modal', event => {
+    event.target.id == props.modalId && emit('modalClosed');
+  });
+});
+
+return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("div", {
     class: "modal fade",
-    id: $props.modalId,
+    id: __props.modalId,
     "aria-hidden": "true"
   }, [
     vue.createElementVNode("div", {
-      class: vue.normalizeClass(["modal-dialog", `modal-${$props.modalSize}`])
+      class: vue.normalizeClass(["modal-dialog", `modal-${__props.modalSize}`])
     }, [
       vue.createElementVNode("div", _hoisted_2$8, [
         vue.createElementVNode("div", _hoisted_3$8, [
-          vue.createElementVNode("h3", _hoisted_4$8, vue.toDisplayString($props.modalTitle), 1 /* TEXT */),
+          vue.createElementVNode("h3", _hoisted_4$8, vue.toDisplayString(__props.modalTitle), 1 /* TEXT */),
           _hoisted_5$6
         ]),
         vue.createElementVNode("div", _hoisted_6$5, [
@@ -3447,15 +3480,17 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ])
     ], 2 /* CLASS */)
-  ], 8 /* PROPS */, _hoisted_1$c))
+  ], 8 /* PROPS */, _hoisted_1$e))
+}
 }
 
-script$d.render = render$4;
-script$d.__file = "src/lib/components/ShModal.vue";
+};
 
-const _hoisted_1$b = ["href"];
+script$f.__file = "src/lib/components/ShModal.vue";
 
-var script$c = {
+const _hoisted_1$d = ["href"];
+
+var script$e = {
   __name: 'ShModalForm',
   props: ['action',
   'classes',
@@ -3494,13 +3529,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$b),
-    vue.createVNode(script$d, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$d),
+    vue.createVNode(script$f, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$m, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$o, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3510,11 +3545,11 @@ return (_ctx, _cache) => {
 
 };
 
-script$c.__file = "src/lib/components/ShModalForm.vue";
+script$e.__file = "src/lib/components/ShModalForm.vue";
 
-const _hoisted_1$a = ["href"];
+const _hoisted_1$c = ["href"];
 
-var script$b = {
+var script$d = {
   __name: 'ShModalFormAuto',
   props: ['action',
   'classes',
@@ -3554,13 +3589,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$a),
-    vue.createVNode(script$d, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$c),
+    vue.createVNode(script$f, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$f, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$h, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3570,26 +3605,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$b.__file = "src/lib/components/ShModalFormAuto.vue";
-
-var script$a = {
-  name: 'ShCanvas',
-  props: ['canvasTitle', 'canvasId', 'position','canvasSize'],
-  components: {
-  },
-  data () {
-    return {
-      side: this.position === undefined ? 'offcanvas-start' : 'offcanvas-' + this.position
-    }
-  },
-  methods: {
-    offcanvasClosed: function () {
-      this.$emit('offcanvasClosed');
-    }
-  }
-};
+script$d.__file = "src/lib/components/ShModalFormAuto.vue";
 
-const _hoisted_1$9 = ["id"];
+const _hoisted_1$b = ["id"];
 const _hoisted_2$7 = { class: "offcanvas-header" };
 const _hoisted_3$7 = {
   class: "offcanvas-title",
@@ -3597,20 +3615,57 @@ const _hoisted_3$7 = {
 };
 const _hoisted_4$7 = { class: "offcanvas-body" };
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+var script$c = {
+  __name: 'ShCanvas',
+  props: {
+  canvasId: {
+    required: true,
+    type: String
+  },
+  canvasTitle: {
+    type: String
+  },
+  position: {
+    type: String
+  },
+  canvasSize: {
+    type: String
+  },
+  side: {
+    type: String
+  }
+},
+  emits: ['canvasClosed'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const pos = vue.ref(props.position ?? props.side);
+const canvasSide = vue.ref(pos.value ?  `offcanvas-${pos.value}` : 'offcanvas-start');
+
+vue.onMounted(()=>{
+  const canvas = document.getElementById(props.canvasId);
+  canvas.addEventListener('hidden.bs.offcanvas', event => {
+    event.target.id === props.canvasId && emit('canvasClosed');
+  });
+});
+
+return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["offcanvas", $data.side +' '+ $props.canvasSize + '']),
+    class: vue.normalizeClass(["offcanvas", canvasSide.value +' '+ __props.canvasSize + '']),
     "data-bs-scroll": "true",
     tabindex: "-1",
-    id: $props.canvasId,
+    id: __props.canvasId,
     "aria-labelledby": "offcanvasScrollingLabel"
   }, [
     vue.createElementVNode("div", _hoisted_2$7, [
-      vue.createElementVNode("h5", _hoisted_3$7, vue.toDisplayString($props.canvasTitle), 1 /* TEXT */),
+      vue.createElementVNode("h5", _hoisted_3$7, vue.toDisplayString(__props.canvasTitle), 1 /* TEXT */),
       vue.createElementVNode("button", {
         type: "button",
         ref: "closecanvas",
-        onClick: _cache[0] || (_cache[0] = (...args) => ($options.offcanvasClosed && $options.offcanvasClosed(...args))),
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.offcanvasClosed && _ctx.offcanvasClosed(...args))),
         class: "btn-close text-reset",
         "data-bs-dismiss": "offcanvas",
         "aria-label": "Close"
@@ -3619,13 +3674,15 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createElementVNode("div", _hoisted_4$7, [
       vue.renderSlot(_ctx.$slots, "default")
     ])
-  ], 10 /* CLASS, PROPS */, _hoisted_1$9))
+  ], 10 /* CLASS, PROPS */, _hoisted_1$b))
+}
 }
 
-script$a.render = render$3;
-script$a.__file = "src/lib/components/ShCanvas.vue";
+};
 
-var script$9 = {
+script$c.__file = "src/lib/components/ShCanvas.vue";
+
+var script$b = {
   name: 'Pagination',
   props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle'],
   data () {
@@ -3696,7 +3753,7 @@ var script$9 = {
   }
 };
 
-const _hoisted_1$8 = { key: 0 };
+const _hoisted_1$a = { key: 0 };
 const _hoisted_2$6 = { class: "record_count_body mb-3" };
 const _hoisted_3$6 = /*#__PURE__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
 const _hoisted_4$6 = /*#__PURE__*/vue.createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
@@ -3742,7 +3799,7 @@ const _hoisted_22$1 = {
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
         vue.createElementVNode("div", _hoisted_2$6, [
           _hoisted_3$6,
           vue.createTextVNode("  "),
@@ -3814,17 +3871,17 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$9.render = render$2;
-script$9.__file = "src/lib/components/list_templates/Pagination.vue";
+script$b.render = render$2;
+script$b.__file = "src/lib/components/list_templates/Pagination.vue";
 
-const _hoisted_1$7 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_1$9 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
 
-var script$8 = {
+var script$a = {
   __name: 'ShConfirmAction',
   props: {
   data: Object,
@@ -3897,7 +3954,7 @@ return (_ctx, _cache) => {
   }, [
     (processing.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _hoisted_1$7,
+          _hoisted_1$9,
           vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : vue.createCommentVNode("v-if", true),
@@ -3910,15 +3967,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$8.__file = "src/lib/components/ShConfirmAction.vue";
+script$a.__file = "src/lib/components/ShConfirmAction.vue";
 
-const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_1$8 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-var script$7 = {
+var script$9 = {
   __name: 'ShSilentAction',
   props: {
   data: Object,
@@ -3993,7 +4050,7 @@ return (_ctx, _cache) => {
   }, [
     (processing.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _hoisted_1$6,
+          _hoisted_1$8,
           vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : vue.createCommentVNode("v-if", true),
@@ -4006,9 +4063,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$7.__file = "src/lib/components/ShSilentAction.vue";
+script$9.__file = "src/lib/components/ShSilentAction.vue";
 
-var script$6 = {
+var script$8 = {
   name: 'sh-table',
   props: ['endPoint', 'headers', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle'],
   inject: ['channel'],
@@ -4047,14 +4104,12 @@ var script$6 = {
   methods: {
     userTyping: function(){
       if (this.timeOut){
-        console.log('timer cleared');
         clearTimeout(this.timeOut);
       }
       const self = this;
       this.timeOut = setTimeout(()=>{
-        console.log('Searching');
         self.reloadData(1);
-      },1000);
+      },800);
     },
     cleanCanvasProps: function (actions) {
       let replaced = actions;
@@ -4089,7 +4144,6 @@ var script$6 = {
       this.reloadData();
     },
     getLinkClass: function (config) {
-      console.log(config);
       if (typeof config === 'object') {
         return config.class
       }
@@ -4138,10 +4192,10 @@ var script$6 = {
     },
     replaceLinkUrl: function (path, obj) {
       if (typeof path === 'object') {
-        path = path.link;
+        path = path.link ?? path.url;
       }
       var matches = path.match(/\{(.*?)\}/g);
-      matches.forEach(key => {
+      matches && matches.forEach(key => {
         key = key.replace('{', '');
         key = key.replace('}', '');
         path = path.replace(`{${key}}`, obj[key]);
@@ -4180,7 +4234,6 @@ var script$6 = {
           // window.open(this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name, '_blank').focus()
         }
       }).catch(reason => {
-        console.log(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);
@@ -4225,9 +4278,6 @@ var script$6 = {
           this.pagination_data.displayCount = totalShown;
           const scrollingElement = (document.scrollingElement || document.body);
           scrollingElement.scrollTop = scrollingElement.scrollHeight;
-          // const all = []
-          // console.log(all.push(response.data))
-          // console.log(this.records, response.data)
         } else {
           this.records = response.data;
         }
@@ -4253,10 +4303,10 @@ var script$6 = {
     this.reloadData();
   },
   components: {
-    ShSilentAction: script$7,
-    ShConfirmAction: script$8,
-    ShCanvas: script$a,
-    pagination: script$9
+    ShSilentAction: script$9,
+    ShConfirmAction: script$a,
+    ShCanvas: script$c,
+    pagination: script$b
   },
   computed: {
     windowWidth: function () {
@@ -4274,7 +4324,7 @@ var script$6 = {
   }
 };
 
-const _hoisted_1$5 = { class: "auto-table mt-2" };
+const _hoisted_1$7 = { class: "auto-table mt-2" };
 const _hoisted_2$5 = {
   key: 0,
   class: "col-md-4 mb-2"
@@ -4437,7 +4487,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_pagination = vue.resolveComponent("pagination");
   const _component_sh_canvas = vue.resolveComponent("sh-canvas");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
     ($props.hasDownload)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
           vue.createElementVNode("button", {
@@ -4891,10 +4941,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$6.render = render$1;
-script$6.__file = "src/lib/components/ShTable.vue";
+script$8.render = render$1;
+script$8.__file = "src/lib/components/ShTable.vue";
 
-var script$5 = {
+var script$7 = {
   name: 'ShTabs',
   props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive','classOne','classTwo','classes'],
   data () {
@@ -5015,10 +5065,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$5.render = render;
-script$5.__file = "src/lib/components/ShTabs.vue";
+script$7.render = render;
+script$7.__file = "src/lib/components/ShTabs.vue";
 
-const _hoisted_1$4 = {
+const _hoisted_1$6 = {
   class: "nav nav-tabs",
   role: "tablist"
 };
@@ -5031,7 +5081,7 @@ const _hoisted_4$4 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none"
 const _hoisted_5$4 = { class: "sh_tab_count" };
 const _hoisted_6$3 = { class: "tab-content" };
 
-var script$4 = {
+var script$6 = {
   __name: 'ShDynamicTabs',
   props: ['tabs','data'],
   setup(__props) {
@@ -5056,7 +5106,7 @@ function setTab(tab){
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    vue.createElementVNode("ul", _hoisted_1$4, [
+    vue.createElementVNode("ul", _hoisted_1$6, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab) => {
         return (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$4, [
           vue.createElementVNode("button", {
@@ -5085,7 +5135,64 @@ return (_ctx, _cache) => {
 
 };
 
-script$4.__file = "src/lib/components/ShDynamicTabs.vue";
+script$6.__file = "src/lib/components/ShDynamicTabs.vue";
+
+const _hoisted_1$5 = ["href"];
+
+
+var script$5 = {
+  __name: 'ShModalBtn',
+  props: {
+  modalId: {
+    required: true
+  }
+},
+  setup(__props) {
+
+
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock("a", {
+    href: `#${__props.modalId}`,
+    "data-bs-toggle": "modal"
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 8 /* PROPS */, _hoisted_1$5))
+}
+}
+
+};
+
+script$5.__file = "src/lib/components/ShModalBtn.vue";
+
+const _hoisted_1$4 = ["href"];
+
+
+var script$4 = {
+  __name: 'ShCanvasBtn',
+  props: {
+  canvasId: {
+    required: true,
+    type: String
+  }
+},
+  setup(__props) {
+
+
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock("a", {
+    href: `#${__props.canvasId}`,
+    "data-bs-toggle": "offcanvas"
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 8 /* PROPS */, _hoisted_1$4))
+}
+}
+
+};
+
+script$4.__file = "src/lib/components/ShCanvasBtn.vue";
 
 const useUserStore = pinia.defineStore('user-store', {
   state: () => ({
@@ -5381,7 +5488,7 @@ return (_ctx, _cache) => {
               (permissionsChanged.value)
                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
                     vue.createElementVNode("div", _hoisted_17, [
-                      vue.createVNode(script$7, {
+                      vue.createVNode(script$9, {
                         onSuccess: permissionsUpdated,
                         url: `sh-departments/department/permissions/${vue.unref(departmentId)}/${selectedModule.value}`,
                         data: {permissions: selectedPermissions.value},
@@ -5450,7 +5557,7 @@ return (_ctx, _cache) => {
           _hoisted_5$2,
           vue.createTextVNode(" ADD DEPARTMENT")
         ], 512 /* NEED_PATCH */),
-        vue.createVNode(script$6, {
+        vue.createVNode(script$8, {
           headers: ['id','name','description', 'created_at'],
           "end-point": "sh-departments/list",
           actions: {
@@ -5464,12 +5571,12 @@ return (_ctx, _cache) => {
       ]
     }
         }),
-        vue.createVNode(script$d, {
+        vue.createVNode(script$f, {
           "modal-id": "sh-department_modal",
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$m, {
+            vue.createVNode(script$o, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -5603,7 +5710,7 @@ return (_ctx, _cache) => {
         vue.createElementVNode("div", _hoisted_2$1, [
           _hoisted_3$1,
           vue.createElementVNode("h5", null, "Department #" + vue.toDisplayString(vue.unref(department).id) + " - " + vue.toDisplayString(vue.unref(department).name) + " Allowed Modules", 1 /* TEXT */),
-          vue.createVNode(script$6, {
+          vue.createVNode(script$8, {
             actions: {
       label: 'Actions',
       actions: [
@@ -5623,12 +5730,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$d, {
+          vue.createVNode(script$f, {
             "modal-id": "addModule",
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$m, {
+              vue.createVNode(script$o, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -5650,7 +5757,7 @@ return (_ctx, _cache) => {
             ref: permissionCanvasBtn,
             "data-bs-toggle": "offcanvas"
           }, null, 512 /* NEED_PATCH */),
-          vue.createVNode(script$a, {
+          vue.createVNode(script$c, {
             "canvas-id": "permissionsCanvas",
             position: "end enlarged",
             "canvas-title": "Module Permissions"
@@ -5765,7 +5872,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$m, {
+              vue.createVNode(script$o, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -5790,7 +5897,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$m, {
+              vue.createVNode(script$o, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -5837,7 +5944,7 @@ const ShFrontend = {
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
-    options.formTextInput ?? script$j;
+    options.formTextInput ?? script$l;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
@@ -5884,20 +5991,22 @@ const ShFrontend = {
 
 exports.Countries = countries;
 exports.ManagePermissions = script$3;
-exports.ShAutoForm = script$f;
-exports.ShCanvas = script$a;
-exports.ShConfirmAction = script$8;
-exports.ShDropDownForm = script$e;
-exports.ShDynamicTabs = script$4;
-exports.ShForm = script$m;
+exports.ShAutoForm = script$h;
+exports.ShCanvas = script$c;
+exports.ShCanvasBtn = script$4;
+exports.ShConfirmAction = script$a;
+exports.ShDropDownForm = script$g;
+exports.ShDynamicTabs = script$6;
+exports.ShForm = script$o;
 exports.ShFrontend = ShFrontend;
-exports.ShModal = script$d;
-exports.ShModalForm = script$c;
-exports.ShModalFormAuto = script$b;
-exports.ShPhone = script$p;
-exports.ShSilentAction = script$7;
-exports.ShTable = script$6;
-exports.ShTabs = script$5;
+exports.ShModal = script$f;
+exports.ShModalBtn = script$5;
+exports.ShModalForm = script$e;
+exports.ShModalFormAuto = script$d;
+exports.ShPhone = script$r;
+exports.ShSilentAction = script$9;
+exports.ShTable = script$8;
+exports.ShTabs = script$7;
 exports.shApis = shApis;
 exports.shRepo = shRepo;
 exports.shStorage = ShStorage;