@bagelink/vue 0.0.827 → 0.0.833

package/src/components/Carousel.vue

@@ -2,221 +2,184 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
-	autoHeight: {
-		type: Boolean,
-		default: false,
-	},
-	allowScroll: {
-		type: Boolean,
-		default: true,
-	},
-	freeDrag: {
-		type: Boolean,
-		default: true,
-	},
-	items: {
-		type: Number,
-		default: 4,
-	},
-	index: {
-		type: Number,
-		default: 0,
-	},
+	autoHeight: { type: Boolean, default: false },
+	allowScroll: { type: Boolean, default: true },
+	freeDrag: { type: Boolean, default: true },
+	items: { type: Number, default: 4 },
+	index: { type: Number, default: 0 },
+	rtl: { type: Boolean, default: false },
+	autoplay: { type: Boolean, default: false },
+	autoPlaySpeed: { type: Number, default: 4000 },
 })
+
 const emit = defineEmits(['update:index'])
 const bglSlider = $ref<HTMLElement>()
+
 let itemCount = $ref(props.items)
-let activeSlideIndex = $ref(0)
+let activeSlideIndex = $ref(props.index)
 let isDragging = $ref(false)
-let startX = $ref(0)
-let scrollLeft = $ref(0)
 let isPressed = $ref(false)
+let startX = $ref(0)
+let scrollStart = $ref(0)
+let yHeight = $ref('auto')
+let timeout: NodeJS.Timeout
+let autoPlayInterval: NodeJS.Timeout
 
