@bagelink/vue 0.0.753 → 0.0.757

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/RadioGroup.vue

@@ -26,7 +26,7 @@ const selectedOption = defineModel('modelValue')
 		<label
 			v-for="opt in options"
 			:key="opt.id"
-			class="border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
+			class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
 			:for="opt.id"
 		>
 			<input
@@ -40,7 +40,7 @@ const selectedOption = defineModel('modelValue')
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img
 					v-if="opt.imgSrc"
-					class="bg-popup shadow-light py-025 rounded m_w40"
+					class="bg-popup shadow-light py-025 radius-05 m_w40"
 					width="60"
 					:src="opt.imgSrc"
 					:alt="opt.imgAlt"

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -67,7 +67,7 @@ function handleSelectChange(selectedOption: string) {
 				thin
 				flat
 				:class="action.class"
-				class="rounded"
+				class="radius-05"
 				:aria-label="action.name"
 				:icon="action.icon"
 				@click="emit('action', action.name)"

package/src/components/form/inputs/RichText2/index.vue

@@ -134,10 +134,10 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-	<div class="rich-text-editor round pt-05 px-1 pb-1">
+	<div class="rich-text-editor rounded pt-05 px-1 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
 		<div class="editor-container flex flex-stretch gap-1 m_column">
-			<div class="content-area rounded p-1 shadow-light w-100 grid">
+			<div class="content-area radius-05 p-1 shadow-light w-100 grid">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
@@ -151,7 +151,7 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code v-if="isSplitView" class="preview-area  w-100 rounded p-1">{{ contentHtml }}</code>
+			<code v-if="isSplitView" class="preview-area  w-100 radius-05 p-1">{{ contentHtml }}</code>
 		</div>
 	</div>
 </template>

package/src/components/form/inputs/ToggleInput.vue

@@ -26,7 +26,7 @@ onMounted(() => {
 		:class="{ small }"
 	>
 		<div class="switch" :class="{ checked }">
-			<span class="slider round" />
+			<span class="slider rounded" />
 		</div>
 
 		<input

package/src/components/formkit/Toggle.vue

@@ -14,7 +14,7 @@ const inputVal = defineModel('modelValue', {
 	<div class="bagel-input checkbox" :title="label">
 		<label class="switch">
 			<input :id="id" v-model="inputVal" type="checkbox">
-			<span class="slider round" />
+			<span class="slider rounded" />
 		</label>
 	</div>
 </template>

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

@@ -32,7 +32,7 @@ function toggleMenu() {
 			@click="toggleMenu"
 		/>
 		<Card
-			class="py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y "
+			class="py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y "
 		>
 			<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
 			<slot v-if="isOpen" name="brand-open" />

package/src/components/layout/Tabs.vue

@@ -8,6 +8,7 @@ import { useTabs } from './tabsManager'
 const props = defineProps<{
 	tabs: Tab[]
 	modelValue?: string
+	flat?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -19,13 +20,15 @@ const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
 
 const slctTab = $computed({
 	get: () => props.modelValue || tabValue(props.tabs[0]),
-	set: (value) => { emit('update:modelValue', value) },
+	set: value => {
+		emit('update:modelValue', value)
+	},
 })
 
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
-			tab => tabValue(tab) === currentTab.value,
+			tab => tabValue(tab) === currentTab.value
 		)
 		if (currentTabIndex === -1) return null
 		const slotChildren = slots.default?.()[1]?.children
@@ -37,7 +40,7 @@ const tabComponent = defineComponent({
 
 z
 <template>
-	<TabsNav v-model="slctTab" :tabs :group class="mb-05" />
+	<TabsNav v-model="slctTab" :flat :tabs :group class="mb-05" />
 	<div v-if="currentTab">
 		<template v-if="slots[currentTab]">
 			<slot :name="currentTab" />

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
@@ -131,7 +155,7 @@ defineExpose({ open, close })
 						<img
 							v-if="item.type === 'image'"
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							:src="item.src"
 							alt=""
 							:class="{ active: currentIndex === index }"
@@ -140,7 +164,7 @@ defineExpose({ open, close })
 						<Icon
 							v-else
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							icon="description"
 							:class="{ active: currentIndex === index }"
 							@click="selectItem(index)"

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/layout.css

@@ -11,18 +11,34 @@
     height: 100vh;
 }
 
+
 .round {
+    border-radius: 1000px;
+}
+
+.rounded,
+.radius,
+.radius-1 {
     border-radius: var(--btn-border-radius) !important;
 }
 
-.rounded {
+.radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }
 
-.round-extra {
+.radius-2 {
     border-radius: calc(var(--btn-border-radius) * 2) !important;
 }
 
+.radius-3 {
+    border-radius: calc(var(--btn-border-radius) * 3) !important;
+}
+
+.radius-4 {
+    border-radius: calc(var(--btn-border-radius) * 4) !important;
+}
+
+
 .round-none {
     border-radius: 0;
 }

package/src/styles/mobilLayout.css

@@ -35,17 +35,31 @@
     }
 
     .m_round {
+        border-radius: 1000px;
+    }
+
+    .m_rounded,
+    .m_radius,
+    .m_radius-1 {
         border-radius: var(--btn-border-radius) !important;
     }
 
-    .m_rounded {
+    .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
 
-    .m_round-extra {
+    .m_radius-2 {
         border-radius: calc(var(--btn-border-radius) * 2) !important;
     }
 
+    .m_radius-3 {
+        border-radius: calc(var(--btn-border-radius) * 3) !important;
+    }
+
+    .m_radius-4 {
+        border-radius: calc(var(--btn-border-radius) * 4) !important;
+    }
+
     .m_round-none {
         border-radius: 0 !important;
     }

package/src/utils/BagelFormUtils.ts

@@ -160,7 +160,7 @@ export function numField(
 export function frmRow(...children: Field[]) {
 	return {
 		$el: 'div',
-		class: 'flex gap-1 m_block',
+		class: 'flex gap-1 m_block align-items-end',
 		children,
 	}
 }