@bagelink/vue 0.0.1117 → 0.0.1119

package/package.json

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

package/src/components/ModalForm.vue

@@ -1,12 +1,6 @@
 <script lang="ts" setup>
-import {
-	BagelForm,
-	type BglFormSchemaFnT,
-	Btn,
-	type BtnOptions,
-	Modal,
-	useBagel,
-} from '@bagelink/vue'
+import type { BglFormSchemaFnT, BtnOptions, BagelForm } from '@bagelink/vue'
+import { Btn, Modal, useBagel, BagelForm2 } from '@bagelink/vue'
 
 const props = defineProps<{
 	side?: boolean
@@ -80,15 +74,16 @@ defineExpose({ setFormValues })
 		:visible="visible"
 		:dismissable
 		:title
-		@update:visible="($event) => emit('update:visible', $event)"
+		@update:visible="($event: boolean) => emit('update:visible', $event)"
 	>
-		<BagelForm
+		<BagelForm2 v-model="formData" :schema="computedFormSchema" @submit="runSubmit" />
+		<!-- <BagelForm
 			v-if="visible"
 			ref="form"
 			v-model="formData"
 			:schema="computedFormSchema"
 			@submit="runSubmit"
-		/>
+		/> -->
 		<template v-if="onDelete || onSubmit" #footer>
 			<div>
 				<Btn thin flat value="Cancel" @click="closeModal" />

package/src/components/form/BagelForm.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { BglFormSchemaT, BglFormSchemaFnT, Field } from '@bagelink/vue'
+import type { VNode } from 'vue'
+import { BglForm, CheckInput, DateInput, FieldArray, FileUpload, NumberInput, RichText, SelectInput, TabsNav, TextInput, ToggleInput, UploadInput } from '@bagelink/vue'
+import { h, watch } from 'vue'
+
+interface Props {
+	modelValue: Record<string, any>
+	schema?: BglFormSchemaFnT
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: () => ({}),
+	schema: undefined
+})
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: Record<string, any>): void
+	(e: 'submit', value: Record<string, any>): void
+}>()
+
+const form = $ref<HTMLFormElement>()
+let formData = $ref({ ...props.modelValue })
+let initialFormData = $ref({ ...props.modelValue })
+
+// Keep formData in sync with modelValue prop
+watch(() => props.modelValue, (newValue) => {
+	formData = { ...newValue }
+}, { immediate: true, deep: true })
+
+const resolvedSchema = $computed<BglFormSchemaT | undefined>(() => {
+	if (!props.schema) return undefined
+	return typeof props.schema === 'function' ? props.schema() : props.schema
+})
+
+const isDirty = $computed(() => {
+	const current = JSON.stringify(formData)
+	const initial = JSON.stringify(initialFormData)
+	return current !== initial
+})
+
+function getComponent(field: Field) {
+	const componentMap = {
+		text: TextInput,
+		textarea: TextInput,
+		number: NumberInput,
+		array: FieldArray,
+		select: SelectInput,
+		toggle: ToggleInput,
+		check: CheckInput,
+		richtext: RichText,
+		upload: UploadInput,
+		file: FileUpload,
+		date: DateInput,
+		tabs: TabsNav,
+		bglform: BglForm
+	}
+
+	if (field.$el === 'textarea' && !field.attrs?.multiline) {
+		field.attrs = { ...field.attrs, multiline: true }
+	}
+
+	return componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
+}
+
+function processFieldValue(fieldType: any, value: any): any {
+	if (value == null) return value
+	if (fieldType === 'select' && typeof value === 'object') return value.value
+	if (typeof value === 'object' && 'value' in value) return value.value
+	return value
+}
+
+function updateFormData(fieldId: string, value: any, fieldType?: any) {
+	formData = {
+		...formData,
+		[fieldId]: processFieldValue(fieldType, value)
+	}
+	emit('update:modelValue', formData)
+}
+
+function handleSubmit() {
+	emit('submit', formData)
+	initialFormData = { ...formData }
+}
+
+function renderSchemaField(field: Field): VNode | null {
+	const Component = getComponent(field)
+	if (!Component) return null
+
+	const { $el, vIf, 'v-if': vIf2, children, ...fieldProps } = field
+	const currentValue = field.id ? formData[field.id] : undefined
+
+	const props: Record<string, any> = {
+		...fieldProps,
+		'modelValue': processFieldValue(field.$el, currentValue),
+		'onUpdate:modelValue': (value: any) => {
+			if (!field.id) return
+			updateFormData(field.id, value, field.$el)
+			field.onUpdate?.(value, formData)
+		}
+	}
+
+	// Handle dynamic props
+	if (field.attrs) {
+		Object.entries(field.attrs).forEach(([key, value]) => {
+			props[key] = typeof value === 'function' ? value(field, formData) : value
+		})
+	}
+
+	if (field.class) {
+		props.class = typeof field.class === 'function'
+			? field.class(field, formData)
+			: field.class
+	}
+
+	const slots = field.children?.length
+		? {
+			default: () => field.children!.map(child => typeof child === 'string' ? child : renderSchemaField(child)
+			)
+		}
+		: undefined
+
+	return h(Component as any, props, slots)
+}
+
+function shouldRenderField(field: Field): boolean {
+	const condition = field.vIf ?? field['v-if']
+	if (condition === undefined) return true
+	return typeof condition === 'function'
+		? condition(formData[field.id as string], formData)
+		: !!condition
+}
+
+defineExpose({ form, isDirty })
+</script>
+
+<template>
+	<form ref="form" @submit.prevent="handleSubmit">
+		<template v-if="resolvedSchema">
+			<template v-for="(field, index) in resolvedSchema" :key="field.id || index">
+				<component
+					:is="renderSchemaField(field)"
+					v-if="shouldRenderField(field)"
+				/>
+			</template>
+		</template>
+		<slot v-else />
+		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" />
+	</form>
+</template>

package/src/components/form/index.ts

@@ -1,6 +1,6 @@
+export { default as BagelForm2 } from './BagelForm.vue'
 export { default as BglField } from './BglField.vue'
 export { default as BglForm } from './BglForm.vue'
 export { default as BagelForm } from './BglForm.vue'
-export { default as BglMultiStepForm } from './BglMultiStepForm.vue'
 export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

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

@@ -5,7 +5,7 @@ import { watch } from 'vue'
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
 interface NumberInputProps {
-	modelValue?: number
+	modelValue?: number | string
 	min?: number
 	max?: number
 	step?: number
@@ -43,7 +43,7 @@ const {
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref(modelValue || 0)
+let numberValue = $ref(Number.parseFloat(`${modelValue}`) || 0)
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
@@ -88,7 +88,7 @@ watch(() => numberValue, () => {
 
 watch(() => modelValue, (newVal) => {
 	if (newVal !== numberValue)	{
-		numberValue = newVal || 0
+		numberValue = Number.parseFloat(`${newVal}`) || 0
 	}
 }, { immediate: true })
 </script>