@iankibetsh/shframework 5.6.9 → 5.7.0

package/dist/library.js

@@ -2221,7 +2221,7 @@ const _hoisted_9$7 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
 };
-const _hoisted_10$5 = {
+const _hoisted_10$6 = {
   key: 2,
   class: "dropdown-item sh-suggest-no-input"
 };
@@ -2433,7 +2433,7 @@ return (_ctx, _cache) => {
               }), 128 /* KEYED_FRAGMENT */))
             : (vue.unref(searchText))
               ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$7, " No results found "))
-              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$5, " Type to search... "))
+              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$6, " Type to search... "))
         ], 10 /* CLASS, PROPS */, _hoisted_7$8)
       ]))
     : vue.createCommentVNode("v-if", true)
@@ -2815,23 +2815,23 @@ const _hoisted_6$8 = { class: "fg-label control-label text-capitalize control-be
 const _hoisted_7$7 = { class: "col-md-12" };
 const _hoisted_8$6 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
 const _hoisted_9$6 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_10$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_11$3 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_12$3 = ["data-cy", "name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_13$3 = ["disabled", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_14$3 = ["name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_15$3 = ["name", "onFocus", "onUpdate:modelValue"];
-const _hoisted_16$1 = ["value"];
-const _hoisted_17$1 = {
+const _hoisted_10$5 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_11$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_12$4 = ["data-cy", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_13$4 = ["disabled", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_14$4 = ["name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_15$4 = ["name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_16$2 = ["value"];
+const _hoisted_17$2 = {
   key: 11,
   class: "invalid-feedback"
 };
-const _hoisted_18$1 = { class: "form-check me-1" };
-const _hoisted_19$1 = ["value", "disabled", "checked"];
-const _hoisted_20$1 = { class: "form-check-label" };
-const _hoisted_21$1 = { class: "form-check me-1" };
-const _hoisted_22$1 = ["name", "value"];
-const _hoisted_23$1 = { class: "form-check-label" };
+const _hoisted_18$2 = { class: "form-check me-1" };
+const _hoisted_19$2 = ["value", "disabled", "checked"];
+const _hoisted_20$2 = { class: "form-check-label" };
+const _hoisted_21$2 = { class: "form-check me-1" };
+const _hoisted_22$2 = ["name", "value"];
+const _hoisted_23$2 = { class: "form-check-label" };
 const _hoisted_24$1 = {
   key: 1,
   class: "row"
@@ -2919,7 +2919,7 @@ function render$3(_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, NEED_HYDRATION */, _hoisted_10$4)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$5)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2934,7 +2934,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "email",
                     required: ""
-                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2947,7 +2947,7 @@ function render$3(_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, NEED_HYDRATION */, _hoisted_12$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_12$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2986,7 +2986,7 @@ function render$3(_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, NEED_HYDRATION */, _hoisted_13$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_13$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -2997,7 +2997,7 @@ function render$3(_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, NEED_HYDRATION */, _hoisted_14$3)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_14$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -3013,28 +3013,28 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                       return (vue.openBlock(), vue.createElementBlock("option", {
                         key: $props.fillSelects[field].value ? item[$props.fillSelects[field].value]:item.id,
                         value: $props.fillSelects[field].value ? item[$props.fillSelects[field].value]:item.id
-                      }, vue.toDisplayString($props.fillSelects[field].column ? item[$props.fillSelects[field].column]:item.name), 9 /* TEXT, PROPS */, _hoisted_16$1))
+                      }, vue.toDisplayString($props.fillSelects[field].column ? item[$props.fillSelects[field].column]:item.name), 9 /* TEXT, PROPS */, _hoisted_16$2))
                     }), 128 /* KEYED_FRAGMENT */))
-                  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_15$3)), [
+                  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_15$4)), [
                     [vue.vModelSelect, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
               (_ctx.form_errors[field] != null )
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, vue.toDisplayString(_ctx.form_errors[field][0]), 1 /* TEXT */))
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$2, vue.toDisplayString(_ctx.form_errors[field][0]), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass($props.checkBoxes?.display ? ($props.checkBoxes.display =='row' ? 'd-flex': '' ) : ''  )
               }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.checkboxData[field], (item) => {
-                  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, [
+                  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
                     vue.createElementVNode("input", {
                       class: "form-check-input",
                       type: "checkbox",
                       value: item.id,
                       disabled: item.disabled,
                       checked: item.checked
-                    }, null, 8 /* PROPS */, _hoisted_19$1),
-                    vue.createElementVNode("label", _hoisted_20$1, vue.toDisplayString(item.label), 1 /* TEXT */)
+                    }, null, 8 /* PROPS */, _hoisted_19$2),
+                    vue.createElementVNode("label", _hoisted_20$2, vue.toDisplayString(item.label), 1 /* TEXT */)
                   ]))
                 }), 256 /* UNKEYED_FRAGMENT */))
               ], 2 /* CLASS */),
