@bagelink/vue 1.4.111 → 1.4.115

package/src/components/form/BagelForm.vue

@@ -114,12 +114,9 @@ async function handleSubmit() {
 }
 
 // Field renderingks
-const { renderField } = useSchemaField<T, P>({
+const { renderField } = useSchemaField<T>({
 	mode: 'form',
-	getFormData: () => ({
-		...formData.value,
-		get: (path: string) => getNestedValue(formData.value, path, '')
-	}),
+	getFormData: () => formData.value,
 	onUpdateModelValue: (field, value) => {
 		if (!field.id) return
 
@@ -128,7 +125,7 @@ const { renderField } = useSchemaField<T, P>({
 	}
 })
 
-const renderSchemaField = (field: any) => renderField(field as BaseBagelField<T, P>)
+const renderSchemaField = (field: any) => renderField(field as BaseBagelField<T, Path<T>>)
 
 // Add new method to handle slot input changes
 function handleSlotInputChange(event: Event) {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModeType } from '../../../utils/calendar/typings'
-import { TextInput, Dropdown, fmtDate } from '@bagelink/vue'
+import { TextInput, Dropdown, formatDate } from '@bagelink/vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, onMounted } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
@@ -47,7 +47,7 @@ const isOpen = ref(false)
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
 		if (!date) return ''
-		return fmtDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
+		return formatDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 	}
 
 	const parseUserInput = (input: string): Date | null => {

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

@@ -15,6 +15,7 @@ const props = withDefaults(
 		locale?: string
 		enableTime?: boolean
 		highlightedDates?: MaybeRefOrGetter<(string | Date)[]>
+		disabledDates?: MaybeRefOrGetter<(string | Date)[]>
 		autoSize?: boolean
 	}>(),
 	{
@@ -28,6 +29,7 @@ const props = withDefaults(
 const emit = defineEmits(['update:modelValue'])
 
 const computedHighlightedDates = $computed(() => toValue(props.highlightedDates))
+const computedDisabledDates = $computed(() => toValue(props.disabledDates))
 
 // State
 const currentMonth = ref(new Date())
@@ -50,8 +52,24 @@ function useDateValidation() {
 		const minDate = parseDate(props.min)
 		const maxDate = parseDate(props.max)
 
+		// Check if date is in min/max range
 		if (minDate && date < minDate) return true
 		if (maxDate && date > maxDate) return true
+
+		// Check if date is in the disabled dates array
+		if (Array.isArray(computedDisabledDates) && computedDisabledDates.length > 0) {
+			const isInDisabledDates = computedDisabledDates.some((disabledDate) => {
+				const parsedDisabledDate = parseDate(disabledDate)
+				if (!parsedDisabledDate) return false
+
+				// Compare year, month, and day
+				return date.getFullYear() === parsedDisabledDate.getFullYear()
+					&& date.getMonth() === parsedDisabledDate.getMonth()
+					&& date.getDate() === parsedDisabledDate.getDate()
+			})
+			if (isInDisabledDates) return true
+		}
+
 		return false
 	}
 
@@ -310,7 +328,7 @@ function selectDate(date: Date | null) {
 </script>
 
 <template>
-	<div class="ltr gap-075 m_flex-wrap calendar-container justify-content-center h-100p" :class="{ 'flex': !autoSize }">
+	<div class="ltr gap-075 m_flex-wrap calendar-container justify-content-center h-100p" :class="{ flex: !autoSize }">
 		<div class="calendar-section m_border-none px-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">
@@ -333,18 +351,12 @@ function selectDate(date: Date | null) {
 			</div>
 
 			<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
-				<div
-					v-for="day in weekDays"
-					:key="day"
-					class="txt-center txt-12 opacity-6"
-				>
+				<div v-for="day in weekDays" :key="day" class="txt-center txt-12 opacity-6">
 					{{ day }}
 				</div>
 
 				<button
-					v-for="date in currentMonthDays"
-					:key="date?.toISOString()"
-					type="button"
+					v-for="date in currentMonthDays" :key="date?.toISOString()" type="button"
 					class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
 					:class="{
 						'selected': isSelected(date),
@@ -352,9 +364,7 @@ function selectDate(date: Date | null) {
 						'disabled': isDateDisabled(date),
 						'not-in-month': isNotInMonth(date),
 						'highlighted': isHighlighted(date),
-					}"
-					:disabled="isDateDisabled(date)"
-					@click="selectDate(date)"
+					}" :disabled="isDateDisabled(date)" @click="selectDate(date)"
 				>
 					{{ date?.getDate() }}
 				</button>
@@ -362,52 +372,34 @@ function selectDate(date: Date | null) {
 
 			<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
 				<Btn
-					v-for="month in months"
-					:key="month.value"
-					thin
-					:flat="month.value !== currentMonthValue.month"
-					:disabled="month.disabled"
-					:value="month.name"
-					@click="selectMonth(month.value)"
+					v-for="month in months" :key="month.value" thin :flat="month.value !== currentMonthValue.month"
+					:disabled="month.disabled" :value="month.name" @click="selectMonth(month.value)"
 				/>
 			</div>
 
 			<div v-else class="year-grid grid gap-05 p-0">
 				<Btn
-					v-for="year in years"
-					:key="year.value" thin
-					:flat="year.value !== currentMonthValue.year"
-					:disabled="year.disabled"
-					:value="year.value.toString()"
-					@click="selectYear(year.value)"
+					v-for="year in years" :key="year.value" thin :flat="year.value !== currentMonthValue.year"
+					:disabled="year.disabled" :value="year.value.toString()" @click="selectYear(year.value)"
 				/>
 			</div>
 		</div>
 
-		<div v-if="enableTime && currentView === 'days'" class="time-picker border-start flex column gap-1 w-120px px-025">
+		<div
+			v-if="enableTime && currentView === 'days'"
+			class="time-picker border-start flex column gap-1 w-120px px-025"
+		>
 			<div class="flex gap-025">
 				<NumberInput
-					center
-					:modelValue="hours"
-					:disabled="!selectedDate"
-					:min="0"
-					:max="23"
-					layout="vertical"
-					:padZero="2"
-					@update:modelValue="handleHourInput"
+					center :modelValue="hours" :disabled="!selectedDate" :min="0" :max="23" layout="vertical"
+					:padZero="2" @update:modelValue="handleHourInput"
 				/>
 				<p class="pb-075">
 					:
 				</p>
 				<NumberInput
-					center
-					:modelValue="minutes"
-					:disabled="!selectedDate"
-					:min="0"
-					:max="59"
-					:padZero="2"
-					layout="vertical"
-					@update:modelValue="handleMinuteInput"
+					center :modelValue="minutes" :disabled="!selectedDate" :min="0" :max="59" :padZero="2"
+					layout="vertical" @update:modelValue="handleMinuteInput"
 				/>
 			</div>
 		</div>
@@ -478,6 +470,7 @@ function selectDate(date: Date | null) {
 	color: var(--bgl-text-color);
 	outline: 1px solid var(--border-color);
 }
+
 .day:hover:not(.disabled).selected {
 	filter: var(--bgl-hover-filter);
 	background-color: var(--bgl-primary);
@@ -504,16 +497,16 @@ function selectDate(date: Date | null) {
 }
 
 .day.highlighted:not(.selected) {
-  background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
-  font-weight: 500;
+	background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
+	font-weight: 500;
 }
 
 .day.highlighted.selected {
-  /* Add a subtle ring effect for dates that are both selected and highlighted */
-  box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
+	/* Add a subtle ring effect for dates that are both selected and highlighted */
+	box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
 }
 
 .day.highlighted:not(.selected):hover {
-  background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
+	background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
 }
 </style>

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,4 +1,3 @@
-import type { BaseBagelField } from '@bagelink/vue'
 import type { ModalApi } from '../../../../../plugins/useModal'
 
 import type { EditorState } from '../richTextTypes'
@@ -90,7 +89,7 @@ export function insertEmbed(modal: ModalApi, state: EditorState) {
 				bglFrmUtil.numField('width', 'Width', { min: 200, placeholder: '560' }),
 				bglFrmUtil.numField('height', 'Height', { min: 200, placeholder: '315' })
 			),
-			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true } as BaseBagelField<InsertImbedModalData, 'allowFullscreen'>,
+			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', attrs: { value: true } },
 		],
 		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
 			if (!data.url) return

package/src/components/layout/AppContent.vue

@@ -66,7 +66,7 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
 		</header>
 		
 		<!-- Page Content -->
-		<main class="flex-grow overflow py-1 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100" :class="{
+		<main class="pageContent flex-grow overflow py-1 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100" :class="{
 			'px-1': !sidebarCardStyle?.value,
 								}">
 			<slot name="content">
@@ -77,6 +77,26 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
 	</div>
 </template>
 
+<style>
+.slide-fade-enter-from:has(.app-header),
+.slide-fade-leave-to:has(.app-header) {
+	transform: translateX(0) !important;
+	opacity: 1 !important;
+}
+
+.slide-fade-enter-from:has(.app-header) .pageContent,
+.slide-fade-leave-to:has(.app-header) .pageContent {
+	transform: translateX(-20px) !important;
+	opacity: 0 !important;
+}
+
+.slide-fade-enter-active:has(.app-header) .pageContent,
+.slide-fade-leave-active:has(.app-header) .pageContent {
+	transition: all 0.15s ease-in;
+	overflow: hidden;
+}
+</style>
+
 <style scoped>
 .paddingAppContent {
 	padding-inline-start: 0.5rem;

package/src/composables/useSchemaField.ts

@@ -34,7 +34,7 @@ export interface UseSchemaFieldOptions<T, SFP extends Path<T>> {
 	includeUnset?: boolean
 }
 
-export function useSchemaField<T extends { [key: string]: any }, SP extends Path<T>>(optns: UseSchemaFieldOptions<T, SP>) {
+export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchemaFieldOptions<T, Path<T>>) {
 	const { mode = 'form', getFormData, onUpdateModelValue, includeUnset = false } = optns
 
 	// Helper function to render objects recursively
@@ -96,18 +96,18 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 	}
 
-	function renderChild(child: SchemaChild<T, SP>, slots?: BaseBagelField<T, SP>['slots']) {
+	function renderChild(child: SchemaChild<T, Path<T>>, slots?: BaseBagelField<T, Path<T>>['slots']) {
 		if (typeof child === 'string') return child
 		if (isVNode(child)) return child
 		return renderField(
-			child as BaseBagelField<T, SP>,
+			child as BaseBagelField<T, Path<T>>,
 			slots
 		)
 	}
 
 	function renderField(
-		field: BaseBagelField<T, SP>,
-		slots?: BaseBagelField<T, SP>['slots']
+		field: BaseBagelField<T, Path<T>>,
+		slots?: BaseBagelField<T, Path<T>>['slots']
 	): VNode | undefined {
 		const Component = getComponent(field as Field<T>)
 		if (!Component) return
@@ -320,7 +320,7 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 								return schemaField
 							}
 
-							return renderField(schemaField as BaseBagelField<T, SP>, slots)
+							return renderField(schemaField as BaseBagelField<T, Path<T>>, slots)
 						})
 					}
 				}
@@ -329,7 +329,7 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 
 		// Handle custom slot content from parent
 
-		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, SP> | undefined)?.({ row: rowData, field }) : undefined
+		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, Path<T>> | undefined)?.({ row: rowData, field }) : undefined
 		// field.id && slots?.[field.id] && typeof slots[field.id] === 'function' && !Array.isArray(slots?.[field.id])
 		// 			? (slots[field.id])({ row: rowData, field })
 		// 			: undefined

package/src/types/BagelForm.ts

@@ -14,7 +14,7 @@ export type AttributeValue =
 	| { [key: string]: any }
 
 export type AttributeFn<T, P extends Path<T>> = (
-	field: FieldVal<T, P>,
+	field: SmartFieldVal<T, P>,
 	row?: T
 ) => AttributeValue
 
@@ -34,16 +34,16 @@ export type BagelFieldOptions<T, P extends Path<T>> =
 		| boolean
 		| { [key: string]: any }
 	)[]
-	| ((val?: FieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
-	| ((query: string, val?: FieldVal<T, P>, rowData?: T) => Promise<Option[]>)
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+	| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
 
 export type VIfType<T, P extends Path<T>> =
 	| string
 	| boolean
-	| ((val?: FieldVal<T, P>, rowData?: T) => boolean)
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
 
 export type ValidationFn<T, P extends Path<T>> = (
-	val?: FieldVal<T, P>,
+	val?: SmartFieldVal<T, P>,
 	rowData?: T
 ) => string | undefined
 
@@ -59,7 +59,61 @@ export type _Path<
 export type Path<T, PO extends PathsOptions = DefaultPathsOptions> =
 	FieldVal<T, _Path<T, PO>> extends Array<any>
 		? LiteralStringUnion<_Path<T, PO>>
-		: _Path<T, PO>
+		: _Path<T, PO> | string
+
+// Smart field value type that preserves type information when possible
+export type SmartFieldVal<T, P extends Path<T>> =
+	P extends string
+		? P extends keyof T
+			? T[P]
+			: any
+		: FieldVal<T, P>
+
+// Smart bagel field options that preserve type information
+export type SmartBagelFieldOptions<T, P extends Path<T>> =
+	| string
+	| (
+		| {
+			label?: string
+			value: string | number
+		}
+		| string
+		| number
+		| boolean
+		| { [key: string]: any }
+	)[]
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+	| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
+
+// Smart VIf type that preserves type information
+export type SmartVIfType<T, P extends Path<T>> =
+	| string
+	| boolean
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
+
+// Smart validation function that preserves type information
+export type SmartValidationFn<T, P extends Path<T>> = (
+	val?: SmartFieldVal<T, P>,
+	rowData?: T
+) => string | undefined
+
+// Smart attribute function that preserves type information
+export type SmartAttributeFn<T, P extends Path<T>> = (
+	field: SmartFieldVal<T, P>,
+	row?: T
+) => AttributeValue
+
+// Smart transform function that preserves type information
+export type SmartTransformFn<T, P extends Path<T>> = (
+	val?: SmartFieldVal<T, P>,
+	rowData?: T
+) => any
+
+// Smart update function that preserves type information
+export type SmartUpdateFn<T, P extends Path<T>> = (
+	val?: SmartFieldVal<T, P>,
+	rowData?: T
+) => unknown
 
 /** The value type at path P in object T. */
 // Fall back to unknown if type resolution fails
@@ -104,20 +158,20 @@ export interface BaseBagelField<
 	'id'?: P
 	'label'?: string
 	'placeholder'?: string
-	'class'?: AttributeValue | AttributeFn<T, P>
+	'class'?: AttributeValue | SmartAttributeFn<T, P>
 	'attrs'?: Attributes<T, P>
 	'required'?: boolean
 	'disabled'?: boolean
 	'helptext'?: string
-	'options'?: BagelFieldOptions<T, P>
+	'options'?: SmartBagelFieldOptions<T, P>
 	'children'?: SchemaChild<T, Path<T, PO>, PO>[]
 	'slots'?: { [key: string]: SchemaChild<T, Path<T, PO>, PO>[] }
 	'defaultValue'?: any
-	'vIf'?: VIfType<T, P>
-	'v-if'?: VIfType<T, P>
-	'transform'?: (val?: FieldVal<T, P>, rowData?: T) => any
-	'onUpdate'?: (val?: FieldVal<T, P>, rowData?: T) => unknown
-	'validate'?: ValidationFn<T, P>
+	'vIf'?: SmartVIfType<T, P>
+	'v-if'?: SmartVIfType<T, P>
+	'transform'?: SmartTransformFn<T, P>
+	'onUpdate'?: SmartUpdateFn<T, P>
+	'validate'?: SmartValidationFn<T, P>
 }
 
 export type _MappedBaseBagelField<

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import type { ArrayBagelField, ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, FieldByP, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField, ShallowBglFormSchemaT, UploadInputProps } from '@bagelink/vue'
+import type { ArrayBagelField, ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, FieldByP, IconType, InputBagelField, Path, SchemaChild, SelectBagelField, ShallowBglFormSchemaT, UploadInputProps } from '@bagelink/vue'
 import type { DefaultPathsOptions, PathsOptions } from 'type-fest/source/paths'
 import type { InputTypeHTMLAttribute, MaybeRefOrGetter } from 'vue'
 
@@ -85,70 +85,64 @@ export function richText<
 
 export function txtField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: TextInputOptions<T, P>,
-): InputBagelField<T, P, PO> {
+	options?: TextInputOptions<T, Path<T, PO>>,
+): InputBagelField<T, Path<T, PO>, PO> {
 	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,
 		helptext: options?.helptext,
+		disabled: options?.disabled,
+		defaultValue: options?.defaultValue,
+		vIf: options?.vIf,
 		transform: options?.transform,
 		attrs: {
-			type: options?.type,
+			autocomplete: options?.autocomplete,
 			pattern: options?.pattern,
 			multiline: options?.multiline,
-			autocomplete: options?.autocomplete,
-			rows: options?.rows,
-			code: options?.code,
 			autoheight: options?.autoheight,
+			code: options?.code,
+			rows: options?.rows,
 			icon: options?.icon,
 			iconStart: options?.iconStart,
+			type: options?.type,
 		},
 	}
 }
 
 export function selectField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: Option[] | ((query: string) => Promise<Option[]>) | ((val?: any, row?: T) => Option[] | ((query: string) => Promise<Option[]>)) | ((query: string, val?: any, row?: T) => Promise<Option[]>),
