@bagelink/vue 1.4.169 → 1.4.174

package/package.json

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

package/src/components/Dropdown.vue

@@ -109,35 +109,60 @@ function hide() {
 	ddownRef?.hide()
 }
 
-const { isMobile } = useDevice()
+const { isMobile, innerWidth } = useDevice()
 
 const shouldDisablePositioning = $computed(() => {
 	return disablePlacement && isMobile
 })
 
+// Convert hover triggers to click on small screens (tablets and mobile)
+const isSmallScreen = $computed(() => innerWidth.value < 910)
+
+const computedTriggers = $computed((): TriggerEvent[] => {
+	if (isSmallScreen && triggers.includes('hover')) {
+		// Replace hover with click on small screens
+		return triggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
+	}
+	return triggers
+})
+
 // Intelligent trigger configuration
 const computedShowTriggers = $computed((): TriggerEvent[] => {
-	if (showTriggers !== undefined) return showTriggers
-	return triggers
+	if (showTriggers !== undefined) {
+		// 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
+	}
+	return computedTriggers
 })
 
 const computedHideTriggers = $computed((): TriggerEvent[] => {
-	if (hideTriggers !== undefined) return hideTriggers
+	if (hideTriggers !== undefined) {
+		// 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
+	}
 	// For click-only dropdowns, only hide on click
-	if (triggers.length === 1 && triggers[0] === 'click') {
+	if (computedTriggers.length === 1 && computedTriggers[0] === 'click') {
 		return ['click'] as TriggerEvent[]
 	}
 	// For hover dropdowns, add click to hide triggers for better UX
+	// But on small screens, hover becomes click, so we handle it differently
 	if (triggers.includes('hover')) {
-		return [...triggers, 'click'] as TriggerEvent[]
+		return [...computedTriggers, 'click'] as TriggerEvent[]
 	}
-	return triggers
+	return computedTriggers
 })
 
 const computedPopperTriggers = $computed((): TriggerEvent[] => {
 	if (popperTriggers.length > 0) return popperTriggers
 	// For hover dropdowns, enable hover on popper to keep it open
-	if (triggers.includes('hover')) {
+	// But on small screens, don't add hover triggers since we convert to click
+	if (triggers.includes('hover') && !isSmallScreen) {
 		return ['hover'] as TriggerEvent[]
 	}
 	return []
@@ -147,7 +172,8 @@ const computedPopperTriggers = $computed((): TriggerEvent[] => {
 const computedPopperShowTriggers = $computed((): TriggerEvent[] | undefined => {
 	const hasExplicitShowTriggers = Array.isArray(popperShowTriggers) && popperShowTriggers.length > 0
 	if (hasExplicitShowTriggers) return popperShowTriggers
-	if (triggers.includes('hover')) return ['hover'] as TriggerEvent[]
+	// Only add hover for popper on large screens
+	if (triggers.includes('hover') && !isSmallScreen) return ['hover'] as TriggerEvent[]
 	return undefined
 })
 
@@ -155,7 +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
-	if (triggers.includes('hover')) {
+	// But only on large screens where hover is meaningful
+	if (triggers.includes('hover') && !isSmallScreen) {
 		return ['hover'] as TriggerEvent[]
 	}
 	return []
@@ -165,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
-	if (triggers.includes('hover')) {
-		return { show: 0, hide: 10 } // 50ms delay before hiding
+	// 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, no delay
+	// For click dropdowns (including small screens), no delay
 	return 0
 })
 
@@ -179,7 +206,7 @@ defineExpose({ show, hide, shown })
 <template>
 	<DDown
 		ref="ddownRef" v-model:shown="shown" :disabled :noAutoFocus :positioning-disabled="shouldDisablePositioning"
-		:placement :autoHide="computedAutoHide" :delay="computedDelay" :triggers :showTriggers="computedShowTriggers"
+		:placement :autoHide="computedAutoHide" :delay="computedDelay" :triggers="computedTriggers" :showTriggers="computedShowTriggers"
 		:hideTriggers="computedHideTriggers" :popperTriggers="computedPopperTriggers"
 		:popperShowTriggers="computedPopperShowTriggers" :popperHideTriggers="computedPopperHideTriggers"
 		:showGroup="showGroup" @hide="emit('hide')" @show="emit('show')"