@iankibetsh/shframework 1.2.9 → 1.3.2

package/dist/library.js

@@ -8,7 +8,7 @@ var Swal = require('sweetalert2');
 var NProgress = require('nprogress');
 var vue = require('vue');
 var Editor = require('@tinymce/tinymce-vue');
-require('lodash');
+var _ = require('lodash');
 var pinia = require('pinia');
 var vueRouter = require('vue-router');
 
@@ -19,6 +19,7 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var Swal__default = /*#__PURE__*/_interopDefaultLegacy(Swal);
 var NProgress__default = /*#__PURE__*/_interopDefaultLegacy(NProgress);
 var Editor__default = /*#__PURE__*/_interopDefaultLegacy(Editor);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 
 function setItem (key, value) {
   let toStore = value;
@@ -1873,7 +1874,7 @@ const countries = [
   }
 ];
 
-var script$h = {
+var script$l = {
   name: 'ShPhone',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1935,19 +1936,19 @@ var script$h = {
   }
 };
 
-const _hoisted_1$f = { class: "sh-phone mb-3" };
-const _hoisted_2$b = {
+const _hoisted_1$g = { class: "sh-phone mb-3" };
+const _hoisted_2$c = {
   key: 0,
   style: {"display":"contents"}
 };
-const _hoisted_3$a = ["src"];
-const _hoisted_4$a = ["value"];
+const _hoisted_3$b = ["src"];
+const _hoisted_4$b = ["value"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
     ($data.selectedCountry)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
-          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$a),
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$b),
           vue.createTextVNode(" " + vue.toDisplayString($data.selectedCountry.dialCode), 1 /* TEXT */)
         ]))
       : vue.createCommentVNode("v-if", true),
@@ -1960,7 +1961,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
         return (vue.openBlock(), vue.createElementBlock("option", {
           value: country,
           key: country.dialCode
-        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$a))
+        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$b))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
       [vue.vModelSelect, $data.selectedCountry]
@@ -1978,10 +1979,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$h.render = render$7;
-script$h.__file = "src/lib/components/form-components/ShPhone.vue";
+script$l.render = render$7;
+script$l.__file = "src/lib/components/form-components/ShPhone.vue";
 
-var script$g = {
+var script$k = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2020,7 +2021,7 @@ var script$g = {
   }
 };
 
