@iankibetsh/shframework 5.7.6 → 5.7.8

package/dist/dist/library.mjs.css

@@ -260,38 +260,6 @@
   }
 }
 
-.colored-toast.swal2-icon-success {
-  background-color: #a5dc86 !important;
-}
-
-.colored-toast.swal2-icon-error {
-  background-color: #f27474 !important;
-}
-
-.colored-toast.swal2-icon-warning {
-  background-color: #f8bb86 !important;
-}
-
-.colored-toast.swal2-icon-info {
-  background-color: #3fc3ee !important;
-}
-
-.colored-toast.swal2-icon-question {
-  background-color: #87adbd !important;
-}
-
-.colored-toast .swal2-title {
-  color: white;
-}
-
-.colored-toast .swal2-close {
-  color: white;
-}
-
-.colored-toast .swal2-html-container {
-  color: white;
-}
-
 .sh-phone{
   display: flex;
   width: 100%;
@@ -324,6 +292,38 @@
   opacity: 0.5;
 }
 
+.colored-toast.swal2-icon-success {
+  background-color: #a5dc86 !important;
+}
+
+.colored-toast.swal2-icon-error {
+  background-color: #f27474 !important;
+}
+
+.colored-toast.swal2-icon-warning {
+  background-color: #f8bb86 !important;
+}
+
+.colored-toast.swal2-icon-info {
+  background-color: #3fc3ee !important;
+}
+
+.colored-toast.swal2-icon-question {
+  background-color: #87adbd !important;
+}
+
+.colored-toast .swal2-title {
+  color: white;
+}
+
+.colored-toast .swal2-close {
+  color: white;
+}
+
+.colored-toast .swal2-html-container {
+  color: white;
+}
+
 .permissions-main {
   background: #edeff2;
 }

package/dist/library.js

@@ -2141,7 +2141,16 @@ const setSelectedCountry = () => {
 };
 
 vue.watch(() => props.modelValue, (newVal) => {
-  if (!input.value) {
+  if (!newVal) {
+    input.value = '';
+    return;
+  }
+
+  const country = countriesList.value.find(c => newVal.startsWith(c.dialCode));
+  if (country) {
+    selectedCountry.value = country;
+    input.value = newVal.replace(country.dialCode, '').replace(/:/g, '');
+  } else {
     input.value = newVal.replace('+254', '').replace('+1', '');
   }
 });
@@ -3110,29 +3119,21 @@ var script$x = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-vue.watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
 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 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3153,18 +3154,13 @@ var script$w = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-vue.watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
@@ -3173,11 +3169,8 @@ return (_ctx, _cache) => {
     min: __props.min,
     max: __props.max,
     type: "number",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$n)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 8 /* PROPS */, _hoisted_1$n)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3195,31 +3188,21 @@ var script$v = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-
-vue.watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
-
 return (_ctx, _cache) => {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
     type: "text",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3237,29 +3220,20 @@ var script$u = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-vue.watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
 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 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3280,14 +3254,19 @@ var script$t = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
+
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
+  }
+});
+
 const selectOptions = vue.ref(null);
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
+
 vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
   const options = props.data ?? props.options;
   if(options){
     selectOptions.value = options.map(item=>{
@@ -3309,18 +3288,10 @@ vue.onMounted(()=>{
     });
   }
 });
-vue.watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
-  }
-});
 
 return (_ctx, _cache) => {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
   }, [
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectOptions.value, (option) => {
       return (vue.openBlock(), vue.createElementBlock("option", {
@@ -3328,7 +3299,7 @@ return (_ctx, _cache) => {
         value: option.id
       }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$m))
     }), 128 /* KEYED_FRAGMENT */))
-  ], 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+  ], 512 /* NEED_PATCH */)), [
     [vue.vModelSelect, inputModel.value]
   ])
 }
@@ -3346,25 +3317,21 @@ var script$s = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
+  }
 });
 
