@bagelink/vue 1.4.48 → 1.4.52

package/package.json

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

package/src/components/NavBar.vue

@@ -41,11 +41,7 @@ onMounted(calcIsOpen)
 	<div :class="{ open: isOpen, closed: !isOpen }">
 		<slot name="top" :isOpen="isOpen" />
 		<div
-			class="nav-expend"
-			role="button"
-			aria-label="Toggle Navigation"
-			tabindex="0"
-			@click="toggleMenu"
+			class="nav-expend" role="button" aria-label="Toggle Navigation" tabindex="0" @click="toggleMenu"
 			@keypress.enter="toggleMenu"
 		>
 			<Icon icon="chevron_right" class="top-arrow" />
@@ -55,12 +51,8 @@ onMounted(calcIsOpen)
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
 					<component
-						:is="link.to ? 'router-link' : 'div'"
-						v-for="link in links"
-						:key="link.label"
-						class="nav-button"
-						:to="link.to"
-						@click="link.onClick?.()"
+						:is="link.to ? 'router-link' : 'div'" v-for="link in links" :key="link.label"
+						class="nav-button" :to="link.to" @click="link.onClick?.()"
 					>
 						<Icon :icon="link.icon" />
 						<div class="tooltip">
@@ -72,12 +64,8 @@ onMounted(calcIsOpen)
 
 			<div class="bot-buttons-wrapper">
 				<component
-					:is="link.to ? 'router-link' : 'div'"
-					v-for="link in footerLinks"
-					:key="link.label"
-					class="nav-button"
-					:to="link.to"
-					@click="link.onClick?.()"
+					:is="link.to ? 'router-link' : 'div'" v-for="link in footerLinks" :key="link.label"
+					class="nav-button" :to="link.to" @click="link.onClick?.()"
 				>
 					<Icon :icon="link.icon" />
 					<div class="tooltip">
@@ -138,7 +126,7 @@ onMounted(calcIsOpen)
 .nav {
 	color: var(--bgl-light-text);
 	background: var(--bgl-primary);
-	z-index: 100;
+	z-index: 98;
 	width: 70px;
 	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
 	display: flex;
@@ -379,6 +367,7 @@ onMounted(calcIsOpen)
 		display: none;
 	}
 }
+
 @media screen and (max-height: 550px) {
 	.nav.open .nav-button {
 		margin-top: 4px;

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 {

package/src/components/form/inputs/NumberInput.vue

@@ -126,12 +126,14 @@ function inputHandler() {
 
 watch(() => numberValue, () => {
 	nextTick(() => {
+		// Don't reformat if user is currently typing a decimal
+		if (formattedValue.endsWith('.')) return
 		formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
 	})
 })
 
 watch(() => modelValue, (newVal) => {
-	if (newVal !== numberValue)	{
+	if (newVal !== numberValue) {
 		if (typeof newVal === 'string' && (newVal === '-' || newVal.endsWith('.'))) {
 			formattedValue = newVal
 			return
@@ -143,8 +145,7 @@ watch(() => modelValue, (newVal) => {
 
 <template>
 	<div
-		class="bagel-input num-input"
-		:class="{
+		class="bagel-input num-input" :class="{
 			textInputSpinnerWrap: icon || spinner,
 			txtInputIconStart: iconStart,
 		}"
@@ -154,47 +155,39 @@ watch(() => modelValue, (newVal) => {
 				{{ label }}
 			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
+				<Btn
+					v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius"
+					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment"
+				/>
 				<input
-					:id
-					v-model.trim="formattedValue"
-					v-pattern.number
-					type="text"
-					:class="{
+					:id v-model.trim="formattedValue" v-pattern.number type="text" :class="{
 						'txt-center': center,
 						'min0': layout,
 						'bgl-number-input': layout !== 'vertical' && layout !== 'horizontal',
-					}"
-					:placeholder="placeholder || label"
-					:disabled
-					:required
-					:readonly="disabled"
-					inputmode="decimal"
-					autocomplete="off"
-					:pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
-					autocorrect="off"
-					spellcheck="false"
-					@input="inputHandler"
-					@keydown.up.prevent="increment"
+					}" :placeholder="placeholder || label" :disabled :required :readonly="disabled" inputmode="decimal"
+					autocomplete="off" :pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
+					autocorrect="off" spellcheck="false" @input="inputHandler" @keydown.up.prevent="increment"
 					@keydown.down.prevent="decrement"
 				>
 				<p v-if="helptext" class="opacity-7 light">
 					{{ helptext }}
 				</p>
-				<Icon
-					v-if="iconStart"
-					class="iconStart"
-					:icon="iconStart"
-				/>
-				<Icon
-					v-if="icon"
-					:icon
+				<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
+				<Icon v-if="icon" :icon />
+				<Btn
+					v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius"
+					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement"
 				/>
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement" />
 
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
-					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add top-bgl-ctrl-num-btn" :disabled="!canAdd" tabindex="-1" @click="increment" />
-					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove" :disabled="!canDecrement" tabindex="-1" @click="decrement" />
+					<Btn
+						icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add top-bgl-ctrl-num-btn" :disabled="!canAdd"
+						tabindex="-1" @click="increment"
+					/>
+					<Btn
+						icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove" :disabled="!canDecrement"
+						tabindex="-1" @click="decrement"
+					/>
 				</div>
 			</div>
 		</div>
@@ -202,14 +195,15 @@ watch(() => modelValue, (newVal) => {
 </template>
 
 <style scoped>
-.txtInputIconStart input{
+.txtInputIconStart input {
 	padding-inline-start: calc(var(--input-height) / 1.5);
 }
+
 .txtInputIconStart .iconStart {
 	color: var(--input-color);
 	position: absolute;
-    inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2 );
+	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--input-height) / 2);
 	line-height: 0;
 }
 
@@ -226,19 +220,21 @@ watch(() => modelValue, (newVal) => {
 	gap: 0;
 }
 
-.top-bgl-ctrl-num-btn{
+.top-bgl-ctrl-num-btn {
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn{
+
+.bgl-ctrl-num-btn {
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
 
-.bgl-big-ctrl-num-btn{
+.bgl-big-ctrl-num-btn {
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input{
+
+.bgl-number-input {
 	padding-inline-end: 1.75rem !important;
 }
 </style>