@bagelink/vue 1.2.15 → 1.2.20

package/src/components/form/BglMultiStepForm.vue

@@ -3,7 +3,7 @@ import type { BglFormSchemaFnT } from '@bagelink/vue'
 
 import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers'
 import { BagelForm, Btn, useBglSchema } from '@bagelink/vue'
-import { watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -14,56 +14,176 @@ const props = withDefaults(
 			)
 		>
 		schema: BglFormSchemaFnT<T>
+		showProgress?: boolean
+		rtl?: boolean
+		stepLabels?: string[]
+		allowStepNavigation?: boolean
+		validateOnSteps?: boolean
+		/** Animation direction - auto detects based on step change or can be forced */
+		direction?: 'auto' | 'left' | 'right'
 	}>(),
 	{
-		bagelFormProps: () => ({})
+		bagelFormProps: () => ({}),
+		showProgress: false,
+		rtl: false,
+		allowStepNavigation: false,
+		validateOnSteps: true,
+		direction: 'auto'
 	}
 )
 
-const emits = defineEmits(['submit'])
+const emits = defineEmits(['submit', 'stepChange'])
 
 type BagelFormT = ComponentExposed<typeof BagelForm<T, P>>
 
-const formRef = $ref<BagelFormT>()
+const formRef = ref<BagelFormT>()
 
-const formData = defineModel<T>(
-	'modelValue',
-	{ default: () => {}, required: true }
-)
+const formData = defineModel<T>('modelValue', {
+	default: () => ({}),
+	required: true
+})
+
+const currentStep = ref(0)
+const previousStep = ref(0)
+const validatedSteps = ref<number[]>([])
 
 function reportValidity() {
-	if (!formRef) return false
-	return formRef.validateForm()
+	if (!formRef.value) return false
+	const isValid = formRef.value.validateForm()
+
+	if (isValid && !validatedSteps.value.includes(currentStep.value)) {
+		validatedSteps.value.push(currentStep.value)
+	}
+
+	return isValid
 }
 
