@bagelink/vue 1.2.81 → 1.2.83

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']

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 {
-		if (typeof child === 'string') return child
+	function renderChild(child: SchemaChild<T, SP>, slots?: BaseBagelField<T, SP>['slots']) {
+		if (typeof child === 'string') return h(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

package/src/types/BagelForm.ts

@@ -1,6 +1,6 @@
 import type { SelectInput, TextInput } from '@bagelink/vue'
 import type { Paths, Get, IterableElement, LiteralUnion } from 'type-fest'
-import type { VNode } from 'vue'
+import type { SetupContext, VNode } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 export type ToString<T> = T extends string | number ? `${T}` : never
@@ -65,21 +65,23 @@ export type FieldVal<T, P extends Path<T>> = Get<T, P>
 /** If path P in T is an array, this gives the array's element type. */
 export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>
 
-export type SchemaChildrenT<T> = (Field<T> | string | VNode)[]
+export type VNodeFn<T, P extends Path<T>> = (props: { row?: T, field: BaseBagelField<T, P> }) => VNode
+
+export type SchemaChild<T, P extends Path<T>> = Field<T> | VNode | VNodeFn<T, P> | string
 
 export interface BaseBagelField<T, P extends Path<T>> {
 	'$el'?: any
 	'id'?: P
 	'label'?: string
 	'placeholder'?: string
-	'children'?: SchemaChildrenT<T>
 	'class'?: AttributeValue | AttributeFn<T, P>
 	'attrs'?: Attributes<T, P>
 	'required'?: boolean
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T>
-	'slots'?: { [key: string]: Field<T>[] }
+	'children'?: SchemaChild<T, P>[]
+	'slots'?: { [key: string]: SchemaChild<T, P>[] } | SetupContext['slots']
 	'defaultValue'?: any
 	'vIf'?: VIfType<T, P>
 	'v-if'?: VIfType<T, P>
@@ -92,22 +94,28 @@ export type MappedBaseBagelField<T> = {
 	[P in Path<T>]: BaseBagelField<T, P>
 }[Path<T>]
 
-export type InputBagelField<T> = MappedBaseBagelField<T> & {
-	$el: 'text' | ComponentExposed<typeof TextInput>
-	type?: string
-}
-
-export type SelectBagelField<T> = MappedBaseBagelField<T> & {
-	$el: 'select' | ComponentExposed<typeof SelectInput>
-}
-
 export type Field<T> = MappedBaseBagelField<T>
 
 export type BglFieldT<T> = Field<T>
 
 export type BglFormSchemaT<T> = Field<T>[]
 
-export type BglFormSchemaFnT<T> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>
+export type InputBagelField<T> = Field<T> & {
+	$el: 'text' | ComponentExposed<typeof TextInput>
+	type?: string
+}
+// export interface InputBagelField<T> extends BaseBagelField<T, Path<T>> {
+// 	$el: 'text' | ComponentExposed<typeof TextInput>
+// 	type?: string
+// }
+
+export type SelectBagelField<T> = Field<T> & {
+	$el: 'select' | ComponentExposed<typeof SelectInput>
+}
+// export interface SelectBagelField<T> extends BaseBagelField<T, Path<T>> {
+// 	$el: 'select' | ComponentExposed<typeof SelectInput>
+// 	type?: string
+// }
 
 export interface ValidateInputBaseT {
 	validate?: ValidationFn<{ [key: string]: unknown }, string>

package/src/types/TableSchema.ts

@@ -1,19 +1,19 @@
 import type { BglFormSchemaT } from '@bagelink/vue'
-import type { Ref, ComputedRef } from 'vue'
+import type { MaybeRefOrGetter, ComputedRef } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
 
 export interface TableSchemaProps<T extends { [key: string]: any } = { [key: string]: any }> {
 	data: T[]
-	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	columns?: string[]
-	useServerSort?: boolean
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	columns?: MaybeRefOrGetter<string[]>
+	useServerSort?: MaybeRefOrGetter<boolean>
 	selectable?: boolean
 	onLastItemVisible?: () => void
 }
 
-export interface SortingOptions<T> {
+export interface SortingOptions {
 	onSort: (field: string, direction: SortDirectionsT) => void
 }
 
@@ -24,15 +24,15 @@ export interface TableSelectionOptions<T> {
 }
 
 export interface TableVirtualizationOptions<T> {
-	data: Ref<T[]> | ComputedRef<T[]>
+	data: ComputedRef<T[]>
 	itemHeight: number
 	onLastItemVisible?: () => void
 }
 
 export interface TableDataOptions<T> {
-	data: Ref<T[]> | ComputedRef<T[]>
-	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>) | Promise<BglFormSchemaT<T>> | Promise<() => BglFormSchemaT<T>>
-	columns?: string[]
+	data: MaybeRefOrGetter<T[]>
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	columns?: MaybeRefOrGetter<string[]>
 	sortField: string
 	sortDirection: SortDirectionsT
 	useServerSort?: boolean

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SelectBagelField } from '@bagelink/vue'
+import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField } from '@bagelink/vue'
 import type { UploadInputProps } from '../components/form/inputs/Upload/upload.types'
 
 interface InputOptions<T, P extends Path<T>> extends Partial<BaseBagelField<T, P>> {
@@ -231,7 +231,7 @@ export function numField<T, P extends Path<T>>(
 }
 
 // export function frmRow<T, P extends Path<T>>(...children: SchemaChildrenT<T>): BaseBagelField<T, P> {
-export function frmRow<T>(...children: Field<T>[]): Field<T> {
+export function frmRow<T>(...children: SchemaChild<T, Path<T>>[]): Field<T> {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
@@ -239,7 +239,8 @@ export function frmRow<T>(...children: Field<T>[]): Field<T> {
 	}
 }
 
-export type UploadOptions<T, K extends Path<T>> = InputOptions<T, K> & UploadInputProps
+// export type UploadOptions<T, K extends Path<T>> = InputOptions<T, K> & UploadInputProps
+export interface UploadOptions<T, K extends Path<T>> extends InputOptions<T, K>, UploadInputProps {}
 
 export function uploadField<T, P extends Path<T>>(id: P, label?: string, options?: UploadOptions<T, P>): BaseBagelField<T, P> {
 	return {

package/src/utils/{search.ts → useSearch.ts}

@@ -112,7 +112,7 @@ export interface SearchItemParams<T> {
 }
 
 export interface SearchResult<T> {
-	results: ComputedRef<readonly T[]>
+	results: ComputedRef<T[]>
 	resultCount: ComputedRef<number>
 	hasResults: ComputedRef<boolean>
 	isSearching: ComputedRef<boolean>
@@ -378,7 +378,6 @@ export function useSearch<T>(
 		// Otherwise use client-side filtering
 		return searchItems(params)
 	}
-
 	// Create computed references
 	const results = computed(() => getFilteredResults())
 	const resultCount = computed(() => results.value.length)