@bagelink/vue 0.0.1043 → 0.0.1048

package/dist/utils/BagelFormUtils.d.ts.map

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

package/package.json

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

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,14 @@ const computedClass = $computed(
 		:helptext="field.helptext"
 		:schema="field.attrs?.schema ?? undefined"
 	>
-		<template v-if="field.$el === 'form'">
-			<slot />
-		</template>
-		<template v-else>
+		<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

@@ -115,19 +115,30 @@ const displayTo = $computed(() => formatValue(validTo))
 				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
 				:style="{ '--progress': `${fromPercentage}` }"
 			>
-				{{ displayFrom }}
+				<slot v-if="!multiRange" name="progress" :progress="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
+					{{ displayFrom }}
+				</slot>
+				<slot v-if="multiRange" name="from" :from="displayFrom" :to="displayTo" :min="formatValue(min)" :max="formatValue(max)">
+					{{ displayFrom }}
+				</slot>
 			</p>
 			<p
 				v-if="multiRange && validTo !== max"
 				class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
 				:style="{ '--progress': `${toPercentage}` }"
 			>
-				{{ displayTo }}
+				<slot name="to" :to="displayTo" :from="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
+					{{ displayTo }}
+				</slot>
 			</p>
 		</div>
 		<p class="txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05">
-			<span>{{ formatValue(min) }}</span>
-			<span>{{ formatValue(max) }}</span>
+			<slot name="min" :max="formatValue(max)" :min="formatValue(min)" :from="displayFrom" :to="displayTo" :progress="displayFrom">
+				<span>{{ formatValue(min) }}</span>
+			</slot>
+			<slot name="max" :max="formatValue(max)" :min="formatValue(min)" :from="displayFrom" :to="displayTo" :progress="displayFrom">
+				<span>{{ formatValue(max) }}</span>
+			</slot>
 		</p>
 	</div>
 </template>

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

@@ -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
 		}
 	}