@@ -3042,14 +3042,14 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                 class: vue.normalizeClass($props.radioBoxes?.display ? ($props.radioBoxes.display =='row' ? 'd-flex': '' ) : ''  )
               }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.radioboxData[field], (item) => {
-                  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$1, [
+                  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$2, [
                     vue.createElementVNode("input", {
                       class: "form-check-input",
                       type: "radio",
                       name: field,
                       value: item.value
-                    }, null, 8 /* PROPS */, _hoisted_22$1),
-                    vue.createElementVNode("label", _hoisted_23$1, vue.toDisplayString(item.label), 1 /* TEXT */)
+                    }, null, 8 /* PROPS */, _hoisted_22$2),
+                    vue.createElementVNode("label", _hoisted_23$2, vue.toDisplayString(item.label), 1 /* TEXT */)
                   ]))
                 }), 256 /* UNKEYED_FRAGMENT */))
               ], 2 /* CLASS */)
@@ -3416,74 +3416,193 @@ return (_ctx, _cache) => {
 
 script$r.__file = "src/lib/components/form-components/DateInput.vue";
 
-const _hoisted_1$l = ["name", "onUpdate:modelValue"];
-const _hoisted_2$f = ["innerHTML"];
+const _hoisted_1$l = {
+  key: 0,
+  class: "sh-form-steps-container"
+};
+const _hoisted_2$f = { class: "sh-form-steps-wrapper" };
 const _hoisted_3$c = {
+  key: 0,
+  class: "sh-step-connector"
+};
+const _hoisted_4$c = { class: "sh-step-indicator" };
+const _hoisted_5$a = { class: "sh-step-number" };
+const _hoisted_6$7 = {
+  key: 0,
+  class: "sh-step-check"
+};
+const _hoisted_7$6 = { key: 1 };
+const _hoisted_8$5 = { class: "sh-step-content" };
+const _hoisted_9$5 = ["innerHTML"];
+const _hoisted_10$4 = ["innerHTML"];
+const _hoisted_11$3 = { class: "sh-current-step-info d-none" };
+const _hoisted_12$3 = { class: "sh-step-counter" };
+const _hoisted_13$3 = { class: "sh-step-name" };
+const _hoisted_14$3 = ["name", "onUpdate:modelValue"];
+const _hoisted_15$3 = ["innerHTML"];
+const _hoisted_16$1 = {
   key: 0,
   class: "text-danger sh-required"
 };
-const _hoisted_4$c = ["innerHTML"];
-const _hoisted_5$a = {
+const _hoisted_17$1 = ["innerHTML"];
+const _hoisted_18$1 = {
   key: 2,
   class: "form-notch"
 };
-const _hoisted_6$7 = ["innerHTML"];
-const _hoisted_7$6 = ["disabled"];
-const _hoisted_8$5 = {
-  key: 0,
-  class: "spinner-border spinner-border-sm",
-  role: "status",
-  "aria-hidden": "true"
-};
-const _hoisted_9$5 = { key: 1 };
-
+const _hoisted_19$1 = ["innerHTML"];
+const _hoisted_20$1 = ["disabled"];
+const _hoisted_21$1 = ["disabled"];
+const _hoisted_22$1 = ["disabled"];
+const _hoisted_23$1 = { key: 1 };
 
 var script$q = {
   __name: 'ShAutoForm',
-  props: [
-  'action', 'successCallback', 'retainDataAfterSubmission',
-  'successMessage', 'fields', 'customComponents', 'placeHolders',
-  'formClasses',
-  'helperTexts', 'labels', 'data','preSubmitCallback',
-  'fillSelects',
-  'formClass',
-  'actionLabel',
-  'textAreas',
-  'currentData',
-  'emails',
-  'method',
-  'phones', 'numbers', 'selects', 'dates', 'gqlMutation',
-    'required','retainModal'
-],
-  emits: ['success','preSubmit', 'fieldChanged', 'formSubmitted', 'formError'],
+  props: {
+  action: {
+    type: String,
+    required: false
+  },
+  successCallback: {
+    type: Function,
+    required: false
+  },
+  retainDataAfterSubmission: {
+    type: Boolean,
+    default: false
+  },
+  successMessage: {
+    type: String,
+    required: false
+  },
+  fields: {
+    type: Array,
+    required: true
+  },
+  customComponents: {
+    type: Object,
+    required: false
+  },
+  placeHolders: {
+    type: Object,
+    required: false
+  },
+  formClasses: {
+    type: Object,
+    required: false
+  },
+  helperTexts: {
+    type: Object,
+    required: false
+  },
+  labels: {
+    type: Object,
+    required: false
+  },
+  data: {
+    type: Object,
+    required: false
+  },
+  preSubmitCallback: {
+    type: Function,
+    required: false
+  },
+  fillSelects: {
+    type: Object,
+    required: false
+  },
+  formClass: {
+    type: String,
+    required: false
+  },
+  actionLabel: {
+    type: String,
+    default: 'Submit'
+  },
+  textAreas: {
+    type: Array,
+    required: false
+  },
+  currentData: {
+    type: Object,
+    required: false
+  },
+  emails: {
+    type: Array,
+    required: false
+  },
+  method: {
+    type: String,
+    default: 'post',
+    validator: (value) => ['post', 'put', 'delete'].includes(value)
+  },
+  phones: {
+    type: Array,
+    required: false
+  },
+  numbers: {
+    type: Array,
+    required: false
+  },
+  selects: {
+    type: Array,
+    required: false
+  },
+  dates: {
+    type: Array,
+    required: false
+  },
+  gqlMutation: {
+    type: String,
+    required: false
+  },
+  required: {
+    type: Array,
+    required: false
+  },
+  retainModal: {
+    type: Boolean,
+    default: false
+  },
+  steps: {
+    type: Array,
+    required: false
+  }
+},
+  emits: ['success', 'preSubmit', 'fieldChanged', 'formSubmitted', 'formError'],
   setup(__props, { emit: __emit }) {
 
 const props = __props;
 const emit = __emit;
+
+// Default field type configurations
+const DEFAULT_FIELD_TYPES = {
+  textareas: ['message', 'meta_description', 'comment', 'call_response', 'comments', 'description'],
+  selects: ['gender', 'payment_method', 'allow_view_mode', 'reasons_name', 'has_free_tier', 'payment_period', 'role', 'register_as', 'account_type'],
+  numbers: ['age'],
+  dates: ['free_tier_days', 'recurring_date', 'date', 'paid_at'],
+  passwords: ['password', 'password_confirmation', 'pin'],
+  phones: ['phone'],
+  emails: ['email']
+};
+
 const formFields = vue.ref([]);
+const formComponents = vue.inject('formComponents', {});
+
 const getFieldComponent = (fieldObj) => {
+  // Return custom component if specified
   if (fieldObj.component) {
     return fieldObj.component
   }
+
   const field = fieldObj.field ?? fieldObj.name;
-  const defaultTextareas = ['message', 'meta_description', 'comment', 'call_response', 'comments', 'description'];
-  const defaultNumbers = ['age'];
-  const defaultDates = ['free_tier_days', 'recurring_date', 'date', 'paid_at'];
-  const passwords = ['password', 'password_confirmation', 'pin'];
-  const defaultPhones = ['phone'];
-  const defaultEmails = ['email'];
-  const formComponents = vue.inject('formComponents');
-  const TextComponent = formComponents.text ?? script$v;
-  const TextAreaComponent = formComponents.textArea ?? script$u;
-  const EmailComponent = formComponents.email ?? script$x;
-  const PhoneComponent = formComponents.phone ?? script$A;
-  const NumberComponent = formComponents.number ?? script$w;
-  const SelectComponent = formComponents.select ?? script$t;
-  const PasswordComponent = formComponents.password ?? script$s;
-  if (props.customComponents && props.customComponents[field]) {
+
+  // Check for custom components in props
+  if (props.customComponents?.[field]) {
     return props.customComponents[field]
   }
-  if (props.fillSelects && props.fillSelects[field]) {
+
+  // Handle fillSelects configuration
+  if (props.fillSelects?.[field]) {
     Object.assign(fieldObj, props.fillSelects[field]);
     if (fieldObj.suggests || fieldObj.suggest) {
       fieldObj.type = 'suggests';
@@ -3491,114 +3610,173 @@ const getFieldComponent = (fieldObj) => {
       fieldObj.type = 'select';
     }
   }
-  if(fieldObj.suggests || fieldObj.suggest){
+
+  // Handle suggests type
+  if (fieldObj.suggests || fieldObj.suggest) {
     fieldObj.type = 'suggests';
   }
 
+  // Get component mappings
+  const componentMap = {
+    text: formComponents.text ?? script$v,
+    textarea: formComponents.textArea ?? script$u,
+    email: formComponents.email ?? script$x,
+    phone: formComponents.phone ?? script$A,
+    number: formComponents.number ?? script$w,
+    select: formComponents.select ?? script$t,
+    password: formComponents.password ?? script$s,
+    date: formComponents.date ?? script$r
+  };
+
+  // Return component based on explicit type
   if (fieldObj.type) {
     if (fieldObj.type === 'suggest' || fieldObj.type === 'suggests') {
       return script$z
     }
-    return fieldObj.type === 'number' ? NumberComponent : fieldObj.type === 'textarea' ? TextAreaComponent : fieldObj.type === 'email' ? EmailComponent : fieldObj.type === 'phone' ? PhoneComponent : fieldObj.type === 'password' ? PasswordComponent : fieldObj.type === 'select' ? SelectComponent : TextComponent
-  } else if (passwords.includes(field)) {
-    return PasswordComponent
-  } else if ((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)) {
-    return formComponents.textArea ?? script$u
-  } else if ((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)) {
-    return formComponents.email ?? script$x
-  } else if ((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)) {
-    return formComponents.phone ?? script$A
-  } else if ((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)) {
-    return formComponents.number ?? script$w
+    return componentMap[fieldObj.type] ?? componentMap.text
+  }
+
+  // Infer component from field name patterns
+  if (DEFAULT_FIELD_TYPES.passwords.includes(field)) {
+    return componentMap.password
   }
-  // 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 ?? script$r
+  if ((props.textAreas?.includes(field)) || DEFAULT_FIELD_TYPES.textareas.includes(field)) {
+    return componentMap.textarea
   }
-  return formComponents.text ?? script$v
+  if ((props.emails?.includes(field)) || DEFAULT_FIELD_TYPES.emails.includes(field)) {
+    return componentMap.email
+  }
+  if ((props.phones?.includes(field)) || DEFAULT_FIELD_TYPES.phones.includes(field)) {
+    return componentMap.phone
+  }
+  if ((props.numbers?.includes(field)) || DEFAULT_FIELD_TYPES.numbers.includes(field)) {
+    return componentMap.number
+  }
+  if ((props.dates?.includes(field)) || DEFAULT_FIELD_TYPES.dates.includes(field)) {
+    return componentMap.date
+  }
+
+  return componentMap.text
 };
-const shFormElementClasses = vue.ref(null);
-shFormElementClasses.value = vue.inject('shFormElementClasses');
+const shFormElementClasses = vue.inject('shFormElementClasses', {});
 const shAutoForm = vue.useTemplateRef('shAutoForm');
-const closeModal = e => {
+const loading = vue.ref(false);
+const submitBtn = vue.ref(false);
+const validationErrors = vue.ref({});
+const formError = vue.ref(null);
+const submitBtnWidth = vue.ref(null);
+
+// Helper functions
+const closeModal = () => {
   setTimeout(() => {
-    if(!shAutoForm.value){
-      // when form not available, most probably after redirection
+    if (!shAutoForm.value) {
+      // Form not available, most probably after redirection
       return
     }
     const modal = shAutoForm.value.closest('.modal-dialog');
     if (modal) {
       const closeBtn = modal.querySelector('[data-bs-dismiss="modal"]');
-      closeBtn && closeBtn.click();
+      closeBtn?.click();
     }
   }, 1500);
 };
-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 fieldChanged = field => {
-  delete validationErrors.value[field];
+
+const getLabel = field =>
+  props.labels?.[field] !== undefined
+    ? props.labels[field]
+    : ___default["default"].startCase(___default["default"].camelCase(field));
+
+const getElementClass = section =>
+  props.formClasses?.[section] ??
+  shFormElementClasses[section] ??
+  ___default["default"].snakeCase(section).replace(/_/gi, '-');
+
+const getComponentClass = field => {
+  const baseClass = getElementClass('formControl');
+  return validationErrors.value[field] ? `${baseClass} is-invalid` : baseClass
+};
+
+const getHelperText = field => props.helperTexts?.[field] || false;
+
+const getPlaceholder = field => props.placeHolders?.[field] || '';
+
+const getFormData = () => {
   const data = {};
-  formFields.value.map(field => {
+  formFields.value.forEach(field => {
     data[field.field] = field.value;
   });
+  return data
+};
+
+const fieldChanged = field => {
+  delete validationErrors.value[field];
+  const data = getFormData();
+  const fieldValue = formFields.value.find(f => f.field === field)?.value;
   setTimeout(() => {
-    emit('fieldChanged', field, formFields.value.filter(f => f.field === field)[0].value, data);
+    emit('fieldChanged', field, fieldValue, data);
   }, 300);
 };
-const getComponentProps =  (field) => {
-  const newField = {...field};
-  delete newField.component;
-  delete newField.value;
-  return newField
+
+const getComponentProps = (field) => {
+  const { component, value, ...props } = field;
+  // remove required
+  delete props.required;
+  return props
 };
 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 = async  (e) => {
-  submitBtnWidth.value = submitBtn.value.getBoundingClientRect().width + 'px !important';
-  validationErrors.value = {};
+
+const submitForm = async (e) => {
   e.preventDefault();
+
+  if (submitBtn.value) {
+    submitBtnWidth.value = `${submitBtn.value.getBoundingClientRect().width}px`;
+  }
+
+  validationErrors.value = {};
   loading.value = true;
-  const data = {};
-  formFields.value.map(field => {
-    data[field.field] = field.value;
-  });
+
+  const data = getFormData();
+
+  // Pre-submit callback
   if (props.preSubmitCallback) {
-    const callbackkRes =  await props.preSubmitCallback(data);
-    if (callbackkRes !== true) {
+    const callbackRes = await props.preSubmitCallback(data);
+    if (callbackRes !== true) {
       loading.value = false;
       return false
     }
   }
+
+  emit('preSubmit', data);
+
+  // Handle GraphQL mutation
   if (props.gqlMutation) {
-    let args = `(`;
-    let selectFields = Object.keys(data);
-    selectFields.forEach(key => {
-      if (data[key]) {
-        args += `${key}: "${data[key]}",`;
-      }
-    });
-    args += `)`;
-    args = args.replace(',)', ')');
-    if (args === '()') {
-      args = '';
+    const selectFields = Object.keys(data);
+    let args = selectFields
+      .filter(key => data[key])
+      .map(key => `${key}: "${data[key]}"`)
+      .join(', ');
+
+    if (args) {
+      args = `(${args})`;
     }
-    emit('preSubmit', data);
 
-    const mutation = `{\n${props.gqlMutation} ${args} {\n${selectFields.join(`\n`)}\n}\n}`;
-    shApis.graphQlMutate(mutation).then(res => handleSuccessRequest(res)).catch(reason => handlefailedRequest(reason));
+    const mutation = `{\n${props.gqlMutation}${args} {\n${selectFields.join('\n')}\n}\n}`;
+    shApis.graphQlMutate(mutation)
+      .then(handleSuccessRequest)
+      .catch(handleFailedRequest);
   } else {
-    const method = props.method ==='put' ? shApis.doPut: ( props.method === 'delete' ? shApis.doDelete: shApis.doPost);
-    method(props.action, data).then(res => handleSuccessRequest(res)).catch(reason => handlefailedRequest(reason));
+    // Handle REST API
+    const method = props.method === 'put'
+      ? shApis.doPut
+      : props.method === 'delete'
+        ? shApis.doDelete
+        : shApis.doPost;
+
+    method(props.action, data)
+      .then(handleSuccessRequest)
+      .catch(handleFailedRequest);
   }
+
   return false
 };
 
@@ -3606,174 +3784,345 @@ const handleSuccessRequest = 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);
-  !props.retainModal && closeModal();
+
+  if (props.successMessage) {
+    shRepo.showToast(props.successMessage);
+  }
+
+  if (props.successCallback) {
+    props.successCallback(res.data);
+  }
+
+  if (!props.retainDataAfterSubmission) {
+    formFields.value.forEach(field => field.value = null);
+  }
+
+  if (!props.retainModal) {
+    closeModal();
+  }
 };
 
-const handlefailedRequest = reason => {
+const handleFailedRequest = 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]);
+  const httpStatus = reason.response?.status || 0;
+
+  formError.value = httpStatus === 422 ? null : reason.message ?? null;
+
+  // Handle validation errors
+  if (httpStatus === 422 && typeof reason.response?.data?.errors === 'object') {
+    const httpErrors = reason.response.data.errors;
+    Object.keys(httpErrors).forEach(key => {
+      validationErrors.value[key] = typeof httpErrors[key] === 'string'
+        ? httpErrors[key]
+        : httpErrors[key][0];
+    });
+
+    // Navigate to the step containing the first error
+    if (formSteps.value.length > 1) {
+      const errorFields = Object.keys(httpErrors);
+
+      // Find the first step that contains any error field
+      for (let i = 0; i < formSteps.value.length; i++) {
+        const stepFieldNames = formSteps.value[i].fields.map(f => f.field);
+        const hasError = errorFields.some(errorField => stepFieldNames.includes(errorField));
+
+        if (hasError) {
+          currentStep.value = i;
+          break
+        }
+      }
+    }
+  }
+
+  if (httpStatus !== 422 && formError.value) {
+    shRepo.showToast(formError.value, 'error');
   }
-  (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value, 'error');
-  validationErrors.value;
+
+  emit('formError', reason);
 };
-const submitBtnWidth = vue.ref(null);
 const setExistingData = (existingData) => {
-  if (existingData) {
-    const newFields = formFields.value.map(fl => {
-      if (existingData[fl.field]) {
-        fl.value = existingData[fl.field];
-      }
-      return fl
-      // console.log(fl)
-      // console.log(field, existingData)
-      // existingData[field.field] && (field.value = existingData[field.field])
-    });
-    formFields.value = null;
-    formFields.value = newFields;
-  }
+  if (!existingData) return
+
+  formFields.value = formFields.value.map(field => {
+    if (existingData[field.field] !== undefined) {
+      return { ...field, value: existingData[field.field] }
+    }
+    return field
+  });
 };
+
 vue.watch(() => props.currentData, (newData) => {
   setExistingData(newData);
 });
-vue.onMounted((ev) => {
 
-  props.fields && props.fields.map(field => {
-    let fieldObj = {};
+const currentStep = vue.ref(0);
+const formSteps = vue.ref([]);
+const isLastStep = vue.computed(() => currentStep.value === formSteps.value.length - 1);
+const currentStepObject = vue.computed(() => formSteps.value[currentStep.value] || {});
+
+vue.onMounted(() => {
+  // Initialize form fields
+  props.fields?.forEach(field => {
+    let fieldObj;
+
     if (typeof field === 'object') {
-      fieldObj = {...field};
+      fieldObj = { ...field };
       fieldObj.field = fieldObj.field ?? fieldObj.name;
-      // fieldObj.label && getLabel(fieldObj.field)
-      fieldObj.helper = fieldObj.helperText ?? fieldObj.helper;
-      // !fieldObj.helper && fieldObj.helperText ? fieldObj.helper = fieldObj.helperText : fieldObj.helper = getHelperText(fieldObj.field)
-      // fieldObj.helperText === undefined && ()
+      fieldObj.helper = fieldObj.helperText ?? getHelperText(fieldObj.field);
       fieldObj.label = fieldObj.label ?? getLabel(fieldObj.field ?? fieldObj.name);
-      // fieldObj.placeholder && fieldObj.placeHolder && getPlaceholder(fieldObj.field)
+      fieldObj.placeholder = fieldObj.placeholder ?? fieldObj.placeHolder ?? getPlaceholder(fieldObj.field);
       fieldObj.value = null;
     } else {
       fieldObj = {
-        field: field, label: getLabel(field),
+        field: field,
+        label: getLabel(field),
         helper: getHelperText(field),
         placeholder: getPlaceholder(field),
         value: null
       };
 
-      if(props.fillSelects && props.fillSelects[fieldObj.field]){
+      // Apply fillSelects configuration
+      if (props.fillSelects?.[fieldObj.field]) {
         Object.assign(fieldObj, props.fillSelects[fieldObj.field]);
       }
     }
-    if(props.required && props.required.includes(fieldObj.field)){
+
+    // Mark as required if in required array
+    if (props.required?.includes(fieldObj.field)) {
       fieldObj.required = true;
     }
+
     formFields.value.push(fieldObj);
-    formFields.value.push({
-      field: 'id',
-      type: 'hidden'
-      // label: 'IF'
-    });
   });
+
+  // Add hidden ID field
+  formFields.value.push({
+    field: 'id',
+    type: 'hidden'
+  });
+
   setExistingData(props.currentData);
-});
 
+  // Initialize steps
+  if (!props.steps || props.steps.length === 0) {
+    // Single step form - all fields in one step
+    formSteps.value = [{
+      name: 'Form',
+      label: 'Form',
+      fields: formFields.value
+    }];
+  } else {
+    // Multi-step form - map fields to steps
+    formSteps.value = props.steps.map(step => {
+      const stepFields = step.fields.map(fieldName => {
+        return formFields.value.find(f => f.field === fieldName)
+      }).filter(f => f !== undefined);
+
+      return {
+        ...step,
+        fields: stepFields
+      }
+    });
+  }
+});
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("form", {
     class: vue.normalizeClass([__props.formClass, "sh-auto-form"]),
     ref_key: "shAutoForm",
     ref: shAutoForm,
-    onSubmit: _cache[0] || (_cache[0] = e => submitForm(e))
+    onSubmit: _cache[2] || (_cache[2] = 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') + ' sh-field' + field.field)
-      }, [
-        (field.type === 'hidden')
-          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-              key: 0,
-              type: "hidden",
-              name: field.field,
-              "onUpdate:modelValue": $event => ((formFields.value[index].value) = $event)
-            }, null, 8 /* PROPS */, _hoisted_1$l)), [
-              [vue.vModelText, formFields.value[index].value]
-            ])
-          : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              (!vue.unref(isFloating) && field.label)
-                ? (vue.openBlock(), vue.createElementBlock("label", {
-                    key: 0,
-                    class: vue.normalizeClass(getElementClass('formLabel'))
-                  }, [
-                    vue.createElementVNode("span", {
-                      innerHTML: field.label,
-                      class: "sh-label"
-                    }, null, 8 /* PROPS */, _hoisted_2$f),
-                    (field.required)
-                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$c, "*"))
+    vue.createCommentVNode(" Step Indicator "),
+    (formSteps.value.length > 1)
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createElementVNode("div", _hoisted_2$f, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(formSteps.value, (step, index) => {
+              return (vue.openBlock(), vue.createElementBlock("div", {
+                key: `step-${index}`,
+                class: vue.normalizeClass([
+            'sh-form-step',
+            getElementClass('formStep'),
+            {
+              'active': index === currentStep.value,
+              'completed': index < currentStep.value,
+              'upcoming': index > currentStep.value
+            }
+          ])
+              }, [
+                (index > 0)
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$c))
+                  : vue.createCommentVNode("v-if", true),
+                vue.createElementVNode("div", _hoisted_4$c, [
+                  vue.createElementVNode("div", _hoisted_5$a, [
+                    (index < currentStep.value)
+                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$7, "✓"))
+                      : (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$6, vue.toDisplayString(index + 1), 1 /* TEXT */))
+                  ]),
+                  vue.createElementVNode("div", _hoisted_8$5, [
+                    vue.createElementVNode("div", {
+                      class: "sh-step-title",
+                      innerHTML: step.title || step.label || step.name
+                    }, null, 8 /* PROPS */, _hoisted_9$5),
+                    (step.description)
+                      ? (vue.openBlock(), vue.createElementBlock("div", {
+                          key: 0,
+                          class: "sh-step-description",
+                          innerHTML: step.description
+                        }, null, 8 /* PROPS */, _hoisted_10$4))
                       : vue.createCommentVNode("v-if", true)
-                  ], 2 /* CLASS */))
-                : vue.createCommentVNode("v-if", true),
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps({ ref_for: true }, getComponentProps(field), {
-                isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
-                onClick: $event => (fieldChanged(field.field)),
-                "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
-                modelValue: formFields.value[index].value,
-                class: getComponentClass(field.field)
-              }), null, 16 /* FULL_PROPS */, ["isInvalid", "onClick", "onUpdate:modelValue", "modelValue", "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_4$c))
-                : vue.createCommentVNode("v-if", true),
-              (vue.unref(isFloating))
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$a, [...(_cache[1] || (_cache[1] = [
-                    vue.createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* CACHED */),
-                    vue.createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* CACHED */),
-                    vue.createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* CACHED */)
-                  ]))]))
-                : vue.createCommentVNode("v-if", true),
-              (field.helper)
-                ? (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 3,
-                    class: vue.normalizeClass(getElementClass('helperText')),
-                    innerHTML: field.helper
-                  }, null, 10 /* CLASS, PROPS */, _hoisted_6$7))
-                : vue.createCommentVNode("v-if", true),
-              (validationErrors.value[field.field])
-                ? (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 4,
-                    class: vue.normalizeClass(getElementClass('invalidFeedback'))
-                  }, vue.toDisplayString(validationErrors.value[field.field]), 3 /* TEXT, CLASS */))
-                : vue.createCommentVNode("v-if", true)
-            ], 64 /* STABLE_FRAGMENT */))
-      ], 2 /* CLASS */))
+                  ])
+                ])
+              ], 2 /* CLASS */))
+            }), 128 /* KEYED_FRAGMENT */))
+          ]),
+          vue.createElementVNode("div", _hoisted_11$3, [
+            vue.createElementVNode("span", _hoisted_12$3, "Step " + vue.toDisplayString(currentStep.value + 1) + " of " + vue.toDisplayString(formSteps.value.length), 1 /* TEXT */),
+            vue.createElementVNode("span", _hoisted_13$3, vue.toDisplayString(currentStepObject.value.title || currentStepObject.value.label || currentStepObject.value.name), 1 /* TEXT */)
+          ])
+        ]))
+      : vue.createCommentVNode("v-if", true),
+    vue.createCommentVNode(" Form Fields "),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(formSteps.value, (stepData, stepIndex) => {
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+        key: `step-${stepIndex}`,
+        class: "sh-step-fields"
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(stepData.fields, (field, fieldIndex) => {
+          return (vue.openBlock(), vue.createElementBlock("div", {
+            key: `field-${field.field}-${fieldIndex}`,
+            class: vue.normalizeClass(getElementClass('formGroup') + ' sh-field-' + field.field)
+          }, [
+            (field.type === 'hidden')
+              ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+                  key: 0,
+                  type: "hidden",
+                  name: field.field,
+                  "onUpdate:modelValue": $event => ((field.value) = $event)
+                }, null, 8 /* PROPS */, _hoisted_14$3)), [
+                  [vue.vModelText, field.value]
+                ])
+              : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  (!vue.unref(isFloating) && field.label)
+                    ? (vue.openBlock(), vue.createElementBlock("label", {
+                        key: 0,
+                        class: vue.normalizeClass(getElementClass('formLabel'))
+                      }, [
+                        vue.createElementVNode("span", {
+                          innerHTML: field.label,
+                          class: "sh-label"
+                        }, null, 8 /* PROPS */, _hoisted_15$3),
+                        (field.required)
+                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_16$1, "*"))
+                          : vue.createCommentVNode("v-if", true)
+                      ], 2 /* CLASS */))
+                    : vue.createCommentVNode("v-if", true),
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps({ ref_for: true }, getComponentProps(field), {
+                    isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
+                    onClick: $event => (fieldChanged(field.field)),
+                    "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((field.value) = $event)],
+                    modelValue: field.value,
+                    class: getComponentClass(field.field)
+                  }), null, 16 /* FULL_PROPS */, ["isInvalid", "onClick", "onUpdate:modelValue", "modelValue", "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_17$1))
+                    : vue.createCommentVNode("v-if", true),
+                  (vue.unref(isFloating))
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, [...(_cache[3] || (_cache[3] = [
+                        vue.createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* CACHED */),
+                        vue.createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* CACHED */),
+                        vue.createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* CACHED */)
+                      ]))]))
+                    : vue.createCommentVNode("v-if", true),
+                  (field.helper)
+                    ? (vue.openBlock(), vue.createElementBlock("div", {
+                        key: 3,
+                        class: vue.normalizeClass(getElementClass('helperText')),
+                        innerHTML: field.helper
+                      }, null, 10 /* CLASS, PROPS */, _hoisted_19$1))
+                    : vue.createCommentVNode("v-if", true),
+                  (validationErrors.value[field.field])
+                    ? (vue.openBlock(), vue.createElementBlock("div", {
+                        key: 4,
+                        class: vue.normalizeClass(getElementClass('invalidFeedback'))
+                      }, vue.toDisplayString(validationErrors.value[field.field]), 3 /* TEXT, CLASS */))
+                    : vue.createCommentVNode("v-if", true)
+                ], 64 /* STABLE_FRAGMENT */))
+          ], 2 /* CLASS */))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 512 /* NEED_PATCH */)), [
+        [vue.vShow, currentStep.value === stepIndex]
+      ])
     }), 128 /* KEYED_FRAGMENT */)),
     vue.renderSlot(_ctx.$slots, "default"),
