@bagelink/vue 1.6.43 → 1.6.49

package/src/components/lightbox/Lightbox.vue

@@ -1,127 +1,123 @@
 <script setup lang="ts">
 import type { LightboxItem } from './lightbox.types'
 
-import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Carousel, downloadFile } from '@bagelink/vue'
-import { watch } from 'vue'
+import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile } from '@bagelink/vue'
+import { computed, ref, watch } from 'vue'
 
-let isOpen = $ref(false)
-let group = $ref<LightboxItem[]>([])
-let currentIndex = $ref(0)
-let currentItem = $computed<LightboxItem>(() => group[currentIndex])
+const isOpen = ref(false)
+const group = ref<LightboxItem[]>([])
+const currentIndex = ref(0)
+const currentItem = computed<LightboxItem>(() => group.value[currentIndex.value])
+const zoom = ref(1)
+
+const canSwipe = computed(() => zoom.value === 1)
+
+// Advanced options that update reactively
+const swiperAdvancedOptions = computed(() => ({
+	allowTouchMove: zoom.value === 1,
+	touchRatio: zoom.value === 1 ? 1 : 0,
+	simulateTouch: zoom.value === 1,
+}))
 
 function open(item: LightboxItem, groupItems?: LightboxItem[]) {
-	isOpen = true
-	group = groupItems || [item]
-	currentIndex = group.findIndex(({ src }) => item.src === src)
+	isOpen.value = true
+	group.value = groupItems || [item]
+	currentIndex.value = group.value.findIndex((groupItem) => {
+		const hasSrcMatch = item.src !== undefined && item.src !== null && item.src !== ''
+			&& groupItem.src === item.src
+		const hasPathMatch = item.pathKey !== undefined && item.pathKey !== null && item.pathKey !== ''
+			&& groupItem.pathKey === item.pathKey
+		return hasSrcMatch || hasPathMatch
+	})
+	if (currentIndex.value === -1) currentIndex.value = 0
+	zoom.value = 1
 	document.addEventListener('keydown', handleKeydown)
 }
 
 function close() {
-	isOpen = false
+	isOpen.value = false
 	document.removeEventListener('keydown', handleKeydown)
 }
 
