@bagelink/vue 1.15.366 → 1.15.371

package/package.json

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

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

@@ -128,14 +128,14 @@ outline-color: transparent;
 outline: -webkit-focus-ring-color auto 1px;
 outline-offset: 2px
 }
-.bgl-toggle :checked{
-  background: var(--bgl-input-label-active-color, var(--bgl-primary));
+.bgl-toggle input:checked{
+  background: var(--bgl-input-label-active-color) !important;
 }
 .bgl-toggle :checked::before{
   margin-inline-start:calc(var(--bgl-input-height) / 2 - 2px) ;
 }
 .bgl-toggle input:checked + label {
-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+color: var(--bgl-input-label-active-color) !important;
 }
 
 /* ── bgl-outline variant ── */

package/src/form-flow/FormFlowPlayer.vue

@@ -20,6 +20,7 @@ import type { Slots } from 'vue'
 import { computed, ref, useSlots, watch } from 'vue'
 import { useI18n } from '../i18n'
 import { fromJSONSchema } from './form-flow'
+import type { JSONSchemaOptionsSourceLoader } from './form-flow'
 import Btn from '../components/Btn.vue'
 import FormFlow from './FormFlow.vue'
 import type { FormStepEventPayload } from './structure'
@@ -52,6 +53,8 @@ export interface Props {
 	hideCounter?: boolean
 	/** Optional async submit handler; awaited before `complete` is emitted. */
 	onComplete?: (data: Record<string, any>) => Promise<void> | void
+	/** Resolve declarative x-options-source fields in stored JSON Schemas. */
+	loadOptionsSource?: JSONSchemaOptionsSourceLoader
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -142,7 +145,11 @@ watch(currentKey, (key, prev) => {
 // Convert the current step's stored JSON Schema into a renderable schema.
 const currentSchema = computed(() => {
 	const step = currentStep.value
-	return step ? fromJSONSchema(step.schema as any) : null
+	return step
+		? fromJSONSchema(step.schema as any, {
+			loadOptionsSource: props.loadOptionsSource,
+		})
+		: null
 })
 
 // The *next* step given current answers (reactive: recomputes as fields change).

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

@@ -774,6 +774,7 @@ interface JSONSchemaProperty {
 	'additionalProperties'?: boolean | JSONSchemaProperty
 	'x-ui'?: {
 		fieldType?: string
+		required?: boolean
 		placeholder?: string
 		disabled?: boolean
 		readonly?: boolean
@@ -795,6 +796,7 @@ interface JSONSchemaProperty {
 	// designer-built schema renders identically in FormFlow/FormFlowPlayer.
 	'x-field-type'?: string
 	'x-options'?: { label: string, value: any }[]
+	'x-options-source'?: JSONSchemaOptionsSource
 	'x-placeholder'?: string
 	'x-select-multiselect'?: boolean
 	'x-radio-inline'?: boolean
@@ -802,6 +804,51 @@ interface JSONSchemaProperty {
 	'x-radio-text-align'?: 'left' | 'center' | 'right'
 }
 
+export interface JSONSchemaOptionsSource {
+	endpoint: string
+	itemsPath?: string
+	valuePath?: string
+	labelPath?: string
+	subtitlePath?: string
+	searchParam?: string
+	limitParam?: string
+	limit?: number
+}
+
+export type JSONSchemaOptionsSourceLoader = (
+	source: JSONSchemaOptionsSource,
+	query: string,
+) => Promise<unknown>
+
+function valueAtPath(value: unknown, path?: string): unknown {
+	if (!path) return value
+	return path.split('.').reduce<unknown>((current, key) => {
+		if (current == null || typeof current !== 'object') return undefined
+		return (current as Record<string, unknown>)[key]
+	}, value)
+}
+
+function normalizeOptionsSourceResponse(
+	response: unknown,
+	source: JSONSchemaOptionsSource,
+): { label: string, value: string, subtitle?: string }[] {
+	const items = valueAtPath(response, source.itemsPath)
+	if (!Array.isArray(items)) return []
+	return items.flatMap((item) => {
+		const value = valueAtPath(item, source.valuePath ?? 'id')
+		const label = valueAtPath(item, source.labelPath ?? 'name')
+		if (value == null || label == null) return []
+		const subtitle = source.subtitlePath
+			? valueAtPath(item, source.subtitlePath)
+			: undefined
+		return [{
+			label: String(label),
+			value: String(value),
+			...(subtitle == null ? {} : { subtitle: String(subtitle) }),
+		}]
+	})
+}
+
 interface JSONSchemaObject {
 	'type'?: string
 	'title'?: string
@@ -832,13 +879,22 @@ interface JSONSchemaObject {
  * // Use in component
  * <FormFlow v-model="data" :schema="loadedSchema" />
  */
-export function fromJSONSchema(jsonSchema: JSONSchemaObject): SchemaDefinition {
+export function fromJSONSchema(
+	jsonSchema: JSONSchemaObject,
+	options?: { loadOptionsSource?: JSONSchemaOptionsSourceLoader },
+): SchemaDefinition {
 	const fields: Record<string, FieldBuilder> = {}
 	const requiredSet = new Set(jsonSchema.required || [])
 
 	if (jsonSchema.properties) {
 		for (const [key, prop] of Object.entries(jsonSchema.properties)) {
-			fields[key] = createFieldFromProperty(key, prop, requiredSet.has(key), jsonSchema)
+			fields[key] = createFieldFromProperty(
+				key,
+				prop,
+				requiredSet.has(key),
+				jsonSchema,
+				options?.loadOptionsSource,
+			)
 		}
 	}
 
@@ -916,7 +972,8 @@ function createFieldFromProperty(
 	key: string,
 	prop: JSONSchemaProperty,
 	isRequired: boolean,
-	rootSchema: JSONSchemaObject
+	rootSchema: JSONSchemaObject,
+	loadOptionsSource?: JSONSchemaOptionsSourceLoader,
 ): FieldBuilder {
 	// Resolve $ref if present
 	let resolvedProp = prop
@@ -958,7 +1015,7 @@ function createFieldFromProperty(
 	if (resolvedProp.title) config.label = resolvedProp.title
 	if (resolvedProp.description) config.helpText = resolvedProp.description
 	if (resolvedProp.default !== undefined) config.default = resolvedProp.default
-	if (isRequired) config.required = true
+	if (isRequired || xUi.required === true) config.required = true
 
 	// UI hints from x-ui / flat x-* (designer)
 	if (xUi.placeholder) config.placeholder = xUi.placeholder
@@ -969,6 +1026,31 @@ function createFieldFromProperty(
 	// designer renders with the same options in the player. Only the props each
 	// input actually reads are forwarded.
 	applyDesignerConfig(config, resolvedProp)
+	if (resolvedProp['x-options-source']) {
+		if (!loadOptionsSource) {
+			throw new Error(`Field "${key}" requires an x-options-source loader`)
+		}
+		const source = resolvedProp['x-options-source']
+		let cachedOptions: { label: string, value: string, subtitle?: string }[] | undefined
+		config.options = async (query: string) => {
+			const options = source.searchParam
+				? normalizeOptionsSourceResponse(
+						await loadOptionsSource(source, query),
+						source,
+					)
+				: cachedOptions ??= normalizeOptionsSourceResponse(
+				await loadOptionsSource(source, source.searchParam ? query : ''),
+				source,
+			)
+			if (source.searchParam || !query.trim()) return options
+			const term = query.trim().toLocaleLowerCase()
+			return options.filter(option =>
+				[option.label, option.subtitle, option.value]
+					.some(value => value?.toLocaleLowerCase().includes(term)),
+			)
+		}
+		config.searchable = true
+	}
 	if (xUi.radioAlign !== undefined) config.align = xUi.radioAlign
 	if (xUi.radioTextAlign !== undefined) config.textAlign = xUi.radioTextAlign
 	if (xUi.disabled) config.disabled = xUi.disabled
@@ -982,6 +1064,9 @@ function createFieldFromProperty(
 	if (resolvedProp.maximum !== undefined) config.max = resolvedProp.maximum
 	if (resolvedProp.minLength !== undefined) config.min = resolvedProp.minLength
 	if (resolvedProp.maxLength !== undefined) config.max = resolvedProp.maxLength
+	if ((resolvedProp as Record<string, any>).pattern !== undefined) {
+		config.pattern = (resolvedProp as Record<string, any>).pattern
+	}
 
 	// Create the appropriate field builder
 	let field: FieldBuilder
@@ -1031,10 +1116,10 @@ function createFieldFromProperty(
 			field = $.radio(xOptions ?? resolvedProp.enum ?? [], config)
 			break
 		case 'select':
-			field = $.select(xOptions ?? resolvedProp.enum ?? [], config)
+			field = $.select(config.options ?? xOptions ?? resolvedProp.enum ?? [], config)
 			break
 		case 'multiselect':
-			field = $.multiselect(xOptions ?? resolvedProp.enum ?? [], config)
+			field = $.multiselect(config.options ?? xOptions ?? resolvedProp.enum ?? [], config)
 			break
 		case 'icon':
 			field = $.icon(config)
@@ -1086,6 +1171,14 @@ function createFieldFromProperty(
 				: config.requiredMessage || 'form.required'
 		)
 	}
+	if ((resolvedProp as Record<string, any>).pattern) {
+		const pattern = new RegExp((resolvedProp as Record<string, any>).pattern)
+		field.validate(value =>
+			value == null || value === '' || pattern.test(String(value))
+				? true
+				: 'form.pattern',
+		)
+	}
 
 	// Apply class
 	if (xUi.class) {
@@ -1131,7 +1224,16 @@ function applyDesignerConfig(config: Record<string, any>, prop: JSONSchemaProper
 	set('layout', 'x-number-layout')
 	if (p['x-number-spinner'] === false) config.spinner = false
 	// Phone
-	set('onlyCountries', 'x-phone-only-countries')
+	if (typeof p['x-phone-only-countries'] === 'string') {
+		config.onlyCountries = p['x-phone-only-countries']
+			.split(',')
+			.map((country: string) => country.trim())
+			.filter(Boolean)
+	}
+	else if (Array.isArray(p['x-phone-only-countries'])) {
+		config.onlyCountries = p['x-phone-only-countries']
+	}
+	set('defaultCountry', 'x-phone-default-country')
 	// Range
 	if (p['x-range-multi']) config.multiRange = true
 	// File / upload