-const computedSchema = $computed(
+const computedSchema = computed(
 	() => useBglSchema({ schema: props.schema })
 )
 
-const numberOfSteps = $ref(computedSchema.length)
+// Filter out steps with vIf conditions that evaluate to false
+const filteredSchema = computed(() => {
+	const schema = computedSchema.value
+	return schema.filter((step, index) => {
+		// Skip steps that have vIf or v-if returning false
+		if (step.vIf !== undefined || step['v-if'] !== undefined) {
+			const condition = step.vIf ?? step['v-if']
+			// If condition is a function, evaluate it with current form data
+			if (typeof condition === 'function') {
+				return condition(undefined, formData.value)
+			}
+			// If condition is a boolean, use it directly
+			if (typeof condition === 'boolean') {
+				return condition
+			}
+			// If condition is a string, evaluate it (treat non-empty as true)
+			if (typeof condition === 'string') {
+				return !!condition
+			}
+		}
+		// Include steps with no vIf condition or ones that evaluate to true
+		return true
+	})
+})
+
+const numberOfSteps = computed(() => filteredSchema.value.length)
+
+// Map the filtered step index to the actual schema index
+const schemaIndexMap = computed(() => {
+	const map: number[] = []
+	computedSchema.value.forEach((step, index) => {
+		const vIfCondition = step.vIf ?? step['v-if']
+		let shouldInclude = true
+
+		if (vIfCondition !== undefined) {
+			if (typeof vIfCondition === 'function') {
+				shouldInclude = vIfCondition(undefined, formData.value)
+			} else if (typeof vIfCondition === 'boolean') {
+				shouldInclude = vIfCondition
+			} else if (typeof vIfCondition === 'string') {
+				shouldInclude = !!vIfCondition
+			}
+		}
 
-let currentStep = $ref(0)
+		if (shouldInclude) {
+			map.push(index)
+		}
+	})
+	return map
+})
 
-const currentStepSchema = $computed(() => [computedSchema[currentStep]])
+// Get current step schema using the mapping
+const currentStepSchema = computed(() => {
+	const actualIndex = schemaIndexMap.value[currentStep.value]
+	return [computedSchema.value[actualIndex]]
+})
 
-let isStepping = $ref(false)
+const isStepping = ref(false)
 let isSteppingTO: NodeJS.Timeout
+
+// Tracks which way we're sliding (left or right)
+const slideDirection = ref(props.rtl ? 'right' : 'left')
+
 watch(
-	() => currentStep,
-	() => {
+	() => currentStep.value,
+	(newStep, oldStep) => {
+		// Set direction based on step change
+		if (props.direction === 'auto') {
+			slideDirection.value = props.rtl
+				? (newStep > oldStep ? 'right' : 'left')
+				: (newStep > oldStep ? 'left' : 'right')
+		} else {
+			slideDirection.value = props.direction
+		}
+
+		previousStep.value = oldStep
 		clearTimeout(isSteppingTO)
-		isStepping = true
-		isSteppingTO = setTimeout(() => (isStepping = false), 600)
+		isStepping.value = true
+		isSteppingTO = setTimeout(() => (isStepping.value = false), 200)
+		emits('stepChange', {
+			newStep,
+			oldStep,
+			totalSteps: numberOfSteps.value,
+			direction: slideDirection.value
+		})
 	}
 )
 
-const canDoNext = $computed(() => currentStep < numberOfSteps - 1)
+const canDoNext = computed(() => currentStep.value < numberOfSteps.value - 1)
 
-function prevStep() { if (currentStep > 0) currentStep-- }
+const isStepValidated = computed(() => (stepIndex: number) => validatedSteps.value.includes(stepIndex))
+
+function prevStep() {
+	if (currentStep.value > 0) currentStep.value--
+}
+
+const formContainer = ref<HTMLElement>()
 
 function nextStep() {
-	if (reportValidity() === false) return
-	if (canDoNext) currentStep++
+	if (props.validateOnSteps && reportValidity() === false) return
+	if (canDoNext.value) currentStep.value++
+}
+
+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
+	if (props.validateOnSteps && reportValidity() === false) {
+		return false
+	}
+
+	// Can only move one step forward at a time (prevent skipping)
+	if (stepIndex === currentStep.value + 1) {
+		currentStep.value = stepIndex
+		return true
+	}
+
+	return false
 }
 
 function handleSubmit() {
@@ -71,56 +191,250 @@ function handleSubmit() {
 	emits('submit', formData.value)
 }
 
+function reset() {
+	validatedSteps.value = []
+	currentStep.value = 0
+	// Clear form if BagelForm supports it
+	// if (formRef.value && typeof formRef.value.clearForm === 'function') {
+	// 	formRef.value.clearForm()
+	// }
+}
+
+// Re-evaluate filtered steps when formData changes
+watch(() => formData.value, () => {
+	// If current step index is now invalid after filtering, reset to first valid step
+	if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
+		currentStep.value = 0
+	}
+}, { deep: true })
+
 defineExpose({
 	submit: handleSubmit,
-	validateForm: formRef?.validateForm,
-	// deleteItem: formRef?.deleteItem, // ! TODO: if (does not exist) remove!()
-	isDirty: formRef?.isDirty,
-	// clearForm: formRef?.clearForm, // ! TODO: if (does not exist) remove!()
+	validateForm: reportValidity,
+	isDirty: computed(() => formRef.value?.isDirty),
+	reset,
+	goToStep,
+	currentStep: computed(() => currentStep.value),
+	totalSteps: computed(() => numberOfSteps.value),
+	nextStep,
+	prevStep,
 })
 </script>
 
 <template>
-	<transition
-		:duration="600"
-		name="fade"
-		mode="out-in"
-	>
-		<template v-if="!isStepping">
-			<div>
-				<BagelForm
-					ref="formRef"
-					v-model=" formData"
-					:schema="currentStepSchema"
-					v-bind="bagelFormProps"
-				>
-					<template #success>
-						<slot name="success" />
-					</template>
-					<template #error>
-						<slot name="error" />
-					</template>
-				</BagelForm>
-			</div>
-		</template>
-	</transition>
-
-	<slot name="steppers" v-bind="{ prevStep, nextStep, submit: handleSubmit }">
-		<Btn
-			:disabled="currentStep === 0"
-			value="Back"
-			@click="prevStep"
-		/>
-
-		<Btn
-			v-if="canDoNext"
-			value="Next"
-			@click="nextStep"
-		/>
-		<Btn
-			v-else
-			value="Submit"
-			@click="handleSubmit"
-		/>
-	</slot>
+	<div class="bgl-multi-step-form">
+		<!-- Progress indicator -->
+		<div v-if="showProgress" class="bgl-step-progress">
+			<slot
+				name="progress" v-bind="{
+					currentStep,
+					totalSteps: numberOfSteps,
+					goToStep,
+					stepLabels: props.stepLabels,
+					allowStepNavigation: props.allowStepNavigation,
+					isStepValidated,
+				}"
+			>
+				<div class="bgl-steps-indicator">
+					<div
+						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)"
+					>
+						<span>{{ index + 1 }}</span>
+						<span v-if="props.stepLabels && props.stepLabels[index]" class="bgl-step-label">
+							{{ props.stepLabels[index] }}
+						</span>
+					</div>
+				</div>
+			</slot>
+		</div>
+
+		<div class="bgl-form-wrapper">
+			<transition
+				:name="slideDirection === 'right' ? 'slide-right' : 'slide-left'"
+				mode="out-in"
+			>
+				<div v-if="!isStepping" :key="currentStep" ref="formContainer" class="bgl-form-container">
+					<BagelForm
+						ref="formRef"
+						v-model="formData"
+						:schema="currentStepSchema"
+						v-bind="bagelFormProps"
+					>
+						<template v-if="$slots.success" #success>
+							<slot name="success" />
+						</template>
+						<template v-if="$slots.error" #error>
+							<slot name="error" />
+						</template>
+					</BagelForm>
+
+					<!-- Navigation buttons inside the form container to animate together -->
+					<div class="bgl-step-controls">
+						<slot
+							name="steppers" v-bind="{
+								prevStep,
+								nextStep,
+								submit: handleSubmit,
+								currentStep,
+								totalSteps: numberOfSteps,
+								canDoNext,
+							}"
+						>
+							<Btn :disabled="currentStep === 0" flat value="Back" class="px-3" @click="prevStep" />
+							<Btn v-if="canDoNext" value="Next" class="px-3" @click="nextStep" />
+							<Btn v-else value="Submit" @click="handleSubmit" />
+						</slot>
+					</div>
+				</div>
+			</transition>
+		</div>
+	</div>
 </template>
