@bagelink/vue 1.4.111 → 1.4.118

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,8 +1,7 @@
-import type { BaseBagelField } from '@bagelink/vue'
 import type { ModalApi } from '../../../../../plugins/useModal'
 
 import type { EditorState } from '../richTextTypes'
-import { bagelFormUtils as bglFrmUtil } from '@bagelink/vue'
+import { bagelFormUtils as frm } from '../../../../../utils'
 
 export function insertImage(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
@@ -19,9 +18,9 @@ export function insertImage(modal: ModalApi, state: EditorState) {
 		schema: [
 			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
 			{ id: 'alt', $el: 'text', label: 'Alt Text' },
-			bglFrmUtil.frmRow(
-				bglFrmUtil.numField('width', 'Width', { min: 1 }),
-				bglFrmUtil.numField('height', 'Height', { min: 1 }),
+			frm.frmRow(
+				frm.numField('width', 'Width', { min: 1 }),
+				frm.numField('height', 'Height', { min: 1 }),
 			),
 			{ id: 'figcaption', $el: 'check', label: 'Show Caption' },
 		],
@@ -86,11 +85,11 @@ export function insertEmbed(modal: ModalApi, state: EditorState) {
 		title: 'Insert Embed',
 		schema: [
 			{ id: 'url', $el: 'text', label: 'URL', attrs: { placeholder: 'Enter URL (YouTube, Vimeo, etc.)' } },
-			bglFrmUtil.frmRow(
-				bglFrmUtil.numField('width', 'Width', { min: 200, placeholder: '560' }),
-				bglFrmUtil.numField('height', 'Height', { min: 200, placeholder: '315' })
+			frm.frmRow(
+				frm.numField('width', 'Width', { min: 200, placeholder: '560' }),
+				frm.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/plugins/modalTypes.ts

@@ -1,5 +1,6 @@
-import type { BglFormSchemaT, BtnOptions, ThemeType } from '@bagelink/vue'
 import type { MaybeRefOrGetter } from 'vue'
+import type { BtnOptions, ThemeType } from '../types'
+import type { BglFormSchemaT } from '../types/BagelForm'
 
 export interface ModalOptions {
 	title?: string
@@ -25,7 +26,14 @@ export interface ModalConfirmOptions {
 }
 
 export type ModalType = 'modal' | 'modalForm' | 'confirmModal'
-export type ConfirmModalUserOptions = string | { title: string, message: string, confirmText?: string, cancelText?: string, confirmBtnColor?: string, cancelBtnColor?: string }
+export type ConfirmModalUserOptions = string | {
+	title: string
+	message: string
+	confirmText?: string
+	cancelText?: string
+	confirmBtnColor?: string
+	cancelBtnColor?: string
+}
 
 export interface ModalComponentProps<T extends { [key: string]: any }> {
 	componentSlots: { [key: string]: any }

package/src/plugins/useModal.ts

@@ -1,12 +1,26 @@
 import type { InjectionKey, Plugin } from 'vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
-import type { ConfirmModalUserOptions, ModalComponentProps, ModalConfirmOptions, ModalFormComponentProps, ModalFormOptions, ModalOptions, ModalType } from './modalTypes'
-import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
+import type {
+	ModalComponentProps,
+	ModalFormComponentProps,
+	ModalFormOptions,
+	ModalOptions,
+	ModalType,
+	ConfirmModalUserOptions,
+	ModalConfirmOptions
+} from './modalTypes'
 import { defineComponent, h, inject } from 'vue'
+import { Modal, ModalConfirm, ModalForm } from '../components'
 
 export interface ModalApi {
-	showModal: <T extends { [key: string]: any }>(options: ModalOptions, slots?: { [key: string]: any }) => ModalComponentProps<T> | undefined
-	showModalForm: <T extends { [key: string]: any }>(options: ModalFormOptions<T>, slots?: { [key: string]: any }) => ModalFormComponentProps<T> | undefined
+	showModal: <T extends { [key: string]: any }>(
+		options: ModalOptions,
+		slots?: { [key: string]: any }
+	) => ModalComponentProps<T> | undefined
+	showModalForm: <T extends { [key: string]: any }>(
+		options: ModalFormOptions<T>,
+		slots?: { [key: string]: any }
+	) => ModalFormComponentProps<T> | undefined
 	hideModal: (index?: number) => void
 	confirmModal: (options: ConfirmModalUserOptions) => Promise<boolean>
 }
@@ -21,7 +35,7 @@ export function useModal(): ModalApi {
 
 export const ModalPlugin: Plugin = {
 	install: (app) => {
-		const modalStack = $ref<ModalComponentProps<object>[]>([])
+		const modalStack: ModalComponentProps<object>[] = []
 
 		const hideModal = (index: number) => {
 			modalStack.splice(index, 1)
@@ -59,7 +73,10 @@ export const ModalPlugin: Plugin = {
 		app.provide(ModalSymbol, {
 			showModal: (options: ModalOptions, slots?: { [key: string]: any }) => showModal('modal', options, slots),
 
-			showModalForm: <T extends { [key: string]: any }>(options: ModalFormOptions<T>, slots?: { [key: string]: any }) => showModal<T>('modalForm', options, slots) as ModalFormComponentProps<T>,
+			showModalForm: <T extends { [key: string]: any }>(
+				options: ModalFormOptions<T>,
+				slots?: { [key: string]: any }
+			) => showModal<T>('modalForm', options, slots) as ModalFormComponentProps<T>,
 
 			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
 
@@ -80,7 +97,6 @@ export const ModalPlugin: Plugin = {
 						case 'modalForm':
 							return h(ModalForm, props as ComponentProps<typeof ModalForm>, modal.componentSlots)
 						case 'confirmModal':
-
 							return h(ModalConfirm, props as ModalConfirmOptions, {})
 						default:
 							return h(Modal, props, modal.componentSlots)

package/src/styles/layout.css

@@ -1022,6 +1022,12 @@
     width: 100%;
 }
 
+.w-100i,
+.w-100pi,
+.w100pi .width-100i {
+    width: 100% !important;
+}
+
 .min-w-100p,
 .w-min-100p,
 .min-w100p {

package/src/types/BagelForm.ts

@@ -1,10 +1,11 @@
-import type { ArrayAttrs, FieldArray, SelectInput, TextInput, Option } from '@bagelink/vue'
+// Local type definitions for internal use only
+type ArrayAttrs = any
+interface Option { label: string, value: any }
 import type { Paths, Get, IterableElement, OmitIndexSignature } from 'type-fest'
 import type { ToString } from 'type-fest/source/internal'
 import type { LiteralStringUnion } from 'type-fest/source/literal-union'
 import type { PathsOptions, DefaultPathsOptions } from 'type-fest/source/paths'
 import type { VNode } from 'vue'
-import type { ComponentExposed } from 'vue-component-type-helpers'
 
 export type AttributeValue =
 	| string
@@ -14,7 +15,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 +35,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
 
@@ -56,10 +57,84 @@ export type _Path<
 	PO extends PathsOptions = DefaultPathsOptions,
 > = ToString<Paths<OmitIndexSignature<T>, PO>>
 
+// Utility type for open-ended object paths
+export type OpenEndedPath<T> =
+  keyof T extends infer K ?
+  	K extends keyof T ?
+  		T[K] extends { [key: string]: any } ?
+        `${K & string}.${string}`
+  			: never
+  		: never
+  	: never
+
+// Enhanced Path type that allows flexibility for nested open-ended objects
 export type Path<T, PO extends PathsOptions = DefaultPathsOptions> =
-	FieldVal<T, _Path<T, PO>> extends Array<any>
-		? LiteralStringUnion<_Path<T, PO>>
-		: _Path<T, PO>
+  FieldVal<T, _Path<T, PO>> extends Array<any>
+  	? LiteralStringUnion<_Path<T, PO>>
+  	: _Path<T, PO> | (
+        // Allow nested paths for properties that have index signatures
+        keyof T extends infer K ?
+        	K extends keyof T ?
+        		T[K] extends { [key: string]: any } ?
+              `${K & string}.${string}`
+        			: never
+        		: never
+        	: never
+      )
+
+// 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
@@ -93,7 +168,7 @@ export type SchemaChild<
 	T,
 	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
-> = Field<T, PO> | ElementField<T, PO> | VNode | VNodeFn<T, P> | string
+> = Field<T, PO> | ElementField<T, PO> | VNode | VNodeFn<T, P> | string | BaseBagelField<T, P, PO>
 
 export interface BaseBagelField<
 	T,
@@ -104,20 +179,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<
@@ -170,7 +245,7 @@ export interface InputBagelField<
 	PO extends PathsOptions = DefaultPathsOptions
 >
 	extends BaseBagelField<T, P, PO> {
-	$el: 'text' | ComponentExposed<typeof TextInput>
+	$el: 'text' | any
 	type?: string
 }
 
@@ -180,7 +255,7 @@ export interface SelectBagelField<
 	PO extends PathsOptions = DefaultPathsOptions,
 >
 	extends BaseBagelField<T, P, PO> {
-	$el: 'select' | ComponentExposed<typeof SelectInput>
+	$el: 'select' | any
 	type?: string
 }
 
@@ -190,8 +265,8 @@ export interface ArrayBagelField<
 	PO extends PathsOptions = DefaultPathsOptions,
 >
 	extends BaseBagelField<T, P, PO> {
-	$el: 'array' | ComponentExposed<typeof FieldArray>
-	attrs?: ArrayAttrs<T, P>
+	$el: 'array' | any
+	attrs?: ArrayAttrs
 }
 
 export interface ValidateInputBaseT {

package/src/types/NavLink.ts

@@ -1,4 +1,4 @@
-import type { IconType } from '@bagelink/vue'
+import type { IconType } from './index'
 
 export interface NavLink {
 	label: string