@bagelink/vue 1.12.19 → 1.12.25

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.19",
+  "version": "1.12.25",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.12.19"
+    "@bagelink/utils": "1.12.25"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/Pagination.vue

@@ -231,7 +231,7 @@ const renderPageButtons = computed(() => {
 	height: 30px;
 	background-color: var(--bgl-primary);
 	transition: all 0.3s ease;
-	z-index: -1;
+	/* z-index: -1; */
 }
 
 .selected {

package/src/components/calendar/CalendarTypes.ts

@@ -14,11 +14,22 @@ export type CalendarView = 'Week' | 'Month' | 'Day' | 'Agenda'
 
 export type WeekStart = 'Sunday' | 'Monday'
 
+export interface AvailabilitySlot {
+	start_time: Date
+	end_time: Date
+}
+
 export interface CalendarProps {
 	events?: CalendarEvent[]
 	startDate?: Date
 	view?: CalendarView
 	weekStart?: WeekStart
+	/** When true, renders availability blocks on the week grid */
+	availabilityMode?: boolean
+	/** When true, allows drag-to-paint editing of availability (requires availabilityMode) */
+	availabilityEditable?: boolean
+	/** Existing availability slots to display as painted blocks */
+	availabilitySlots?: AvailabilitySlot[]
 }
 
 export interface CalendarViewState {

package/src/components/calendar/Index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-import type { CalendarEvent, CalendarProps, CalendarView, CalendarViewState } from './CalendarTypes'
+import type { AvailabilitySlot, CalendarEvent, CalendarView, CalendarViewState, WeekStart } from './CalendarTypes'
 import { timeDelta, Btn, ListItem, Dropdown, formatDate } from '@bagelink/vue'
 import { ref, computed, onMounted } from 'vue'
 import CalendarPopover from './CalendarPopover.vue'
@@ -9,11 +9,22 @@ import DayView from './views/DayView.vue'
 import MonthView from './views/MonthView.vue'
 import WeekView from './views/WeekView.vue'
 
-const props = withDefaults(defineProps<CalendarProps>(), {
+const props = withDefaults(defineProps<{
+	events?: CalendarEvent[]
+	startDate?: Date
+	view?: CalendarView
+	weekStart?: WeekStart
+	availabilityMode?: boolean
+	availabilityEditable?: boolean
+	availabilitySlots?: AvailabilitySlot[]
+}>(), {
 	startDate: () => new Date(),
 	view: 'Week',
 	weekStart: 'Sunday',
-	events: () => []
+	events: () => [],
+	availabilityMode: false,
+	availabilityEditable: false,
+	availabilitySlots: () => []
 })
 
 const emit = defineEmits<{
@@ -24,6 +35,7 @@ const emit = defineEmits<{
 	(e: 'dateChange', changeEvent: CalendarViewState): void
 	(e: 'viewChange', changeEvent: CalendarViewState): void
 	(e: 'ready', changeEvent: CalendarViewState): void
+	(e: 'availabilityChange', slots: AvailabilitySlot[]): void
 }>()
 
 const currentDate = ref(new Date(props.startDate))
@@ -117,7 +129,14 @@ defineExpose({
 	closePopover
 })
 
-onMounted(() => { emit('ready', state.value) })
+onMounted(() => {
+	console.log('[Calendar] props:', {
+		availabilityMode: props.availabilityMode,
+		availabilityEditable: props.availabilityEditable,
+		availabilitySlots: props.availabilitySlots?.length
+	})
+	emit('ready', state.value)
+})
 </script>
 
 <template>
@@ -144,8 +163,10 @@ onMounted(() => { emit('ready', state.value) })
 		</div>
 		<component
 			:is="views[currentView]" :events="events" :start-date="currentDate" :week-start="weekStart"
+			:availability-mode="props.availabilityMode" :availability-editable="props.availabilityEditable" :availability-slots="props.availabilitySlots"
 			@event-click="handleEventClick" @event-create="handleEventCreate" @event-update="handleEventUpdate"
 			@event-delete="handleEventDelete" @date-change="handleDateChange" @open-popover="openPopover"
+			@availability-change="(slots: AvailabilitySlot[]) => emit('availabilityChange', slots)"
 		>
 			<template #eventContent="{ event, close }">
 				<slot name="eventContent" :event="event" :close="close" />

package/src/components/calendar/views/WeekView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { SetupContext, ComponentPublicInstance } from 'vue'
-import type { CalendarEvent, WeekStart } from '../CalendarTypes'
+import type { AvailabilitySlot, CalendarEvent, WeekStart } from '../CalendarTypes'
 import { formatDate } from '@bagelink/vue'
-import { ref, computed, onMounted, onUnmounted, useSlots, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, useSlots, nextTick, watch } from 'vue'
 
 interface WeekViewEvent extends CalendarEvent {
 	top: number
@@ -17,16 +17,23 @@ const props = withDefaults(defineProps<{
 	events?: CalendarEvent[]
 	startDate?: Date
 	weekStart?: WeekStart
+	availabilityMode?: boolean
+	availabilityEditable?: boolean
+	availabilitySlots?: AvailabilitySlot[]
 }>(), {
 	startDate: () => new Date(),
 	weekStart: 'Sunday',
-	events: () => []
+	events: () => [],
+	availabilityMode: false,
+	availabilityEditable: false,
+	availabilitySlots: () => []
 })
 
 const emit = defineEmits<{
 	(e: 'eventClick', event: CalendarEvent): void
 	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
 	(e: 'openPopover', event: CalendarEvent, position?: { top: number, left: number }): void
+	(e: 'availabilityChange', slots: AvailabilitySlot[]): void
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
@@ -52,16 +59,24 @@ const dragState = ref({
 	endTime: undefined as Date | undefined
 })
 
-// Time indicators
-const currentTimeTop = ref(0)
-const isToday = ref(false)
-const currentTimeInterval = ref<any>()
+// ===== AVAILABILITY MODE =====
+const AVAILABILITY_SNAP_MINUTES = 30
+const localAvailability = ref<AvailabilitySlot[]>([])
+const availDragState = ref({
+	isDragging: false,
+	mode: 'add' as 'add' | 'remove',
+	dayIndex: -1,
+	startMinute: 0,
+	currentMinute: 0
+})
 
-const timeSlotsContainer = ref<HTMLElement>()
-const calendarGrid = ref<HTMLElement>()
-const dayColumns = ref<HTMLElement[]>([])
-const dayColumnsContainer = ref<HTMLElement>()
-const scrollableContainer = ref<HTMLElement>()
+// Sync external availability slots to local state
+watch(() => props.availabilitySlots, (slots) => {
+	localAvailability.value = slots.map(s => ({
+		start_time: new Date(s.start_time),
+		end_time: new Date(s.end_time)
+	}))
+}, { immediate: true })
 
 // Calculate week days based on start date and week start preference
 const weekDays = computed(() => {
@@ -83,19 +98,197 @@ const weekDays = computed(() => {
 	return days
 })
 
+function snapMinutes(minutes: number): number {
+	return Math.round(minutes / AVAILABILITY_SNAP_MINUTES) * AVAILABILITY_SNAP_MINUTES
+}
+
+function getAvailabilitySlotsForDay(day: Date) {
+	return localAvailability.value.filter((slot) => {
+		const slotDate = new Date(slot.start_time)
+		return slotDate.getFullYear() === day.getFullYear()
+			&& slotDate.getMonth() === day.getMonth()
+			&& slotDate.getDate() === day.getDate()
+	}).map((slot) => {
+		const startMinutes = new Date(slot.start_time).getHours() * 60 + new Date(slot.start_time).getMinutes()
+		const endMinutes = new Date(slot.end_time).getHours() * 60 + new Date(slot.end_time).getMinutes()
+		return {
+			top: (startMinutes / slotDuration) * slotHeight,
+			height: ((endMinutes - startMinutes) / slotDuration) * slotHeight,
+			slot
+		}
+	})
+}
+
+function availabilityPreviewForDay(dayIndex: number) {
+	if (!availDragState.value.isDragging || availDragState.value.dayIndex !== dayIndex) return null
+	const minM = Math.min(availDragState.value.startMinute, availDragState.value.currentMinute)
+	const maxM = Math.max(availDragState.value.startMinute, availDragState.value.currentMinute)
+	return {
+		top: (minM / slotDuration) * slotHeight,
+		height: ((maxM - minM) / slotDuration) * slotHeight,
+		mode: availDragState.value.mode
+	}
+}
+
+function isMinuteInAvailability(day: Date, minute: number): boolean {
+	return localAvailability.value.some((slot) => {
+		const slotDate = new Date(slot.start_time)
+		if (slotDate.getFullYear() !== day.getFullYear()
+			|| slotDate.getMonth() !== day.getMonth()
+			|| slotDate.getDate() !== day.getDate()) { return false
+		}
+		const startM = slotDate.getHours() * 60 + slotDate.getMinutes()
+		const endM = new Date(slot.end_time).getHours() * 60 + new Date(slot.end_time).getMinutes()
+		return minute >= startM && minute < endM
+	})
+}
+
+function handleAvailMouseDown(e: MouseEvent, dayIndex: number) {
+	if (!props.availabilityEditable) return
+	e.preventDefault()
+	e.stopPropagation()
+	const day = weekDays.value[dayIndex]
+	const minutes = snapMinutes(getMinutesFromY(e.clientY))
+	const isExisting = isMinuteInAvailability(day, minutes)
+
+	availDragState.value = {
+		isDragging: true,
+		mode: isExisting ? 'remove' : 'add',
+		dayIndex,
+		startMinute: minutes,
+		currentMinute: minutes + AVAILABILITY_SNAP_MINUTES
+	}
+
+	document.addEventListener('mousemove', handleAvailMouseMove)
+	document.addEventListener('mouseup', handleAvailMouseUp)
+}
+
+function handleAvailMouseMove(e: MouseEvent) {
+	if (!availDragState.value.isDragging) return
+	const minutes = snapMinutes(getMinutesFromY(e.clientY))
+	availDragState.value.currentMinute = minutes
+}
+
+function handleAvailMouseUp() {
+	if (!availDragState.value.isDragging) return
+	const { dayIndex, startMinute, currentMinute, mode } = availDragState.value
+	const day = weekDays.value[dayIndex]
+	const minM = Math.min(startMinute, currentMinute)
+	const maxM = Math.max(startMinute, currentMinute)
+
+	if (maxM - minM < AVAILABILITY_SNAP_MINUTES) {
+		availDragState.value.isDragging = false
+		document.removeEventListener('mousemove', handleAvailMouseMove)
+		document.removeEventListener('mouseup', handleAvailMouseUp)
+		return
+	}
+
+	const newStart = new Date(day)
+	newStart.setHours(Math.floor(minM / 60), minM % 60, 0, 0)
+	const newEnd = new Date(day)
+	newEnd.setHours(Math.floor(maxM / 60), maxM % 60, 0, 0)
+
+	if (mode === 'add') {
+		// Add and merge overlapping
+		const otherDays = localAvailability.value.filter((s) => {
+			const d = new Date(s.start_time)
+			return d.getFullYear() !== day.getFullYear()
+				|| d.getMonth() !== day.getMonth()
+				|| d.getDate() !== day.getDate()
+		})
+		const sameDaySlots = localAvailability.value.filter((s) => {
+			const d = new Date(s.start_time)
+			return d.getFullYear() === day.getFullYear()
+				&& d.getMonth() === day.getMonth()
+				&& d.getDate() === day.getDate()
+		})
+		sameDaySlots.push({ start_time: newStart, end_time: newEnd })
+		// Sort and merge
+		sameDaySlots.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
+		const merged: AvailabilitySlot[] = []
+		for (const s of sameDaySlots) {
+			if (merged.length === 0) {
+				merged.push({ start_time: new Date(s.start_time), end_time: new Date(s.end_time) })
+			} else {
+				const last = merged[merged.length - 1]
+				if (new Date(s.start_time).getTime() <= new Date(last.end_time).getTime()) {
+					last.end_time = new Date(Math.max(new Date(last.end_time).getTime(), new Date(s.end_time).getTime()))
+				} else {
+					merged.push({ start_time: new Date(s.start_time), end_time: new Date(s.end_time) })
+				}
+			}
+		}
+		localAvailability.value = [...otherDays, ...merged]
+	} else {
+		// Remove: subtract the range from existing slots
+		const result: AvailabilitySlot[] = []
+		for (const s of localAvailability.value) {
+			const d = new Date(s.start_time)
+			if (d.getFullYear() !== day.getFullYear()
+				|| d.getMonth() !== day.getMonth()
+				|| d.getDate() !== day.getDate()) {
+				result.push(s)
+				continue
+			}
+			const sStart = new Date(s.start_time).getTime()
+			const sEnd = new Date(s.end_time).getTime()
+			const rStart = newStart.getTime()
+			const rEnd = newEnd.getTime()
+
+			// No overlap
+			if (sEnd <= rStart || sStart >= rEnd) {
+				result.push(s)
+				continue
+			}
+			// Left remainder
+			if (sStart < rStart) {
+				result.push({ start_time: new Date(sStart), end_time: new Date(rStart) })
+			}
+			// Right remainder
+			if (sEnd > rEnd) {
+				result.push({ start_time: new Date(rEnd), end_time: new Date(sEnd) })
+			}
+		}
+		localAvailability.value = result
+	}
+
+	emit('availabilityChange', localAvailability.value)
+	availDragState.value.isDragging = false
+	document.removeEventListener('mousemove', handleAvailMouseMove)
+	document.removeEventListener('mouseup', handleAvailMouseUp)
+}
+
+// Time indicators
+const currentTimeTop = ref(0)
+const isToday = ref(false)
+const currentTimeInterval = ref<any>()
+
+const timeSlotsContainer = ref<HTMLElement>()
+const calendarGrid = ref<HTMLElement>()
+const dayColumns = ref<HTMLElement[]>([])
+const dayColumnsContainer = ref<HTMLElement>()
+const scrollableContainer = ref<HTMLElement>()
+
+function getMinutesFromY(clientY: number): number {
+	if (!dayColumnsContainer.value) return 0
+	const rect = dayColumnsContainer.value.getBoundingClientRect()
+	const relativeY = clientY - rect.top
+	return Math.max(0, Math.min((relativeY / slotHeight) * slotDuration, 24 * 60))
+}
+
 // Generate hourly time slots
 const timeSlots = computed(() => {
-	const slots = []
+	const items = []
 	for (let hour = timeRange.start; hour < timeRange.end; hour++) {
 		for (let minute = 0; minute < 60; minute += slotDuration) {
-			slots.push({
+			items.push({
 				hour,
 				minute,
 				time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
 			})
 		}
 	}
-	return slots
+	return items
 })
 
 // Calculate drag preview positioning using the same formula as events
@@ -410,6 +603,11 @@ function scrollToTime(time: number) {
 
 // Lifecycle hooks
 onMounted(() => {
+	console.log('[WeekView] mounted with props:', {
+		availabilityMode: props.availabilityMode,
+		availabilityEditable: props.availabilityEditable,
+		availabilitySlotsCount: props.availabilitySlots?.length
+	})
 	updateCurrentTimeIndicator()
 	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
 
@@ -420,6 +618,8 @@ onMounted(() => {
 onUnmounted(() => {
 	document.removeEventListener('mousemove', handleMouseMove)
 	document.removeEventListener('mouseup', handleMouseUp)
+	document.removeEventListener('mousemove', handleAvailMouseMove)
+	document.removeEventListener('mouseup', handleAvailMouseUp)
 
 	if (currentTimeInterval.value) {
 		clearInterval(currentTimeInterval.value)
@@ -466,8 +666,29 @@ onUnmounted(() => {
 
 				<div
 					v-for="(day, index) in weekDays" :key="day.toISOString()" :ref="el => setDayColumnRef(el, index)"
-					class="day-column top bottom border-start relative" @mousedown="handleMouseDown($event, day)"
+					class="day-column top bottom border-start relative"
+					@mousedown="props.availabilityEditable ? handleAvailMouseDown($event, index) : handleMouseDown($event, day)"
 				>
+					<!-- Availability painted blocks (behind events) -->
+					<template v-if="props.availabilityMode">
+						<div
+							v-for="(block, bi) in getAvailabilitySlotsForDay(day)" :key="`avail-${bi}`"
+							class="availability-block absolute start end"
+							:class="{ 'availability-editable': props.availabilityEditable }"
+							:style="{ top: `${block.top}px`, height: `${block.height}px` }"
+						/>
+						<!-- Availability drag preview -->
+						<div
+							v-if="availabilityPreviewForDay(index)"
+							class="availability-preview absolute start end pointer-events-none"
+							:class="{ 'avail-remove': availabilityPreviewForDay(index)!.mode === 'remove' }"
+							:style="{
+								top: `${availabilityPreviewForDay(index)!.top}px`,
+								height: `${availabilityPreviewForDay(index)!.height}px`,
+							}"
+						/>
+					</template>
+
 					<template
 						v-for="event in processedEvents.filter(e =>
 							new Date(e.start_time).toDateString() === day.toDateString())" :key="event.id"
@@ -587,6 +808,29 @@ onUnmounted(() => {
 	justify-content: center; */
 }
 
+.availability-block {
+	background-color: rgba(76, 175, 80, 0.18);
+	border-inline-start: 3px solid rgba(76, 175, 80, 0.5);
+	z-index: 0;
+	pointer-events: none;
+}
+
+.availability-block.availability-editable {
+	background-color: rgba(33, 150, 243, 0.18);
+	border-inline-start: 3px solid rgba(33, 150, 243, 0.5);
+}
+
+.availability-preview {
+	background-color: rgba(76, 175, 80, 0.25);
+	border: 1px dashed rgba(76, 175, 80, 0.6);
+	z-index: 0;
+}
+
+.availability-preview.avail-remove {
+	background-color: rgba(244, 67, 54, 0.15);
+	border-color: rgba(244, 67, 54, 0.5);
+}
+
 @media (max-width: 910px) {
 	.weekGrid {
 		display: grid;

package/src/components/dataTable/DataTable.vue

@@ -412,4 +412,14 @@ tbody tr {
 tbody tr:hover {
 	background: var(--bgl-gray-light);
 }
+
+@media (max-width: 910px) {
+	.col {
+		max-width: 60vw !important;
+	}
+	.max-col-width {
+	max-width: 60vw !important;
+}
+}
+
 </style>

package/src/components/form/inputs/ArrayInput.vue

@@ -136,7 +136,7 @@ function getItemRef(i: number) {
 			{{ helpText }}
 		</p>
 		<template v-if="!collapsible">
-			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center">
+			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center pb-1">
 				<slot :item="getItemRef(i)" :index="i" />
 				<div v-if="allowDelete" class="ms-075 my-1 border-start h-100p ps-025">
 					<Btn
@@ -149,13 +149,14 @@ function getItemRef(i: number) {
 		<Draggable v-if="collapsible" :model-value="items" handle=".grab" :disabled="!allowReorder" class="grid gap-05 mb-05" @end="onDraggableEnd">
 			<template #default="{ index: i }">
 				<div class="border radius-1 overflow-hidden">
-					<div class="grid gap-05 grid-array-line align-items-center pe-025 hover">
+					<div class="grid gap-0 grid-array-line align-items-center pe-025 hover">
 						<Btn
 							v-if="allowReorder" v-tooltip="resolveI18n('Drag to reorder')" flat thin icon="drag_indicator"
 							class="grab"
 						/>
+						<div v-else />
 						<Btn
-							full-width align-txt="start" class="px-05 bg-transparent color-inherit" :ripple="false"
+							full-width align-txt="start" class="px-025 bg-transparent color-inherit" :ripple="false"
 							:icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" @click="toggleItem(i)"
 						>
 							<p class="ellipsis-1">

package/src/components/layout/AppLayout.vue

@@ -4,15 +4,17 @@ import { ref, provide, onMounted, onUnmounted, computed } from 'vue'
 interface Props {
 	sidebarWidth?: string
 	sidebarCardStyle?: boolean
+	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	sidebarWidth: '260px',
-	sidebarCardStyle: false
+	sidebarCardStyle: false,
+	defaultOpen: true,
 })
 
 // Menu state
-const isOpen = ref(true)
+const isOpen = ref(props.defaultOpen)
 const isMobile = ref(false)
 
 // Check if mobile

package/src/components/layout/AppSidebar.vue

@@ -7,7 +7,7 @@ import { resolveI18n } from '../../i18n'
 
 // Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
-	activeRoutes?: string[] // נתיבים שצריכים להיות מסומנים כאקטיביים עבור הלינק הזה
+	activeRoutes?: string[] // Routes that should be marked as active for this link
 }
 
 interface Props {
@@ -23,10 +23,14 @@ interface Props {
 	name?: string
 	frame?: boolean
 	activeRoutes?: string[]
+	centerlinks?: boolean
+	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	card: true,
+	centerlinks: false,
+	defaultOpen: true,
 	bgColor: 'var(--bgl-white)',
 	textColor: 'var(--bgl-black)',
 	activeColor: 'var(--bgl-black)',
@@ -40,9 +44,12 @@ const route = useRoute()
 const isTransitioning = ref(false)
 
 // Inject menu state from parent
+const _fallbackIsOpen = ref(props.defaultOpen)
+const _fallbackIsMobile = ref(false)
+
 const menuState = inject('menuState', {
-	isOpen: { value: true },
-	isMobile: { value: false },
+	isOpen: _fallbackIsOpen,
+	isMobile: _fallbackIsMobile,
 	closeOnMobile: () => void 0,
 	sidebarWidth: '260px',
 	sidebarCollapsedWidth: '66px',
@@ -160,7 +167,7 @@ const sidebarStyles = computed(() => {
 		>
 			<!-- Logo/Brand -->
 			<router-link
-				to="/" class="decoration-none flex px-05" :class="{
+				to="/" class="decoration-none flex siderbarLogoWrap" :class="{
 					'gap-05': menuState.isOpen.value,
 					'gap-0': !menuState.isOpen.value,
 				}"
@@ -175,7 +182,7 @@ const sidebarStyles = computed(() => {
 			</router-link>
 
 			<!-- Navigation Links -->
-			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
+			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable" :class="{ 'justify-content-center': props.centerlinks }">
 				<Btn
 					v-for="link in props.navLinks" :key="link.to"
 					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" fullWidth
@@ -183,7 +190,8 @@ const sidebarStyles = computed(() => {
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
-					}" :to="link.to || '/'" @click="link.action"
+					}"
+					:to="link.to || '/'" @click="link.action"
 				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
@@ -196,8 +204,13 @@ const sidebarStyles = computed(() => {
 				<!-- Footer Links -->
 				<Btn
 					v-for="link in props.footerLinks" :key="link.to || link.label"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" alignTxt="start"
-					fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''"
+					:style="{
+						color: isActiveRoute(link) ? 'white' : props.textColor,
+					}"
+					fullWidth
+					alignTxt="start"
+					flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
 				>
 					<span class="nav-text">
 						{{ resolveI18n(link.label) }}

package/src/dialog/DialogForm.vue

@@ -108,15 +108,13 @@ function handleClose() {
 		:open="open" :title="title" :width="width" :position="position" :dismissable="dismissable"
 		@update:open="$emit('update:open', $event)" @close="handleClose"
 	>
-		<form @submit.prevent="handleSubmit">
-			<!-- Error message -->
-			<div v-if="error" class="dialog-form-error bg-red-30 color-red radius-1 mb-1 txt14 px-1 py-075">
-				{{ error }}
-			</div>
-
-			<!-- Form fields -->
-			<FormFlow ref="formFlowRef" v-model="formData" :schema="schema" />
-		</form>
+		<!-- Error message -->
+		<div v-if="error" class="dialog-form-error bg-red-30 color-red radius-1 mb-1 txt14 px-1 py-075">
+			{{ error }}
+		</div>
+
+		<!-- Form fields -->
+		<FormFlow ref="formFlowRef" v-model="formData" :schema="schema" @submit="handleSubmit" />
 
 		<template #footer>
 			<!-- Delete button (left side) -->