@bagelink/vue 1.2.15 → 1.2.18

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,123 @@ 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)
-
-let currentStep = $ref(0)
+const numberOfSteps = computed(() => computedSchema.value.length)
 
-const currentStepSchema = $computed(() => [computedSchema[currentStep]])
+const currentStepSchema = computed(() => [computedSchema.value[currentStep.value]])
 
-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)
+
+const isStepValidated = computed(() => (stepIndex: number) => validatedSteps.value.includes(stepIndex))
 
-function prevStep() { if (currentStep > 0) currentStep-- }
+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 +138,242 @@ 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()
+	// }
+}
+
 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 { DateViewMode, 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

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

package/src/components/form/inputs/Upload/upload.types.d.ts

@@ -42,7 +42,6 @@ export interface QueueFile {
 	uploaded?: boolean
 }
 
-
 export interface UploadInputProps {
 	label?: string
 	multiple?: boolean

package/src/index.ts

@@ -13,7 +13,7 @@ export { ModalPlugin, useModal } from './plugins/modal'
 export * from './types'
 export * from './utils'
 export * from './utils/allCountries'
-export * from './utils/constants'
+export * from './utils/calendar/dateUtils'
 import './styles/bagel.css'
 
-export * from './utils/timeAgo'
+export * from './utils/constants'