@bagelink/vue 1.15.211 → 1.15.213

package/package.json

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

package/src/form-flow/FormFlow.vue

@@ -251,10 +251,17 @@ function generateLabel(key: string, field: FieldBuilder): string {
 function getFieldComponent(fieldOrType: FieldBuilder | string) {
 	// display: 'btn' on select/multiselect renders as SelectBtn
 	if (typeof fieldOrType !== 'string' && (fieldOrType._type === 'select' || fieldOrType._type === 'multiselect') && fieldOrType._config.display === 'btn') {
-		return SelectBtn
+		return props.components?.selectBtn ?? SelectBtn
 	}
 
 	const type = typeof fieldOrType === 'string' ? fieldOrType : fieldOrType._type
+	// Host may override any built-in field type via `components` (e.g. auctentic
+	// skins radio/select as OfferChoiceField). Named `$.component('X')` refs are
+	// resolved separately in `resolveComponent` — type keys only hit here.
+	if (type && props.components?.[type] != null) {
+		return props.components[type]
+	}
+
 	const componentMap: Record<string, any> = {
 		text: TextInput,
 		email: EmailInput,

package/src/form-flow/FormFlowPlayer.vue

@@ -49,6 +49,10 @@ export interface Props {
 	 * the `redirect` event).
 	 */
 	redirect?: boolean
+	/** Hide the built-in step `<h2>` (host renders its own title). Default false. */
+	hideTitle?: boolean
+	/** Hide the step-position counter pill in the default nav. Default false. */
+	hideCounter?: boolean
 	/** Optional async submit handler; awaited before `complete` is emitted. */
 	onComplete?: (data: Record<string, any>) => Promise<void> | void
 }
@@ -59,6 +63,8 @@ const props = withDefaults(defineProps<Props>(), {
 	autoAdvanceDelay: 200,
 	dataLayer: true,
 	redirect: true,
+	hideTitle: false,
+	hideCounter: false,
 })
 
 const emit = defineEmits<{
@@ -75,7 +81,9 @@ const emit = defineEmits<{
 
 const { $t } = useI18n()
 const slots: Slots = useSlots()
-const slotNames = computed((): string[] => Object.keys(slots))
+const slotNames = computed((): string[] =>
+	Object.keys(slots).filter(name => name !== 'nav' && name !== 'primary-label' && name !== 'step' && name !== 'empty'),
+)
 
 // Slide direction for the step transition: 'next' when advancing, 'prev' on
 // Back. Drives which named transition (and thus which X offset) is used.
@@ -152,6 +160,10 @@ watch(progress, val => emit('progress', val), { immediate: true })
 const formRef = ref<{ validate: () => boolean } | null>(null)
 const submitting = ref(false)
 
+function setFormRef(el: { validate: () => boolean } | null) {
+	formRef.value = el
+}
+
 /** Validate the visible current step via the underlying FormFlow. */
 function validateStep(): boolean {
 	return formRef.value?.validate() ?? true
@@ -258,7 +270,7 @@ defineExpose({ formData, currentKey, nextKey, isTerminal, progress, validateStep
 		<div class="ffp-stage">
 			<Transition :name="transitionName" mode="out-in">
 				<div v-if="currentStep" :key="currentKey" class="ffp-step">
-					<h2 v-if="currentStep.title" class="ffp-title">
+					<h2 v-if="!hideTitle && currentStep.title" class="ffp-title">
 						{{ currentStep.title }}
 					</h2>
 
@@ -267,6 +279,8 @@ defineExpose({ formData, currentKey, nextKey, isTerminal, progress, validateStep
 						:step="currentStep"
 						:form-data="formData"
 						:step-key="currentKey"
+						:schema="currentSchema"
+						:set-form-ref="setFormRef"
 					>
 						<FormFlow
 							v-if="currentSchema"
@@ -290,44 +304,64 @@ defineExpose({ formData, currentKey, nextKey, isTerminal, progress, validateStep
 			</Transition>
 		</div>
 
-		<div class="ffp-nav flex justify-content-between gap-1">
-			<Btn
-				class="ffp-nav-btn"
-				flat
-				icon="arrow_back"
-				:value="$t?.('multiStep.previous') ?? 'Back'"
-				:disabled="!canGoBack"
-				@click="onBack"
-			/>
-
-			<span class="ffp-counter flex-center round bg-primary-10 color-primary px-075 txt13 medium tabular-nums">
-				{{ stepPosition }}
-			</span>
-
-			<Btn
-				v-if="isTerminal"
-				class="ffp-nav-btn"
-				:value="$t?.('multiStep.complete') ?? 'Submit'"
-				:loading="submitting"
-				@click="onPrimary"
-			>
-				<slot name="primary-label" :is-terminal="true">
-					{{ $t?.('multiStep.complete') ?? 'Submit' }}
-				</slot>
-			</Btn>
-			<Btn
-				v-else
-				class="ffp-nav-btn"
-				icon-end="arrow_forward"
-				:value="$t?.('multiStep.next') ?? 'Next'"
-				:disabled="submitting"
-				@click="onPrimary"
-			>
-				<slot name="primary-label" :is-terminal="false">
-					{{ $t?.('multiStep.next') ?? 'Next' }}
-				</slot>
-			</Btn>
-		</div>
+		<!--
+			Nav slot props use `goBack`/`goPrimary` (not `onBack`/`onPrimary`) —
+			Vue treats `on*` as listeners and would swallow those names.
+		-->
+		<slot
+			name="nav"
+			:can-go-back="canGoBack"
+			:is-terminal="isTerminal"
+			:submitting="submitting"
+			:go-back="onBack"
+			:go-primary="onPrimary"
+			:step-position="stepPosition"
+			:progress="progress"
+			:current-key="currentKey"
+			:auto-advances="autoAdvances"
+		>
+			<div class="ffp-nav flex flex-center gap-1">
+				<Btn
+					class="ffp-nav-btn"
+					flat
+					icon="arrow_back"
+					:value="$t?.('multiStep.previous') ?? 'Back'"
+					:disabled="!canGoBack"
+					@click="onBack"
+				/>
+
+				<span
+					v-if="!hideCounter"
+					class="ffp-counter flex-center round bg-primary-10 color-primary px-075 txt13 medium tabular-nums"
+				>
+					{{ stepPosition }}
+				</span>
+
+				<Btn
+					v-if="isTerminal"
+					class="ffp-nav-btn"
+					:value="$t?.('multiStep.complete') ?? 'Submit'"
+					:loading="submitting"
+					@click="onPrimary"
+				>
+					<slot name="primary-label" :is-terminal="true">
+						{{ $t?.('multiStep.complete') ?? 'Submit' }}
+					</slot>
+				</Btn>
+				<Btn
+					v-else
+					class="ffp-nav-btn"
+					icon-end="arrow_forward"
+					:value="$t?.('multiStep.next') ?? 'Next'"
+					:disabled="submitting"
+					@click="onPrimary"
+				>
+					<slot name="primary-label" :is-terminal="false">
+						{{ $t?.('multiStep.next') ?? 'Next' }}
+					</slot>
+				</Btn>
+			</div>
+		</slot>
 	</div>
 </template>
 

package/src/form-flow/form-flow.ts

@@ -991,6 +991,7 @@ function createFieldFromProperty(
 			field = $.number(config)
 			break
 		case 'tel':
+		case 'phone':
 			field = $.tel(config)
 			break
 		case 'url':
@@ -1029,6 +1030,10 @@ function createFieldFromProperty(
 		case 'multiselect':
 			field = $.multiselect(xOptions ?? resolvedProp.enum ?? [], config)
 			break
+		case 'file':
+		case 'upload':
+			field = $.upload(config)
+			break
 		case 'array': {
 			const arrayConfig: Record<string, any> = { ...config }
 			if (xUi.allowAdd !== undefined) arrayConfig.allowAdd = xUi.allowAdd