@bagelink/vue 1.2.13 → 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/FieldArray.vue

@@ -7,7 +7,7 @@ import type {
 	BglFormSchemaFnT,
 	Field,
 } from '@bagelink/vue'
-import { BagelForm, Btn, Loading } from '@bagelink/vue'
+import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
 import { ref, onMounted, computed, watch } from 'vue'
 
 const props = withDefaults(

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/RichText/components/EditorToolbar.vue

@@ -23,10 +23,9 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
 				<template #default="{ hide }">
 					<GridBox
-						:gridSize="5" @select="$event => {
-							runAction('insertTable', $event);
-							($event.target as any)?.blur();
-							hide()
+						:gridSize="5" @select="(value) => {
+							runAction('insertTable', value);
+							hide();
 						}"
 					/>
 				</template>

package/src/components/form/inputs/RichText/components/gridBox.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+const props = defineProps<{
+	gridSize?: number
+}>()
 const emit = defineEmits(['select'])
 const fb = 1
-const base = 5
+const base = props.gridSize || 5
 const hoveredRow = $ref(fb)
 const hoveredCol = $ref(fb)
 

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -7,13 +7,19 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 
 	return {
 		execute: (command: string, value?: string) => {
-			if (!state.doc) return
+			console.log(`[useCommands] Executing command: ${command}`, value ? `with value: ${value}` : '')
+
+			if (!state.doc) {
+				console.log('[useCommands] No document available, skipping command')
+				return
+			}
 
 			// Log command if debug is enabled
 			debug?.logCommand(command, value)
 
 			// Handle view state commands directly
 			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
+				console.log(`[useCommands] Handling view state command: ${command}`)
 				switch (command) {
 					case 'splitView':
 						state.isSplitView = !state.isSplitView
@@ -28,14 +34,26 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			}
 
 			// Focus the editor before executing command
-			state.doc.body.focus()
+			try {
+				state.doc.body.focus()
+				console.log('[useCommands] Editor focused')
+			} catch (e) {
+				console.error('[useCommands] Error focusing editor:', e)
+			}
 
 			// Execute the command
-			executor.execute(command, value)
+			try {
+				console.log('[useCommands] Executing command via executor')
+				executor.execute(command, value)
+				console.log('[useCommands] Command execution completed')
+			} catch (e) {
+				console.error('[useCommands] Error during command execution:', e)
+			}
 
 			// Update content state only if it has changed
 			const newContent = state.doc.body.innerHTML
 			if (newContent !== state.content) {
+				console.log('[useCommands] Content changed, updating state')
 				state.content = newContent
 			}
 
@@ -47,6 +65,7 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 					|| state.rangeCount !== selection.rangeCount
 
 				if (hasSelectionChanged) {
+					console.log('[useCommands] Selection changed, updating state')
 					state.selection = selection
 					state.range = selection.getRangeAt(0).cloneRange()
 					state.rangeCount = selection.rangeCount

package/src/components/form/inputs/RichText/config.ts

@@ -102,13 +102,15 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'fontColor', label: 'Font Color', icon: 'format_color_text' },
 	{ name: 'bgColor', label: 'Background Color', icon: 'format_color_fill' },
 	{ name: 'insertTable', label: 'Insert Table', icon: 'table' },
-	{ name: 'deleteTable', label: 'Delete Table', icon: 'table_rows' },
-	{ name: 'insertRowAbove', label: 'Insert Row Above', icon: 'table_rows' },
-	{ name: 'insertRowBelow', label: 'Insert Row Below', icon: 'table_rows' },
-	{ name: 'deleteRow', label: 'Delete Row', icon: 'table_rows' },
-	{ name: 'insertColumnLeft', label: 'Insert Column Left', icon: 'add_column_left' },
-	{ name: 'insertColumnRight', label: 'Insert Column Right', icon: 'add_column_right' },
-	{ name: 'deleteColumn', label: 'Delete Column', icon: 'view_column' },
+	{ name: 'deleteTable', label: 'Delete Table', icon: 'delete_sweep' },
+	{ name: 'mergeCells', label: 'Merge Cells', icon: 'table_chart' },
+	{ name: 'splitCells', label: 'Split Cells', icon: 'dashboard' },
+	{ name: 'addRowBefore', label: 'Insert Row Above', icon: 'add_box' },
+	{ name: 'addRowAfter', label: 'Insert Row Below', icon: 'vertical_align_bottom' },
+	{ name: 'deleteRow', label: 'Delete Row', icon: 'remove' },
+	{ name: 'insertColumnLeft', label: 'Insert Column Left', icon: 'format_indent_decrease' },
+	{ name: 'insertColumnRight', label: 'Insert Column Right', icon: 'format_indent_increase' },
+	{ name: 'deleteColumn', label: 'Delete Column', icon: 'view_week' },
 	{ name: 'separator' },
 	{ name: 'undo', label: 'Undo', icon: 'undo' },
 	{ name: 'redo', label: 'Redo', icon: 'redo' },