@iankibetsh/shframework 4.2.7 → 4.2.9

package/dist/dist/library.mjs.css

@@ -63,6 +63,21 @@
   color: white;
 }
 
+.sh-selected-item{
+  line-height: unset!important;
+}
+.sh-suggestion-input{
+  padding: 0.375rem 0.75rem;
+}
+.sh-suggest{
+  margin-bottom: 1rem;
+}
+.sh-suggest-control::after{
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.255em;
+}
+
 .permissions-main {
   background: #edeff2;
 }
@@ -95,21 +110,6 @@
   flex-grow: 1;
 }
 
-.sh-selected-item{
-  line-height: unset!important;
-}
-.sh-suggestion-input{
-  padding: 0.375rem 0.75rem;
-}
-.sh-suggest{
-  margin-bottom: 1rem;
-}
-.sh-suggest-control::after{
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 0.255em;
-}
-
 .callout{
   --bs-link-color-rgb: 110,168,254;
   --bs-code-color: #e685b5;

package/dist/library.js

@@ -2025,7 +2025,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
           key: country.dialCode
         }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$d))
       }), 128 /* KEYED_FRAGMENT */))
-    ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+    ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
       [vue.vModelSelect, $data.selectedCountry]
     ]),
     vue.withDirectives(vue.createElementVNode("input", {
@@ -2035,7 +2035,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
       placeholder: "712345678",
       "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.input) = $event))
-    }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+    }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
       [vue.vModelText, $data.input]
     ])
   ]))
@@ -2069,12 +2069,10 @@ var script$u = {
   __name: 'ShSuggest',
   props: ['data','allowMultiple','url','modelValue'],
   emits: ['update:modelValue'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 let id = vue.ref(null);
 vue.ref(null);
 let suggestions = vue.ref(null);
@@ -2113,6 +2111,7 @@ function updateModelValue(){
     });
     emit('update:modelValue', ids);
   }
+  hideDropDown();
 }
 function removeSuggestion(sgt){
   selectedSuggestions.value  = selectedSuggestions.value.filter(selectedSgt=>{
@@ -2124,18 +2123,11 @@ function removeSuggestion(sgt){
 }
 let searchText = vue.ref(null);
 function filterData(e){
-  let dropdownElem = document.getElementById('dropwdown_section' + id.value);
-  if(!dropdownElem.classList.contains('show')){
-    dropdownElem.classList.add('show');
-  }
+  showDropDown();
   let filterValue = e.target.innerText;
   searchText.value = filterValue;
   if (props.url) {
-    shApis.doGet(props.url, { all: 1,filter_value: filterValue }).then(res => {
-      suggestions.value = res.data.data ?? res.data;
-    }).catch(res => {
-      console.log(res);
-    });
+    fetchRemoteData();
   } else if(props.data) {
     suggestions.value = props.data.filter(item=>{
       if(item.name.toLowerCase().includes(filterValue.toLowerCase())){
@@ -2147,6 +2139,27 @@ function filterData(e){
   }
 }
 
+const fetchRemoteData = ()=>{
+  shApis.doGet(props.url, { all: 1 }).then(res => {
+    suggestions.value = res.data.data ?? res.data;
+  }).catch(res => {
+    console.log(res);
+  });
+};
+
+const showDropDown = ()=>{
+  let dropdownElem = document.getElementById('dropwdown_section' + id.value);
+  if(!dropdownElem.classList.contains('show')){
+    dropdownElem.classList.add('show');
+  }
+};
+const hideDropDown = ()=>{
+  let dropdownElem = document.getElementById('dropwdown_section' + id.value);
+  if(dropdownElem.classList.contains('show')){
+    dropdownElem.classList.remove('show');
+  }
+};
+
 return (_ctx, _cache) => {
   return (vue.unref(id))
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
@@ -2176,7 +2189,7 @@ return (_ctx, _cache) => {
             onInput: filterData,
             onChange: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$a)
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$a)
         ], 8 /* PROPS */, _hoisted_2$d),
         vue.createElementVNode("ul", {
           class: "dropdown-menu w-100",
@@ -2640,7 +2653,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     modelValue: _ctx.form_elements[field],
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
-                  }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["data-cy", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
+                  }, null, 40 /* PROPS, NEED_HYDRATION */, ["data-cy", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
                 : vue.createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'file')
                 ? (vue.openBlock(), vue.createElementBlock("input", {
@@ -2654,7 +2667,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     ref: 'file_'+field,
                     onChange: $event => ($options.handleFileUpload(field)),
                     type: "file"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_10$5))
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$5))
                 : vue.createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'numeric')
                 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -2666,7 +2679,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "number"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_11$5)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$5)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2680,7 +2693,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "password"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_12$4)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_12$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2695,7 +2708,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "email",
                     required: ""
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_13$4)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_13$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2708,7 +2721,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     onFocus: $event => ($options.removeErrors(field)),
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control active"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_14$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_14$3)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2747,7 +2760,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "text"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_15$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_15$3)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2758,7 +2771,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     onFocus: $event => ($options.removeErrors(field)),
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_16$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_16$3)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2776,7 +2789,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                         value: item.id
                       }, vue.toDisplayString(item.name), 9 /* TEXT, PROPS */, _hoisted_18$3))
                     }), 128 /* KEYED_FRAGMENT */))
