@bagelink/vue 1.0.52 → 1.0.54

package/package.json

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

package/src/components/Modal.vue

@@ -93,6 +93,7 @@ onUnmounted(() => {
 					class="position-start"
 					icon="close"
 					thin
+					round
 					color="white"
 					@click="closeModal"
 				/>

package/src/components/form/BagelForm.vue

@@ -109,9 +109,14 @@ function updateFormData(fieldId: string, value: any) {
 	emit('update:modelValue', formData.value)
 }
 
+// Form validation
+const validateForm = () => form.value?.reportValidity() ?? false
+let formError = ref<Error>()
 // Form submission
 async function handleSubmit() {
 	try {
+		const valid = validateForm()
+		if (!valid) return
 		if (formState.value === 'submitting') return
 		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
@@ -119,14 +124,12 @@ async function handleSubmit() {
 		formState.value = 'success'
 		window.parent.postMessage({ type: 'BAGEL_FORM_SUCCESS', data: JSON.stringify(formData.value) }, '*')
 	} catch (error) {
-		console.error('Submit error:', error)
 		formState.value = 'error'
+		formError.value = error as Error
+		console.error('Submit error:', formError.value)
 	}
 }
 
-// Form validation
-const validateForm = () => form.value?.reportValidity() ?? false
-
 // Field rendering
 const { renderField } = useSchemaField<T>({
 	mode: 'form',
@@ -144,12 +147,26 @@ const { renderField } = useSchemaField<T>({
 
 const renderSchemaField = (field: Field<T>): VNode | null => renderField(field)
 
+// 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)
+	}
+}
+
 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">
+		<form
+			v-if="props.tag === 'form'" ref="form"
+			:class="props.class"
+			@submit.prevent="handleSubmit"
+			@input="handleSlotInputChange"
+		>
 			<!-- Loading state -->
 			<slot v-if="schemaState === 'loading'" name="loading">
 				<div class="flex-center h-300px">
@@ -174,7 +191,6 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
 
 			<!-- Default slot -->
 			<slot v-else />
-
 			<!-- Submit slot -->
 			<slot
 				name="submit"
@@ -210,5 +226,5 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
 
 	<!-- Success/error slots -->
 	<slot v-if="formState === 'success'" name="success" />
-	<slot v-if="formState === 'error'" name="error" />
+	<slot v-if="formState === 'error'" name="error" :error="formError" />
 </template>

package/src/components/form/FieldArray.vue

@@ -143,7 +143,7 @@ const isPrimitiveType = computed(() => props.type === 'text' || props.type === '
 const canRenderItems = computed(() => isPrimitiveType.value || (props.type === 'object' && resolvedSchemaData.value.length > 0)
 )
 const showMinimizeButton = computed(() => {
-	return resolvedSchemaData.value.length > 3 || resolvedSchemaData.value.some(schema => schema.$el === 'richtext')
+	return resolvedSchemaData.value.length > 2 || resolvedSchemaData.value.some(schema => schema.$el === 'richtext')
 })
 </script>
 
@@ -213,7 +213,7 @@ const showMinimizeButton = computed(() => {
 				</div>
 
 				<!-- Add Button -->
-				<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
+				<Btn v-if="add" thin icon="add" color="gray" class="txt12  arrayAddButton" @click="addItem">
 					<p>{{ label }}</p>
 				</Btn>
 			</template>

package/src/components/form/inputs/NumberInput.vue

@@ -178,7 +178,7 @@ watch(() => modelValue, (newVal) => {
 					@keydown.up.prevent="increment"
 					@keydown.down.prevent="decrement"
 				>
-				<p v-if="helptext">
+				<p v-if="helptext" class="opacity-7 light">
 					{{ helptext }}
 				</p>
 				<Icon

package/src/components/form/inputs/PasswordInput.vue

@@ -14,6 +14,7 @@ export interface TextInputProps {
 	pattern?: string
 	shrink?: boolean
 	disabled?: boolean
+	name?: string
 	nativeInputAttrs?: { [key: string]: any }
 	icon?: IconType
 	iconStart?: IconType
@@ -48,6 +49,7 @@ const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 			v-bind="props"
 			:type="inputType"
 			class="mb-0"
+			:name="props.name"
 		/>
 		<div class="m-password position-bottom-end flex column justify-content-center">
 			<Btn

package/src/components/form/inputs/TextInput.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
 		id?: string
 		title?: string
 		helptext?: string
+		name?: string
 		placeholder?: string
 		modelValue?: string | number
 		label?: string
@@ -99,6 +100,7 @@ onMounted(() => {
 				:id
 				ref="input"
 				v-model.trim="inputVal"
+				:name
 				:title
 				:autocomplete
 				:type="type"
@@ -117,6 +119,7 @@ onMounted(() => {
 				:id
 				ref="input"
 				v-model="inputVal"
+				:name
 				:title
 				:type
 				:rows="inputRows"
@@ -128,7 +131,7 @@ onMounted(() => {
 				@input="updateInputVal"
 				@focusout="onFocusout"
 			/>
-			<p v-if="helptext">{{ helptext }}</p>
+			<p v-if="helptext" class="opacity-7 light">{{ helptext }}</p>
 			<Icon
 				v-if="iconStart"
 				class="iconStart"

package/src/composables/useSchemaField.ts

@@ -42,6 +42,37 @@ type SupportedSlot<T> = BglFormSchemaT<T> | VNode | SlotFunction<T>
 export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchemaFieldOptions<T>) {
 	const { mode = 'form', getRowData, onUpdate, includeUnset = false } = optns
 
+	// Helper function to render objects recursively
+	function renderObject(obj: any, depth = 0): string {
+		if (obj === null || obj === undefined) return ''
+		if (typeof obj !== 'object') return String(obj)
+		if (Array.isArray(obj)) return obj.map(item => renderObject(item, depth + 1)).join(', ')
+
+		// For objects, format as key: value pairs
+		const indent = depth > 0 ? '  '.repeat(depth) : ''
+		const nextIndent = '  '.repeat(depth + 1)
+
+		const entries = Object.entries(obj)
+		if (entries.length === 0) return '{}'
+
+		// For nested objects, format with newlines and indentation
+		if (depth > 0) {
+			return `{\n${entries
+				.map(([key, value]) => `${nextIndent}${key}: ${renderObject(value, depth + 1)}`)
+				.join(',\n')}\n${indent}}`
+		}
+
+		// For top-level objects, format as a flat list
+		return entries
+			.map(([key, value]) => {
+				const valueStr = typeof value === 'object' && value !== null
+					? renderObject(value, depth + 1)
+					: String(value)
+				return `${key}: ${valueStr}`
+			})
+			.join('\n')
+	}
+
 	function getComponent(field: BaseBagelField<T>) {
 		const componentMap = {
 			text: TextInput,
@@ -237,7 +268,9 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 				h('div', { class: 'field-value' }, [
 					slotContent || (typeof field.$el === 'object'
 						? h(Component as any, props, componentSlots)
-						: transformedValue?.toString() || '')
+						: typeof transformedValue === 'object' && transformedValue !== null
+							? h('pre', { style: 'margin: 0; white-space: pre-wrap; font-family: inherit; font-size: inherit;' }, renderObject(transformedValue))
+							: transformedValue?.toString() || '')
 				])
 			])
 		}