@bagelink/vue 1.4.136 → 1.4.141

package/src/components/form/inputs/RichText/utils/formatting.ts

@@ -19,30 +19,32 @@ export function formatting(state: EditorState) {
 		// Don't apply inline styles directly to block elements
 		if (parentBlock?.tagName.match(/^H[1-6]|P|BLOCKQUOTE|LI$/)) {
 			if (!range.collapsed && range.toString().trim()) {
-				const span = doc.createElement('span') as HTMLSpanElement
-				if (command === 'underline') span.style.textDecoration = 'underline'
-				else if (command === 'bold') span.style.fontWeight = 'bold'
-				else if (command === 'italic') span.style.fontStyle = 'italic'
-
-				if (isRTL) span.dir = 'rtl'
-				range.surroundContents(span)
+				let element: HTMLElement
+				if (command === 'underline') element = doc.createElement('u')
+				else if (command === 'bold') element = doc.createElement('b')
+				else if (command === 'italic') element = doc.createElement('i')
+				else return
+
+				if (isRTL) element.dir = 'rtl'
+				range.surroundContents(element)
 			}
 		} else {
 			if (range.collapsed) return // No selection, nothing to format
 
-			const span = doc.createElement('span')
-			if (command === 'bold') span.style.fontWeight = 'bold'
-			else if (command === 'italic') span.style.fontStyle = 'italic'
-			else if (command === 'underline') span.style.textDecoration = 'underline'
+			let element: HTMLElement
+			if (command === 'bold') element = doc.createElement('b')
+			else if (command === 'italic') element = doc.createElement('i')
+			else if (command === 'underline') element = doc.createElement('u')
+			else return
 
 			try {
-				range.surroundContents(span)
-			} catch (e) {
+				range.surroundContents(element)
+			} catch {
 				// If surroundContents fails (e.g., for selections across multiple nodes)
 				// Extract the fragment, wrap it, and insert it back
 				const fragment = range.extractContents()
-				span.appendChild(fragment)
-				range.insertNode(span)
+				element.appendChild(fragment)
+				range.insertNode(element)
 			}
 		}
 	}

package/src/components/form/inputs/RichText/utils/selection.ts

@@ -25,26 +25,23 @@ export function isStyleActive(style: string, doc: Document) {
 
 	// Define style checkers for different formatting types
 	const styleCheckers: { [key: string]: (el: Element) => boolean } = {
-		// Text formatting - check for elements or inline styles
+		// Text formatting - check for elements only, not CSS styles
 		bold: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'strong' || tagName === 'b') return true
-			const styles = window.getComputedStyle(el)
-			return styles.fontWeight === 'bold' || styles.fontWeight === '700'
+			// Only consider <b> and <strong> tags, not CSS bold styling
+			return tagName === 'strong' || tagName === 'b'
 		},
 
 		italic: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'em' || tagName === 'i') return true
-			const styles = window.getComputedStyle(el)
-			return styles.fontStyle === 'italic'
+			// Only consider <i> and <em> tags, not CSS italic styling
+			return tagName === 'em' || tagName === 'i'
 		},
 
 		underline: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'u') return true
-			const styles = window.getComputedStyle(el)
-			return styles.textDecoration.includes('underline')
+			// Only consider <u> tag, not CSS underline styling
+			return tagName === 'u'
 		},
 
 		// Block elements
@@ -66,6 +63,30 @@ export function isStyleActive(style: string, doc: Document) {
 		unorderedList: (el) => {
 			// Check if we're inside an unordered list
 			return !!el.closest('ul')
+		},
+
+		// Text alignment
+		alignLeft: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'left'
+		},
+		alignCenter: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'center'
+		},
+		alignRight: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'right'
+		},
+		alignJustify: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'justify'
+		},
+
+		// Text direction
+		textDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'rtl'
 		}
 	}
 
