@bagelink/vue 1.18.3 → 1.19.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.18.3",
+  "version": "1.19.1",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

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

@@ -335,7 +335,7 @@ onMounted(() => {
 				<template #trigger>
 					<div ref="datePickerRef" class="date-picker-container">
 						<TextInput
-							v-model="inputValue" iconStart="calendar"
+							v-model="inputValue" iconStart="calendar_month"
 							:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || defaultPlaceholder)"
 							:required="underlined ? false : required" :disabled="!isEditable"
 							:error="!isValid ? $t('date.invalidFormat') : error"

package/src/components/layout/AppContent.vue

@@ -329,7 +329,7 @@ flex-shrink: 0;
 box-sizing: border-box;
 min-height: var(--bgl-app-header-h, 60px);
 gap: 0.5rem 0.75rem;
-padding-inline: calc(var(--bgl-content-padding, 1rem) + 0.05rem);
+padding-inline: var(--bgl-content-padding, 1rem);
 padding-block: 0.5rem;
 flex-wrap: wrap;
 }

package/src/components/lightbox/AssetPreview.test.ts

@@ -0,0 +1,37 @@
+// @bun
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { createI18n } from '../../i18n'
+import AssetPreview from './AssetPreview.vue'
+
+createI18n()
+
+afterEach(() => {
+	vi.restoreAllMocks()
+})
+
+describe('AssetPreview protected delivery', () => {
+	it('uses the provided authenticated loader and revokes its object URL', async () => {
+		const createObjectURL = vi.fn(() => 'blob:protected')
+		const revokeObjectURL = vi.fn()
+		Object.defineProperties(URL, {
+			createObjectURL: { configurable: true, value: createObjectURL },
+			revokeObjectURL: { configurable: true, value: revokeObjectURL },
+		})
+		const load = vi.fn(async () => new Blob(['protected']))
+		const wrapper = mount(AssetPreview, {
+			props: { asset: { asset_id: 'asset-1' }, type: 'file', load },
+			global: { stubs: { BglBtn: { props: ['href'], template: '<a :href="href"><slot /></a>' } } },
+		})
+		await nextTick()
+		await nextTick()
+
+		expect(load).toHaveBeenCalledWith({ asset_id: 'asset-1' })
+		expect(createObjectURL).toHaveBeenCalledOnce()
+		expect(wrapper.get('a').attributes('href')).toBe('blob:protected')
+
+		wrapper.unmount()
+		expect(revokeObjectURL).toHaveBeenCalledWith('blob:protected')
+	})
+})

package/src/components/lightbox/AssetPreview.vue

@@ -1,13 +1,54 @@
 <script setup lang="ts">
 import { useAssetDelivery, type AssetReference } from '../../assets'
 import { Btn, Image } from '../../index'
-const props = defineProps<{ asset: AssetReference, type: string, name?: string }>()
-const { url, error, onError } = useAssetDelivery(() => props.asset)
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+	asset: AssetReference
+	type: string
+	name?: string
+	/** Authenticated byte loader for protected assets. Public assets omit it. */
+	load?: (asset: AssetReference) => Promise<Blob>
+}>()
+const publicDelivery = useAssetDelivery(() => props.load ? undefined : props.asset)
+const protectedUrl = ref<string>()
+const protectedError = ref(false)
+let generation = 0
+
+function clearProtectedUrl() {
+	if (protectedUrl.value) URL.revokeObjectURL(protectedUrl.value)
+	protectedUrl.value = undefined
+}
+
+watch(() => [props.asset.asset_id, props.load] as const, async () => {
+	const current = ++generation
+	clearProtectedUrl()
+	protectedError.value = false
+	if (!props.load) return
+	try {
+		const blob = await props.load(props.asset)
+		if (current === generation) protectedUrl.value = URL.createObjectURL(blob)
+	} catch {
+		if (current === generation) protectedError.value = true
+	}
+}, { immediate: true })
+
+onUnmounted(() => {
+	generation++
+	clearProtectedUrl()
+})
+
+const url = computed(() => protectedUrl.value ?? publicDelivery.url.value)
+const error = computed(() => protectedError.value || publicDelivery.error.value)
+const onError = () => {
+	if (props.load) protectedError.value = true
+	else publicDelivery.onError()
+}
 </script>
 
 <template>
 	<div class="flex column gap-1">
-		<Image v-if="type === 'image'" :src="asset" />
+		<Image v-if="type === 'image' && (!load || url)" :src="load ? url : asset" @error="onError" />
 		<video v-else-if="type === 'video' && url" :src="url" controls @error="onError" />
 		<iframe v-else-if="type === 'pdf' && url" :src="url" :title="name || 'PDF preview'" referrerpolicy="no-referrer" />
 		<Btn v-if="url" :href="url" target="_blank" rel="noopener noreferrer" value="Open / download" />