-
 return (_ctx, _cache) => {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
     type: "password",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3382,31 +3349,21 @@ var script$r = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = vue.ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-vue.onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-
-vue.watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = vue.computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
-
 return (_ctx, _cache) => {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
     type: "datetime-local",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -3665,6 +3622,8 @@ const submitBtn = vue.ref(false);
 const validationErrors = vue.ref({});
 const formError = vue.ref(null);
 const submitBtnWidth = vue.ref(null);
+const isDirty = vue.ref(false);
+const isSynchronizing = vue.ref(false);
 
 // Helper functions
 const closeModal = () => {
@@ -3708,10 +3667,19 @@ const getFormData = () => {
   return data
 };
 
-const fieldChanged = field => {
+const fieldChanged = (field, value) => {
+  if (isSynchronizing.value) return
+  isDirty.value = true;
   delete validationErrors.value[field];
+  
+  // Find the field and update its value if it was passed
+  const fieldObj = formFields.value.find(f => f.field === field);
+  if (fieldObj && value !== undefined) {
+    fieldObj.value = value;
+  }
+  
   const data = getFormData();
-  const fieldValue = formFields.value.find(f => f.field === field)?.value;
+  const fieldValue = fieldObj?.value;
   setTimeout(() => {
     emit('fieldChanged', field, fieldValue, data);
   }, 300);
@@ -3796,6 +3764,7 @@ const handleSuccessRequest = res => {
   if (!props.retainDataAfterSubmission) {
     formFields.value.forEach(field => field.value = null);
   }
+  isDirty.value = false;
 
   if (!props.retainModal) {
     closeModal();
@@ -3841,19 +3810,34 @@ const handleFailedRequest = reason => {
   emit('formError', reason);
 };
 const setExistingData = (existingData) => {
+  // Don't sync if no data provided
   if (!existingData) return
-
-  formFields.value = formFields.value.map(field => {
-    if (existingData[field.field] !== undefined) {
-      return { ...field, value: existingData[field.field] }
+  
+  // Don't sync if user has made changes to the form
+  if (isDirty.value) return
+  
+  isSynchronizing.value = true;
+  const keys = Object.keys(existingData);
+
+  keys.forEach(k => {
+    const field = formFields.value.find(f => f.field === k);
+    if (field) {
+      field.value = existingData[k];
     }
-    return field
   });
+  
+  setTimeout(() => {
+    isSynchronizing.value = false;
+  }, 100);
 };
 
-vue.watch(() => props.currentData, (newData) => {
-  setExistingData(newData);
-});
+vue.watch(() => props.currentData, (newData, oldData) => {
+  // Only sync if form is pristine (not dirty) OR if this is a completely new object reference
+  // This prevents reactive updates to currentData from overwriting user input
+  if (!isDirty.value || !oldData) {
+    setExistingData(newData);
+  }
+}, { deep: true });
 
 const currentStep = vue.ref(0);
 const formSteps = vue.ref([]);
@@ -3901,7 +3885,11 @@ vue.onMounted(() => {
     type: 'hidden'
   });
 
+  isSynchronizing.value = true;
   setExistingData(props.currentData);
+  setTimeout(() => {
+    isSynchronizing.value = false;
+  }, 200);
 
   // Initialize steps
   if (!props.steps || props.steps.length === 0) {
@@ -4019,11 +4007,10 @@ return (_ctx, _cache) => {
                     : 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)],
+                    "onUpdate:modelValue": [val => fieldChanged(field.field, val), $event => ((field.value) = $event)],
                     modelValue: field.value,
                     class: getComponentClass(field.field)
-                  }), null, 16 /* FULL_PROPS */, ["isInvalid", "onClick", "onUpdate:modelValue", "modelValue", "class"])),
+                  }), null, 16 /* FULL_PROPS */, ["isInvalid", "onUpdate:modelValue", "modelValue", "class"])),
                   (vue.unref(isFloating) && field.label)
                     ? (vue.openBlock(), vue.createElementBlock("label", {
                         key: 1,

package/dist/library.mjs

@@ -2130,7 +2130,16 @@ const setSelectedCountry = () => {
 };
 
 watch(() => props.modelValue, (newVal) => {
-  if (!input.value) {
+  if (!newVal) {
+    input.value = '';
+    return;
+  }
+
+  const country = countriesList.value.find(c => newVal.startsWith(c.dialCode));
+  if (country) {
+    selectedCountry.value = country;
+    input.value = newVal.replace(country.dialCode, '').replace(/:/g, '');
+  } else {
     input.value = newVal.replace('+254', '').replace('+1', '');
   }
 });
@@ -3099,29 +3108,21 @@ var script$x = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("input", {
     type: "email",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3142,18 +3143,13 @@ var script$w = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
@@ -3162,11 +3158,8 @@ return (_ctx, _cache) => {
     min: __props.min,
     max: __props.max,
     type: "number",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$n)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 8 /* PROPS */, _hoisted_1$n)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3184,31 +3177,21 @@ var script$v = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-
-watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
-
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("input", {
     type: "text",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3226,29 +3209,20 @@ var script$u = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("textarea", {
-    type: "text",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3269,14 +3243,19 @@ var script$t = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
+
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
+  }
+});
+
 const selectOptions = ref(null);
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
+
 onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
   const options = props.data ?? props.options;
   if(options){
     selectOptions.value = options.map(item=>{
@@ -3298,18 +3277,10 @@ onMounted(()=>{
     });
   }
 });
-watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
-  }
-});
 
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("select", {
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
   }, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(selectOptions.value, (option) => {
       return (openBlock(), createElementBlock("option", {
@@ -3317,7 +3288,7 @@ return (_ctx, _cache) => {
         value: option.id
       }, toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$m))
     }), 128 /* KEYED_FRAGMENT */))
-  ], 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+  ], 512 /* NEED_PATCH */)), [
     [vModelSelect, inputModel.value]
   ])
 }
