@bagelink/vue 1.17.6 → 1.18.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.17.6",
+  "version": "1.18.7",
   "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/form/inputs/RichText/index.vue

@@ -30,6 +30,7 @@ import {
 import type { BagelInputShellProps } from '../bagelInputShell'
 import { useBagelInputShell } from '../bagelInputShell'
 import { RICH_TEXT_EXTENSION_REGISTRY_KEY } from './richTextExtensions'
+import { normalizeRichTextLink, sanitizeRichTextLinks } from './utils/linkPolicy'
 
 // Disable automatic inheritance of non-prop attributes
 defineOptions({
@@ -696,7 +697,7 @@ function showTooltipMessage(message: string, x?: number, y?: number) {
 function openLinkModal(selection: Selection, range: Range, existingLink: HTMLAnchorElement | null) {
 	pendingLinkData = { selection, range, existingLink }
 	linkForm.value = {
-		url: existingLink?.href || '',
+		url: existingLink?.getAttribute('href') || '',
 		title: existingLink?.getAttribute('title') || '',
 		openInNewTab: existingLink?.target !== '_self'
 	}
@@ -705,17 +706,19 @@ function openLinkModal(selection: Selection, range: Range, existingLink: HTMLAnc
 
 // Function to submit link
 function submitLink() {
-	if (!pendingLinkData || !linkForm.value.url) { return }
+	const normalizedUrl = normalizeRichTextLink(linkForm.value.url)
+	if (!pendingLinkData || !normalizedUrl) { return }
 
 	const { selection, range, existingLink } = pendingLinkData
-	const { url, title, openInNewTab } = linkForm.value
+	const { title, openInNewTab } = linkForm.value
 	const { doc } = editor.state
 
 	if (!doc) { return }
+	linkForm.value.url = normalizedUrl
 
 	if (existingLink) {
 		// Update existing link
-		existingLink.href = url
+		existingLink.setAttribute('href', normalizedUrl)
 		if (title.trim()) {
 			existingLink.title = title.trim()
 		} else {
@@ -731,7 +734,7 @@ function submitLink() {
 		// Create new link
 		try {
 			const anchor = doc.createElement('a')
-			anchor.href = url
+			anchor.setAttribute('href', normalizedUrl)
 			if (title.trim()) {
 				anchor.title = title.trim()
 			}
@@ -766,14 +769,8 @@ function submitLink() {
 
 // Function to visit link
 function visitLink() {
-	if (!linkForm.value.url || !isValidUrl(linkForm.value.url)) { return }
-
-	let url = linkForm.value.url.trim()
-
-	// Add https:// if no protocol is specified
-	if (!url.match(/^https?:\/\//)) {
-		url = `https://${url}`
-	}
+	const url = normalizeRichTextLink(linkForm.value.url)
+	if (!url) { return }
 
 	if (linkForm.value.openInNewTab) {
 		window.open(url, '_blank', 'noopener,noreferrer')
@@ -784,20 +781,7 @@ function visitLink() {
 
 // Function to validate URL
 function isValidUrl(url: string): boolean {
-	if (!url || url.trim() === '') { return false }
-
-	try {
-		URL.canParse(url)
-		return true
-	} catch {
-		// Try with https:// prefix if it's missing
-		try {
-			URL.canParse(`https://${url}`)
-			return true
-		} catch {
-			return false
-		}
-	}
+	return normalizeRichTextLink(url) !== null
 }
 
 // Function to open image modal
@@ -931,7 +915,7 @@ function submitImage() {
 
 	// Wrap the image in an anchor when a link is provided, otherwise return the bare image
 	function createImageContent(): HTMLElement {
-		const link = imageForm.value.link?.trim()
+		const link = normalizeRichTextLink(imageForm.value.link)
 		if (!link) { return img }
 
 		const anchor = doc!.createElement('a')
@@ -2001,6 +1985,10 @@ function getCleanHTML(doc: Document | null): string {
 		if (fig.classList.length === 0) { fig.removeAttribute('class') }
 	})
 
+	// Keep imported/pasted legacy links from leaking into saved output. Invalid
+	// destinations lose their href, but their visible content is preserved.
+	sanitizeRichTextLinks(clone)
+
 	const html = clone.innerHTML
 	if (!clone.textContent?.trim() && !clone.querySelector('img, video, iframe, table, hr, figure')) {
 		return ''

package/src/components/form/inputs/RichText/utils/linkPolicy.ts

@@ -0,0 +1,48 @@
+const EXPLICIT_SAFE_URL = /^(?:https?:\/\/|mailto:|tel:)/i
+const BARE_DOMAIN = /^(?:localhost(?::\d+)?|(?:[a-z0-9-]+\.)+[a-z]{2,})(?:[/:?#][^\s]*)?$/i
+
+/**
+ * Validate and normalize a link authored in RichText.
+ *
+ * Relative application paths must be root-relative (`/contact`). Ambiguous
+ * imported CMS links (`edit?...`, `admin/...`) are rejected instead of being
+ * silently resolved against the current page.
+ */
+export function normalizeRichTextLink(value: unknown): string | null {
+	if (typeof value !== 'string') return null
+	const url = value.trim()
+	if (!url || /[\u0000-\u001F\u007F]/.test(url)) return null
+
+	if (url.startsWith('/') && !url.startsWith('//')) return url
+	if (url.startsWith('#') && url.length > 1) return url
+
+	if (EXPLICIT_SAFE_URL.test(url)) {
+		if (/^mailto:/i.test(url)) return url.slice(7).trim() ? url : null
+		if (/^tel:/i.test(url)) return url.slice(4).trim() ? url : null
+		try {
+			const parsed = new URL(url)
+			return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? url : null
+		} catch {
+			return null
+		}
+	}
+
+	return BARE_DOMAIN.test(url) ? `https://${url}` : null
+}
+
+/** Remove invalid destinations while preserving their visible linked content. */
+export function sanitizeRichTextLinks(root: ParentNode): number {
+	let removed = 0
+	for (const anchor of Array.from(root.querySelectorAll<HTMLAnchorElement>('a[href]'))) {
+		const normalized = normalizeRichTextLink(anchor.getAttribute('href'))
+		if (normalized) {
+			anchor.setAttribute('href', normalized)
+			continue
+		}
+		anchor.removeAttribute('href')
+		anchor.removeAttribute('target')
+		anchor.removeAttribute('rel')
+		removed++
+	}
+	return removed
+}

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

@@ -2,7 +2,7 @@
 import type { IconType, Option } from '../../../index'
 import type { AlignedPlacement } from '../../Dropdown.types'
 import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch, useI18n, resolveI18n } from '../../../index'
-import { computed, onMounted, ref, useId, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
 import { getOptionIcon, getOptionLabel, getOptionSubtitle, getOptionValue } from '../../../utils/options'
 import 'floating-vue/style.css'
 import type { BagelInputShellProps } from './bagelInputShell'
@@ -232,8 +232,10 @@ watch(
 watch(() => open.value, (value) => {
 	if (value) {
 		highlightedIndex.value = -1
-		// Scroll to selected item when dropdown opens
-		setTimeout(() => { scrollToSelectedItem() }, 10)
+		nextTick(() => {
+			if (props.searchable) searchInput.value?.focus()
+			scrollToSelectedItem()
+		})
 	}
 })
 

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" />

package/src/form-flow/FormFlow.vue

@@ -439,6 +439,10 @@ function getFieldProps(field: FieldBuilder, key: string) {
 		baseProps.multiline = true
 	}
 
+	if (field._type === 'datetime') {
+		baseProps.enableTime = true
+	}
+
 	if (field._type === 'multiselect') {
 		baseProps.multiselect = true
 	}