@bagelink/vue 1.15.202 → 1.15.205

package/src/components/charts/index.ts

@@ -4,9 +4,12 @@ export { default as BarChart } from './BarChart.vue'
 export { default as Donut } from './Donut.vue'
 export { default as Funnel } from './Funnel.vue'
 export { default as Gauge } from './Gauge.vue'
+export { default as MapChart } from './MapChart.vue'
 export { default as RadialBars } from './RadialBars.vue'
 export { default as RankBars } from './RankBars.vue'
 export { default as StatCard } from './StatCard.vue'
 
+export type { MapDatum } from './mapTypes'
+
 export type { RawPoint, RawSeries, NormalizeOptions } from './core/data'
 export type { ValueFormat } from './core/format'

package/src/components/charts/mapTypes.ts

@@ -0,0 +1,6 @@
+export interface MapDatum {
+	/** ISO 3166-1 alpha-2 country code (e.g. "US", "IL"). */
+	id: string
+	label?: string
+	value: number
+}

package/src/components/dataTable/useTableVirtualization.ts

@@ -11,9 +11,10 @@ export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>
 		return [{ __isHeader: true } as any, ...originalData]
 	})
 
-	// For useVirtualList, which expects MaybeRef
+	// `as any`: packages/vue nests vue@3.5.40 while @vueuse/core is typed against
+	// workspace vue@3.5.35 — RefSymbol identities diverge under root tsc.
 	const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
