@bagelink/vue 1.0.33 → 1.0.41

package/dist/types/BagelForm.d.ts

@@ -64,6 +64,6 @@ export type BglFormSchemaT<T = {
 }> = Field<T>[];
 export type BglFormSchemaFnT<T = {
     [key: string]: any;
-}> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>;
+}> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T> | (() => Promise<BglFormSchemaT<T>>) | Promise<BglFormSchemaT<T>>;
 export {};
 //# sourceMappingURL=BagelForm.d.ts.map

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAEhC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAEvG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAA;AAE5F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC9C;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,CAC3D,MAAM,GACJ,CACD;IACC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB,GACC,MAAM,GACN,MAAM,GACN,OAAO,GACP;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CACxB,EAAE,GACD,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CACnC,CAAA;AAED,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAA;AAEvD,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAC1C;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,MAAM,GAC7B,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAClB,CAAC,GAAG,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,GACF,KAAK;CACR,CAAC,MAAM,CAAC,CAAC,GACR,KAAK,CAAA;AAER,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE;IACzD,KAAK,CAAC,EAAE,GAAG,CAAA;IAEX,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAA;IAC1C,OAAO,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;IACzC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAChC,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,GAAG,CAAA;IAC7C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC5C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;CAC7C;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC5D,GAAG,EAAE,MAAM,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;IAC5C,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC7D,GAAG,EAAE,QAAQ,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAA;IAChD,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;CAC3B;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAC5G,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,KAAK,CAAC,CAAC,CAAC,CAAA;AAE5D,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAEnE,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.0.33",
+  "version": "1.0.41",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/DataPreview.vue

@@ -9,7 +9,14 @@ import { useTableData } from './DataTable/useTableData'
 const props = defineProps<Omit<TableSchemaProps<T>, 'data'> & { modelValue: T, includeUnset?: boolean }>()
 const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
 
-const data = computed(() => Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue])
+const data = computed(() => {
+	// Handle undefined or null modelValue
+	if (!props.modelValue) {
+		return []
+	}
+
+	return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+})
 
 const {
 	computedSchema,
@@ -21,7 +28,14 @@ const {
 	useServerSort: false
 })
 
