@bagelink/vue 1.5.28 → 1.5.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.5.28",
+  "version": "1.5.32",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/lightbox/Lightbox.vue

@@ -22,14 +22,14 @@ function close() {
 }
 
 function next() {
-	if (1 < group.length) {
+	if (group.length > 1) {
 		currentIndex = (currentIndex + 1) % group.length
 		currentItem = group[currentIndex]
 	}
 }
 
 function prev() {
-	if (1 < group.length) {
+	if (group.length > 1) {
 		currentIndex = (currentIndex - 1 + group.length) % group.length
 		currentItem = group[currentIndex]
 	}
@@ -41,16 +41,16 @@ function selectItem(index: number) {
 }
 
 watch(() => isOpen, (val) => {
-	if (val) {document.body.style.overflow = 'hidden'}
-	else {document.body.style.overflow = ''}
+	if (val) { document.body.style.overflow = 'hidden' }
+	else { document.body.style.overflow = '' }
 })
 
 function handleKeydown(event: KeyboardEvent) {
-	if ('Escape' === event.key) {
+	if (event.key === 'Escape') {
 		close()
-	} else if ('ArrowLeft' === event.key) {
+	} else if (event.key === 'ArrowLeft') {
 		prev()
-	} else if ('ArrowRight' === event.key) {
+	} else if (event.key === 'ArrowRight') {
 		next()
 	}
 }
@@ -58,7 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
 const zoom = $ref(1)
 
 function clickOutside() {
-	if (1 === zoom) {close()}
+	if (zoom === 1) { close() }
 }
 
 defineExpose({ open, close })
@@ -69,25 +69,15 @@ defineExpose({ open, close })
 		<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"
+			@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
+				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">
@@ -98,44 +88,37 @@ defineExpose({ open, close })
 						<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"
+						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)"
+						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">
+				<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">
-						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
+						<Zoomer
+							v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
+							:mouse-wheel-to-zoom="false"
+						>
 							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
 
 						<BglVideo
-							v-else-if="item?.type === 'video' && item?.src"
-							:src="item?.src"
-							autoplay
-							controls
+							v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls
 							class="vw90"
 						/>
 
-						<div
-							v-else-if="item?.type === 'pdf' && item?.src"
-							class="vw90"
-						>
+						<div v-else-if="item?.type === 'pdf' && item?.src" class="vw90">
 							<embed
-								:src="normalizeURL(item?.src)"
-								type="application/pdf"
-								width="100%"
-								height="1080"
-								:title="item?.name"
-								class="vw90"
+								:src="normalizeURL(item?.src)" type="application/pdf" width="100%" height="1080"
+								:title="item?.name" class="vw90"
 							>
 						</div>
 						<div v-else class="vw90">
@@ -164,30 +147,19 @@ defineExpose({ open, close })
 					</template>
 				</Carousel>
 				<div
-					v-if="group && group.length > 1"
-					class="flex justify-content-center mt-2 overflow
+					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"
-					>
+					<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)"
+							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)"
+							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>
@@ -200,15 +172,18 @@ defineExpose({ open, close })
 .bgl-lightbox:has(.bgl_vid) {
 	width: 90vw;
 }
+
 .bgl-lightbox:has(.vid_short) {
 	width: auto;
 	aspect-ratio: 9/16;
 	height: 90vh;
 }
+
 .bgl-lightbox:has(.vid_short) .bgl-lightbox-item * {
-    max-height:unset !important;
+	max-height: unset !important;
 }
-.lightbox-image{
+
+.lightbox-image {
 	object-fit: contain;
 	width: fit-content;
 }
@@ -221,18 +196,19 @@ defineExpose({ open, close })
 	max-height: 90%;
 }
 
-.bgl-lightbox-item{
+.bgl-lightbox-item {
 	animation: 500ms ease bgl-lightbox-load;
 }
+
 @keyframes bgl-lightbox-load {
-  from {
-    scale:0.7;
-  }
+	from {
+		scale: 0.7;
+	}
 
-  to {
-	scale:1;
+	to {
+		scale: 1;
 
-  }
+	}
 }
 
 .bgl-lightbox-item * {
@@ -248,6 +224,14 @@ defineExpose({ open, close })
 	height: calc(100vh - 90px);
 }
 
+.bgl-lightbox-item.zoomed {
+	pointer-events: none;
+}
+
+.bgl-lightbox-item.zoomed .vue-zoomer {
+	pointer-events: auto;
+}
+
 .navigation {
 	top: 50%;
 	transform: translateY(-50%);
@@ -257,9 +241,11 @@ defineExpose({ open, close })
 	height: 50px;
 	width: 50px;
 }
+
 .thumbnail:hover {
 	opacity: 1;
 }
+
 .thumbnail:active {
 	opacity: 0.8;
 }
@@ -268,18 +254,21 @@ defineExpose({ open, close })
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info{
+
+.file-info {
 	max-width: 420px
 }
+
 @media screen and (max-width: 910px) {
-	.file-info{
-	max-width: 220px;
-	text-align: center !important;
-}
-.file-info *{
-	text-align: center !important;
-	margin-inline: 0 !important;
-	max-width: 100% !important;
-}
+	.file-info {
+		max-width: 220px;
+		text-align: center !important;
+	}
+
+	.file-info * {
+		text-align: center !important;
+		margin-inline: 0 !important;
+		max-width: 100% !important;
+	}
 }
 </style>