-		dataWithHeader,
+		dataWithHeader as any,
 		{
 			itemHeight: options.itemHeight,
 			overscan: 10,
@@ -28,11 +29,10 @@ export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>
 	async function registerLastItemObserver() {
 		await until(() => lastItemEl.value).toBeTruthy()
 
-		useIntersectionObserver(lastItemEl, ([entry]) => {
-			// Check if options.data.value exists and has length
+		useIntersectionObserver(lastItemEl as any, ([entry]) => {
 			const dataLength = toValue(options.data).length || 0
 
-			if (entry.isIntersecting && dataLength > 0) {
+			if (entry?.isIntersecting && dataLength > 0) {
 				options.onLastItemVisible?.()
 			}
 		})

package/src/components/form/inputs/DateInput.vue

@@ -36,6 +36,8 @@ export interface DateInputProps extends BagelInputShellProps {
 	center?: boolean
 	error?: string
 	underlined?: boolean
+	/** When true, input is not editable (same as `edit-mode="false"`). */
+	disabled?: boolean
 }
 
 const props = withDefaults(
@@ -43,6 +45,7 @@ const props = withDefaults(
 	{
 		enableTime: false,
 		editMode: true,
+		disabled: false,
 		small: false,
 		range: false,
 		mode: () => ({ mode: 'day' }),
@@ -51,6 +54,8 @@ const props = withDefaults(
 	},
 )
 
+const isEditable = computed(() => props.editMode && !props.disabled)
+
 const { $t } = useI18n()
 
 const { shellClass, shellStyle } = useBagelInputShell(props)
@@ -112,6 +117,9 @@ function normalizeDate(date: Date): string {
 function coerceDateOnlyValue(val: string | Date | DateRangeValue | undefined): string | Date | DateRangeValue | undefined {
 	if (props.enableTime || props.range || val == null) return val
 	if (typeof val === 'string' && val.includes('T')) {
+		// Prefer the calendar day from the string — avoids TZ shifting midnight UTC/local.
+		const day = /^(\d{4}-\d{2}-\d{2})/.exec(val)?.[1]
+		if (day) return day
 		const d = new Date(val)
 		if (!Number.isNaN(d.getTime())) return local.date(d)
 	}
@@ -312,7 +320,7 @@ onMounted(() => {
 						<TextInput
 							v-model="inputValue" iconStart="calendar"
 							:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || defaultPlaceholder)"
-							:required="underlined ? false : required" :disabled="!editMode"
+							:required="underlined ? false : required" :disabled="!isEditable"
 							:error="!isValid ? $t('date.invalidFormat') : error" :class="{ 'txt-center': center }"
 							:underlined="underlined" :frame="frame" :outline="outline" :min-width="minWidth"
 							:max-width="maxWidth" :label-color="labelColor" :label-active-color="labelActiveColor"

package/src/components/form/inputs/NumberInput.vue

@@ -146,12 +146,23 @@ watch(() => numberValue.value, () => {
 })
 
 watch(() => modelValue, (newVal) => {
-	if (newVal !== numberValue.value) {
-		if (typeof newVal === 'string' && (newVal === '-' || newVal.endsWith('.'))) {
-			formattedValue.value = newVal
-			return
-		}
-		numberValue.value = Number.parseFloat(`${newVal}`) || 0
+	if (newVal === undefined || newVal === null || newVal === '') {
+		numberValue.value = undefined
+		formattedValue.value = ''
+		return
+	}
+	if (typeof newVal === 'string' && (newVal === '-' || newVal.endsWith('.'))) {
+		formattedValue.value = newVal
+		return
+	}
+	const parsed = Number.parseFloat(`${newVal}`)
+	if (Number.isNaN(parsed)) {
+		numberValue.value = undefined
+		formattedValue.value = ''
+		return
+	}
+	if (parsed !== numberValue.value) {
+		numberValue.value = parsed
 	}
 }, { immediate: true })
 

package/src/components/form/inputs/index.ts

@@ -7,7 +7,6 @@ export { default as ColorInput } from './ColorInput.vue'
 export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as EmailInput } from './EmailInput.vue'
-export { default as JSONInput } from './JSONInput.vue'
 export { default as MarkdownEditor } from './MarkdownEditor.vue'
 export { default as NumberInput } from './NumberInput.vue'
 export { default as OTP } from './OTP.vue'

package/src/components/index.ts

@@ -3,8 +3,8 @@ export { default as AccordionItem } from './AccordionItem.vue'
 export { default as AddressSearch } from './AddressSearch.vue'
 export { default as AddToCalendar } from './AddToCalendar.vue'
 export { default as Alert } from './Alert.vue'
-export { BarChart, Donut, Funnel, Gauge, LineChart, RadialBars, RankBars, Sparkline, StatCard } from './charts'
-export type { NormalizeOptions, RawPoint, RawSeries, ValueFormat } from './charts'
+export { BarChart, Donut, Funnel, Gauge, LineChart, MapChart, RadialBars, RankBars, Sparkline, StatCard } from './charts'
+export type { MapDatum, NormalizeOptions, RawPoint, RawSeries, ValueFormat } from './charts'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
 /** @deprecated Renamed to Badge. Pill is an alias that will be removed in a future version. */

package/src/form-flow/FormFlowPlayer.vue

@@ -37,6 +37,18 @@ 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
+	 * the `redirect` event).
+	 */
+	redirect?: boolean
 	/** Optional async submit handler; awaited before `complete` is emitted. */
 	onComplete?: (data: Record<string, any>) => Promise<void> | void
 }
@@ -45,6 +57,8 @@ const props = withDefaults(defineProps<Props>(), {
 	animated: true,
 	autoAdvance: true,
 	autoAdvanceDelay: 200,
+	dataLayer: true,
+	redirect: true,
 })
 
 const emit = defineEmits<{
@@ -52,6 +66,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']
+	/** The form is about to redirect to `url` (fired even if `redirect` is off). */
+	'redirect': [url: string]
 	'complete': [data: Record<string, any>]
 }>()
 
@@ -90,6 +108,26 @@ 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 })
+}
+
+// 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.
+watch(currentKey, (key, prev) => {
+	if (key && key !== prev) pushDataLayer(stepByKey(props.structure, key)?.enterEvent, 'enter')
+}, { immediate: true })
+
 // Convert the current step's stored JSON Schema into a renderable schema.
 const currentSchema = computed(() => {
 	const step = currentStep.value
@@ -124,9 +162,20 @@ async function onPrimary() {
 
 	if (isTerminal.value) {
 		submitting.value = true
+		const step = currentStep.value
 		try {
 			await props.onComplete?.({ ...formData.value })
+			// Fire this terminal step's submit analytics before completing.
+			pushDataLayer(step?.submitEvent, 'submit')
 			emit('complete', { ...formData.value })
+			// Redirect last: leaves the page after analytics + host handling.
+			const url = step?.redirectUrl?.trim()
+			if (url) {
+				emit('redirect', url)
+				if (props.redirect && typeof window !== 'undefined') {
+					window.location.assign(url)
+				}
+			}
 		}
 		finally {
 			submitting.value = false

package/src/form-flow/structure.ts

@@ -26,6 +26,18 @@ export interface FormStep {
 	 * default: a single required radio/select field. `false` force-disables.
 	 */
 	autoAdvance?: boolean
+	/**
+	 * Where to send the browser after the form is submitted *from this step*
+	 * (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

package/dist/components/dataTable/useTableVirtualization.d.ts

@@ -1,25 +0,0 @@
-import { TableVirtualizationOptions } from '../../types/TableSchema';
-export declare function useTableVirtualization<T>(options: TableVirtualizationOptions<T>): {
-    list: import('vue').ComputedRef<import('@vueuse/core').UseVirtualListItem<any>[]>;
-    containerProps: {
-        ref: import('vue').Ref<HTMLElement | null>;
-        onScroll: () => void;
-        style: import('vue').StyleValue;
-    };
-    wrapperProps: import('vue').ComputedRef<{
-        style: {
-            width: string;
-            height: string;
-            marginTop: string;
-        } | {
-            width: string;
-            height: string;
-            marginLeft: string;
-            display: string;
-        };
-    }>;
-    scrollTo: (index: number) => void;
-    lastItemEl: import('vue').Ref<HTMLTableRowElement | null, HTMLTableRowElement | null>;
-    registerLastItemObserver: () => Promise<void>;
-};
-//# sourceMappingURL=useTableVirtualization.d.ts.map

package/dist/components/dataTable/useTableVirtualization.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableVirtualization.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/useTableVirtualization.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AAIzE,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,OAAO,EAAE,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;EA4C/E"}

package/dist/components/form/inputs/JSONInput.vue.d.ts

@@ -1,21 +0,0 @@
-import { BagelInputShellProps } from './bagelInputShell';
-type __VLS_Props = {
-    description?: string;
-    label?: string;
-    modelValue: any;
-    placeholder?: string;
-    editMode?: boolean;
-    small?: boolean;
-} & BagelInputShellProps;
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    label: string;
-    description: string;
-    placeholder: string;
-    editMode: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-export default _default;
-//# sourceMappingURL=JSONInput.vue.d.ts.map

package/dist/components/form/inputs/JSONInput.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSONInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/JSONInput.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAG7D,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,GAAG,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CACf,GAAG,oBAAoB,CAAC;;;;;;WALhB,MAAM;iBADA,MAAM;iBAGN,MAAM;cACT,OAAO;;AAkGpB,wBASG"}

package/src/components/form/inputs/JSONInput.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-// const props =
-import { computed } from 'vue'
-import { resolveI18n } from '@bagelink/vue'
-import type { BagelInputShellProps } from './bagelInputShell'
-import { useBagelInputShell } from './bagelInputShell'
-
-const props = withDefaults(
-	defineProps<{
-		description?: string
-		label?: string
-		modelValue: any
-		placeholder?: string
-		editMode?: boolean
-		small?: boolean
-	} & BagelInputShellProps>(),
-	{
-		description: '',
-		editMode: true,
-		placeholder: '',
-		label: '',
-	},
-)
-
-const { shellClass, shellStyle } = useBagelInputShell(props)
-const hasValue = computed(() => props.modelValue != null && String(props.modelValue).length > 0)
-
-const emits = defineEmits(['update:modelValue'])
-function handleInput(e: Event) {
-	const el = e.target as HTMLInputElement
-	emits('update:modelValue', el.value)
-}
-</script>
-
-<template>
-	<div
-		class="bagel-input" :title="description"
-		:class="[shellClass, { small, 'has-value': hasValue }]" :style="shellStyle"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-		<textarea
-			:value="modelValue" :class="{ 'no-edit': !editMode }" :placeholder="resolveI18n(placeholder)"
-			@input="handleInput"
-		/>
-	</div>
-</template>
-
-<style scoped>
-
-.bagel-input textarea {
-font-family: monospace;
-}
-
-[dir='rtl'] .bagel-input textarea {
-direction: ltr;
-}
-
-</style>