@bagelink/vue 0.0.1035 → 0.0.1037

package/package.json

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

package/src/components/BglComponent.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import {
+	CheckInput,
+	DateInput,
+	FieldArray,
+	type Field,
+	FileUpload,
+	RichText,
+	SelectInput,
+	TextInput,
+	ToggleInput,
+	bindAttrs,
+	classify,
+	NumberInput,
+	UploadInput,
+	BglForm,
+	TabsNav,
+} from '@bagelink/vue'
+
+const props = defineProps<{
+	field: Field<T>
+	id?: string
+	modelValue?: any
+	parentPath?: string
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: any]
+}>()
+
+const customAttrs = $ref<{ [key: string]: any }>({})
+
+const is = $computed(() => {
+	if (props.field.$el === 'text') return TextInput
+	if (props.field.$el === 'textarea') {
+		customAttrs.multiline = true
+		return TextInput
+	}
+	if (props.field.$el === 'number') return NumberInput
+	if (props.field.$el === 'array') return FieldArray
+	if (props.field.$el === 'select') return SelectInput
+	if (props.field.$el === 'toggle') return ToggleInput
+	if (props.field.$el === 'check') return CheckInput
+	if (props.field.$el === 'richtext') return RichText
+	if (props.field.$el === 'upload') return UploadInput
+	if (props.field.$el === 'file') return FileUpload
+	if (props.field.$el === 'date') return DateInput
+	if (props.field.$el === 'tabs') return TabsNav
+	if (props.field.$el === 'form') return BglForm
+	return props.field.$el ?? 'div'
+})
+
+function getFieldData(path?: string) {
+	if (!path) return ''
+	const keys = path.split(/[.[]/)
+	let current = props.modelValue as any
+
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i]
+		if (!current || typeof current !== 'object' || !(key in current)) {
+			return ''
+		}
+		current = current[key]
+	}
+	return current ?? ''
+}
+function safeClone(obj: any): any {
+	if (obj === null || typeof obj !== 'object') return obj
+
+	const seen = new WeakSet()
+	return JSON.parse(JSON.stringify(obj, (key, value) => {
+		if (typeof value === 'object' && value !== null) {
+			if (seen.has(value)) {
+				return undefined // Remove circular reference
+			}
+			seen.add(value)
+		}
+		return value
+	}))
+}
+function updateField(path: string, value: any) {
+	const keys = path.split(/[.[]/)
+
+	let current = props.modelValue ?? {} as any
+
+	// Build the path, ensuring each level is an object
+	for (let i = 0; i < keys.length - 1; i++) {
+		const key = keys[i]
+		if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
+			current[key] = {}
+		}
+		current = current[key]
+	}
+
+	// Safely clone the value to remove circular references
+	const safeValue = safeClone(value)
+	current[keys[keys.length - 1]] = safeValue
+}
+
+const fieldData = $computed({
+	get: () => {
+		if (!props.id) return props.modelValue ?? props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = getFieldData(props.id)
+		if (props.field.$el === 'form' && !value) return {}
+		return value ?? ''
+	},
+	set: (val: any) => {
+		if (!props.id) return
+		const currentValue = getFieldData(props.id)
+		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
+
+		emit('update:modelValue', val)
+		if (props.field.onUpdate) {
+			props.field.onUpdate(val, currentValue)
+		}
+		updateField(props.id, val)
+	}
+})
+
+const vIf = $computed(() => {
+	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
+	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
+	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, props.modelValue as T)
+	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, props.modelValue as T)
+	return true
+})
+
+const computedOptions = $computed(
+	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
+)
+
+const computedAttrs = $computed(() => {
+	const attrs = { ...customAttrs, ...props.field.attrs }
+	return bindAttrs(attrs, fieldData, props.modelValue)
+})
+
+const computedClass = $computed(
+	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
+)
+</script>
+
+<template>
+	<component
+		v-bind="computedAttrs"
+		:is="is"
+		v-if="vIf"
+		:id="props.id"
+		v-model="fieldData"
+		:required="field.required"
+		:class="computedClass"
+		:label="field.label"
+		:placeholder="field.placeholder || field.label"
+		:defaultValue="field.defaultValue"
+		:disabled="field.disabled"
+		:options="computedOptions"
+		:helptext="field.helptext"
+		:schema="field.attrs?.schema ?? undefined"
+	>
+		<template v-if="field.$el === 'form'">
+			<slot />
+		</template>
+		<template v-else>
+			{{ fieldData }}
+			<BglComponent
+				v-for="(child, ii) in field.children"
+				:id="[props.id, child.id].filter(Boolean).join('.')"
+				:key="child.id || ii"
+				:field="child"
+				:parent-path="props.id"
+			/>
+		</template>
+	</component>
+</template>

