@bagelink/vue 0.0.1033 → 0.0.1037

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

@@ -14,7 +14,7 @@ interface NumberInputProps {
 	icon?: MaterialIcons
 	label?: string
 	placeholder?: string
-	disabled: boolean
+	disabled?: boolean
 	required?: boolean
 	id?: string
 	helptext?: string
@@ -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) {
@@ -97,7 +96,7 @@ watch(() => modelValue, (newVal) => {
 		<label :for="id">
 			{{ label }}
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
-				<Btn v-if="layout && btnLayouts.includes(layout)" icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="increment" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="increment" />
 
 				<input
 					:id
@@ -131,7 +130,7 @@ watch(() => modelValue, (newVal) => {
 					v-if="icon"
 					:icon
 				/>
-				<Btn v-if="layout && btnLayouts.includes(layout)" icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
 
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
 					<Btn icon="add" flat thin class="bgl-ctrl-num-btn" @click="increment" />

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

@@ -45,6 +45,15 @@ const rangeStyle = $computed(() => {
 	if (rtl) return { left: `${width}%`, width: `${fromPercentage}%` }
 	return { right: `${width}%`, width: `${fromPercentage}%` }
 })
+
+watch(() => modelValue, (newVal) => {
+	if (Array.isArray(newVal)) {
+		from = newVal[0]
+		to = newVal[1]
+	} else {
+		from = newVal
+	}
+}, { immediate: true })
 </script>
 
 <template>

package/src/components/form/inputs/Upload/{UploadFile.vue → UploadInput.vue}

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
 import type { BglFile, QueueFile } from './upload.types'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image } from '@bagelink/vue'
 import { watch } from 'vue'
@@ -27,10 +26,11 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
 const bagel = useBagel()
-const fileBaseUrl = $computed(() => (props.baseURL || bagel.fileBaseUrl || 'https://files.bagel.design').replace(/\/$/, ''))
 
 files.setBaseUrl(bagel.host)
 
+const fileBaseUrl = $computed(() => (props.baseURL || bagel.fileBaseUrl || 'https://files.bagel.design').replace(/\/$/, ''))
+const pathToUrl = (path_key: string) => `${fileBaseUrl}/${path_key}`
 const fileQueue = $ref<QueueFile[]>([])
 let storageFiles = $ref<BglFile[]>([])
 const pk = $ref<string[]>([props.modelValue].flat().filter(Boolean) as string[])
@@ -46,7 +46,6 @@ watch(() => pk, (value) => {
 }, { deep: true })
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
-const pathToUrl = (path_key: string) => `${fileBaseUrl}/${path_key}`
 const fileToUrl = (file: File) => URL.createObjectURL(file)
 
 let isDragOver = $ref(false)
@@ -165,18 +164,25 @@ watch(() => props.dirPath, () => {
 				<div class="txt-gray txt-12 flex">
 					<div class="m-05 flex opacity-7 z-99">
 						<Btn
-							v-for="action in [
-								{ tooltip: 'Delete', icon: 'delete' as MaterialIcons, onClick: () => removeFile(path_key) },
-								{ tooltip: 'Replace', icon: 'autorenew' as MaterialIcons, onClick: browse },
-								{ tooltip: 'Download', icon: 'download' as MaterialIcons, href: pathToUrl(path_key), download: path_key.split('/').pop() },
-							]"
-							:key="action.tooltip"
-							v-tooltip="action.tooltip"
+							v-tooltip="'Delete'"
+							color="gray"
+							thin
+							icon="delete"
+							@click="removeFile(path_key)"
+						/>
+						<Btn
+							v-tooltip="'Replace'"
 							color="gray"
 							thin
-							:icon="action.icon"
-							v-bind="action.href ? { href: action.href, download: action.download, target: '_blank' } : {}"
-							@click.stop="action.onClick"
+							icon="autorenew"
+							@click="browse"
+						/>
+						<Btn
+							icon="download"
+							flat
+							thin
+							:href="pathToUrl(path_key)"
+							:download="path_key.split('/').pop()"
 						/>
 						<p
 							v-lightbox="{ src: pathToUrl(path_key), download: true }"
@@ -219,12 +225,11 @@ watch(() => props.dirPath, () => {
 						class="multi-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<img
+						<Image
 							v-if="isImage(path_key)"
+							:pathKey="path_key"
 							class="multi-preview"
-							:src="pathToUrl(path_key)"
-							alt=""
-						>
+						/>
 						<Icon v-else icon="description" class="multi-preview" />
 						<p class="m-0">
 							{{ path_key.split('/').pop() }}
@@ -234,7 +239,7 @@ watch(() => props.dirPath, () => {
 							flat
 							icon="delete"
 							color="red"
-							@click.stop="removeFile(path_key)"
+							@click="removeFile(path_key)"
 						/>
 					</div>
 					<div
@@ -304,7 +309,7 @@ watch(() => props.dirPath, () => {
 						<div v-if="isImage(path_key)" class="h-100">
 							<Image
 								class="single-preview"
-								:src="pathToUrl(path_key)"
+								:pathKey="path_key"
 								alt=""
 							/>
 						</div>

package/src/components/form/inputs/index.ts

@@ -19,4 +19,4 @@ export { default as TableField } from './TableField.vue'
 export { default as TelInput } from './TelInput.vue'
 export { default as TextInput } from './TextInput.vue'
 export { default as ToggleInput } from './ToggleInput.vue'
-export { default as Upload } from './Upload/UploadFile.vue'
+export { default as UploadInput } from './Upload/UploadInput.vue'

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,
 		},
@@ -142,7 +147,7 @@ export function numField(
 	options?: NumFieldOptions,
 ): Field {
 	return {
-		$el: 'text',
+		$el: 'number',
 		class: options?.class,
 		required: options?.required,
 		defaultValue: options?.defaultValue,
@@ -151,13 +156,11 @@ export function numField(
 		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
+		vIf: options?.vIf,
 		attrs: {
-			type: 'number',
-			nativeInputAttrs: {
-				step: options?.step,
-				min: options?.min,
-				max: options?.max,
-			},
+			step: options?.step,
+			min: options?.min,
+			max: options?.max,
 		},
 	}
 }
@@ -170,6 +173,22 @@ export function frmRow(...children: Field[]) {
 	}
 }
 
+interface UploadOptions extends InputOptions {
+	multiple?: boolean
+}
+
+export function uploadField(id: string, label?: string, options?: UploadOptions) {
+	return {
+		$el: 'upload',
+		id,
+		label,
+		vIf: options?.vIf,
+		attrs: {
+			...options,
+		},
+	}
+}
+
 export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
 	if (typeof idOrField === 'string') {
 		return {
@@ -193,6 +212,7 @@ export function telField(id: string, label?: string, options?: { [key: string]:
 		$el: markRaw(TelInput),
 		id,
 		label,
+		vIf: options?.vIf,
 		attrs: options,
 	}
 }
@@ -218,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 },
 	}
 }