@bagelink/vue 1.4.73 → 1.4.79

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.73",
+  "version": "1.4.79",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Card.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
 	outline?: boolean
 	h100?: boolean
 	to?: string
+	href?: string
 	overflowX?: boolean
 	overflowY?: boolean
 	bg?:
@@ -21,16 +22,23 @@ const props = defineProps<{
 		| 'transparent'
 }>()
 
-const is = $computed(() => (props.to ? 'router-link' : 'div'))
+const bind = $computed(() => {
+	const obj: { [key: string]: any } = {}
+	if (props.href) obj.href = props.href
+	else if (props.to) obj.to = props.to
+	return obj
+})
+
+const is = $computed(() => {
+	if (props.href) return 'a'
+	if (props.to) return 'router-link'
+	return 'div'
+})
 </script>
 
 <template>
 	<component
-		:is="is"
-		v-ripple="!!to"
-		:to="to"
-		class="bgl_card"
-		:class="{
+		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
 			thin,
 			'border': outline,
 			'h-100': h100,
@@ -56,10 +64,11 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 	border-bottom: 1px solid var(--border-color);
 	margin-bottom: 1rem;
 }
+
 .border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background:var(--bgl-box-bg);
+	background: var(--bgl-box-bg);
 	padding: 0 0.75rem;
 	position: absolute;
 	top: -0.5rem;
@@ -89,11 +98,13 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 .bgl_card.thin {
 	padding: 1rem 1rem;
 }
+
 .bgl_card.BagelTable {
 	height: 100%;
 	overflow: auto;
 	padding-top: 0;
 }
+
 .bgl_card.thin .tabs {
 	margin-bottom: 1rem;
 }

package/src/components/Slider.vue

