@bagelink/vue 0.0.1035 → 0.0.1041

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) {

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

@@ -15,6 +15,7 @@ defineProps<{
 	groupName: string
 	options: RadioOption<ContextObjType>[]
 	deletable?: boolean
+	required?: boolean
 }>()
 defineEmits(['delete'])
 
@@ -36,6 +37,7 @@ const selectedOption = defineModel('modelValue')
 				type="radio"
 				:name="groupName"
 				:value="opt.value"
+				:required="required"
 			>
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch } from 'vue'
 
-interface props {
+export interface RangeInputProps {
 	modelValue: number | [number, number]
 	min?: number
 	max?: number
@@ -11,45 +11,81 @@ interface props {
 	disabled?: boolean
 	id?: string
 	rtl?: boolean
+	multiRange?: boolean
 }
 
-const { min = 0, max = 100, step = 1, modelValue, label, disabled, id, rtl } = defineProps<props>()
-
+const props = defineProps<RangeInputProps>()
 const emit = defineEmits(['update:modelValue'])
 
-const isRange = $computed(() => Array.isArray(modelValue))
+const {
+	min = 0,
+	max = 100,
+	step = 1,
+	label,
+	disabled,
+	id,
+	rtl,
+	multiRange
+} = props
 
 let from = $ref<number>(min)
 let to = $ref<number>(max)
 
-const validFrom = $computed(() => Math.min(Math.max(from, min), to)) as number
-const validTo = $computed(() => Math.max(Math.min(to, max), from)) as number
+let isExternalUpdate = $ref(true)
+
+const validFrom = $computed(() => Math.min(Math.max(from, min), multiRange ? to : max))
+const validTo = $computed(() => Math.max(Math.min(to, max), from))
+
+watch(() => props.modelValue, (newVal) => {
+	isExternalUpdate = true
+	if (multiRange && Array.isArray(newVal)) {
+		from = newVal[0]
+		to = newVal[1]
+	} else if (!multiRange && !Array.isArray(newVal)) {
+		from = newVal ?? min
+		to = max
+	}
+}, { immediate: true })
+
+watch([() => validFrom, () => validTo], () => {
+	if (!isExternalUpdate) {
+		if (multiRange) {
+			emit('update:modelValue', [validFrom, validTo])
+		} else {
+			emit('update:modelValue', validFrom)
+		}
+	}
+	isExternalUpdate = false
+})
 
-function emitValue() {
-	emit('update:modelValue', isRange ? [validFrom, validTo] : validFrom)
+function handleInput(value: number, isFromInput: boolean) {
+	isExternalUpdate = false
+	if (isFromInput) {
+		from = value
+	} else {
+		to = value
+	}
 }
 
-watch(() => validFrom, (newVal) => {
-	if (from !== newVal) from = newVal
-})
-watch(() => validTo, (newVal) => {
-	if (to !== newVal) to = newVal
-})
-
 const fromPercentage = $computed(() => ((validFrom - min) / (max - min)) * 100)
 const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
 
 const rangeStyle = $computed(() => {
-	const width = ((validTo - validFrom) / (max - min)) * 100
-	if (isRange)	return { left: `${fromPercentage}%`, width: `${width}%` }
-	if (rtl) return { left: `${width}%`, width: `${fromPercentage}%` }
-	return { right: `${width}%`, width: `${fromPercentage}%` }
+	if (multiRange) {
+		return {
+			left: `${fromPercentage}%`,
+			width: `${toPercentage - fromPercentage}%`
+		}
+	}
+	return rtl
+		? { left: `${100 - fromPercentage}%`, width: `${fromPercentage}%` }
+		: { left: '0', width: `${fromPercentage}%` }
 })
 </script>
 
 <template>
 	<div>
-		<label class="label">{{ label }}</label>
+		<label v-if="label" class="label">{{ label }}</label>
 		<div class="range-slider relative w-100" :dir="rtl ? 'rtl' : 'ltr'">
 			<input
 				:id="id"
@@ -57,25 +93,25 @@ const rangeStyle = $computed(() => {
 				class="from"
 				type="range"
 				:min="min"
-				:max="max"
+				:max="multiRange ? to : max"
 				:step="step"
 				:required="required"
 				:disabled="disabled"
-				aria-label="Minimum value"
-				@change="emitValue"
+				:aria-label="multiRange ? 'Minimum value' : 'Value'"
+				@input="(e) => handleInput(+(e.target as HTMLInputElement).value, true)"
 			>
 			<input
-				v-if="isRange"
+				v-if="multiRange"
 				v-model="to"
 				class="to"
 				type="range"
-				:min="min"
+				:min="from"
 				:max="max"
 				:step="step"
 				:required="required"
 				:disabled="disabled"
 				aria-label="Maximum value"
-				@change="emitValue"
+				@input="(e) => handleInput(+(e.target as HTMLInputElement).value, false)"
 			>
 			<div class="track absolute pointer-events-none overflow-hidden round">
 				<div
@@ -84,31 +120,23 @@ const rangeStyle = $computed(() => {
 				/>
 			</div>
 			<p
-				v-if="from !== min"
+				v-if="validFrom !== min"
 				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
 				:style="{ '--progress': `${fromPercentage}` }"
 			>
-				<span>
-					{{ from }}
-				</span>
+				{{ validFrom }}
 			</p>
 			<p
-				v-if="isRange && to !== max"
+				v-if="multiRange && validTo !== max"
 				class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
 				:style="{ '--progress': `${toPercentage}` }"
 			>
-				<span>
-					{{ to }}
-				</span>
+				{{ validTo }}
 			</p>
 		</div>
 		<p class="txt-center txt-14 range-slider-txt flex space-between opacity-4 mx-05">
-			<span>
-				{{ min }}
-			</span>
-			<span>
-				{{ max }}
-			</span>
+			<span>{{ min }}</span>
+			<span>{{ max }}</span>
 		</p>
 	</div>
 </template>
@@ -125,8 +153,8 @@ const rangeStyle = $computed(() => {
 	opacity: 1;
 	transform: scale(1);
 	top: calc(var(--bgl-range-thumb-size) / 1) ;
-
 }
+
 .range-slider {
 	height: var(--bgl-range-track-size);
 	display: flex;
@@ -158,9 +186,10 @@ input[type="range"]::-webkit-slider-thumb {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   position: relative;
   z-index: 2;
-  cursor: pointer;
+  cursor: grab;
   transition: var(--bgl-transition);
 }
+
 input[type="range"]::-webkit-slider-thumb:hover {
 	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
 	filter: brightness(90%);
@@ -171,6 +200,10 @@ input[type="range"]:focus::-webkit-slider-thumb {
   box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
 }
 
+input[type="range"]:active::-webkit-slider-thumb {
+	cursor: grabbing;
+}
+
 .track {
   height: var(--bgl-range-track-height);
   background: var(--bgl-bg);

package/src/components/form/useBagelFormState.ts

@@ -0,0 +1,87 @@
+import { inject, provide, ref, type Ref } from 'vue'
+
+export const FORM_STATE_KEY = Symbol('bagelFormState')
+
+export interface BagelFormState<T = any> {
+	data: Ref<T>
+	getFieldData: (path?: string) => any
+	updateField: (path: string, value: any) => void
+	isDirty: Ref<boolean>
+}
+
+// Helper function to safely clone objects without circular references
+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
+	}))
+}
+
+export function provideBagelFormState<T>(initialData: T) {
+	const data = ref(initialData) as Ref<T>
+	const isDirty = ref(false)
+
+	const getFieldData = (path?: string) => {
+		if (!path) return ''
+		const keys = path.split(/[.[]/)
+		let current = data.value 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 ?? ''
+	}
+
+	const updateField = (path: string, value: any) => {
+		const keys = path.split(/[.[]/)
+
+		// Initialize the root if it's not an object
+		if (typeof data.value !== 'object' || data.value === null) {
+			data.value = {} as T
+		}
+
+		let current = data.value 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
+		isDirty.value = true
+	}
+
+	const state: BagelFormState<T> = {
+		data,
+		getFieldData,
+		updateField,
+		isDirty
+	}
+
+	provide(FORM_STATE_KEY, state)
+	return state
+}
+
+export function useBagelFormState<T>() {
+	const state = inject<BagelFormState<T>>(FORM_STATE_KEY)
+	if (!state) throw new Error('BagelFormState must be provided')
+	return state
+}

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as AddressSearch } from './AddressSearch.vue'
 export { default as Alert } from './Alert.vue'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
+export { default as BglComponent } from './BglComponent.vue'
 export { default as BglVideo } from './BglVideo.vue'
 export { default as Btn } from './Btn.vue'
 export { default as Card } from './Card.vue'
@@ -11,6 +12,7 @@ export { default as Carousel } from './Carousel.vue'
 export * from './dashboard'
 export { default as DataPreview } from './DataPreview.vue'
 export { default as Dropdown } from './Dropdown.vue'
+export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
 export { default as IframeVue } from './IframeVue.vue'
@@ -22,17 +24,18 @@ export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed.vue'
 export { default as MaterialIcon } from './MaterialIcon.vue'
 export { default as Icon } from './MaterialIcon.vue'
+
 export { default as Modal } from './Modal.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
-
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as TableSchema } from './TableSchema.vue'
+
 export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'
-export { default as TopBar } from './TopBar.vue'
 
+export { default as TopBar } from './TopBar.vue'
 export { default as Zoomer } from './Zoomer.vue'

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components'
+export * from './components/form/useBagelFormState'
 export * from './composables'
 export {
 	bagelInjectionKey,
@@ -13,5 +14,6 @@ export * from './types'
 export * from './utils'
 export * from './utils/allCountries'
 export * from './utils/constants'
-export * from './utils/timeAgo'
 import './styles/bagel.css'
+
+export * from './utils/timeAgo'

package/src/utils/BagelFormUtils.ts

@@ -8,6 +8,7 @@ interface InputOptions {
 	defaultValue?: string
 	disabled?: boolean
 	helptext?: string
+	vIf?: boolean | ((item: any, row: any) => boolean)
 }
 
 type DateOptions = InputOptions
@@ -50,6 +51,7 @@ export function richText(
 		required: options?.required,
 		id,
 		label,
+		vIf: options?.vIf,
 		placeholder: options?.placeholder,
 		attrs: {},
 	}
@@ -66,6 +68,7 @@ export function txtField(
 		required: options?.required,
 		id,
 		label,
+		vIf: options?.vIf,
 		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		defaultValue: options?.defaultValue,
@@ -93,6 +96,7 @@ export function slctField(
 		required: config?.required,
 		label,
 		defaultValue: config?.defaultValue,
+		vIf: config?.vIf,
 		attrs: {
 			disabled: config?.disabled,
 			searchable: config?.searchable,
@@ -130,6 +134,7 @@ export function dateField(
 		disabled: options?.disabled,
 		label,
 		defaultValue: options?.defaultValue,
+		vIf: options?.vIf,
 		attrs: {
 			disabled: options?.disabled,
 		},
@@ -151,6 +156,7 @@ export function numField(
 		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
+		vIf: options?.vIf,
 		attrs: {
 			step: options?.step,
 			min: options?.min,
@@ -176,7 +182,10 @@ export function uploadField(id: string, label?: string, options?: UploadOptions)
 		$el: 'upload',
 		id,
 		label,
-		attrs: options,
+		vIf: options?.vIf,
+		attrs: {
+			...options,
+		},
 	}
 }
 
@@ -203,6 +212,7 @@ export function telField(id: string, label?: string, options?: { [key: string]:
 		$el: markRaw(TelInput),
 		id,
 		label,
+		vIf: options?.vIf,
 		attrs: options,
 	}
 }
@@ -228,6 +238,7 @@ export function arrField(id: string, label: string, schema: BglFormSchemaT, opti
 		label,
 		id,
 		$el: 'array',
+		vIf: options?.vIf,
 		attrs: { schema, delete: true, add: true, ...options },
 	}
 }