@myelophone/nuxt 0.18.2

package/app/components/view/HorizontalMenu.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="relative w-full" :style="maskStyle">
+		<div
+			ref="scrollContainer"
+			@wheel.prevent="handleWheel"
+			@scroll="updateScrollState"
+			class="flex items-center overflow-x-auto gap-x-2 lg:gap-x-4 scrollbar-none [&::-webkit-scrollbar]:hidden"
+		>
+			<NuxtLink
+				v-for="item in items"
+				:key="item.path"
+				:to="item.path"
+				class="py-2 px-3 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 whitespace-nowrap"
+				active-class="bg-gray-200 dark:bg-gray-700 !text-gray-900 dark:!text-white font-semibold"
+			>
+				{{ item.label }}
+			</NuxtLink>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	items: {
+		type: Array as () => { label: string; path: string }[],
+		required: true,
+		default: () => [],
+	},
+});
+
+const scrollContainer = ref<HTMLElement | null>(null);
+const handleWheel = (event: WheelEvent) => {
+	if (scrollContainer.value) {
+		scrollContainer.value.scrollLeft += event.deltaY;
+	}
+};
+
+const hasOverflow = ref(false);
+const isScrolledToStart = ref(true);
+const isScrolledToEnd = ref(false);
+
+const updateScrollState = () => {
+	const el = scrollContainer.value;
+	if (!el) return;
+
+	const overflow = el.scrollWidth > el.clientWidth;
+	hasOverflow.value = overflow;
+
+	if (overflow) {
+		isScrolledToStart.value = el.scrollLeft < 1;
+		isScrolledToEnd.value =
+			Math.abs(el.scrollWidth - el.clientWidth - el.scrollLeft) < 1;
+	} else {
+		isScrolledToStart.value = true;
+		isScrolledToEnd.value = true;
+	}
+};
+
+const maskStyle = computed(() => {
+	if (!hasOverflow.value) {
+		return {};
+	}
+
+	const fadeWidth = "2rem";
+	let gradient: string;
+
+	if (isScrolledToStart.value) {
+		gradient = `linear-gradient(to right, black calc(100% - ${fadeWidth}), transparent)`;
+	} else if (isScrolledToEnd.value) {
+		gradient = `linear-gradient(to left, black calc(100% - ${fadeWidth}), transparent)`;
+	} else {
+		gradient = `linear-gradient(to right, transparent, black ${fadeWidth}, black calc(100% - ${fadeWidth}), transparent)`;
+	}
+
+	return {
+		"mask-image": gradient,
+		"-webkit-mask-image": gradient,
+	};
+});
+
+onMounted(() => {
+	nextTick(() => {
+		updateScrollState();
+		window.addEventListener("resize", updateScrollState);
+	});
+});
+
+onUnmounted(() => {
+	window.removeEventListener("resize", updateScrollState);
+});
+</script>
+
+<style scoped>
+div {
+	scrollbar-width: none;
+}
+</style>

package/app/components/view/ImageCompare.vue

