@bagelink/vue 1.6.7 → 1.6.17

package/dist/utils/index.d.ts

@@ -29,5 +29,6 @@ export { formatString } from './strings';
 export { useDebounceFn } from '@vueuse/core';
 export declare function pathKeyToURL(pathKey?: string): string | undefined;
 export declare function getNestedValue(obj: any, path?: string, defaultValue?: any): any;
+export declare function tryRun<T>(func: () => T, callback?: (error: Error) => void): T | undefined;
 export declare function downloadFile(source: string | Blob, fileName?: string): void;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAI1E,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC;;EAwBP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAKD,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA2CxF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAM5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAkB5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F;AAID,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,QAkBpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Carousel.vue

@@ -69,51 +69,51 @@ let velocityTracker = $ref<VelocitySample[]>([])
 const VELOCITY_SAMPLE_DURATION = 100 // ms to track velocity
 
 function getAverageVelocity(): number {
-	if (2 > velocityTracker.length) {return 0}
+	if (velocityTracker.length < 2) { return 0 }
 
 	const now = Date.now()
 	// Only consider samples within our sample duration
 	const recentSamples = velocityTracker.filter((sample: VelocitySample) => now - sample.time < VELOCITY_SAMPLE_DURATION)
 
-	if (2 > recentSamples.length) {return 0}
+	if (recentSamples.length < 2) { return 0 }
 
 	const first = recentSamples[0]
 	const last = recentSamples[recentSamples.length - 1]
 	const timeDelta = last.time - first.time
 
-	if (0 === timeDelta) {return 0}
+	if (timeDelta === 0) { return 0 }
 
 	return (last.position - first.position) / timeDelta
 }
 
 // Transform helpers
 function getCurrentTransform(): number {
-	if (!bglSlider) {return 0}
+	if (!bglSlider) { return 0 }
 	const { transform } = bglSlider.style
 	const value = transform ? Number.parseInt(transform.replace(/[^-\d.]/g, '')) : 0
 	return props.rtl ? -value : value
 }
 
 function setTransform(value: number) {
-	if (!bglSlider) {return}
+	if (!bglSlider) { return }
 	const rtlValue = props.rtl ? -value : value
 	bglSlider.style.transform = `translateX(${rtlValue}px)`
 }
 
 function easeInOutQuad(t: number) {
-	return 0.5 > t ? 2 * t * t : -1 + (4 - 2 * t) * t
+	return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
 }
 
 function animateTransform(start: number, end: number, duration: number) {
 	const startTime = performance.now()
 
 	function animate(currentTime: number) {
-		if (!isSliderAvailable) {return}
+		if (!isSliderAvailable) { return }
 		const timeElapsed = currentTime - startTime
 		const progress = Math.min(timeElapsed / duration, 1)
 		const currentTransform = start + (end - start) * easeInOutQuad(progress)
 		setTransform(currentTransform)
-		if (1 > progress) {requestAnimationFrame(animate)}
+		if (progress < 1) { requestAnimationFrame(animate) }
 	}
 
 	requestAnimationFrame(animate)
@@ -122,7 +122,7 @@ function animateTransform(start: number, end: number, duration: number) {
 // Navigation
 function goToSlide(index: number, isTouchNav = false) {
 	countSlides()
-	if (!isSliderAvailable || !bglSlider || 0 > index || index >= slideCount) {return}
+	if (!isSliderAvailable || !bglSlider || index < 0 || index >= slideCount) { return }
 
 	const containerWidth = bglSlider.offsetWidth
 	const gapWidth = (containerWidth * GAP_PERCENT) / 100
@@ -136,7 +136,7 @@ function goToSlide(index: number, isTouchNav = false) {
 	const currentTransform = getCurrentTransform()
 	const duration = isTouchNav
 		? ANIMATION_TIMINGS.TOUCH
-		: 600 > window.innerWidth
+		: window.innerWidth < 600
 			? ANIMATION_TIMINGS.MOBILE
 			: ANIMATION_TIMINGS.DESKTOP
 
@@ -146,7 +146,7 @@ function goToSlide(index: number, isTouchNav = false) {
 }
 
 function next() {
-	if (!isSliderAvailable) {return}
+	if (!isSliderAvailable) { return }
 	countSlides()
 	// In RTL, next and prev are reversed
 	const nextIndex = props.rtl
@@ -156,7 +156,7 @@ function next() {
 }
 
 function prev() {
-	if (!isSliderAvailable) {return}
+	if (!isSliderAvailable) { return }
 	countSlides()
 	// In RTL, next and prev are reversed
 	const prevIndex = props.rtl
@@ -167,10 +167,10 @@ function prev() {
 
 // Height management
 function calcHeight() {
-	if (!isSliderAvailable || !bglSlider) {return}
+	if (!isSliderAvailable || !bglSlider) { return }
 	try {
 		const activeSlide = bglSlider.children[activeSlideIndex]
-		if (!activeSlide) {return}
+		if (!activeSlide) { return }
 		const children = Array.from(activeSlide.children) as HTMLElement[]
 		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
 		yHeight = `${totalHeight}px`
@@ -180,13 +180,13 @@ function calcHeight() {
 }
 
 function updateHeight() {
-	if (!props.autoHeight) {return}
+	if (!props.autoHeight) { return }
 	setTimeout(calcHeight, 200)
 }
 
 // Slide management
 function countSlides() {
-	if (!isSliderAvailable || !bglSlider) {return}
+	if (!isSliderAvailable || !bglSlider) { return }
 	slideCount = bglSlider.children.length
 }
 
@@ -198,10 +198,10 @@ function handleSlideChange() {
 }
 
 function handleResize() {
-	if (!isSliderAvailable || !bglSlider) {return}
-	itemCount = 600 > window.innerWidth
+	if (!isSliderAvailable || !bglSlider) { return }
+	itemCount = window.innerWidth < 600
 		? 1
-		: 991 > window.innerWidth
+		: window.innerWidth < 991
 			? Math.min(props.items, 2)
 			: props.items
 
@@ -217,7 +217,7 @@ function handleResize() {
 }
 
 function clearAutoplay() {
-	if (autoPlayInterval) {clearInterval(autoPlayInterval)}
+	if (autoPlayInterval) { clearInterval(autoPlayInterval) }
 }
 
 // Mouse events
@@ -230,7 +230,7 @@ function preventDefaultClick(e: MouseEvent) {
 
 async function disableDrag() {
 	await nextTick()
-	if (!isSliderAvailable || !bglSlider) {return}
+	if (!isSliderAvailable || !bglSlider) { return }
 
 	const elements = Array.from(bglSlider.querySelectorAll('img, a')) as HTMLElement[]
 	elements.forEach((el) => {
@@ -252,7 +252,7 @@ async function disableDrag() {
 
 function startDrag(e: MouseEvent) {
 	e.stopPropagation()
-	if (0 !== e.button || !props.freeDrag || !isSliderAvailable) {return}
+	if (e.button !== 0 || !props.freeDrag || !isSliderAvailable) { return }
 
 	clearAutoplay()
 	startX = e.pageX
@@ -265,12 +265,12 @@ function startDrag(e: MouseEvent) {
 }
 
 function onDrag(e: MouseEvent) {
-	if (!isSliderAvailable || !bglSlider || !isPressed) {return}
+	if (!isSliderAvailable || !bglSlider || !isPressed) { return }
 
 	const x = e.pageX
 	const distance = x - startX
 
-	if (Math.abs(distance) > THRESHOLDS.DRAG) {isDragging = true}
+	if (Math.abs(distance) > THRESHOLDS.DRAG) { isDragging = true }
 	if (isDragging) {
 		const newTranslate = translateX + (props.rtl ? -distance : distance)
 		const maxTranslate = 0
@@ -291,7 +291,7 @@ function endDrag() {
 	document.removeEventListener('mousemove', onDrag)
 	document.removeEventListener('mouseup', endDrag)
 
-	if (!isSliderAvailable || !bglSlider) {return}
+	if (!isSliderAvailable || !bglSlider) { return }
 
 	const currentTransform = getCurrentTransform()
 	const singleItemWidth = bglSlider.offsetWidth / itemCount
@@ -302,8 +302,8 @@ function endDrag() {
 
 	let targetPanel = currentPanel
 	if (dragPercentage > THRESHOLDS.SWIPE_PERCENT) {
-		const distnace = 0 < totalDragDistance ? -1 : 1
-		targetPanel = Math.floor(currentPanel) + (0 > distnace ? 0 : 1)
+		const distnace = totalDragDistance > 0 ? -1 : 1
+		targetPanel = Math.floor(currentPanel) + (distnace < 0 ? 0 : 1)
 	} else {
 		targetPanel = Math.round(currentPanel)
 	}
@@ -324,7 +324,7 @@ let hasScrollDirectionLock = $ref(false)
 let isHorizontalScroll = $ref(false)
 
 function onTouchStart(e: TouchEvent) {
-	if (!props.freeDrag || !isSliderAvailable) {return}
+	if (!props.freeDrag || !isSliderAvailable) { return }
 
 	const target = e.target as HTMLElement
 	const isInteractive = target.matches('button, a, input, select, textarea, [role="button"]')
@@ -351,7 +351,7 @@ function onTouchStart(e: TouchEvent) {
 }
 
 function onTouchMove(e: TouchEvent) {
-	if (!isSliderAvailable || !bglSlider || !isPressed) {return}
+	if (!isSliderAvailable || !bglSlider || !isPressed) { return }
 
 	const touch = e.touches[0]
 	const x = touch.pageX
@@ -362,7 +362,7 @@ function onTouchMove(e: TouchEvent) {
 	// Determine scroll direction if we haven't already
 	if (!hasScrollDirectionLock) {
 		// Only lock in a direction if there's significant movement
-		if (5 < Math.abs(deltaX) || 5 < Math.abs(deltaY)) {
+		if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
 			isHorizontalScroll = Math.abs(deltaX) > Math.abs(deltaY)
 			hasScrollDirectionLock = true
 
@@ -377,7 +377,7 @@ function onTouchMove(e: TouchEvent) {
 	}
 
 	// If we've determined this is a vertical scroll, don't handle the touch
-	if (!isHorizontalScroll) {return}
+	if (!isHorizontalScroll) { return }
 
 	// Update velocity tracking
 	const now = Date.now()
@@ -404,7 +404,7 @@ function onTouchMove(e: TouchEvent) {
 		let newTranslate = translateX + (props.rtl ? -deltaX : deltaX)
 
 		// Add smooth resistance when pulling beyond bounds
-		if (0 < newTranslate) {
+		if (newTranslate > 0) {
 			newTranslate *= 0.5 // Softer resistance at start
 		} else if (newTranslate < -totalWidth + containerWidth) {
 			const overDrag = -totalWidth + containerWidth - newTranslate
@@ -433,7 +433,7 @@ function onTouchEnd() {
 
 	// Normalize the transform value to handle overscroll
 	let normalizedTransform = currentTransform
-	if (0 < currentTransform) {
+	if (currentTransform > 0) {
 		normalizedTransform = 0
 	} else {
 		const minTransform = -(singleItemWidth * (slideCount - 1) + gapWidth * (slideCount - 1))
@@ -455,14 +455,14 @@ function onTouchEnd() {
 
 	// Determine direction based on velocity and distance
 	if (Math.abs(finalVelocity) > THRESHOLDS.VELOCITY) {
-		velocityDirection = 0 > finalVelocity ? 1 : -1
+		velocityDirection = finalVelocity < 0 ? 1 : -1
 	}
 
-	const isMobile = 600 > window.innerWidth
+	const isMobile = window.innerWidth < 600
 
 	if (swipePercentage > THRESHOLDS.SWIPE_PERCENT || Math.abs(finalVelocity) > THRESHOLDS.VELOCITY) {
 		const direction = swipePercentage > THRESHOLDS.SWIPE_PERCENT
-			? (0 < totalSwipeDistance ? -1 : 1)
+			? (totalSwipeDistance > 0 ? -1 : 1)
 			: velocityDirection
 
 		// Apply RTL correction to direction
@@ -500,7 +500,7 @@ function onTouchEnd() {
 
 	// Clear transition after animation
 	setTimeout(() => {
-		if (bglSlider) {bglSlider.style.transition = 'none'}
+		if (bglSlider) { bglSlider.style.transition = 'none' }
 	}, duration)
 
 	velocityTracker = []
@@ -510,13 +510,13 @@ function onTouchEnd() {
 
 // Wheel events
 function onWheel(e: WheelEvent) {
-	if (!props.allowScroll || !isSliderAvailable || !bglSlider || isPressed || isDragging) {return}
+	if (!props.allowScroll || !isSliderAvailable || !bglSlider || isPressed || isDragging) { return }
 
 	const isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY)
-	if (!isHorizontal) {return}
+	if (!isHorizontal) { return }
 
 	clearAutoplay()
-	if (wheelTimeout) {clearTimeout(wheelTimeout)}
+	if (wheelTimeout) { clearTimeout(wheelTimeout) }
 
 	// Reverse the delta direction for RTL mode
 	accumulatedDeltaX += props.rtl ? -e.deltaX : e.deltaX
@@ -529,7 +529,7 @@ function onWheel(e: WheelEvent) {
 	const moveThreshold = singleItemWidth * THRESHOLDS.WHEEL_PERCENT
 
 	if (Math.abs(accumulatedDeltaX) > moveThreshold) {
-		const direction = 0 < accumulatedDeltaX ? 1 : -1
+		const direction = accumulatedDeltaX > 0 ? 1 : -1
 		const nextPanel = Math.max(0, Math.min(activeSlideIndex + direction, slideCount - 1))
 
 		if (nextPanel !== activeSlideIndex) {
@@ -567,8 +567,8 @@ onUnmounted(() => {
 	document.removeEventListener('mousemove', onDrag)
 	document.removeEventListener('mouseup', endDrag)
 	clearAutoplay()
-	if (timeout) {clearTimeout(timeout)}
-	if (wheelTimeout) {clearTimeout(wheelTimeout)}
+	if (timeout) { clearTimeout(timeout) }
+	if (wheelTimeout) { clearTimeout(wheelTimeout) }
 })
 
 // Watchers

package/src/components/ListItem.vue

@@ -80,7 +80,7 @@ const bind = $computed(() => {
 					{{ title }}
 					<slot />
 				</p>
-				<p v-if="subtitle" class="txt12 m-0 p-0 opacity-7" :class="{ 'ellipsis-1': ellipsis }">
+				<p v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2" :class="{ 'ellipsis-1': ellipsis }">
 					{{ subtitle }}
 					<slot name="subtitle" />
 				</p>
@@ -89,7 +89,7 @@ const bind = $computed(() => {
 		</component>
 		<slot name="end">
 			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
-			<p v-if="end" class="txt12 m-0 p-0 opacity-7" :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
+			<p v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
 		</slot>
 	</div>
 </template>