@bagelink/vue 1.4.109 → 1.4.115

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

@@ -34,7 +34,7 @@ export interface UseSchemaFieldOptions<T, SFP extends Path<T>> {
 	includeUnset?: boolean
 }
 
-export function useSchemaField<T extends { [key: string]: any }, SP extends Path<T>>(optns: UseSchemaFieldOptions<T, SP>) {
+export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchemaFieldOptions<T, Path<T>>) {
 	const { mode = 'form', getFormData, onUpdateModelValue, includeUnset = false } = optns
 
 	// Helper function to render objects recursively
@@ -96,18 +96,18 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 	}
 
-	function renderChild(child: SchemaChild<T, SP>, slots?: BaseBagelField<T, SP>['slots']) {
+	function renderChild(child: SchemaChild<T, Path<T>>, slots?: BaseBagelField<T, Path<T>>['slots']) {
 		if (typeof child === 'string') return child
 		if (isVNode(child)) return child
 		return renderField(
-			child as BaseBagelField<T, SP>,
+			child as BaseBagelField<T, Path<T>>,
 			slots
 		)
 	}
 
 	function renderField(
-		field: BaseBagelField<T, SP>,
-		slots?: BaseBagelField<T, SP>['slots']
+		field: BaseBagelField<T, Path<T>>,
+		slots?: BaseBagelField<T, Path<T>>['slots']
 	): VNode | undefined {
 		const Component = getComponent(field as Field<T>)
 		if (!Component) return
@@ -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
@@ -292,7 +320,7 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 								return schemaField
 							}
 
-							return renderField(schemaField as BaseBagelField<T, SP>, slots)
+							return renderField(schemaField as BaseBagelField<T, Path<T>>, slots)
 						})
 					}
 				}
@@ -301,7 +329,7 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 
 		// Handle custom slot content from parent
 
-		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, SP> | undefined)?.({ row: rowData, field }) : undefined
+		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, Path<T>> | undefined)?.({ row: rowData, field }) : undefined
 		// field.id && slots?.[field.id] && typeof slots[field.id] === 'function' && !Array.isArray(slots?.[field.id])
 		// 			? (slots[field.id])({ row: rowData, field })
 		// 			: undefined

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'
@@ -14,7 +14,7 @@ export type AttributeValue =
 	| { [key: string]: any }
 
 export type AttributeFn<T, P extends Path<T>> = (
-	field: FieldVal<T, P>,
+	field: SmartFieldVal<T, P>,
 	row?: T
 ) => AttributeValue
 
@@ -34,15 +34,16 @@ export type BagelFieldOptions<T, P extends Path<T>> =
 		| boolean
 		| { [key: string]: any }
 	)[]
-	| ((val?: FieldVal<T, P>, rowData?: T) => void)
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+	| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
 
 export type VIfType<T, P extends Path<T>> =
 	| string
 	| boolean
-	| ((val?: FieldVal<T, P>, rowData?: T) => boolean)
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
 
 export type ValidationFn<T, P extends Path<T>> = (
-	val?: FieldVal<T, P>,
+	val?: SmartFieldVal<T, P>,
 	rowData?: T
 ) => string | undefined
 
@@ -58,7 +59,61 @@ export type _Path<
 export type Path<T, PO extends PathsOptions = DefaultPathsOptions> =
 	FieldVal<T, _Path<T, PO>> extends Array<any>
 		? LiteralStringUnion<_Path<T, PO>>
-		: _Path<T, PO>
+		: _Path<T, PO> | string
+
+// Smart field value type that preserves type information when possible
+export type SmartFieldVal<T, P extends Path<T>> =
+	P extends string
+		? P extends keyof T
+			? T[P]
+			: any
+		: FieldVal<T, P>
+
+// Smart bagel field options that preserve type information
+export type SmartBagelFieldOptions<T, P extends Path<T>> =
+	| string
+	| (
+		| {
+			label?: string
+			value: string | number
+		}
+		| string
+		| number
+		| boolean
+		| { [key: string]: any }
+	)[]
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+	| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
+
+// Smart VIf type that preserves type information
+export type SmartVIfType<T, P extends Path<T>> =
+	| string
+	| boolean
+	| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
+
+// Smart validation function that preserves type information
+export type SmartValidationFn<T, P extends Path<T>> = (
+	val?: SmartFieldVal<T, P>,
+	rowData?: T
+) => string | undefined
+
+// Smart attribute function that preserves type information
+export type SmartAttributeFn<T, P extends Path<T>> = (
+	field: SmartFieldVal<T, P>,
+	row?: T
+) => AttributeValue
+
+// Smart transform function that preserves type information
+export type SmartTransformFn<T, P extends Path<T>> = (
+	val?: SmartFieldVal<T, P>,
+	rowData?: T
+) => any
+
+// Smart update function that preserves type information
+export type SmartUpdateFn<T, P extends Path<T>> = (
+	val?: SmartFieldVal<T, P>,
+	rowData?: T
+) => unknown
 
 /** The value type at path P in object T. */
 // Fall back to unknown if type resolution fails
@@ -103,20 +158,20 @@ export interface BaseBagelField<
 	'id'?: P
 	'label'?: string
 	'placeholder'?: string
-	'class'?: AttributeValue | AttributeFn<T, P>
+	'class'?: AttributeValue | SmartAttributeFn<T, P>
 	'attrs'?: Attributes<T, P>
 	'required'?: boolean
 	'disabled'?: boolean
 	'helptext'?: string
-	'options'?: BagelFieldOptions<T, P>
+	'options'?: SmartBagelFieldOptions<T, P>
 	'children'?: SchemaChild<T, Path<T, PO>, PO>[]
 	'slots'?: { [key: string]: SchemaChild<T, Path<T, PO>, PO>[] }
 	'defaultValue'?: any
-	'vIf'?: VIfType<T, P>
-	'v-if'?: VIfType<T, P>
-	'transform'?: (val?: FieldVal<T, P>, rowData?: T) => any
-	'onUpdate'?: (val?: FieldVal<T, P>, rowData?: T) => unknown
-	'validate'?: ValidationFn<T, P>
+	'vIf'?: SmartVIfType<T, P>
+	'v-if'?: SmartVIfType<T, P>
+	'transform'?: SmartTransformFn<T, P>
+	'onUpdate'?: SmartUpdateFn<T, P>
+	'validate'?: SmartValidationFn<T, P>
 }
 
 export type _MappedBaseBagelField<