@bagelink/vue 1.9.83 → 1.9.88

package/src/form-flow/FormFlow.vue

@@ -450,6 +450,15 @@ defineExpose({
 					</ArrayInput>
 				</template>
 
+				<!-- Array field with primitive item type (e.g. from JSON Schema type: array with items: { type: string }) -->
+				<template v-else-if="field._type === 'array' && field._config.itemType">
+					<ArrayInput v-bind="getFieldProps(field, key)">
+						<template #default="{ item }">
+							<component :is="getFieldComponent(field._config.itemType)" :model-value="item.value" @update:model-value="(val: any) => { item.value = val }" />
+						</template>
+					</ArrayInput>
+				</template>
+
 				<!-- Custom component rendering -->
 				<template v-else-if="usesCustomComponent(field)">
 					<component

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

@@ -71,6 +71,14 @@ interface BaseFieldConfig {
 	class?: string
 }
 
+interface TextFieldConfig {
+	multiline?: boolean
+	pattern?: string
+	icon?: IconType
+	rows?: number
+	autofocus?: boolean
+}
+
 /**
  * Syntactic sugar for required: true
  * @example $.email({ required }) instead of $.email({ required: true })
@@ -214,8 +222,8 @@ function parseArgs<C extends BaseFieldConfig>(
 
 export const $ = {
 	text(
-		labelOrConfig?: string | (BaseFieldConfig & { min?: number, max?: number, pattern?: string }),
-		config?: BaseFieldConfig & { min?: number, max?: number, pattern?: string }
+		labelOrConfig?: string | (BaseFieldConfig & TextFieldConfig),
+		config?: BaseFieldConfig & TextFieldConfig
 	): FieldBuilder<string> {
 		return new Field('text', parseArgs(labelOrConfig, config))
 	},
@@ -680,6 +688,7 @@ interface JSONSchemaProperty {
 	'minLength'?: number
 	'maxLength'?: number
 	'$ref'?: string
+	'items'?: JSONSchemaProperty
 	'anyOf'?: JSONSchemaProperty[]
 	'oneOf'?: JSONSchemaProperty[]
 	'allOf'?: JSONSchemaProperty[]
@@ -917,13 +926,14 @@ function createFieldFromProperty(
 		case 'multiselect':
 			field = $.multiselect(resolvedProp.enum || [], config)
 			break
-		case 'array':
+		case 'array': {
 			field = $.array(resolvedProp.title || key, undefined, {
 				...config,
 				allowAdd: xUi.allowAdd,
 				allowDelete: xUi.allowDelete,
 			})
 			break
+		}
 		case 'display':
 			// Display fields with custom components can't be fully restored
 			// without the actual component reference

package/src/index.ts

@@ -33,6 +33,6 @@ export * from './utils/calendar/dateUtils'
 
 export * from './utils/constants'
 export * from './utils/elementUtils'
+export * from './utils/filterRef'
 export * from './utils/ipapi'
-
 export * from './utils/useSearch'

package/src/plugins/useToast.ts

@@ -38,8 +38,21 @@ export function useToast(): ToastApi {
 
 export type BagelToastOptions = Partial<ToastOptions>
 
+function createToastContainer(): HTMLElement | undefined {
+	if (typeof document === 'undefined') return undefined
+	const el = document.createElement('div')
+	el.setAttribute('popover', 'manual')
+	el.setAttribute('id', 'bgl-toast-container')
+	document.body.appendChild(el)
+	// Promote to top layer so toasts appear above showModal() dialogs
+	;(el as any).showPopover?.()
+	return el
+}
+
 export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 	install: (app: App, options: BagelToastOptions = {}) => {
+		const container = createToastContainer()
+
 		const defaultOptions: ToastOptions = {
 			position: POSITION.TOP_RIGHT,
 			timeout: 5000,
@@ -58,6 +71,7 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 			newestOnTop: true,
 			toastClassName: 'custom-toast-wrapper',
 			bodyClassName: 'custom-toast-body',
+			...(container ? { container } : {}),
 			...options,
 		}
 

package/src/styles/bagel.css

@@ -1,3 +1,4 @@
+@import "base-colors.css";
 @import "layout.css";
 @import "mobilLayout.css";
 @import "inputs.css";