@bagelink/vue 0.0.751 → 0.0.755

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/form/inputs/TextInput.vue

@@ -186,24 +186,26 @@ onMounted(() => {
 	font-size: var(--label-font-size);
 }
 
-.textInputIconWrap {
-	position: relative;
-}
-
 .textInputIconWrap .bgl_icon-font {
-	position: absolute;
-	inset-inline-end: 0.7rem;
-	bottom: 50%;
-	line-height: 0;
 	color: var(--bgl-gray);
+	position: absolute;
+    bottom: 0px;
+    inset-inline-end: 0.25rem;
+	margin-block: calc(var(--input-height) / 2 - 16px);
+}
+.textInputIconWrap input{
+	padding-inline-end: 2rem;
 }
 
 .txtInputIconStart .iconStart {
-	position: absolute;
-	inset-inline-start: 0.7rem;
-	top: 50%;
-	line-height: 0;
 	color: var(--bgl-gray);
+	position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0.25rem;
+	margin-block: calc(var(--input-height) / 2 - 16px);
+}
+.txtInputIconStart input{
+	padding-inline-start: 2rem;
 }
 
 .txtInputIconStart textarea {

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/layout/SidebarMenu.vue

@@ -22,43 +22,45 @@ function toggleMenu() {
 </script>
 
 <template>
-	<Card
-		class="flex column gap-05 pt-1 bgl_sidebar"
-		:class="{ wideNav: isOpen }"
-	>
-		<div class="w-100 px-075">
-			<Btn
-				thin
-				color="light"
-				class="toggleNav mb-05"
-				icon="keyboard_arrow_right"
-				@click="toggleMenu"
-			/>
-		</div>
-		<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
-		<slot v-if="isOpen" name="brand-open" />
-		<slot v-if="!navLinks" />
+	<div class="vh-100 relative p-05 bgl_sidebar" :class="{ wideNav: isOpen }">
 		<Btn
-			v-for="(nav, i) in navLinks"
-			:key="i"
-			v-tooltip.right="{
-				content: nav.label,
-				disabled: open,
-				class: ['nav-tooltip'],
-			}"
-			:to="nav.to"
-			class="nav-button px-075"
+			thin
+			color="white"
+			class="mb-05 absolute toggleNav
+			 z-2 border"
+			icon="keyboard_arrow_right"
+			@click="toggleMenu"
+		/>
+		<Card
+			class="py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y "
 		>
-			<template #default>
-				<Icon :icon="nav.icon" :size="1.4" />
-				<p v-if="open">
-					{{ nav.label }}
-				</p>
-			</template>
-		</Btn>
-		<div style="flex-grow: 1" />
-		<slot name="footer" />
-	</Card>
+			<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
+			<slot v-if="isOpen" name="brand-open" />
+			<slot v-if="!navLinks" />
+			<Btn
+				v-for="(nav, i) in navLinks"
+				:key="i"
+				v-tooltip.right="{
+					content: nav.label,
+					disabled: open,
+					class: ['nav-tooltip'],
+				}"
+				:to="nav.to"
+				class="nav-button px-075 me-auto w-100"
+			>
+				<template #default>
+					<Icon :icon="nav.icon" :size="1.4" />
+					<transition name="showP">
+						<p v-if="open">
+							{{ nav.label }}
+						</p>
+					</transition>
+				</template>
+			</Btn>
+			<div style="flex-grow: 1" />
+			<slot name="footer" />
+		</Card>
+	</div>
 </template>
 
 <style>
@@ -70,34 +72,24 @@ function toggleMenu() {
 	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
-.wideNav .nav-button .bgl_btn-flex {
-	justify-content: flex-start !important;
-}
-
 .nav-button.router-link-active {
 	background: var(--bgl-popup-bg) !important;
 	color: var(--bgl-primary);
 }
+.nav-button .bgl_btn-flex{
+	justify-content: flex-start !important;
+}
 </style>
 
 <style scoped>
 .bgl_sidebar {
-	background-color: var(--bgl-primary);
-	color: var(--bgl-white);
-	overflow: hidden;
-	border-radius: var(--card-border-radius);
-	margin: 0.5rem;
-	width: calc(100% - 1rem);
-	padding: 0.5rem;
-	overflow-y: auto;
-	/* scrollbar-gutter: stable both-edges; */
-
 }
 .toggleNav {
 	height: 22px !important;
 	width: 22px !important;
-	opacity: 0.4;
 	transition: var(--bgl-transition);
+	top: 2rem;
+	inset-inline-end: -3px;
 }
 .toggleNav:hover {
 	opacity: 1;
@@ -107,11 +99,6 @@ function toggleMenu() {
 	transform: rotate(180deg);
 }
 
-.wideNav .nav-button {
-	padding-inline-start: 1rem !important;
-	width: 100%;
-}
-
 [dir='rtl'] .toggleNav {
 	transform: rotate(180deg);
 }
@@ -120,30 +107,14 @@ function toggleMenu() {
 	transform: rotate(0deg);
 }
 
-.nav-button.bgl_btn-icon {
-	border-radius: var(--btn-border-radius) !important;
+.showP-enter-active,
+.showP-leave-active {
+  transition: all 0.5s ease;
 }
 
-.nav-button p {
-	transition: var(--nav-tran);
-	animation: fade 2s;
-	animation-duration: 900ms;
-}
-
-@keyframes fade {
-	0% {
-		opacity: 0;
-		transform: translateX(-20px);
-	}
-
-	30% {
-		opacity: 0;
-		transform: translateX(-20px);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(0);
-	}
+.showP-enter-from,
+.showP-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
 }
 </style>

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/styles/bagel.css

@@ -85,6 +85,12 @@ select {
     font: inherit;
 }
 
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
 
 @media screen and (max-width: 910px) {
 

package/src/styles/buttons.css

@@ -69,6 +69,10 @@
     border: 1px solid var(--border-color);
 }
 
+.border-primary {
+    border: 1px solid var(--bgl-primary);
+}
+
 .rotate-180 {
     transform: rotate(180deg);
 }