-const _hoisted_1$e = /*#__PURE__*/vue.createElementVNode("textarea", {
+const _hoisted_1$f = /*#__PURE__*/vue.createElementVNode("textarea", {
   id: "tiny",
   style: {"display":"none"},
   "data-cy": "tinymce_editor"
@@ -2030,7 +2031,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = vue.resolveComponent("editor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$e,
+    _hoisted_1$f,
     vue.createElementVNode("div", {
       onFocusin: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["stop"])),
       class: "sh-editor w-100"
@@ -2055,19 +2056,19 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$g.render = render$6;
-script$g.__file = "src/lib/components/form-components/ShEditor.vue";
+script$k.render = render$6;
+script$k.__file = "src/lib/components/form-components/ShEditor.vue";
 
-const _hoisted_1$d = {
+const _hoisted_1$e = {
   key: 0,
   class: "dropdown sh-suggest"
 };
-const _hoisted_2$a = ["id"];
-const _hoisted_3$9 = { class: "badge bg-secondary m-1 sh-selected-item" };
-const _hoisted_4$9 = ["onClick"];
-const _hoisted_5$7 = ["id"];
-const _hoisted_6$6 = ["id", "aria-labelledby"];
-const _hoisted_7$4 = { key: 0 };
+const _hoisted_2$b = ["id"];
+const _hoisted_3$a = { class: "badge bg-secondary m-1 sh-selected-item" };
+const _hoisted_4$a = ["onClick"];
+const _hoisted_5$8 = ["id"];
+const _hoisted_6$7 = ["id", "aria-labelledby"];
+const _hoisted_7$5 = { key: 0 };
 const _hoisted_8$3 = ["onClick"];
 const _hoisted_9$4 = {
   key: 1,
@@ -2079,7 +2080,7 @@ const _hoisted_10$3 = {
 };
 
 
-var script$f = {
+var script$j = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2160,7 +2161,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (vue.unref(id))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
         vue.createElementVNode("div", {
           id: vue.unref(id),
           "data-bs-toggle": "dropdown",
@@ -2169,14 +2170,14 @@ return (_ctx, _cache) => {
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedSuggestions), (sgt) => {
-              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_3$9, [
+              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_3$a, [
                 vue.createTextVNode(vue.toDisplayString(sgt.name) + " ", 1 /* TEXT */),
                 vue.createElementVNode("button", {
                   onClick: $event => (removeSuggestion(sgt.id)),
                   type: "button",
                   class: "btn-close border-start border-1 ms-1",
                   "aria-label": "Close"
-                }, null, 8 /* PROPS */, _hoisted_4$9)
+                }, null, 8 /* PROPS */, _hoisted_4$a)
               ]))
             }), 256 /* UNKEYED_FRAGMENT */))
           ]),
@@ -2186,8 +2187,8 @@ return (_ctx, _cache) => {
             onClick: filterData,
             onInput: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$7)
-        ], 8 /* PROPS */, _hoisted_2$a),
+          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$8)
+        ], 8 /* PROPS */, _hoisted_2$b),
         vue.createElementVNode("ul", {
           class: "dropdown-menu w-100",
           id: 'dropwdown_section' + vue.unref(id),
@@ -2199,7 +2200,7 @@ return (_ctx, _cache) => {
                   key: suggestion.id
                 }, [
                   (suggestion.name)
-                    ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_7$4, [
+                    ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_7$5, [
                         vue.createElementVNode("a", {
                           onClick: $event => (addSuggestion(suggestion)),
                           class: vue.normalizeClass(["dropdown-item", vue.unref(selectedSuggestions).includes(suggestion) ? 'active':'']),
@@ -2212,7 +2213,7 @@ return (_ctx, _cache) => {
             : (vue.unref(searchText))
               ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$4, " No results found "))
               : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$3, " Type to search... "))
-        ], 8 /* PROPS */, _hoisted_6$6)
+        ], 8 /* PROPS */, _hoisted_6$7)
       ]))
     : vue.createCommentVNode("v-if", true)
 }
@@ -2220,15 +2221,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$f.__scopeId = "data-v-71cc9569";
-script$f.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$j.__scopeId = "data-v-71cc9569";
+script$j.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$e = {
+var script$i = {
   name: 'ShForm',
   components: {
-    ShSuggest: script$f,
-    ShEditor: script$g,
-    ShPhone: script$h
+    ShSuggest: script$j,
+    ShEditor: script$k,
+    ShPhone: script$l
   },
   props: [
       'action',
@@ -2546,20 +2547,20 @@ var script$e = {
   }
 };
 
-const _hoisted_1$c = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
-const _hoisted_2$9 = {
+const _hoisted_1$d = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_2$a = {
   ref: "ShAutoForm",
   class: "sh-form"
 };
-const _hoisted_3$8 = {
+const _hoisted_3$9 = {
   key: 0,
   class: "alert alert-danger alert-dismissible fade show sh-form-submission-error",
   role: "alert"
 };
-const _hoisted_4$8 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
-const _hoisted_5$6 = { key: 0 };
-const _hoisted_6$5 = { key: 1 };
-const _hoisted_7$3 = { class: "row" };
+const _hoisted_4$9 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
+const _hoisted_5$7 = { key: 0 };
+const _hoisted_6$6 = { key: 1 };
+const _hoisted_7$4 = { class: "row" };
 const _hoisted_8$2 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_9$3 = { class: "col-md-12" };
 const _hoisted_10$2 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
@@ -2608,16 +2609,16 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShEditor = vue.resolveComponent("ShEditor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$c,
-    vue.createElementVNode("form", _hoisted_2$9, [
+    _hoisted_1$d,
+    vue.createElementVNode("form", _hoisted_2$a, [
       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>"),
       (_ctx.form_status == 3)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, [
-            _hoisted_4$8,
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
+            _hoisted_4$9,
             (_ctx.errorText)
-              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$6, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
-              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$5, "Unexpected Error Occurred")),
+              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$7, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
+              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$6, "Unexpected Error Occurred")),
             vue.createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
         : vue.createCommentVNode("v-if", true),
@@ -2627,7 +2628,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512 /* NEED_PATCH */), [
         [vue.vModelText, _ctx.form_elements['id']]
       ]),
-      vue.createElementVNode("div", _hoisted_7$3, [
+      vue.createElementVNode("div", _hoisted_7$4, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.fields, (field) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
             class: vue.normalizeClass(["form-group", 'col-md-' + $options.getColumns()]),
@@ -2825,10 +2826,86 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$e.render = render$5;
-script$e.__file = "src/lib/components/ShForm.vue";
+script$i.render = render$5;
+script$i.__file = "src/lib/components/ShForm.vue";
 
-var script$d = {
+var script$h = {
+  __name: 'EmailInput',
+  props: ['modelValue','label'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = vue.ref(null);
+
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+vue.onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+});
+
+
+return (_ctx, _cache) => {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+    type: "email",
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vue.vModelText, inputModel.value]
+  ])
+}
+}
+
+};
+
+script$h.__file = "src/lib/components/form-components/EmailInput.vue";
+
+var script$g = {
+  __name: 'NumberInput',
+  props: ['modelValue','label'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = vue.ref(null);
+
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+vue.onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+});
+
+
+return (_ctx, _cache) => {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+    type: "number",
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vue.vModelText, inputModel.value]
+  ])
+}
+}
+
+};
+
+script$g.__file = "src/lib/components/form-components/NumberInput.vue";
+
+var script$f = {
   __name: 'TextInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2864,7 +2941,269 @@ return (_ctx, _cache) => {
 
 };
 