-function next() {
-	if (group.length > 1) {
-		currentIndex = (currentIndex + 1) % group.length
-		currentItem = group[currentIndex]
-	}
+function selectItem(index: number) {
+	currentIndex.value = index
+	zoom.value = 1
+	// The v-model will handle updating the swiper
 }
 
-function prev() {
-	if (group.length > 1) {
-		currentIndex = (currentIndex - 1 + group.length) % group.length
-		currentItem = group[currentIndex]
+watch(() => isOpen.value, (val) => {
+	if (val) {
+		document.body.style.overflow = 'hidden'
+	} else {
+		document.body.style.overflow = ''
 	}
-}
-
-function selectItem(index: number) {
-	currentIndex = index
-	currentItem = group[index]
-}
+})
 
-watch(() => isOpen, (val) => {
-	if (val) { document.body.style.overflow = 'hidden' }
-	else { document.body.style.overflow = '' }
+watch(() => currentIndex.value, () => {
+	// Reset zoom when changing slides
+	zoom.value = 1
 })
 
 function handleKeydown(event: KeyboardEvent) {
 	if (event.key === 'Escape') {
 		close()
-	} else if (event.key === 'ArrowLeft') {
-		prev()
-	} else if (event.key === 'ArrowRight') {
-		next()
 	}
 }
 
-const zoom = $ref(1)
-
-function clickOutside() {
-	if (zoom === 1) { close() }
-}
-
 defineExpose({ open, close })
 </script>
 
 <template>
 	<transition name="fade">
-		<div
-			v-if="isOpen"
-			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-9999 inset mx-auto"
-			@keydown.esc="close" @keydown.left="prev" @keydown.right="next" @click="clickOutside"
-		>
-			<div
-				v-if="group && group.length > 1"
-				class="navigation flex space-between px-3 w-100 absolute m_px-1 m_none z-9"
-			>
-				<Btn class="oval opacity-8" icon="arrow_back" color="black" @click="prev" />
-
-				<Btn class="oval opacity-8" icon="arrow_forward" color="black" @click="next" />
-			</div>
-			<div class="bgl-lightbox relative txt-center" @click.stop>
-				<div class="flex start fixed top-1 w-100 space-between px-1 z-9">
-					<Btn flat class="color-white" icon="close" @click="close" />
-					<div v-if="currentItem?.enableZoom && currentItem?.type === 'image'" class="center">
-						<Btn flat class="color-white" icon="remove" :disabled="zoom === 1" @click="zoom--" />
-						<Btn flat class="color-white" icon="zoom_in" :disabled="zoom === 1" @click="zoom = 1" />
-						<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
-					</div>
-					<Btn
-						v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat
-						iconEnd="arrow_outward" value="Open File" :href="currentItem?.src" target="_blank"
-					/>
-					<Btn
-						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat
-						icon="download" value="Download File" @click="downloadFile(currentItem?.src)"
-					/>
-					<div v-if="!currentItem?.openFile && !currentItem?.download" />
+		<div v-if="isOpen" class="bgl-lightbox-overlay" @keydown.esc="close">
+			<div class="flex start w-100 space-between p-025 z-9" @click="close">
+				<Btn flat class="color-white" icon="close" @click="close" />
+				<div v-if="currentItem?.enableZoom && currentItem?.type === 'image'" class="center">
+					<Btn flat class="color-white" icon="remove" :disabled="zoom === 1" @click="zoom--" />
+					<Btn flat class="color-white" icon="zoom_in" :disabled="zoom === 1" @click="zoom = 1" />
+					<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
 				</div>
+				<Btn
+					v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat
+					iconEnd="arrow_outward" value="Open File" :href="currentItem?.src" target="_blank"
+				/>
+				<Btn
+					v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat
+					icon="download" value="Download File" @click="downloadFile(currentItem?.src)"
+				/>
+				<div v-if="!currentItem?.openFile && !currentItem?.download" />
+			</div>
 
-				<Carousel
-					v-model:index="currentIndex" :items="1" class="bgl-lightbox-item"
-					:class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1"
-				>
-					<template v-for="item in group" :key="item.src">
+			<Swiper
+				v-if="group && group.length > 0" v-model:index="currentIndex" :items="group"
+				:initial-slide="currentIndex" class="bgl-lightbox-swiper" :class="{ zoomed: zoom > 1 }"
+				:navigation="group.length > 1" :grab-cursor="canSwipe" :keyboard="true" :loop="false" :speed="400"
+				:slides-per-view="1" :space-between="0" effect="slide" :advanced-options="swiperAdvancedOptions"
+				@click.stop
+			>
+				<template #default="{ item }">
+					<div class="bgl-lightbox-item">
 						<Zoomer
 							v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
-							:mouse-wheel-to-zoom="false"
+							:mouse-wheel-to-zoom="false" :double-click-to-zoom="true" :max-scale="5" :min-scale="1"
+							:aspect-ratio="0" :limit-translation="true" @click.stop
 						>
-							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
+							<Image :draggable="false" :src="item?.src" alt="Preview" class="lightbox-image" />
 						</Zoomer>
 
 						<BglVideo
 							v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls
-							class="vw90"
+							class="lightbox-video"
 						/>
 
-						<div v-else-if="item?.type === 'pdf' && item?.src" class="vw90">
+						<div v-else-if="item?.type === 'pdf' && item?.src" class="lightbox-pdf">
 							<embed
 								:src="normalizeURL(item?.src)" type="application/pdf" width="100%" height="1080"
-								:title="item?.name" class="vw90"
+								:title="item?.name"
 							>
 						</div>
-						<div v-else class="vw90">
+
+						<div v-else class="lightbox-file">
 							<div class="file-info txt-white flex m_block align-items-start gap-025">
 								<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
 								<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
@@ -129,40 +125,39 @@ defineExpose({ open, close })
 								<div class="txt-start">
 									<p class="mx-0 light">
 										File:
-										<span class="semi word-break-all ">
-											{{ item?.name }}
-										</span>
+										<span class="semi word-break-all">{{ item?.name }}</span>
 									</p>
-									<p class="mx-0 ">
+									<p class="mx-0">
 										Type:
-										<span class="semi">
-											{{ item?.type }}
-										</span>
+										<span class="semi">{{ item?.type }}</span>
 									</p>
 									<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
-									<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
 								</div>
 							</div>
 						</div>
-					</template>
-				</Carousel>
-				<div
-					v-if="group && group.length > 1" class="flex justify-content-center mt-2 overflow
-					p-1 fixed bottom start end gap-1 m_justify-content-start"
-				>
-					<template v-for="(item, index) in group" :key="index">
-						<Image
-							v-if="item.type === 'image'" class="thumbnail object-fit-cover hover
-							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0" :src="item.src" alt=""
-							:class="{ active: currentIndex === index }" @click="selectItem(index)"
-						/>
-						<Icon
-							v-else class="thumbnail object-fit-cover hover
-							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0" icon="description"
-							:class="{ active: currentIndex === index }" @click="selectItem(index)"
-						/>
-					</template>
-				</div>
+					</div>
+				</template>
+
+				<template #prev-button="{ prev }">
+					<Btn icon="arrow_back" color="black" @click="prev" />
+				</template>
+
+				<template #next-button="{ next }">
+					<Btn icon="arrow_forward" color="black" @click="next" />
+				</template>
+			</Swiper>
+
+			<div v-if="group && group.length > 1" class="lightbox-thumbnails" @click.stop>
+				<template v-for="(item, index) in group" :key="index">
+					<Image
+						v-if="item.type === 'image'" class="thumbnail" :src="item.src" alt=""
+						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)"
+					/>
+					<Icon
+						v-else class="thumbnail thumbnail-icon" icon="description"
+						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)"
+					/>
+				</template>
 			</div>
 		</div>
 	</transition>
@@ -189,70 +184,225 @@ defineExpose({ open, close })
 }
 
 .bgl-lightbox-overlay {
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	display: grid;
+	grid-template-rows: 50px 1fr 100px;
+	z-index: 9999;
+	inset: 0;
 	background: rgba(0, 0, 0, 0.8);
+	overflow: hidden;
 }
 
-.bgl-lightbox {
-	max-height: 90%;
+/* Top controls row */
+.bgl-lightbox-overlay>.flex:first-child {
+	grid-row: 1;
+	align-self: start;
+}
+
+/* Main content row - Swiper */
+.bgl-lightbox-swiper {
+	grid-row: 2;
+	width: 100vw;
+	height: 100%;
+	overflow: hidden;
+}
+
+/* Bottom thumbnails row */
+.lightbox-thumbnails {
+	grid-row: 3;
+	align-self: end;
+}
+
+.bgl-lightbox-swiper .swiper {
+	width: 100%;
+	height: 100%;
+}
+
+.bgl-lightbox-swiper .swiper-wrapper {
+	align-items: center;
 }
 
 .bgl-lightbox-item {
-	animation: 500ms ease bgl-lightbox-load;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	animation: 200ms ease bgl-lightbox-load;
+}
+
+/* Navigation button styling */
+.lightbox-nav-btn {
+	background: rgba(0, 0, 0, 0.6);
+	backdrop-filter: blur(8px);
+	border-radius: 50%;
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.lightbox-nav-btn:hover {
+	background: rgba(0, 0, 0, 0.8);
+	transform: scale(1.05);
+}
+
+.lightbox-nav-btn:active {
+	transform: scale(0.95);
+}
+
+/* Adjust swiper navigation positioning */
+.bgl-lightbox-swiper :deep(.swi-ctrl) {
+	padding: 0 1.5rem !important;
+}
+
+@media screen and (max-width: 900px) {
+	.bgl-lightbox-swiper :deep(.swi-ctrl) {
+		padding: 0 1rem !important;
+	}
+
+	.lightbox-nav-btn {
+		width: 40px;
+		height: 40px;
+	}
 }
 
 @keyframes bgl-lightbox-load {
 	from {
-		scale: 0.7;
+		opacity: 0;
+		transform: scale(0.95);
 	}
 
 	to {
-		scale: 1;
-
+		opacity: 1;
+		transform: scale(1);
 	}
 }
 
-.bgl-lightbox-item * {
-	max-height: calc(80vh - 90px);
+.lightbox-image,
+.lightbox-video,
+.lightbox-pdf,
+.lightbox-file {
+	max-width: 90vw;
+	max-height: calc(100vh - 140px);
+	object-fit: contain;
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load;
-	transition: max-height 200ms ease;
 }
 
-.bgl-lightbox-item.zoomed * {
+.lightbox-image {
+	width: auto;
+	height: auto;
+}
+
+/* When zoomed, make image full width */
+.bgl-lightbox-swiper.zoomed .lightbox-image {
+	max-width: 100vw;
+	width: 100vw;
+	max-height: 100vh;
+	height: 100vh;
+	object-fit: contain;
+}
+
+.bgl-lightbox-swiper.zoomed .vue-zoomer {
+	width: 100vw;
+	height: 100vh;
+}
+
+.bgl-lightbox-swiper.zoomed .bgl-lightbox-item * {
 	max-height: calc(100vh - 90px);
 	height: calc(100vh - 90px);
 }
 
-.bgl-lightbox-item.zoomed {
+.bgl-lightbox-swiper.zoomed {
 	pointer-events: none;
 }
 
-.bgl-lightbox-item.zoomed .vue-zoomer {
+.bgl-lightbox-swiper.zoomed .vue-zoomer {
 	pointer-events: auto;
 }
 
-.navigation {
-	top: 50%;
-	transform: translateY(-50%);
+.lightbox-thumbnails {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 1rem;
+	overflow-x: auto;
+	overflow-y: hidden;
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
+	width: 100%;
+}
+
+.lightbox-thumbnails::-webkit-scrollbar {
+	height: 4px;
+}
+
+.lightbox-thumbnails::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.lightbox-thumbnails::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
 }
 
 .thumbnail {
-	height: 50px;
-	width: 50px;
+	height: 60px;
+	width: 60px;
+	min-width: 60px;
+	object-fit: cover;
+	border-radius: 6px;
+	cursor: pointer;
+	opacity: 0.6;
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+}
+
+.thumbnail-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(255, 255, 255, 0.1);
 }
 
 .thumbnail:hover {
 	opacity: 1;
+	transform: scale(1.05);
 }
 
 .thumbnail:active {
-	opacity: 0.8;
+	transform: scale(0.95);
 }
 
 .thumbnail.active {
 	opacity: 1;
-	outline: 2px solid white;
+	outline: 3px solid white;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+@media screen and (max-width: 910px) {
+	.bgl-lightbox-overlay {
+		grid-template-rows: 50px 1fr 70px;
+	}
+
+	.lightbox-thumbnails {
+		justify-content: flex-start;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+	}
+
+	.thumbnail {
+		height: 50px;
+		width: 50px;
+		min-width: 50px;
+	}
 }
 
 .file-info {

package/src/components/lightbox/index.ts

@@ -32,9 +32,9 @@ const lightboxDirective: Directive = {
 
 function groupHandler(item: LightboxItem) {
 	if (item.group) {
-		if (!groups[item.group]) {groups[item.group] = []}
+		if (!groups[item.group]) { groups[item.group] = [] }
 		const currentIndex = groups[item.group].findIndex(i => i.src === item.src)
-		if (-1 === currentIndex) {groups[item.group].push(item)}
+		if (currentIndex === -1) { groups[item.group].push(item) }
 	}
 }
 
@@ -42,7 +42,7 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 	e.stopPropagation()
 	const item = bindingToItem(binding, el)
 	const lightboxInstance = getLightboxInstance()
-	if (!lightboxInstance || !lightboxInstance.open) {return}
+	if (!lightboxInstance || !lightboxInstance.open) { return }
 	const open = lightboxInstance.open as OpenFunction
 	const group = item && item.group ? groups[item.group] : undefined
 	open(item, group)
@@ -60,18 +60,18 @@ const youtubeRegex = /youtube\.com|youtu\.be/
 const vimeoRegex = /vimeo\.com/
 
 function urlToName(url: string): string {
-	if (!url || 'string' !== typeof url) {return ''}
+	if (!url || typeof url !== 'string') { return '' }
 	const name = url.split('/').pop() || ''
 	return name.replace(/\.[^/.]+$/, '')
 }
 
 function determineFileType(url: any): string {
-	if ('string' !== typeof url || !url) {return 'unknown'}
+	if (typeof url !== 'string' || !url) { return 'unknown' }
 	const extension = (url.split('.').pop() || '').toLowerCase()
 	const altExtension = url.split('?')[0].split('.').pop()?.toLowerCase() || ''
-	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) {return 'image'}
-	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) {return 'video'}
-	if (['pdf'].includes(extension)) {return 'pdf'}
+	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) { return 'image' }
+	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) { return 'video' }
+	if (['pdf'].includes(extension)) { return 'pdf' }
 	return extension ?? 'unknown'
 }
 

package/src/composables/index.ts

@@ -2,7 +2,7 @@ import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
 
 import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
-import { ref, toValue, watch } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 
 export { useAddToCalendar } from './useAddToCalendar'
 export { getBagelInstance, setBagelInstance, useBagel } from './useBagel'
@@ -19,17 +19,17 @@ interface UseBglSchemaParamsT<T> {
 export function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, columns, data }: UseBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
-	const _schema = $computed(() => toValue(schema))
-	const _columns = $computed(() => toValue(columns))
+	const _schema = computed(() => toValue(schema))
+	const _columns = computed(() => toValue(columns))
 
-	if (_schema) {
+	if (_schema.value) {
 		return (
-			_columns && _columns.length > 0
-				? _schema.filter(f => _columns.includes(f.id as string))
-				: _schema
+			_columns.value && _columns.value.length > 0
+				? _schema.value.filter(f => _columns.value?.includes(f.id as string))
+				: _schema.value
 		) as BglFormSchemaT<T>
 	}
-	return getFallbackSchema(data, _columns)
+	return getFallbackSchema(data, _columns.value)
 }
 
 export function localRef<T>(