@bagelink/vue 0.0.1232 → 0.0.1236

package/package.json

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

package/src/components/Image.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon } from '@bagelink/vue'
-import { watch, computed } from 'vue'
+import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
+import { watch } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -22,15 +22,10 @@ const props = defineProps<ImageProps>()
 let imageSrc = $ref<string | null>(null)
 let loadingError = $ref(false)
 
-const fileBaseUrl = computed(() => 'https://files.bagel.design')
-
 function getImageUrl(): string | null {
 	if (!props.src && !props.pathKey) return null
 	if (props.src) return props.src
-	if (props.pathKey?.startsWith('static/')) {
-		return `${import.meta.env.VITE_BAGEL_BASE_URL}/${props.pathKey}`
-	}
-	return `${fileBaseUrl.value}/${props.pathKey}`
+	return pathKeyToURL(props.pathKey)
 }
 
 async function getCachedImage(url: string): Promise<string | null> {

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BglFile, QueueFile } from './upload.types'
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image, pathKeyToURL } from '@bagelink/vue'
 import { watch } from 'vue'
 import { files } from './upload'
 
@@ -33,8 +33,6 @@ const bagel = useBagel()
 
 files.setBaseUrl(bagel.host)
 
-const fileBaseUrl = $computed(() => (props.baseURL || bagel.fileBaseUrl || 'https://files.bagel.design').replace(/\/$/, ''))
-const pathToUrl = (path_key: string) => `${fileBaseUrl}/${path_key}`
 const fileQueue = $ref<QueueFile[]>([])
 let storageFiles = $ref<BglFile[]>([])
 const pk = $ref<string[]>([props.modelValue].flat().filter(Boolean) as string[])
@@ -184,13 +182,13 @@ watch(() => props.dirPath, () => {
 							icon="download"
 							flat
 							thin
-							:href="pathToUrl(path_key)"
+							:href="pathKeyToURL(path_key)"
 							:download="path_key.split('/').pop()"
 						/>
 						<div class="flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1 ">
 							<Icon icon="draft" :size="1.5" />
 							<p
-								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 							>
 								{{ path_key.split('/').pop() }}
@@ -227,7 +225,7 @@ watch(() => props.dirPath, () => {
 					<div
 						v-for="path_key in pathKeys"
 						:key="path_key"
-						v-lightbox="{ src: pathToUrl(path_key), download: true }"
+						v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 						class="multi-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
@@ -308,13 +306,13 @@ watch(() => props.dirPath, () => {
 								color="gray"
 								thin
 								icon="download"
-								:href="pathToUrl(path_key)"
+								:href="pathKeyToURL(path_key)"
 								:download="path_key.split('/').pop()"
 							/>
 						</div>
 						<div v-if="isImage(path_key)" class="h-100">
 							<Image
-								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 
 								class="single-preview"
 								:pathKey="path_key"
@@ -323,7 +321,7 @@ watch(() => props.dirPath, () => {
 						</div>
 						<Icon
 							v-else
-							v-lightbox="{ src: pathToUrl(path_key), download: true }"
+							v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 							:size="4"
 							weight="2"
 							icon="description"

package/src/components/lightbox/Lightbox.vue

@@ -117,7 +117,7 @@ defineExpose({ open, close })
 				<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">
-							<Image :draggable="false" :src="item?.src" :pathKey="item?.pathKey" alt="Preview" class="vw90 lightbox-image" />
+							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
 
 						<BglVideo

package/src/components/lightbox/index.ts

@@ -1,6 +1,6 @@
 import type { App, Directive, DirectiveBinding } from 'vue'
 import type { LightboxItem } from './lightbox.types'
-import { IMAGE_FORMATS_REGEXP, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
+import { IMAGE_FORMATS_REGEXP, pathKeyToURL, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
 import { createApp } from 'vue'
 import Lightbox from './Lightbox.vue'
 
@@ -48,8 +48,8 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 }
 
 function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem {
-	let { group, src, type, name, thumbnail, enableZoom, openFile, download } = binding.value || {}
-	src = src || binding.value || el.getAttribute('src') || ''
+	let { group, src, type, name, thumbnail, enableZoom, openFile, download, pathKey } = binding.value || {}
+	src = src || pathKeyToURL(pathKey) || binding.value || el.getAttribute('src') || ''
 	type = type || determineFileType(src)
 	name = name || urlToName(src) || el.getAttribute('alt') || ''
 	return { src, type, name, thumbnail, group, enableZoom,	openFile, download }

package/src/utils/index.ts

@@ -168,3 +168,13 @@ export { useLang } from './lang'
 
 export { formatString } from './strings'
 export { useDebounceFn } from '@vueuse/core'
+
+const fileBaseUrl = (import.meta.env.VITE_FILE_BASE_URL || 'https://files.bagel.design').replace(/\/$/, '')
+const bagelBaseUrl = import.meta.env.VITE_BAGEL_BASE_URL
+
+export function pathKeyToURL(pathKey?: string) {
+	if (pathKey?.startsWith('static/')) {
+		return `${bagelBaseUrl}/${pathKey}`
+	}
+	return `${fileBaseUrl}/${pathKey}`
+}