-                  ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_17$3)), [
+                  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_17$3)), [
                     [vue.vModelSelect, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2788,7 +2801,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       ($props.hasTerms)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$1, _hoisted_23$1))
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$1, [..._hoisted_23$1]))
         : vue.createCommentVNode("v-if", true),
       (_ctx.form_status == 1)
         ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -2818,12 +2831,10 @@ var script$s = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = vue.ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2846,7 +2857,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2863,12 +2874,10 @@ var script$r = {
   __name: 'NumberInput',
   props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = vue.ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2893,7 +2902,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$l)), [
+  }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$l)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2907,12 +2916,10 @@ var script$q = {
   __name: 'TextInput',
   props: ['modelValue','label','isInvalid'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = vue.ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2937,7 +2944,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2951,12 +2958,10 @@ var script$p = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = vue.ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2979,7 +2984,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2996,12 +3001,10 @@ var script$o = {
   __name: 'SelectInput',
   props: ['modelValue','label','data','dataUrl'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = vue.ref(null);
 const selectOptions = vue.ref(null);
 const modelValueUpdated = (e) => {
@@ -3050,7 +3053,7 @@ return (_ctx, _cache) => {
         value: option.id
       }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$k))
     }), 128 /* KEYED_FRAGMENT */))
-  ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  ], 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vue.vModelSelect, inputModel.value]
   ])
 }
@@ -3064,12 +3067,10 @@ var script$n = {
   __name: 'PasswordInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = vue.ref(null);
 
 const modelValueUpdated = (e) => {
@@ -3088,7 +3089,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3140,12 +3141,10 @@ var script$m = {
     'phones','numbers','selects','dates','gqlMutation'
 ],
   emits: ['success','fieldChanged','formSubmitted','formError'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const formFields = vue.ref([]);
 const getFieldComponent = (fieldObj)=>{
   if(fieldObj.component){
@@ -3378,7 +3377,7 @@ return (_ctx, _cache) => {
                     }, null, 10 /* CLASS, PROPS */, _hoisted_4$a))
                   : vue.createCommentVNode("v-if", true),
                 (vue.unref(isFloating))
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, _hoisted_9$5))
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [..._hoisted_9$5]))
                   : vue.createCommentVNode("v-if", true),
                 (field.helper)
                   ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -3414,7 +3413,7 @@ return (_ctx, _cache) => {
             : vue.createCommentVNode("v-if", true)
         ], 14 /* CLASS, STYLE, PROPS */, _hoisted_11$4)
       ], 2 /* CLASS */)