-function disableDrag() {
-	bglSlider
-		?.querySelectorAll('img')
-		.forEach((e) => { e.setAttribute('draggable', 'false') })
+// Helper Functions
+function preventDefaultClick(e: MouseEvent) {
+	e.preventDefault()
+}
 
-	for (const e of (bglSlider?.children as any[] | undefined) || []) {
-		e.setAttribute('draggable', 'false')
-		e.addEventListener('click', (e: any) => e.preventDefault())
-	}
+function disableDrag() {
+	bglSlider?.querySelectorAll('img').forEach((img) => { img.setAttribute('draggable', 'false') })
+	Array.from(bglSlider?.children || []).forEach((child) => {
+		child.setAttribute('draggable', 'false');
+		(child as HTMLElement).addEventListener('click', preventDefaultClick)
+	})
 }
 
-let yHeight = $ref('auto')
-function evalHeight() {
+function updateHeight() {
 	if (!props.autoHeight || !bglSlider) return
-	const slidChildren = bglSlider.children[activeSlideIndex].children
-	const height = Array.from(slidChildren)
-		.map(el => el.clientHeight)
-		.reduce((a, b) => a + b, 0)
-
-	yHeight = `${height}px`
+	const children = Array.from(bglSlider.children[activeSlideIndex].children)
+	const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
+	yHeight = `${totalHeight}px`
 }
 
-function scrollEase(target: number, duration: number = 500) {
-	if (!bglSlider) return
-	if (isPressed) return
+function easeScroll(target: number, duration = 500) {
+	if (!bglSlider || isPressed) return
 	const start = bglSlider.scrollLeft
 	const change = target - start
 	const startTime = performance.now()
 
-	function animateScroll(currentTime: number) {
+	function animate(currentTime: number) {
 		if (!bglSlider) return
 		const timeElapsed = currentTime - startTime
 		const progress = Math.min(timeElapsed / duration, 1)
 		bglSlider.scrollLeft = start + change * easeInOutQuad(progress)
-		if (progress < 1) {
-			requestAnimationFrame(animateScroll)
-		}
+		if (progress < 1) requestAnimationFrame(animate)
 	}
 
 	function easeInOutQuad(t: number) {
 		return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
 	}
 
-	requestAnimationFrame(animateScroll)
+	requestAnimationFrame(animate)
 }
 
 function goToSlide(index: number) {
-	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return
-	const isRTL = getComputedStyle(bglSlider).direction === 'rtl'
-	const scrollX = bglSlider.offsetWidth * index * (isRTL ? -1 : 1)
-	const screenWidth = window.innerWidth
-	let duration = 700
-
-	if (screenWidth < 600) {
-		duration = 400
-	} else if (screenWidth < 991) {
-		duration = 500
-	}
-
-	scrollEase(scrollX, duration)
+	if (!bglSlider || index < 0 || index >= bglSlider.children.length) return
+	const offset = bglSlider.offsetWidth * index * (props.rtl ? -1 : 1)
+	const duration = window.innerWidth < 600 ? 400 : window.innerWidth < 991 ? 500 : 700
+	easeScroll(offset, duration)
 	activeSlideIndex = index
-	evalHeight()
+	updateHeight()
 }
 
-watch(() => props.index, goToSlide)
-
-watch(
-	() => activeSlideIndex,
-	() => {
-		if (props.index === activeSlideIndex) return
-		emit('update:index', activeSlideIndex) }
-)
+function handleSlideChange() {
+	if (props.index !== activeSlideIndex) emit('update:index', activeSlideIndex)
+}
 
-function goToSlideScrollEnd() {
+function handleResize() {
 	if (!bglSlider) return
-	const isDragForward = startX > bglSlider.offsetLeft
-	if (itemCount === 1) {
-		if (isDragForward) activeSlideIndex = Math.ceil(bglSlider.scrollLeft / bglSlider.offsetWidth)
-		else activeSlideIndex = Math.floor(bglSlider.scrollLeft / bglSlider.offsetWidth)
-	} else {
-		activeSlideIndex = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
-	}
-	startX = 0
-	const nextSlide = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
-	goToSlide(nextSlide)
+	itemCount = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props.items, 2) : Math.min(props.items, 3)
+	goToSlide(activeSlideIndex)
 }
 
-let timeout: any = null
-
-function scrollEnd() {
+function onScrollEnd() {
+	if ((!props.freeDrag && !props.allowScroll) || !bglSlider) return
+	if (autoPlayInterval) clearInterval(autoPlayInterval)
 	if (timeout) clearTimeout(timeout)
-	timeout = setTimeout(goToSlideScrollEnd, 400)
-}
-
-function stopDragging(e: MouseEvent) {
-	isPressed = false
-	document.removeEventListener('mousemove', move)
-	document.removeEventListener('mouseup', stopDragging)
-	document.removeEventListener('dragend', stopDragging)
-	setTimeout(() => (isDragging = false), 100)
+	timeout = setTimeout(() => { finalizeScroll() }, 400)
 }
 
-function move(e: MouseEvent) {
+function finalizeScroll() {
 	if (!bglSlider) return
-	const x = e.pageX - bglSlider.offsetLeft
-	const walk = x - startX
-	if (walk > 20 || walk < -20) isDragging = true
-	if (!isDragging) return
-	const scroll = x - startX
-	bglSlider.scrollLeft = scrollLeft - scroll
+	if (props.autoplay) autoPlayInterval = setInterval(next, props.autoPlaySpeed)
+	scrollStart = props.rtl ? -bglSlider.scrollLeft : bglSlider.scrollLeft
+	activeSlideIndex = Math.round(scrollStart / bglSlider.offsetWidth)
+	goToSlide(activeSlideIndex)
 }
 
-function startDragging(e: MouseEvent) {
+function startDrag(e: MouseEvent) {
 	if (e.button !== 0 || !props.freeDrag || !bglSlider) return
+	if (autoPlayInterval) clearInterval(autoPlayInterval)
 	startX = e.pageX - bglSlider.offsetLeft
-	scrollLeft = bglSlider.scrollLeft
+	scrollStart = bglSlider.scrollLeft
 	isPressed = true
-	document.addEventListener('mousemove', move)
-	document.addEventListener('mouseup', stopDragging)
-	// document.addEventListener('dragend', stopDragging)
+	document.addEventListener('mousemove', onDrag)
+	document.addEventListener('mouseup', endDrag)
 }
 
-function next() {
+function onDrag(e: MouseEvent) {
 	if (!bglSlider) return
-	const slideCount = bglSlider.children.length
-	const isLastSlide = activeSlideIndex >= slideCount - 1
-	if (isLastSlide) goToSlide(0)
-	else goToSlide(activeSlideIndex + 1)
+	const x = e.pageX - bglSlider.offsetLeft
+	const distance = x - startX
+	if (Math.abs(distance) > 20) isDragging = true
+	if (isDragging) bglSlider.scrollLeft = scrollStart - distance
 }
 
-function prev() {
+function endDrag() {
+	isPressed = false
+	document.removeEventListener('mousemove', onDrag)
+	document.removeEventListener('mouseup', endDrag)
+	setTimeout(() => (isDragging = false), 100)
+}
+
+// Navigation Functions
+function next() {
 	if (!bglSlider) return
 	const slideCount = bglSlider.children.length
-	if (activeSlideIndex === 0) goToSlide(slideCount - 1)
-	else goToSlide(activeSlideIndex - 1)
+	goToSlide((activeSlideIndex + 1) % slideCount)
 }
 
-function evalWidth() {
+function prev() {
 	if (!bglSlider) return
-	if (window.innerWidth < 600) itemCount = 1
-	else if (window.innerWidth < 991) itemCount = Math.min(props.items, 2)
-	else if (window.innerWidth < 1280) itemCount = Math.min(props.items, 3)
-	else itemCount = props.items
-	console.log(itemCount, window.innerWidth)
-	goToSlide(activeSlideIndex)
+	const slideCount = bglSlider.children.length
+	goToSlide((activeSlideIndex - 1 + slideCount) % slideCount)
 }
 
+// Lifecycle Hooks
 onMounted(() => {
-	window.addEventListener('resize', evalWidth)
-	evalHeight()
-	evalWidth()
+	window.addEventListener('resize', handleResize)
 	disableDrag()
+	updateHeight()
+	handleResize()
+	if (props.autoplay) {
+		autoPlayInterval = setInterval(next, props.autoPlaySpeed)
+	}
 })
 
-onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
+function clearAutoplay() {
+	if (autoPlayInterval) clearInterval(autoPlayInterval)
+}
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize)
+})
+
+// Watchers
+watch(() => props.index, goToSlide)
+watch(() => activeSlideIndex, handleSlideChange)
 </script>
 
 <template>
-	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
+	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }" :dir="rtl ? 'rtl' : 'ltr'">
 		<div
 			ref="bglSlider"
-			:class="{
-				dragging: isDragging,
-				clicking: isPressed,
-				allowScroll,
-				odd: itemCount % 2 !== 0,
-				[`slides-${itemCount}`]: itemCount === 1,
-			}"
 			class="bgl-slider"
-			:style="{
-				'--item-count': itemCount,
-			}"
-			@scroll.active="scrollEnd"
-			@mousedown="startDragging"
+			:class="{ dragging: isDragging, clicking: isPressed, allowScroll, odd: itemCount % 2 !== 0, [`slides-${itemCount}`]: itemCount === 1 }"
+			:style="{ '--item-count': itemCount }"
+			@scroll="onScrollEnd"
+			@mousedown="startDrag"
+			@mouseover="clearAutoplay"
+			@focusin="clearAutoplay"
 		>
 			<div v-if="isDragging" class="blocker" />
 			<slot />
 		</div>
 		<div class="Handlers">
-			<span @click="prev">
-				<slot :prev :index="activeSlideIndex" name="prev" />
-			</span>
-			<span @click="next">
-				<slot :next :index="activeSlideIndex" name="next" />
-			</span>
+			<span @click="prev"><slot name="prev" :index="activeSlideIndex" /></span>
+			<span @click="next"><slot name="next" :index="activeSlideIndex" /></span>
 		</div>
 	</div>
 </template>

package/src/components/Pill.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { Btn, MaterialIcon } from '@bagelink/vue'
 import { useSlots } from 'vue'
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 
 interface BtnProp {
 	icon: MaterialIcons
@@ -12,7 +12,7 @@ interface BtnProp {
 const props = defineProps<{
 	disabled?: boolean
 	icon?: MaterialIcons
-	iconEnd: MaterialIcons
+	iconEnd?: MaterialIcons
 	color?: ThemeType
 	theme?: ThemeType
 	flat?: boolean
@@ -21,8 +21,8 @@ const props = defineProps<{
 	loading?: boolean
 	value?: string
 	round?: boolean
-	btn: BtnProp
-	btnEnd: BtnProp
+	btn?: BtnProp
+	btnEnd?: BtnProp
 }>()
 
 const slots = useSlots()