@bagelink/vue 1.4.109 → 1.4.115

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import type { ArrayBagelField, ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, FieldByP, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField, ShallowBglFormSchemaT, UploadInputProps } from '@bagelink/vue'
+import type { ArrayBagelField, ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, FieldByP, IconType, InputBagelField, Path, SchemaChild, SelectBagelField, ShallowBglFormSchemaT, UploadInputProps } from '@bagelink/vue'
 import type { DefaultPathsOptions, PathsOptions } from 'type-fest/source/paths'
 import type { InputTypeHTMLAttribute, MaybeRefOrGetter } from 'vue'
 
@@ -33,7 +33,6 @@ export interface SlctInputOptions<T, K extends Path<T>> extends InputOptions<T,
 	searchable?: boolean
 	multiselect?: boolean
 	clearable?: boolean
-	onSearch?: (search: string) => any
 }
 
 export interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
@@ -86,71 +85,64 @@ export function richText<
 
 export function txtField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: TextInputOptions<T, P>,
-): InputBagelField<T, P, PO> {
+	options?: TextInputOptions<T, Path<T, PO>>,
+): InputBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'text',
 		id,
 		label,
 		class: options?.class,
 		required: options?.required,
-		vIf: options?.vIf,
-		disabled: options?.disabled,
 		placeholder: options?.placeholder,
-		defaultValue: options?.defaultValue,
-		validate: options?.validate,
-		onUpdate: options?.onUpdate,
 		helptext: options?.helptext,
+		disabled: options?.disabled,
+		defaultValue: options?.defaultValue,
+		vIf: options?.vIf,
 		transform: options?.transform,
 		attrs: {
-			type: options?.type,
+			autocomplete: options?.autocomplete,
 			pattern: options?.pattern,
 			multiline: options?.multiline,
-			autocomplete: options?.autocomplete,
-			rows: options?.rows,
-			code: options?.code,
 			autoheight: options?.autoheight,
+			code: options?.code,
+			rows: options?.rows,
 			icon: options?.icon,
 			iconStart: options?.iconStart,
+			type: options?.type,
 		},
 	}
 }
 
 export function selectField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: Option[] | (() => Option[]),
-	config?: SlctInputOptions<T, P>,
-): SelectBagelField<T, P, PO> {
+	options?: any[],
+	fieldOptions?: SlctInputOptions<T, Path<T, PO>>,
+): SelectBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'select',
 		id,
-		options,
-		class: config?.class,
-		placeholder: config?.placeholder,
-		required: config?.required,
 		label,
-		defaultValue: config?.defaultValue,
-		vIf: config?.vIf,
-		validate: config?.validate,
-		onUpdate: config?.onUpdate,
-		transform: config?.transform,
+		class: fieldOptions?.class,
+		required: fieldOptions?.required,
+		helptext: fieldOptions?.helptext,
+		disabled: fieldOptions?.disabled,
+		defaultValue: fieldOptions?.defaultValue,
+		vIf: fieldOptions?.vIf,
+		transform: fieldOptions?.transform,
+		options,
 		attrs: {
-			disabled: config?.disabled,
-			searchable: config?.searchable,
-			multiselect: config?.multiselect,
-			onSearch: config?.onSearch,
-			clearable: config?.clearable,
-			autocomplete: config?.autocomplete,
+			...fieldOptions?.attrs,
+			searchable: fieldOptions?.searchable,
+			multiselect: fieldOptions?.multiselect,
+			clearable: fieldOptions?.clearable,
 		},
 	}
 }
@@ -164,22 +156,25 @@ interface CheckInputOptions<T, K extends Path<T>> extends Omit<InputOptions<T, K
 
 export function checkField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: CheckInputOptions<T, P>,
-): BaseBagelField<T, P, PO> {
+	options?: CheckInputOptions<T, Path<T, PO>>,
+): BaseBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'check',
+		id,
+		label,
 		class: options?.class,
 		required: options?.required,
+		helptext: options?.helptext,
+		disabled: options?.disabled,
 		defaultValue: options?.defaultValue,
-		id,
-		label,
+		vIf: options?.vIf,
 		transform: options?.transform,
 		attrs: {
+			...options?.attrs,
 			value: options?.value,
 		},
 	}
@@ -249,13 +244,12 @@ export function dateField<
 
 export function numField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: NumFieldOptions<T, P>,
-): BaseBagelField<T, P, PO> {
+	options?: NumFieldOptions<T, Path<T, PO>>,
+): BaseBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'number',
 		class: options?.class,
