@bagelink/vue 1.2.18 → 1.2.20

package/src/components/form/BglMultiStepForm.vue

@@ -62,9 +62,62 @@ const computedSchema = computed(
 	() => useBglSchema({ schema: props.schema })
 )
 
-const numberOfSteps = computed(() => computedSchema.value.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 currentStepSchema = computed(() => [computedSchema.value[currentStep.value]])
+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
+			}
+		}
+
+		if (shouldInclude) {
+			map.push(index)
+		}
+	})
+	return map
+})
+
+// Get current step schema using the mapping
+const currentStepSchema = computed(() => {
+	const actualIndex = schemaIndexMap.value[currentStep.value]
+	return [computedSchema.value[actualIndex]]
+})
 
 const isStepping = ref(false)
 let isSteppingTO: NodeJS.Timeout
@@ -147,6 +200,14 @@ function reset() {
 	// }
 }
 
+// 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: reportValidity,

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateViewMode, ModeType } from '../../../utils/calendar/typings'
+import type { ModeType } from '../../../utils/calendar/typings'
 import { Btn, NumberInput } from '@bagelink/vue'
 import { computed, ref } from 'vue'
 import Time, { WEEK_START_DAY } from '../../../utils/calendar/time'
@@ -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>