@@ -141,7 +162,7 @@ export function restoreSelection(
 	try {
 		range.setStart(info.originalStart, info.originalStartOffset)
 		range.setEnd(info.originalEnd, info.originalEndOffset)
-	} catch (e) {
+	} catch {
 		if (fallbackNode) {
 			range.selectNodeContents(fallbackNode)
 		}

package/src/composables/useSchemaField.ts

@@ -19,7 +19,8 @@ import {
 	TelInput,
 	ColorInput,
 	RangeInput,
-	EmailInput
+	EmailInput,
+	getNestedValue
 } from '@bagelink/vue'
 import { h, isVNode } from 'vue'
 
@@ -93,7 +94,9 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			field.attrs = { ...field.attrs, multiline: true }
 		}
 
-		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
+		return typeof field.$el === 'object'
+			? field.$el
+			: (componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div')
 	}
 
 	function renderChild(child: SchemaChild<T, Path<T>>, slots?: BaseBagelField<T, Path<T>>['slots']) {
@@ -122,7 +125,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 				const vIfCurrentValue = field.id
 					? ('get' in (rowData || {})
 						? (rowData as any)?.get(field.id)
-						: (rowData as any)?.[field.id as keyof T])
+						: getNestedValue(rowData, field.id as string))
 					: undefined
 
 				const vIfResult = field.id
@@ -132,7 +135,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 					return
 				}
 			} else if (typeof condition === 'string') {
-				if (!(rowData as any)?.[condition]) {
+				if (!getNestedValue(rowData, condition)) {
 					return
 				}
 			} else if (!condition) {
@@ -143,8 +146,6 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		const {
 			$el: _$el,
 			children,
-			options: _options,
-			attrs: _attrs,
 			class: fieldClass,
 			id,
 			transform,
@@ -158,11 +159,11 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			...fieldProps
 		} = field
 
-		// Use the get method if available, otherwise fall back to direct access
+		// Use the get method if available, otherwise fall back to nested value access
 		const currentValue = field.id
 			? ('get' in (rowData || {})
 				? (rowData as any)?.get(field.id)
-				: (rowData as any)?.[field.id as keyof T])
+				: getNestedValue(rowData, field.id as string))
 			: undefined
 
 		// Apply transform with conditional args: provide (val,row) only when id exists; otherwise provide only (row)
@@ -195,7 +196,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		// Wire top-level onClick with conditional args
 		if (typeof (field as any).onClick === 'function') {
 			const original = (field as any).onClick as (val?: any, row?: T) => void
-			props.onClick = (..._args: any[]) => {
+			props.onClick = () => {
 				if (id) {
 					original(currentValue, rowData)
 				} else {
@@ -222,7 +223,11 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		}
 
 		// Remove undefined props to avoid vue warnings
-		Object.keys(props).forEach(key => props[key] === undefined && delete props[key])
+		Object.keys(props).forEach((key) => {
+			if (props[key] === undefined) {
+				delete props[key]
+			}
+		})
 
 		// Add options if they exist in the field
 		if (field.options) {
@@ -272,10 +277,13 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		if (field.attrs) {
 			const boundAttrs = bindAttrs(field.attrs, currentValue, rowData)
 			Object.entries(boundAttrs).forEach(([key, value]) => {
+				// Skip $el as it's not a DOM attribute
+				if (key === '$el') return
+
 				if (typeof value === 'function') {
 					if (key === 'onClick') {
 						const original = value as (val?: any, row?: T) => void
-						props.onClick = (..._args: any[]) => {
+						props.onClick = () => {
 							if (id) {
 								original(currentValue, rowData)
 							} else {
@@ -301,7 +309,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		const componentSlots: Parameters<typeof h>[1] = {}
 
 		// Add default slot if there are children
-		if (children?.length) {
+		if (children && children.length > 0) {
 			componentSlots.default = () => children
 				.map(child => renderChild(child, slots))
 				.filter(Boolean) // Filter out null results from vIf
@@ -309,7 +317,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 
 		// For slot value components, add the transformed value as default slot content
 		if (isSlotValueComponent && transformedValue !== undefined) {
-			componentSlots.default = () => transformedValue?.toString() || ''
+			componentSlots.default = () => String(transformedValue ?? '')
 		}
 
 		// Handle custom slots from the field
@@ -332,20 +340,24 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 							return renderField(schemaField as BaseBagelField<T, Path<T>>, slots)
 						})
 					}
+					return []
 				}
 			})
 		}
 
 		// Handle custom slot content from parent
 
-		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, Path<T>> | undefined)?.({ row: rowData, field }) : undefined
+		const slotContent = field.id
+			? (slots?.[field.id] as VNodeFn<T, Path<T>> | undefined)?.({ row: rowData, field })
+			: undefined
 		// field.id && slots?.[field.id] && typeof slots[field.id] === 'function' && !Array.isArray(slots?.[field.id])
 		// 			? (slots[field.id])({ row: rowData, field })
 		// 			: undefined
 
 		if (mode === 'preview') {
 			// Skip rendering if value is unset and includeUnset is false
-			if (!includeUnset && (transformedValue === undefined || transformedValue === null || transformedValue.length === 0)) {
+			if (!includeUnset && (transformedValue === undefined || transformedValue === null
+				|| (typeof transformedValue === 'string' && transformedValue.length === 0))) {
 				return
 			}
 
@@ -355,8 +367,10 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 					slotContent || (typeof field.$el === 'object'
 						? h(Component as any, props, componentSlots)
 						: typeof transformedValue === 'object' && transformedValue !== null
-							? h('pre', { style: 'margin: 0; white-space: pre-wrap; font-family: inherit; font-size: inherit;' }, renderObject(transformedValue))
-							: transformedValue?.toString() || '')
+							? h('pre', {
+								style: 'margin: 0; white-space: pre-wrap; font-family: inherit; font-size: inherit;'
+							}, renderObject(transformedValue))
+							: String(transformedValue ?? ''))
 				])
 			])
 		}

package/src/types/BagelForm.ts

@@ -67,20 +67,29 @@ export type OpenEndedPath<T> =
   		: never
   	: never
 
+// Helper type to check if a type has ONLY index signature (no specific keys)
+type HasOnlyIndexSignature<T> = T extends Record<string, any>
+	? string extends keyof T
+		? Record<string, never> extends Pick<T, Exclude<keyof T, string | number>>
+			? true // Only index signature, no specific keys
+			: false // Has specific keys
+		: false
+	: false
+
+// Helper type to get paths for index signature properties
+type IndexSignaturePaths<T> = {
+	[K in keyof T]: T[K] extends { [key: string]: any }
+		? T[K] extends { [key: string]: infer V }
+			? `${K & string}.${string}`
+			: never
+		: never
+}[keyof T]
+
 // Enhanced Path type that allows flexibility for nested open-ended objects
 export type Path<T, PO extends PathsOptions = DefaultPathsOptions> =
   FieldVal<T, _Path<T, PO>> extends Array<any>
   	? LiteralStringUnion<_Path<T, PO>>
-  	: _Path<T, PO> | (
-        // Allow nested paths for properties that have index signatures
-        keyof T extends infer K ?
-        	K extends keyof T ?
-        		T[K] extends { [key: string]: any } ?
-              `${K & string}.${string}`
-        			: never
-        		: never
-        	: never
-      )
+  	: _Path<T, PO> | IndexSignaturePaths<T> | `${keyof T & string}.more_info.${string}`
 
 // Smart field value type that preserves type information when possible
 export type SmartFieldVal<T, P extends Path<T>> =
@@ -164,18 +173,23 @@ export interface ElementField<
 	children?: ElementField<T, PO>[]
 }
 
+// Helper type to extract all possible BaseBagelField types for valid paths
+type ValidBaseBagelField<T, PO extends PathsOptions = DefaultPathsOptions> = {
+	[P in Path<T, PO>]: BaseBagelField<T, P, PO>
+}[Path<T, PO>]
+
 export type SchemaChild<
 	T,
 	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
-> = Field<T, PO> | ElementField<T, PO> | VNode | VNodeFn<T, P> | string | BaseBagelField<T, Path<T, PO>, PO>
+> = Field<T, PO> | ElementField<T, PO> | VNode | VNodeFn<T, P> | string | ValidBaseBagelField<T, PO>
 
 export interface BaseBagelField<
 	T,
 	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 > {
-	'$el'?: any
+	'$el'?: string | any
 	'id'?: P
 	'label'?: string
 	'placeholder'?: string

package/src/utils/BagelFormUtils.ts

@@ -12,11 +12,15 @@ import type {
 	Attributes,
 	BglFormSchemaT,
 	FieldByP,
-	SchemaChild,
 	ShallowBglFormSchemaT,
 	UploadInputProps
 } from '../types/BagelForm'
 
+// Import ValidBaseBagelField from the types file
+type ValidBaseBagelField<T, PO extends import('type-fest/source/paths').PathsOptions = import('type-fest/source/paths').DefaultPathsOptions> = {
+	[P in Path<T, PO>]: BaseBagelField<T, P, PO>
+}[Path<T, PO>]
+
 // Local type definitions for internal use only
 interface IconType { name: string }
 interface AutoFillField { name: string }
@@ -70,6 +74,11 @@ export interface RichTextOptions<T, P extends Path<T>> extends InputOptions<T, P
 	height?: number | string
 }
 
+export interface TelInputOptions<T, P extends Path<T>> extends InputOptions<T, P> {
+	pattern?: string
+	autocomplete?: AutoFillField
+}
+
 export function getBaseField<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions>(
 	id?: P,
 	labelOrRest: string | Partial<BaseBagelField<T, P>> = {},
@@ -308,8 +317,8 @@ export function frmRow<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	...children: SchemaChild<T, Path<T, PO>, PO>[]
-): { $el: string, class: string, children: SchemaChild<T, Path<T, PO>, PO>[] } {
+	...children: Array<BaseBagelField<T, any, PO>>
+): { $el: string, class: string, children: Array<BaseBagelField<T, any, PO>> } {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
@@ -406,16 +415,25 @@ export function telField<
 >(
 	id?: P,
 	label?: string,
-	options?: { [key: string]: any }
+	options?: TelInputOptions<T, P>
 ): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'tel',
 		id,
 		label,
-		vIf: options?.vIf,
-		attrs: options,
 		class: options?.class,
+		required: options?.required,
+		placeholder: options?.placeholder,
+		helptext: options?.helptext,
+		disabled: options?.disabled,
+		defaultValue: options?.defaultValue,
+		vIf: options?.vIf,
 		transform: options?.transform,
+		attrs: {
+			...options?.attrs,
+			pattern: options?.pattern,
+			autocomplete: options?.autocomplete,
+		},
 	}
 }
 
@@ -517,6 +535,77 @@ export function arrField<
 // 			})
 // }
 
+// Schema builder function that provides type context
+export function createSchema<T, PO extends PathsOptions = DefaultPathsOptions>() {
+	return {
+		txtField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: TextInputOptions<T, P>
+		) => txtField<T, P, PO>(id, label, options),
+
+		selectField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: any,
+			fieldOptions?: SlctInputOptions<T, P>
+		) => selectField<T, P, PO>(id, label, options, fieldOptions),
+
+		dateField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: DateOptions<T, P>
+		) => dateField<T, P, PO>(id, label, options),
+
+		telField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: TelInputOptions<T, P>
+		) => telField<T, P, PO>(id, label, options),
+
+		frmRow: (
+			...children: Array<BaseBagelField<T, any, PO>>
+		) => frmRow<T, PO>(...children),
+
+		// Add other field functions as needed
+		numField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: NumFieldOptions<T, P>
+		) => numField<T, P, PO>(id, label, options),
+
+		checkField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: CheckInputOptions<T, P>
+		) => checkField<T, P, PO>(id, label, options),
+
+		emailField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: EmailInputOptions<T, P>
+		) => emailField<T, P, PO>(id, label, options),
+
+		uploadField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: UploadOptions<T, P>
+		) => uploadField<T, P, PO>(id, label, options),
+
+		rangeField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: RangeOptions<T, P>
+		) => rangeField<T, P, PO>(id, label, options),
+
+		colorField: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: { [key: string]: any }
+		) => colorField<T, P, PO>(id, label, options),
+	}
+}
+
 export function useForm() {
 	return {
 		txtField,
@@ -534,6 +623,7 @@ export function useForm() {
 		arrField,
 		richText,
 		findBglFieldById,
-		getBaseField
+		getBaseField,
+		createSchema
 	}
 }

package/src/utils/index.ts

@@ -62,7 +62,7 @@ export function bindAttrs<T, P extends Path<T>>(
 // TODO: Fix this so that you don't have to return a fn for other on* event handlers
 	if (!attrs) return {}
 
-	const exclude = ['class', 'onClick'] as const
+	const exclude = ['class', 'onClick', '$el'] as const
 	const arr = Object.entries(attrs)
 		.filter(([key]) => !exclude.includes(key as typeof exclude[number]))
 		.map(([key, value]) => [