-const firstItem = computed(() => computedData.value[0] || {} as T)
+const firstItem = computed(() => {
+	// Handle empty computedData
+	if (!computedData.value || computedData.value.length === 0) {
+		return {} as T
+	}
+
+	return computedData.value[0] || {} as T
+})
 
 const { renderField } = useSchemaField<T>({
 	mode: 'preview',
@@ -32,9 +46,14 @@ const { renderField } = useSchemaField<T>({
 
 <template>
 	<div class="data-preview">
-		<template v-for="field in computedSchema" :key="field.id">
-			<component :is="renderField(field, slots)" />
+		<template v-if="computedSchema && computedSchema.length > 0">
+			<template v-for="field in computedSchema" :key="field.id">
+				<component :is="renderField(field, slots)" />
+			</template>
 		</template>
+		<div v-else class="empty-preview">
+			No data to display
+		</div>
 	</div>
 </template>
 
@@ -61,4 +80,11 @@ const { renderField } = useSchemaField<T>({
 .field-value {
 	font-size: 0.95rem;
 }
+
+.empty-preview {
+	font-size: 0.9rem;
+	color: var(--bgl-black-tint);
+	padding: 1rem 0;
+	text-align: center;
+}
 </style>

package/src/components/DataTable/DataTable.vue

@@ -40,7 +40,8 @@ const {
 	computedData,
 	sortField,
 	sortDirection,
-	toggleSort
+	toggleSort,
+	cleanTransformedData
 } = useTableData<T>({ data, schema, columns, useServerSort, onSort: (field, direction) => {
 	emit('orderBy', `${field} ${direction}`.trim() as EmitOrderT)
 } })
@@ -55,6 +56,7 @@ const {
 } = useTableSelection<T>({
 	selectable: props.selectable,
 	selectedItems,
+	cleanData: cleanTransformedData,
 	onSelect: (item) => { emit('select', item) }
 })
 
@@ -142,10 +144,10 @@ watch(
 						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
-							{{ field.label || keyToLabel(field.id) }}
+							{{ field.label || keyToLabel(field?.id) }}
 							<div
 								class="list-arrows"
-								:class="{ sorted: sortField === field.id }"
+								:class="{ sorted: sortField === field?.id }"
 							>
 								<Icon
 									:class="{ desc: sortDirection === 'DESC' }"
@@ -158,9 +160,9 @@ watch(
 				<tbody>
 					<tr
 						v-for="{ data: row } in list"
-						:key="row.id"
+						:key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
-						:class="{ selected: computedSelectedItems.includes(row.id ?? '') }"
+						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
 						@click="toggleSelectItem(row)"
 					>
 						<td v-if="isSelectable">
@@ -168,13 +170,13 @@ watch(
 								<input
 									v-model="selectedItems"
 									type="checkbox"
-									:value="row.id"
+									:value="row?.id || ''"
 								>
 							</div>
 						</td>
 						<td
 							v-for="field in computedSchema"
-							:key="`${field.id}-${row.id}`"
+							:key="`${field.id}-${row?.id || Math.random()}`"
 							class="col"
 						>
 							<slot

package/src/components/DataTable/useTableData.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue'
 import type { TableDataOptions, SortDirectionsT } from '../../types/TableSchema'
-import { useBglSchema, isDate } from '@bagelink/vue'
+import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
 import { computed, ref } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
@@ -34,19 +34,63 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 	const sortField = ref('')
 	const sortDirection = ref<SortDirectionsT>('ASC')
 	// Helper function to get the value from a possibly computed ref
-	function getValue<V>(value: ComputedRef<V> | V): V {
-		return (value as ComputedRef<V>).value !== undefined
-			? (value as ComputedRef<V>).value
-			: value as V
+	function getValue<V>(value: ComputedRef<V> | V | undefined): V | undefined {
+		if (value === undefined || value === null) {
+			return undefined
+		}
+
+		try {
+			// Check if it's a computed ref with a value property
+			if (value && typeof value === 'object' && 'value' in value) {
+				return (value as ComputedRef<V>).value
+			}
+			// Otherwise return the value directly
+			return value as V
+		} catch (error) {
+			console.error('Error in getValue:', error)
+			return undefined
+		}
 	}
 
 	// Create a computed property for the schema that will react to changes in options.columns
 	const computedSchema = computed(() => {
-		return useBglSchema<T>({
+		// Get the data safely
+		const dataValue = options.data.value || []
+
+		// Get the schema from useBglSchema
+		const schema = useBglSchema<T>({
 			schema: getValue(options.schema),
 			columns: getValue(options.columns),
-			data: options.data.value,
+			data: dataValue,
 		})
+
+		// If we have a valid schema with fields, filter out fields without an ID
+		if (Array.isArray(schema) && schema.length > 0) {
+			return schema.filter(field => field && field.id)
+		}
+
+		// If no schema is provided or it's empty, generate a default schema from the data
+		if (Array.isArray(dataValue) && dataValue.length > 0) {
+			const firstItem = dataValue[0]
+
+			// Create a schema based on the keys of the first item
+			return Object.keys(firstItem || {})
+				.filter(key => key !== 'id' && !key.startsWith('_')) // Exclude id and internal fields
+				.map(key => ({
+					id: key,
+					label: keyToLabel(key),
+					$el: 'div',
+					transform: (val?: any) => {
+						// Handle date fields
+						const dateFields = ['created_at', 'updated_at']
+						if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val
+						return val
+					}
+				}))
+		}
+
+		// Return an empty array if no data or schema
+		return []
 	})
 
 	function transform(rowData: T): TransformedData<T> {
@@ -82,10 +126,31 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		return transformed
 	}
 
+	// Helper function to clean up transformed data by removing all added properties
+	function cleanTransformedData<T extends Record<string, any>>(data: TransformedData<T>): T {
+		const cleanData = { ...data } as T
+
+		// Remove all keys that start with underscore (these are added by the transform function)
+		Object.keys(cleanData).forEach((key) => {
+			if (key.startsWith('_')) {
+				delete cleanData[key]
+			}
+		})
+
+		return cleanData
+	}
+
 	const computedSortField = computed(() => sortField.value ? `_transformed_${sortField.value}` : '')
 
 	const computedData = computed(() => {
-		const currentData = options.data.value
+		// Get the data safely
+		const currentData = options.data.value || []
+
+		// If there's no data, return an empty array
+		if (!Array.isArray(currentData) || currentData.length === 0) {
+			return []
+		}
+
 		const useServerSortValue = getValue(options.useServerSort)
 
 		if (!sortField.value || useServerSortValue === true) {
@@ -139,6 +204,7 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		transform,
 		sortField: computed(() => sortField.value),
 		sortDirection: computed(() => sortDirection.value),
-		toggleSort
+		toggleSort,
+		cleanTransformedData
 	}
 }

package/src/components/DataTable/useTableSelection.ts

@@ -1,7 +1,11 @@
 import type { TableSelectionOptions } from '../../types/TableSchema'
 import { computed, ref } from 'vue'
 
-export function useTableSelection<T extends Record<string, any>>(options: TableSelectionOptions<T>) {
+export interface UseTableSelectionOptions<T> extends TableSelectionOptions<T> {
+	cleanData?: (item: T) => T
+}
+
+export function useTableSelection<T extends Record<string, any>>(options: UseTableSelectionOptions<T>) {
 	const allSelectorEl = ref<HTMLInputElement>()
 	const computedSelectedItems = computed(() => options.selectedItems.value)
 	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
@@ -16,8 +20,18 @@ export function useTableSelection<T extends Record<string, any>>(options: TableS
 
 	function toggleSelectItem(item: T) {
 		if (computedSelectedItems.value.length === 0) {
-			const cleanItem = { ...item }
-			Object.keys(cleanItem).forEach(key => key.startsWith('_transformed_') && delete cleanItem[key])
+			// Clean the item if a cleanData function is provided, otherwise use the default cleaning
+			const cleanItem = options.cleanData ? options.cleanData(item) : { ...item }
+
+			// If no cleanData function is provided, use the default cleaning
+			if (!options.cleanData) {
+				Object.keys(cleanItem).forEach((key) => {
+					if (key.startsWith('_')) {
+						delete cleanItem[key]
+					}
+				})
+			}
+
 			options.onSelect(cleanItem)
 			return
 		}

package/src/components/DataTable/useTableVirtualization.ts

@@ -1,6 +1,6 @@
 import type { TableVirtualizationOptions } from '../../types/TableSchema'
 import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, isRef } from 'vue'
 
 export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>) {
 	const lastItemEl = ref<HTMLTableRowElement | null>(null)
@@ -16,7 +16,16 @@ export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>
 		await until(() => lastItemEl.value).toBeTruthy()
 
 		useIntersectionObserver(lastItemEl, ([entry]) => {
-			if (entry.isIntersecting && options.data.value.length) {
+			// Check if options.data.value exists and has length
+			let dataLength = 0
+
+			if (isRef(options.data) && options.data.value) {
+				dataLength = Array.isArray(options.data.value) ? options.data.value.length : 0
+			} else if (Array.isArray(options.data)) {
+				dataLength = options.data.length
+			}
+
+			if (entry.isIntersecting && dataLength > 0) {
 				options.onLastItemVisible?.()
 			}
 		})

package/src/components/Loading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 type LoadingType = 'ring' | 'ellipsis' | 'bar'
 
-const { type: theme = 'ring', size = 64, thickness, duration = 1.2, color } = defineProps<{
+const { type: theme = 'ring', size = 50, thickness, duration = 1.2, color } = defineProps<{
 	size?: number | string
 	thickness?: number | string
 	duration?: number | string
@@ -21,7 +21,7 @@ const animationDuration = $computed(() => `${duration}s`)
 
 // Border size for ring theme (defaults to 1/8th of the size)
 const computedBorder = $computed(() => {
-	const borderValue = thickness ?? Number.parseInt(computedSize) / 7
+	const borderValue = thickness ?? Math.max(Number.parseInt(computedSize) / 9, 2)
 	return standardSize(borderValue)
 })
 </script>

package/src/components/form/BagelForm.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts" generic="T extends {[key:string]:any}">
-import type { BglFormSchemaFnT, Field } from '@bagelink/vue'
+import type { BglFormSchemaFnT, Field, BglFormSchemaT } from '@bagelink/vue'
 import type { VNode } from 'vue'
-import { onMounted, watch, ref } from 'vue'
+import { Loading } from '@bagelink/vue'
+import { onMounted, watch, ref, toRef, computed } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
 import { getNestedValue } from '../../utils'
 
-export interface BagelFormProps<_T> {
-	modelValue?: _T
-	schema?: BglFormSchemaFnT<_T>
+const props = withDefaults(defineProps<{
+	modelValue?: T
+	schema?: BglFormSchemaFnT<T>
 	tag?: 'form' | 'template'
 	class?: string
-	onSubmit?: (data: _T) => Promise<void> | void
-}
-
-const props = withDefaults(defineProps<BagelFormProps<T>>(), {
+	onSubmit?: (data: T) => Promise<void> | void
+}>(), {
 	modelValue: undefined,
 	schema: undefined,
 	tag: 'form',
@@ -24,131 +23,192 @@ const emit = defineEmits<{
 	(e: 'update:modelValue', value: T): void
 }>()
 
-function safeClone<T>(obj: T): T {
-	if (!obj) return obj
-	try {
-		return JSON.parse(JSON.stringify(obj))
-	} catch (e) {
-		console.warn('Failed to clone object:', e)
-		return obj
-	}
-}
+// Clone helper
+const clone = <T>(obj: T): T => !obj ? obj : JSON.parse(JSON.stringify(obj))
 
+// Form state
 const form = ref<HTMLFormElement>()
-const formData = ref<T>(safeClone(props.modelValue ?? {}) as T)
-const initialFormData = ref<T>(safeClone(props.modelValue ?? {}) as T)
-
-onMounted(() => {
-	if (props.modelValue) {
-		initialFormData.value = safeClone(props.modelValue)
+const formData = ref<T>(clone(props.modelValue ?? {}) as T)
+const initialFormData = ref<T>(clone(props.modelValue ?? {}) as T)
+const formState = ref<'success' | 'error' | 'idle' | 'submitting'>('idle')
+const schemaState = ref<'loading' | 'loaded' | 'error'>('loaded')
+const resolvedSchemaData = ref<BglFormSchemaT<T>>()
+const schemaRef = toRef(props, 'schema')
+const resolvedSchema = computed(() => resolvedSchemaData.value)
+const isDirty = computed(() => {
+	try {
+		return JSON.stringify(formData.value) !== JSON.stringify(initialFormData.value)
+	} catch {
+		return false
 	}
 })
 
-const formState = ref<'success' | 'error' | 'idle' | 'submitting'>('idle')
+// Initialize on mount
+onMounted(() => {
+	if (props.modelValue) initialFormData.value = clone(props.modelValue)
+	refreshSchema()
+})
 
-watch(() => props.modelValue, (newValue) => {
-	if (newValue !== undefined) {
-		formData.value = safeClone(newValue)
-	}
+// Watch for model changes
+watch(() => props.modelValue, (val) => {
+	if (val !== undefined) formData.value = clone(val)
 }, { immediate: true, deep: true })
 
-const resolvedSchema = $computed<BglFormSchemaFnT<T> | undefined>(() => {
-	if (!props.schema) return undefined
-	return typeof props.schema === 'function' ? props.schema() : props.schema
-})
+// Schema resolution
+async function resolveSchema(schema?: BglFormSchemaFnT<T>) {
+	if (!schema) {
+		resolvedSchemaData.value = undefined
+		schemaState.value = 'loaded'
+		return
+	}
 
-const isDirty = $computed(() => {
 	try {
-		const current = JSON.stringify(formData.value)
-		const initial = JSON.stringify(initialFormData.value)
-		return current !== initial
-	} catch (e) {
-		console.warn('Failed to compare form data:', e)
-		return false
+		schemaState.value = 'loading'
+		const isPromise = (obj: any) => obj && typeof obj.then === 'function'
+
+		let result: any
+		if (typeof schema === 'function') {
+			result = schema()
+			result = isPromise(result) ? await result : result
+		} else {
+			result = isPromise(schema) ? await schema : schema
+		}
+
+		resolvedSchemaData.value = result
+		schemaState.value = 'loaded'
+	} catch (error) {
+		console.error('Schema error:', error)
+		schemaState.value = 'error'
+		resolvedSchemaData.value = undefined
 	}
-})
+}
+
+// Public refresh method
+async function refreshSchema() {
+	await resolveSchema(props.schema)
+	return resolvedSchemaData.value
+}
+
+// Watch schema changes
+watch(schemaRef, resolveSchema, { immediate: true, deep: true })
 
+// Update form data
 function updateFormData(fieldId: string, value: any) {
 	const keys = fieldId.split('.')
-	const newData = safeClone(formData.value) as Record<string, any>
+	const newData = clone(formData.value) as Record<string, any>
 	let current = newData
 
-	// Traverse the object, creating nested objects as needed
 	for (let i = 0; i < keys.length - 1; i++) {
 		const key = keys[i]
-		// Initialize as empty object if current[key] is null/undefined or not an object
-		if (!current[key] || typeof current[key] !== 'object') {
-			current[key] = {}
-		}
+		if (!current[key] || typeof current[key] !== 'object') current[key] = {}
 		current = current[key]
 	}
 
-	// Set the value at the final key
 	current[keys[keys.length - 1]] = value
 	formData.value = newData as T
 	emit('update:modelValue', formData.value)
 }
 
+// Form submission
 async function handleSubmit() {
 	try {
 		if (formState.value === 'submitting') return
 		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
-		initialFormData.value = safeClone(formData.value)
+		initialFormData.value = clone(formData.value)
 		formState.value = 'success'
-		// Notify parent window of successful submission
 		window.parent.postMessage({ type: 'BAGEL_FORM_SUCCESS', data: JSON.stringify(formData.value) }, '*')
 	} catch (error) {
-		console.error('Form submission error:', error)
+		console.error('Submit error:', error)
 		formState.value = 'error'
 	}
 }
 
-function validateForm() {
-	if (!form.value) return false
-	return form.value.reportValidity()
-}
+// Form validation
+const validateForm = () => form.value?.reportValidity() ?? false
 
+// Field rendering
 const { renderField } = useSchemaField<T>({
 	mode: 'form',
-	getRowData: () => {
-		return {
-			...formData.value,
-			// Add a special getter to handle nested paths
-			get: (path: string) => getNestedValue(formData.value, path, '')
-		}
-	},
+	getRowData: () => ({
+		...formData.value,
+		get: (path: string) => getNestedValue(formData.value, path, '')
+	}),
 	onUpdate: (field, value) => {
-		if (!field.id) return
-		updateFormData(field.id, value)
-		field.onUpdate?.(value, formData.value)
+		if (field.id) {
+			updateFormData(field.id, value)
+			field.onUpdate?.(value, formData.value)
+		}
 	}
 })
 
-function renderSchemaField(field: Field): VNode | null {
-	return renderField(field)
-}
+const renderSchemaField = (field: Field<T>): VNode | null => renderField(field)
 
-defineExpose({ form, isDirty, validateForm })
+defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
 </script>
 
 <template>
 	<template v-if="formState !== 'success' || !$slots.success">
 		<form v-if="props.tag === 'form'" ref="form" :class="props.class" @submit.prevent="handleSubmit">
-			<template v-if="resolvedSchema">
-				<template v-for="field in (resolvedSchema as Field[])" :key="field.id">
-					<component :is="renderSchemaField(field)" />
-				</template>
-			</template>
+			<!-- Loading state -->
+			<slot v-if="schemaState === 'loading'" name="loading">
+				<div class="flex-center h-300px">
+					<Loading />
+				</div>
+			</slot>
+
+			<!-- Error state -->
+			<slot v-else-if="schemaState === 'error'" name="schema-error">
+				<div class="flex-center h-300px txt-red">
+					Error loading form
+				</div>
+			</slot>
+
+			<!-- Render fields -->
+			<component
+				:is="renderSchemaField(field)"
+				v-for="field in resolvedSchema"
+				v-else-if="resolvedSchema"
+				:key="field.id"
+			/>
+
+			<!-- Default slot -->
 			<slot v-else />
-			<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" :formState="formState" />
+
+			<!-- Submit slot -->
+			<slot
+				name="submit"
+				:submit="handleSubmit"
+				:isDirty="isDirty"
+				:validateForm="validateForm"
+				:formState="formState"
+				:schemaState="schemaState"
+			/>
 		</form>
+
+		<!-- Template mode -->
 		<template v-else>
-			<template v-for="field in (resolvedSchema as Field[])" :key="field.id">
-				<component :is="renderSchemaField(field)" :class="props.class" />
-			</template>
+			<slot v-if="schemaState === 'loading'" name="loading">
+				<Loading />
+			</slot>
+
+			<slot v-else-if="schemaState === 'error'" name="schema-error">
+				<div class="flex-center h-300px txt-red">
+					Error loading form
+				</div>
+			</slot>
+
+			<component
+				:is="renderSchemaField(field)"
+				v-for="field in resolvedSchema"
+				v-else-if="resolvedSchema"
+				:key="field.id"
+				:class="props.class"
+			/>
 		</template>
 	</template>
+
+	<!-- Success/error slots -->
 	<slot v-if="formState === 'success'" name="success" />
 	<slot v-if="formState === 'error'" name="error" />
 </template>