@xenterprises/nuxt-x-marketing 0.0.24 → 1.0.0

package/app/components/X/Mark/Modal/Image.vue

@@ -0,0 +1,226 @@
+<template>
+	<Teleport to="body">
+		<Transition
+			enter-active-class="transition-opacity duration-300"
+			enter-from-class="opacity-0"
+			leave-active-class="transition-opacity duration-200"
+			leave-to-class="opacity-0"
+		>
+			<div
+				v-if="isOpen"
+				class="fixed inset-0 z-50 flex items-center justify-center"
+				@click="close"
+				@keydown.escape="close"
+			>
+				<!-- Backdrop -->
+				<div class="absolute inset-0 bg-black/90" />
+
+				<!-- Close Button -->
+				<button
+					class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
+					@click.stop="close"
+				>
+					<UIcon name="i-lucide-x" class="w-6 h-6" />
+					<span class="sr-only">Close</span>
+				</button>
+
+				<!-- Navigation (for galleries) -->
+				<template v-if="images.length > 1">
+					<button
+						class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
+						@click.stop="prev"
+					>
+						<UIcon name="i-lucide-chevron-left" class="w-6 h-6" />
+						<span class="sr-only">Previous</span>
+					</button>
+					<button
+						class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
+						@click.stop="next"
+					>
+						<UIcon name="i-lucide-chevron-right" class="w-6 h-6" />
+						<span class="sr-only">Next</span>
+					</button>
+				</template>
+
+				<!-- Image Container -->
+				<div
+					class="relative max-w-[90vw] max-h-[90vh]"
+					@click.stop
+				>
+					<Transition
+						:name="slideDirection"
+						mode="out-in"
+					>
+						<figure :key="currentIndex" class="flex flex-col items-center">
+							<img
+								:src="currentImage.src"
+								:alt="currentImage.alt"
+								class="max-w-full max-h-[80vh] object-contain rounded-lg"
+								@load="loading = false"
+							/>
+							<figcaption
+								v-if="currentImage.caption"
+								class="mt-4 text-center text-white/80 text-sm max-w-lg"
+							>
+								{{ currentImage.caption }}
+							</figcaption>
+						</figure>
+					</Transition>
+
+					<!-- Loading indicator -->
+					<div
+						v-if="loading"
+						class="absolute inset-0 flex items-center justify-center"
+					>
+						<UIcon name="i-lucide-loader-2" class="w-8 h-8 text-white animate-spin" />
+					</div>
+				</div>
+
+				<!-- Counter -->
+				<div
+					v-if="images.length > 1 && hasCounter"
+					class="absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full bg-white/10 text-white text-sm"
+				>
+					{{ currentIndex + 1 }} / {{ images.length }}
+				</div>
+
+				<!-- Thumbnails -->
+				<div
+					v-if="images.length > 1 && hasThumbnails"
+					class="absolute bottom-16 left-1/2 -translate-x-1/2 flex gap-2"
+				>
+					<button
+						v-for="(image, index) in images"
+						:key="index"
+						class="w-12 h-12 rounded-lg overflow-hidden border-2 transition-all"
+						:class="index === currentIndex ? 'border-white' : 'border-transparent opacity-50 hover:opacity-75'"
+						@click.stop="currentIndex = index"
+					>
+						<img
+							:src="image.src"
+							:alt="image.alt"
+							class="w-full h-full object-cover"
+						/>
+					</button>
+				</div>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** v-model for lightbox visibility */
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	/** Array of images or single image */
+	images: {
+		type: Array,
+		default: () => [],
+		// Each image: { src, alt, caption? }
+	},
+	/** Starting index for galleries */
+	startIndex: {
+		type: Number,
+		default: 0,
+	},
+	/** Show image counter */
+	hasCounter: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show thumbnail navigation */
+	hasThumbnails: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const currentIndex = ref(props.startIndex);
+const loading = ref(false);
+const slideDirection = ref('slide-left');
+
+const isOpen = computed({
+	get: () => props.modelValue,
+	set: (value) => emit('update:modelValue', value),
+});
+
+const currentImage = computed(() => {
+	return props.images[currentIndex.value] || { src: '', alt: '' };
+});
+
+const close = () => {
+	isOpen.value = false;
+};
+
+const next = () => {
+	loading.value = true;
+	slideDirection.value = 'slide-left';
+	currentIndex.value = (currentIndex.value + 1) % props.images.length;
+	emit('change', currentIndex.value);
+};
+
+const prev = () => {
+	loading.value = true;
+	slideDirection.value = 'slide-right';
+	currentIndex.value = (currentIndex.value - 1 + props.images.length) % props.images.length;
+	emit('change', currentIndex.value);
+};
+
+// Keyboard navigation
+const handleKeydown = (e) => {
+	if (!isOpen.value) return;
+
+	if (e.key === 'ArrowRight') next();
+	if (e.key === 'ArrowLeft') prev();
+	if (e.key === 'Escape') close();
+};
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeydown);
+});
+
+// Reset to startIndex when opening
+watch(isOpen, (open) => {
+	if (open) {
+		currentIndex.value = props.startIndex;
+	}
+});
+</script>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+	transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-left-enter-from {
+	transform: translateX(20px);
+	opacity: 0;
+}
+
+.slide-left-leave-to {
+	transform: translateX(-20px);
+	opacity: 0;
+}
+
+.slide-right-enter-from {
+	transform: translateX(-20px);
+	opacity: 0;
+}
+
+.slide-right-leave-to {
+	transform: translateX(20px);
+	opacity: 0;
+}
+</style>