-script$d.__file = "src/lib/components/form-components/TextInput.vue";
+script$f.__file = "src/lib/components/form-components/TextInput.vue";
+
+var script$e = {
+  __name: 'TextAreaInput',
+  props: ['modelValue','label'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = vue.ref(null);
+
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+vue.onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+});
+
+
+return (_ctx, _cache) => {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
+    type: "text",
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vue.vModelText, inputModel.value]
+  ])
+}
+}
+
+};
+
+script$e.__file = "src/lib/components/form-components/TextAreaInput.vue";
+
+const _hoisted_1$c = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
+const _hoisted_2$9 = ["innerHTML"];
+const _hoisted_3$8 = ["innerHTML"];
+const _hoisted_4$8 = ["innerHTML"];
+const _hoisted_5$6 = ["disabled"];
+const _hoisted_6$5 = {
+  key: 0,
+  class: "spinner-border spinner-border-sm",
+  role: "status",
+  "aria-hidden": "true"
+};
+const _hoisted_7$3 = { key: 1 };
+
+
+var script$d = {
+  __name: 'ShAutoForm',
+  props: [
+    'action','successCallback','retainDataAfterSubmission',
+  'successMessage','fields','customComponents','placeHolders',
+  'formClasses',
+  'helperTexts','labels','data',
+  'actionLabel',
+    'textAreas',
+    'emails',
+    'phones','numbers','selects','dates'
+],
+  emits: ['success'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const formFields = vue.ref([]);
+const getFieldComponent = (field)=>{
+  const defaultTextareas = ['message', 'meta_description', 'comment', 'call_response', 'comments', 'description'];
+  const defaultSelects = ['gender', 'payment_method', 'allow_view_mode', 'reasons_name', 'has_free_tier', 'payment_period', 'role', 'register_as', 'account_type'];
+  const defaultNumbers = ['age'];
+  const defaultDates = ['free_tier_days', 'recurring_date', 'date', 'paid_at'];
+  const defaultPhones = ['phone'];
+  const defaultEmails = ['phone'];
+  const formComponents = vue.inject('formComponents');
+  if(props.customComponents && props.customComponents[field]) {
+    return props.customComponents[field]
+  } else
+  if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
+    return formComponents.textArea ?? script$e
+  } else
+  if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
+    return formComponents.email ?? script$h
+  } else
+  if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
+    return formComponents.phone ?? script$l
+  } else
+  if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
+    return formComponents.number ?? script$g
+  } else
+  if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
+    return formComponents.select ?? SelectInput
+  } else
+  if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
+    return formComponents.date ?? DateInput
+  }
+  return formComponents.text ?? script$f
+};
+const shFormElementClasses = vue.ref(null);
+shFormElementClasses.value = vue.inject('shFormElementClasses');
+const shAutoForm = vue.ref(null);
+const closeModal = e => {
+  setTimeout(()=>{
+    const closeBtn = shAutoForm.value.closest('.modal-dialog').querySelector('[data-bs-dismiss="modal"]');
+    closeBtn && closeBtn.click();
+  },1000);
+};
+const getLabel = field => (props.labels && (props.labels[field] !== undefined)) ? props.labels[field]:___default["default"].startCase(___default["default"].camelCase(field));
+const getComponentClass = field => validationErrors.value[field] ? getElementClass('formControl') + ' is-invalid':getElementClass('formControl');
+const getHelperText = field => (props.helperTexts && props.helperTexts[field]) ? props.helperTexts[field]:false;
+const getElementClass = section => (props.formClasses && props.formClasses[section]) ? props.formClasses[section]:shFormElementClasses.value[section] ?? ___default["default"].snakeCase(section).replace(/_/gi,'-');
+const getPlaceholder = field => (props.placeHolders && props.placeHolders[field]) && props.placeHolders[field];
+const removeValidationError = field => delete validationErrors.value[field];
+const getComponentProps = field => {
+  const newField = {...field};
+  delete newField.component;
+  delete newField.value;
+  return newField
+};
+const isFloating = getElementClass('formGroup').includes('form-floating');
+const loading = vue.ref(false);
+const submitBtn = vue.ref(false);
+const validationErrors = vue.ref({});
+const formError = vue.ref(null);
+const submitForm = e => {
+  console.log(formFields.value);
+  submitBtnWidth.value = submitBtn.value.getBoundingClientRect().width + 'px !important';
+  validationErrors.value = {};
+  e.preventDefault();
+  loading.value = true;
+  const data = {};
+  formFields.value.map(field=>data[field.field] = field.value);
+  shApis.doPost(props.action,data).then(res=>{
+    loading.value = false;
+    emit('formSubmitted',res.data);
+    emit('success',res.data);
+    props.successMessage && shRepo.showToast(props.successMessage);
+    props.successCallback && props.successCallback(res.data);
+    !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
+    closeModal();
+  }).catch(reason=>{
+    console.log(reason);
+    loading.value = false;
+    const httpStatus = reason.response ? reason.response.status:0;
+    formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
+    let httpErrors = {};
+    httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
+    if(httpErrors && reason.response){
+      Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
+    }
+    (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
+    validationErrors.value;
+  });
+  return false
+};
+const submitBtnWidth = vue.ref(null);
+vue.onMounted((ev)=>{
+  props.fields && props.fields.map(field=>{
+    if(typeof field === 'object') {
+      const fieldObj = {...field};
+      fieldObj.label && getLabel(fieldObj.field);
+      !fieldObj.helper && fieldObj.helperText ? fieldObj.helper = fieldObj.helperText : fieldObj.helper = getHelperText(fieldObj.field);
+      fieldObj.helperText === undefined && (fieldObj.label = getLabel(fieldObj.field));
+      fieldObj.component && getfieldObjComponent(fieldObj.field);
+      fieldObj.placeholder && fieldObj.placeHolder && getPlaceholder(fieldObj.field);
+      fieldObj.value = null;
+      formFields.value.push(fieldObj);
+    } else {
+      formFields.value.push({
+        field:field,label: getLabel(field),
+        helper: getHelperText(field),
+        component: getFieldComponent(field),
+        placeholder: getPlaceholder(field),
+        value: null
+      });
+    }
+  });
+});
+
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    _hoisted_1$c,
+    vue.createElementVNode("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) => {
+        return (vue.openBlock(), vue.createElementBlock("div", {
+          key: field,
+          class: vue.normalizeClass(getElementClass('formGroup'))
+        }, [
+          (!vue.unref(isFloating) && field.label)
+            ? (vue.openBlock(), vue.createElementBlock("label", {
+                key: 0,
+                class: vue.normalizeClass(getElementClass('formLabel')),
+                innerHTML: field.label
+              }, null, 10 /* CLASS, PROPS */, _hoisted_2$9))
+            : vue.createCommentVNode("v-if", true),
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field.field)), vue.mergeProps(getComponentProps(field), {
+            onClick: $event => (removeValidationError(field.field)),
+            "onUpdate:modelValue": [$event => (removeValidationError(field.field)), $event => ((formFields.value[index].value) = $event)],
+            modelValue: formFields.value[index].value,
+            placeholder: vue.unref(isFloating) ? field.label:field.placeholder,
+            class: getComponentClass(field.field)
+          }), null, 16 /* FULL_PROPS */, ["onClick", "onUpdate:modelValue", "modelValue", "placeholder", "class"])),
+          (vue.unref(isFloating) && field.label)
+            ? (vue.openBlock(), vue.createElementBlock("label", {
+                key: 1,
+                class: vue.normalizeClass(getElementClass('formLabel')),
+                innerHTML: field.label
+              }, null, 10 /* CLASS, PROPS */, _hoisted_3$8))
+            : vue.createCommentVNode("v-if", true),
+          (field.helper)
+            ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 2,
+                class: vue.normalizeClass(getElementClass('helperText')),
+                innerHTML: field.helper
+              }, null, 10 /* CLASS, PROPS */, _hoisted_4$8))
+            : vue.createCommentVNode("v-if", true),
+          (validationErrors.value[field.field])
+            ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 3,
+                class: vue.normalizeClass(getElementClass('invalidFeedback'))
+              }, vue.toDisplayString(validationErrors.value[field.field]), 3 /* TEXT, CLASS */))
+            : vue.createCommentVNode("v-if", true)
+        ], 2 /* CLASS */))
+      }), 128 /* KEYED_FRAGMENT */)),
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(getElementClass('formGroup'))
+      }, [
+        vue.createElementVNode("button", {
+          style: vue.normalizeStyle({width: submitBtnWidth.value}),
+          ref_key: "submitBtn",
+          ref: submitBtn,
+          disabled: loading.value,
+          class: vue.normalizeClass(getElementClass('actionBtn'))
+        }, [
+          (loading.value)
+            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$5))
+            : vue.createCommentVNode("v-if", true),
+          (!loading.value)
+            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$3, "Submit"))
+            : vue.createCommentVNode("v-if", true)
+        ], 14 /* CLASS, STYLE, PROPS */, _hoisted_5$6)
+      ], 2 /* CLASS */)
+    ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+};
+
+script$d.__file = "src/lib/components/ShAutoForm.vue";
 
 const _hoisted_1$b = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
 const _hoisted_2$8 = { class: "dropdown" };