package/src/components/FieldSetVue.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+defineProps<{
+	label?: string
+	legend?: string
+}>()
+</script>
+
+<template>
+	<fieldset class="px-1 pt-025 pb-1">
+		<legend class="ms-1">
+			{{ legend || label }}
+		</legend>
+		<slot />
+	</fieldset>
+</template>
+
+<style scoped>
+	fieldset {
+		border: 1px solid var(--border-color);
+		border-radius: var(--card-border-radius);
+		padding: var(--space-md);
+	}
+</style>

package/src/components/ModalForm.vue

@@ -48,7 +48,7 @@ let submitting = $ref(false)
 
 async function runSubmit() {
 	if (submitting) return
-	if (form?.validateForm?.() === false) return
+	if (form?.validateForm() === false) return
 	submitting = true
 	try {
 		await props.onSubmit?.(formData.value)

package/src/components/Pill.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
 	outline?: boolean
 	loading?: boolean
 	value?: string
+	modelValue?: string
 	round?: boolean
 	btn?: BtnProp
 	btnEnd?: BtnProp
@@ -91,8 +92,8 @@ const computedBackgroundColor = $computed(
 			</div>
 			<MaterialIcon v-if="icon" :icon="icon" />
 			<slot />
-			<template v-if="!slots.default && value">
-				{{ value }}
+			<template v-if="!slots.default && (value)">
+				{{ value || modelValue }}
 			</template>
 			<MaterialIcon v-if="iconEnd" :icon="iconEnd" />
 			<div v-if="loading" class="loading" />

package/src/components/TableSchema.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import {
-	BglField,
+	BglComponent,
 	type BglFormSchemaT,
 	MaterialIcon,
 	isDate,
@@ -272,7 +272,8 @@ watch(
 								:field
 							/>
 							<div v-else>
-								<BglField
+								<BglComponent
+									:id="field.id"
 									class="embedded-field"
 									:field
 									:modelValue="row"

package/src/components/form/BglField.vue

@@ -11,23 +11,27 @@ import {
 	ToggleInput,
 	bindAttrs,
 	classify,
-	BagelForm,
 	NumberInput,
 	UploadInput,
+	type BagelFormState,
+	BglForm
 } from '@bagelink/vue'
+import { inject } from 'vue'
 import TabsNav from '../layout/TabsNav.vue'
+import { FORM_STATE_KEY } from './useBagelFormState'
 
-const props = withDefaults(
-	defineProps<{
-		field: Field<T>
-		modelValue: { [key: string]: any }
-	}>(),
-	{
-		modelValue: () => ({}),
-	}
-)
+const props = defineProps<{
+	field: Field<T>
+	id?: string
+	modelValue?: any
+	parentPath?: string
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: any]
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const formState = inject<BagelFormState<T>>(FORM_STATE_KEY)
 
 const customAttrs = $ref<{ [key: string]: any }>({})
 
@@ -47,90 +51,54 @@ const is = $computed(() => {
 	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
 	if (props.field.$el === 'tabs') return TabsNav
-	if (props.field.$el === 'form') return BagelForm
+	if (props.field.$el === 'form') return BglForm
 	return props.field.$el ?? 'div'
 })
 
-const formData = $computed({
-	get: () => props.modelValue,
-	set: (val: any) => {
-		emit('update:modelValue', val)
+const fieldData = $computed({
+	get: () => {
+		if (!props.id) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = formState?.getFieldData(props.id)
+		if (props.field.$el === 'form' && !value) return {}
+		return value ?? ''
 	},
-})
-
-const objPathRegex = /[.\][]/
-
-function setFieldData(key: string, val: any) {
-	const data = { ...props.modelValue }
-	const keys = key.split(objPathRegex)
-	let temp = data
-	for (let i = 0; i < keys.length - 1; i++) {
-		if (!temp[keys[i]]) {
-			temp[keys[i]] = {}
-		}
-		temp = temp[keys[i]]
-	}
-	temp[keys[keys.length - 1]] = val
-	return data
-}
-
-const isForm = $computed(() => props.field.$el === 'form' || props.field.$el === BagelForm)
+	set: (val: any) => {
+		if (!props.id) return
+		const currentValue = formState?.getFieldData(props.id)
+		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
 
-function getFieldData(obj: any, key: string) {
-	if (typeof obj !== 'object' || obj === null) return obj
-	const keys = key.split(objPathRegex)
-	let result = obj
-	for (const k of keys) {
-		if (result && k in result) {
-			result = result[k]
-		} else {
-			return undefined
+		emit('update:modelValue', val)
+		if (props.field.onUpdate) {
+			props.field.onUpdate(val, currentValue)
 		}
+		formState?.updateField(props.id, val)
 	}
-	return result
-}
-
-const fieldData = $computed({
-	set: (val: any) => {
-		if (isForm) {
-			emit('update:modelValue', val)
-			return
-		}
-		if (!props.field.id) return
-		const data = setFieldData(props.field.id, val)
-		emit('update:modelValue', data)
-	},
-	get: () => {
-		if (props.field.id) return getFieldData(props.modelValue, props.field.id)
-		if (isForm) return props.modelValue
-		return props.field.defaultValue ?? ''
-	},
 })
 
 const vIf = $computed(() => {
 	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
 	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
 	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formData as T)
-	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formData as T)
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formState?.data.value as T)
+	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formState?.data.value as T)
 	return true
 })
 
 const computedFieldData = $computed(
-	() => props.field.transform?.(fieldData, props.modelValue as T) ?? fieldData
+	() => props.field.transform?.(fieldData, formState?.data.value as T) ?? fieldData
 )
 
 const computedOptions = $computed(
-	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
+	() => bindAttrs({ options: props.field.options }, fieldData, formState?.data.value).options
 )
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
-	return bindAttrs(attrs, fieldData, props.modelValue)
+	return bindAttrs(attrs, fieldData, formState?.data.value)
 })
 
 const computedClass = $computed(
-	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
+	() => classify(fieldData, formState?.data.value, props.field.class, props.field.attrs?.class)
 )
 </script>
 
@@ -139,7 +107,7 @@ const computedClass = $computed(
 		v-bind="computedAttrs"
 		:is="is"
 		v-if="vIf"
-		:id="field.id"
+		:id="props.id"
 		v-model="fieldData"
 		:required="field.required"
 		:class="computedClass"
@@ -149,14 +117,19 @@ const computedClass = $computed(
 		:disabled="field.disabled"
 		:options="computedOptions"
 		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData as T)"
+		:schema="field.attrs?.schema ?? undefined"
 	>
-		{{ computedFieldData }}
-		<BglField
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			v-model="formData"
-			:field="child"
-		/>
+		<template v-if="field.$el === 'form'">
+			<slot />
+		</template>
+		<template v-else>
+			<BglField
+				v-for="(child, ii) in field.children"
+				:id="[props.id, child.id].filter(Boolean).join('.')"
+				:key="child.id || ii"
+				:field="child"
+				:parent-path="props.id"
+			/>
+		</template>
 	</component>
 </template>

package/src/components/form/BglForm.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { BglField, type BglFormSchemaFnT, Title, useBglSchema, useModal } from '@bagelink/vue'
-import { useSlots, watch } from 'vue'
+import { inject, useSlots, watch } from 'vue'
+import { FORM_STATE_KEY, provideBagelFormState, type BagelFormState } from './useBagelFormState'
 
 export type FormStatus = 'idle' | 'loading' | 'success' | 'error'
 
@@ -22,41 +23,55 @@ const props = withDefaults(
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty'])
 
 const slots = useSlots()
-
 const { showModal } = useModal()
-
 const instAt = new Date()
 const timeSinceInst = () => Date.now() - instAt.getTime()
-let formData = $ref(props.modelValue || {})
-let isDirty = $ref(false)
-let data = $computed({
-	set: (val: any) => {
-		if (timeSinceInst() > 100) {
+
+// Check if we're a nested form
+const existingFormState = inject<BagelFormState | undefined>(FORM_STATE_KEY)
+const isNested = Boolean(existingFormState && props.id)
+
+// Only provide new form state if we're not nested
+const { data, isDirty } = isNested
+	? existingFormState!
+	: provideBagelFormState(props.modelValue)
+
+// Only watch for external updates if we're not nested
+if (!isNested) {
+	watch(() => props.modelValue, (newVal) => {
+		if (JSON.stringify(newVal) !== JSON.stringify(data.value)) {
+			data.value = newVal
+		}
+	}, { deep: true, immediate: true })
+
+	// Emit updates when internal state changes
+	watch(data, (newVal) => {
+		if (timeSinceInst() > 100 && JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
 			emit('dirty')
-			isDirty = true
+			emit('update:modelValue', newVal)
 		}
-		formData = val
-		emit('update:modelValue', val)
-	},
-	get: () => formData,
-})
+	}, { deep: true })
+}
+
 const form = $ref<HTMLFormElement>()
 
 function validateForm() {
-	// ? Ensures that scrolling does not dismiss validation-tooltip in safari
-	setTimeout(() => form?.reportValidity(), 300) // TODO: check if browser is safari
-
+	setTimeout(() => form?.reportValidity(), 300)
 	if (!form) return false
 	return form.reportValidity()
 }
 
-const clearForm = () => (data = {})
+function clearForm() {
+	if (!isNested) {
+		data.value = {}
+	}
+}
 
 watch(
 	() => props.status,
 	(status) => {
-		if (status === 'success') {
-			isDirty = false
+		if (status === 'success' && !isNested) {
+			isDirty.value = false
 			clearForm()
 		}
 	},
@@ -66,9 +81,10 @@ watch(
 function runSubmit() {
 	const isValid = validateForm()
 	if (!isValid) return
-	// props.onSubmit?.(data);
-	emit('submit', { ...formData })
-	isDirty = false
+	emit('submit', { ...data.value })
+	if (!isNested) {
+		isDirty.value = false
+	}
 }
 
 const i18nT = (val: string) => val
@@ -91,9 +107,7 @@ function deleteItem() {
 	)
 }
 
-const computedSchema = $computed(
-	() => useBglSchema({ schema: props.schema })
-)
+const computedSchema = $computed(() => useBglSchema({ schema: props.schema }))
 
 defineExpose({
 	submit: runSubmit,
@@ -106,14 +120,13 @@ defineExpose({
 
 <template>
 	<template v-if="id">
-		<Title v-if="label" tag="h4" :label="label" />
 		<BglField
 			v-for="(field, i) in computedSchema"
+			:id="[id, field.id].filter(Boolean).join('.')"
 			:key="field.id || `${i}p`"
-			v-model="data"
 			:field="field"
 		/>
-		<slot name="submit" :submit="runSubmit" :isDirty :validateForm />
+		<slot name="submit" :submit="runSubmit" :isDirty="isDirty" :validateForm="validateForm" />
 	</template>
 	<form
 		v-else-if="!slots.success || status !== 'success'"
@@ -123,11 +136,11 @@ defineExpose({
 		<Title v-if="label" tag="h4" :label="label" />
 		<BglField
 			v-for="(field, i) in computedSchema"
+			:id="field.id"
 			:key="field.id || `${i}p`"
-			v-model="data"
 			:field="field"
 		/>
-		<slot name="submit" :submit="runSubmit" :isDirty :validateForm />
+		<slot name="submit" :submit="runSubmit" :isDirty="isDirty" :validateForm="validateForm" />
 	</form>
 	<slot v-if="status === 'success'" name="success" />
 	<slot v-if="status === 'error'" name="error" />

package/src/components/form/FieldArray.vue

@@ -7,7 +7,7 @@ import type {
 	BglFormSchemaFnT,
 	Field,
 } from '@bagelink/vue'
-import { BglForm, Btn } from '@bagelink/vue'
+import { BglForm, BglField, Btn } from '@bagelink/vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -25,6 +25,7 @@ const props = withDefaults(
 		defaultValue?: any
 		add?: boolean
 		delete?: boolean
+		transform?: (value: T) => T
 		schema: BglFormSchemaFnT
 		modelValue: T[]
 	}>(),
@@ -53,31 +54,33 @@ function addItem() {
 	emitValue()
 }
 
-// const computedField = $computed(
-// 	() => ({
-// 		label: props.label,
-// 		placeholder: props.placeholder,
-// 		children: props.children,
-// 		class: props.class,
-// 		attrs: props.attrs,
-// 		required: props.required,
-// 		disabled: props.disabled,
-// 		helptext: props.helptext,
-// 		options: props.options,
-// 		defaultValue: props.defaultValue,
-// 		$el: props.el,
-// 	}) as Field<T>
-// ) as Field<Record<string, any>>
+const computedField = $computed(
+	() => ({
+		label: props.label,
+		placeholder: props.placeholder,
+		children: props.children,
+		// class: props.class,
+		attrs: props.attrs,
+		required: props.required,
+		disabled: props.disabled,
+		helptext: props.helptext,
+		options: props.options,
+		defaultValue: props.defaultValue,
+		transform: props.transform,
+		$el: props.el,
+	}) as Field<T>
+) as Field<Record<string, any>>
 </script>
 
 <template>
-	<div>
+	<div :class="props.class">
 		<p class="label mb-05">
 			{{ label }}
 		</p>
-		<div class="-ms-05 ps-05 border-start">
+
+		<div v-if="schema" class="-ms-05 ps-05 border-start">
 			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition p-05">
-				<BglForm v-if="schema" v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
+				<BglForm v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
 				<Btn
 					v-if="props.delete"
 					icon="delete"
@@ -92,6 +95,9 @@ function addItem() {
 				<p>Add {{ label }}</p>
 			</Btn>
 		</div>
+		<template v-else>
+			<BglField v-for="(_, i) in data" :key="i" v-model="data[i]" :field="computedField" @update:model-value="emitValue" />
+		</template>
 	</div>
 </template>
 

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

@@ -47,17 +47,16 @@ const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
 // Methods
 function increment() {
-	if (!max || numberValue + step <= max) {
-		numberValue = (numberValue || 0) + step
-		emit('update:modelValue', numberValue)
-	}
+	if (max !== undefined && (numberValue + step) > max) return
+	numberValue = (numberValue || 0) + step
+	emit('update:modelValue', numberValue)
 }
 
 function decrement() {
-	if (!min || numberValue - step >= min) {
-		numberValue = (numberValue || 0) - step
-		emit('update:modelValue', numberValue)
-	}
+	numberValue = numberValue || 0
+	if (min !== undefined && (numberValue - step) < min) return
+	numberValue = numberValue - step
+	emit('update:modelValue', numberValue)
 }
 
 function formatNumber(num: number) {