@bagelink/vue 0.0.753 → 0.0.755

package/dist/style.css

@@ -3282,19 +3282,38 @@ tbody tr[data-v-680da9b9]:hover {
 	background: var(--bgl-gray-light);
 }
 
-.lightbox-image[data-v-0410e12d]{
+.vue-zoomer[data-v-5e5bef88] {
+  overflow: hidden;
+}
+.zoomer[data-v-5e5bef88] {
+  transform-origin: 50% 50%;
+  width: 100%;
+  height: 100%;
+}
+.zoomer > img[data-v-5e5bef88] {
+  vertical-align: top;
+  user-select: none;
+  -moz-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-drag: none;
+  -moz-user-drag: none;
+}
+
+.lightbox-image[data-v-d550287d]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-0410e12d] {
+.bgl-lightbox-overlay[data-v-d550287d] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-0410e12d] {
+.bgl-lightbox[data-v-d550287d] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-0410e12d]{
-	animation: 500ms ease bgl-lightbox-load-0410e12d;
+.bgl-lightbox-item[data-v-d550287d]{
+	animation: 500ms ease bgl-lightbox-load-d550287d;
 }
-@keyframes bgl-lightbox-load-0410e12d {
+@keyframes bgl-lightbox-load-d550287d {
 from {
     scale:0.7;
 }
@@ -3302,32 +3321,32 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-0410e12d] * {
+.bgl-lightbox-item[data-v-d550287d] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-0410e12d;
+	animation: 200ms ease bgl-lightbox-load-d550287d;
 }
-.navigation[data-v-0410e12d] {
+.navigation[data-v-d550287d] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-0410e12d] {
+.navigation-btn[data-v-d550287d] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-0410e12d] {
+.thumbnail[data-v-d550287d] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-0410e12d]:hover {
+.thumbnail[data-v-d550287d]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-0410e12d]:active {
+.thumbnail[data-v-d550287d]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-0410e12d] {
+.thumbnail.active[data-v-d550287d] {
 	opacity: 1;
 	outline: 2px solid white;
 }

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { Attributes, BglFormSchemaT } from '..';
-export declare function debounce(fn: () => void, delay?: number): void;
+export declare function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;
 export declare function keyToLabel(key?: string): string | undefined;
 export declare function copyText(text: string, cb?: (msg: string) => void): Promise<void>;
 export declare function initials(...strArr: string[]): string;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F;AAED,eAAO,MAAM,KAAK,QAAQ,MAAM,qBAA0D,CAAA;AAE1F,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAYpH;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F;AAED,eAAO,MAAM,KAAK,QAAQ,MAAM,qBAA0D,CAAA;AAE1F,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvD"}

package/dist/utils/tapDetector.d.ts

@@ -0,0 +1,30 @@
+type TapCallback = (event: {
+    clientX: number;
+    clientY: number;
+}) => void;
+export default class TapDetector {
+    private singleTapCallbacks;
+    private doubleTapCallbacks;
+    private isTouchMode;
+    private lastTapTimestamp;
+    private tappedCount;
+    private touchMovedLength;
+    private lastPointerX;
+    private lastPointerY;
+    attach(dom: HTMLElement): void;
+    detach(dom: HTMLElement): void;
+    onSingleTap(callback: TapCallback): void;
+    onDoubleTap(callback: TapCallback): void;
+    private triggerCallbacks;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onPointerDown;
+    private onPointerUp;
+    private onPointerMove;
+}
+export {};
+//# sourceMappingURL=tapDetector.d.ts.map

package/dist/utils/tapDetector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tapDetector.d.ts","sourceRoot":"","sources":["../../src/utils/tapDetector.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,CAAA;AAGxE,MAAM,CAAC,OAAO,OAAO,WAAW;IAC/B,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,gBAAgB,CAAI;IAC5B,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,gBAAgB,CAAI;IAC5B,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,YAAY,CAAI;IAExB,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAa9B,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAS9B,WAAW,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAMxC,WAAW,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAMxC,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,YAAY,CAKnB;IAED,OAAO,CAAC,WAAW,CAIlB;IAED,OAAO,CAAC,UAAU,CAEjB;IAED,OAAO,CAAC,WAAW,CAIlB;IAED,OAAO,CAAC,WAAW,CAIlB;IAED,OAAO,CAAC,SAAS,CAEhB;IAED,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,aAAa;CAOrB"}

package/package.json

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

package/src/components/Zoomer.vue

@@ -0,0 +1,377 @@
+<script lang="ts" setup>
+import { debounce } from '@bagelink/vue'
+import { onMounted, onUnmounted, watch } from 'vue'
+import TapDetector from '../utils/tapDetector'
+
+// Props interface
+interface Props {
+	minScale?: number
+	maxScale?: number
+	zoom?: number
+	resetTrigger?: number
+	aspectRatio?: number
+	backgroundColor?: string
+	pivot?: string // 'cursor' | 'image-center'
+	zoomingElastic?: boolean
+	limitTranslation?: boolean
+	doubleClickToZoom?: boolean
+	mouseWheelToZoom?: boolean
+	disabled?: boolean
+}
+
+const {
+	minScale = 1,
+	maxScale = 5,
+	zoom,
+	disabled = false,
+	aspectRatio = 1,
+	backgroundColor = 'transparent',
+	pivot = 'cursor',
+	zoomingElastic = true,
+	limitTranslation = true,
+	doubleClickToZoom = true,
+	mouseWheelToZoom = true,
+} = defineProps<Props>()
+
+const emit = defineEmits(['update:zoom'])
+// Reactive state using $ref (vue-macros)
+const zoomElement = $ref<HTMLElement | null>()
+let containerWidth = $ref(1)
+let containerHeight = $ref(1)
+let containerLeft = $ref(0)
+let containerTop = $ref(0)
+let translateX = $ref(0)
+let animTranslateX = $ref(0)
+let translateY = $ref(0)
+let animTranslateY = $ref(0)
+let _zoom = $ref(zoom || 1)
+let scale = $computed({
+	get: () => zoom === undefined ? _zoom : zoom,
+	set: (val) => {
+		_zoom = val
+		emit('update:zoom', _zoom)
+	},
+})
+
+let animScale = $ref(1)
+let lastFullWheelTime = $ref(0)
+let lastWheelTime = $ref(0)
+let lastWheelDirection = $ref<'x' | 'y'>('y')
+let isPointerDown = $ref(false)
+let pointerPosX = $ref(-1)
+let pointerPosY = $ref(-1)
+let twoFingerInitDist = $ref(0)
+let panLocked = $ref(true)
+let raf = $ref<number | null>(null)
+let tapDetector = $ref<TapDetector | null>(null)
+
+const wrapperStyle = $computed(() => {
+	const translateXValue = containerWidth * animTranslateX
+	const translateYValue = containerHeight * animTranslateY
+	return {
+		transform: [
+			`translate(${translateXValue}px, ${translateYValue}px)`,
+			`scale(${animScale})`,
+		].join(' '),
+	}
+})
+
+watch(() => scale, (newScale) => {
+	const { x, y } = calcTranslateLimit()
+	translateX = Math.max(-x, Math.min(x, translateX))
+	translateY = Math.max(-y, Math.min(y, translateY))
+	if (newScale !== 1) {
+		panLocked = false
+	}
+})
+
+function reset() {
+	scale = 1
+	panLocked = true
+	translateX = 0
+	translateY = 0
+}
+
+defineExpose({ reset })
+
+function tryToScale(scaleDelta: number) {
+	if (disabled) return
+	let newScale = scale * scaleDelta
+	if (zoomingElastic) {
+		if (newScale < minScale! || newScale > maxScale!) {
+			let log = Math.log2(scaleDelta)
+			log *= 0.2
+			scaleDelta = 2 ** log
+			newScale = scale * scaleDelta
+		}
+	} else {
+		if (newScale < minScale!) newScale = minScale!
+		else if (newScale > maxScale!) newScale = maxScale!
+	}
+	scaleDelta = newScale / scale
+	scale = newScale
+	if (pivot !== 'image-center') {
+		const normMousePosX = (pointerPosX - containerLeft) / containerWidth
+		const normMousePosY = (pointerPosY - containerTop) / containerHeight
+		translateX = (0.5 + translateX - normMousePosX) * scaleDelta + normMousePosX - 0.5
+		translateY = (0.5 + translateY - normMousePosY) * scaleDelta + normMousePosY - 0.5
+	}
+}
+
+function setPointerPosCenter() {
+	pointerPosX = containerLeft + containerWidth / 2
+	pointerPosY = containerTop + containerHeight / 2
+}
+
+function onPointerMove(newMousePosX: number, newMousePosY: number) {
+	if (isPointerDown) {
+		const pixelDeltaX = newMousePosX - pointerPosX
+		const pixelDeltaY = newMousePosY - pointerPosY
+		if (!panLocked) {
+			const translateLimit = calcTranslateLimit()
+			const maxTranslateX = translateLimit.x
+			const maxTranslateY = translateLimit.y
+			const newTranslateX = translateX + pixelDeltaX / containerWidth
+			const newTranslateY = translateY + pixelDeltaY / containerHeight
+			translateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+			translateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+		}
+	}
+	pointerPosX = newMousePosX
+	pointerPosY = newMousePosY
+}
+
+function onInteractionEnd() {
+	debounce(() => {
+		limit()
+		panLocked = scale === 1
+	}, 100)
+}
+
+function limit() {
+	if (scale < minScale!) {
+		scale = minScale!
+	} else if (scale > maxScale!) {
+		tryToScale(maxScale! / scale)
+	}
+
+	if (limitTranslation) {
+		const translateLimit = calcTranslateLimit()
+		if (Math.abs(translateX) > translateLimit.x) {
+			translateX *= translateLimit.x / Math.abs(translateX)
+		}
+		if (Math.abs(translateY) > translateLimit.y) {
+			translateY *= translateLimit.y / Math.abs(translateY)
+		}
+	}
+}
+
+function calcTranslateLimit() {
+	if (getMarginDirection() === 'y') {
+		const imageToContainerRatio = containerWidth / aspectRatio / containerHeight
+		let translateLimitY = (scale * imageToContainerRatio - 1) / 2
+		if (translateLimitY < 0) translateLimitY = 0
+		return { x: (scale - 1) / 2, y: translateLimitY }
+	} else {
+		const imageToContainerRatio = containerHeight * aspectRatio / containerWidth
+		let translateLimitX = (scale * imageToContainerRatio - 1) / 2
+		if (translateLimitX < 0) translateLimitX = 0
+		return { x: translateLimitX, y: (scale - 1) / 2 }
+	}
+}
+
+function getMarginDirection() {
+	const containerRatio = containerWidth / containerHeight
+	return containerRatio > aspectRatio ? 'x' : 'y'
+}
+
+function onMouseWheel(ev: WheelEvent) {
+	if (!mouseWheelToZoom) return
+	ev.preventDefault()
+	const currTime = Date.now()
+	if (Math.abs(ev.deltaY) === 120) {
+		if (currTime - lastFullWheelTime > 50) {
+			onMouseWheelDo(ev.deltaY)
+			lastFullWheelTime = currTime
+		}
+	} else {
+		if (currTime - lastWheelTime > 50) {
+			lastWheelDirection = ev.deltaX > ev.deltaY ? 'x' : 'y'
+			if (lastWheelDirection === 'y') {
+				onMouseWheelDo(ev.deltaY)
+			}
+		}
+		lastWheelTime = currTime
+	}
+}
+
+function onMouseWheelDo(wheelDelta: number) {
+	const scaleDelta = 1.25 ** (wheelDelta / 120)
+	tryToScale(scaleDelta)
+	onInteractionEnd()
+}
+
+function onMouseDown(ev: MouseEvent) {
+	refreshContainerPos()
+	isPointerDown = true
+	pointerPosX = ev.clientX
+	pointerPosY = ev.clientY
+	document.addEventListener('mousemove', onMouseMove)
+	document.addEventListener('mouseup', onMouseUp)
+}
+
+function onMouseUp() {
+	isPointerDown = false
+	onInteractionEnd()
+	document.removeEventListener('mouseup', onMouseUp)
+	document.removeEventListener('mousemove', onMouseMove)
+}
+
+function onMouseMove(ev: MouseEvent) {
+	onPointerMove(ev.clientX, ev.clientY)
+}
+
+function onTouchStart(ev: TouchEvent) {
+	if (ev.touches.length === 1) {
+		refreshContainerPos()
+		pointerPosX = ev.touches[0].clientX
+		pointerPosY = ev.touches[0].clientY
+		isPointerDown = true
+	} else if (ev.touches.length === 2) {
+		isPointerDown = true
+		pointerPosX = (ev.touches[0].clientX + ev.touches[1].clientX) / 2
+		pointerPosY = (ev.touches[0].clientY + ev.touches[1].clientY) / 2
+		const distX = ev.touches[0].clientX - ev.touches[1].clientX
+		const distY = ev.touches[0].clientY - ev.touches[1].clientY
+		twoFingerInitDist = Math.sqrt(distX * distX + distY * distY)
+	}
+	document.addEventListener('touchend', onTouchEnd)
+}
+
+function onTouchEnd(ev: TouchEvent) {
+	if (ev.touches.length === 0) {
+		isPointerDown = false
+		if (Math.abs(scale - 1) < 0.1) scale = 1
+		onInteractionEnd()
+	} else if (ev.touches.length === 1) {
+		pointerPosX = ev.touches[0].clientX
+		pointerPosY = ev.touches[0].clientY
+	}
+	document.removeEventListener('touchend', onTouchEnd)
+}
+
+function onTouchMove(ev: TouchEvent) {
+	if (ev.touches.length === 1) {
+		onPointerMove(ev.touches[0].clientX, ev.touches[0].clientY)
+	} else if (ev.touches.length
+
+		=== 2) {
+		const distX = ev.touches[0].clientX - ev.touches[1].clientX
+		const distY = ev.touches[0].clientY - ev.touches[1].clientY
+		const newTwoFingerDist = Math.sqrt(distX * distX + distY * distY)
+		tryToScale(newTwoFingerDist / twoFingerInitDist)
+		twoFingerInitDist = newTwoFingerDist
+	}
+}
+
+function refreshContainerPos() {
+	if (zoomElement) {
+		const rect = zoomElement.getBoundingClientRect()
+		containerLeft = rect.left
+		containerTop = rect.top
+	}
+}
+
+function loop() {
+	animScale = gainOn(animScale, scale)
+	animTranslateX = gainOn(animTranslateX, translateX)
+	animTranslateY = gainOn(animTranslateY, translateY)
+	raf = window.requestAnimationFrame(loop)
+}
+
+function gainOn(from: number, to: number) {
+	const delta = (to - from) * 0.3
+	return Math.abs(delta) > 1e-5 ? from + delta : to
+}
+
+// Lifecycle hooks
+onMounted(() => {
+	tapDetector = new TapDetector()
+	if (zoomElement) tapDetector.attach(zoomElement)
+	if (doubleClickToZoom) {
+		tapDetector.onDoubleTap(onDoubleTap as any)
+	}
+	window.addEventListener('resize', onWindowResize)
+	onWindowResize()
+	refreshContainerPos()
+	loop()
+})
+
+onUnmounted(() => {
+	if (zoomElement) tapDetector?.detach(zoomElement)
+	window.removeEventListener('resize', onWindowResize)
+	if (raf) window.cancelAnimationFrame(raf)
+})
+
+function onDoubleTap(ev: MouseEvent) {
+	if (scale === 1) {
+		if (ev.clientX > 0) {
+			pointerPosX = ev.clientX
+			pointerPosY = ev.clientY
+		}
+		tryToScale(Math.min(3, maxScale!))
+	} else {
+		reset()
+	}
+}
+
+function onWindowResize() {
+	if (zoomElement) {
+		const styles = window.getComputedStyle(zoomElement)
+		containerWidth = Number.parseFloat(styles.width)
+		containerHeight = Number.parseFloat(styles.height)
+		setPointerPosCenter()
+		limit()
+	}
+}
+</script>
+
+<template>
+	<div
+		ref="zoomElement"
+		class="vue-zoomer"
+		:style="{ backgroundColor }"
+		@mousewheel="onMouseWheel"
+		@DOMMouseScroll="onMouseWheel"
+		@mousedown="onMouseDown"
+		@mouseout="setPointerPosCenter"
+		@focusout="setPointerPosCenter"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+	>
+		<div class="zoomer" :style="wrapperStyle">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.vue-zoomer {
+  overflow: hidden;
+}
+.zoomer {
+  transform-origin: 50% 50%;
+  width: 100%;
+  height: 100%;
+}
+.zoomer > img {
+  vertical-align: top;
+  user-select: none;
+  -moz-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-drag: none;
+  -moz-user-drag: none;
+}
+</style>

package/src/components/index.ts

@@ -30,3 +30,4 @@ export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as TableSchema } from './TableSchema.vue'
 export { default as Title } from './Title.vue'
 export { default as TopBar } from './TopBar.vue'
+export { default as Zoomer } from './Zoomer.vue'

package/src/components/lightbox/Lightbox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { BglVideo, Btn, Icon } from '@bagelink/vue'
+import { BglVideo, Btn, Icon, Zoomer } from '@bagelink/vue'
 import { watch } from 'vue'
+
 import type { LightboxItem } from './lightbox.types'
 
 let isOpen = $ref(false)
@@ -62,6 +63,12 @@ function handleKeydown(event: KeyboardEvent) {
 	}
 }
 
+const zoom = $ref(1)
+
+function clickOutside() {
+	if (zoom === 1) close()
+}
+
 defineExpose({ open, close })
 </script>
 
@@ -73,7 +80,7 @@ defineExpose({ open, close })
 			@keydown.esc="close"
 			@keydown.left="prev"
 			@keydown.right="next"
-			@click="close"
+			@click="clickOutside"
 		>
 			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute">
 				<Btn
@@ -81,6 +88,7 @@ defineExpose({ open, close })
 					icon="arrow_back"
 					@click="prev"
 				/>
+
 				<Btn
 					class="navigation-btn oval"
 					icon="arrow_forward"
@@ -88,10 +96,26 @@ defineExpose({ open, close })
 				/>
 			</div>
 			<div class="bgl-lightbox relative txt-center" @click.stop>
-				<Btn flat class="fixed top-1 start-1 color-white" icon="close" @click="close" />
+				<div class="flex start fixed top-1 w-100 space-between">
+					<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" class="color-white" round thin flat icon.end="arrow_outward"
+						value="Open File"
+						:href="currentItem?.src"
+						target="_blank"
+					/>
+					<div v-else />
+				</div>
 				<div class="bgl-lightbox-item">
 					<template v-if="currentItem?.type === 'image'">
-						<img :src="currentItem?.src" alt="Preview" class="vw90 lightbox-image">
+						<Zoomer v-model:zoom="zoom" :disabled="!currentItem?.enableZoom" :mouse-wheel-to-zoom="false">
+							<img :draggable="false" :src="currentItem?.src" alt="Preview" class="vw90 lightbox-image">
+						</Zoomer>
 					</template>
 					<template v-else-if="currentItem?.type === 'video'">
 						<BglVideo

package/src/components/lightbox/index.ts

@@ -43,10 +43,10 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 }
 
 function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem {
-	let { group, src, type, name, thumbnail } = binding.value || {}
+	let { group, src, type, name, thumbnail, enableZoom, openFile } = binding.value || {}
 	src = src || binding.value || el.getAttribute('src') || ''
 	type = type || determineFileType(src)
-	return { src, type, name, thumbnail, group }
+	return { src, type, name, thumbnail, group, enableZoom,	openFile }
 }
 
 const youtubeRegex = /youtube\.com|youtu\.be/

package/src/components/lightbox/lightbox.types.ts

@@ -4,4 +4,6 @@ export interface LightboxItem {
 	name: string
 	thumbnail?: string
 	group?: string
+	enableZoom?: boolean
+	openFile?: boolean
 }

package/src/utils/index.ts

@@ -1,9 +1,17 @@
 import type { Attributes, BglFormSchemaT } from '@bagelink/vue'
 
-let timeout: any
-export function debounce(fn: () => void, delay = 500) {
-	clearTimeout(timeout)
-	timeout = setTimeout(fn, delay)
+export function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void {
+	let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+	return function (...args: Parameters<T>) {
+		if (timeoutId) {
+			clearTimeout(timeoutId)
+		}
+
+		timeoutId = setTimeout(() => {
+			func(...args)
+		}, wait)
+	}
 }
 
 export function keyToLabel(key?: string): string | undefined {