@bagelink/vue 0.0.1048 → 0.0.1056

package/src/components/BglComponent.vue

@@ -117,6 +117,10 @@ const fieldData = $computed({
 	}
 })
 
+const computedFieldData = $computed(
+	() => props.field.transform?.(fieldData, props.modelValue as T) ?? fieldData
+)
+
 const vIf = $computed(() => {
 	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
 	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
@@ -132,7 +136,10 @@ const computedOptions = $computed(
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
-	return bindAttrs(attrs, fieldData, props.modelValue)
+	const boundAttrs = bindAttrs(attrs, fieldData, props.modelValue)
+	return Object.fromEntries(
+		Object.entries(boundAttrs).filter(([_, value]) => value !== undefined)
+	)
 })
 
 const computedClass = $computed(
@@ -161,14 +168,19 @@ const computedClass = $computed(
 			<slot />
 		</template>
 		<template v-else>
-			{{ fieldData }}
-			<BglComponent
+			{{ computedFieldData }}
+			<template
 				v-for="(child, ii) in field.children"
-				:id="[props.id, child.id].filter(Boolean).join('.')"
-				:key="child.id || ii"
-				:field="child"
-				:parent-path="props.id"
-			/>
+				:key="ii"
+			>
+				<BglComponent
+					v-if="(typeof child !== 'string')"
+					:id="[props.id, child.id].filter(Boolean).join('.')"
+					:field="child"
+					:parent-path="props.id"
+				/>
+				<span v-else>{{ child }}</span>
+			</template>
 		</template>
 	</component>
 </template>

package/src/components/TableSchema.vue

@@ -113,7 +113,6 @@ function transform(rowData: any) {
 
 	for (const field of schemaFields) {
 		const fieldData = rowData[`${field.id}`]
-
 		const newFieldVal = field.transform?.(fieldData, rowData)
 
 		Object.assign(obj, {

package/src/components/form/BglField.vue

@@ -95,7 +95,10 @@ const computedOptions = $computed(
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
 	delete attrs.schema
-	return bindAttrs(attrs, fieldData, formState?.data.value)
+	const boundAttrs = bindAttrs(attrs, fieldData, formState?.data.value)
+	return Object.fromEntries(
+		Object.entries(boundAttrs).filter(([_, value]) => value !== undefined)
+	)
 })
 
 const computedClass = $computed(
@@ -120,6 +123,7 @@ const computedClass = $computed(
 		:helptext="field.helptext"
 		:schema="field.attrs?.schema ?? undefined"
 	>
+		{{ computedFieldData }}
 		<template v-for="(child, ii) in field.children" :key="ii">
 			<BglField
 				v-if="(typeof child !== 'string')"

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/components/form/inputs/TextInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
+	debounce,
 	MaterialIcon,
 	type MaterialIcons,
-	useDebounceFn,
 } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
@@ -30,13 +30,11 @@ const props = withDefaults(
 		lines?: number | string
 		autocomplete?: AutoFillField
 		autofocus?: boolean
-		debounceDelay?: number
 		onFocusout?: (e: FocusEvent) => void
 	}>(),
 	{
 		type: 'text',
 		modelValue: '',
-		debounceDelay: 300,
 	},
 )
 const emit = defineEmits(['update:modelValue', 'debounce'])
@@ -51,14 +49,14 @@ const rows = $computed(() => {
 	return 1
 })
 
-const debounceUpdate = useDebounceFn(() => { emit('debounce', inputVal) }, props.debounceDelay)
+function emitValue() {
+	emit('update:modelValue', inputVal as string)
+}
 
 function updateInputVal() {
 	if (props.disabled) return
-
-	emit('update:modelValue', inputVal as string)
-
-	void debounceUpdate()
+	emitValue()
+	debounce(emitValue, 300)
 }
 
 watch(

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]
 		},

package/src/utils/index.ts

@@ -1,24 +1,14 @@
 import type { Attributes, BglFormSchemaT } from '@bagelink/vue'
 
-export function debounce<T extends (...args: Parameters<T>) => ReturnType<T>>(
-	callback: T,
-	wait: number,
-	immediate?: boolean
-): (...args: Parameters<T>) => void {
-	let timeout: NodeJS.Timeout | undefined
-
-	return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
-		const later = () => {
-			timeout = undefined
-			if (!immediate) callback.apply(this, args)
-		}
-
-		const callNow = immediate && timeout === undefined
-		clearTimeout(timeout)
-		timeout = setTimeout(later, wait)
-
-		if (callNow) callback.apply(this, args)
-	}
+const debouncers = new Map<() => void, ReturnType<typeof setTimeout>>()
+
+export function debounce(fn: () => void, wait: number = 500) {
+	clearTimeout(debouncers.get(fn))
+	const timeout = setTimeout(() => {
+		fn()
+		debouncers.delete(fn)
+	}, wait)
+	debouncers.set(fn, timeout)
 }
 
 export function keyToLabel(key?: string): string | undefined {