@bagelink/vue 1.0.38 → 1.0.41

package/dist/style.css

@@ -3079,16 +3079,16 @@ to {
 }
 
 /* Bar Theme */
-.lds-bar[data-v-2e27b3c1] {
+.lds-bar[data-v-221a3053] {
   height: 4px;
   width: 100%;
   max-width: 130px;
   --c: no-repeat linear-gradient(currentColor 0 0);
   background: var(--c), var(--c), #ddd;
   background-size: 60% 100%;
-  animation: bar-animation-2e27b3c1 3s infinite ease-in-out;
+  animation: bar-animation-221a3053 3s infinite ease-in-out;
 }
-@keyframes bar-animation-2e27b3c1 {
+@keyframes bar-animation-221a3053 {
 0% { background-position: -150% 0, -150% 0
 }
 66% { background-position: 250% 0, -150% 0
@@ -3096,17 +3096,17 @@ to {
 100% { background-position: 250% 0, 250% 0
 }
 }
-.lds-ring[data-v-2e27b3c1],
-.lds-ring div[data-v-2e27b3c1] {
+.lds-ring[data-v-221a3053],
+.lds-ring div[data-v-221a3053] {
   box-sizing: border-box;
 }
-.lds-ring[data-v-2e27b3c1] {
+.lds-ring[data-v-221a3053] {
   position: relative;
   width: var(--size);
   height: var(--size);
   transform: translate(calc(var(--thickness) * -1), calc(var(--thickness) * -1));
 }
-.lds-ring div[data-v-2e27b3c1] {
+.lds-ring div[data-v-221a3053] {
   box-sizing: border-box;
   display: block;
   position: absolute;
@@ -3115,19 +3115,19 @@ to {
   margin: var(--thickness);
   border: var(--thickness) solid currentColor;
   border-radius: 50%;
-  animation: lds-ring-2e27b3c1 var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  animation: lds-ring-221a3053 var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: currentColor transparent transparent transparent;
 }
-.lds-ring div[data-v-2e27b3c1]:nth-child(1) {
+.lds-ring div[data-v-221a3053]:nth-child(1) {
   animation-delay: calc(var(--animation-duration) * -0.38);
 }
-.lds-ring div[data-v-2e27b3c1]:nth-child(2) {
+.lds-ring div[data-v-221a3053]:nth-child(2) {
   animation-delay: calc(var(--animation-duration) / -4);
 }
-.lds-ring div[data-v-2e27b3c1]:nth-child(3) {
+.lds-ring div[data-v-221a3053]:nth-child(3) {
   animation-delay: calc(var(--animation-duration) / -8);
 }
-@keyframes lds-ring-2e27b3c1 {
+@keyframes lds-ring-221a3053 {
 0% {
     transform: rotate(0deg);
 }
@@ -3135,17 +3135,17 @@ to {
     transform: rotate(360deg);
 }
 }
-.lds-ellipsis[data-v-2e27b3c1],
-.lds-ellipsis div[data-v-2e27b3c1] {
+.lds-ellipsis[data-v-221a3053],
+.lds-ellipsis div[data-v-221a3053] {
   box-sizing: border-box;
 }
-.lds-ellipsis[data-v-2e27b3c1] {
+.lds-ellipsis[data-v-221a3053] {
   display: inline-block;
   position: relative;
   width: var(--size);
   height: var(--size);
 }
-.lds-ellipsis div[data-v-2e27b3c1] {
+.lds-ellipsis div[data-v-221a3053] {
   position: absolute;
   top: calc(var(--size) - 40%);
   width: calc(var(--size) / 5);
@@ -3154,23 +3154,23 @@ to {
   background: currentColor;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
-.lds-ellipsis div[data-v-2e27b3c1]:nth-child(1) {
+.lds-ellipsis div[data-v-221a3053]:nth-child(1) {
   left: calc(var(--size) / 10);
-  animation: lds-ellipsis1-2e27b3c1 0.6s infinite;
+  animation: lds-ellipsis1-221a3053 0.6s infinite;
 }
-.lds-ellipsis div[data-v-2e27b3c1]:nth-child(2) {
+.lds-ellipsis div[data-v-221a3053]:nth-child(2) {
   left: calc(var(--size) / 10);
-  animation: lds-ellipsis2-2e27b3c1 0.6s infinite;
+  animation: lds-ellipsis2-221a3053 0.6s infinite;
 }
-.lds-ellipsis div[data-v-2e27b3c1]:nth-child(3) {
+.lds-ellipsis div[data-v-221a3053]:nth-child(3) {
   left: calc(var(--size) / 2.5);
-  animation: lds-ellipsis2-2e27b3c1 0.6s infinite;
+  animation: lds-ellipsis2-221a3053 0.6s infinite;
 }
-.lds-ellipsis div[data-v-2e27b3c1]:nth-child(4) {
+.lds-ellipsis div[data-v-221a3053]:nth-child(4) {
   left: calc(var(--size) / 1.42);
-  animation: lds-ellipsis3-2e27b3c1 0.6s infinite;
+  animation: lds-ellipsis3-221a3053 0.6s infinite;
 }
-@keyframes lds-ellipsis1-2e27b3c1 {
+@keyframes lds-ellipsis1-221a3053 {
 0% {
     transform: scale(0);
 }
@@ -3178,7 +3178,7 @@ to {
     transform: scale(1);
 }
 }
-@keyframes lds-ellipsis3-2e27b3c1 {
+@keyframes lds-ellipsis3-221a3053 {
 0% {
     transform: scale(1);
 }
@@ -3186,7 +3186,7 @@ to {
     transform: scale(0);
 }
 }
-@keyframes lds-ellipsis2-2e27b3c1 {
+@keyframes lds-ellipsis2-221a3053 {
 0% {
     transform: translate(0, 0);
 }

package/dist/types/BagelForm.d.ts

@@ -64,6 +64,6 @@ export type BglFormSchemaT<T = {
 }> = Field<T>[];
 export type BglFormSchemaFnT<T = {
     [key: string]: any;
-}> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>;
+}> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T> | (() => Promise<BglFormSchemaT<T>>) | Promise<BglFormSchemaT<T>>;
 export {};
 //# sourceMappingURL=BagelForm.d.ts.map

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Loading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 type LoadingType = 'ring' | 'ellipsis' | 'bar'
 
-const { type: theme = 'ring', size = 64, thickness, duration = 1.2, color } = defineProps<{
+const { type: theme = 'ring', size = 50, thickness, duration = 1.2, color } = defineProps<{
 	size?: number | string
 	thickness?: number | string
 	duration?: number | string
@@ -21,7 +21,7 @@ const animationDuration = $computed(() => `${duration}s`)
 
 // Border size for ring theme (defaults to 1/8th of the size)
 const computedBorder = $computed(() => {
-	const borderValue = thickness ?? Number.parseInt(computedSize) / 7
+	const borderValue = thickness ?? Math.max(Number.parseInt(computedSize) / 9, 2)
 	return standardSize(borderValue)
 })
 </script>

package/src/components/form/BagelForm.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts" generic="T extends {[key:string]:any}">
-import type { BglFormSchemaFnT, Field } from '@bagelink/vue'
+import type { BglFormSchemaFnT, Field, BglFormSchemaT } from '@bagelink/vue'
 import type { VNode } from 'vue'
-import { onMounted, watch, ref } from 'vue'
+import { Loading } from '@bagelink/vue'
+import { onMounted, watch, ref, toRef, computed } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
 import { getNestedValue } from '../../utils'
 
-export interface BagelFormProps<_T> {
-	modelValue?: _T
-	schema?: BglFormSchemaFnT<_T>
+const props = withDefaults(defineProps<{
+	modelValue?: T
+	schema?: BglFormSchemaFnT<T>
 	tag?: 'form' | 'template'
 	class?: string
-	onSubmit?: (data: _T) => Promise<void> | void
-}
-
-const props = withDefaults(defineProps<BagelFormProps<T>>(), {
+	onSubmit?: (data: T) => Promise<void> | void
+}>(), {
 	modelValue: undefined,
 	schema: undefined,
 	tag: 'form',
@@ -24,131 +23,192 @@ const emit = defineEmits<{
 	(e: 'update:modelValue', value: T): void
 }>()
 
-function safeClone<T>(obj: T): T {
-	if (!obj) return obj
-	try {
-		return JSON.parse(JSON.stringify(obj))
-	} catch (e) {
-		console.warn('Failed to clone object:', e)
-		return obj
-	}
-}
+// 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>(safeClone(props.modelValue ?? {}) as T)
-const initialFormData = ref<T>(safeClone(props.modelValue ?? {}) as T)
-
-onMounted(() => {
-	if (props.modelValue) {
-		initialFormData.value = safeClone(props.modelValue)
+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 isDirty = computed(() => {
+	try {
+		return JSON.stringify(formData.value) !== JSON.stringify(initialFormData.value)
+	} catch {
+		return false
 	}
 })
 
-const formState = ref<'success' | 'error' | 'idle' | 'submitting'>('idle')
+// Initialize on mount
+onMounted(() => {
+	if (props.modelValue) initialFormData.value = clone(props.modelValue)
+	refreshSchema()
+})
 
-watch(() => props.modelValue, (newValue) => {
-	if (newValue !== undefined) {
-		formData.value = safeClone(newValue)
-	}
+// Watch for model changes
+watch(() => props.modelValue, (val) => {
+	if (val !== undefined) formData.value = clone(val)
 }, { immediate: true, deep: true })
 
-const resolvedSchema = $computed<BglFormSchemaFnT<T> | undefined>(() => {
-	if (!props.schema) return undefined
-	return typeof props.schema === 'function' ? props.schema() : props.schema
-})
+// Schema resolution
+async function resolveSchema(schema?: BglFormSchemaFnT<T>) {
+	if (!schema) {
+		resolvedSchemaData.value = undefined
+		schemaState.value = 'loaded'
+		return
+	}
 
-const isDirty = $computed(() => {
 	try {
-		const current = JSON.stringify(formData.value)
-		const initial = JSON.stringify(initialFormData.value)
-		return current !== initial
-	} catch (e) {
-		console.warn('Failed to compare form data:', e)
-		return false
+		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('.')
-	const newData = safeClone(formData.value) as Record<string, any>
+	const newData = clone(formData.value) as Record<string, any>
 	let current = newData
 
-	// Traverse the object, creating nested objects as needed
 	for (let i = 0; i < keys.length - 1; i++) {
 		const key = keys[i]
-		// Initialize as empty object if current[key] is null/undefined or not an object
-		if (!current[key] || typeof current[key] !== 'object') {
-			current[key] = {}
-		}
+		if (!current[key] || typeof current[key] !== 'object') current[key] = {}
 		current = current[key]
 	}
 
-	// Set the value at the final key
 	current[keys[keys.length - 1]] = value
 	formData.value = newData as T
 	emit('update:modelValue', formData.value)
 }
 
+// Form submission
 async function handleSubmit() {
 	try {
 		if (formState.value === 'submitting') return
 		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
-		initialFormData.value = safeClone(formData.value)
+		initialFormData.value = clone(formData.value)
 		formState.value = 'success'
-		// Notify parent window of successful submission
 		window.parent.postMessage({ type: 'BAGEL_FORM_SUCCESS', data: JSON.stringify(formData.value) }, '*')
 	} catch (error) {
-		console.error('Form submission error:', error)
+		console.error('Submit error:', error)
 		formState.value = 'error'
 	}
 }
 
-function validateForm() {
-	if (!form.value) return false
-	return form.value.reportValidity()
-}
+// Form validation
+const validateForm = () => form.value?.reportValidity() ?? false
 
+// Field rendering
 const { renderField } = useSchemaField<T>({
 	mode: 'form',
-	getRowData: () => {
-		return {
-			...formData.value,
-			// Add a special getter to handle nested paths
-			get: (path: string) => getNestedValue(formData.value, path, '')
-		}
-	},
+	getRowData: () => ({
+		...formData.value,
+		get: (path: string) => getNestedValue(formData.value, path, '')
+	}),
 	onUpdate: (field, value) => {
-		if (!field.id) return
-		updateFormData(field.id, value)
-		field.onUpdate?.(value, formData.value)
+		if (field.id) {
+			updateFormData(field.id, value)
+			field.onUpdate?.(value, formData.value)
+		}
 	}
 })
 
-function renderSchemaField(field: Field): VNode | null {
-	return renderField(field)
-}
+const renderSchemaField = (field: Field<T>): VNode | null => renderField(field)
 
-defineExpose({ form, isDirty, validateForm })
+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">
-			<template v-if="resolvedSchema">
-				<template v-for="field in (resolvedSchema as Field[])" :key="field.id">
-					<component :is="renderSchemaField(field)" />
-				</template>
-			</template>
+			<!-- 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"
+			/>
+
+			<!-- Default slot -->
 			<slot v-else />
-			<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" :formState="formState" />
+
+			<!-- Submit slot -->
+			<slot
+				name="submit"
+				:submit="handleSubmit"
+				:isDirty="isDirty"
+				:validateForm="validateForm"
+				:formState="formState"
+				:schemaState="schemaState"
+			/>
 		</form>
+
+		<!-- Template mode -->
 		<template v-else>
-			<template v-for="field in (resolvedSchema as Field[])" :key="field.id">
-				<component :is="renderSchemaField(field)" :class="props.class" />
-			</template>
+			<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>
 	</template>
+
+	<!-- Success/error slots -->
 	<slot v-if="formState === 'success'" name="success" />
 	<slot v-if="formState === 'error'" name="error" />
 </template>