@bagelink/vue 1.4.171 → 1.4.174

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.171",
+  "version": "1.4.174",
   "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
 })