@@ -3335,25 +3306,21 @@ var script$s = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
+  }
 });
 
-
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("input", {
     type: "password",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3371,31 +3338,21 @@ var script$r = {
 
 const props = __props;
 const emit = __emit;
-const inputModel = ref(null);
 
-const modelValueUpdated = (e) => {
-  emit('clearValidationErrors');
-  emit('update:modelValue',inputModel.value);
-};
-onMounted(()=>{
-  props.modelValue && (inputModel.value = props.modelValue);
-});
-
-watch(()=>props.modelValue, (newValue)=>{
-  if(newValue) {
-    inputModel.value = newValue;
+// Use computed for proper two-way binding
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('clearValidationErrors');
+    emit('update:modelValue', value);
   }
 });
 
-
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("input", {
     type: "datetime-local",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
-    onChange: modelValueUpdated,
-    onKeydown: modelValueUpdated,
-    onUpdated: modelValueUpdated
-  }, null, 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event))
+  }, null, 512 /* NEED_PATCH */)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -3654,6 +3611,8 @@ const submitBtn = ref(false);
 const validationErrors = ref({});
 const formError = ref(null);
 const submitBtnWidth = ref(null);
+const isDirty = ref(false);
+const isSynchronizing = ref(false);
 
 // Helper functions
 const closeModal = () => {
@@ -3697,10 +3656,19 @@ const getFormData = () => {
   return data
 };
 
-const fieldChanged = field => {
+const fieldChanged = (field, value) => {
+  if (isSynchronizing.value) return
+  isDirty.value = true;
   delete validationErrors.value[field];
+  
+  // Find the field and update its value if it was passed
+  const fieldObj = formFields.value.find(f => f.field === field);
+  if (fieldObj && value !== undefined) {
+    fieldObj.value = value;
+  }
+  
   const data = getFormData();
-  const fieldValue = formFields.value.find(f => f.field === field)?.value;
+  const fieldValue = fieldObj?.value;
   setTimeout(() => {
     emit('fieldChanged', field, fieldValue, data);
   }, 300);
@@ -3785,6 +3753,7 @@ const handleSuccessRequest = res => {
   if (!props.retainDataAfterSubmission) {
     formFields.value.forEach(field => field.value = null);
   }
+  isDirty.value = false;
 
   if (!props.retainModal) {
     closeModal();
@@ -3830,19 +3799,34 @@ const handleFailedRequest = reason => {
   emit('formError', reason);
 };
 const setExistingData = (existingData) => {
+  // Don't sync if no data provided
   if (!existingData) return
-
-  formFields.value = formFields.value.map(field => {
-    if (existingData[field.field] !== undefined) {
-      return { ...field, value: existingData[field.field] }
+  
+  // Don't sync if user has made changes to the form
+  if (isDirty.value) return
+  
+  isSynchronizing.value = true;
+  const keys = Object.keys(existingData);
+
+  keys.forEach(k => {
+    const field = formFields.value.find(f => f.field === k);
+    if (field) {
+      field.value = existingData[k];
     }
-    return field
   });
+  
+  setTimeout(() => {
+    isSynchronizing.value = false;
+  }, 100);
 };
 
-watch(() => props.currentData, (newData) => {
-  setExistingData(newData);
-});
+watch(() => props.currentData, (newData, oldData) => {
+  // Only sync if form is pristine (not dirty) OR if this is a completely new object reference
+  // This prevents reactive updates to currentData from overwriting user input
+  if (!isDirty.value || !oldData) {
+    setExistingData(newData);
+  }
+}, { deep: true });
 
 const currentStep = ref(0);
 const formSteps = ref([]);
@@ -3890,7 +3874,11 @@ onMounted(() => {
     type: 'hidden'
   });
 
+  isSynchronizing.value = true;
   setExistingData(props.currentData);
+  setTimeout(() => {
+    isSynchronizing.value = false;
+  }, 200);
 
   // Initialize steps
   if (!props.steps || props.steps.length === 0) {
@@ -4008,11 +3996,10 @@ return (_ctx, _cache) => {
                     : createCommentVNode("v-if", true),
                   (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), 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)],
+                    "onUpdate:modelValue": [val => fieldChanged(field.field, val), $event => ((field.value) = $event)],
                     modelValue: field.value,
                     class: getComponentClass(field.field)
-                  }), null, 16 /* FULL_PROPS */, ["isInvalid", "onClick", "onUpdate:modelValue", "modelValue", "class"])),
+                  }), null, 16 /* FULL_PROPS */, ["isInvalid", "onUpdate:modelValue", "modelValue", "class"])),
                   (unref(isFloating) && field.label)
                     ? (openBlock(), createElementBlock("label", {
                         key: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "5.7.6",
+  "version": "5.7.8",
   "description": "Vue library for handling laravel backend",
   "repository": {
     "type": "git",