@bagelink/vue 1.2.81 → 1.2.85

package/src/components/form/BagelForm.vue

@@ -1,14 +1,13 @@
-<script setup lang="ts" generic="T extends {[key:string]:any}, P">
-import type { BglFormSchemaFnT, Field, BglFormSchemaT } from '@bagelink/vue'
-import type { VNode } from 'vue'
-import { Loading } from '@bagelink/vue'
-import { onMounted, watch, ref, toRef, computed } from 'vue'
+<script setup lang="ts" generic="T extends {[key:string]:any}, P extends Path<T>">
+import type { Field, BglFormSchemaT, Path, BaseBagelField } from '@bagelink/vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { onMounted, watch, ref, computed, toValue } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
 import { getNestedValue } from '../../utils'
 
 const props = withDefaults(defineProps<{
 	modelValue?: T
-	schema?: BglFormSchemaFnT<T>
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	tag?: 'form' | 'template'
 	class?: string
 	onSubmit?: (data: T) => Promise<unknown> | unknown
@@ -31,10 +30,8 @@ const form = ref<HTMLFormElement>()
 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 resolvedSchema = computed(() => toValue(props.schema))
+
 const isDirty = computed(() => {
 	try {
 		return JSON.stringify(formData.value) !== JSON.stringify(initialFormData.value)
@@ -46,7 +43,6 @@ const isDirty = computed(() => {
 // Initialize on mount
 onMounted(() => {
 	if (props.modelValue) initialFormData.value = clone(props.modelValue)
-	refreshSchema()
 })
 
 // Watch for model changes
@@ -54,47 +50,9 @@ watch(() => props.modelValue, (val) => {
 	if (val !== undefined) formData.value = clone(val)
 }, { immediate: true, deep: true })
 
-// Schema resolution
-async function resolveSchema(schema?: BglFormSchemaFnT<T>) {
-	if (!schema) {
-		resolvedSchemaData.value = undefined
-		schemaState.value = 'loaded'
-		return
-	}
-
-	try {
-		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('.')
+function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
+	const keys = fieldId?.split('.') || []
 	const newData = clone(formData.value) as { [key: string]: any }
 	let current = newData
 
@@ -131,7 +89,7 @@ async function handleSubmit() {
 	}
 }
 
-// Field rendering
+// Field renderingks
 const { renderField } = useSchemaField<T, P>({
 	mode: 'form',
 	getFormData: () => ({
@@ -141,23 +99,23 @@ const { renderField } = useSchemaField<T, P>({
 	onUpdateModelValue: (field, value) => {
 		if (!field.id) return
 
-		updateFormData(field.id, value)
+		updateFormData({ fieldId: field.id, value })
 		field.onUpdate?.(value, formData.value)
 	}
 })
 
-const renderSchemaField = (field: Field<T>): VNode | null => renderField(field)
+const renderSchemaField = (field: Field<T>) => renderField(field as BaseBagelField<T, P>)
 
 // Add new method to handle slot input changes
 function handleSlotInputChange(event: Event) {
 	const input = event.target as HTMLInputElement
 	if (input.name) {
 		const value = input.type === 'checkbox' ? input.checked : input.value
-		updateFormData(input.name, value)
+		updateFormData({ fieldId: input.name, value })
 	}
 }
 
-defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkValidity })
+defineExpose({ form, isDirty, validateForm, checkValidity })
 </script>
 
 <template>
@@ -168,27 +126,14 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkV
 			@submit.prevent="handleSubmit"
 			@input="handleSlotInputChange"
 		>
-			<!-- 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"
-			/>
+			<template v-if="resolvedSchema">
+				<Component
+					:is="renderSchemaField(field)"
+					v-for="field in resolvedSchema"
+					:key="field.id"
+				/>
+			</template>
 
 			<!-- Default slot -->
 			<slot v-else />
@@ -196,32 +141,22 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkV
 			<slot
 				name="submit"
 				:submit="handleSubmit"
-				:isDirty="isDirty"
-				:validateForm="validateForm"
-				:formState="formState"
-				:schemaState="schemaState"
+				:isDirty
+				:validateForm
+				:formState
 			/>
 		</form>
 
 		<!-- Template mode -->
 		<template v-else>
-			<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 v-if="resolvedSchema">
+				<component
+					:is="renderSchemaField(field)"
+					v-for="field in resolvedSchema"
+					:key="field.id"
+					:class="props.class"
+				/>
+			</template>
 		</template>
 	</template>
 

package/src/components/form/BglMultiStepForm.vue

@@ -1,9 +1,10 @@
-<script setup lang="ts" generic="T extends {[key:string]:any}, P">
-import type { BglFormSchemaFnT } from '@bagelink/vue'
+<script setup lang="ts" generic="T extends {[key:string]:any}, P extends Path<T>">
+import type { BglFormSchemaT, Path } from '@bagelink/vue'
 
+import type { MaybeRefOrGetter } from 'vue'
 import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers'
 import { BagelForm, Btn, useBglSchema, sleep } from '@bagelink/vue'
-import { ref, watch, computed, nextTick } from 'vue'
+import { ref, watch, computed, nextTick, toValue } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -13,7 +14,7 @@ const props = withDefaults(
 			'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
 			)
 		>
-		schema?: BglFormSchemaFnT<T>
+		schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 		showProgress?: boolean
 		rtl?: boolean
 		stepLabels?: string[]
@@ -59,13 +60,13 @@ function reportValidity() {
 }
 
 const computedSchema = computed(
-	() => useBglSchema({ schema: props.schema })
+	() => useBglSchema({ schema: toValue(props.schema) })
 )
 
 // Filter out steps with vIf conditions that evaluate to false
 const filteredSchema = computed(() => {
 	const schema = computedSchema.value
-	return schema.filter((step, index) => {
+	return schema.filter((step, _index) => {
 		// Skip steps that have vIf or v-if returning false
 		if (step.vIf !== undefined || step['v-if'] !== undefined) {
 			const condition = step.vIf ?? step['v-if']
@@ -220,8 +221,9 @@ defineExpose({
 	checkValidity: formRef.value?.checkValidity,
 	isDirty: computed(() => formRef.value?.isDirty),
 	reset,
+	isLastStep,
 	goToStep,
-	currentStep: computed(() => currentStep.value),
+	currentStep,
 	totalSteps: computed(() => numberOfSteps.value),
 	isStepValid,
 	nextStep,

package/src/components/form/FieldArray.vue

@@ -5,12 +5,13 @@ import type {
 	Attributes,
 	BagelFieldOptions,
 	BaseBagelField,
-	BglFormSchemaFnT,
+	BglFormSchemaT,
 	Field,
 	Path
 } from '@bagelink/vue'
+import type { MaybeRefOrGetter } from 'vue'
 import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, computed, watch, toValue } from 'vue'
 
 export interface FieldArrayProps<T, P extends Path<T>> {
 	el?: any
@@ -28,7 +29,7 @@ export interface FieldArrayProps<T, P extends Path<T>> {
 	add?: boolean
 	delete?: boolean
 	transform?: (value: T) => T
-	schema?: BglFormSchemaFnT<T>
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	modelValue: T[]
 	type?: 'object' | 'number' | 'text'
 }
@@ -53,12 +54,6 @@ const emit = defineEmits(['update:modelValue'])
 const minimizedItems = ref<boolean[]>([])
 const internalData = ref<any[]>(props.modelValue || [])
 const schemaState = ref<'loading' | 'loaded' | 'error'>('loaded')
-const resolvedSchemaData = ref<any[]>([])
-
-// Watch for external changes to modelValue
-watch(() => props.modelValue, (newValue) => {
-	internalData.value = newValue || []
-}, { deep: true })
 
 // Generate schema for primitive types
 const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
@@ -70,46 +65,57 @@ const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
 	return []
 })
 
+const resolvedSchemaData = $computed(() => {
+	if (props.type !== 'object') return primitiveSchema.value as BglFormSchemaT<T>
+
+	return toValue(props.schema)
+})
+
+// Watch for external changes to modelValue
+watch(() => props.modelValue, (newValue) => {
+	internalData.value = newValue || []
+}, { deep: true })
+
 // Resolve schema
-async function resolveSchema() {
-	// For primitive types, use the predefined schemaks
-	if (props.type !== 'object') {
-		resolvedSchemaData.value = primitiveSchema.value
-		schemaState.value = 'loaded'
-		return
-	}
+// async function resolveSchema() {
+// 	// For primitive types, use the predefined schemaks
+// 	if (props.type !== 'object') {
+// 		resolvedSchemaData.value = primitiveSchema.value
+// 		schemaState.value = 'loaded'
+// 		return
+// 	}
 
-	// For object type without schema
-	if (!props.schema) {
-		resolvedSchemaData.value = []
-		schemaState.value = 'loaded'
-		return
-	}
+// 	// For object type without schema
+// 	if (!props.schema) {
+// 		resolvedSchemaData.value = []
+// 		schemaState.value = 'loaded'
+// 		return
+// 	}
 
-	// For object type with schema
-	try {
-		schemaState.value = 'loading'
-		const isPromise = (obj: any) => obj && typeof obj.then === 'function'
+// 	// For object type with schema
+// 	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
-		}
+// 		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 = []
-	}
-}
+// 		resolvedSchemaData.value = result
+// 		schemaState.value = 'loaded'
+// 	} catch (error) {
+// 		console.error('Schema error:', error)
+// 		schemaState.value = 'error'
+// 		resolvedSchemaData.value = []
+// 	}
+// }
 
-// Initialize schema on mount
-onMounted(resolveSchema)
+// // Initialize schema on mount
+// onMounted(resolveSchema)
 
 // Event handlers
 function emitValue() {
@@ -148,10 +154,13 @@ function updateItem(index: number, value: any) {
 
 // Computed properties for rendering
 const isPrimitiveType = computed(() => props.type === 'text' || props.type === 'number')
-const canRenderItems = computed(() => isPrimitiveType.value || (props.type === 'object' && resolvedSchemaData.value.length > 0)
+const canRenderItems = computed(
+	() => isPrimitiveType.value || (
+		props.type === 'object' && Number(resolvedSchemaData?.length) > 0
+	)
 )
 const showMinimizeButton = computed(() => {
-	return resolvedSchemaData.value.length > 2 || resolvedSchemaData.value.some(schema => schema.$el === 'richtext')
+	return Number(resolvedSchemaData?.length) > 2 || resolvedSchemaData?.some(schema => schema.$el === 'richtext')
 })
 </script>
 

package/src/components/form/inputs/RichText/index.vue

@@ -147,7 +147,7 @@ watch(() => props.modelValue, (newValue, oldValue) => {
 })
 
 watch(() => editor.state.content, (newValue) => {
-	if (editor.state.doc?.body.innerHTML) {
+	if (editor.state.doc?.body) {
 		editor.state.doc.body.dir = hasRTL ? 'rtl' : 'ltr'
 	}
 	emit('update:modelValue', newValue)

package/src/composables/index.ts

@@ -1,33 +1,32 @@
-import type { BglFormSchemaFnT, BglFormSchemaT, IfAny } from '@bagelink/vue'
+import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
 
-import type { Ref, UnwrapRef } from 'vue'
+import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
-import { ref, watch } from 'vue'
+import { ref, toValue, watch } from 'vue'
 
 export { useDevice } from './useDevice'
 export { usePolling } from './usePolling'
 export { useValidateFieldValue } from './useValidateFieldValue'
 interface UseBglSchemaParamsT<T> {
-	schema?: BglFormSchemaFnT<T>
-	columns?: string[]
-	data?: any[]
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	columns?: MaybeRefOrGetter<string[]>
+	data?: T[]
 }
 
 export function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, columns, data }: UseBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
-	let _schema = schema
-	if (typeof _schema === 'function') {
-		_schema = _schema()
-	}
+	const _schema = $computed(() => toValue(schema))
+	const _columns = $computed(() => toValue(columns))
+
 	if (_schema) {
 		return (
-			columns && columns.length > 0
-				? _schema.filter(f => columns.includes(f.id as string))
+			_columns && _columns.length > 0
+				? _schema.filter(f => _columns.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>
 	}
-	return getFallbackSchema(data, columns)
+	return getFallbackSchema(data, _columns)
 }
 
 export function localRef<T>(

package/src/composables/useSchemaField.ts

@@ -1,5 +1,6 @@
 import type { VNode } from 'vue'
-import type { Field, BglFormSchemaT, SchemaChildrenT, Attributes, Path } from '../types/BagelForm'
+
+import type { Field, Attributes, Path, SchemaChild, BaseBagelField, VNodeFn } from '../types/BagelForm'
 import {
 	TextInput,
 	NumberInput,
@@ -20,26 +21,20 @@ import {
 	RangeInput,
 	EmailInput
 } from '@bagelink/vue'
-
 import { h, isVNode } from 'vue'
 
 const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
 
 const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
 
-export interface UseSchemaFieldOptions<T> {
+export interface UseSchemaFieldOptions<T, SFP extends Path<T>> {
 	mode?: 'form' | 'preview' | 'table'
 	getFormData?: () => T
-	onUpdateModelValue?: (field: Field<T>, value: any) => void
+	onUpdateModelValue?: (field: BaseBagelField<T, SFP>, value: any) => void
 	includeUnset?: boolean
 }
 
-// Add type for supported child types
-interface SlotProps<T> { row?: T, field: Field<T> }
-type SlotFunction<T> = (props: SlotProps<T>) => any
-type SupportedSlot<T> = BglFormSchemaT<T> | VNode | SlotFunction<T>
-
-export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseSchemaFieldOptions<T>) {
+export function useSchemaField<T extends { [key: string]: any }, SP extends Path<T>>(optns: UseSchemaFieldOptions<T, SP>) {
 	const { mode = 'form', getFormData, onUpdateModelValue, includeUnset = false } = optns
 
 	// Helper function to render objects recursively
@@ -101,21 +96,21 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 	}
 
-	function renderChild(child: SchemaChildrenT<T>[number], slots?: Record<string, SupportedSlot<T>>): any {
+	function renderChild(child: SchemaChild<T, SP>, slots?: BaseBagelField<T, SP>['slots']) {
 		if (typeof child === 'string') return child
 		if (isVNode(child)) return child
 		return renderField(
-			child,
+			child as BaseBagelField<T, SP>,
 			slots
 		)
 	}
 
 	function renderField(
-		field: Field<T>,
-		slots?: Record<string, SupportedSlot<T>>
-	): VNode | null {
-		const Component = getComponent(field)
-		if (!Component) return null
+		field: BaseBagelField<T, SP>,
+		slots?: BaseBagelField<T, SP>['slots']
+	): VNode | undefined {
+		const Component = getComponent(field as Field<T>)
+		if (!Component) return
 
 		const rowData = (getFormData?.() || {}) as T | undefined
 
@@ -129,14 +124,14 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 						rowData
 					)
 				) {
-					return null
+					return
 				}
 			} else if (typeof condition === 'string') {
 				if (!rowData?.[condition]) {
-					return null
+					return
 				}
 			} else if (!condition) {
-				return null
+				return
 			}
 		}
 
@@ -234,7 +229,8 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 		props.class = classify(currentValue, rowData, fieldClass, props.class)
 
 		// Handle component slots with vIf aware child rendering
-		const componentSlots: { [key: string]: any } = {}
+		// const componentSlots: { [name: string]: Slot } = {}
+		const componentSlots: Parameters<typeof h>[1] = {}
 
 		// Add default slot if there are children
 		if (children?.length) {
@@ -254,29 +250,35 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 				componentSlots[name] = () => {
 					if (Array.isArray(slot)) {
 						// Handle BglFormSchemaT array
-						return slot.map(schemaField => renderField(schemaField, slots))
-					} if (isVNode(slot)) {
-						// Handle VNode
-						return slot
-					} if (typeof slot === 'function') {
-						// Handle function slot
-						const slotFn = slot as (props: SlotProps<T>) => any
-						return slotFn({ row: rowData, field })
+						return slot.map((schemaField) => {
+							if (typeof schemaField === 'function') {
+								// Handle function slot
+								const slotFn = schemaField
+								return slotFn({ row: rowData, field })
+							}
+							if (isVNode(schemaField)) {
+								// Handle VNode
+								return schemaField
+							}
+
+							return renderField(schemaField as BaseBagelField<T, SP>, slots)
+						})
 					}
-					return slot
 				}
 			})
 		}
 
 		// Handle custom slot content from parent
-		const slotContent = field.id && slots?.[field.id]
-			? (slots[field.id] as SlotFunction<T>)({ row: rowData, field })
-			: undefined
+
+		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, SP> | 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
 
 		if (mode === 'preview') {
 			// Skip rendering if value is unset and includeUnset is false
 			if (!includeUnset && (transformedValue === undefined || transformedValue === null || transformedValue.length === 0)) {
-				return null
+				return
 			}
 
 			return h('div', { class: 'preview-field' }, [

package/src/index.ts

@@ -17,4 +17,4 @@ export * from './utils/calendar/dateUtils'
 import './styles/bagel.css'
 
 export * from './utils/constants'
-export * from './utils/search'
+export * from './utils/useSearch'

package/src/plugins/modalTypes.ts

@@ -1,4 +1,5 @@
-import type { BglFormSchemaFnT, BtnOptions, ThemeType } from '@bagelink/vue'
+import type { BglFormSchemaT, BtnOptions, ThemeType } from '@bagelink/vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 export interface ModalOptions {
 	title?: string
@@ -37,7 +38,7 @@ export interface ModalFormComponentProps<T extends { [key: string]: any }> exten
 }
 
 export interface ModalFormOptions<T extends { [key: string]: any }> {
-	'schema': BglFormSchemaFnT<T>
+	'schema': MaybeRefOrGetter<BglFormSchemaT<T>>
 	'modelValue'?: T
 	'onUpdate:modelValue'?: (val: T) => void
 	'onSubmit'?: (formData: T) => any