@bagelink/vue 1.15.277 → 1.15.285

package/package.json

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

package/src/components/Avatar.vue

@@ -5,7 +5,7 @@
 // stay circular), use the `innerClass` prop — mirrors `triggerClass` on Dropdown.
 defineOptions({ name: 'BglAvatar' })
 import type { IconType, ThemeType } from '@bagelink/vue'
-import { initials, Icon } from '@bagelink/vue'
+import { initials, Icon, useDevice } from '@bagelink/vue'
 import { computed } from 'vue'
 import Image from './Image.vue'
 
@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<{
 	icon?: IconType
 	alt?: string
 	size?: number
+	/** Avatar size on mobile. Falls back to `size` when omitted. */
+	mobileSize?: number
 	/** Rounded-square instead of a circle. `true` = themed radius, or pass a px radius. */
 	square?: boolean | number
 	/** Theme color → tinted background + matching icon/text color (e.g. an icon chip). */
@@ -29,9 +31,11 @@ const props = withDefaults(defineProps<{
 	innerClass?: string
 }>(), { size: 50 })
 
+const { isMobile } = useDevice()
+const resolvedSize = computed(() => isMobile.value && props.mobileSize !== undefined ? props.mobileSize : props.size)
 const statusColor = computed(() => (props.status === true ? 'green' : props.status || null))
 // Dot scales with the avatar but stays within sane bounds.
-const dotSize = computed(() => Math.max(7, Math.min(14, Math.round(props.size * 0.28))))
+const dotSize = computed(() => Math.max(7, Math.min(14, Math.round(resolvedSize.value * 0.28))))
 
 const radius = computed(() => {
 	if (!props.square) { return '1000px' } // circle (default)
@@ -49,15 +53,15 @@ const themed = computed(() => props.color
 </script>
 
 <template>
-	<div class="avatar-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
+	<div class="avatar-wrap" :style="{ width: `${resolvedSize}px`, height: `${resolvedSize}px` }">
 		<div
 			class="overflow-hidden txt-center p-0 avatar flex justify-content-center align-items-center"
 			:class="innerClass"
-			:style="{ width: `${size}px`, height: `${size}px`, borderRadius: radius, ...themed }"
+			:style="{ width: `${resolvedSize}px`, height: `${resolvedSize}px`, borderRadius: radius, ...themed }"
 		>
 			<Image v-if="src" :src="src" :alt="alt || name" />
-			<Icon v-else-if="icon" :icon="icon" :size="size / 40" />
-			<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
+			<Icon v-else-if="icon" :icon="icon" :size="resolvedSize / 40" />
+			<p v-else :style="{ 'line-height': `${resolvedSize}px`, 'font-size': `calc(1.5rem * ${resolvedSize} / 50)` }">
 				{{ (fallback || initials(name || '')).toUpperCase() }}
 			</p>
 		</div>

package/src/components/Icon/Icon.vue

@@ -13,6 +13,9 @@ const props = withDefaults(defineProps<{
 	size?: number | string
 	mobileSize?: number | string
 	color?: string
+	/** Circular chip. With `color`, fills the background from that tone
+	    (theme name → `pair-*`, or a raw CSS color) and contrasts the glyph.
+	    Without `color`, just the circular shape. */
 	round?: boolean
 	weight?: number | string
 	fontAwesome?: boolean
@@ -147,21 +150,52 @@ const transitionName = computed(() => {
 	const style = props.transition === true ? 'slide-up' : props.transition
 	return `bgl-icon-x-${style}`
 })
+
+const isRawCssColor = computed(() => {
+	const c = props.color?.trim()
+	if (!c) { return false }
+	return c.startsWith('#')
+		|| c.startsWith('var(')
+		|| /^(rgb|hsl|hwb|lab|lch|oklch|color)\(/i.test(c)
+})
+
+const roundPairClass = computed(() => {
+	if (!props.round || !props.color || isRawCssColor.value) { return undefined }
+	return `pair-${props.color}`
+})
+
+const roundClass = computed(() => (props.round ? 'bgl_icon-round' : undefined))
+
+const iconStyle = computed(() => {
+	const style: Record<string, string> = {
+		fontSize: `${computedSize.value}rem`,
+		visibility: isCurrentFontReady.value ? 'visible' : 'hidden',
+		...animateStyle.value,
+	}
+	if (iconRenderType.value === 'material') {
+		style['font-variation-settings'] = `'FILL' ${props.fill ? 1 : 0}, 'wght' ${props.weight || 400}`
+	} else {
+		style['font-variation-settings'] = `'wght' ${props.weight || 400}`
+	}
+	if (props.round) {
+		style.width = `calc(${computedSize.value}rem * 2)`
+		style.height = `calc(${computedSize.value}rem * 2)`
+		if (isRawCssColor.value && props.color) {
+			style.backgroundColor = props.color
+		}
+	} else if (props.color) {
+		style.color = props.color
+	}
+	return style
+})
 </script>
 
 <template>
 	<Transition :name="transitionName" mode="out-in">
 		<span
 			v-if="iconRenderType === 'material'" :key="iconRender" class="bgl_icon-font notranslate"
-			:class="[animateClass, { 'round flex aspect-ratio-1 justify-content-center': round }]" :style="{
-				'fontSize': `${computedSize}rem`,
-				color,
-				'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
-				'width': round ? `calc(${computedSize}rem * 2)` : 'auto',
-				'height': round ? `calc(${computedSize}rem * 2)` : 'auto',
-				'visibility': isCurrentFontReady ? 'visible' : 'hidden',
-				...animateStyle,
-			}" translate="no"
+			:class="[animateClass, roundClass, roundPairClass, { 'color-white keep-white': round && isRawCssColor }]"
+			:style="iconStyle" translate="no"
 		>
 			{{ iconRender }}
 		</span>
@@ -169,12 +203,15 @@ const transitionName = computed(() => {
 			v-else-if="iconRenderType === 'font-awesome'" :key="iconRender" class="fa bgl_icon-font notranslate" :class="[
 				`fa-${iconRender}`,
 				animateClass,
+				roundClass,
+				roundPairClass,
 				{
 					'fa-brands': isFaBrand,
 					'fa-solid': fill,
 					'far': !fill && !isFaBrand,
+					'color-white keep-white': round && isRawCssColor,
 				},
-			]" :style="{ 'fontSize': `${computedSize}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}`, 'visibility': isCurrentFontReady ? 'visible' : 'hidden', ...animateStyle }"
+			]" :style="iconStyle"
 			translate="no"
 		/>
 	</Transition>
@@ -202,6 +239,17 @@ const transitionName = computed(() => {
 	font-family: 'Material Symbols Outlined', serif !important;
 }
 
+.bgl_icon-font.bgl_icon-round {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	aspect-ratio: 1;
+	border-radius: 1000px;
+	line-height: 1;
+	box-sizing: border-box;
+}
+
 .bgl_icon-font.fa {
 	font-family: 'Font Awesome 6 Free', serif !important;
 }

package/src/components/dataTable/DataTable.vue

@@ -235,7 +235,7 @@ const headerFontSize = computed(() => {
 				:icon="props.emptyIcon ?? 'inbox'"
 				:title="props.emptyTitle ?? 'No results'"
 				:description="props.emptyDescription"
-				compact
+				class="h-60p"
 			/>
 		</slot>
 	</div>
@@ -258,7 +258,7 @@ justify-content: center;
 
 .col-check {
 width: 1rem;
-padding: 0 0.25rem;
+padding: 0 0.5rem;
 vertical-align: middle;
 }
 
@@ -374,7 +374,7 @@ vertical-align: bottom;
 
 .row.first-row::after {
 content: '';
-border-bottom: 1px solid var(--bgl-border-color);
+/* border-bottom: 1px solid var(--bgl-border-color); */
 position: absolute;
 left: 0;
 right: 0;
@@ -505,7 +505,7 @@ accent-color: var(--bgl-accent-color);
 
 th::after {
 content: '';
-border-bottom: 1px solid var(--bgl-border-color);
+/* border-bottom: 1px solid var(--bgl-border-color); */
 position: absolute;
 left: 0;
 right: 0;

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -18,6 +18,8 @@ const props = defineProps({
 	disabled: { type: Boolean, default: false },
 	/** Wrap long lines instead of scrolling horizontally */
 	wrap: { type: Boolean, default: false },
+	/** One-line input height — matches TextInput / SelectInput. Enter does not insert a newline. */
+	singleLine: { type: Boolean, default: false },
 	theme: { type: String as PropType<HighlightTheme>, default: 'dark' },
 	frame: { type: Boolean, default: undefined },
 	outline: { type: Boolean, default: undefined },
@@ -51,6 +53,7 @@ const isFocused = ref(false)
 const { loaded, loadHighlight, highlightCode, setTheme } = useHighlight(props.theme)
 
 const maxHeight = computed(() => {
+	if (props.singleLine) return undefined
 	const h = props.height
 	return h.match(/^\d+$/) ? `${h}px` : h
 })
@@ -97,6 +100,14 @@ function handleInput(e: Event) {
 	}
 }
 
+function handleKeydown(event: KeyboardEvent) {
+	if (props.singleLine) {
+		if (event.key === 'Enter') event.preventDefault()
+		return
+	}
+	handleTab(event)
+}
+
 function handleTab(event: KeyboardEvent) {
 	if (event.key !== 'Tab') { return }
 
@@ -156,7 +167,7 @@ watch(() => props.modelValue, () => {
 
 <template>
 	<div
-		class="bagel-input code-editor-container ltr" :class="[shellClass, { 'mb-2': label, 'has-value': hasCodeValue }]"
+		class="bagel-input code-editor-container ltr" :class="[shellClass, { 'mb-2': label && !singleLine, 'has-value': hasCodeValue, 'single-line': singleLine }]"
 		:style="[{ height: maxHeight }, shellStyle]"
 	>
 		<label v-if="label" class="label">{{ label }}</label>
@@ -172,7 +183,7 @@ watch(() => props.modelValue, () => {
 				<textarea
 					v-if="!readonly && !disabled" :value="code" class="code-input" spellcheck="false"
 					autocomplete="off" autocorrect="off" autocapitalize="off" @input="handleInput"
-					@keydown="handleTab"
+					@keydown="handleKeydown"
 					@focus="isFocused = true"
 					@blur="handleBlur"
 				/>
@@ -304,6 +315,31 @@ watch(() => props.modelValue, () => {
 	overflow-wrap: anywhere;
 	word-break: break-word;
 }
+
+.code-editor-container.single-line {
+	height: auto;
+	margin-bottom: 0;
+}
+
+.code-editor-container.single-line .code-editor-grandpa {
+	height: var(--bgl-input-height);
+	padding-block: 0;
+	padding-inline: 0.7rem;
+	overflow-x: auto;
+	overflow-y: hidden;
+	background: var(--bgl-input-bg);
+	border-radius: var(--bgl-input-border-radius);
+	box-shadow: none;
+}
+
+.code-editor-container.single-line .code-display,
+.code-editor-container.single-line .code-input,
+.code-editor-container.single-line .code-placeholder {
+	padding: 0;
+	line-height: var(--bgl-input-height);
+	font-size: var(--bgl-input-font-size);
+	white-space: pre;
+}
 </style>
 
 <style>

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

@@ -31,6 +31,7 @@ export interface TextInputProps extends ValidateInputBaseT, BagelInputShellProps
 	nativeInputAttrs?: { [key: string]: any }
 	icon?: IconType
 	iconStart?: IconType
+	iconColor?: string
 	multiline?: boolean
 	autoheight?: boolean
 	code?: boolean
@@ -166,6 +167,7 @@ onMounted(async () => {
 				underlined,
 				'textInputIconWrap': icon,
 				'txtInputIconStart': iconStart,
+				'multiline-field': autoheight || inputRows >= 2,
 				'has-error': !!error,
 				'has-value': hasValue,
 			},
@@ -173,21 +175,22 @@ onMounted(async () => {
 	>
 		<label :for="id">
 			<span v-if="label || (underlined && placeholder)" class="label-text">{{ resolveI18n(label) || resolveI18n(placeholder) }}<span v-if="required"> *</span></span>
-
-		<input
-			v-if="!autoheight && inputRows < 2" :id ref="input" v-model.trim="inputVal"
-				:name :title :autocomplete :type :rows="1"
-				:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))"
-				:disabled :required v-bind="nativeInputAttrs" :pattern="normalizedPattern" @focusout="onFocusout"
-				@focus="onFocus" @input="updateInputVal"
-			>
-			<textarea
-				v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
-				:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required
-				v-bind="nativeInputAttrs" :pattern="normalizedPattern" @input="updateInputVal" @focusout="onFocusout"
-			/>
-			<Icon v-if="iconStart" :class="{ ' -top-025 line-height-0 ': underlined }" class="iconStart" :icon="iconStart" />
-			<Icon v-if="icon" :class="{ ' -top-025 line-height-0 ': underlined }" :icon />
+			<span class="input-field">
+				<input
+				v-if="!autoheight && inputRows < 2" :id ref="input" v-model.trim="inputVal"
+					:name :title :autocomplete :type :rows="1"
+					:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))"
+					:disabled :required v-bind="nativeInputAttrs" :pattern="normalizedPattern" @focusout="onFocusout"
+					@focus="onFocus" @input="updateInputVal"
+				>
+				<textarea
+					v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
+					:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required
+					v-bind="nativeInputAttrs" :pattern="normalizedPattern" @input="updateInputVal" @focusout="onFocusout"
+				/>
+				<Icon v-if="iconStart" :class="{ ' -top-025 line-height-0 ': underlined }" class="iconStart" :icon="iconStart" :color="iconColor" />
+				<Icon v-if="icon" :class="{ ' -top-025 line-height-0 ': underlined }" :icon :color="iconColor" />
+			</span>
 		</label>
 		<p v-if="helptext" class="helptext">{{ helptext }}</p>
 		<div v-if="error" class="error-message">
@@ -269,20 +272,15 @@ gap: 0.5rem;
 background: var(--input-disabled-bg);
 }
 
-/* Icon centering.
-   The icon is absolutely positioned inside the <label>, whose only positioned ancestor
-   is `.bagel-input`. In the DEFAULT variant the label text is in normal flow and pushes
-   the input DOWN, but the old `top: input-height/2` was measured from the component top —
-   so with a label the icon rode up onto the label text (the misalignment).
-
-   Fix: make the <label> the containing block and anchor the icon into a band the height
-   of the input row pinned to the BOTTOM of the label (the input is the last row), then
-   flex-center it. Bottom-anchored + fixed band height ⇒ centered on the input regardless
-   of a label above, and in dense/small modes. Scoped to :not(.underlined) because the
-   underlined variant floats its label as an overlay (input isn't pushed down). */
+/* Keep icon positioning relative to the native field, not the optional label. */
+.input-field {
+position: relative;
+display: block;
+width: 100%;
+}
+
 .bagel-input:not(.underlined).textInputIconWrap > label,
 .bagel-input:not(.underlined).txtInputIconStart > label {
-position: relative;
 display: block;
 }
 
@@ -293,6 +291,14 @@ bottom: calc(var(--bgl-input-height) / 2);
 transform: translateY(50%);
 }
 
+/* In a textarea, align icons with the first line instead of the field's bottom. */
+.bagel-input.multiline-field:not(.underlined).textInputIconWrap .bgl_icon-font,
+.bagel-input.multiline-field:not(.underlined).txtInputIconStart .iconStart {
+top: calc(0.7rem + var(--bgl-input-font-size) / 2);
+bottom: auto;
+transform: translateY(-50%);
+}
+
 /* underlined: label floats as an overlay, so the original top-center is correct */
 .underlined.textInputIconWrap .bgl_icon-font,
 .underlined.txtInputIconStart .iconStart {
@@ -300,6 +306,11 @@ top: calc(var(--bgl-input-height) / 2);
 transform: translateY(-50%);
 }
 
+.underlined.multiline-field.textInputIconWrap .bgl_icon-font,
+.underlined.multiline-field.txtInputIconStart .iconStart {
+top: calc(1.4rem + var(--bgl-input-font-size) / 2);
+}
+
 .textInputIconWrap .bgl_icon-font,
 .txtInputIconStart .iconStart {
 color: var(--bgl-input-color);

package/src/form-flow/FormFlowPlayer.vue

@@ -129,6 +129,7 @@ function buildPayload(stepKey: string): FormStepEventPayload {
 		stepTitle: step?.title ?? '',
 		stepIndex: position,
 		totalSteps,
+		skipSubmit: step?.skipSubmit ?? false,
 		formData: { ...formData.value },
 	}
 }
@@ -178,7 +179,10 @@ async function onPrimary() {
 		submitting.value = true
 		const step = currentStep.value
 		try {
-			await props.onComplete?.({ ...formData.value })
+			// `skipSubmit` terminals (e.g. disqualification leaves) end the flow
+			// without creating a submission — the host's onComplete is bypassed,
+			// but analytics + redirect still fire.
+			if (!step?.skipSubmit) await props.onComplete?.({ ...formData.value })
 			// Emit formComplete with standardised payload before completing.
 			if (currentKey.value) emit('formComplete', buildPayload(currentKey.value))
 			emit('complete', { ...formData.value })

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

@@ -99,7 +99,8 @@ export interface FormField {
 }
 
 export interface JSONSchemaProperty {
-	type?: string
+	type?: string | string[]
+	items?: JSONSchemaProperty
 	title?: string
 	description?: string
 	format?: string
@@ -298,12 +299,15 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 				case 'phone':
 				case 'url':
 				case 'date':
-				case 'file':
 				case 'signature':
 				case 'color':
 				case 'hidden':
 					prop.type = 'string'
 					break
+				case 'file':
+					prop.type = ['string', 'array']
+					prop.items = { type: 'string' }
+					break
 				case 'number':
 				case 'range':
 					prop.type = 'number'

package/src/form-flow/structure.ts

@@ -31,6 +31,12 @@ export interface FormStep {
 	 * (final step or an early-termination leaf). Empty => no redirect.
 	 */
 	redirectUrl?: string | null
+	/**
+	 * Terminal step that ends the flow *without* creating a submission — e.g. a
+	 * disqualification / "not a fit" leaf. The step's own content (title + fields)
+	 * is shown as the ending message; `redirectUrl` still applies if set.
+	 */
+	skipSubmit?: boolean
 	/** Canvas position (designer-only; ignored by the server). */
 	x?: number
 	y?: number
@@ -62,6 +68,8 @@ export interface FormStepEventPayload {
 	stepIndex: number
 	/** Projected total along current branch (null if indeterminate). */
 	totalSteps: number | null
+	/** True when this terminal step ends the flow without submitting (disqualification). */
+	skipSubmit: boolean
 	formData: Record<string, any>
 }
 

package/src/styles/bagel.css

@@ -53,6 +53,17 @@
     font-family: 'Font Awesome 6 Brands', serif !important;
 }
 
+.bgl_icon-font.bgl_icon-round {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    aspect-ratio: 1;
+    border-radius: 1000px;
+    line-height: 1;
+    box-sizing: border-box;
+}
+
 /* Reset / base element styles */
 :root {
     --bgl-transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);

package/src/styles/text.css

@@ -37,6 +37,21 @@
     font-size: 20px;
 }
 
+.txt21,
+.txt-21 {
+    font-size: 21px;
+}
+
+.txt22,
+.txt-22 {
+    font-size: 22px;
+}
+
+.m_txt23,
+.m_txt-23 {
+    font-size: 23px;
+}
+
 .txt24,
 .txt-24 {
     font-size: 24px;
@@ -77,6 +92,11 @@
     font-size: 48px;
 }
 
+.txt49,
+.txt-49 {
+    font-size: 49px;
+}
+
 .txt50,
 .txt-50 {
     font-size: 50px;
@@ -1746,6 +1766,21 @@
         font-size: 20px;
     }
 
+    .m_txt21,
+    .m_txt-21 {
+        font-size: 21px;
+    }
+
+    .m_txt22,
+    .m_txt-22 {
+        font-size: 22px;
+    }
+
+    .m_txt23,
+    .m_txt-23 {
+        font-size: 23px;
+    }
+
     .m_txt24,
     .m_txt-24 {
         font-size: 24px;
@@ -1786,6 +1821,11 @@
         font-size: 48px;
     }
 
+    .m_txt49,
+    .m_txt-49 {
+        font-size: 49px;
+    }
+
     .m_txt50,
     .m_txt-50 {
         font-size: 50px;