@bagelink/vue 1.4.171 → 1.4.176

package/package.json

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

package/src/components/Dropdown.vue

@@ -109,16 +109,18 @@ function hide() {
 	ddownRef?.hide()
 }
 
-const { isMobile } = useDevice()
+const { isMobile, innerWidth } = useDevice()
 
 const shouldDisablePositioning = $computed(() => {
 	return disablePlacement && isMobile
 })
 
-// Convert hover triggers to click on mobile devices
+// Convert hover triggers to click on small screens (tablets and mobile)
+const isSmallScreen = $computed(() => innerWidth.value < 910)
+
 const computedTriggers = $computed((): TriggerEvent[] => {
-	if (isMobile && triggers.includes('hover')) {
-		// Replace hover with click on mobile
+	if (isSmallScreen && triggers.includes('hover')) {
+		// Replace hover with click on small screens
 		return triggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
 	}
 	return triggers
@@ -127,8 +129,8 @@ const computedTriggers = $computed((): TriggerEvent[] => {
 // Intelligent trigger configuration
 const computedShowTriggers = $computed((): TriggerEvent[] => {
 	if (showTriggers !== undefined) {
-		// Also convert hover to click in showTriggers on mobile
-		if (isMobile && showTriggers.includes('hover')) {
+		// Also convert hover to click in showTriggers on small screens
+		if (isSmallScreen && showTriggers.includes('hover')) {
 			return showTriggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
 		}
 		return showTriggers
@@ -138,8 +140,8 @@ const computedShowTriggers = $computed((): TriggerEvent[] => {
 
 const computedHideTriggers = $computed((): TriggerEvent[] => {
 	if (hideTriggers !== undefined) {
-		// Also convert hover to click in hideTriggers on mobile
-		if (isMobile && hideTriggers.includes('hover')) {
+		// Also convert hover to click in hideTriggers on small screens
+		if (isSmallScreen && hideTriggers.includes('hover')) {
 			return hideTriggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
 		}
 		return hideTriggers
@@ -149,8 +151,8 @@ const computedHideTriggers = $computed((): TriggerEvent[] => {
 		return ['click'] as TriggerEvent[]
 	}
 	// For hover dropdowns, add click to hide triggers for better UX
-	// But on mobile, hover becomes click, so we handle it differently
-	if (computedTriggers.includes('hover')) {
+	// But on small screens, hover becomes click, so we handle it differently
+	if (triggers.includes('hover')) {
 		return [...computedTriggers, 'click'] as TriggerEvent[]
 	}
 	return computedTriggers
@@ -159,8 +161,8 @@ const computedHideTriggers = $computed((): TriggerEvent[] => {
 const computedPopperTriggers = $computed((): TriggerEvent[] => {
 	if (popperTriggers.length > 0) return popperTriggers
 	// For hover dropdowns, enable hover on popper to keep it open
-	// But on mobile, don't add hover triggers since we convert to click
-	if (computedTriggers.includes('hover') && !isMobile) {
+	// But on small screens, don't add hover triggers since we convert to click
+	if (triggers.includes('hover') && !isSmallScreen) {
 		return ['hover'] as TriggerEvent[]
 	}
 	return []
@@ -170,8 +172,8 @@ const computedPopperTriggers = $computed((): TriggerEvent[] => {
 const computedPopperShowTriggers = $computed((): TriggerEvent[] | undefined => {
 	const hasExplicitShowTriggers = Array.isArray(popperShowTriggers) && popperShowTriggers.length > 0
 	if (hasExplicitShowTriggers) return popperShowTriggers
-	// Only add hover for popper on desktop
-	if (computedTriggers.includes('hover') && !isMobile) return ['hover'] as TriggerEvent[]
+	// Only add hover for popper on large screens
+	if (triggers.includes('hover') && !isSmallScreen) return ['hover'] as TriggerEvent[]
 	return undefined
 })
 
@@ -179,8 +181,8 @@ const computedPopperHideTriggers = $computed((): TriggerEvent[] => {
 	const hasExplicitHideTriggers = Array.isArray(popperHideTriggers) && popperHideTriggers.length > 0
 	if (hasExplicitHideTriggers) return popperHideTriggers
 	// For hover dropdowns, make sure popper hides on mouseout
-	// But only on desktop where hover is meaningful
-	if (computedTriggers.includes('hover') && !isMobile) {
+	// But only on large screens where hover is meaningful
+	if (triggers.includes('hover') && !isSmallScreen) {
 		return ['hover'] as TriggerEvent[]
 	}
 	return []
@@ -190,11 +192,11 @@ const computedAutoHide = $computed(() => autoHide)
 
 const computedDelay = $computed((): number | { show: number, hide: number } | undefined => {
 	if (delay !== undefined) return delay
-	// For hover dropdowns, add a hide delay (but only on desktop)
-	if (computedTriggers.includes('hover') && !isMobile) {
+	// For hover dropdowns, add a hide delay (but only on large screens)
+	if (triggers.includes('hover') && !isSmallScreen) {
 		return { show: 0, hide: 10 } // 10ms delay before hiding
 	}
-	// For click dropdowns (including mobile), no delay
+	// For click dropdowns (including small screens), no delay
 	return 0
 })
 

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

@@ -2,7 +2,7 @@
 import type { SetupContext, ComponentPublicInstance } from 'vue'
 import type { CalendarEvent, WeekStart } from '../CalendarTypes'
 import { formatDate } from '@bagelink/vue'
-import { ref, computed, onMounted, onUnmounted, useSlots } from 'vue'
+import { ref, computed, onMounted, onUnmounted, useSlots, nextTick } from 'vue'
 
 interface WeekViewEvent extends CalendarEvent {
 	top: number
@@ -61,6 +61,7 @@ const timeSlotsContainer = ref<HTMLElement>()
 const calendarGrid = ref<HTMLElement>()
 const dayColumns = ref<HTMLElement[]>([])
 const dayColumnsContainer = ref<HTMLElement>()
+const scrollableContainer = ref<HTMLElement>()
 
 // Calculate week days based on start date and week start preference
 const weekDays = computed(() => {
@@ -401,10 +402,19 @@ function setDayColumnRef(el: Element | ComponentPublicInstance | null | undefine
 	}
 }
 
+function scrollToTime(time: number) {
+	if (scrollableContainer.value) {
+		scrollableContainer.value.scrollTop = time * slotHeight
+	}
+}
+
 // Lifecycle hooks
 onMounted(() => {
 	updateCurrentTimeIndicator()
 	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
+
+	// Scroll to 6:00 AM on mount
+	nextTick(() => { scrollToTime(6) })
 })
 
 onUnmounted(() => {
@@ -433,7 +443,7 @@ onUnmounted(() => {
 				</span>
 			</div>
 		</div>
-		<div class="overflow h-100p pe-05">
+		<div ref="scrollableContainer" class="overflow h-100p pe-05">
 			<div ref="dayColumnsContainer" class="weekGrid border-end relative">
 				<div ref="timeSlotsContainer">
 					<div
@@ -576,6 +586,7 @@ onUnmounted(() => {
 	flex-direction: column;
 	justify-content: center; */
 }
+
 @media (max-width: 910px) {
 	.weekGrid {
 		display: grid;