@bagelink/vue 1.15.253 → 1.15.261

package/src/form-flow/FormFlowPlayer.vue

@@ -22,12 +22,15 @@ import { useI18n } from '../i18n'
 import { fromJSONSchema } from './form-flow'
 import Btn from '../components/Btn.vue'
 import FormFlow from './FormFlow.vue'
+import type { FormStepEventPayload } from './structure'
 import { autoAdvanceFieldKey, entryStepKey, pathProgress, resolveNext, stepAutoAdvances, stepByKey } from './structure'
 
 export interface Props {
 	structure: FormStructure
 	modelValue?: Record<string, any>
 	components?: Record<string, any>
+	/** Human name of the form, included in step/complete event payloads. */
+	formName?: string
 	/** Slide between steps (honors prefers-reduced-motion). Default true. */
 	animated?: boolean
 	/**
@@ -37,12 +40,6 @@ export interface Props {
 	autoAdvance?: boolean
 	/** Delay (ms) before an auto-advance fires, letting the choice paint. */
 	autoAdvanceDelay?: number
-	/**
-	 * Push each step's `enterEvent` / `submitEvent` payload to `window.dataLayer`
-	 * (GTM). Default true. Set false to suppress (e.g. SSR or when the host wants
-	 * to handle analytics itself via the `dataLayer` event).
-	 */
-	dataLayer?: boolean
 	/**
 	 * Perform `redirectUrl` navigation on submit. Default true. Set false to let
 	 * the host own navigation (it can read the URL from the `complete` event or
@@ -58,10 +55,10 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+	formName: '',
 	animated: true,
 	autoAdvance: true,
 	autoAdvanceDelay: 200,
-	dataLayer: true,
 	redirect: true,
 	hideTitle: false,
 	hideCounter: false,
@@ -72,8 +69,10 @@ const emit = defineEmits<{
 	'stepChange': [stepKey: string]
 	/** Best-effort 0–100 progress along the current path; recomputes on change. */
 	'progress': [value: number]
-	/** A dataLayer payload was pushed. `phase` = which step hook fired it. */
-	'dataLayer': [payload: Record<string, any>, phase: 'enter' | 'submit']
+	/** Fired when a step is entered (including the first). */
+	'stepEnter': [payload: FormStepEventPayload]
+	/** Fired when the form is submitted from a terminal step. */
+	'formComplete': [payload: FormStepEventPayload]
 	/** The form is about to redirect to `url` (fired even if `redirect` is off). */
 	'redirect': [url: string]
 	'complete': [data: Record<string, any>]
@@ -116,24 +115,27 @@ watch(currentKey, (key) => {
 
 const currentStep = computed(() => stepByKey(props.structure, currentKey.value ?? null))
 
-// ─── dataLayer (GTM) ─────────────────────────────────────────────────────────
-// Push a step's analytics payload to window.dataLayer and notify the host. The
-// server stores these payloads verbatim; the client decides when to fire them:
-// `enterEvent` on step entry, `submitEvent` on submit-from-a-terminal-step.
-function pushDataLayer(payload: Record<string, any> | null | undefined, phase: 'enter' | 'submit') {
-	if (!payload || typeof payload !== 'object') return
-	emit('dataLayer', payload, phase)
-	if (!props.dataLayer || typeof window === 'undefined') return
-	const w = window as unknown as { dataLayer?: Record<string, any>[] }
-	w.dataLayer = w.dataLayer || []
-	w.dataLayer.push({ ...payload })
+// ─── Step event helpers ───────────────────────────────────────────────────────
+// Build a standardised payload for both `stepEnter` and `formComplete` emits.
+function buildPayload(stepKey: string): FormStepEventPayload {
+	const step = stepByKey(props.structure, stepKey)
+	const prog = pathProgress(props.structure, stepKey, formData.value)
+	// Estimate total from progress percentage (progress = position / total * 100).
+	const position = history.value.length + 1
+	const totalSteps = prog > 0 ? Math.round(position / prog * 100) : null
+	return {
+		formName: props.formName,
+		stepKey,
+		stepTitle: step?.title ?? '',
+		stepIndex: position,
+		totalSteps,
+		formData: { ...formData.value },
+	}
 }
 
-// Fire the current step's `enterEvent` whenever we land on it (including the
-// first step). `immediate` covers the entry step; the key guard avoids
-// re-firing when the same step object recomputes.
+// Fire `stepEnter` whenever we land on a new step (including the first).
 watch(currentKey, (key, prev) => {
-	if (key && key !== prev) pushDataLayer(stepByKey(props.structure, key)?.enterEvent, 'enter')
+	if (key && key !== prev) emit('stepEnter', buildPayload(key))
 }, { immediate: true })
 
 // Convert the current step's stored JSON Schema into a renderable schema.
@@ -177,8 +179,8 @@ async function onPrimary() {
 		const step = currentStep.value
 		try {
 			await props.onComplete?.({ ...formData.value })
-			// Fire this terminal step's submit analytics before completing.
-			pushDataLayer(step?.submitEvent, 'submit')
+			// Emit formComplete with standardised payload before completing.
+			if (currentKey.value) emit('formComplete', buildPayload(currentKey.value))
 			emit('complete', { ...formData.value })
 			// Redirect last: leaves the page after analytics + host handling.
 			const url = step?.redirectUrl?.trim()

package/src/form-flow/structure.ts

@@ -31,13 +31,6 @@ export interface FormStep {
 	 * (final step or an early-termination leaf). Empty => no redirect.
 	 */
 	redirectUrl?: string | null
-	/** dataLayer payload pushed when the user *enters* this step. */
-	enterEvent?: Record<string, any> | null
-	/**
-	 * dataLayer payload pushed when the form is *submitted* from this step
-	 * (i.e. this step is terminal), before the redirect.
-	 */
-	submitEvent?: Record<string, any> | null
 	/** Canvas position (designer-only; ignored by the server). */
 	x?: number
 	y?: number
@@ -60,6 +53,18 @@ export interface FormStructure {
 	transitions: StepEdge[]
 }
 
+/** Standardised payload emitted for both `stepEnter` and `formComplete`. */
+export interface FormStepEventPayload {
+	formName: string
+	stepKey: string
+	stepTitle: string
+	/** 1-based position in visited path. */
+	stepIndex: number
+	/** Projected total along current branch (null if indeterminate). */
+	totalSteps: number | null
+	formData: Record<string, any>
+}
+
 /** An empty structure (single-step / not-yet-built). */
 export function emptyStructure(): FormStructure {
 	return { steps: [], transitions: [] }

package/src/styles/dark.css

@@ -333,11 +333,12 @@
  * fight the existing focus outline or the .frame/.bgl-outline variants, which
  * already draw their own outline. The focus state still wins because its rule
  * comes from inputs.css with its own box-shadow + outline-color.            */
-.bgl-dark-mode .bagel-input input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
+.bgl-dark-mode .bagel-input input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not(.national-number-input),
 .bgl-dark-mode .bagel-input textarea,
 .bgl-dark-mode .bagel-input select,
 .bgl-dark-mode .custom-select .input,
-.bgl-dark-mode .selectinput-btn {
+.bgl-dark-mode .selectinput-btn,
+.bgl-dark-mode .tel-input {
   box-shadow: inset 0 0 0 1px var(--bgl-dm-border);
 }