@bagelink/vue 1.15.205 → 1.15.209

package/src/styles/inputs.css

@@ -59,6 +59,24 @@ select {
     color: var(--bgl-input-label-active-color);
 }
 
+.helptext {
+    display: block;
+    margin: 0.15rem 0 0.25rem;
+    line-height: 1.4;
+    font-size: var(--bgl-label-font-size);
+    font-weight: 300;
+    color: var(--bgl-label-color);
+    cursor: default;
+    user-select: text;
+}
+
+/* Keep helptext muted even when nested inside a focused/active label */
+.bagel-input:focus-within .helptext,
+.bagel-input.open .helptext,
+.bagel-input:has(:checked) .helptext {
+    color: var(--bgl-label-color);
+}
+
 .bagel-input input,
 .bagel-input select,
 .custom-select .input {

package/src/utils/BagelFormUtils.ts

@@ -0,0 +1,341 @@
+/**
+ * BagelFormUtils — legacy `$el`-based schema-builder helpers.
+ *
+ * These construct `BaseBagelField` descriptors for the object-schema form
+ * renderer (`BagelForm` / `BglFormSchemaT`). Retained for backwards
+ * compatibility with consumers (e.g. Blox block configs) that author form
+ * schemas with `txtField`/`slctField`/`frmRow`/… rather than the newer
+ * `defineSchema`/FormFlow API. Pure factory functions, no runtime deps.
+ *
+ * Re-exported as the `bagelFormUtils` namespace from the package root.
+ */
+import type {
+	BaseBagelField,
+	BglFormSchemaT,
+	Field,
+	Path,
+	SchemaChild,
+	UploadInputProps,
+} from '../types/BagelForm'
+import type { IconType, Option } from '../types'
+
+interface InputOptions<T, P extends Path<T>> extends Partial<BaseBagelField<T, P>> {
+	defaultValue?: string | number
+	autocomplete?: string
+}
+
+interface DateOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	enableTime?: boolean
+	mode?: 'day' | 'month' | 'year'
+	locale?: string
+	timezone?: string
+}
+
+interface TextInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	type?: 'text' | 'tel' | 'email' | 'time'
+	pattern?: string
+	multiline?: boolean
+	autoheight?: boolean
+	code?: boolean
+	rows?: number | string
+	icon?: IconType
+	iconStart?: IconType
+}
+
+interface SlctInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	searchable?: boolean
+	multiselect?: boolean
+	clearable?: boolean
+	onSearch?: (search: string) => any
+}
+
+interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	max?: number
+	min?: number
+	step?: number
+	layout?: 'default' | 'vertical' | 'horizontal'
+	padZero?: number
+	center?: boolean
+	useGrouping?: boolean
+}
+
+type RichTextOptions<T, P extends Path<T>> = InputOptions<T, P>
+
+export function getBaseField<T, P extends Path<T>>(
+	id?: P,
+	labelOrRest: string | Partial<BaseBagelField<T, P>> = {},
+	rest: Partial<BaseBagelField<T, P>> = {},
+): BaseBagelField<T, P> {
+	if (typeof labelOrRest === 'object') return { id, ...labelOrRest }
+	return { id, label: labelOrRest, ...rest }
+}
+
+export function richText<T, P extends Path<T>>(id: P, label?: string, options?: RichTextOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'richtext',
+		class: options?.class,
+		required: options?.required,
+		id,
+		label,
+		vIf: options?.vIf,
+		placeholder: options?.placeholder,
+		attrs: { autocomplete: options?.autocomplete },
+	}
+}
+
+export function txtField<T, P extends Path<T>>(id: P, label?: string, options?: TextInputOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'text',
+		id,
+		label,
+		class: options?.class,
+		required: options?.required,
+		vIf: options?.vIf,
+		disabled: options?.disabled,
+		placeholder: options?.placeholder,
+		defaultValue: options?.defaultValue,
+		validate: options?.validate,
+		onUpdate: options?.onUpdate,
+		attrs: {
+			type: options?.type,
+			pattern: options?.pattern,
+			multiline: options?.multiline,
+			autocomplete: options?.autocomplete,
+			rows: options?.rows,
+			code: options?.code,
+			autoheight: options?.autoheight,
+			icon: options?.icon,
+			iconStart: options?.iconStart,
+		},
+	}
+}
+
+export function selectField<T, P extends Path<T>>(
+	id: P,
+	label?: string,
+	options?: Option[] | (() => Option[]),
+	config?: SlctInputOptions<T, P>,
+): BaseBagelField<T, P> {
+	return {
+		$el: 'select',
+		id,
+		// Runtime renderer also accepts a lazy `() => Option[]` loader, which the
+		// static `FieldOptions` type doesn't model — cast to preserve that.
+		options: options as BaseBagelField<T, P>['options'],
+		class: config?.class,
+		placeholder: config?.placeholder,
+		required: config?.required,
+		label,
+		defaultValue: config?.defaultValue,
+		vIf: config?.vIf,
+		attrs: {
+			disabled: config?.disabled,
+			searchable: config?.searchable,
+			multiselect: config?.multiselect,
+			onSearch: config?.onSearch,
+			clearable: config?.clearable,
+			autocomplete: config?.autocomplete,
+		},
+	}
+}
+
+export const slctField = selectField
+
+interface CheckInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	value?: string
+}
+
+export function checkField<T, P extends Path<T>>(id: P, label?: string, options?: CheckInputOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'check',
+		class: options?.class,
+		required: options?.required,
+		id,
+		label,
+		attrs: { value: options?.value },
+	}
+}
+
+interface EmailInputOptions<T, P extends Path<T>> extends InputOptions<T, P> {
+	autocorrect?: boolean
+	serverValidate?: boolean
+	preventFakeEmails?: boolean
+	pattern?: string
+}
+
+export function emailField<T, P extends Path<T>>(id: P, label?: string, options?: EmailInputOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'email',
+		id,
+		label,
+		class: options?.class,
+		required: options?.required,
+		vIf: options?.vIf,
+		attrs: {
+			autocorrect: options?.autocorrect,
+			serverValidate: options?.serverValidate,
+			preventFakeEmails: options?.preventFakeEmails,
+			pattern: options?.pattern,
+		},
+	}
+}
+
+export function dateField<T, P extends Path<T>>(id: P, label?: string, options?: DateOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'date',
+		class: options?.class,
+		required: options?.required,
+		id,
+		disabled: options?.disabled,
+		label,
+		defaultValue: options?.defaultValue,
+		vIf: options?.vIf,
+		attrs: {
+			disabled: options?.disabled,
+			autocomplete: options?.autocomplete,
+			enableTime: options?.enableTime,
+			mode: options?.mode,
+			locale: options?.locale,
+			timezone: options?.timezone,
+		},
+	}
+}
+
+export function numField<T, P extends Path<T>>(id: P, label?: string, options?: NumFieldOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'number',
+		class: options?.class,
+		required: options?.required,
+		defaultValue: options?.defaultValue,
+		id,
+		label,
+		disabled: options?.disabled,
+		placeholder: options?.placeholder,
+		helptext: options?.helptext,
+		vIf: options?.vIf,
+		attrs: {
+			autocomplete: options?.autocomplete,
+			step: options?.step,
+			min: options?.min,
+			max: options?.max,
+			layout: options?.layout,
+			padZero: options?.padZero,
+			center: options?.center,
+			useGrouping: options?.useGrouping,
+		},
+	}
+}
+
+export function frmRow<T, P extends Path<T>>(...children: SchemaChild<T, P>[]): {
+	$el: string
+	class: string
+	children: SchemaChild<T, P>[]
+} {
+	return { $el: 'div', class: 'flex gap-1 m_block align-items-end', children }
+}
+
+export type UploadOptions<T, K extends Path<T>> = UploadInputProps & InputOptions<T, K>
+
+export function uploadField<T, P extends Path<T>>(id: P, label?: string, options?: UploadOptions<T, P>): BaseBagelField<T, P> {
+	return { $el: 'upload', id, label, vIf: options?.vIf, attrs: { ...options } }
+}
+
+interface RangeOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	min?: number
+	max?: number
+	step?: number
+	rtl?: boolean
+	multiRange?: boolean
+	formatValue?: (value: number) => string
+}
+
+export function rangeField<T, P extends Path<T>>(id: P, label?: string, options?: RangeOptions<T, P>): BaseBagelField<T, P> {
+	return {
+		$el: 'range',
+		id,
+		label,
+		vIf: options?.vIf,
+		attrs: {
+			autocomplete: options?.autocomplete,
+			min: options?.min,
+			max: options?.max,
+			step: options?.step,
+			rtl: options?.rtl,
+			multiRange: options?.multiRange,
+			formatValue: options?.formatValue,
+		},
+	}
+}
+
+export function bglForm<T>(idOrField?: string | Field<T>, ...schema: Field<T>[]): {
+	$el: string
+	id?: string
+	attrs: { schema: (string | Field<T> | undefined)[] }
+} {
+	if (typeof idOrField === 'string') {
+		return { $el: 'bagelform', id: idOrField, attrs: { schema: [idOrField, ...schema] } }
+	}
+	return { $el: 'bagelform', attrs: { schema: [idOrField, ...schema] } }
+}
+
+export function telField<T, P extends Path<T>>(id: P, label?: string, options?: { [key: string]: any }): BaseBagelField<T, P> {
+	return { $el: 'tel', id, label, vIf: options?.vIf, attrs: options, class: options?.class }
+}
+
+export function colorField<T, P extends Path<T>>(id: P, label?: string, options?: { [key: string]: any }): BaseBagelField<T, P> {
+	return { $el: 'color', id, label, vIf: options?.vIf, attrs: options, class: options?.class }
+}
+
+export function findBglFieldById<T>(id: string, _schema: BglFormSchemaT<T>): Field<T> | undefined {
+	for (const field of _schema) {
+		if ((field as BaseBagelField<T, Path<T>>).id === id) return field as Field<T>
+		const children = (field as BaseBagelField<T, Path<T>>).children
+		if (children && Number(children.length) > 0) {
+			const fieldChildren = children.filter(
+				(c): c is Field<T> => typeof c === 'object' && c !== null && '$el' in c,
+			)
+			const child = findBglFieldById(id, fieldChildren as BglFormSchemaT<T>)
+			if (child) return child
+		}
+	}
+	return undefined
+}
+
+export interface ArrayFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	delete?: boolean
+	add?: boolean
+}
+
+export type ArrayType = 'number' | 'text'
+
+export function arrField<T, P extends Path<T>>(
+	id: P,
+	label: string,
+	schemaOrType: BglFormSchemaT<any> | ArrayType,
+	options?: ArrayFieldOptions<T, P>,
+): BaseBagelField<T, P> {
+	const attrs: Record<string, any> = { delete: true, add: true, ...options }
+	if (typeof schemaOrType === 'string') attrs.type = schemaOrType
+	else attrs.schema = schemaOrType
+	return { label, id, class: options?.class, $el: 'array', vIf: options?.vIf, attrs }
+}
+
+export function useForm() {
+	return {
+		txtField,
+		selectField,
+		checkField,
+		dateField,
+		numField,
+		frmRow,
+		uploadField,
+		rangeField,
+		bglForm,
+		telField,
+		colorField,
+		arrField,
+		richText,
+		findBglFieldById,
+		getBaseField,
+	}
+}