@bagelink/vue 1.15.482 → 1.15.486

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.482",
+  "version": "1.15.486",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/form-flow/FormFlow.vue

@@ -400,6 +400,7 @@ function getFieldProps(field: FieldBuilder, key: string) {
 		'onUpdate:modelValue': (val: any) => { updateField(key, val, field) },
 		'error': mergedErrors.value[key],
 		...configRest,
+		'formData': formData.value,
 		// Inputs use `helptext`; FormFlow schema API keeps `helpText`
 		...(helpText != null ? { helptext: helpText } : {}),
 		name: field._config.name ?? key,

package/src/form-flow/FormFlowPlayer.vue

@@ -23,6 +23,9 @@ import { normalizeCustomFormSubmission } from './custom-field-registry'
 import { fromJSONSchema } from './form-flow'
 import type { JSONSchemaOptionsSourceLoader } from './form-flow'
 import Btn from '../components/Btn.vue'
+import Icon from '../components/Icon/Icon.vue'
+import ListItem from '../components/ListItem.vue'
+import Progress from '../components/Progress.vue'
 import FormFlow from './FormFlow.vue'
 import type { FormStepCompleteEventPayload, FormStepEventPayload } from './structure'
 import { autoAdvanceFieldKey, entryStepKey, pathProgress, resolveNext, stepAutoAdvances, stepByKey } from './structure'
@@ -31,6 +34,8 @@ export interface Props {
 	structure: FormStructure
 	modelValue?: Record<string, any>
 	components?: Record<string, any>
+	/** Stable step key to resume. Falls back to the structure entry step. */
+	initialStepKey?: string | null
 	/** Human name of the form, included in step/complete event payloads. */
 	formName?: string
 	/** Slide between steps (honors prefers-reduced-motion). Default true. */
@@ -52,6 +57,8 @@ export interface Props {
 	hideTitle?: boolean
 	/** Hide the step-position counter pill in the default nav. Default false. */
 	hideCounter?: boolean
+	/** Show numbered stages with completed-step navigation. Default false. */
+	showStages?: boolean
 	/** Optional async submit handler; awaited before `complete` is emitted. */
 	onComplete?: (data: Record<string, any>) => Promise<void> | void
 	/**
@@ -75,6 +82,7 @@ const props = withDefaults(defineProps<Props>(), {
 	redirect: true,
 	hideTitle: false,
 	hideCounter: false,
+	showStages: false,
 })
 
 const emit = defineEmits<{
@@ -116,14 +124,30 @@ watch(() => props.modelValue, (val) => {
 
 // Navigation state: the current step key plus the stack of previously visited
 // keys (for Back). Initialised to the structure's entry step.
-const currentKey = ref<string | undefined>(entryStepKey(props.structure))
+function initialKey(): string | undefined {
+	const requested = props.initialStepKey
+	return requested && stepByKey(props.structure, requested)
+		? requested
+		: entryStepKey(props.structure)
+}
+
+const currentKey = ref<string | undefined>(initialKey())
 const history = ref<string[]>([])
+const completedKeys = ref<Set<string>>(new Set())
 
 watch(() => props.structure, () => {
-	currentKey.value = entryStepKey(props.structure)
+	currentKey.value = initialKey()
 	history.value = []
+	completedKeys.value = new Set()
 }, { deep: true })
 
+watch(() => props.initialStepKey, (key) => {
+	if (!key || key === currentKey.value || !stepByKey(props.structure, key)) return
+	currentKey.value = key
+	history.value = []
+	completedKeys.value = new Set()
+})
+
 watch(currentKey, (key) => {
 	if (key) emit('stepChange', key)
 }, { immediate: true })
@@ -188,6 +212,32 @@ const canGoBack = computed(() => history.value.length > 0)
 // host can render its own <Progress> (the player stays chrome-light).
 const progress = computed(() => pathProgress(props.structure, currentKey.value, formData.value))
 watch(progress, val => emit('progress', val), { immediate: true })
+const pathSteps = computed(() => {
+	const result: FormStep[] = []
+	const seen = new Set<string>()
+	let key = entryStepKey(props.structure)
+	while (key && !seen.has(key)) {
+		seen.add(key)
+		const step = stepByKey(props.structure, key)
+		if (!step) break
+		result.push(step)
+		key = resolveNext(props.structure, key, formData.value) ?? undefined
+	}
+	return result
+})
+const currentPathIndex = computed(() =>
+	pathSteps.value.findIndex(step => step.key === currentKey.value)
+)
+watch([pathSteps, currentPathIndex], ([steps, index]) => {
+	if (index <= 0) return
+	if (history.value.length === 0) {
+		history.value = steps.slice(0, index).map(step => step.key)
+	}
+	completedKeys.value = new Set([
+		...completedKeys.value,
+		...steps.slice(0, index).map(step => step.key),
+	])
+}, { immediate: true })
 
 const formRef = ref<{ validate: () => boolean } | null>(null)
 const submitting = ref(false)
@@ -243,6 +293,7 @@ async function onPrimary() {
 	// Advance to the resolved next step.
 	const target = nextKey.value
 	if (target && currentKey.value) {
+		completedKeys.value = new Set([...completedKeys.value, currentKey.value])
 		const destination = stepByKey(props.structure, target)
 		emit('stepComplete', {
 			...buildPayload(currentKey.value),
@@ -310,15 +361,68 @@ function onBack() {
 	}
 }
 
+function canOpenStage(key: string): boolean {
+	if (key === currentKey.value || completedKeys.value.has(key)) return true
+	return key === nextKey.value
+}
+
+async function goToStage(key: string) {
+	if (key === currentKey.value || !canOpenStage(key)) return
+	const targetIndex = pathSteps.value.findIndex(step => step.key === key)
+	const currentIndex = currentPathIndex.value
+	if (targetIndex < 0 || currentIndex < 0) return
+	if (key === nextKey.value) {
+		await onPrimary()
+		return
+	}
+	slideDir.value = targetIndex < currentIndex ? 'prev' : 'next'
+	history.value = pathSteps.value.slice(0, targetIndex).map(step => step.key)
+	currentKey.value = key
+}
+
 // Progress: position in the visited path (best-effort; branches make total
 // step count indeterminate, so we show visited-count rather than a fixed total).
 const stepPosition = computed(() => history.value.length + 1)
 
-defineExpose({ formData, currentKey, nextKey, isTerminal, progress, validateStep })
+defineExpose({ formData, currentKey, nextKey, isTerminal, progress, completedKeys, validateStep })
 </script>
 
 <template>
-	<div class="form-flow-player">
+	<div class="form-flow-player" :class="{ 'form-flow-player--stages': showStages }">
+		<nav v-if="showStages" class="ffp-stages" aria-label="Form stages">
+			<ol class="ffp-stage-list p-0 m-0">
+				<li v-for="(step, index) in pathSteps" :key="step.key">
+					<ListItem
+						rounded
+						color="purple"
+						:title="step.title"
+						:active="currentKey === step.key"
+						:disabled="!canOpenStage(step.key)"
+						:aria-current="currentKey === step.key ? 'step' : undefined"
+						@click="goToStage(step.key)"
+					>
+						<template #media>
+							<span
+								class="ffp-stage-number flex-center round border"
+								:class="currentKey === step.key
+									? 'bg-primary color-white border-transparent'
+									: completedKeys.has(step.key)
+										? 'bg-green color-white border-green'
+										: 'color-gray'"
+							>
+								<Icon v-if="completedKeys.has(step.key) && currentKey !== step.key" icon="check" :size="0.9" />
+								<template v-else>{{ index + 1 }}</template>
+							</span>
+						</template>
+					</ListItem>
+				</li>
+			</ol>
+			<div class="ffp-stage-progress">
+				<span>{{ currentStep?.title }}</span>
+				<span>{{ currentPathIndex + 1 }} / {{ pathSteps.length }}</span>
+				<Progress class="w-100p mt-05" :value="progress" :size="8" />
+			</div>
+		</nav>
 		<div class="ffp-stage">
 			<Transition :name="transitionName" mode="out-in">
 				<div v-if="currentStep" :key="currentKey" class="ffp-step">
@@ -425,6 +529,29 @@ defineExpose({ formData, currentKey, nextKey, isTerminal, progress, validateStep
 	gap: 1.5rem;
 }
 
+.form-flow-player--stages {
+	display: grid;
+	grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+}
+
+.ffp-stage-list {
+	list-style: none;
+}
+
+.ffp-stage-number {
+	width: 2rem;
+	height: 2rem;
+}
+
+.ffp-stage-progress {
+	display: none;
+}
+
+.form-flow-player--stages > .ffp-stage,
+.form-flow-player--stages > .ffp-nav {
+	grid-column: 2;
+}
+
 .ffp-title {
 	margin: 0 0 1rem 0;
 	font-size: 1.5rem;
@@ -470,4 +597,21 @@ defineExpose({ formData, currentKey, nextKey, isTerminal, progress, validateStep
 		transform: none;
 	}
 }
+
+@media (max-width: 910px) {
+	.form-flow-player {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ffp-stage-list {
+		display: none;
+	}
+
+	.ffp-stage-progress {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+}
 </style>