@bagelink/vue 1.0.38 → 1.0.43

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>

package/src/components/form/FieldArray.vue

@@ -5,11 +5,10 @@ import type {
 	Attributes,
 	BagelFieldOptions,
 	BglFormSchemaFnT,
-	BglFormSchemaT,
 	Field,
 } from '@bagelink/vue'
-import { BagelForm, Btn } from '@bagelink/vue'
-import { useSchemaField } from '../../composables/useSchemaField'
+import { BagelForm, Btn, Loading } from '@bagelink/vue'
+import { ref, onMounted } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -40,61 +39,82 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const minimizedItems = $ref<boolean[]>([])
+// State
+const minimizedItems = ref<boolean[]>([])
+const internalData = ref<any[]>(props.modelValue || [])
+const schemaState = ref<'loading' | 'loaded' | 'error'>('loaded')
+const resolvedSchemaData = ref<any[]>([])
+
+// Resolve schema (handles sync, async, function, and direct values)
+async function resolveSchema() {
+	if (!props.schema) {
+		resolvedSchemaData.value = []
+		schemaState.value = 'loaded'
+		return
+	}
 
-const data = $ref<T[]>(props.modelValue || [])
+	try {
+		schemaState.value = 'loading'
+		const isPromise = (obj: any) => obj && typeof obj.then === 'function'
+
+		let result: any
+		if (typeof props.schema === 'function') {
+			result = props.schema()
+			result = isPromise(result) ? await result : result
+		} else {
+			result = isPromise(props.schema) ? await props.schema : props.schema
+		}
+
+		resolvedSchemaData.value = result
+		schemaState.value = 'loaded'
+	} catch (error) {
+		console.error('Schema error:', error)
+		schemaState.value = 'error'
+		resolvedSchemaData.value = []
+	}
+}
+
+// Initialize schema on mount
+onMounted(() => {
+	resolveSchema()
+})
 
+// Event handlers
 function emitValue() {
-	emit('update:modelValue', data)
+	emit('update:modelValue', internalData.value)
 }
 
 function deleteItem(i: number) {
-	data.splice(i, 1)
+	internalData.value.splice(i, 1)
 	emitValue()
 }
 
 function addItem() {
-	data.push({} as any)
+	internalData.value.push({})
 	emitValue()
 }
 
 function toggleMinimized(index: number) {
-	minimizedItems[index] = !minimizedItems[index]
+	minimizedItems.value[index] = !minimizedItems.value[index]
 }
 
-const computedField = $computed(
-	() => ({
-		label: props.label,
-		placeholder: props.placeholder,
-		children: props.children,
-		// class: props.class,
-		attrs: props.attrs,
-		required: props.required,
-		disabled: props.disabled,
-		helptext: props.helptext,
-		options: props.options,
-		defaultValue: props.defaultValue,
-		transform: props.transform,
-		$el: props.el,
-	}) as Field<T>
-) as Field<Record<string, any>>
-
-const resolvedSchema = $computed<BglFormSchemaT<T>>(() => {
-	if (!props.schema) return [] as BglFormSchemaT<T>
-	return typeof props.schema === 'function' ? props.schema() : props.schema
-})
+function updateItem(index: number, value: any) {
+	internalData.value[index] = value
+	emitValue()
+}
 
-const { renderField } = useSchemaField<Record<string, any>>({
-	mode: 'form',
-	getRowData: () => data,
-	onUpdate: (field, value) => {
-		if (!field.id) return
-		const index = Number.parseInt(field.id)
-		if (Number.isNaN(index)) return
-		data[index] = value
-		emitValue()
-	}
-})
+// // Field rendering
+// const { renderField } = useSchemaField<any>({
+// 	mode: 'form',
+// 	getRowData: () => internalData.value,
+// 	onUpdate: (field, value) => {
+// 		if (!field.id) return
+// 		const index = Number.parseInt(field.id)
+// 		if (Number.isNaN(index)) return
+// 		internalData.value[index] = value
+// 		emitValue()
+// 	}
+// })
 </script>
 
 <template>
