@bagelink/vue 1.6.7 → 1.6.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "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/Swiper.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts" generic="T = any">
-import type { SwiperContainer } from 'swiper/element/bundle'
+import type { Swiper as SwiperType } from 'swiper'
 import type { AutoplayOptions, CoverflowEffectOptions, PaginationOptions, SwiperOptions } from 'swiper/types'
 import { Icon } from '@bagelink/vue'
-import { register } from 'swiper/element/bundle'
-import { computed, onMounted, ref, watch } from 'vue'
+import { Autoplay, EffectCoverflow, EffectCube, EffectFade, EffectFlip, Navigation, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { computed, ref, watch } from 'vue'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -178,15 +179,13 @@ const variantPresets: Record<SwiperVariant, VariantConfig> = {
 	},
 }
 
-register()
-
-const swiperEl = $ref<SwiperContainer | null>(null)
+const swiperEl = ref<SwiperType | null>(null)
 const isFirstSlide = ref(true)
 const isLastSlide = ref(false)
 const currentIndex = ref(props.index ?? props.initialSlide ?? 0)
 let isUpdatingFromExternal = false // Guard to prevent update loops
 
-const slideStyles = $computed(() => {
+const slideStyles = computed(() => {
 	const styles: Record<string, string> = {}
 
 	if (props.slideWidth !== undefined) {
@@ -197,18 +196,18 @@ const slideStyles = $computed(() => {
 })
 
 // Apply variant preset configuration
-const variantConfig = $computed(() => variantPresets[props.variant])
+const variantConfig = computed(() => variantPresets[props.variant])
 
 // Smart default: if slideWidth is set and slidesPerView wasn't set,
 // automatically use 'auto' to let slides determine their own width
-const effectiveSlidesPerView = $computed(() => {
+const effectiveSlidesPerView = computed(() => {
 	// Priority: explicit prop > variant config > smart default
 	if (props.slidesPerView !== undefined) {
 		return props.slidesPerView
 	}
 
-	if (variantConfig.slidesPerView !== undefined) {
-		return variantConfig.slidesPerView
+	if (variantConfig.value.slidesPerView !== undefined) {
+		return variantConfig.value.slidesPerView
 	}
 
 	// Smart default: if slideWidth is provided, use 'auto'
@@ -228,46 +227,41 @@ const swiperParams = computed((): SwiperOptions => {
 		defaultValue: any
 	) => {
 		if (propValue !== undefined) return propValue
-		if (variantConfig[variantKey] !== undefined) return variantConfig[variantKey]
+		if (variantConfig.value[variantKey] !== undefined) return variantConfig.value[variantKey]
 		return defaultValue
 	}
 
 	const params: SwiperOptions = {
+		modules: [Navigation, Pagination, Autoplay, EffectFade, EffectCoverflow, EffectCube, EffectFlip],
 		effect: getValue(props.effect, 'effect', 'slide'),
 		direction: props.direction ?? 'horizontal',
 		speed: getValue(props.speed, 'speed', 300),
 		loop: getValue(props.loop, 'loop', false),
 		initialSlide: props.index ?? props.initialSlide,
-		slidesPerView: effectiveSlidesPerView,
+		slidesPerView: effectiveSlidesPerView.value,
 		spaceBetween: getValue(props.spaceBetween, 'spaceBetween', 0),
 		centeredSlides: getValue(props.centeredSlides, 'centeredSlides', false),
 		grabCursor: props.grabCursor,
-		keyboard: props.keyboard ? { enabled: true } : false,
-		mousewheel: props.mousewheel ? { enabled: true } : false,
+		keyboard: props.keyboard,
+		mousewheel: props.mousewheel,
 		autoHeight: props.autoHeight,
 	}
 
 	// Navigation (priority: prop > variant > default)
 	const navigationEnabled = getValue(props.navigation, 'navigation', false)
-	if (navigationEnabled) {
-		params.navigation = true
-	}
+	params.navigation = !!navigationEnabled
 
 	// Pagination (priority: prop > variant > default)
 	const paginationConfig = getValue(props.pagination, 'pagination', false)
-	if (paginationConfig) {
-		params.pagination = typeof paginationConfig === 'boolean'
-			? { clickable: true }
-			: paginationConfig
-	}
+	params.pagination = paginationConfig
+		? (typeof paginationConfig === 'boolean' ? { clickable: true } : paginationConfig)
+		: false
 
 	// Autoplay (priority: prop > variant > default)
 	const autoplayConfig = getValue(props.autoplay, 'autoplay', false)
-	if (autoplayConfig) {
-		params.autoplay = typeof autoplayConfig === 'boolean'
-			? { delay: 3000 }
-			: autoplayConfig
-	}
+	params.autoplay = autoplayConfig
+		? (typeof autoplayConfig === 'boolean' ? { delay: 3000 } : autoplayConfig)
+		: false
 
 	// Effect-specific options (merge variant and explicit)
 	const effectType = params.effect || 'slide'
@@ -281,7 +275,7 @@ const swiperParams = computed((): SwiperOptions => {
 		}
 		params.coverflowEffect = {
 			...baseCoverflowEffect,
-			...variantConfig.coverflowEffect,
+			...variantConfig.value.coverflowEffect,
 			...props.coverflowEffect,
 		}
 	}
@@ -300,16 +294,38 @@ const swiperParams = computed((): SwiperOptions => {
 	return params
 })
 
-const swiperInstance = $computed(() => swiperEl?.swiper)
+// Format params for Swiper Vue component with proper types
+const swiperVueProps = computed(() => ({
+	modules: swiperParams.value.modules,
+	effect: swiperParams.value.effect as 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip',
+	direction: swiperParams.value.direction,
+	speed: swiperParams.value.speed,
+	loop: swiperParams.value.loop,
+	initialSlide: swiperParams.value.initialSlide,
+	slidesPerView: swiperParams.value.slidesPerView,
+	spaceBetween: swiperParams.value.spaceBetween as number,
+	centeredSlides: swiperParams.value.centeredSlides,
+	grabCursor: swiperParams.value.grabCursor,
+	keyboard: swiperParams.value.keyboard as boolean | undefined,
+	mousewheel: swiperParams.value.mousewheel as boolean | undefined,
+	autoHeight: swiperParams.value.autoHeight,
+	navigation: swiperParams.value.navigation as boolean | undefined,
+	pagination: swiperParams.value.pagination,
+	autoplay: swiperParams.value.autoplay,
+	coverflowEffect: swiperParams.value.coverflowEffect,
+	breakpoints: swiperParams.value.breakpoints,
+}))
+
+const swiperInstance = computed(() => swiperEl.value)
 
 function updateNavigationState() {
-	if (swiperEl?.swiper && !isUpdatingFromExternal) {
-		isFirstSlide.value = swiperEl.swiper.isBeginning
-		isLastSlide.value = swiperEl.swiper.isEnd
+	if (swiperEl.value && !isUpdatingFromExternal) {
+		isFirstSlide.value = swiperEl.value.isBeginning
+		isLastSlide.value = swiperEl.value.isEnd
 
 		// Emit index update for v-model support
 		// Use activeIndex for non-loop mode, realIndex for loop mode
-		const newIndex = props.loop ? swiperEl.swiper.realIndex : swiperEl.swiper.activeIndex
+		const newIndex = props.loop ? swiperEl.value.realIndex : swiperEl.value.activeIndex
 		currentIndex.value = newIndex
 
 		// Emit to keep external state in sync
@@ -318,46 +334,32 @@ function updateNavigationState() {
 }
 
 function slideTo(index: number) {
-	if (!swiperEl?.swiper) return
-	swiperEl.swiper.slideTo(index)
+	if (!swiperEl.value) return
+	swiperEl.value.slideTo(index)
 }
 
 function handleSlideNav(dir: 'prev' | 'next') {
-	if (!swiperEl?.swiper) return
+	if (!swiperEl.value) return
 
 	if (dir === 'next') {
-		swiperEl.swiper.slideNext()
+		swiperEl.value.slideNext()
 	} else {
-		swiperEl.swiper.slidePrev()
+		swiperEl.value.slidePrev()
 	}
 }
 
-onMounted(() => {
-	if (!swiperEl) return
-
-	// Add events to track slide changes for reactive state
-	const params = {
-		...swiperParams.value,
-		on: {
-			...swiperParams.value.on,
-			init: updateNavigationState,
-			slideChange: updateNavigationState,
-			slideChangeTransitionEnd: updateNavigationState,
-			reachBeginning: updateNavigationState,
-			reachEnd: updateNavigationState,
-			fromEdge: updateNavigationState,
-		},
-	}
-
-	Object.assign(swiperEl, params)
-	swiperEl.initialize()
-})
+function onSwiper(swiper: SwiperType) {
+	swiperEl.value = swiper
+	updateNavigationState()
+}
 
 watch(
 	() => props.initialSlide,
 	(index) => {
-		if (index !== undefined && swiperEl?.swiper) {
-			setTimeout(() => swiperEl.swiper.slideTo(index), 1)
+		if (index !== undefined && swiperEl.value) {
+			setTimeout(() => {
+				if (swiperEl.value) swiperEl.value.slideTo(index)
+			}, 1)
 		}
 	},
 	{ immediate: true },
@@ -370,11 +372,11 @@ watch(
 		if (newIndex !== undefined) {
 			currentIndex.value = newIndex
 
-			if (swiperEl?.swiper) {
-				const activeIndex = props.loop ? swiperEl.swiper.realIndex : swiperEl.swiper.activeIndex
+			if (swiperEl.value) {
+				const activeIndex = props.loop ? swiperEl.value.realIndex : swiperEl.value.activeIndex
 				if (newIndex !== activeIndex) {
 					isUpdatingFromExternal = true
-					swiperEl.swiper.slideTo(newIndex)
+					swiperEl.value.slideTo(newIndex)
 					// Reset guard after a short delay to allow transition
 					setTimeout(() => {
 						isUpdatingFromExternal = false
@@ -389,9 +391,9 @@ watch(
 watch(
 	swiperParams,
 	(newParams) => {
-		if (swiperEl?.swiper) {
-			Object.assign(swiperEl.swiper.params, newParams)
-			swiperEl.swiper.update()
+		if (swiperEl.value) {
+			Object.assign(swiperEl.value.params, newParams)
+			swiperEl.value.update()
 		}
 	},
 	{ deep: true },
@@ -402,7 +404,7 @@ defineExpose({
 	slideNext: () => { handleSlideNav('next') },
 	slidePrev: () => { handleSlideNav('prev') },
 	slideTo,
-	update: () => swiperEl?.swiper?.update(),
+	update: () => swiperEl.value?.update(),
 	isFirst: isFirstSlide,
 	isLast: isLastSlide,
 	currentIndex,
@@ -411,11 +413,15 @@ defineExpose({
 
 <template>
 	<div class="swi-wrap">
-		<swiper-container ref="swiperEl" class="swiper" init="false">
-			<swiper-slide v-for="(item, index) in items" :key="index" :style="slideStyles">
-				<slot :item="item" :index="index" :currentIndex="currentIndex" />
-			</swiper-slide>
-		</swiper-container>
+		<Swiper
+			v-bind="swiperVueProps" class="swiper" @swiper="onSwiper" @slide-change="updateNavigationState"
+			@reach-beginning="updateNavigationState" @reach-end="updateNavigationState"
+			@from-edge="updateNavigationState"
+		>
+			<SwiperSlide v-for="(item, idx) in items" :key="idx" :style="slideStyles">
+				<slot :item="item" :index="idx" :currentIndex="currentIndex" />
+			</SwiperSlide>
+		</Swiper>
 
 		<!-- Custom Navigation Slot -->
 		<slot
@@ -446,8 +452,6 @@ defineExpose({
 <style>
 .swiper {
 	width: 100%;
-	padding-top: 50px;
-	padding-bottom: 50px;
 }
 
 :root {

package/vite.config.ts

@@ -28,7 +28,7 @@ export default defineConfig(() => ({
 		lib: {
 			entry: resolve(indexDir, 'index.ts'),
 			formats: ['es', 'cjs'],
-			fileName: (module, entry) => `${entry}.${ 'es' === module ? 'mjs' : module}`,
+			fileName: (module, entry) => `${entry}.${module === 'es' ? 'mjs' : module}`,
 			cssFileName: 'style',
 		},
 		rollupOptions: {