@bagelink/vue 1.15.331 → 1.15.333

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.331",
+  "version": "1.15.333",
   "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))
 }
@@ -445,6 +448,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
 

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