@@ -2916,7 +3255,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$e, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$i, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3020,7 +3359,7 @@ return (_ctx, _cache) => {
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$e, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$i, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -4686,7 +5025,7 @@ return (_ctx, _cache) => {
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$e, {
+            vue.createVNode(script$i, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -4845,7 +5184,7 @@ return (_ctx, _cache) => {
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$e, {
+              vue.createVNode(script$i, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -4982,7 +5321,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$e, {
+              vue.createVNode(script$i, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -5007,7 +5346,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$e, {
+              vue.createVNode(script$i, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -5053,7 +5392,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$d;
+    options.formTextInput ?? script$f;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
@@ -5094,15 +5433,16 @@ const ShFrontend = {
   }
 };
 
+exports.ShAutoForm = script$d;
 exports.ShCanvas = script$9;
 exports.ShConfirmAction = script$7;
 exports.ShDropDownForm = script$c;
 exports.ShDynamicTabs = script$3;
-exports.ShForm = script$e;
+exports.ShForm = script$i;
 exports.ShFrontend = ShFrontend;
 exports.ShModal = script$b;
 exports.ShModalForm = script$a;
-exports.ShPhone = script$h;
+exports.ShPhone = script$l;
 exports.ShSilentAction = script$6;
 exports.ShTable = script$5;
 exports.ShTabs = script$4;