@bagelink/vue 1.2.39 → 1.2.41

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
 }

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