@@ -0,0 +1,141 @@
+<template>
+	<div
+		ref="container"
+		class="relative w-full h-full select-none touch-none isolate rounded-xl overflow-hidden cursor-ew-resize group bg-(--ui-bg) transform-gpu"
+		@mousedown="startSliding"
+		@touchstart="startSliding"
+	>
+		<div class="absolute inset-0 w-full h-full z-0">
+			<ImgWithLoader
+				:src="afterImage"
+				class="block w-full h-full object-cover pointer-events-none select-none"
+				draggable="false"
+			/>
+
+			<div class="absolute bottom-4 right-4 z-40 pointer-events-none">
+				<span
+					class="bg-black/60 backdrop-blur-md text-white px-3 py-1 text-xs font-bold rounded whitespace-nowrap shadow-lg"
+				>
+					{{ afterLabel }}
+				</span>
+			</div>
+		</div>
+
+		<div
+			class="absolute inset-0 w-full h-full z-10 will-change-[clip-path]"
+			:style="{ clipPath: `inset(0 ${100 - position}% 0 0)` }"
+		>
+			<div class="relative w-full h-full z-0">
+				<ImgWithLoader
+					:src="beforeImage"
+					class="block w-full h-full object-cover pointer-events-none select-none"
+					draggable="false"
+				/>
+			</div>
+
+			<div class="absolute bottom-4 left-4 z-40 pointer-events-none">
+				<span
+					class="bg-black/60 backdrop-blur-md text-white px-3 py-1 text-xs font-bold rounded whitespace-nowrap shadow-lg"
+				>
+					{{ beforeLabel }}
+				</span>
+			</div>
+		</div>
+
+		<div
+			class="absolute top-0 bottom-0 z-30 w-0.5 bg-white cursor-ew-resize pointer-events-none"
+			:style="{ left: `${position}%` }"
+		>
+			<div
+				class="absolute inset-0 bg-white shadow-[0_0_10px_rgba(0,0,0,0.5)]"
+			></div>
+			<div
+				class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white text-gray-900 rounded-full flex items-center justify-center shadow-[0_4px_12px_rgba(0,0,0,0.3)] transform transition-transform group-active:scale-110"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="m15 18-6-6 6-6" />
+				</svg>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="m9 18 6-6-6-6" />
+				</svg>
+			</div>
+		</div>
+
+		<div
+			class="absolute inset-0 z-50 rounded-xl pointer-events-none ring-1 ring-inset ring-(--ui-text)/20"
+		></div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	beforeImage: String,
+	afterImage: String,
+	beforeLabel: String,
+	afterLabel: String,
+});
+
+const container = ref(null);
+const position = ref(50);
+const isSliding = ref(false);
+
+const startSliding = (e) => {
+	isSliding.value = true;
+	move(e);
+	window.addEventListener("mousemove", move);
+	window.addEventListener("mouseup", stopSliding);
+	window.addEventListener("touchmove", move, { passive: false });
+	window.addEventListener("touchend", stopSliding);
+};
+
+const stopSliding = () => {
+	isSliding.value = false;
+	window.removeEventListener("mousemove", move);
+	window.removeEventListener("mouseup", stopSliding);
+	window.removeEventListener("touchmove", move);
+	window.removeEventListener("touchend", stopSliding);
+};
+
+const move = (e) => {
+	if (!isSliding.value || !container.value) return;
+
+	let pageX;
+	if (e.touches && e.touches.length > 0) {
+		pageX = e.touches[0].clientX;
+	} else {
+		pageX = e.clientX;
+	}
+
+	const rect = container.value.getBoundingClientRect();
+	let x = pageX - rect.left;
+
+	if (x < 0) x = 0;
+	if (x > rect.width) x = rect.width;
+
+	position.value = (x / rect.width) * 100;
+};
+
+onUnmounted(() => {
+	stopSliding();
+});
+</script>

package/app/components/view/ImgSlider.vue