@@ -283,11 +277,10 @@ export function numField<
 
 export function frmRow<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	...children: SchemaChild<T, P, PO>[]
-): FieldByP<T, P, PO> {
+	...children: SchemaChild<T, Path<T, PO>, PO>[]
+): { $el: string, class: string, children: SchemaChild<T, Path<T, PO>, PO>[] } {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
@@ -299,17 +292,21 @@ export interface UploadOptions<T, K extends Path<T>> extends Omit<UploadInputPro
 
 export function uploadField<
 	T,
-	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	label?: string,
-	options?: UploadOptions<T, P>
-): BaseBagelField<T, P, PO> {
+	options?: UploadOptions<T, Path<T, PO>>,
+): BaseBagelField<T, Path<T, PO>, PO> {
 	return {
 		$el: 'upload',
 		id,
 		label,
+		class: options?.class,
+		required: options?.required,
+		helptext: options?.helptext,
+		disabled: options?.disabled,
+		defaultValue: options?.defaultValue,
 		vIf: options?.vIf,
 		transform: options?.transform,
 		attrs: {

package/src/utils/calendar/dateUtils.ts

@@ -9,31 +9,53 @@ interface TimeDeltaOptions {
 	Week?: number
 	Month?: number
 	Year?: number
+	days?: number
+	hours?: number
+	minutes?: number
+	seconds?: number
+	weeks?: number
+	months?: number
+	years?: number
+	day?: number
+	hour?: number
+	minute?: number
+	second?: number
+	week?: number
+	month?: number
+	year?: number
 }
 
 export function timeDelta(date: string | Date, options: TimeDeltaOptions) {
+	console.log('date', date)
 	date = new Date(date)
-	const { Day, Hour, Minute, Second, Week, Month, Year } = options
-	if (Day) {
-		date.setDate(date.getDate() + Day)
+	console.log('date', date)
+	const day = options.Day || options.day || options.days || 0
+	const hour = options.Hour || options.hour || options.hours || 0
+	const minute = options.Minute || options.minute || options.minutes || 0
+	const second = options.Second || options.second || options.seconds || 0
+	const week = options.Week || options.week || options.weeks || 0
+	const month = options.Month || options.month || options.months || 0
+	const year = options.Year || options.year || options.years || 0
+	if (day) {
+		date.setDate(date.getDate() + day)
 	}
-	if (Hour) {
-		date.setHours(date.getHours() + Hour)
+	if (hour) {
+		date.setHours(date.getHours() + hour)
 	}
-	if (Minute) {
-		date.setMinutes(date.getMinutes() + Minute)
+	if (minute) {
+		date.setMinutes(date.getMinutes() + minute)
 	}
-	if (Second) {
-		date.setSeconds(date.getSeconds() + Second)
+	if (second) {
+		date.setSeconds(date.getSeconds() + second)
 	}
-	if (Week) {
-		date.setDate(date.getDate() + Week * 7)
+	if (week) {
+		date.setDate(date.getDate() + week * 7)
 	}
-	if (Month) {
-		date.setMonth(date.getMonth() + Month)
+	if (month) {
+		date.setMonth(date.getMonth() + month)
 	}
-	if (Year) {
-		date.setFullYear(date.getFullYear() + Year)
+	if (year) {
+		date.setFullYear(date.getFullYear() + year)
 	}
 	return date
 }
@@ -247,20 +269,52 @@ export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptio
 	locale?: Intl.LocalesArgument
 	tz?: string
 }
+
 /**
  * Formats a date based on the provided format string, locale, and timezone.
  * @param date The date to format (string or Date object).
+ * @param format The format string (default is 'DD.MM.YY').
+ * @returns Formatted date string.
+ */
+export function formatDate(date?: DateLike, format?: DateTimeAcceptedFormats): string
+
+/**
+ * Formats a date based on the provided options.
+ * @param date The date to format (string or Date object).
  * @param opts Options for formatting the date.
  * @param opts.fmt The format string (default is 'DD.MM.YY').
  * @param opts.locale The locale to use for formatting (default is browser's locale).
  * @param opts.tz The timezone to use for formatting (default is local timezone).
  * @returns Formatted date string.
  */
+export function formatDate(date?: DateLike, opts?: FormatDateOptions): string
+
+/**
+ * Formats a date based on the provided format string, locale, and timezone.
+ * @param date The date to format (string or Date object).
+ * @param formatOrOpts The format string or options object.
+ * @returns Formatted date string.
+ */
 export function formatDate(
 	date?: DateLike,
-	opts: FormatDateOptions = {},
+	formatOrOpts?: DateTimeAcceptedFormats | FormatDateOptions,
 ): string {
-	let { fmt: format, locale, tz: timeZone, ...rest } = opts
+	let format: DateTimeAcceptedFormats | undefined
+	let locale: Intl.LocalesArgument | undefined
+	let timeZone: string | undefined
+	let rest: Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> = {}
+
+	// Handle both overloads
+	if (typeof formatOrOpts === 'string') {
+		// First overload: format string directly
+		format = formatOrOpts
+	} else if (formatOrOpts && typeof formatOrOpts === 'object') {
+		// Second overload: options object
+		format = formatOrOpts.fmt
+		locale = formatOrOpts.locale
+		timeZone = formatOrOpts.tz
+		rest = formatOrOpts
+	}
 
 	if (!date) return ''
 	format = format || 'DD.MM.YY'

package/src/utils/elementUtils.ts

@@ -22,6 +22,14 @@ export interface BtnElementOptions<
 	target?: '_blank' | '_self' | '_parent' | '_top'
 }
 
+export interface PillElementOptions<
+	T = any,
+	PO extends PathsOptions = DefaultPathsOptions
+> extends Partial<BaseElementField<T, PO>> {
+	color?: string
+	icon?: IconType
+}
+
 export interface TxtElementOptions<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
@@ -345,20 +353,17 @@ export function img<
 ): BaseElementField<T, PO> {
 	// Handle different overload patterns
 	let id: Path<T, PO> | undefined
-	let finalSrc: string = ''
 	let finalOptions: ImgElementOptions<T, PO> = {}
 
 	if (typeof idOrOptions === 'object' && idOrOptions !== null) {
 		// img(options)
 		finalOptions = idOrOptions
-		const { id: optionId, src: optionSrc } = finalOptions
+		const { id: optionId } = finalOptions
 		id = optionId as Path<T, PO> | undefined
-		finalSrc = optionSrc ?? ''
 	} else {
 		// img(id, ...) patterns
 		id = idOrOptions
 		if (src != null) {
-			finalSrc = src
 			if (typeof altOrOptions === 'string') {
 				// img(id, src, alt)
 				finalOptions = { alt: altOrOptions }
@@ -388,6 +393,20 @@ export function img<
 	}
 }
 
+export function pill<
+	T = any,
+	PO extends PathsOptions = DefaultPathsOptions
+>(options: PillElementOptions<T, PO>): BaseElementField<T, PO> {
+	return {
+		$el: 'pill',
+		id: options?.id,
+		class: options?.class,
+		vIf: options?.vIf,
+		style: options?.style,
+		attrs: options?.attrs || {},
+	}
+}
+
 export function dropdown<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions

package/src/utils/useSearch.ts

@@ -372,8 +372,10 @@ export function useSearch<T>(
 					clearTimeout(debounceTimeout)
 				}
 
-				// Skip search if term is too short
-				if (!newTerm || typeof newTerm !== 'string' || newTerm.length < minChars) {
+				const term = typeof newTerm === 'string' ? newTerm : ''
+
+				// Allow initial/default fetch when minChars === 0 (including empty term)
+				if (term.length < minChars && minChars > 0) {
 					serverResults.value = []
 					return
 				}
@@ -382,7 +384,7 @@ export function useSearch<T>(
 				debounceTimeout = window.setTimeout(async () => {
 					try {
 						isLoading.value = true
-						serverResults.value = await serverSearch(newTerm)
+						serverResults.value = await serverSearch(term)
 					} catch (error) {
 						console.error('Server search error:', error)
 						serverResults.value = []
@@ -390,7 +392,8 @@ export function useSearch<T>(
 						isLoading.value = false
 					}
 				}, debounceMs)
-			}
+			},
+			{ immediate: true }
 		)
 	}
 
@@ -401,9 +404,13 @@ export function useSearch<T>(
 	const getFilteredResults = (): T[] => {
 		const term = getSearchTermValue()
 
-		// If using server-side search and has search term, return server results
-		if (serverSearch && term && typeof term === 'string' && term.length >= minChars) {
-			return serverResults.value as T[]
+		// If using server-side search
+		if (serverSearch) {
+			if (term && typeof term === 'string' && term.length >= minChars) {
+				return serverResults.value as T[]
+			}
+			// If minChars is 0, allow default server results when empty
+			if (minChars === 0) return serverResults.value as T[]
 		}
 
 		// Otherwise use client-side filtering