@bagelink/vue 0.0.1224 → 0.0.1232

package/src/components/form/BagelForm.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 	}
 })
 
-const formState = ref<'success' | 'error' | 'idle'>('idle')
+const formState = ref<'success' | 'error' | 'idle' | 'submitting'>('idle')
 
 watch(() => props.modelValue, (newValue) => {
 	if (newValue !== undefined) {
@@ -60,9 +60,13 @@ function updateFormData(fieldId: string, value: any) {
 
 async function handleSubmit() {
 	try {
+		if (formState.value === 'submitting') return
+		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
 		initialFormData.value = structuredClone(formData.value)
 		formState.value = 'success'
+		// Notify parent window of successful submission
+		window.parent.postMessage({ type: 'BAGEL_FORM_SUCCESS', data: formData.value }, '*')
 	} catch (error) {
 		formState.value = 'error'
 	}
@@ -98,7 +102,7 @@ defineExpose({ form, isDirty, validateForm })
 			</template>
 		</template>
 		<slot v-else />
-		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" />
+		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" :formState="formState" />
 		<slot v-if="formState === 'success'" name="success" />
 		<slot v-if="formState === 'error'" name="error" />
 	</form>

package/src/components/lightbox/Lightbox.vue

@@ -100,13 +100,13 @@ defineExpose({ open, close })
 						<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
 					</div>
 					<Btn
-						v-if="currentItem?.openFile" class="color-white" round thin flat iconEnd="arrow_outward"
+						v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat iconEnd="arrow_outward"
 						value="Open File"
 						:href="currentItem?.src"
 						target="_blank"
 					/>
 					<Btn
-						v-if="currentItem?.download" class="color-white" round thin flat icon="download"
+						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
 						value="Download File"
 						:href="upgradeHeaders(currentItem?.src)"
 						download
@@ -117,11 +117,11 @@ defineExpose({ open, close })
 				<Carousel v-model:index="currentIndex" :items="1" class="bgl-lightbox-item" :class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1">
 					<template v-for="item in group" :key="item.src">
 						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
-							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
+							<Image :draggable="false" :src="item?.src" :pathKey="item?.pathKey" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
 
 						<BglVideo
-							v-else-if="item?.type === 'video'"
+							v-else-if="item?.type === 'video' && item?.src"
 							:src="item?.src"
 							autoplay
 							controls
@@ -129,7 +129,7 @@ defineExpose({ open, close })
 						/>
 
 						<embed
-							v-else-if="item?.type === 'pdf'"
+							v-else-if="item?.type === 'pdf' && item?.src"
 							:src="normalizeURL(item?.src)"
 							type="application/pdf"
 							width="100%"

package/src/components/lightbox/lightbox.types.ts

@@ -1,5 +1,6 @@
-export interface LightboxItem {
-	src: string
+export type XORSrcPath = { src: string, pathKey?: never } | { src?: never, pathKey: string }
+
+export type LightboxItem = XORSrcPath & {
 	type: string
 	name: string
 	thumbnail?: string

package/src/composables/useSchemaField.ts

@@ -1,5 +1,5 @@
 import type { VNode } from 'vue'
-import type { BaseBagelField } from '../types/BagelForm'
+import type { BaseBagelField, BglFormSchemaT } from '../types/BagelForm'
 import {
 	TextInput,
 	NumberInput,
@@ -17,7 +17,7 @@ import {
 	classify,
 	keyToLabel
 } from '@bagelink/vue'
-import { h } from 'vue'
+import { h, isVNode } from 'vue'
 
 const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
 
@@ -30,6 +30,12 @@ export interface UseSchemaFieldOptions<T> {
 	includeUnset?: boolean
 }
 
+// Add type for supported child types
+type SupportedChild<T> = BaseBagelField<T> | string | VNode
+interface SlotProps<T> { row: T, field: BaseBagelField<T> }
+type SlotFunction<T> = (props: SlotProps<T>) => any
+type SupportedSlot<T> = BglFormSchemaT<T> | VNode | SlotFunction<T>
+
 export function useSchemaField<T extends { [key: string]: any }>(options: UseSchemaFieldOptions<T>) {
 	const { mode = 'form', getRowData, onUpdate, includeUnset = false } = options
 
@@ -57,9 +63,15 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 	}
 
+	function renderChild(child: SupportedChild<T>, slots?: Record<string, SupportedSlot<T>>): any {
+		if (typeof child === 'string') return child
+		if (isVNode(child)) return child
+		return renderField(child, slots)
+	}
+
 	function renderField(
 		field: BaseBagelField<T>,
-		slots?: Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
+		slots?: Record<string, SupportedSlot<T>>
 	): VNode | null {
 		const Component = getComponent(field)
 		if (!Component) return null
@@ -169,10 +181,7 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 		// Add default slot if there are children
 		if (children?.length) {
 			componentSlots.default = () => children
-				.map((child) => {
-					if (typeof child === 'string') return child
-					return renderField(child, slots)
-				})
+				.map(child => renderChild(child, slots))
 				.filter(Boolean) // Filter out null results from vIf
 		}
 
@@ -181,18 +190,29 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 			componentSlots.default = () => transformedValue?.toString() || ''
 		}
 
-		// Add any custom slots from the field
+		// Handle custom slots from the field
 		if (fieldSlots) {
 			Object.entries(fieldSlots).forEach(([name, slot]) => {
-				componentSlots[name] = typeof slot === 'function'
-					? () => slot(currentValue, rowData)
-					: () => slot
+				componentSlots[name] = () => {
+					if (Array.isArray(slot)) {
+						// Handle BglFormSchemaT array
+						return slot.map(schemaField => renderField(schemaField as BaseBagelField<T>, slots))
+					} else if (isVNode(slot)) {
+						// Handle VNode
+						return slot
+					} else if (typeof slot === 'function') {
+						// Handle function slot
+						const slotFn = slot as (props: SlotProps<T>) => any
+						return slotFn({ row: rowData, field })
+					}
+					return slot
+				}
 			})
 		}
 
 		// Handle custom slot content from parent
 		const slotContent = field.id && slots?.[field.id]
-			? slots[field.id]({ row: rowData, field })
+			? (slots[field.id] as SlotFunction<T>)({ row: rowData, field })
 			: undefined
 
 		if (mode === 'preview') {

package/src/types/BagelForm.ts

@@ -1,4 +1,5 @@
 import type { SelectInput, TextInput } from '@bagelink/vue'
+import type { VNode } from 'vue'
 
 export type AttributeValue = string | number | boolean | undefined | undefined | { [key: string]: any }
 
@@ -29,7 +30,7 @@ export interface BaseBagelField<T = { [key: string]: any }> {
 	'id'?: keyof T extends string ? keyof T : string
 	'label'?: string
 	'placeholder'?: string
-	'children'?: (Field<T> | string)[]
+	'children'?: (Field<T> | string | VNode)[]
 	'class'?: AttributeValue | AttributeFn<T>
 	'attrs'?: Attributes<T>
 	'required'?: boolean

package/src/utils/BagelFormUtils.ts

@@ -235,7 +235,8 @@ export function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | u
 	for (const field of _schema) {
 		if (field.id === id) return field
 		if (field.children && Number(field.children.length) > 0) {
-			const child = findBglFieldById(id, field.children.filter(c => typeof c !== 'string'))
+			const fieldChildren = field.children.filter((c): c is Field => typeof c === 'object' && '$el' in c)
+			const child = findBglFieldById(id, fieldChildren)
 			if (child) return child
 		}
 	}