@bagelink/vue 1.2.33 → 1.2.41

package/src/styles/mobilLayout.css

@@ -277,6 +277,18 @@
         min-height: 100%;
     }
 
+    .m_h-min-unset,
+    .m_min-h-unset {
+        min-height: 100%;
+    }
+
+    .m_vh-min-100,
+    .m_min100vh,
+    .m_min-100vh,
+    .m_h-min100vh {
+        min-height: 100vh !important;
+    }
+
     .m_min-0,
     .m_min0,
     .m_wmin0p,

package/src/types/BagelForm.ts

@@ -1,4 +1,7 @@
 import type { SelectInput, TextInput } from '@bagelink/vue'
+import type { Paths, Get, IterableElement } from 'type-fest'
+import type { ToString } from 'type-fest/source/internal'
+import type { LiteralStringUnion } from 'type-fest/source/literal-union'
 import type { VNode } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
@@ -25,68 +28,42 @@ export type BagelFieldOptions<T> = (
 	| ((val: any, rowData?: T) => void)
 )
 
-export type GenericAssertFn<T> = (val: any, row?: T) => boolean
-
-export type TypedAssertFn<T, K> = (
-	K extends keyof T ?
-		(val?: FieldVal<T, K>, row?: T) => boolean :
-		GenericAssertFn<T>
+export type VIfType<T, P extends Path<T>> = (
+	string |
+	boolean |
+	((val?: FieldVal<T, P>, rowData?: T) => boolean)
 )
 
-// export type VIfType<T, K> = string | boolean | TypedAssertFn<T, K>
-
-export type VIfType<T, P> = string | boolean | ((val?: FieldVal<T, P>, rowData?: T) => boolean)
-
-export type ValidationFn<T, K> = (
-	val: FieldVal<T, K>,
+export type ValidationFn<T, P extends Path<T>> = (
+	val: FieldVal<T, P>,
 	rowData?: T,
 ) => string | undefined
 
-export type NonArrayMethodKeys<T> = Exclude<
-	keyof T,
-  // filter out function-like or symbol-based keys from arrays
-  keyof any[] | symbol
->
-
-export type Path<T> = {
-	[K in NonArrayMethodKeys<T> & (string | number)]:
-	T[K] extends object ?
-		(
-			| `${K}`
-			| (
-							Path<T[K]> extends infer Rest ?
-								Rest extends string | number ?
-										`${K}.${Rest}` :
-									never :
-								never
-					)
-		) :
-			`${K}`
-}[NonArrayMethodKeys<T> & (string | number)]
-
-export type FieldVal<T, P> =
-  P extends `${infer Key}.${infer Rest}` ?
-  	Key extends keyof T ?
-  		FieldVal<T[Key], Rest> :
-  		never :
-  	P extends keyof T ?
-  		T[P] : never
-
-export type ArrayFieldVal<
-	T,
-	P,
-	FV = FieldVal<T, P>
-> = (
-	FV extends Array<infer U> ?
-		U :
-		FV extends object ?
-			FV :
-			never
+export type _Path<T> = (
+	ToString<
+		Paths<
+			T,
+			{
+				bracketNotation: false
+			}
+		>
+	>
 )
+export type Path<T> = (
+	FieldVal<T, _Path<T>> extends Array<any> ?
+		LiteralStringUnion<_Path<T>> :
+		_Path<T>
+)
+
+/** The value type at path P in object T. */
+export type FieldVal<T, P extends Path<T>> = Get<T, P>
+
+/** If path P in T is an array, this gives the array's element type. */
+export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>
 
 export type SchemaChildrenT<T> = (Field<T> | string | VNode)[]
 
-export interface BaseBagelField<T, P> {
+export interface BaseBagelField<T, P extends Path<T>> {
 	'$el'?: any
 	'id'?: P
 	'label'?: string

package/src/utils/BagelFormUtils.ts

@@ -1,7 +1,7 @@
 import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SchemaChildrenT, SelectBagelField, VIfType } from '@bagelink/vue'
 import type { UploadInputProps } from '../components/form/inputs/Upload/upload.types'
 
-interface InputOptions<T, K> {
+interface InputOptions<T, K extends Path<T>> {
 	required?: boolean
 	placeholder?: string
 	class?: string
@@ -12,14 +12,14 @@ interface InputOptions<T, K> {
 	vIf?: VIfType<T, K>
 }
 
-interface DateOptions<T, K> extends InputOptions<T, K> {
+interface DateOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	enableTime?: boolean
 	mode?: 'day' | 'month' | 'year'
 	locale?: string
 	timezone?: string
 }
 
-interface TextInputOptions<T, K> extends InputOptions<T, K> {
+interface TextInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	type?: 'text' | 'tel' | 'email' | 'time'
 	pattern?: string
 	multiline?: boolean
@@ -30,14 +30,14 @@ interface TextInputOptions<T, K> extends InputOptions<T, K> {
 	iconStart?: IconType
 }
 
-interface SlctInputOptions<T, K> extends InputOptions<T, K> {
+interface SlctInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	searchable?: boolean
 	multiselect?: boolean
 	clearable?: boolean
 	onSearch?: (search: string) => any
 }
 
-interface NumFieldOptions<T, K> extends InputOptions<T, K> {
+interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	max?: number
 	min?: number
 	step?: number
@@ -47,7 +47,7 @@ interface NumFieldOptions<T, K> extends InputOptions<T, K> {
 	useGrouping?: boolean
 }
 
-type RichTextOptions<T, K> = InputOptions<T, K>
+type RichTextOptions<T, K extends Path<T>> = InputOptions<T, K>
 
 export function getBaseField<T, P extends Path<T>>(
 	id?: P,
@@ -137,7 +137,7 @@ export function selectField<T, P extends Path<T>>(
 
 export const slctField = selectField
 
-interface CheckInputOptions<T, K> extends InputOptions<T, K> {
+interface CheckInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	value?: string
 }
 
@@ -212,6 +212,7 @@ export function numField<T, P extends Path<T>>(
 	}
 }
 
+// export function frmRow<T, P extends Path<T>>(...children: SchemaChildrenT<T>): BaseBagelField<T, P> {
 export function frmRow<T>(...children: SchemaChildrenT<T>): Field<T> {
 	return {
 		$el: 'div',
@@ -220,7 +221,7 @@ export function frmRow<T>(...children: SchemaChildrenT<T>): Field<T> {
 	}
 }
 
-export type UploadOptions<T, K> = InputOptions<T, K> & UploadInputProps
+export type UploadOptions<T, K extends Path<T>> = InputOptions<T, K> & UploadInputProps
 
 export function uploadField<T, P extends Path<T>>(id: P, label?: string, options?: UploadOptions<T, P>): BaseBagelField<T, P> {
 	return {
@@ -234,7 +235,7 @@ export function uploadField<T, P extends Path<T>>(id: P, label?: string, options
 	}
 }
 
-interface RangeOptions<T, K> extends InputOptions<T, K> {
+interface RangeOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	min?: number
 	max?: number
 	step?: number
@@ -327,7 +328,7 @@ export function findBglFieldById<T>(id: string, _schema: BglFormSchemaT<T>): Fie
 	return undefined
 }
 
-export interface ArrayFieldOptions<T, K> extends InputOptions<T, K> {
+export interface ArrayFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	delete?: boolean
 	add?: boolean
 }

package/src/utils/calendar/dateUtils.ts

@@ -2,38 +2,38 @@ import type { DateLike } from '@vueuse/core'
 import type { AvailableTimeLanguages, DateTimeAcceptedFormats, LanguageTranslations, TimeUnit } from '../../types/timeAgoT'
 
 interface TimeDeltaOptions {
-	day?: number
-	hour?: number
-	minute?: number
-	second?: number
-	week?: number
-	month?: number
-	year?: number
+	Day?: number
+	Hour?: number
+	Minute?: number
+	Second?: number
+	Week?: number
+	Month?: number
+	Year?: number
 }
 
 export function timeDelta(date: string | Date, options: TimeDeltaOptions) {
 	date = new Date(date)
-	const { day, hour, minute, second, week, month, year } = options
-	if (day) {
-		date.setDate(date.getDate() + day)
+	const { Day, Hour, Minute, Second, Week, Month, Year } = options
+	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
 }
@@ -158,9 +158,9 @@ function getBrowserNavigatorLocale(): string {
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export function handleTimezone(date: Date, timeZone: string): Date {
+export function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date {
 	// If timeZone is UTC, convert to UTC directly
-	if (timeZone === 'UTC') {
+	if (intFmtOpt.timeZone === 'UTC') {
 		const utcDate = new Date(date.getTime())
 		utcDate.setMinutes(utcDate.getMinutes() + date.getTimezoneOffset())
 		return utcDate
@@ -169,16 +169,7 @@ export function handleTimezone(date: Date, timeZone: string): Date {
 	// For other timezones, use the Intl API
 	try {
 		// Get the target timezone's offset at this specific date
-		const formatter = new Intl.DateTimeFormat('en-US', {
-			timeZone,
-			timeZoneName: 'short',
-			year: 'numeric',
-			month: 'numeric',
-			day: 'numeric',
-			hour: 'numeric',
-			minute: 'numeric',
-			second: 'numeric',
-		})
+		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
 
 		// Format the date in the target timezone
 		const formattedParts = formatter.formatToParts(date)
@@ -203,14 +194,15 @@ export function handleTimezone(date: Date, timeZone: string): Date {
 
 		return adjustedDate
 	} catch (error) {
-		console.warn(`Error handling timezone ${timeZone}:`, error)
+		console.warn(`Error handling timezone ${intFmtOpt.timeZone}:`, error)
 		return date // Return original date on error
 	}
 }
 
-export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, timeZone?: string) {
+export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions) {
 	// Apply timezone adjustment if specified
-	const d = timeZone ? handleTimezone(date, timeZone) : date
+	const d = intFmtOpt?.timeZone ? handleTimezone(date, locale, intFmtOpt) : date
+	// const d = date
 
 	/// keep-sorted
 	return {
@@ -242,7 +234,7 @@ const _orderedDateTokens = (
 // ? no longer creating the Regex Objs it in a loop
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map(token => token).join('|'), 'g')
 
-export interface FormatDateOptions {
+export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
 	fmt?: DateTimeAcceptedFormats
 	locale?: Intl.LocalesArgument
 	tz?: string
@@ -258,9 +250,9 @@ export interface FormatDateOptions {
  */
 export function formatDate(
 	date?: DateLike,
-	opts: FormatDateOptions = {}
+	opts: FormatDateOptions = {},
 ): string {
-	let { fmt: format, locale, tz: timeZone } = opts
+	let { fmt: format, locale, tz: timeZone, ...rest } = opts
 
 	if (!date) return ''
 	format = format || 'DD.MM.YY'
@@ -276,21 +268,26 @@ export function formatDate(
 			return ''
 		}
 
-		const datePartsMap = getDatePartsMap(d, locale, timeZone)
-
 		// For more complex formats that need localization, use Intl.DateTimeFormat
 		/// keep-sorted
-		const formatter = new Intl.DateTimeFormat(locale, {
+		const intFmtOpt: Intl.DateTimeFormatOptions = {
 			day: 'numeric',
 			hour: '2-digit',
-			hour12: true,
+
+			// Set default hour12 to true if not explicitly set
+			// hour12: true,
+			hour12: rest.hour12 === undefined ? true : rest.hour12,
 			minute: '2-digit',
 			month: 'long',
 			second: '2-digit',
 			timeZone, // Add timeZone if provided
 			weekday: 'long',
 			year: 'numeric',
-		})
+		}
+
+		const datePartsMap = getDatePartsMap(d, locale, intFmtOpt)
+
+		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
 
 		const formattedParts = formatter.formatToParts(d)
 		const partsMap: Partial<Record<Intl.DateTimeFormatPartTypes, string>> = {}

package/src/components/calendar/utils.ts

@@ -1,70 +0,0 @@
-import type { Ref } from 'vue'
-import type { CalendarEvent } from './CalendarTypes'
-
-export interface PopoverState {
-	activeEvent: Ref<CalendarEvent | null>
-	showPopover: Ref<boolean>
-	popoverPosition: Ref<{ top: number, left: number, width: number, height: number }>
-	popoverRef: Ref<HTMLElement | null>
-}
-
-/**
- * Positions the popover to be centered on the target element and ensures it stays within viewport
- */
-export function calculatePopoverPosition(
-	target: HTMLElement,
-	popoverWidth = 300,
-	popoverHeight = 150,
-): { top: number, left: number, width: number, height: number } {
-	const rect = target.getBoundingClientRect()
-	const { scrollY, scrollX, innerHeight, innerWidth } = window
-
-	// Default position (centered to the left of the element)
-	let top = rect.top + scrollY + (rect.height / 2) - (popoverHeight / 2)
-	let left = rect.left + scrollX + rect.width + 10
-
-	// Keep popover within viewport bounds
-	top = Math.max(scrollY + 10, Math.min(top, innerHeight + scrollY - popoverHeight - 10))
-
-	// If it would go off right side, position to the left instead
-	if (left + popoverWidth > innerWidth + scrollX) {
-		left = rect.left + scrollX - popoverWidth - 10
-	}
-
-	// If it would go off left side, place it to the right
-	if (left < scrollX) {
-		left = rect.right + scrollX + 10
-	}
-
-	return { top, left, width: popoverWidth, height: popoverHeight }
-}
-
-/**
- * Opens a popover for a calendar event
- */
-export function openPopover(
-	event: CalendarEvent,
-	e: MouseEvent,
-	state: PopoverState,
-	hasEventContentSlot: boolean,
-	emitEventClick: (event: CalendarEvent) => void
-) {
-	// Don't open if no slot provided
-	if (!hasEventContentSlot) {
-		emitEventClick(event)
-		return
-	}
-
-	// Set active event and calculate position
-	state.activeEvent.value = event
-	state.popoverPosition.value = calculatePopoverPosition(e.currentTarget as HTMLElement)
-	state.showPopover.value = true
-}
-
-/**
- * Closes the popover
- */
-export function closePopover(state: PopoverState) {
-	state.showPopover.value = false
-	state.activeEvent.value = null
-}