@bagelink/vue 1.6.43 → 1.6.47

package/src/components/lightbox/Lightbox.vue

@@ -1,18 +1,36 @@
 <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 { watch as vueWatch } from 'vue'
 
 let isOpen = $ref(false)
 let group = $ref<LightboxItem[]>([])
 let currentIndex = $ref(0)
-let currentItem = $computed<LightboxItem>(() => group[currentIndex])
+const currentItem = $computed<LightboxItem>(() => group[currentIndex])
+let zoom = $ref(1)
+
+const canSwipe = $computed(() => zoom === 1)
+
+// Advanced options that update reactively
+const swiperAdvancedOptions = $computed(() => ({
+	allowTouchMove: zoom === 1,
+	touchRatio: zoom === 1 ? 1 : 0,
+	simulateTouch: zoom === 1,
+}))
 
 function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 	isOpen = true
 	group = groupItems || [item]
-	currentIndex = group.findIndex(({ src }) => item.src === src)
+	currentIndex = group.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 === -1) currentIndex = 0
+	zoom = 1
 	document.addEventListener('keydown', handleKeydown)
 }
 
@@ -21,107 +39,85 @@ function close() {
 	document.removeEventListener('keydown', handleKeydown)
 }
 
-function next() {
-	if (group.length > 1) {
-		currentIndex = (currentIndex + 1) % group.length
-		currentItem = group[currentIndex]
-	}
-}
-
-function prev() {
-	if (group.length > 1) {
-		currentIndex = (currentIndex - 1 + group.length) % group.length
-		currentItem = group[currentIndex]
-	}
-}
-
 function selectItem(index: number) {
 	currentIndex = index
-	currentItem = group[index]
+	zoom = 1
+	// The v-model will handle updating the swiper
 }
 
-watch(() => isOpen, (val) => {
-	if (val) { document.body.style.overflow = 'hidden' }
-	else { document.body.style.overflow = '' }
+vueWatch(() => isOpen, (val) => {
+	if (val) {
+		document.body.style.overflow = 'hidden'
+	} else {
+		document.body.style.overflow = ''
+	}
+})
+
+vueWatch(() => currentIndex, () => {
+	// Reset zoom when changing slides
+	zoom = 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;
+}
+
+/* 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 {
-	max-height: 90%;
+.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/plugins/modalTypes.ts

@@ -46,7 +46,7 @@ export interface ModalFormComponentProps<T extends { [key: string]: any }> exten
 	modalOptions: ModalFormOptions<T>
 }
 
-export interface ModalFormOptions<T> {
+export interface ModalFormOptions<T> extends ModalOptions {
 	'schema': MaybeRefOrGetter<BglFormSchemaT<T>>
 	'modelValue'?: T
 	'onUpdate:modelValue'?: (val: T) => void
@@ -58,11 +58,4 @@ export interface ModalFormOptions<T> {
 	'deleteText'?: string
 	'duplicateText'?: string
 	'onError'?: (err: any) => void
-	'side'?: boolean
-	'title'?: string
-	'width'?: string
-	'dismissable'?: boolean
-	'visible'?: boolean
-	'actions'?: BtnOptions[]
-	'class'?: string
 }

package/src/plugins/useModal.ts

@@ -80,6 +80,11 @@ export const ModalPlugin: Plugin = {
 			// Make options reactive so updates propagate
 			const reactiveOptions = reactive(options) as ModalOptions | ModalFormOptions<T>
 
+			// Ensure visible is set for modals
+			if (!('visible' in reactiveOptions)) {
+				reactiveOptions.visible = true
+			}
+
 			const modalComponent = {
 				modalOptions: reactiveOptions,
 				modalType,
@@ -147,6 +152,11 @@ export const ModalPlugin: Plugin = {
 					// Calculate z-index based on stack position
 					const zIndex = BASE_Z_INDEX + index * 10
 
+					if (!modal || !modal.modalOptions) {
+						console.error('[BageLink Modal] Invalid modal in stack:', modal)
+						return null
+					}
+
 					const props = {
 						...modal.modalOptions,
 						'visible': true,
@@ -155,8 +165,14 @@ export const ModalPlugin: Plugin = {
 					}
 
 					switch (modal.modalType) {
-						case 'modalForm':
+						case 'modalForm': {
+							const formOptions = modal.modalOptions as ModalFormOptions<any>
+							if (!formOptions.schema) {
+								console.error('[BageLink Modal] ModalForm requires a schema', modal.modalOptions)
+								return null
+							}
 							return h(ModalForm, props as ComponentProps<typeof ModalForm>, modal.componentSlots)
+						}
 						case 'confirmModal':
 							return h(ModalConfirm, props as ModalConfirmOptions, {})
 						default:
@@ -171,27 +187,36 @@ export const ModalPlugin: Plugin = {
 
 		// Auto-mount modal container to document.body
 		if (typeof document !== 'undefined' && typeof window !== 'undefined') {
-			// Wait for app to be mounted before injecting
+			const mountModalContainer = () => {
+				const existingContainer = document.getElementById('bagelink-modal-root')
+				if (!existingContainer) {
+					// Create mount point
+					const container = document.createElement('div')
+					container.id = 'bagelink-modal-root'
+					document.body.appendChild(container)
+
+					// Create a separate app instance for modals to avoid context issues
+					const modalApp = createApp(ModalContainerComponent)
+
+					// Share the same context/plugins
+					modalApp._context = app._context
+
+					// Mount it
+					modalApp.mount(container)
+				}
+			}
+
+			// Try to mount immediately if DOM is ready
+			if (document.body) {
+				mountModalContainer()
+			}
+
+			// Also use mixin as fallback for cases where plugin is installed before DOM ready
 			app.mixin({
 				mounted() {
 					// Only run once on the root component
 					if (this.$root === this) {
-						const existingContainer = document.getElementById('bagelink-modal-root')
-						if (!existingContainer) {
-							// Create mount point
-							const container = document.createElement('div')
-							container.id = 'bagelink-modal-root'
-							document.body.appendChild(container)
-
-							// Create a separate app instance for modals to avoid context issues
-							const modalApp = createApp(ModalContainerComponent)
-
-							// Share the same context/plugins
-							modalApp._context = app._context
-
-							// Mount it
-							modalApp.mount(container)
-						}
+						mountModalContainer()
 					}
 				}
 			})