+    vue.createCommentVNode(" Navigation Buttons "),
     vue.createElementVNode("div", {
-      class: vue.normalizeClass(getElementClass('formGroup'))
+      class: vue.normalizeClass(["sh-form-navigation", formSteps.value.length > 1 ? 'd-flex':''])
     }, [
-      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_8$5))
-          : vue.createCommentVNode("v-if", true),
-        (!loading.value)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$5, "Submit"))
-          : vue.createCommentVNode("v-if", true)
-      ], 14 /* CLASS, STYLE, PROPS */, _hoisted_7$6)
+      (currentStep.value > 0)
+        ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(getElementClass('formGroup'))
+          }, [
+            vue.createElementVNode("button", {
+              type: "button",
+              class: vue.normalizeClass([getElementClass('actionBtn'), 'sh-btn-previous']),
+              onClick: _cache[0] || (_cache[0] = $event => (currentStep.value -= 1)),
+              disabled: loading.value
+            }, [
+              _cache[4] || (_cache[4] = vue.createElementVNode("span", { class: "sh-btn-icon" }, "←", -1 /* CACHED */)),
+              vue.createElementVNode("span", null, vue.toDisplayString(currentStepObject.value.labels?.previous || 'Previous'), 1 /* TEXT */)
+            ], 10 /* CLASS, PROPS */, _hoisted_20$1)
+          ], 2 /* CLASS */))
+        : vue.createCommentVNode("v-if", true),
+      (!isLastStep.value)
+        ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: vue.normalizeClass(getElementClass('formGroup') + ' ms-auto')
+          }, [
+            vue.createElementVNode("button", {
+              type: "button",
+              class: vue.normalizeClass([getElementClass('actionBtn'), 'sh-btn-next']),
+              onClick: _cache[1] || (_cache[1] = $event => (currentStep.value += 1)),
+              disabled: loading.value
+            }, [
+              vue.createElementVNode("span", null, vue.toDisplayString(currentStepObject.value.labels?.next || 'Next'), 1 /* TEXT */),
+              _cache[5] || (_cache[5] = vue.createElementVNode("span", { class: "sh-btn-icon" }, "→", -1 /* CACHED */))
+            ], 10 /* CLASS, PROPS */, _hoisted_21$1)
+          ], 2 /* CLASS */))
+        : vue.createCommentVNode("v-if", true),
+      (isLastStep.value)
+        ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: vue.normalizeClass(getElementClass('formGroup') + ' ms-auto')
+          }, [
+            vue.createElementVNode("button", {
+              style: vue.normalizeStyle({width: submitBtnWidth.value}),
+              ref_key: "submitBtn",
+              ref: submitBtn,
+              disabled: loading.value,
+              class: vue.normalizeClass([getElementClass('actionBtn'), 'sh-btn-submit'])
+            }, [
+              (loading.value)
+                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    _cache[6] || (_cache[6] = vue.createElementVNode("span", {
+                      class: "spinner-border spinner-border-sm",
+                      role: "status",
+                      "aria-hidden": "true"
+                    }, null, -1 /* CACHED */)),
+                    _cache[7] || (_cache[7] = vue.createElementVNode("span", { class: "ms-2 d-none" }, "Processing...", -1 /* CACHED */))
+                  ], 64 /* STABLE_FRAGMENT */))
+                : vue.createCommentVNode("v-if", true),
+              (!loading.value)
+                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_23$1, vue.toDisplayString(__props.actionLabel), 1 /* TEXT */))
+                : vue.createCommentVNode("v-if", true)
+            ], 14 /* CLASS, STYLE, PROPS */, _hoisted_22$1)
+          ], 2 /* CLASS */))
+        : vue.createCommentVNode("v-if", true)
     ], 2 /* CLASS */)
   ], 34 /* CLASS, NEED_HYDRATION */))
 }
@@ -3781,6 +4130,7 @@ return (_ctx, _cache) => {
 
 };
 
+script$q.__scopeId = "data-v-9443b7a4";
 script$q.__file = "src/lib/components/ShAutoForm.vue";
 
 const _hoisted_1$k = ["id", "data-bs-backdrop"];