-    ], 34 /* CLASS, HYDRATE_EVENTS */)
+    ], 34 /* CLASS, NEED_HYDRATION */)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -3447,8 +3446,6 @@ var script$l = {
 
 const props = __props;
 
-
-
 vue.ref(props);
 let btnClass=props.class;
 const dropdownId = 'rand' + (Math.random() + 1).toString(36).substring(2);
@@ -3520,12 +3517,10 @@ var script$k = {
     }
 },
   emits: ['modalClosed'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
+const emit = __emit;
 const props = __props;
-
-
-
 vue.onMounted(() => {
     const modal = document.getElementById(props.modalId);
     modal.addEventListener('hidden.bs.modal', event => {
@@ -3582,12 +3577,10 @@ var script$j = {
   'numbers',
   'customComponent','modalTitle','class','successMessage'],
   emits: ['success'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 vue.ref(props);
 let btnClass=props.class;
 const modalId = 'rand' + (Math.random() + 1).toString(36).substring(2);
@@ -3641,12 +3634,10 @@ var script$i = {
   'numbers',
   'customComponent','modalTitle','class','successMessage'],
   emits: ['success'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const formProps = vue.ref(props);
 let btnClass=props.class;
 const modalId = 'rand' + (Math.random() + 1).toString(36).substring(2);
@@ -3710,12 +3701,10 @@ var script$h = {
   }
 },
   emits: ['canvasClosed'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
+const emit = __emit;
 const props = __props;
-
-
-
 const pos = vue.ref(props.position ?? props.side);
 const canvasSide = vue.ref(pos.value ?  `offcanvas-${pos.value}` : 'offcanvas-start');
 
@@ -4006,7 +3995,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.pageOptions, (option) => {
               return (vue.openBlock(), vue.createElementBlock("option", { value: option }, vue.toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_4$7))
             }), 256 /* UNKEYED_FRAGMENT */))
-          ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+          ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
             [vue.vModelSelect, $data.per_page]
           ]),
           vue.createElementVNode("span", _hoisted_5$6, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
@@ -4052,7 +4041,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
     : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$3, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, _hoisted_14$2))
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [..._hoisted_14$2]))
           : vue.createCommentVNode("v-if", true),
         (!$props.hideCount)
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$2, [
@@ -4107,14 +4096,12 @@ var script$e = {
   }
 },
   emits: ['actionSuccessful', 'actionFailed','success','actionCanceled'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
 
-
-
 const processing = vue.ref(false);
-
+const emit = __emit;
 const actionSuccessful = (res)=>{
   processing.value = false;
   res.actionType = 'silentAction';
@@ -4206,13 +4193,11 @@ var script$d = {
   }
 },
   emits: ['actionSuccessful','actionFailed','success'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
 const processing = vue.ref(false);
-
+const emit = __emit;
 const actionSuccessful = (res)=>{
   processing.value = false;
   res.actionType = 'silentAction';
@@ -4309,13 +4294,11 @@ var script$c = {
   }
 },
   emits: ['rangeSelected'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
 
-
-
-
+const emit = __emit;
 
 const selectedDate = vue.ref(null);
 const rangeLabel = vue.ref(null);
@@ -4983,7 +4966,7 @@ return (_ctx, _cache) => {
                 "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), [
+              }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_10$1), [
                 [vue.vModelText, _ctx.filter_value]
               ]),
               (_ctx.filter_value.length > 1)
@@ -4993,7 +4976,7 @@ return (_ctx, _cache) => {
                       value: true,
                       "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((_ctx.exactMatch) = $event)),
                       type: "checkbox"
-                    }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+                    }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
                       [vue.vModelCheckbox, _ctx.exactMatch]
                     ]),
                     _hoisted_12$1
@@ -5006,7 +4989,7 @@ return (_ctx, _cache) => {
     (_ctx.hasDefaultSlot)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
           (_ctx.loading === 'loading')
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, _hoisted_15$1))
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [..._hoisted_15$1]))
             : (_ctx.loading === 'error')
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
                   vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
@@ -5024,7 +5007,7 @@ return (_ctx, _cache) => {
       : (_ctx.hasRecordsSlot)
         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
             (_ctx.loading === 'loading' && !__props.cacheKey)
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, _hoisted_19))
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [..._hoisted_19]))
               : (_ctx.loading === 'error' && !__props.cacheKey)
                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
                     vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