@@ -102,45 +122,60 @@ const { renderField } = useSchemaField<Record<string, any>>({
 		<p class="label mb-05">
 			{{ label }}
 		</p>
-		<div v-if="resolvedSchema" class="ps-025 border-start mb-05">
-			<div
-				v-for="(_, i) in data" :key="i" outline thin
-				class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden"
-				:class="{ minimized: minimizedItems[i] }"
-			>
-				<p v-if="minimizedItems[i]" class="minimizedText txt14 p-025 opacity-7">
-					{{ label }} {{ i + 1 }}
-				</p>
-				<BagelForm v-else v-model="data[i]" :schema="resolvedSchema" @update:model-value="emitValue" />
-				<div class="bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column">
-					<Btn
-						v-if="resolvedSchema.length > 4"
-						class="block rotate-180 txt10 opacity-7 p-025"
-						flat thin icon="keyboard_arrow_down"
-						@click="toggleMinimized(i)"
-					/>
-					<Btn
-						v-if="props.delete"
-						icon="delete"
-						class="txt10 opacity-7"
-						thin
-						flat
-						@click="deleteItem(i)"
+		<div v-if="resolvedSchemaData.length > 0" class="ps-025 border-start mb-05">
+			<!-- Loading state -->
+			<div v-if="schemaState === 'loading'" class="flex-center h-300px">
+				<Loading />
+			</div>
+
+			<!-- Error state -->
+			<div v-else-if="schemaState === 'error'" class="flex-center h-300px txt-red">
+				Error
+			</div>
+
+			<!-- Render items -->
+			<template v-else>
+				<div
+					v-for="(item, i) in internalData" :key="i" outline thin
+					class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden"
+					:class="{ minimized: minimizedItems[i] }"
+				>
+					<p v-if="minimizedItems[i]" class="minimizedText txt14 p-025 opacity-7">
+						{{ label }} {{ i + 1 }}
+					</p>
+					<BagelForm
+						v-else
+						:model-value="item"
+						:schema="resolvedSchemaData"
+						@update:model-value="val => updateItem(i, val)"
 					/>
+					<div class="bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column">
+						<Btn
+							v-if="resolvedSchemaData.length > 4"
+							class="block rotate-180 txt10 opacity-7 p-025"
+							flat thin icon="keyboard_arrow_down"
+							@click="toggleMinimized(i)"
+						/>
+						<Btn
+							v-if="props.delete"
+							icon="delete"
+							class="txt10 opacity-7"
+							thin
+							flat
+							@click="deleteItem(i)"
+						/>
+					</div>
 				</div>
-			</div>
-			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
-				<p>{{ label }}</p>
-			</Btn>
+				<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
+					<p>{{ label }}</p>
+				</Btn>
+			</template>
 		</div>
 
 		<template v-else>
-			<component
-				:is="renderField({ ...computedField, id: String(i) })"
-				v-for="(_, i) in data"
-				:key="i"
-				@update:model-value="emitValue"
-			/>
+			<div v-for="(_, i) in internalData" :key="i">
+				<p>No schema available</p>
+			</div>
 		</template>
 	</div>
 </template>

package/src/composables/index.ts

@@ -10,13 +10,23 @@ interface useBglSchemaParamsT<T> {
 	data?: any[]
 }
 
-export function useBglSchema<T = { [key: string]: unknown }>(
+export async function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, columns, data }: useBglSchemaParamsT<T> = {}
-): BglFormSchemaT<T> {
+): Promise<BglFormSchemaT<T>> {
 	let _schema = schema
+
+	// Handle async schema functions
 	if (typeof _schema === 'function') {
-		_schema = _schema()
+		const result = _schema()
+		if (result instanceof Promise) {
+			_schema = await result
+		} else {
+			_schema = result
+		}
+	} else if (_schema instanceof Promise) {
+		_schema = await _schema
 	}
+
 	if (_schema) {
 		return (
 			columns && columns.length > 0
@@ -41,7 +51,7 @@ export function localRef<T>(
 		localStorage.setItem(key, JSON.stringify(val))
 	}, { immediate: true, deep: true })
 
-	return value
+	return value as any
 }
 
 export const useLocalStorage = localRef

package/src/types/BagelForm.ts

@@ -73,4 +73,4 @@ export type BglFieldT<T = { [key: string]: any }> = Field<T>
 
 export type BglFormSchemaT<T = { [key: string]: any }> = Field<T>[]
 
-export type BglFormSchemaFnT<T = { [key: string]: any }> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>
+export type BglFormSchemaFnT<T = { [key: string]: any }> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T> | (() => Promise<BglFormSchemaT<T>>) | Promise<BglFormSchemaT<T>>