@bagelink/vue 1.14.15 → 1.15.0

package/src/components/Title.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-defineProps({
-	value: {
-		type: String,
-		default: '',
-	},
-	label: {
-		type: String,
-		default: '',
-	},
-	tag: {
-		type: String,
-		default: 'h1',
-	},
-})
-</script>
-
-<template>
-	<component :is="tag">
-		{{ label || value }}
-		<slot />
-	</component>
-</template>

package/src/components/ToolBar.vue

@@ -1,9 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-	<div class="bg-red">
-		123
-	</div>
-</template>

package/src/components/form/BagelForm.vue

@@ -1,219 +0,0 @@
-<script setup lang="ts" generic="T extends {[key:string]:any}, P extends Path<T>">
-import type { 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?: MaybeRefOrGetter<BglFormSchemaT<T>>
-	tag?: 'form' | 'template'
-	class?: string
-	onSubmit?: (data: T) => Promise<unknown> | unknown
-}>(), {
-	modelValue: undefined,
-	schema: undefined,
-	tag: 'form',
-	class: ''
-})
-
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: T): void
-}>()
-
-// Clone helper
-const clone = <T>(obj: T): T => !obj ? obj : JSON.parse(JSON.stringify(obj))
-
-// Form state
-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 resolvedSchema = computed(() => toValue(props.schema))
-
-const isDirty = computed(() => {
-	try {
-		return JSON.stringify(formData.value) !== JSON.stringify(initialFormData.value)
-	} catch {
-		return false
-	}
-})
-
-// Initialize on mount
-onMounted(() => {
-	if (props.modelValue) {
-		initialFormData.value = clone(props.modelValue)
-		// Ensure formData is properly initialized with the model value
-		if (Object.keys(formData.value).length === 0 && Object.keys(props.modelValue).length > 0) {
-			formData.value = clone(props.modelValue)
-		}
-	}
-	// Apply defaults after ensuring model value is set
-	setTimeout(() => {
-		applyDefaultValues()
-	}, 10)
-})
-
-// Watch for model changes
-watch(() => props.modelValue, (val) => {
-	if (val !== undefined) { formData.value = clone(val) }
-}, { immediate: true, deep: true })
-
-let isApplyingDefaults = false
-
-function applyDefaultValues() {
-	if (isApplyingDefaults) { return }
-	isApplyingDefaults = true
-
-	try {
-		const schema = resolvedSchema.value as unknown as Array<BaseBagelField<T, any>> | undefined
-		if (!schema) { return }
-
-		const walk = (nodes: any[]) => {
-			for (const node of nodes) {
-				if (!node || typeof node !== 'object') { continue }
-				const hasId = typeof node.id === 'string' && node.id.length > 0
-				const hasDefault = Object.hasOwn(node, 'defaultValue') && node.defaultValue !== undefined
-				if (hasId && hasDefault) {
-					const current = getNestedValue(formData.value as any, node.id as string, undefined)
-
-					// Skip arrays completely - let FieldArray manage its own defaults
-					if (node.$el === 'array' || node.type === 'array') {
-						// Don't apply any defaults to arrays - let FieldArray handle it
-						continue
-					} else {
-						// Don't restore defaultValue for regular inputs - let user control their content
-						// Only apply defaultValue on initial load when truly undefined/null
-						if (current === undefined || current === null) {
-							updateFormData({ fieldId: node.id, value: node.defaultValue })
-						}
-					}
-				}
-				if (Array.isArray(node.children) && node.children.length) { walk(node.children) }
-				// Also check nested fields in array/object configurations
-				if (Array.isArray(node.fields) && node.fields.length) { walk(node.fields) }
-			}
-		}
-		walk(schema as any[])
-	} finally {
-		// Reset the flag after a short delay to allow for multiple synchronous calls
-		setTimeout(() => {
-			isApplyingDefaults = false
-		}, 0)
-	}
-}
-
-// Use a more conservative watch that doesn't trigger on every change
-const schemaVersion = ref(0)
-watch(resolvedSchema, () => {
-	// Increment version to track schema changes
-	schemaVersion.value++
-	// Only apply defaults after a small delay to avoid rapid firing
-	setTimeout(() => {
-		if (!isApplyingDefaults) {
-			applyDefaultValues()
-		}
-	}, 10)
-}, { immediate: false })
-
-// Update form data
-function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
-	const keys = fieldId?.split('.') || []
-	const newData = clone(formData.value) as { [key: string]: any }
-	let current = newData
-
-	for (let i = 0; i < keys.length - 1; i++) {
-		const key = keys[i]
-		if (!current[key] || typeof current[key] !== 'object') { current[key] = {} }
-		current = current[key]
-	}
-
-	current[keys[keys.length - 1]] = value
-	formData.value = newData as T
-	emit('update:modelValue', formData.value)
-}
-
-// Form validation
-const validateForm = () => form.value?.reportValidity() ?? false
-const checkValidity = () => form.value?.checkValidity() ?? false
-const 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)
-		initialFormData.value = clone(formData.value)
-		formState.value = 'success'
-		window.parent.postMessage({ type: 'BAGEL_FORM_SUCCESS', data: JSON.stringify(formData.value) }, '*')
-	} catch (error) {
-		formState.value = 'error'
-		formError.value = error as Error
-		console.error('Submit error:', formError.value)
-	}
-}
-
-// Field renderingks
-const { renderField } = useSchemaField<T>({
-	mode: 'form',
-	getFormData: () => formData.value,
-	onUpdateModelValue: (field, value) => {
-		if (!field.id) { return }
-
-		updateFormData({ fieldId: field.id, value })
-		field.onUpdate?.(value, formData.value)
-	}
-})
-
-const renderSchemaField = (field: any) => renderField(field as BaseBagelField<T, Path<T>>)
-
-// 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({ fieldId: input.name, value })
-	}
-}
-
-defineExpose({ form, isDirty, validateForm, checkValidity })
-</script>
-
-<template>
-	<template v-if="formState !== 'success' || !$slots.success">
-		<form
-			v-if="props.tag === 'form'" ref="form" :class="props.class" @submit.prevent="handleSubmit"
-			@input="handleSlotInputChange"
-		>
-			<!-- Render fields -->
-			<template v-if="resolvedSchema">
-				<Component :is="renderSchemaField(field as any)" v-for="field in resolvedSchema" :key="field.id" />
-			</template>
-
-			<!-- Default slot -->
-			<slot v-else />
-			<!-- Submit slot -->
-			<slot
-				name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm"
-				:formState="formState"
-			/>
-		</form>
-
-		<!-- Template mode -->
-		<template v-else>
-			<template v-if="resolvedSchema">
-				<component
-					:is="renderSchemaField(field as any)" v-for="field in resolvedSchema" :key="field.id"
-					:class="props.class"
-				/>
-			</template>
-		</template>
-	</template>
-
-	<!-- Success/error slots -->
-	<slot v-if="formState === 'success'" name="success" />
-	<slot v-if="formState === 'error'" name="error" :error="formError" />
-</template>

package/src/components/form/BglFieldSet.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const fieldSet = ref<HTMLFieldSetElement | undefined>()
-const isDirty = ref(false)
-const validateForm = () => fieldSet.value?.reportValidity()
-defineExpose({ validateForm, isDirty })
-</script>
-
-<template>
-	<fieldset ref="fieldSet">
-		<slot />
-	</fieldset>
-</template>