@bagelink/vue 1.4.50 → 1.4.52

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.50",
+  "version": "1.4.52",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/BglMultiStepForm.vue

@@ -11,7 +11,7 @@ const props = withDefaults(
 		bagelFormProps?: Omit<
 			ComponentProps<typeof BagelForm<T, P>>,
 			(
-			'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
+				'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
 			)
 		>
 		schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
@@ -174,22 +174,46 @@ async function nextStep() {
 	checkCurrentStepValidity()
 }
 
-function goToStep(stepIndex: number) {
+async function goToStep(stepIndex: number) {
 	// Can always go back, or to already validated steps
 	if (stepIndex < currentStep.value || validatedSteps.value.includes(stepIndex)) {
 		currentStep.value = stepIndex
 		return true
 	}
 
-	// For forward navigation to non-validated steps, validate current step first if needed
-	// This will show validation errors to the user
-	if (props.validateOnSteps && reportValidity() === false) {
-		return false
-	}
+	// For forward navigation, validate each step sequentially until target or invalid step
+	if (stepIndex > currentStep.value) {
+		// Validate current step first
+		if (props.validateOnSteps && reportValidity() === false) {
+			return false
+		}
+
+		// Move forward step by step, validating each one
+		for (let step = currentStep.value + 1; step <= stepIndex; step++) {
+			// Move to the next step
+			currentStep.value = step
+
+			// Wait for the form to update with new step's fields
+			await nextTick()
+			await sleep(100) // Give time for form to render
+
+			// Validate this step if validation is enabled
+			if (props.validateOnSteps) {
+				// Check if the step is valid without showing validation errors for intermediate steps
+				const isValid = formRef.value?.checkValidity() ?? false
+
+				if (!isValid) {
+					// If this step is invalid, stop here
+					return false
+				} else {
+					// Mark this step as validated
+					if (!validatedSteps.value.includes(step)) {
+						validatedSteps.value.push(step)
+					}
+				}
+			}
+		}
 
-	// Can only move one step forward at a time (prevent skipping)
-	if (stepIndex === currentStep.value + 1) {
-		currentStep.value = stepIndex
 		return true
 	}
 
@@ -247,14 +271,11 @@ defineExpose({
 			>
 				<div class="bgl-steps-indicator">
 					<div
-						v-for="(_, index) in numberOfSteps"
-						:key="index"
-						class="bgl-step-indicator" :class="[
+						v-for="(_, index) in numberOfSteps" :key="index" class="bgl-step-indicator" :class="[
 							{ active: index === currentStep },
 							{ completed: index < currentStep || isStepValidated(index) },
 							{ clickable: props.allowStepNavigation },
-						]"
-						@click="props.allowStepNavigation && goToStep(index)"
+						]" @click="props.allowStepNavigation && goToStep(index)"
 					>
 						<span>{{ index + 1 }}</span>
 						<span v-if="props.stepLabels && props.stepLabels[index]" class="bgl-step-label">
@@ -266,17 +287,9 @@ defineExpose({
 		</div>
 
 		<div class="bgl-form-wrapper">
-			<transition
-				:name="slideDirection === 'right' ? 'slide-right' : 'slide-left'"
-				mode="out-in"
-			>
+			<transition :name="slideDirection === 'right' ? 'slide-right' : 'slide-left'" mode="out-in">
 				<div :key="currentStep" ref="formContainer" class="bgl-form-container">
-					<BagelForm
-						ref="formRef"
-						v-model="formData"
-						:schema="currentStepSchema"
-						v-bind="bagelFormProps"
-					>
+					<BagelForm ref="formRef" v-model="formData" :schema="currentStepSchema" v-bind="bagelFormProps">
 						<template v-if="$slots.success" #success>
 							<slot name="success" />
 						</template>
@@ -302,9 +315,7 @@ defineExpose({
 				>
 					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" @click="prevStep" />
 					<Btn
-						v-if="!isLastStep"
-						icon="arrow_forward"
-						:disabled="props.validateOnSteps && !isStepValid"
+						v-if="!isLastStep" icon="arrow_forward" :disabled="props.validateOnSteps && !isStepValid"
 						@click="nextStep"
 					/>
 					<Btn v-else value="Submit" @click="handleSubmit" />
@@ -356,7 +367,7 @@ defineExpose({
 	display: none;
 }
 
-.bgl-step-indicator > span:first-child {
+.bgl-step-indicator>span:first-child {
 	width: 30px;
 	height: 30px;
 	border-radius: 50%;
@@ -368,12 +379,12 @@ defineExpose({
 	margin-bottom: 0.5rem;
 }
 
-.bgl-step-indicator.active > span:first-child {
+.bgl-step-indicator.active>span:first-child {
 	background: var(--primary-color, #4CAF50);
 	color: white;
 }
 
-.bgl-step-indicator.completed > span:first-child {
+.bgl-step-indicator.completed>span:first-child {
 	background: var(--success-color, #8BC34A);
 	color: white;
 }
@@ -396,7 +407,7 @@ defineExpose({
 	interpolate-size: allow-keywords;
 }
 
-.bgl-form-wrapper > div {
+.bgl-form-wrapper>div {
 	grid-area: 1 / 1;
 
 }
@@ -418,12 +429,12 @@ defineExpose({
 /* Slide Left Animation (going forward) */
 .slide-left-enter-active {
 	transition: opacity var(--transition-duration) var(--ease-in),
-	            transform var(--transition-duration) var(--ease-in);
+		transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-left-leave-active {
 	transition: opacity var(--transition-duration) var(--ease-out),
-	            transform var(--transition-duration) var(--ease-out);
+		transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-left-enter-from {
@@ -439,12 +450,12 @@ defineExpose({
 /* Slide Right Animation (going back) */
 .slide-right-enter-active {
 	transition: opacity var(--transition-duration) var(--ease-in),
-	            transform var(--transition-duration) var(--ease-in);
+		transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-right-leave-active {
 	transition: opacity var(--transition-duration) var(--ease-out),
-	            transform var(--transition-duration) var(--ease-out);
+		transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-right-enter-from {