@bagelink/vue 1.15.331 → 1.15.337

package/package.json

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

package/src/components/Icon/Icon.vue

@@ -17,6 +17,9 @@ const props = withDefaults(defineProps<{
 	    (theme name → `pair-*`, or a raw CSS color) and contrasts the glyph.
 	    Without `color`, just the circular shape. */
 	round?: boolean
+	/** Soft circular chip: light tinted background + full-color glyph and border.
+	    Uses `color`, and defaults to black when no color is provided. */
+	soft?: boolean
 	weight?: number | string
 	fontAwesome?: boolean
 	fill?: boolean
@@ -159,12 +162,16 @@ const isRawCssColor = computed(() => {
 		|| /^(rgb|hsl|hwb|lab|lch|oklch|color)\(/i.test(c)
 })
 
+const hasChip = computed(() => props.round || props.soft)
+
 const roundPairClass = computed(() => {
-	if (!props.round || !props.color || isRawCssColor.value) { return undefined }
-	return `pair-${props.color}`
+	if (!hasChip.value || isRawCssColor.value) { return undefined }
+	if (props.color) { return `pair-${props.color}` }
+	return props.soft ? 'pair-black' : undefined
 })
 
-const roundClass = computed(() => (props.round ? 'bgl_icon-round' : undefined))
+const roundClass = computed(() => (hasChip.value ? 'bgl_icon-round' : undefined))
+const softClass = computed(() => (props.soft ? 'soft' : undefined))
 
 const iconStyle = computed(() => {
 	const style: Record<string, string> = {
@@ -177,11 +184,17 @@ const iconStyle = computed(() => {
 	} else {
 		style['font-variation-settings'] = `'wght' ${props.weight || 400}`
 	}
-	if (props.round) {
+	if (hasChip.value) {
 		style.width = `calc(${computedSize.value}rem * 2)`
 		style.height = `calc(${computedSize.value}rem * 2)`
 		if (isRawCssColor.value && props.color) {
-			style.backgroundColor = props.color
+			if (props.soft) {
+				style.backgroundColor = `color-mix(in srgb, ${props.color} 18%, transparent)`
+				style.color = props.color
+				style.border = `1px solid ${props.color}`
+			} else {
+				style.backgroundColor = props.color
+			}
 		}
 	} else if (props.color) {
 		style.color = props.color
@@ -193,23 +206,24 @@ const iconStyle = computed(() => {
 <template>
 	<Transition :name="transitionName" mode="out-in">
 		<span
-			v-if="iconRenderType === 'material'" :key="iconRender" class="bgl_icon-font notranslate"
-			:class="[animateClass, roundClass, roundPairClass, { 'color-white keep-white': round && isRawCssColor }]"
+			v-if="iconRenderType === 'material'" :key="`material-${iconRender}`" class="bgl_icon-font notranslate"
+			:class="[animateClass, roundClass, roundPairClass, softClass, { 'color-white keep-white': round && !soft && isRawCssColor }]"
 			:style="iconStyle" translate="no"
 		>
 			{{ iconRender }}
 		</span>
 		<span
-			v-else-if="iconRenderType === 'font-awesome'" :key="iconRender" class="fa bgl_icon-font notranslate" :class="[
+			v-else-if="iconRenderType === 'font-awesome'" :key="`font-awesome-${iconRender}`" class="fa bgl_icon-font notranslate" :class="[
 				`fa-${iconRender}`,
 				animateClass,
 				roundClass,
 				roundPairClass,
+				softClass,
 				{
 					'fa-brands': isFaBrand,
 					'fa-solid': fill,
 					'far': !fill && !isFaBrand,
-					'color-white keep-white': round && isRawCssColor,
+					'color-white keep-white': round && !soft && isRawCssColor,
 				},
 			]" :style="iconStyle"
 			translate="no"

package/src/form-flow/FormFlow.vue

@@ -230,7 +230,10 @@ function updateField(key: string, value: any, field: FieldBuilder) {
 }
 
 function isFieldEmpty(value: any, field: FieldBuilder): boolean {
-	return value == null || value === '' || value === false
+	// `false` is a valid answer for boolean radio/toggle fields (for example a
+	// required Yes/No question). Only an unchecked checkbox uses false as its
+	// empty state.
+	return value == null || value === '' || (value === false && field._type === 'checkbox')
 		|| (Array.isArray(value) && value.length === 0)
 		|| (field._type === 'tel' && typeof value === 'string' && /^\+\d+$/.test(value))
 }
@@ -386,6 +389,13 @@ function getFieldProps(field: FieldBuilder, key: string) {
 	return baseProps
 }
 
+function getCustomFieldProps(field: FieldBuilder, key: string) {
+	return {
+		...(field._component?.props ?? {}),
+		...getFieldProps(field, key),
+	}
+}
+
 function resolveComponent(componentRef: any): any {
 	if (typeof componentRef === 'string') {
 		if (props.components?.[componentRef] != null) {
@@ -445,6 +455,7 @@ async function handleSubmit(event?: Event): Promise<boolean> {
 
 	if (!isValid) {
 		event?.stopPropagation()
+		formElement.value?.reportValidity()
 
 		const firstErrorKey = visibleFields.value.find(({ key }) => validationErrors.value[key])?.key
 
@@ -552,9 +563,7 @@ defineExpose({
 					<template v-else-if="usesCustomComponent(field)">
 						<component
 							:is="resolveComponent(field._component!.component)"
-							:model-value="getFieldValue(key)"
-							v-bind="field._component!.props"
-							@update:model-value="(val: any) => updateField(key, val, field)"
+							v-bind="getCustomFieldProps(field, key)"
 						/>
 					</template>
 

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

@@ -759,6 +759,7 @@ interface JSONSchemaProperty {
 	'title'?: string
 	'description'?: string
 	'default'?: any
+	'const'?: any
 	'enum'?: any[]
 	'format'?: string
 	'minimum'?: number
@@ -1065,6 +1066,27 @@ function createFieldFromProperty(
 			field = $.text(config)
 	}
 
+	// Rendering is orthogonal to semantics: a checkbox may use a branded
+	// component while remaining a checkbox for validation and serialization.
+	if (
+		xUi.component
+		&& fieldType !== 'component'
+		&& fieldType !== 'display'
+	) {
+		field._component = {
+			component: xUi.component,
+			props: xUi.componentProps || {},
+		}
+	}
+
+	if (resolvedProp.const !== undefined) {
+		field.validate(value =>
+			value === resolvedProp.const
+				? true
+				: config.requiredMessage || 'form.required'
+		)
+	}
+
 	// Apply class
 	if (xUi.class) {
 		field.class(xUi.class)

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

@@ -101,6 +101,7 @@ export interface FormField {
 export interface JSONSchemaProperty {
 	type?: string | string[]
 	items?: JSONSchemaProperty
+	const?: any
 	title?: string
 	description?: string
 	format?: string
@@ -354,7 +355,12 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 			if (field.validation?.pattern !== undefined) prop.pattern = field.validation.pattern
 
 			// Required
-			if (field.required) required.push(field.key)
+			if (field.required) {
+				required.push(field.key)
+				// Required checkboxes represent explicit acceptance, not merely
+				// presence of a boolean key.
+				if (field.type === 'checkbox') prop.const = true
+			}
 		}
 
 		// Placeholder

package/src/i18n/index.ts

@@ -19,6 +19,34 @@ const bagelinkLocales = {
 	ru,
 } as const
 
+function mergeMessages(
+	base: Record<string, unknown>,
+	overrides: Record<string, unknown>,
+): Record<string, unknown> {
+	const merged = { ...base }
+
+	for (const [key, value] of Object.entries(overrides)) {
+		const baseValue = merged[key]
+		if (
+			baseValue != null
+			&& value != null
+			&& typeof baseValue === 'object'
+			&& typeof value === 'object'
+			&& !Array.isArray(baseValue)
+			&& !Array.isArray(value)
+		) {
+			merged[key] = mergeMessages(
+				baseValue as Record<string, unknown>,
+				value as Record<string, unknown>,
+			)
+		} else {
+			merged[key] = value
+		}
+	}
+
+	return merged
+}
+
 export interface CreateBagelI18nOptions {
 	/** Active locale (default: 'en'). Same as vue-i18n's `locale`. */
 	locale?: string
@@ -46,10 +74,10 @@ export function createI18n(options: CreateBagelI18nOptions = {}): I18n {
 	const mergedMessages: Record<string, Record<string, unknown>> = {}
 
 	for (const lang of supportedLocales) {
-		mergedMessages[lang] = {
-			...(bagelinkLocales[lang as keyof typeof bagelinkLocales] || {}),
-			...(messages[lang] || {}),
-		}
+		mergedMessages[lang] = mergeMessages(
+			bagelinkLocales[lang as keyof typeof bagelinkLocales] || {},
+			messages[lang] || {},
+		)
 	}
 
 	// Also include any user-provided locales not in bagelink's built-ins