@bagelink/vue 0.0.1045 → 0.0.1054

package/src/components/form/BglField.vue

@@ -22,7 +22,7 @@ import { FORM_STATE_KEY } from './useBagelFormState'
 
 const props = defineProps<{
 	field: Field<T>
-	id?: string
+	fieldID?: string
 	modelValue?: any
 	parentPath?: string
 }>()
@@ -51,27 +51,27 @@ 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 BglForm
+	if (props.field.$el === 'bglform') return BglForm
 	return props.field.$el ?? 'div'
 })
 
 const fieldData = $computed({
 	get: () => {
-		if (!props.id) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
-		const value = formState?.getFieldData(props.id)
+		if (!props.fieldID) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = formState?.getFieldData(props.fieldID)
 		if (props.field.$el === 'form' && !value) return {}
 		return value ?? ''
 	},
 	set: (val: any) => {
-		if (!props.id) return
-		const currentValue = formState?.getFieldData(props.id)
+		if (!props.fieldID) return
+		const currentValue = formState?.getFieldData(props.fieldID)
 		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
 
 		emit('update:modelValue', val)
 		if (props.field.onUpdate) {
 			props.field.onUpdate(val, currentValue)
 		}
-		formState?.updateField(props.id, val)
+		formState?.updateField(props.fieldID, val)
 	}
 })
 
@@ -94,6 +94,7 @@ const computedOptions = $computed(
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
+	delete attrs.schema
 	return bindAttrs(attrs, fieldData, formState?.data.value)
 })
 
@@ -107,8 +108,8 @@ const computedClass = $computed(
 		v-bind="computedAttrs"
 		:is="is"
 		v-if="vIf"
-		:id="props.id"
 		v-model="fieldData"
+		:fieldID="props.fieldID"
 		:required="field.required"
 		:class="computedClass"
 		:label="field.label"
@@ -119,17 +120,15 @@ const computedClass = $computed(
 		:helptext="field.helptext"
 		:schema="field.attrs?.schema ?? undefined"
 	>
-		<template v-if="field.$el === 'form'">
-			<slot />
-		</template>
-		<template v-else>
+		{{ computedFieldData }}
+		<template v-for="(child, ii) in field.children" :key="ii">
 			<BglField
-				v-for="(child, ii) in field.children"
-				:id="[props.id, child.id].filter(Boolean).join('.')"
-				:key="child.id || ii"
+				v-if="(typeof child !== 'string')"
+				:fieldID="[props.fieldID, child.id].filter(Boolean).join('.')"
 				:field="child"
-				:parent-path="props.id"
+				:parent-path="props.fieldID"
 			/>
+			<span v-else>{{ child }}</span>
 		</template>
 	</component>
 </template>

package/src/components/form/BglForm.vue

@@ -8,28 +8,30 @@ export type FormStatus = 'idle' | 'loading' | 'success' | 'error'
 const props = withDefaults(
 	defineProps<{
 		label?: string
-		id?: string
+		fieldID?: string
 		schema: BglFormSchemaFnT<any>
 		modelValue?: { [key: string]: any }
 		onDelete?: (id: string) => void
 		onSubmit?: (data: any) => void
 		status?: FormStatus
+		tag?: 'template' | 'form'
 	}>(),
 	{
 		modelValue: () => ({}),
+		tag: 'form',
 	},
 )
 
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty'])
 
-const slots = useSlots()
+const slots = useSlots() as any
 const { showModal } = useModal()
 const instAt = new Date()
 const timeSinceInst = () => Date.now() - instAt.getTime()
 
 // Check if we're a nested form
 const existingFormState = inject<BagelFormState | undefined>(FORM_STATE_KEY)
-const isNested = Boolean(existingFormState && props.id)
+const isNested = Boolean(existingFormState && props.fieldID)
 
 // Only provide new form state if we're not nested
 const { data, isDirty } = isNested
@@ -119,11 +121,11 @@ defineExpose({
 </script>
 
 <template>
-	<template v-if="id">
+	<template v-if="tag === 'template'">
 		<BglField
 			v-for="(field, i) in computedSchema"
-			:id="[id, field.id].filter(Boolean).join('.')"
 			:key="field.id || `${i}p`"
+			:fieldID="field.id"
 			:field="field"
 		/>
 		<slot name="submit" :submit="runSubmit" :isDirty="isDirty" :validateForm="validateForm" />
@@ -136,8 +138,8 @@ defineExpose({
 		<Title v-if="label" tag="h4" :label="label" />
 		<BglField
 			v-for="(field, i) in computedSchema"
-			:id="field.id"
 			:key="field.id || `${i}p`"
+			:fieldID="field.id"
 			:field="field"
 		/>
 		<slot name="submit" :submit="runSubmit" :isDirty="isDirty" :validateForm="validateForm" />

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

@@ -41,8 +41,8 @@ const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
 
 watch(() => props.modelValue, (newVal) => {
 	if (Array.isArray(newVal) && multiRange) {
-		from = newVal[0]
-		to = newVal[1]
+		from = newVal[0] ?? min
+		to = newVal[1] ?? max
 	} else if (!Array.isArray(newVal)) {
 		from = newVal ?? min
 		to = max
@@ -84,7 +84,7 @@ const displayTo = $computed(() => formatValue(validTo))
 				class="from"
 				type="range"
 				:min="min"
-				:max="multiRange ? validTo : max"
+				:max="max"
 				:step="step"
 				:required="required"
 				:disabled="disabled"
@@ -96,7 +96,7 @@ const displayTo = $computed(() => formatValue(validTo))
 				:value="validTo"
 				class="to"
 				type="range"
-				:min="validFrom"
+				:min="min"
 				:max="max"
 				:step="step"
 				:required="required"

package/src/types/BagelForm.ts

@@ -29,7 +29,7 @@ export interface BaseBagelField<T = { [key: string]: any }> {
 	'id'?: string
 	'label'?: string
 	'placeholder'?: string
-	'children'?: Field<T>[]
+	'children'?: (Field<T> | string)[]
 	'class'?: AttributeValue | AttributeFn<T>
 	'attrs'?: Attributes<T>
 	'required'?: boolean

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import { BagelForm, type BglFormSchemaT, type Field, type Option, TelInput } from '@bagelink/vue'
+import { type BglFormSchemaT, type Field, type Option, TelInput } from '@bagelink/vue'
 import { markRaw } from 'vue'
 
 interface InputOptions {
@@ -192,7 +192,7 @@ export function uploadField(id: string, label?: string, options?: UploadOptions)
 export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
 	if (typeof idOrField === 'string') {
 		return {
-			$el: markRaw(BagelForm),
+			$el: 'bagelform',
 			id: idOrField,
 			attrs: {
 				schema: [idOrField, ...schema],
@@ -200,7 +200,7 @@ export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
 		}
 	}
 	return {
-		$el: markRaw(BagelForm),
+		$el: 'bagelform',
 		attrs: {
 			schema: [idOrField, ...schema]
 		},
@@ -221,7 +221,7 @@ 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)
+			const child = findBglFieldById(id, field.children.filter(c => typeof c !== 'string'))
 			if (child) return child
 		}
 	}