@@ -351,9 +351,17 @@ function buildSliderFrame(): void {
 
 		const originalCount = innerElements.value.length
 		const widthItem = selectorWidth.value / perPage.value
+
+		// Calculate how many times to repeat items to fill big screens
+		const minItemsNeeded = Math.max(perPage.value * 3, 20) // Ensure we have enough content for big screens
+		const repetitions = Math.max(1, Math.ceil(minItemsNeeded / originalCount))
+		const totalMainItems = originalCount * repetitions
+
+		// Ultra-aggressive buffer size for really big screens
+		const bufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
 		const itemsToBuild = config.value.loop
-			? originalCount + (2 * perPage.value)
-			: originalCount
+			? totalMainItems + (2 * bufferSize)
+			: totalMainItems
 
 		// Create a clean slate for the slider
 		carouselRef.value.innerHTML = ''
@@ -380,7 +388,7 @@ function buildSliderFrame(): void {
 
 		// Add clones before original items (for loop mode)
 		if (config.value.loop && innerElements.value.length > 0) {
-			for (let i = originalCount - perPage.value; i < originalCount; i++) {
+			for (let i = originalCount - bufferSize; i < originalCount; i++) {
 				if (i >= 0 && i < originalCount) {
 					const original = innerElements.value[i]
 					const clone = original.cloneNode(true) as Element
@@ -396,16 +404,24 @@ function buildSliderFrame(): void {
 			}
 		}
 
-		// Add main items (already clones of the slot content)
-		for (let i = 0; i < originalCount; i++) {
-			const element = innerElements.value[i]
-			const wrapped = buildSliderFrameItem(element.cloneNode(true) as Element)
-			docFragment.appendChild(wrapped)
+		// Add main items repeated multiple times to fill big screens
+		for (let rep = 0; rep < repetitions; rep++) {
+			for (let i = 0; i < originalCount; i++) {
+				const element = innerElements.value[i]
+				const clone = element.cloneNode(true) as Element
+
+				if (clone instanceof HTMLElement) {
+					clone.setAttribute('data-repetition', rep.toString())
+				}
+
+				const wrapped = buildSliderFrameItem(clone)
+				docFragment.appendChild(wrapped)
+			}
 		}
 
 		// Add clones after original items (for loop mode)
 		if (config.value.loop && innerElements.value.length > 0) {
-			for (let i = 0; i < perPage.value; i++) {
+			for (let i = 0; i < bufferSize; i++) {
 				if (i >= 0 && i < originalCount) {
 					const original = innerElements.value[i]
 					const clone = original.cloneNode(true) as Element
@@ -505,9 +521,17 @@ function buildSliderFrameItem(elm: Element): HTMLElement {
 	elementContainer.style.float = config.value.rtl ? 'right' : 'left'
 	elementContainer.style.padding = config.value.slideGap ? `${config.value.slideGap / 2}rem` : '0'
 
+	// Calculate total items including repetitions for big screens
+	const originalCount = innerElements.value.length
+	const minItemsNeeded = Math.max(perPage.value * 3, 20)
+	const repetitions = Math.max(1, Math.ceil(minItemsNeeded / originalCount))
+	const totalMainItems = originalCount * repetitions
+
+	// Ultra-aggressive buffer size - must match buildSliderFrame buffer size
+	const itemBufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
 	const percentage = config.value.loop
-		? 100 / (innerElements.value.length + (2 * perPage.value))
-		: 100 / innerElements.value.length
+		? 100 / (totalMainItems + (2 * itemBufferSize))
+		: 100 / totalMainItems
 
 	elementContainer.style.width = `${percentage}%`
 	elementContainer.appendChild(elm)
@@ -519,8 +543,10 @@ function slideToCurrent(enableTransitionFlag?: boolean): void {
 		// Ensure component is still mounted
 		if (!isMounted.value || !innerElements.value.length || !sliderFrame.value) return
 
+		// Ultra-aggressive buffer size - must match buildSliderFrame buffer size
+		const slideBufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
 		const currentSlideValue = config.value.loop
-			? currentSlide.value + perPage.value
+			? currentSlide.value + slideBufferSize
 			: currentSlide.value
 
 		const offset = (config.value.rtl ? 1 : -1) * currentSlideValue * (selectorWidth.value / perPage.value)
@@ -834,7 +860,7 @@ function touchmoveHandler(e: TouchEvent): void {
 				: currentOffset - dragOffset
 
 			sliderFrame.value.style[transformProperty.value as any]
-        = `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
+				= `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
 		}
 	}
 }
@@ -972,7 +998,7 @@ function mousemoveHandler(e: MouseEvent): void {
 				: currentOffset - dragOffset
 
 			sliderFrame.value.style[transformProperty.value as any]
-        = `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
+				= `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
 		}
 	}
 }
@@ -1373,16 +1399,11 @@ defineExpose({
 		<div ref="carouselRef" class="carousel-container">
 			<!-- We'll populate this with cloned content programmatically -->
 		</div>
-
 		<!-- Dots navigation (Vue-managed) -->
 		<div v-if="props.dots && totalDots > 1" class="carousel-dots">
 			<button
-				v-for="i in totalDots"
-				:key="i"
-				type="button"
-				class="carousel-dot" :class="[{ active: (i - 1) === currentSlide }]"
-				:aria-label="`Go to slide ${i}`"
-				@click="goTo(i - 1)"
+				v-for="i in totalDots" :key="i" type="button" class="carousel-dot"
+				:class="[{ active: (i - 1) === currentSlide }]" :aria-label="`Go to slide ${i}`" @click="goTo(i - 1)"
 			/>
 		</div>
 	</div>
@@ -1390,35 +1411,35 @@ defineExpose({
 
 <style scoped>
 .carousel-wrapper {
-  position: relative;
-  width: 100%;
+	position: relative;
+	width: 100%;
 }
 
 .carousel-container {
-  margin: 0 auto;
-  overflow: hidden;
+	margin: 0 auto;
+	overflow: hidden;
 }
 
 .carousel-dots {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 16px;
+	display: flex;
+	justify-content: center;
+	gap: 8px;
+	margin-top: 16px;
 }
 
 .carousel-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50px;
-  background-color: var(--bgl-gray-light);
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: all 0.3s ease-in-out;
+	width: 12px;
+	height: 12px;
+	border-radius: 50px;
+	background-color: var(--bgl-gray-light);
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	transition: all 0.3s ease-in-out;
 }
 
 .carousel-dot.active {
-  background-color: var(--bgl-primary);
-  width: 26px;
+	background-color: var(--bgl-primary);
+	width: 26px;
 }
 </style>

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

@@ -62,9 +62,13 @@ function useFormatting() {
 		if (parts.length === 3) {
 			const [day, month, year] = parts.map(p => Number.parseInt(p, 10))
 			if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
-				const date = new Date(year, month - 1, day)
-				if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
-					return date
+				const parsedDate = new Date(year, month - 1, day)
+				if (
+					parsedDate.getFullYear() === year
+					&& parsedDate.getMonth() === month - 1
+					&& parsedDate.getDate() === day
+				) {
+					return parsedDate
 				}
 			}
 		}
@@ -72,14 +76,27 @@ function useFormatting() {
 		return null
 	}
 
+	const normalizeDate = (date: Date): string => {
+		if (props.enableTime) {
+			// Keep the time when time is enabled
+			return date.toISOString()
+		} else {
+			// Normalize to midnight to emit exact date without time for server compatibility
+			const normalizedDate = new Date(date)
+			normalizedDate.setHours(0, 0, 0, 0)
+			return normalizedDate.toISOString().split('T')[0]
+		}
+	}
+
 	return {
 		formatDisplayDate,
-		parseUserInput
+		parseUserInput,
+		normalizeDate
 	}
 }
 
 // Initialize formatting
-const { formatDisplayDate, parseUserInput } = useFormatting()
+const { formatDisplayDate, parseUserInput, normalizeDate } = useFormatting()
 
 // Input handling composable
 function useInputHandling() {
@@ -91,7 +108,7 @@ function useInputHandling() {
 
 		const date = parseUserInput(input.value)
 		if (date) {
-			selectedDate.value = date.toISOString()
+			selectedDate.value = normalizeDate(date)
 		}
 	}
 
@@ -112,7 +129,7 @@ function useInputHandling() {
 		} else if (event.key === 'Enter' && inputValue.value) {
 			const date = parseUserInput(inputValue.value)
 			if (date) {
-				selectedDate.value = date.toISOString()
+				selectedDate.value = normalizeDate(date)
 				isOpen.value = false
 			}
 		}
@@ -153,43 +170,23 @@ onMounted(() => {
 			{{ label }}
 			<span v-if="required" class="required">*</span>
 		</label>
-		<Dropdown
-			:shown="isOpen"
-			placement="bottom-start"
-			:autoHide="false"
-			:triggers="['click']"
-		>
+		<Dropdown :shown="isOpen" placement="bottom-start" :autoHide="false" :triggers="['click']">
 			<template #trigger>
 				<div ref="datePickerRef" class="date-picker-container" @mousedown.stop @click.stop>
 					<TextInput
-						:modelValue="formatDisplayDate(selectedDate)"
-						iconStart="calendar"
-						:min="formatDisplayDate(min)"
-						:max="formatDisplayDate(max)"
-						:required="required"
-						:disabled="!editMode"
-						class="date-input m-0"
-						:class="{
+						:modelValue="formatDisplayDate(selectedDate)" iconStart="calendar"
+						:min="formatDisplayDate(min)" :max="formatDisplayDate(max)" :required="required"
+						:disabled="!editMode" class="date-input m-0" :class="{
 							'txt-center': center,
-						}"
-						:readonly="false"
-						@input="handleInput"
-						@focus="handleFocus"
-						@click="handleClick"
-						@keydown="handleKeydown"
+						}" :readonly="false" @input="handleInput" @focus="handleFocus" @click="handleClick" @keydown="handleKeydown"
 					/>
 				</div>
 			</template>
 
 			<div ref="calendarRef" @click.stop>
 				<DatePicker
-					v-model="selectedDate"
-					:min="min"
-					:max="max"
-					:mode="mode"
-					:firstDayOfWeek="firstDayOfWeek"
-					:locale="locale"
-					:enableTime="enableTime"
+					v-model="selectedDate" :min="min" :max="max" :mode="mode" :firstDayOfWeek="firstDayOfWeek"
+					:locale="locale" :enableTime="enableTime"
 				/>
 			</div>
 		</Dropdown>