@@ -0,0 +1,333 @@
+<script setup lang="ts">
+export type ImageItem = { type: "image"; uri: string };
+export type VideoItem = { type: "video"; uri: string; poster?: string };
+export type MediaItem = ImageItem | VideoItem;
+
+const props = withDefaults(
+	defineProps<{
+		media: MediaItem[];
+		autoScroll?: boolean;
+		autoScrollInterval?: number;
+		vertical?: boolean;
+	}>(),
+	{
+		autoScroll: true,
+		autoScrollInterval: 4000,
+		vertical: false,
+	},
+);
+
+const activeIndex = ref(0);
+const scrollerRef = ref<HTMLElement | null>(null);
+const videoRefs = ref<(HTMLVideoElement | null)[]>([]);
+const scrollIntervalId = ref<any>(null);
+const isAutoScrollDisabled = ref(false);
+
+const stopAutoScrollPermanently = () => {
+	isAutoScrollDisabled.value = true;
+	if (scrollIntervalId.value) {
+		clearInterval(scrollIntervalId.value);
+		scrollIntervalId.value = null;
+	}
+};
+
+const onScroll = () => {
+	if (!scrollerRef.value) return;
+	const scrollLeft = scrollerRef.value.scrollLeft;
+	const width = scrollerRef.value.clientWidth;
+	const index = Math.round(scrollLeft / width);
+
+	if (
+		index !== activeIndex.value &&
+		index >= 0 &&
+		index < props.media.length
+	) {
+		activeIndex.value = index;
+	}
+};
+
+const scrollToSlide = (index: number, isManual = false) => {
+	if (isManual) stopAutoScrollPermanently();
+
+	if (!scrollerRef.value) return;
+	const width = scrollerRef.value.clientWidth;
+	scrollerRef.value.scrollTo({
+		left: index * width,
+		behavior: "smooth",
+	});
+};
+
+const nextSlide = (isManual = false) => {
+	const nextIndex = (activeIndex.value + 1) % props.media.length;
+	scrollToSlide(nextIndex, isManual);
+};
+
+const prevSlide = (isManual = false) => {
+	const prevIndex =
+		(activeIndex.value - 1 + props.media.length) % props.media.length;
+	scrollToSlide(prevIndex, isManual);
+};
+
+const manageVideos = async () => {
+	await nextTick();
+	props.media.forEach((item, i) => {
+		if (item.type !== "video") return;
+		const videoEl = videoRefs.value[i];
+		if (!videoEl) return;
+
+		if (i === activeIndex.value) {
+			videoEl.play().catch(() => {});
+		} else {
+			videoEl.pause();
+			videoEl.currentTime = 0;
+		}
+	});
+};
+
+const handleTouchStart = () => {
+	stopAutoScrollPermanently();
+};
+
+watch(activeIndex, () => {
+	manageVideos();
+});
+
+onMounted(() => {
+	manageVideos();
+
+	if (
+		props.autoScroll &&
+		props.media.length > 1 &&
+		!isAutoScrollDisabled.value
+	) {
+		scrollIntervalId.value = setInterval(() => {
+			nextSlide(false);
+		}, props.autoScrollInterval);
+	}
+});
+
+onUnmounted(() => {
+	if (scrollIntervalId.value) clearInterval(scrollIntervalId.value);
+});
+
+const setVideoRef = (el: any, index: number) => {
+	videoRefs.value[index] = el as HTMLVideoElement;
+};
+</script>
+
+<template>
+	<div
+		class="slider-root"
+		:class="{ 'is-vertical-mode': vertical }"
+		@touchstart.passive="handleTouchStart"
+		@mousedown="handleTouchStart"
+	>
+		<div ref="scrollerRef" class="scroller" @scroll.passive="onScroll">
+			<div v-for="(item, index) in media" :key="index" class="slide">
+				<ImgWithLoader
+					v-if="item.type === 'image'"
+					:src="item.uri"
+					class="media-content"
+					loading="lazy"
+					draggable="false"
+				/>
+
+				<video
+					v-else
+					:ref="(el) => setVideoRef(el, index)"
+					:src="item.uri"
+					:poster="item.poster"
+					class="media-content"
+					playsinline
+					loop
+					muted
+					preload="metadata"
+				></video>
+			</div>
+		</div>
+
+		<template v-if="media.length > 1">
+			<button
+				class="nav-btn prev"
+				@click.stop="prevSlide(true)"
+				aria-label="Previous slide"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="2.5"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15.75 19.5L8.25 12l7.5-7.5"
+					/>
+				</svg>
+			</button>
+
+			<button
+				class="nav-btn next"
+				@click.stop="nextSlide(true)"
+				aria-label="Next slide"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="2.5"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M8.25 4.5l7.5 7.5-7.5 7.5"
+					/>
+				</svg>
+			</button>
+		</template>
+
+		<div class="dots-container">
+			<div
+				v-for="(_, i) in media"
+				:key="i"
+				class="dot"
+				:class="{ active: i === activeIndex }"
+				@click.stop="scrollToSlide(i, true)"
+			></div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.slider-root {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+	touch-action: pan-x;
+	height: 230px;
+	max-height: 90vh;
+}
+
+@media (min-width: 769px) {
+	.slider-root {
+		height: 500px;
+	}
+}
+
+.slider-root.is-vertical-mode {
+	width: 500px;
+	max-width: 100%;
+	height: 90vh;
+	margin: 0 auto;
+}
+
+@media (min-width: 769px) {
+	.slider-root.is-vertical-mode {
+		height: 720px;
+	}
+}
+
+.scroller {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+}
+.scroller::-webkit-scrollbar {
+	display: none;
+}
+
+.slide {
+	flex: 0 0 100%;
+	width: 100%;
+	height: 100%;
+	scroll-snap-align: center;
+	position: relative;
+	scroll-snap-stop: always;
+}
+
+.media-content {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+	border-radius: 0.5rem;
+}
+
+.nav-btn {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 44px;
+	height: 44px;
+	border-radius: 50%;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	z-index: 20;
+	transition: all 0.2s ease;
+	opacity: 0;
+}
+
+.nav-btn svg {
+	width: 24px;
+	height: 24px;
+}
+
+.slider-root:hover .nav-btn {
+	opacity: 1;
+}
+
+.nav-btn:hover {
+	opacity: 1;
+}
+
+.prev {
+	left: 16px;
+}
+
+.next {
+	right: 16px;
+}
+
+.dots-container {
+	position: absolute;
+	bottom: 16px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 8px;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.dot {
+	height: 6px;
+	width: 6px;
+	border-radius: 3px;
+	background-color: rgba(255, 255, 255, 0.5);
+	transition: all 0.3s ease;
+	cursor: pointer;
+	pointer-events: auto;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.dot.active {
+	background-color: #fff;
+	width: 16px;
+}
+
+@media (max-width: 768px) {
+	.nav-btn {
+		display: none !important;
+	}
+}
+</style>

package/app/components/view/InfiniteMarquee.vue

@@ -0,0 +1,147 @@
+<template>
+	<div
+		ref="container"
+		class="relative w-full overflow-hidden group fade-mask"
+		:class="containerClass"
+	>
+		<div
+			ref="track"
+			class="marquee-track group-hover:!paused"
+			:class="{ 'is-running': isStarted }"
+			:style="trackStyle"
+		>
+			<div ref="source" class="marquee-content">
+				<span
+					v-for="(item, i) in items"
+					:key="i"
+					class="px-8 uppercase"
+				>
+					{{ item }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	items: string[];
+	duration?: number;
+	delay?: number;
+	containerClass?: string;
+}>();
+
+const container = ref<HTMLElement>();
+const track = ref<HTMLElement>();
+const source = ref<HTMLElement>();
+const isStarted = ref(false);
+
+let resizeObserver: ResizeObserver | null = null;
+let startTimeout: number | null = null;
+
+function rebuild() {
+	if (!container.value || !track.value || !source.value) return;
+
+	isStarted.value = false;
+	track.value.innerHTML = "";
+	track.value.appendChild(source.value);
+
+	const containerWidth = container.value.offsetWidth;
+	const sourceWidth = source.value.offsetWidth;
+	if (!sourceWidth) return;
+
+	const copies = Math.ceil((containerWidth * 2) / sourceWidth);
+	for (let i = 0; i < copies; i++) {
+		const clone = source.value.cloneNode(true) as HTMLElement;
+		clone.setAttribute("aria-hidden", "true");
+		clone.classList.add("clone-fade-in");
+		track.value.appendChild(clone);
+	}
+
+	track.value.style.setProperty("--marquee-distance", `${sourceWidth}px`);
+
+	startTimeout && clearTimeout(startTimeout);
+	startTimeout = window.setTimeout(() => {
+		isStarted.value = true;
+	}, props.delay ?? 1000);
+}
+
+onMounted(async () => {
+	await nextTick();
+	rebuild();
+	resizeObserver = new ResizeObserver(() => rebuild());
+	resizeObserver.observe(container.value!);
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	startTimeout && clearTimeout(startTimeout);
+});
+
+const trackStyle = computed(() => ({
+	animationDuration: `${props.duration ?? 30}s`,
+}));
+</script>
+
+<style scoped>
+@keyframes marquee {
+	from {
+		transform: translate3d(0, 0, 0);
+	}
+	to {
+		transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0);
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.marquee-track {
+	display: flex;
+	width: max-content;
+	will-change: transform;
+	animation: marquee linear infinite;
+	animation-play-state: paused;
+}
+
+.marquee-track.is-running {
+	animation-play-state: running;
+}
+
+.group:hover .marquee-track {
+	animation-play-state: paused !important;
+}
+
+.marquee-content {
+	display: flex;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.clone-fade-in {
+	animation: fadeIn 0.5s ease-out forwards;
+}
+
+.fade-mask {
+	mask-image: linear-gradient(
+		to right,
+		transparent,
+		black 2rem,
+		black calc(100% - 2rem),
+		transparent
+	);
+	-webkit-mask-image: linear-gradient(
+		to right,
+		transparent,
+		black 2rem,
+		black calc(100% - 2rem),
+		transparent
+	);
+}
+</style>