@bagelink/vue 1.2.79 → 1.2.83

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
 
@@ -111,6 +69,7 @@ function updateFormData(fieldId: string, value: any) {
 
 // Form validation
 const validateForm = () => form.value?.reportValidity() ?? false
+const checkValidity = () => form.value?.checkValidity() ?? false
 const formError = ref<Error>()
 // Form submission
 async function handleSubmit() {
@@ -130,7 +89,7 @@ async function handleSubmit() {
 	}
 }
 
-// Field rendering
+// Field renderingks
 const { renderField } = useSchemaField<T, P>({
 	mode: 'form',
 	getFormData: () => ({
@@ -140,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 })
+defineExpose({ form, isDirty, validateForm, checkValidity })
 </script>
 
 <template>
@@ -167,27 +126,14 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
 			@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 />
@@ -195,32 +141,22 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
 			<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 } from '@bagelink/vue'
-import { ref, watch, computed } from 'vue'
+import { BagelForm, Btn, useBglSchema, sleep } from '@bagelink/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']
@@ -119,9 +120,6 @@ const currentStepSchema = computed(() => {
 	return [computedSchema.value[actualIndex]]
 })
 
-const isStepping = ref(false)
-let isSteppingTO: NodeJS.Timeout
-
 // Tracks which way we're sliding (left or right)
 const slideDirection = ref(props.rtl ? 'right' : 'left')
 
@@ -138,9 +136,7 @@ watch(
 		}
 
 		previousStep.value = oldStep
-		clearTimeout(isSteppingTO)
-		isStepping.value = true
-		isSteppingTO = setTimeout(() => (isStepping.value = false), 200)
+		// We don't need isStepping flag anymore
 		emits('stepChange', {
 			newStep,
 			oldStep,
@@ -150,19 +146,32 @@ watch(
 	}
 )
 
-const canDoNext = computed(() => currentStep.value < numberOfSteps.value - 1)
+const isLastStep = computed(() => currentStep.value === numberOfSteps.value - 1)
 
 const isStepValidated = computed(() => (stepIndex: number) => validatedSteps.value.includes(stepIndex))
 
+// Add a computed property to check if current step is valid
+const isStepValid = ref(false)
+
+async function checkCurrentStepValidity() {
+	await nextTick()
+	if (!props.validateOnSteps) isStepValid.value = true
+	else isStepValid.value = formRef.value?.checkValidity() ?? false
+}
+
 function prevStep() {
 	if (currentStep.value > 0) currentStep.value--
 }
 
 const formContainer = ref<HTMLElement>()
 
-function nextStep() {
+async function nextStep() {
+	// Always use reportValidity when attempting to move to next step
+	// This will show validation errors to the user
 	if (props.validateOnSteps && reportValidity() === false) return
-	if (canDoNext.value) currentStep.value++
+	if (!isLastStep.value) currentStep.value++
+	await sleep(400)
+	checkCurrentStepValidity()
 }
 
 function goToStep(stepIndex: number) {
@@ -173,6 +182,7 @@ function goToStep(stepIndex: number) {
 	}
 
 	// For forward navigation to non-validated steps, validate current step first if needed
+	// This will show validation errors to the user
 	if (props.validateOnSteps && reportValidity() === false) {
 		return false
 	}
@@ -187,6 +197,7 @@ function goToStep(stepIndex: number) {
 }
 
 function handleSubmit() {
+	// Show validation errors to the user when submitting
 	if (reportValidity() === false) return
 	emits('submit', formData.value)
 }
@@ -194,15 +205,11 @@ function handleSubmit() {
 function reset() {
 	validatedSteps.value = []
 	currentStep.value = 0
-	// Clear form if BagelForm supports it
-	// if (formRef.value && typeof formRef.value.clearForm === 'function') {
-	// 	formRef.value.clearForm()
-	// }
 }
 
 // Re-evaluate filtered steps when formData changes
 watch(() => formData.value, () => {
-	// If current step index is now invalid after filtering, reset to first valid step
+	checkCurrentStepValidity()
 	if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
 		currentStep.value = 0
 	}
@@ -211,11 +218,13 @@ watch(() => formData.value, () => {
 defineExpose({
 	submit: handleSubmit,
 	validateForm: reportValidity,
+	checkValidity: formRef.value?.checkValidity,
 	isDirty: computed(() => formRef.value?.isDirty),
 	reset,
 	goToStep,
 	currentStep: computed(() => currentStep.value),
 	totalSteps: computed(() => numberOfSteps.value),
+	isStepValid,
 	nextStep,
 	prevStep,
 })
@@ -260,7 +269,7 @@ defineExpose({
 				:name="slideDirection === 'right' ? 'slide-right' : 'slide-left'"
 				mode="out-in"
 			>
-				<div v-if="!isStepping" :key="currentStep" ref="formContainer" class="bgl-form-container">
+				<div :key="currentStep" ref="formContainer" class="bgl-form-container">
 					<BagelForm
 						ref="formRef"
 						v-model="formData"
@@ -286,11 +295,17 @@ defineExpose({
 						submit: handleSubmit,
 						currentStep,
 						totalSteps: numberOfSteps,
-						canDoNext,
+						isLastStep,
+						isStepValid,
 					}"
 				>
-					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" click="prevStep" />
-					<Btn v-if="canDoNext" icon="arrow_forward" @click="nextStep" />
+					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" @click="prevStep" />
+					<Btn
+						v-if="!isLastStep"
+						icon="arrow_forward"
+						:disabled="props.validateOnSteps && !isStepValid"
+						@click="nextStep"
+					/>
 					<Btn v-else value="Submit" @click="handleSubmit" />
 				</slot>
 			</div>
@@ -305,12 +320,10 @@ defineExpose({
 	gap: 1rem;
 	width: 100%;
 	/* Default transition duration */
-	--transition-duration: 200ms;
+	--transition-duration: 300ms;
 	--move-distance: 35%;
-	--ease-in: ease-in-out;
-	--ease-out: ease-in-out;
-	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
-	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
+	--ease-in: cubic-bezier(0.42, 0, 0.58, 1);
+	--ease-out: cubic-bezier(0.42, 0, 0.58, 1);
 }
 
 .bgl-steps-indicator {
@@ -398,16 +411,18 @@ defineExpose({
 	justify-content: center;
 	gap: 1rem;
 	grid-area: unset !important;
-
+	margin-top: 2rem;
 }
 
 /* Slide Left Animation (going forward) */
 .slide-left-enter-active {
-	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-left-leave-active {
-	transition: opacity, transform var(--transition-duration) var(--ease-out);
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-left-enter-from {
@@ -422,12 +437,13 @@ defineExpose({
 
 /* Slide Right Animation (going back) */
 .slide-right-enter-active {
-	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-right-leave-active {
-	transition: all var(--transition-duration) var(--ease-out);
-	transition-property: opacity, transform;
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-right-enter-from {

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>