package/app/components/X/Mark/Modal/Video.vue

@@ -0,0 +1,203 @@
+<template>
+	<XMarkModal
+		ref="modalRef"
+		:title="title"
+		:description="description"
+		:size="size"
+		dark
+		@open="emit('open')"
+		@close="handleClose"
+	>
+		<!-- Trigger Slot -->
+		<slot>
+			<!-- Thumbnail Trigger -->
+			<button
+				v-if="thumbnail"
+				class="relative group rounded-xl overflow-hidden cursor-pointer"
+			>
+				<img
+					:src="thumbnail"
+					:alt="title || 'Video thumbnail'"
+					class="w-full aspect-video object-cover transition-transform group-hover:scale-105"
+				/>
+				<div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/50 transition-colors">
+					<div class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg">
+						<UIcon name="i-lucide-play" class="w-8 h-8 text-neutral-900 ml-1" />
+					</div>
+				</div>
+			</button>
+
+			<!-- Button Trigger -->
+			<UButton
+				v-else
+				:label="buttonProps.label"
+				:color="buttonProps.color"
+				:variant="buttonProps.variant"
+				:size="buttonProps.size"
+				:leading-icon="buttonProps.icon"
+			/>
+		</slot>
+
+		<!-- Video Content -->
+		<template #content>
+			<div class="aspect-video bg-black overflow-hidden" :class="title || description ? 'rounded-t-lg' : 'rounded-lg'">
+				<!-- YouTube Embed -->
+				<iframe
+					v-if="modalRef?.isOpen && embedType === 'youtube'"
+					:src="embedUrl"
+					class="w-full h-full"
+					frameborder="0"
+					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+					allowfullscreen
+				/>
+
+				<!-- Vimeo Embed -->
+				<iframe
+					v-else-if="modalRef?.isOpen && embedType === 'vimeo'"
+					:src="embedUrl"
+					class="w-full h-full"
+					frameborder="0"
+					allow="autoplay; fullscreen; picture-in-picture"
+					allowfullscreen
+				/>
+
+				<!-- Direct Video -->
+				<video
+					v-else-if="modalRef?.isOpen"
+					ref="videoRef"
+					:src="src"
+					:poster="poster"
+					class="w-full h-full object-contain"
+					controls
+					:autoplay="autoplay"
+				>
+					<track
+						v-if="captions"
+						kind="captions"
+						:src="captions"
+						:srclang="captionsLang"
+						:label="captionsLabel"
+					/>
+				</video>
+			</div>
+		</template>
+	</XMarkModal>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Video source (direct URL, YouTube, or Vimeo) */
+	src: {
+		type: String,
+		required: true,
+	},
+	/** Thumbnail image URL (shows image with play button) */
+	thumbnail: {
+		type: String,
+		default: '',
+	},
+	/** Poster image for direct videos */
+	poster: {
+		type: String,
+		default: '',
+	},
+	/** Video title (shown in modal footer) */
+	title: {
+		type: String,
+		default: '',
+	},
+	/** Video description (shown in modal footer) */
+	description: {
+		type: String,
+		default: '',
+	},
+	/** Modal size */
+	size: {
+		type: String,
+		default: '4xl',
+		validator: (v) => ['lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'].includes(v),
+	},
+	/** Autoplay video when modal opens */
+	autoplay: {
+		type: Boolean,
+		default: true,
+	},
+	/** Button configuration object */
+	button: {
+		type: Object,
+		default: () => ({}),
+	},
+	/** Captions/subtitles file URL */
+	captions: {
+		type: String,
+		default: '',
+	},
+	/** Captions language code */
+	captionsLang: {
+		type: String,
+		default: 'en',
+	},
+	/** Captions label */
+	captionsLabel: {
+		type: String,
+		default: 'English',
+	},
+});
+
+const emit = defineEmits(['open', 'close']);
+
+const modalRef = ref(null);
+const videoRef = ref(null);
+
+// Button props with defaults
+const buttonProps = computed(() => ({
+	label: props.button.label || 'Watch Video',
+	color: props.button.color || 'primary',
+	variant: props.button.variant || 'solid',
+	size: props.button.size || 'md',
+	icon: props.button.icon || 'i-lucide-play',
+}));
+
+// Detect embed type from URL
+const embedType = computed(() => {
+	if (props.src.includes('youtube.com') || props.src.includes('youtu.be')) {
+		return 'youtube';
+	}
+	if (props.src.includes('vimeo.com')) {
+		return 'vimeo';
+	}
+	return 'direct';
+});
+
+// Generate embed URL
+const embedUrl = computed(() => {
+	const autoplayParam = props.autoplay ? '1' : '0';
+
+	if (embedType.value === 'youtube') {
+		let videoId = '';
+		if (props.src.includes('youtu.be/')) {
+			videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
+		} else if (props.src.includes('v=')) {
+			videoId = props.src.split('v=')[1]?.split('&')[0];
+		} else if (props.src.includes('embed/')) {
+			videoId = props.src.split('embed/')[1]?.split('?')[0];
+		}
+		return `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayParam}&rel=0`;
+	}
+
+	if (embedType.value === 'vimeo') {
+		const videoId = props.src.split('vimeo.com/')[1]?.split('?')[0];
+		return `https://player.vimeo.com/video/${videoId}?autoplay=${autoplayParam}`;
+	}
+
+	return props.src;
+});
+
+// Handle close - pause video
+const handleClose = () => {
+	if (videoRef.value) {
+		videoRef.value.pause();
+	}
+	emit('close');
+};
+</script>