@@ -5085,7 +5068,7 @@ return (_ctx, _cache) => {
                   ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_28, [
                       vue.createElementVNode("td", {
                         colspan: _ctx.tableHeaders.length
-                      }, _hoisted_31, 8 /* PROPS */, _hoisted_29)
+                      }, [..._hoisted_31], 8 /* PROPS */, _hoisted_29)
                     ]))
                   : (_ctx.loading === 'error')
                     ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_32, [
@@ -5257,7 +5240,7 @@ return (_ctx, _cache) => {
             ], 2 /* CLASS */))
           : (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, [
               (_ctx.loading === 'loading')
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, _hoisted_50))
+                ? (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 */)
@@ -5464,8 +5447,6 @@ var script$a = {
   setup(__props) {
 
 const props = __props;
-
-
 const route = vueRouter.useRoute();
 const router = vueRouter.useRouter();
 const currentTab = vue.ref('');
@@ -5593,8 +5574,6 @@ var script$9 = {
   setup(__props) {
 
 const props = __props;
-
-
 const tabs = props.tabs;
 let currentTab = vue.shallowRef(null);
 const generatedId = vue.ref(null);
@@ -5658,8 +5637,6 @@ var script$8 = {
 },
   setup(__props) {
 
-
-
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("a", {
     href: `#${__props.modalId}`,
@@ -5687,8 +5664,6 @@ var script$7 = {
 },
   setup(__props) {
 
-
-
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("a", {
     href: `#${__props.canvasId}`,
@@ -5747,9 +5722,9 @@ const _hoisted_18 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createEl
 var script$6 = {
   __name: 'ManagePermissions',
   emits: ['success'],
-  setup(__props, { emit }) {
-
+  setup(__props, { emit: __emit }) {
 
+const emit = __emit;
 
 const userStore =useUserStore();
 
@@ -5851,7 +5826,7 @@ return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
     vue.createElementVNode("div", _hoisted_2$3, [
       (loadingModules.value)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, _hoisted_5$2))
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [..._hoisted_5$2]))
         : (vue.openBlock(), vue.createElementBlock("ul", _hoisted_6$2, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modules.value, (module) => {
               return (vue.openBlock(), vue.createElementBlock("li", {

package/dist/library.mjs

@@ -2013,7 +2013,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
           key: country.dialCode
         }, toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$d))
       }), 128 /* KEYED_FRAGMENT */))
-    ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+    ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
       [vModelSelect, $data.selectedCountry]
     ]),
     withDirectives(createElementVNode("input", {
@@ -2023,7 +2023,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
       placeholder: "712345678",
       "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.input) = $event))
-    }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+    }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
       [vModelText, $data.input]
     ])
   ]))
@@ -2057,12 +2057,10 @@ var script$u = {
   __name: 'ShSuggest',
   props: ['data','allowMultiple','url','modelValue'],
   emits: ['update:modelValue'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 let id = ref(null);
 ref(null);
 let suggestions = ref(null);
@@ -2101,6 +2099,7 @@ function updateModelValue(){
     });
     emit('update:modelValue', ids);
   }
+  hideDropDown();
 }
 function removeSuggestion(sgt){
   selectedSuggestions.value  = selectedSuggestions.value.filter(selectedSgt=>{
@@ -2112,18 +2111,11 @@ function removeSuggestion(sgt){
 }
 let searchText = ref(null);
 function filterData(e){
-  let dropdownElem = document.getElementById('dropwdown_section' + id.value);
-  if(!dropdownElem.classList.contains('show')){
-    dropdownElem.classList.add('show');
-  }
+  showDropDown();
   let filterValue = e.target.innerText;
   searchText.value = filterValue;
   if (props.url) {
-    shApis.doGet(props.url, { all: 1,filter_value: filterValue }).then(res => {
-      suggestions.value = res.data.data ?? res.data;
-    }).catch(res => {
-      console.log(res);
-    });
+    fetchRemoteData();
   } else if(props.data) {
     suggestions.value = props.data.filter(item=>{
       if(item.name.toLowerCase().includes(filterValue.toLowerCase())){
@@ -2135,6 +2127,27 @@ function filterData(e){
   }
 }
 
+const fetchRemoteData = ()=>{
+  shApis.doGet(props.url, { all: 1 }).then(res => {
+    suggestions.value = res.data.data ?? res.data;
+  }).catch(res => {
+    console.log(res);
+  });
+};
+
+const showDropDown = ()=>{
+  let dropdownElem = document.getElementById('dropwdown_section' + id.value);
+  if(!dropdownElem.classList.contains('show')){
+    dropdownElem.classList.add('show');
+  }
+};
+const hideDropDown = ()=>{
+  let dropdownElem = document.getElementById('dropwdown_section' + id.value);
+  if(dropdownElem.classList.contains('show')){
+    dropdownElem.classList.remove('show');
+  }
+};
+
 return (_ctx, _cache) => {
   return (unref(id))
     ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
@@ -2164,7 +2177,7 @@ return (_ctx, _cache) => {
             onInput: filterData,
             onChange: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$a)
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$a)
         ], 8 /* PROPS */, _hoisted_2$d),
         createElementVNode("ul", {
           class: "dropdown-menu w-100",
@@ -2628,7 +2641,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     modelValue: _ctx.form_elements[field],
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
-                  }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["data-cy", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
+                  }, null, 40 /* PROPS, NEED_HYDRATION */, ["data-cy", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
                 : createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'file')
                 ? (openBlock(), createElementBlock("input", {
@@ -2642,7 +2655,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     ref: 'file_'+field,
                     onChange: $event => ($options.handleFileUpload(field)),
                     type: "file"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_10$5))
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$5))
                 : createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'numeric')
                 ? withDirectives((openBlock(), createElementBlock("input", {
@@ -2654,7 +2667,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "number"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_11$5)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$5)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2668,7 +2681,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "password"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_12$4)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_12$4)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2683,7 +2696,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "email",
                     required: ""
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_13$4)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_13$4)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2696,7 +2709,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     onFocus: $event => ($options.removeErrors(field)),
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control active"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_14$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_14$3)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2735,7 +2748,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "text"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_15$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_15$3)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2746,7 +2759,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     onFocus: $event => ($options.removeErrors(field)),
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_16$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_16$3)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2764,7 +2777,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                         value: item.id
                       }, toDisplayString(item.name), 9 /* TEXT, PROPS */, _hoisted_18$3))
                     }), 128 /* KEYED_FRAGMENT */))
