@bagelink/vue 1.4.109 → 1.4.111

package/src/components/layout/AppSidebar.vue

@@ -0,0 +1,271 @@
+<script lang="ts" setup>
+import { inject, computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { Btn, Icon } from '@bagelink/vue'
+import type { NavLink } from '@bagelink/vue'
+
+// Extended interface for footer links that can have actions
+interface FooterLink extends NavLink {
+	action?: () => void
+}
+
+interface Props {
+	navLinks: NavLink[]
+	footerLinks?: FooterLink[]
+	logo?: string
+	logoAlt?: string
+	card?: boolean
+	bgColor?: string
+	textColor?: string
+	activeColor?: string
+	logoHeight?: string
+	name?: string
+	frame?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	card: true,
+	bgColor: 'var(--bgl-white)',
+	textColor: 'var(--bgl-black)',
+	activeColor: 'var(--bgl-black)',
+	logoAlt: 'Logo',
+	logoHeight: '2rem',
+	name: 'App Name',
+	footerLinks: () => [],
+})
+
+const route = useRoute()
+const isTransitioning = ref(false)
+
+// Inject menu state from parent
+const menuState = inject('menuState') as {
+	isOpen: { value: boolean }
+	isMobile: { value: boolean }
+	closeOnMobile: () => void
+	sidebarWidth: string
+	sidebarCollapsedWidth: string
+}
+
+// Watch for changes in menu state to handle transitioning
+watch(
+	() => menuState.isOpen.value,
+	() => {
+		if (!menuState.isMobile.value) {
+			isTransitioning.value = true
+			// Reset after transition completes
+			setTimeout(() => {
+				isTransitioning.value = false
+			}, 300) // Match the CSS transition duration
+		}
+	}
+)
+
+// Computed styles
+const sidebarStyles = computed(() => {
+	let width = '280px'
+
+	if (!menuState.isMobile.value) {
+		const collapsedWidth = props.card ? '82px' : '76px'
+		width = menuState.isOpen.value ? menuState.sidebarWidth : collapsedWidth
+	}
+
+	return {
+		width,
+	}
+})
+
+function logout() {
+	console.log('Logging out...')
+	// Add your logout logic here
+}
+</script>
+
+<template>
+	<aside
+		class="app-sidebar transition-400 fixed inset h-100vh z-99"
+		:class="{
+			'sidebar-mobile-open': menuState.isMobile.value && menuState.isOpen.value,
+	'sidebar-mobile-closed':
+		menuState.isMobile.value && !menuState.isOpen.value,
+	transitioning: isTransitioning,
+	'p-05': props.card,
+	'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
+}"
+		:style="sidebarStyles"
+	>
+		<div
+			:style="{
+				backgroundColor: props.bgColor,
+				color: props.textColor,
+	...(props.card && { borderRadius: 'var(--card-border-radius)' }),
+}"
+			:class="{
+				card: props.card,
+	'ps-05': !menuState.isOpen.value,
+				'scrollbar-gutter-both': menuState.isOpen.value,
+	aside_frame: props.frame,
+}"
+			class="overflow-hidden flex column flex-stretch gap-1 w100p pt-1 pb-05 h-100p"
+		>
+			<!-- Logo/Brand -->
+			<router-link
+				to="/"
+				class="decoration-none flex px-05"
+				:class="{
+					'gap-025': menuState.isOpen.value,
+					'gap-0': !menuState.isOpen.value,
+				}"
+			>
+				<img
+					v-if="props.logo"
+					:src="props.logo"
+					:alt="props.logoAlt"
+					class="contain"
+					:style="{ height: props.logoHeight }"
+				/>
+				<span class="nav-text">
+					{{ props.name }}
+				</span>
+			</router-link>
+
+			<!-- Navigation Links -->
+			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
+				<Btn v-for="link in props.navLinks" :key="link.to" :title="!menuState.isOpen.value && !menuState.isMobile.value
+					? link.label
+					: ''
+																	" fullWidth alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': route.path === link.to }" :style="{
+																		backgroundColor:
+																			route.path === link.to ? props.activeColor : props.bgColor,
+																		color: route.path === link.to ? 'white' : props.textColor,
+																}" :to="link.to || '/'">
+					<Icon :name="link.icon" size="1.2" />
+					<span class="nav-text">
+						{{ link.label }}
+					</span>
+				</Btn>
+				</nav>
+				<!-- Footer -->
+				<div class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto scrollbar-gutter-stable">
+					<!-- Footer Links -->
+					<Btn v-for="link in props.footerLinks" :key="link.to || link.label" :title="!menuState.isOpen.value && !menuState.isMobile.value
+						? link.label
+						: ''
+																	" alignTxt="start" fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action">
+						<span class="nav-text">
+							{{ link.label }}
+						</span>
+					</Btn>
+				
+					<!-- Default Logout Button if no footer links provided -->
+					<Btn v-if="props.footerLinks.length === 0" :title="!menuState.isOpen.value && !menuState.isMobile.value ? 'Logout' : ''
+																	" alignTxt="start" fullWidth flat icon="logout" class="flex-shrink-0 px-1" @click="logout">
+						<span class="nav-text"> Logout </span>
+					</Btn>
+				
+					<!-- Custom Footer Content Slot -->
+					<slot name="footer" />
+				</div>
+				</div>
+				</aside>
+</template>
+
+<style>
+.aside_frame {
+	outline: 1px solid var(--border-color);
+}
+
+.card .aside_frame {
+	outline-offset: -1px;
+}
+
+.app-sidebar {
+	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	--input-font-size: 0.875rem;
+	/* 14px */
+}
+
+/* הסתרת סרגל גלילה רק בזמן טרנזישן */
+.sidebar-nav {
+	overflow-y: auto;
+	flex: 1;
+}
+
+/* הסתרת גלילה בזמן שינוי גודל */
+.app-sidebar.transitioning .sidebar-nav {
+	scrollbar-width: none;
+	/* Firefox */
+	-ms-overflow-style: none;
+	/* IE and Edge */
+}
+
+.app-sidebar.transitioning .sidebar-nav::-webkit-scrollbar {
+	display: none;
+	/* Chrome, Safari and Opera */
+}
+
+/* אנימציות איטות לטקסט */
+.nav-text {
+	transition:
+		opacity 0.3s ease,
+		transform 0.3s ease;
+	white-space: nowrap;
+	overflow: hidden;
+	opacity: 1;
+	transform: translateX(0);
+	max-width: 200px;
+	font-weight: 300;
+}
+
+.app-sidebar.sidebar-collapsed .bgl_btn_fullWidth {
+	width: fit-content !important;
+}
+
+.app-sidebar.sidebar-collapsed .bgl_btn-flex {
+	gap: 0 !important;
+}
+
+/* אנימציות נכנסות ויוצאות */
+@media (min-width: 911px) {
+	.app-sidebar {
+		transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	/* כשהמניו סגור - הטקסט נעלם תחילה */
+	.app-sidebar.sidebar-collapsed .nav-text {
+		opacity: 0;
+		transform: translateX(-15px);
+		max-width: 0;
+		transition:
+			opacity 0.15s ease,
+			transform 0.15s ease,
+			max-width 0.15s ease;
+	}
+
+	/* כשהמניו פתוח - הטקסט מופיע אחרי שהרוחב משתנה */
+	.app-sidebar:not(.sidebar-collapsed) .nav-text {
+		opacity: 1;
+		transform: translateX(0);
+		max-width: 200px;
+		transition:
+			opacity 0.3s ease 0.15s,
+			transform 0.3s ease 0.15s,
+			max-width 0.3s ease 0.15s;
+	}
+}
+
+/* במובייל הטקסט תמיד מופיע */
+@media (max-width: 910px) {
+	.app-sidebar {
+		transform: translateX(-100%);
+		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.sidebar-mobile-open {
+		transform: translateX(0);
+	}
+
+	.sidebar-mobile-closed {
+		transform: translateX(-100%);
+	}
+}
+</style>

package/src/components/layout/index.ts

@@ -6,3 +6,8 @@ export { default as TabbedLayout } from './TabbedLayout.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TabsBody } from './TabsBody.vue'
 export { default as TabsNav } from './TabsNav.vue'
+export { default as AppContent } from './AppContent.vue'
+export { default as AppLayout } from './AppLayout.vue'
+export { default as AppSidebar } from './AppSidebar.vue'
+
+

package/src/composables/useFormField.ts

@@ -14,7 +14,13 @@ export function useFormField<T>(props: {
 		get: () => {
 			if (!props.fieldID || !formState) return props.modelValue ?? props.field.defaultValue ?? ''
 			const value = formState.getFieldData(props.fieldID)
+			// For nested form containers, default to empty object
 			if (props.field.$el === 'form' && !value) return {}
+			// If no value is set yet and a defaultValue exists, write it into form state once
+			if ((value === undefined || value === null || value === '') && props.field.defaultValue !== undefined) {
+				formState.updateField(props.fieldID, props.field.defaultValue)
+				return props.field.defaultValue
+			}
 			return value ?? ''
 		},
 		set: (val: any) => {

package/src/composables/useSchemaField.ts

@@ -226,9 +226,37 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 
 		// Add options if they exist in the field
 		if (field.options) {
-			props.options = typeof field.options === 'function'
-				? field.options(currentValue, rowData)
-				: field.options
+			if (Array.isArray(field.options)) {
+				props.options = field.options
+			} else if (typeof field.options === 'function') {
+				const fn = field.options as any
+				// Component-aware mapping
+				if (Component === SelectInput) {
+					props.options = (query: string) => {
+						const row = getFormData?.()
+						const val = currentValue
+						const out = fn(val, row)
+						if (Array.isArray(out)) return out
+						if (typeof out === 'function') return out(query)
+						if (out && typeof out.then === 'function') return out
+						return fn(query, val, row)
+					}
+				} else {
+					// Non-search components (e.g., RadioGroup): return a zero-arg async loader using latest row
+					props.options = async () => {
+						const row = getFormData?.()
+						const val = currentValue
+						const out = fn(val, row)
+						if (Array.isArray(out)) return out
+						if (typeof out === 'function') return await out('')
+						if (out && typeof out.then === 'function') return await out
+						if (fn.length >= 3) return await fn('', val, row)
+						return []
+					}
+				}
+			} else {
+				props.options = field.options
+			}
 		}
 
 		// Handle dynamic props and attrs

package/src/styles/inputs.css

@@ -65,6 +65,15 @@ select {
     width: 100%;
 }
 
+.bagel-input.frame input,
+.bagel-input.frame textarea,
+.bagel-input.frame select,
+.custom-select.frame .input {
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+}
+
+
 .bagel-input input::-webkit-input-placeholder,
 .bagel-input textarea::-webkit-input-placeholder,
 .bagel-input select::-webkit-input-placeholder,

package/src/styles/theme.css

@@ -44,7 +44,7 @@
 /* TYPE */
 :root {
     --bgl-font: 'Lexend', 'Ploni', sans-serif;
-    --input-font-size: 16px;
+    --input-font-size: 14px;
 }
 
 /* DIMENSIONS */
@@ -55,7 +55,7 @@
     --pill-font-size: 12px;
     --input-border-radius: 7px;
     --card-border-radius: 12px;
-    --btn-border-radius: 10px;
+    --btn-border-radius: 6px;
     --btn-padding: 30px;
     --btn-height: 40px;
     --pill-border-radius: 8px;

package/src/types/BagelForm.ts

@@ -1,4 +1,4 @@
-import type { ArrayAttrs, FieldArray, SelectInput, TextInput } from '@bagelink/vue'
+import type { ArrayAttrs, FieldArray, SelectInput, TextInput, Option } from '@bagelink/vue'
 import type { Paths, Get, IterableElement, OmitIndexSignature } from 'type-fest'
 import type { ToString } from 'type-fest/source/internal'
 import type { LiteralStringUnion } from 'type-fest/source/literal-union'
@@ -34,7 +34,8 @@ export type BagelFieldOptions<T, P extends Path<T>> =
 		| boolean
 		| { [key: string]: any }
 	)[]
-	| ((val?: FieldVal<T, P>, rowData?: T) => void)
+	| ((val?: FieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+	| ((query: string, val?: FieldVal<T, P>, rowData?: T) => Promise<Option[]>)
 
 export type VIfType<T, P extends Path<T>> =
 	| string

package/src/utils/BagelFormUtils.ts

@@ -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> {
@@ -128,7 +127,7 @@ export function selectField<
 >(
 	id?: P,
 	label?: string,
-	options?: Option[] | (() => Option[]),
+	options?: Option[] | ((query: string) => Promise<Option[]>) | ((val?: any, row?: T) => Option[] | ((query: string) => Promise<Option[]>)) | ((query: string, val?: any, row?: T) => Promise<Option[]>),
 	config?: SlctInputOptions<T, P>,
 ): SelectBagelField<T, P, PO> {
 	return {
@@ -148,7 +147,6 @@ export function selectField<
 			disabled: config?.disabled,
 			searchable: config?.searchable,
 			multiselect: config?.multiselect,
-			onSearch: config?.onSearch,
 			clearable: config?.clearable,
 			autocomplete: config?.autocomplete,
 		},

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
@@ -388,6 +396,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