@bagelink/vue 1.5.15 → 1.5.20

package/src/directives/pattern.ts

@@ -47,12 +47,12 @@ function getTarget(el: HTMLElement): HTMLInputElement | HTMLTextAreaElement | nu
 
 function getModifiers(binding: DirectiveBinding): string {
 	const modifiers = Object.keys(binding.modifiers)
-	return modifiers.length > 0 ? modifiers[modifiers.length - 1] : ''
+	return 0 < modifiers.length ? modifiers[modifiers.length - 1] : ''
 }
 
 function getRegex(state: PatternState): RegExp {
-	if (state.pattern != null) return state.pattern
-	if (state.modifier != null && state.modifier !== '') {
+	if (null != state.pattern) {return state.pattern}
+	if (null != state.modifier && '' !== state.modifier) {
 		const presetPattern = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.pattern
 		return presetPattern ?? /./
 	}
@@ -80,10 +80,10 @@ function bindEvents(el: HTMLElement, target: HTMLInputElement | HTMLTextAreaElem
 }
 
 function unbindEvents(target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	if (state.keydownEvent) target.removeEventListener('keydown', state.keydownEvent)
-	if (state.inputEvent) target.removeEventListener('input', state.inputEvent, { capture: true })
-	if (state.compositionStartEvent) target.removeEventListener('compositionstart', state.compositionStartEvent)
-	if (state.compositionEndEvent) target.removeEventListener('compositionend', state.compositionEndEvent)
+	if (state.keydownEvent) {target.removeEventListener('keydown', state.keydownEvent)}
+	if (state.inputEvent) {target.removeEventListener('input', state.inputEvent, { capture: true })}
+	if (state.compositionStartEvent) {target.removeEventListener('compositionstart', state.compositionStartEvent)}
+	if (state.compositionEndEvent) {target.removeEventListener('compositionend', state.compositionEndEvent)}
 
 	state.keydownEvent = undefined
 	state.inputEvent = undefined
@@ -102,19 +102,19 @@ function isNavigationOrControlKey(event: KeyboardEvent): boolean {
 		'ArrowDown',
 		'Enter',
 	]
-	if (event.ctrlKey || event.altKey || event.metaKey) return true
+	if (event.ctrlKey || event.altKey || event.metaKey) {return true}
 	return allowedKeys.includes(event.key)
 }
 
 function onKeydown(event: KeyboardEvent, target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	if (state.composing === true) return
-	if (isNavigationOrControlKey(event)) return
+	if (true === state.composing) {return}
+	if (isNavigationOrControlKey(event)) {return}
 
 	// If a transform is configured (e.g., slug/snake/lower/upper),
 	// do not block keystrokes; normalization happens on input.
-	if (state.modifier != null && state.modifier !== '') {
+	if (null != state.modifier && '' !== state.modifier) {
 		const transformFn = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.transform
-		if (typeof transformFn === 'function') return
+		if ('function' === typeof transformFn) {return}
 	}
 
 	const regex = getRegex(state)
@@ -142,7 +142,7 @@ function onCompositionEnd(
 function sanitizeTransformed(value: string, state: PatternState): string {
 	const regex = getRegex(state)
 	let transformed: string
-	if (state.modifier != null && state.modifier !== '') {
+	if (null != state.modifier && '' !== state.modifier) {
 		const transformFn = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.transform
 		transformed = transformFn ? transformFn(value) : value
 	} else {
@@ -151,7 +151,7 @@ function sanitizeTransformed(value: string, state: PatternState): string {
 	let result = ''
 	for (let i = 0; i < transformed.length; i++) {
 		const ch = transformed[i]
-		if (regex.test(ch)) result += ch
+		if (regex.test(ch)) {result += ch}
 	}
 	return result
 }
@@ -161,8 +161,8 @@ function onInput(
 	target: HTMLInputElement | HTMLTextAreaElement,
 	state: PatternState,
 ) {
-	if (state.reformatting === true) return
-	if (state.composing === true) return
+	if (true === state.reformatting) {return}
+	if (true === state.composing) {return}
 
 	const originalValue = target.value
 	const selectionEnd = target.selectionEnd ?? originalValue.length
@@ -170,7 +170,7 @@ function onInput(
 	const left = originalValue.slice(0, selectionEnd)
 
 	const sanitizedFull = sanitizeTransformed(originalValue, state)
-	if (sanitizedFull === originalValue) return
+	if (sanitizedFull === originalValue) {return}
 
 	const leftSanitized = sanitizeTransformed(left, state)
 	const newCursor = leftSanitized.length
@@ -186,15 +186,15 @@ function onInput(
 const pattern = {
 	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
 		const target = getTarget(el)
-		if (target === null) return
+		if (null === target) {return}
 
 		const state: PatternState = {
 			modifier: getModifiers(binding),
 		}
 
-		if (typeof binding.value === 'object' && binding.value !== null) {
+		if ('object' === typeof binding.value && null !== binding.value) {
 			state.pattern = binding.value.pattern ?? /./
-			state.validateOnly = binding.value.validateOnly === true
+			state.validateOnly = true === binding.value.validateOnly
 		}
 
 		stateMap.set(el, state)
@@ -202,18 +202,18 @@ const pattern = {
 	},
 	updated(el: HTMLElement, binding: DirectiveBinding) {
 		const target = getTarget(el)
-		if (target === null) return
+		if (null === target) {return}
 
 		const state = stateMap.get(el)
-		if (state === undefined) return
+		if (state === undefined) {return}
 
 		unbindEvents(target, state)
 
 		state.modifier = getModifiers(binding)
 
-		if (typeof binding.value === 'object' && binding.value !== null) {
+		if ('object' === typeof binding.value && null !== binding.value) {
 			state.pattern = binding.value.pattern ?? /./
-			state.validateOnly = binding.value.validateOnly === true
+			state.validateOnly = true === binding.value.validateOnly
 		}
 
 		bindEvents(el, target, state)
@@ -222,7 +222,7 @@ const pattern = {
 		const target = getTarget(el)
 		const state = stateMap.get(el)
 
-		if (target !== null && state !== undefined) {
+		if (null !== target && state !== undefined) {
 			unbindEvents(target, state)
 		}
 

package/src/directives/ripple.ts

@@ -27,8 +27,8 @@ const ripple: Directive<HTMLElement, boolean> = {
 
 		(el as any).__rippleClickHandler = clickHandler
 
-		if (binding.value !== false) {
-			if (getComputedStyle(el).position === 'static') {
+		if (false !== binding.value) {
+			if ('static' === getComputedStyle(el).position) {
 				el.style.position = 'relative'
 			}
 			el.style.overflow = 'hidden'
@@ -37,10 +37,10 @@ const ripple: Directive<HTMLElement, boolean> = {
 	},
 	updated(el: HTMLElement, binding: DirectiveBinding<boolean>) {
 		const clickHandler = (el as any).__rippleClickHandler
-		if (binding.value === false) {
+		if (false === binding.value) {
 			el.removeEventListener('mousedown', clickHandler)
 		} else {
-			if (getComputedStyle(el).position === 'static') {
+			if ('static' === getComputedStyle(el).position) {
 				el.style.position = 'relative'
 			}
 			el.style.overflow = 'hidden'

package/src/directives/vResize.ts

@@ -73,12 +73,12 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 	}
 
 	function applyGridSnapping(height: number): number {
-		if (!options.gridSize) return height
+		if (!options.gridSize) {return height}
 		return Math.round(height / options.gridSize) * options.gridSize
 	}
 
 	function handleMove(e: MouseEvent | TouchEvent) {
-		if (!isResizing) return
+		if (!isResizing) {return}
 		e.preventDefault()
 
 		const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
@@ -109,7 +109,7 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 	}
 
 	function handleEnd(e: MouseEvent | TouchEvent) {
-		if (!isResizing) return
+		if (!isResizing) {return}
 
 		const clientY = 'touches' in e ? e.changedTouches[0].clientY : e.clientY
 		const event = createResizeEvent(clientY)
@@ -136,7 +136,7 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 
 	function handleStart(e: MouseEvent | TouchEvent) {
 		// Only handle left mouse button for mouse events
-		if (e instanceof MouseEvent && e.button !== 0) return
+		if (e instanceof MouseEvent && 0 !== e.button) {return}
 
 		e.preventDefault()
 		isResizing = true
@@ -186,7 +186,7 @@ export const vResize: Directive<HTMLElement, ResizeOptions> = {
 
 	unmounted(el) {
 		const cleanup = (el as any)[RESIZE_KEY]
-		if (typeof cleanup === 'function') {
+		if ('function' === typeof cleanup) {
 			cleanup()
 			delete (el as any)[RESIZE_KEY]
 		}
@@ -195,7 +195,7 @@ export const vResize: Directive<HTMLElement, ResizeOptions> = {
 	updated(el, binding) {
 		if (binding.value !== binding.oldValue) {
 			const cleanup = (el as any)[RESIZE_KEY]
-			if (typeof cleanup === 'function') {
+			if ('function' === typeof cleanup) {
 				cleanup()
 				delete (el as any)[RESIZE_KEY]
 			}

package/src/plugins/bagel.ts

@@ -14,7 +14,7 @@ export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<(key: string) =
 
 export function injectI18nT(injectionKey: typeof i18nTInjectionKey = i18nTInjectionKey) {
 	const i18nT = inject(injectionKey)
-	if (!i18nT) throw new Error('No i18nT provided')
+	if (!i18nT) {throw new Error('No i18nT provided')}
 	return i18nT
 }
 
@@ -55,9 +55,9 @@ export const BagelVue: Plugin<BagelOptions> = {
 			},
 		})
 		const { availableLangs, defaultLang, lang } = useLang()
-		if (options.availableLangs) availableLangs.value = options.availableLangs
-		if (options.defaultLang) defaultLang.value = options.defaultLang
-		if (options.language) lang.value = options.language
+		if (options.availableLangs) {availableLangs.value = options.availableLangs}
+		if (options.defaultLang) {defaultLang.value = options.defaultLang}
+		if (options.language) {lang.value = options.language}
 		app.config.globalProperties.$bagel = bagel
 		app.provide(bagelInjectionKey, bagel)
 		app.config.globalProperties.$i18T

package/src/plugins/useModal.ts

@@ -29,7 +29,7 @@ export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal')
 
 export function useModal(): ModalApi {
 	const modalApi = inject(ModalSymbol)
-	if (!modalApi) throw new Error('Modal API not provided')
+	if (!modalApi) {throw new Error('Modal API not provided')}
 	return modalApi
 }
 
@@ -43,7 +43,7 @@ export const ModalPlugin: Plugin = {
 
 		const confirmModal = (options: ConfirmModalUserOptions): Promise<boolean> => {
 			return new Promise((resolve) => {
-				const confirmOptions = typeof options === 'string' ? { title: '', message: options } : options
+				const confirmOptions = 'string' === typeof options ? { title: '', message: options } : options
 				modalStack.push({
 					modalOptions: { ...confirmOptions, resolve },
 					modalType: 'confirmModal',
@@ -64,7 +64,7 @@ export const ModalPlugin: Plugin = {
 			}
 			modalStack.push(modalComponent)
 
-			if (modalType === 'modalForm') {
+			if ('modalForm' === modalType) {
 				return modalComponent as ModalFormComponentProps<T>
 			}
 			return modalComponent

package/src/styles/layout.css

@@ -741,7 +741,7 @@
     top: 10rem;
 }
 
-.top-50p{
+.top-50p {
     top: 50%;
 }
 
@@ -2072,6 +2072,7 @@
     margin-inline-end: auto;
     width: 98%;
 }
+
 .w1,
 .w1px,
 .w-1px,
@@ -7285,6 +7286,11 @@
     grid-template-rows: auto 1fr;
 }
 
+.grid-list-wrapper-reverse,
+.grid-list-wrapper-rev {
+    grid-template-rows: 1fr auto;
+}
+
 .grid-overlap {
     display: grid;
     grid-template-columns: 1fr;

package/src/utils/BagelFormUtils.ts

@@ -101,7 +101,7 @@ export function getBaseField<T, P extends Path<T, PO>, PO extends PathsOptions =
 	labelOrRest: string | Partial<BaseBagelField<T, P>> = {},
 	rest: Partial<BaseBagelField<T, P>> = {}
 ): BaseBagelField<T, P, PO> {
-	if (typeof labelOrRest === 'object') return { id, ...labelOrRest }
+	if ('object' === typeof labelOrRest) {return { id, ...labelOrRest }}
 	return { id, label: labelOrRest, ...rest }
 }
 
@@ -426,7 +426,7 @@ export function rangeField<
 }
 
 export function bglForm<T>(idOrField?: string | FieldByP<T, Path<T>>, ...schema: FieldByP<T, Path<T>>[]) {
-	if (typeof idOrField === 'string') {
+	if ('string' === typeof idOrField) {
 		return {
 			$el: 'bagelform',
 			id: idOrField,
@@ -494,13 +494,13 @@ export function colorField<
 
 export function findBglFieldById<T>(id: string, _schema: ShallowBglFormSchemaT<T>): FieldByP<T, Path<T>> | undefined {
 	for (const field of _schema) {
-		if (field.id === id) return field as FieldByP<T, Path<T>> | undefined
-		if (field.children && Number(field.children.length) > 0) {
+		if (field.id === id) {return field as FieldByP<T, Path<T>> | undefined}
+		if (field.children && 0 < Number(field.children.length)) {
 			const fieldChildren = field.children.filter(
-				c => typeof c === 'object' && '$el' in c
+				c => 'object' === typeof c && '$el' in c
 			)
 			const child = findBglFieldById(id, fieldChildren as ShallowBglFormSchemaT<T>)
-			if (child) return child as FieldByP<T, Path<T>> | undefined
+			if (child) {return child as FieldByP<T, Path<T>> | undefined}
 		}
 	}
 	return undefined
@@ -528,7 +528,7 @@ export function arrField<
 	options?: ArrayFieldOptions<T, P>
 ): ArrayBagelField<T, P, PO> {
 	const arraySpecificAttrs = (
-		typeof schemaOrType === 'string'
+		 'string' === typeof schemaOrType
 			? { type: schemaOrType }
 			: { schema: schemaOrType }
 	)

package/src/utils/calendar/Helpers.ts

@@ -11,7 +11,7 @@ export default class Helpers {
 	 * otherwise just use navigator.language
 	 */
 	static getBrowserNavigatorLocale(): string {
-		if (typeof navigator !== 'object') return 'en-US'
+		if ('object' !== typeof navigator) {return 'en-US'}
 
 		return navigator.languages && navigator.languages.length
 			? navigator.languages[0]
@@ -22,16 +22,16 @@ export default class Helpers {
 	 * Solution from https://github.com/vuejs/core/issues/4733#issuecomment-1024816095
 	 */
 	static hasSlotContent(slot: Slot | undefined) {
-		if (!slot) return false
+		if (!slot) {return false}
 
 		return slot().some((vnode: VNode) => {
-			if (vnode.type === Comment) return false
+			if (vnode.type === Comment) {return false}
 
-			if (Array.isArray(vnode.children) && !vnode.children.length) return false
+			if (Array.isArray(vnode.children) && !vnode.children.length) {return false}
 
 			return (
 				vnode.type !== Text
-				|| (typeof vnode.children === 'string' && vnode.children.trim() !== '')
+				|| ('string' === typeof vnode.children && '' !== vnode.children.trim())
 			)
 		})
 	}
@@ -43,9 +43,9 @@ export default class Helpers {
 		const isFullDayEvent = DATE_TIME_STRING_FULL_DAY_PATTERN.test(event.time.start)
 			&& DATE_TIME_STRING_FULL_DAY_PATTERN.test(event.time.end)
 
-		if (isTimedEvent) return this.getTimedEventType(event, time)
+		if (isTimedEvent) {return this.getTimedEventType(event, time)}
 
-		if (isFullDayEvent) return this.getFullDayEventType(event, time)
+		if (isFullDayEvent) {return this.getFullDayEventType(event, time)}
 
 		throw new Error('Event has invalid type')
 	}
@@ -81,6 +81,6 @@ export default class Helpers {
 	}
 
 	static isUIEventTouchEvent(event: UIEvent): boolean {
-		return 'touches' in event && typeof event.touches === 'object'
+		return 'touches' in event && 'object' === typeof event.touches
 	}
 }

package/src/utils/calendar/dateUtils.ts

@@ -112,8 +112,8 @@ const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
 }
 
 export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en') {
-	if (!date) return ''
-	if (typeof date === 'string') date = new Date(date)
+	if (!date) {return ''}
+	if ('string' === typeof date) {date = new Date(date)}
 	const now: Date = new Date()
 	const nowNumber = now.getTime()
 	const dateNumber = date.getTime()
@@ -133,32 +133,32 @@ export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en'
 
 	for (const interval of intervals) {
 		const count = Math.floor(Math.abs(seconds) / interval.seconds)
-		if (count >= 1) {
-			const suffix = seconds < 0 ? ` ${selectedLang.ago}` : ''
-			const prefix = seconds > 0 && selectedLang.in !== 'in' ? `${selectedLang.in} ` : ''
+		if (1 <= count) {
+			const suffix = 0 > seconds ? ` ${selectedLang.ago}` : ''
+			const prefix = 0 < seconds && 'in' !== selectedLang.in ? `${selectedLang.in} ` : ''
 
 			// Handle Hebrew plural forms
-			if (lang === 'he') {
+			if ('he' === lang) {
 				const timeUnit = selectedLang[interval.label] as TimeUnit
-				const form = count === 1 ? timeUnit.singular : timeUnit.plural
+				const form = 1 === count ? timeUnit.singular : timeUnit.plural
 
 				// For Hebrew, we place the prefix/suffix before the number
-				const hebrewPrefix = seconds < 0 ? `${selectedLang.ago} ` : (seconds > 0 ? `${selectedLang.in} ` : '')
+				const hebrewPrefix = 0 > seconds ? `${selectedLang.ago} ` : (0 < seconds ? `${selectedLang.in} ` : '')
 
-				if (interval.label === 'day' && seconds > 0) {
+				if ('day' === interval.label && 0 < seconds) {
 					const hours = Math.floor((Math.abs(seconds) % 86400) / 3600)
 					const hourUnit = selectedLang.hour as TimeUnit
-					const hourForm = hours === 1 ? hourUnit.singular : hourUnit.plural
-					return `${hebrewPrefix}${count} ${form}${hours > 0 ? ` ${hours} ${hourForm}` : ''}`
+					const hourForm = 1 === hours ? hourUnit.singular : hourUnit.plural
+					return `${hebrewPrefix}${count} ${form}${ 0 < hours ? ` ${hours} ${hourForm}` : ''}`
 				}
 				return `${hebrewPrefix}${count} ${form}`
 			}
 
 			// Handle other languages
-			if (interval.label === 'day' && seconds > 0) {
+			if ('day' === interval.label && 0 < seconds) {
 				const hours = Math.floor((Math.abs(seconds) % 86400) / 3600)
-				const hourLabel = hours > 1 ? `${selectedLang.hour}s` : selectedLang.hour
-				return `${prefix}${count} ${selectedLang[interval.label]}${hours > 0 ? ` ${hours} ${hourLabel}` : ''}${suffix}`
+				const hourLabel = 1 < hours ? `${selectedLang.hour}s` : selectedLang.hour
+				return `${prefix}${count} ${selectedLang[interval.label]}${ 0 < hours ? ` ${hours} ${hourLabel}` : ''}${suffix}`
 			}
 			return `${prefix}${count} ${selectedLang[interval.label]}${suffix}`
 		}
@@ -168,7 +168,7 @@ export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en'
 }
 
 function getBrowserNavigatorLocale(): string {
-	if (typeof navigator !== 'object') return 'en-US'
+	if ('object' !== typeof navigator) {return 'en-US'}
 	return navigator.languages && navigator.languages.length
 		? navigator.languages[0]
 		: navigator.language
@@ -182,7 +182,7 @@ function getBrowserNavigatorLocale(): string {
  */
 export function handleTimezone(date: Date, intFmtOpt: Intl.DateTimeFormatOptions): Date {
 	// If timeZone is UTC, convert to UTC directly
-	if (intFmtOpt.timeZone === 'UTC') {
+	if ('UTC' === intFmtOpt.timeZone) {
 		const utcDate = new Date(date.getTime())
 		utcDate.setMinutes(utcDate.getMinutes() + date.getTimezoneOffset())
 		return utcDate
@@ -203,7 +203,7 @@ export function handleTimezone(date: Date, intFmtOpt: Intl.DateTimeFormatOptions
 		const parts: Record<string, number> = {}
 
 		formattedParts.forEach((part) => {
-			if (part.type !== 'literal' && part.type !== 'timeZoneName') {
+			if ('literal' !== part.type && 'timeZoneName' !== part.type) {
 				parts[part.type] = Number.parseInt(part.value, 10)
 			}
 		})
@@ -305,10 +305,10 @@ export function formatDate(
 	let rest: Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> = {}
 
 	// Handle both overloads
-	if (typeof formatOrOpts === 'string') {
+	if ('string' === typeof formatOrOpts) {
 		// First overload: format string directly
 		format = formatOrOpts
-	} else if (formatOrOpts && typeof formatOrOpts === 'object') {
+	} else if (formatOrOpts && 'object' === typeof formatOrOpts) {
 		// Second overload: options object
 		format = formatOrOpts.fmt
 		locale = formatOrOpts.locale
@@ -316,13 +316,13 @@ export function formatDate(
 		rest = formatOrOpts
 	}
 
-	if (!date) return ''
+	if (!date) {return ''}
 	format = format || 'DD.MM.YY'
 
 	locale = locale || getBrowserNavigatorLocale()
 	try {
 		// Validate the date
-		const d = typeof date === 'string' || typeof date === 'number' ? new Date(date) : date
+		const d = 'string' === typeof date || 'number' === typeof date ? new Date(date) : date
 
 		// Check if date is valid
 		if (Number.isNaN(d.getTime())) {
@@ -355,7 +355,7 @@ export function formatDate(
 		const partsMap: Partial<Record<Intl.DateTimeFormatPartTypes, string>> = {}
 
 		formattedParts.forEach((part) => {
-			if (part.type !== 'literal') {
+			if ('literal' !== part.type) {
 				partsMap[part.type] = part.value
 			}
 		})