-                  ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_17$3)), [
+                  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_17$3)), [
                     [vModelSelect, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -2776,7 +2789,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       ($props.hasTerms)
-        ? (openBlock(), createElementBlock("div", _hoisted_20$1, _hoisted_23$1))
+        ? (openBlock(), createElementBlock("div", _hoisted_20$1, [..._hoisted_23$1]))
         : createCommentVNode("v-if", true),
       (_ctx.form_status == 1)
         ? (openBlock(), createElementBlock("button", {
@@ -2806,12 +2819,10 @@ var script$s = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2834,7 +2845,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -2851,12 +2862,10 @@ var script$r = {
   __name: 'NumberInput',
   props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2881,7 +2890,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$l)), [
+  }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$l)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -2895,12 +2904,10 @@ var script$q = {
   __name: 'TextInput',
   props: ['modelValue','label','isInvalid'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2925,7 +2932,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -2939,12 +2946,10 @@ var script$p = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = ref(null);
 
 const modelValueUpdated = (e) => {
@@ -2967,7 +2972,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -2984,12 +2989,10 @@ var script$o = {
   __name: 'SelectInput',
   props: ['modelValue','label','data','dataUrl'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = ref(null);
 const selectOptions = ref(null);
 const modelValueUpdated = (e) => {
@@ -3038,7 +3041,7 @@ return (_ctx, _cache) => {
         value: option.id
       }, toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$k))
     }), 128 /* KEYED_FRAGMENT */))
-  ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  ], 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vModelSelect, inputModel.value]
   ])
 }