package/app/components/X/Mark/Modal/index.vue

@@ -0,0 +1,133 @@
+<template>
+	<UModal
+		v-model:open="isOpen"
+		:fullscreen="fullscreen"
+		:ui="modalUi"
+	>
+		<!-- Trigger Slot -->
+		<slot />
+
+		<!-- Modal Content -->
+		<template #body>
+			<div class="relative">
+				<!-- Close Button -->
+				<UButton
+					icon="i-lucide-x"
+					color="neutral"
+					variant="ghost"
+					:size="fullscreen ? 'lg' : 'md'"
+					class="absolute z-10 rounded-full"
+					:class="closeButtonClasses"
+					aria-label="Close"
+					@click="isOpen = false"
+				/>
+
+				<!-- Content -->
+				<slot name="content" :close="close" />
+
+				<!-- Footer (optional) -->
+				<div v-if="$slots.footer || title || description" class="px-5 py-4 bg-neutral-900 rounded-b-lg">
+					<slot name="footer">
+						<h4 v-if="title" class="text-white font-medium">{{ title }}</h4>
+						<p v-if="description" class="mt-1 text-sm text-neutral-400">{{ description }}</p>
+					</slot>
+				</div>
+			</div>
+		</template>
+	</UModal>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Modal title (shown in footer) */
+	title: {
+		type: String,
+		default: '',
+	},
+	/** Modal description (shown in footer) */
+	description: {
+		type: String,
+		default: '',
+	},
+	/** Modal size */
+	size: {
+		type: String,
+		default: '4xl',
+		validator: (v) => ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'].includes(v),
+	},
+	/** Fullscreen mode */
+	fullscreen: {
+		type: Boolean,
+		default: false,
+	},
+	/** Dark mode for content (affects close button styling) */
+	dark: {
+		type: Boolean,
+		default: true,
+	},
+	/** Padding for body */
+	padding: {
+		type: String,
+		default: 'p-0',
+	},
+});
+
+const emit = defineEmits(['open', 'close']);
+
+const isOpen = ref(false);
+
+// Close function for slot
+const close = () => {
+	isOpen.value = false;
+};
+
+// Size classes for content slot
+const sizeClasses = computed(() => {
+	const sizes = {
+		sm: 'max-w-sm',
+		md: 'max-w-md',
+		lg: 'max-w-lg',
+		xl: 'max-w-xl',
+		'2xl': 'max-w-2xl',
+		'3xl': 'max-w-3xl',
+		'4xl': 'max-w-4xl',
+		'5xl': 'max-w-5xl',
+		'6xl': 'max-w-6xl',
+		'7xl': 'max-w-7xl',
+		full: 'max-w-[95vw]',
+	};
+	return sizes[props.size];
+});
+
+// Modal UI config
+const modalUi = computed(() => ({
+	header: 'hidden',
+	body: `${props.padding} ${props.dark ? 'bg-black' : 'bg-white dark:bg-neutral-900'}`,
+	footer: 'hidden',
+	overlay: 'bg-black/80 backdrop-blur-sm',
+	content: `ring-neutral-200/50 dark:ring-neutral-800 ${props.fullscreen ? '' : sizeClasses.value}`,
+}));
+
+// Close button classes based on mode and fullscreen
+const closeButtonClasses = computed(() => {
+	if (props.fullscreen) {
+		return 'fixed top-4 right-4 !bg-white/10 backdrop-blur-sm hover:!bg-white/20 !text-white';
+	}
+	if (props.dark) {
+		return 'top-3 right-3 !bg-black/50 hover:!bg-black/70 !text-white/80 hover:!text-white';
+	}
+	return 'top-3 right-3 !bg-neutral-100 hover:!bg-neutral-200 dark:!bg-neutral-800 dark:hover:!bg-neutral-700 !text-neutral-500 dark:!text-neutral-400';
+});
+
+// Emit events
+watch(isOpen, (open) => {
+	if (open) {
+		emit('open');
+	} else {
+		emit('close');
+	}
+});
+
+// Expose close method
+defineExpose({ close, isOpen });
+</script>