-	config?: SlctInputOptions<T, P>,
-): SelectBagelField<T, P, PO> {
+	options?: any[],
+	fieldOptions?: SlctInputOptions<T, Path<T, PO>>,
+): SelectBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'select',
 		id,
-		options,
-		class: config?.class,
-		placeholder: config?.placeholder,
-		required: config?.required,
 		label,
-		defaultValue: config?.defaultValue,
-		vIf: config?.vIf,
-		validate: config?.validate,
-		onUpdate: config?.onUpdate,
-		transform: config?.transform,
+		class: fieldOptions?.class,
+		required: fieldOptions?.required,
+		helptext: fieldOptions?.helptext,
+		disabled: fieldOptions?.disabled,
+		defaultValue: fieldOptions?.defaultValue,
+		vIf: fieldOptions?.vIf,
+		transform: fieldOptions?.transform,
+		options,
 		attrs: {
-			disabled: config?.disabled,
-			searchable: config?.searchable,
-			multiselect: config?.multiselect,
-			clearable: config?.clearable,
-			autocomplete: config?.autocomplete,
+			...fieldOptions?.attrs,
+			searchable: fieldOptions?.searchable,
+			multiselect: fieldOptions?.multiselect,
+			clearable: fieldOptions?.clearable,
 		},
 	}
 }