+
+<style scoped>
+.bgl-multi-step-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	/* Default transition duration */
+	--transition-duration: 200ms;
+	--move-distance: 35%;
+	--ease-in: ease-in-out;
+	--ease-out: ease-in-out;
+	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
+	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
+}
+
+.bgl-steps-indicator {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1rem;
+}
+
+.bgl-step-indicator {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+
+.bgl-step-indicator::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	right: 50%;
+	height: 2px;
+	width: 100%;
+	background: #e0e0e0;
+	z-index: -1;
+}
+
+.bgl-step-indicator:first-child::before {
+	display: none;
+}
+
+.bgl-step-indicator > span:first-child {
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	background: #e0e0e0;
+	color: #555;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 0.5rem;
+}
+
+.bgl-step-indicator.active > span:first-child {
+	background: var(--primary-color, #4CAF50);
+	color: white;
+}
+
+.bgl-step-indicator.completed > span:first-child {
+	background: var(--success-color, #8BC34A);
+	color: white;
+}
+
+.bgl-step-indicator.clickable {
+	cursor: pointer;
+}
+
+.bgl-step-label {
+	font-size: 0.8rem;
+	max-width: 100px;
+	text-align: center;
+}
+
+.bgl-form-wrapper {
+	display: grid;
+	overflow: clip;
+	height: auto;
+	min-height: 300px;
+	transition: height var(--transition-duration) ease;
+	interpolate-size: allow-keywords;
+}
+
+.bgl-form-wrapper > div {
+	grid-area: 1 / 1;
+}
+
+.bgl-form-container {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.bgl-step-controls {
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	margin-top: 1.5rem;
+}
+
+/* Slide Left Animation (going forward) */
+.slide-left-enter-active {
+	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+}
+
+.slide-left-leave-active {
+	transition: opacity, transform var(--transition-duration) var(--ease-out);
+}
+
+.slide-left-enter-from {
+	opacity: 0;
+	transform: translateX(var(--move-distance));
+}
+
+.slide-left-leave-to {
+	opacity: 0;
+	transform: translateX(-30%);
+}
+
+/* Slide Right Animation (going back) */
+.slide-right-enter-active {
+	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+}
+
+.slide-right-leave-active {
+	transition: all var(--transition-duration) var(--ease-out);
+	transition-property: opacity, transform;
+}
+
+.slide-right-enter-from {
+	opacity: 0;
+	transform: translateX(-30%);
+}
+
+.slide-right-leave-to {
+	opacity: 0;
+	transform: translateX(var(--move-distance));
+}
+</style>

package/src/components/form/index.ts

@@ -1,4 +1,5 @@
 export { default as BglForm } from './BagelForm.vue'
 export { default as BagelForm } from './BagelForm.vue'
+export { default as BagelMultiStepForm } from './BglMultiStepForm.vue'
 export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -151,6 +151,17 @@ pre code.hljs{
   background: #282c34;
   height: max-content;
 }
+.code-editor-wrap:focus-within, .code-editor-wrap:focus-visible, .code-editor-wrap:focus {
+    box-shadow: inset 0 0 10px #00000021;
+	outline: solid 1px var(--border-color);
+	/* outline: -webkit-focus-ring-color auto 1px; */
+
+}
+
+.code-editor-wrap:focus-within:has(textarea:focus) + .label,
+.label:has(+ .code-editor-wrap:focus-within) {
+	color: var(--bgl-primary) !important;
+}
 
 .code-editor {
   color: transparent;

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { ModeType } from '../../calendar/typings/types'
+import type { ModeType } from '../../../utils/calendar/typings'
 import { TextInput, Dropdown, formatDate } from '@bagelink/vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, onMounted } from 'vue'
-import { WEEK_START_DAY } from '../../calendar/helpers/Time'
+import { WEEK_START_DAY } from '../../../utils/calendar/time'
 import DatePicker from './DatePicker.vue'
 
 const props = withDefaults(
@@ -30,7 +30,7 @@ const props = withDefaults(
 		enableTime: false,
 		editMode: true,
 		small: false,
-		mode: 'day',
+		mode: () => ({ mode: 'day' }),
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: ''
 	},

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DateViewMode, ModeType } from '../../calendar/typings/types'
+import type { ModeType } from '../../../utils/calendar/typings'
 import { Btn, NumberInput } from '@bagelink/vue'
 import { computed, ref } from 'vue'
-import Time, { WEEK_START_DAY } from '../../calendar/helpers/Time'
+import Time, { WEEK_START_DAY } from '../../../utils/calendar/time'
 
 const props = withDefaults(
 	defineProps<{
@@ -15,7 +15,7 @@ const props = withDefaults(
 		enableTime?: boolean
 	}>(),
 	{
-		mode: 'day',
+		mode: () => ({ mode: 'day' }),
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: '',
 		enableTime: false
@@ -26,7 +26,7 @@ const emit = defineEmits(['update:modelValue'])
 
 // State
 const currentMonth = ref(new Date())
-const currentView = ref<DateViewMode>('days')
+const currentView = ref('days')
 
 // Time helper instance
 const time = new Time(props.firstDayOfWeek, props.locale)
@@ -85,7 +85,21 @@ function useCalendarView() {
 	const currentMonthDays = computed(() => {
 		const year = currentMonth.value.getFullYear()
 		const month = currentMonth.value.getMonth()
-		return time.getCalendarMonthSplitInWeeks(year, month).flat()
+
+		// Get the weeks for the current month
+		const weeksInMonth = time.getCalendarMonthSplitInWeeks(year, month)
+
+		// Always ensure we have 6 rows (42 days) in our calendar
+		// If we have less than 6 weeks, add extra week(s) from the next month
+		while (weeksInMonth.length < 6) {
+			const lastWeek = weeksInMonth[weeksInMonth.length - 1]
+			const lastDay = lastWeek[lastWeek.length - 1]
+			const nextDay = new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate() + 1)
+			const nextWeek = time.getCalendarWeekDateObjects(nextDay)
+			weeksInMonth.push(nextWeek)
+		}
+
+		return weeksInMonth.flat()
 	})
 
 	const currentMonthValue = computed(() => ({
@@ -263,21 +277,21 @@ function selectDate(date: Date | null) {
 		<div class="calendar-section m_border-none pe-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">
-					<Btn flat icon="chevron_left" @click="previousMonth" />
+					<Btn flat thin icon="chevron_left" @click="previousMonth" />
 					<div class="flex gap-05">
-						<Btn flat class="month-btn" @click="currentView = 'months'">
+						<Btn flat thin class="month-btn" @click="currentView = 'months'">
 							{{ currentMonthValue.formatted.month }}
 						</Btn>
-						<Btn flat class="year-btn" @click="currentView = 'years'">
+						<Btn flat thin class="year-btn" @click="currentView = 'years'">
 							{{ currentMonthValue.formatted.year }}
 						</Btn>
 					</div>
-					<Btn flat icon="chevron_right" @click="nextMonth" />
+					<Btn flat thin icon="chevron_right" @click="nextMonth" />
 				</template>
 				<template v-else>
-					<Btn flat icon="chevron_left" @click="previousYear" />
+					<Btn flat thin icon="chevron_left" @click="previousYear" />
 					<span class="month-year">{{ currentMonthValue.formatted.year }}</span>
-					<Btn flat icon="chevron_right" @click="nextYear" />
+					<Btn flat thin icon="chevron_right" @click="nextYear" />
 				</template>
 			</div>
 
@@ -309,35 +323,26 @@ function selectDate(date: Date | null) {
 			</div>
 
 			<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
-				<button
+				<Btn
 					v-for="month in months"
 					:key="month.value"
-					class="month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
-					:class="{
-						selected: month.value === currentMonthValue.month,
-						disabled: month.disabled,
-					}"
+					thin
+					:flat="month.value !== currentMonthValue.month"
 					:disabled="month.disabled"
+					:value="month.name"
 					@click="selectMonth(month.value)"
-				>
-					{{ month.name }}
-				</button>
+				/>
 			</div>
 
 			<div v-else class="year-grid grid gap-05 p-0">
-				<button
+				<Btn
 					v-for="year in years"
-					:key="year.value"
-					class="year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
-					:class="{
-						selected: year.value === currentMonthValue.year,
-						disabled: year.disabled,
-					}"
+					:key="year.value" thin
+					:flat="year.value !== currentMonthValue.year"
 					:disabled="year.disabled"
+					:value="year.value.toString()"
 					@click="selectYear(year.value)"
-				>
-					{{ year.value }}
-				</button>
+				/>
 			</div>
 		</div>
 

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

@@ -237,6 +237,7 @@ onMounted(() => {
 		:placement="placement"
 		class="bagel-input selectinput"
 		no-auto-focus
+		@click.stop
 	>
 		<template #trigger>
 			<label>
@@ -298,6 +299,7 @@ onMounted(() => {
 		<Card
 			class="p-05"
 			:style="{ width: fullWidth ? '100%' : 'auto' }"
+			@click.stop
 		>
 			<div ref="selectOptions" class="selectinput-options" :class="{ multiselect }">
 				<div