@bagelink/vue 1.15.78 → 1.15.82

package/package.json

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

package/src/components/Card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglCard' })
+import type { GradientDirProp, GradientProp } from '@bagelink/vue'
 import { computed } from 'vue'
+import { useGradientVariant } from '@bagelink/vue'
 
 const props = defineProps<{
 	label?: string
@@ -17,6 +19,13 @@ const props = defineProps<{
 	overflowX?: boolean
 	overflowY?: boolean
 	frame?: boolean
+	/** Theme tone used as the gradient's first stop (e.g. `color="green"`). */
+	color?: string
+	/** Paint the card with a gradient. `true` = auto (a darker shade of `color`);
+	    a tone list like "green" or "blue purple pink" sets explicit stops. */
+	gradient?: GradientProp
+	/** Gradient direction — a named dir (`to-br`) or an angle in degrees. */
+	gradientDir?: GradientDirProp
 	bg?:
 		| 'gray'
 		| 'light'
@@ -31,6 +40,16 @@ const props = defineProps<{
 		| 'transparent'
 }>()
 
+const { isGradient, gradientStyle } = useGradientVariant({
+	gradient: () => props.gradient,
+	gradientDir: () => props.gradientDir,
+	color: () => props.color,
+})
+
+// A `pair-*` class is required to activate the `.gradient` paint rule. Mirror
+// Btn: default to the auto case (primary) when no color is given.
+const pairClass = computed(() => isGradient.value ? `pair-${props.color || 'primary'}` : undefined)
+
 const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (props.href !== undefined && props.href !== '') { obj.href = props.href }
@@ -47,7 +66,7 @@ const is = computed(() => {
 
 <template>
 	<component
-		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
+		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="[{
 			thin,
 			'border bg-transparent': outline,
 			'h-100': h100,
@@ -55,7 +74,8 @@ const is = computed(() => {
 			'overflow-x': overflowX,
 			'overflow-y': overflowY,
 			'card_frame': frame,
-		}"
+			'gradient': isGradient,
+		}, pairClass]" :style="gradientStyle"
 	>
 		<span v-if="label" class="card_label block label">
 			{{ label }}

package/src/components/Image.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglImage', inheritAttrs: true })
-import { Skeleton, normalizeDimension, appendScript, awaitGlobal, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
-import { computed, ref, useSlots, watch } from 'vue'
+import { Skeleton, normalizeDimension, Icon, useImageSrc } from '@bagelink/vue'
+import { computed, useSlots } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -23,85 +23,9 @@ interface ImageProps {
 	rounded?: boolean | number
 }
 
-declare global {
-	interface Window {
-		heic2any: any
-	}
-}
-
 const props = defineProps<ImageProps>()
 
-const imageSrc = ref<string | undefined>(undefined)
-const loadingError = ref(false)
-
-function getImageUrl(): string | undefined {
-	if ((props.src === undefined || props.src === '') && (props.pathKey === undefined || props.pathKey === '') && (props.modelValue === undefined || props.modelValue === '')) { return }
-	return pathKeyToURL(props.src ?? props.pathKey ?? props.modelValue)
-}
-
-async function getCachedImage(url: string): Promise<string | undefined> {
-	if (!('caches' in window)) { return undefined }
-	try {
-		const imgCache = await window.caches.open('img-cache')
-		const cachedResponse = await imgCache.match(url)
-		if (cachedResponse) {
-			return URL.createObjectURL(await cachedResponse.blob())
-		}
-	} catch (error) {
-		console.warn('Cache access error:', error)
-	}
-	return undefined
-}
-
-async function cacheImage(url: string, blob: Blob) {
-	if (!('caches' in window)) { return }
-	try {
-		const imgCache = await window.caches.open('img-cache')
-		await imgCache.put(url, new Response(blob))
-	} catch (error) {
-		console.warn('Cache write error:', error)
-	}
-}
-
-async function convertHeicImage(url: string): Promise<string> {
-	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
-	const heic2any = await awaitGlobal<(opts: { blob: Blob }) => Promise<Blob>>('heic2any')
-	const response = await fetch(normalizeURL(url))
-	const blob = await response.blob()
-	const convertedBlob = await heic2any({ blob })
-	await cacheImage(url, convertedBlob)
-	return URL.createObjectURL(convertedBlob)
-}
-
-async function loadImage() {
-	loadingError.value = false
-	const url = getImageUrl()
-	if (url === undefined || url === '') {
-		imageSrc.value = undefined
-		return
-	}
-
-	try {
-		const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
-
-		if (ext === 'heic') {
-			const cachedSrc = await getCachedImage(url)
-			if (cachedSrc !== undefined && cachedSrc !== '') {
-				imageSrc.value = cachedSrc
-				return
-			}
-			imageSrc.value = await convertHeicImage(url)
-		} else {
-			imageSrc.value = url
-		}
-	} catch (error) {
-		console.error('Image loading error:', error)
-		loadingError.value = true
-		imageSrc.value = undefined
-	}
-}
-
-watch(() => [props.src, props.pathKey, props.modelValue], loadImage, { immediate: true })
+const { imageSrc, loadingError } = useImageSrc(() => props.src ?? props.pathKey ?? props.modelValue)
 
 // ── Framed mode (ratio / gradient / blend / rounded / overlay slot) ──────────
 const slots = useSlots()

package/src/components/PageTitle.vue

@@ -4,36 +4,22 @@ defineProps({
 		type: String,
 		default: '',
 	},
-
+	subtitle: {
+		type: String,
+		default: '',
+	},
 })
 </script>
 
 <template>
-	<div class="page-top">
-		<h1 class="top-title m-0">
-			<slot /> {{ value }}
-		</h1>
+	<div class="page-top flex gap-1">
+		<div class="grid gap-025">
+			<h1 class="m-0 semibold txt-20 m_txt16 line-height-1">
+				<slot /> {{ value }}
+			</h1>
+			<p v-if="subtitle || $slots.subtitle" class="top-subtitle m-0 txt-13 m_txt12 align-items-center line-height-12 opacity-6">
+				<slot name="subtitle">{{ subtitle }}</slot>
+			</p>
+		</div>
 	</div>
-</template>
-
-<style>
-
-.top-title {
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.page-top {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-@media screen and (max-width: 910px) {
-.top-title {
-  font-size: 16px;
-}
-}
-
-</style>
+</template>

package/src/components/RouterWrapper.vue

@@ -1,8 +1,30 @@
 <script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import Loading from './Loading.vue'
+
+// Reset the scroll position on every route change. The app's scroll container is
+// the inner `.pageContent` element in AppContent (the window itself doesn't
+// scroll), so a plain vue-router `scrollBehavior` wouldn't help. We scroll the
+// nearest `.pageContent` ancestor back to the top after the new view mounts.
+const anchor = ref<HTMLElement | null>(null)
+const route = useRoute()
+
+watch(
+	() => route.fullPath,
+	async () => {
+		await nextTick()
+		const container = anchor.value?.closest('.pageContent') as HTMLElement | null
+		if (container) container.scrollTop = 0
+		// Fallback: also reset the window in case a view scrolls the page itself.
+		else window.scrollTo({ top: 0 })
+	},
+)
 </script>
 
 <template>
+	<!-- Zero-size anchor used to locate the scrolling `.pageContent` ancestor. -->
+	<span ref="anchor" aria-hidden="true" style="display: none" />
 	<RouterView v-slot="{ Component, route }">
 		<slot v-if="!Component">
 			<div class="w-100p h-100vh flex justify-content-center">

package/src/components/layout/AppContent.vue

@@ -4,6 +4,8 @@ import { useAppLayout } from './appLayoutContext'
 
 interface Props {
 	title?: string
+	/** Secondary line under the title (page description / context). */
+	subtitle?: string
 	showMenuButton?: boolean
 	backTo?: string | Record<string, any>
 	border?: boolean
@@ -41,7 +43,7 @@ const { isOpen, toggleMenu, sidebarCardStyle } = useAppLayout()
 				<Btn v-if="backTo" icon="arrow_back" thin :to="backTo" class="back-btn bg-bg m_-ms-05 m_-me-05 color-black" />
 
 				<!-- Page Title -->
-				<PageTitle v-if="title">
+				<PageTitle v-if="title || subtitle" :subtitle="subtitle">
 					{{ title }}
 				</PageTitle>
 

package/src/components/layout/AppSidebar.vue

@@ -24,6 +24,8 @@ interface Props {
 	activeColor?: string
 	logoHeight?: string
 	name?: string
+	/** Small tagline rendered under the app name (hidden when collapsed). */
+	nameSubtitle?: string
 	frame?: boolean
 	activeRoutes?: string[]
 	centerlinks?: boolean
@@ -162,9 +164,12 @@ const sidebarStyles = computed(() => {
 					v-if="props.logo" :src="props.logo" :alt="props.logoAlt" class="contain"
 					:style="{ height: props.logoHeight }"
 				>
-				<span class="nav-text">
-					{{ props.name }}
-				</span>
+				<slot name="brand" v-bind="{ isOpen: isVisuallyOpen }">
+					<span class="nav-text flex column line-height-1 gap-025 align-items-start">
+						<span>{{ props.name }}</span>
+						<span v-if="props.nameSubtitle" class="txt11 opacity-6">{{ props.nameSubtitle }}</span>
+					</span>
+				</slot>
 			</router-link>
 
 			<!-- Navigation Links -->

package/src/components/lightbox/Lightbox.vue

@@ -3,6 +3,7 @@ import type { LightboxItem } from './lightbox.types'
 
 import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile, useEscapeKey } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
+import LightboxImage from './LightboxImage.vue'
 
 const isOpen = ref(false)
 const group = ref<LightboxItem[]>([])
@@ -88,7 +89,7 @@ defineExpose({ open, close })
 						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
 							:mouse-wheel-to-zoom="false" :double-click-to-zoom="true" :max-scale="5" :min-scale="1"
 							:aspect-ratio="0" :limit-translation="true" @click.stop>
-							<Image :draggable="false" :src="item?.src" alt="Preview" class="lightbox-image" />
+							<LightboxImage :src="item?.src" />
 						</Zoomer>
 
 						<BglVideo v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls

package/src/components/lightbox/LightboxImage.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// Plain <img> for the lightbox preview that still gets shared src resolution +
+// HEIC conversion via useImageSrc. A bare <img> (not <Image>) is required here
+// so the natural dimensions drive layout — <Image>'s framed mode renders an
+// absolute-fill img that collapses the zoomer to 0×0.
+import { useImageSrc } from '@bagelink/vue'
+
+const props = defineProps<{ src?: string }>()
+const { imageSrc } = useImageSrc(() => props.src)
+</script>
+
+<template>
+	<img :draggable="false" :src="imageSrc" alt="Preview" class="lightbox-image">
+</template>

package/src/components/lightbox/index.ts

@@ -70,6 +70,10 @@ function urlToName(url: string): string {
 
 function determineFileType(url: any): string {
 	if (typeof url !== 'string' || !url) { return 'unknown' }
+	// Extensionless sources (object URLs, data URLs, signed/CDN URLs) can't be sniffed
+	// by extension — fall back to MIME hints so they still preview as images/video.
+	if (url.startsWith('blob:') || /^data:image\//i.test(url)) { return 'image' }
+	if (/^data:video\//i.test(url)) { return 'video' }
 	const extension = (url.split('.').pop() || '').toLowerCase()
 	const altExtension = url.split('?')[0].split('.').pop()?.toLowerCase() || ''
 	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) { return 'image' }

package/src/composables/index.ts

@@ -10,6 +10,7 @@ export { useEscapeKey } from './useEscapeKey'
 export { useExcel } from './useExcel'
 export type { GradientDir, GradientDirProp, GradientProp } from './useGradientVariant'
 export { useGradientVariant } from './useGradientVariant'
+export { useImageSrc } from './useImageSrc'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
 export { useQuery } from './useQuery'

package/src/composables/useImageSrc.ts

@@ -0,0 +1,88 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { appendScript, awaitGlobal, normalizeURL, pathKeyToURL } from '@bagelink/vue'
+import { ref, toValue, watch } from 'vue'
+
+declare global {
+	interface Window {
+		heic2any: any
+	}
+}
+
+async function getCachedImage(url: string): Promise<string | undefined> {
+	if (!('caches' in window)) { return undefined }
+	try {
+		const imgCache = await window.caches.open('img-cache')
+		const cachedResponse = await imgCache.match(url)
+		if (cachedResponse) {
+			return URL.createObjectURL(await cachedResponse.blob())
+		}
+	} catch (error) {
+		console.warn('Cache access error:', error)
+	}
+	return undefined
+}
+
+async function cacheImage(url: string, blob: Blob) {
+	if (!('caches' in window)) { return }
+	try {
+		const imgCache = await window.caches.open('img-cache')
+		await imgCache.put(url, new Response(blob))
+	} catch (error) {
+		console.warn('Cache write error:', error)
+	}
+}
+
+async function convertHeicImage(url: string): Promise<string> {
+	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
+	const heic2any = await awaitGlobal<(opts: { blob: Blob }) => Promise<Blob>>('heic2any')
+	const response = await fetch(normalizeURL(url))
+	const blob = await response.blob()
+	const convertedBlob = await heic2any({ blob })
+	await cacheImage(url, convertedBlob)
+	return URL.createObjectURL(convertedBlob)
+}
+
+/**
+ * Resolve an image source for display: turns a pathKey/URL into a usable URL via
+ * `pathKeyToURL`, and transparently converts `.heic` files to a displayable blob
+ * (with a cache) since browsers can't render HEIC in <img>. Shared by <Image>
+ * and the lightbox so both get the same resolution + HEIC handling.
+ *
+ * @param source ref/getter of the raw src or pathKey
+ * @returns `{ imageSrc, loadingError }` reactive refs
+ */
+export function useImageSrc(source: MaybeRefOrGetter<string | undefined>) {
+	const imageSrc = ref<string | undefined>(undefined)
+	const loadingError = ref(false)
+
+	async function load() {
+		loadingError.value = false
+		const url = pathKeyToURL(toValue(source))
+		if (url === undefined || url === '') {
+			imageSrc.value = undefined
+			return
+		}
+
+		try {
+			const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
+			if (ext === 'heic') {
+				const cachedSrc = await getCachedImage(url)
+				if (cachedSrc !== undefined && cachedSrc !== '') {
+					imageSrc.value = cachedSrc
+					return
+				}
+				imageSrc.value = await convertHeicImage(url)
+			} else {
+				imageSrc.value = url
+			}
+		} catch (error) {
+			console.error('Image loading error:', error)
+			loadingError.value = true
+			imageSrc.value = undefined
+		}
+	}
+
+	watch(() => toValue(source), load, { immediate: true })
+
+	return { imageSrc, loadingError }
+}

package/src/utils/index.ts

@@ -257,7 +257,7 @@ export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditi
 export { anyOf, buildQuery, evaluateQuery, parseQuery, queryFilter, range, search } from './queryFilter'
 export type { ShowdownConverter, ShowdownOptions } from './showdown'
 
-const URL_REGEX = /^https?:\/\/|^\/\//
+const URL_REGEX = /^https?:\/\/|^\/\/|^blob:|^data:/
 
 export function pathKeyToURL(pathKey?: string | null): string | undefined {
 	if (pathKey == null || pathKey === '') {