@@ -3052,12 +3055,10 @@ var script$n = {
   __name: 'PasswordInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const inputModel = ref(null);
 
 const modelValueUpdated = (e) => {
@@ -3076,7 +3077,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3128,12 +3129,10 @@ var script$m = {
     'phones','numbers','selects','dates','gqlMutation'
 ],
   emits: ['success','fieldChanged','formSubmitted','formError'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const formFields = ref([]);
 const getFieldComponent = (fieldObj)=>{
   if(fieldObj.component){
@@ -3366,7 +3365,7 @@ return (_ctx, _cache) => {
                     }, null, 10 /* CLASS, PROPS */, _hoisted_4$a))
                   : createCommentVNode("v-if", true),
                 (unref(isFloating))
-                  ? (openBlock(), createElementBlock("div", _hoisted_5$8, _hoisted_9$5))
+                  ? (openBlock(), createElementBlock("div", _hoisted_5$8, [..._hoisted_9$5]))
                   : createCommentVNode("v-if", true),
                 (field.helper)
                   ? (openBlock(), createElementBlock("div", {
@@ -3402,7 +3401,7 @@ return (_ctx, _cache) => {
             : createCommentVNode("v-if", true)
         ], 14 /* CLASS, STYLE, PROPS */, _hoisted_11$4)
       ], 2 /* CLASS */)
-    ], 34 /* CLASS, HYDRATE_EVENTS */)
+    ], 34 /* CLASS, NEED_HYDRATION */)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -3435,8 +3434,6 @@ var script$l = {
 
 const props = __props;
 
-
-
 ref(props);
 let btnClass=props.class;
 const dropdownId = 'rand' + (Math.random() + 1).toString(36).substring(2);
@@ -3508,12 +3505,10 @@ var script$k = {
     }
 },
   emits: ['modalClosed'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
+const emit = __emit;
 const props = __props;
-
-
-
 onMounted(() => {
     const modal = document.getElementById(props.modalId);
     modal.addEventListener('hidden.bs.modal', event => {
@@ -3570,12 +3565,10 @@ var script$j = {
   'numbers',
   'customComponent','modalTitle','class','successMessage'],
   emits: ['success'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 ref(props);
 let btnClass=props.class;
 const modalId = 'rand' + (Math.random() + 1).toString(36).substring(2);
@@ -3629,12 +3622,10 @@ var script$i = {
   'numbers',
   'customComponent','modalTitle','class','successMessage'],
   emits: ['success'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
-
+const emit = __emit;
 const formProps = ref(props);
 let btnClass=props.class;
 const modalId = 'rand' + (Math.random() + 1).toString(36).substring(2);
@@ -3698,12 +3689,10 @@ var script$h = {
   }
 },
   emits: ['canvasClosed'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
+const emit = __emit;
 const props = __props;
-
-
-
 const pos = ref(props.position ?? props.side);
 const canvasSide = ref(pos.value ?  `offcanvas-${pos.value}` : 'offcanvas-start');
 
@@ -3994,7 +3983,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             (openBlock(true), createElementBlock(Fragment, null, renderList($data.pageOptions, (option) => {
               return (openBlock(), createElementBlock("option", { value: option }, toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_4$7))
             }), 256 /* UNKEYED_FRAGMENT */))
-          ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+          ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
             [vModelSelect, $data.per_page]
           ]),
           createElementVNode("span", _hoisted_5$6, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
@@ -4040,7 +4029,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
     : (openBlock(), createElementBlock("div", _hoisted_11$3, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
-          ? (openBlock(), createElementBlock("div", _hoisted_12$2, _hoisted_14$2))
+          ? (openBlock(), createElementBlock("div", _hoisted_12$2, [..._hoisted_14$2]))
           : createCommentVNode("v-if", true),
         (!$props.hideCount)
           ? (openBlock(), createElementBlock("div", _hoisted_15$2, [
@@ -4095,14 +4084,12 @@ var script$e = {
   }
 },
   emits: ['actionSuccessful', 'actionFailed','success','actionCanceled'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
 
-
-
 const processing = ref(false);
-
+const emit = __emit;
 const actionSuccessful = (res)=>{
   processing.value = false;
   res.actionType = 'silentAction';
@@ -4194,13 +4181,11 @@ var script$d = {
   }
 },
   emits: ['actionSuccessful','actionFailed','success'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
-
-
 const processing = ref(false);
-
+const emit = __emit;
 const actionSuccessful = (res)=>{
   processing.value = false;
   res.actionType = 'silentAction';
@@ -4297,13 +4282,11 @@ var script$c = {
   }
 },
   emits: ['rangeSelected'],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
 
 const props = __props;
 
-
-
-
+const emit = __emit;
 
 const selectedDate = ref(null);
 const rangeLabel = ref(null);
@@ -4971,7 +4954,7 @@ return (_ctx, _cache) => {
                 "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), [
+              }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_10$1), [
                 [vModelText, _ctx.filter_value]
               ]),
               (_ctx.filter_value.length > 1)
@@ -4981,7 +4964,7 @@ return (_ctx, _cache) => {
                       value: true,
                       "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((_ctx.exactMatch) = $event)),
                       type: "checkbox"
-                    }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+                    }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
                       [vModelCheckbox, _ctx.exactMatch]
                     ]),
                     _hoisted_12$1
@@ -4994,7 +4977,7 @@ return (_ctx, _cache) => {
     (_ctx.hasDefaultSlot)
       ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           (_ctx.loading === 'loading')
-            ? (openBlock(), createElementBlock("div", _hoisted_13$1, _hoisted_15$1))
+            ? (openBlock(), createElementBlock("div", _hoisted_13$1, [..._hoisted_15$1]))
             : (_ctx.loading === 'error')
               ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
                   createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
@@ -5012,7 +4995,7 @@ return (_ctx, _cache) => {
       : (_ctx.hasRecordsSlot)
         ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             (_ctx.loading === 'loading' && !__props.cacheKey)
-              ? (openBlock(), createElementBlock("div", _hoisted_17$1, _hoisted_19))
+              ? (openBlock(), createElementBlock("div", _hoisted_17$1, [..._hoisted_19]))
               : (_ctx.loading === 'error' && !__props.cacheKey)
                 ? (openBlock(), createElementBlock("div", _hoisted_20, [
                     createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
@@ -5073,7 +5056,7 @@ return (_ctx, _cache) => {
                   ? (openBlock(), createElementBlock("tr", _hoisted_28, [
                       createElementVNode("td", {
                         colspan: _ctx.tableHeaders.length
-                      }, _hoisted_31, 8 /* PROPS */, _hoisted_29)
+                      }, [..._hoisted_31], 8 /* PROPS */, _hoisted_29)
                     ]))
                   : (_ctx.loading === 'error')
                     ? (openBlock(), createElementBlock("tr", _hoisted_32, [
@@ -5245,7 +5228,7 @@ return (_ctx, _cache) => {
             ], 2 /* CLASS */))
           : (openBlock(), createElementBlock("div", _hoisted_47, [
               (_ctx.loading === 'loading')
-                ? (openBlock(), createElementBlock("div", _hoisted_48, _hoisted_50))
+                ? (openBlock(), createElementBlock("div", _hoisted_48, [..._hoisted_50]))
                 : (_ctx.loading === 'error')
                   ? (openBlock(), createElementBlock("div", _hoisted_51, [
                       createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
@@ -5452,8 +5435,6 @@ var script$a = {
   setup(__props) {
 
 const props = __props;
-
-
 const route = useRoute();
 const router = useRouter();
 const currentTab = ref('');
@@ -5581,8 +5562,6 @@ var script$9 = {
   setup(__props) {
 
 const props = __props;
-
-
 const tabs = props.tabs;
 let currentTab = shallowRef(null);
 const generatedId = ref(null);
@@ -5646,8 +5625,6 @@ var script$8 = {
 },
   setup(__props) {
 
-
-
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("a", {
     href: `#${__props.modalId}`,
@@ -5675,8 +5652,6 @@ var script$7 = {
 },
   setup(__props) {
 
-
-
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("a", {
     href: `#${__props.canvasId}`,
@@ -5735,9 +5710,9 @@ const _hoisted_18 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/createElemen
 var script$6 = {
   __name: 'ManagePermissions',
   emits: ['success'],
-  setup(__props, { emit }) {
-
+  setup(__props, { emit: __emit }) {
 
+const emit = __emit;
 
 const userStore =useUserStore();
 
@@ -5839,7 +5814,7 @@ return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", _hoisted_1$4, [
     createElementVNode("div", _hoisted_2$3, [
       (loadingModules.value)
-        ? (openBlock(), createElementBlock("div", _hoisted_3$3, _hoisted_5$2))
+        ? (openBlock(), createElementBlock("div", _hoisted_3$3, [..._hoisted_5$2]))
         : (openBlock(), createElementBlock("ul", _hoisted_6$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(modules.value, (module) => {
               return (openBlock(), createElementBlock("li", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "4.2.7",
+  "version": "4.2.9",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",
@@ -28,7 +28,7 @@
     "moment": "^2.29.3",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.22",
-    "sweetalert2": "^11.4.14",
+    "sweetalert2": "^11.10.5",
     "vue": "^3.2.37",
     "lodash": "^4.17.21"
   },