@@ -162,22 +156,25 @@ interface CheckInputOptions<T, K extends Path<T>> extends Omit<InputOptions<T, K
 
 export function checkField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: CheckInputOptions<T, P>,
-): BaseBagelField<T, P, PO> {
+	options?: CheckInputOptions<T, Path<T, PO>>,
+): BaseBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'check',
+		id,
+		label,
 		class: options?.class,
 		required: options?.required,
+		helptext: options?.helptext,
+		disabled: options?.disabled,
 		defaultValue: options?.defaultValue,
-		id,
-		label,
+		vIf: options?.vIf,
 		transform: options?.transform,
 		attrs: {
+			...options?.attrs,
 			value: options?.value,
 		},
 	}
@@ -247,13 +244,12 @@ export function dateField<
 
 export function numField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: NumFieldOptions<T, P>,
-): BaseBagelField<T, P, PO> {
+	options?: NumFieldOptions<T, Path<T, PO>>,
+): BaseBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'number',
 		class: options?.class,
@@ -281,11 +277,10 @@ export function numField<
 
 export function frmRow<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	...children: SchemaChild<T, P, PO>[]
-): FieldByP<T, P, PO> {
+	...children: SchemaChild<T, Path<T, PO>, PO>[]
+): { $el: string, class: string, children: SchemaChild<T, Path<T, PO>, PO>[] } {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
@@ -297,17 +292,21 @@ export interface UploadOptions<T, K extends Path<T>> extends Omit<UploadInputPro
 
 export function uploadField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: UploadOptions<T, P>
-): BaseBagelField<T, P, PO> {
+	options?: UploadOptions<T, Path<T, PO>>,
+): BaseBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'upload',
 		id,
 		label,
+		class: options?.class,
+		required: options?.required,
+		helptext: options?.helptext,
+		disabled: options?.disabled,
+		defaultValue: options?.defaultValue,
 		vIf: options?.vIf,
 		transform: options?.transform,
 		attrs: {

package/src/utils/elementUtils.ts

@@ -353,20 +353,17 @@ export function img<
 ): BaseElementField<T, PO> {
 	// Handle different overload patterns
 	let id: Path<T, PO> | undefined
-	let finalSrc: string = ''
 	let finalOptions: ImgElementOptions<T, PO> = {}
 
 	if (typeof idOrOptions === 'object' && idOrOptions !== null) {
 		// img(options)
 		finalOptions = idOrOptions
-		const { id: optionId, src: optionSrc } = finalOptions
+		const { id: optionId } = finalOptions
 		id = optionId as Path<T, PO> | undefined
-		finalSrc = optionSrc ?? ''
 	} else {
 		// img(id, ...) patterns
 		id = idOrOptions
 		if (src != null) {
-			finalSrc = src
 			if (typeof altOrOptions === 'string') {
 				// img(id, src, alt)
 				finalOptions = { alt: altOrOptions }