@bagelink/vue 1.15.57 → 1.15.61

package/src/components/layout/Divider.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglDivider' })
+import { useSlots } from 'vue'
+
+/**
+ * Hairline separator in the theme border color.
+ * - Horizontal by default; `vertical` for inline groups (toolbars, breadcrumbs).
+ * - Default slot (or `label`) renders centered text with a line on each side
+ *   (horizontal only) — e.g. an "OR" divider.
+ * - `size` sets the length of a vertical divider (maps to --divider-size).
+ */
+const {
+	vertical = false,
+	label = '',
+	size,
+	class: className = '',
+} = defineProps<{
+	vertical?: boolean
+	label?: string
+	size?: string
+	class?: string
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+	<!-- vertical: short hairline, no label support -->
+	<div
+		v-if="vertical"
+		class="divider-v"
+		:class="className"
+		:style="size ? { '--divider-size': size } : undefined"
+		role="separator"
+		aria-orientation="vertical"
+	/>
+
+	<!-- horizontal with label/slot: line — content — line -->
+	<div v-else-if="label || slots.default" class="bgl-divider-labeled" :class="className" role="separator">
+		<span class="divider bgl-divider-line" />
+		<span class="bgl-divider-label"><slot>{{ label }}</slot></span>
+		<span class="divider bgl-divider-line" />
+	</div>
+
+	<!-- plain horizontal hairline -->
+	<div v-else class="divider" :class="className" role="separator" />
+</template>
+
+<style scoped>
+.bgl-divider-labeled {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+.bgl-divider-line {
+	flex: 1;
+}
+.bgl-divider-label {
+	font-size: 0.8125rem;
+	color: var(--bgl-text-soft, var(--bgl-gray));
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+</style>

package/src/components/layout/Layout.vue

@@ -22,19 +22,32 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 
 })
 
-const gridTemplateRows = computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
+// Bare `fr` tracks won't shrink below their content's intrinsic size, which
+// causes overflow when a child (table, long text, nested grid) is wider than its
+// share. Wrapping in `minmax(0, …)` makes the track shrinkable — the behaviour
+// you almost always want. Authors can opt out by passing an explicit minmax().
+function normalizeTrack(track: string): string {
+	const t = track.trim()
+	if (/^\d*\.?\d+fr$/.test(t)) { return `minmax(0, ${t})` }
+	return t
+}
+function buildTemplate(tracks: string[]): string {
+	return tracks.length > 0 ? tracks.map(normalizeTrack).join(' ') : 'auto'
+}
+
+const gridTemplateRows = computed(() => buildTemplate(props.rows))
 const gapSize = computed(() => `${props.gap}rem`)
 const mGapSize = computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize.value)
 
 const mGridTemplateRows = computed(() => {
-	if (props.mRows?.length) { return props.mRows.join(' ') }
+	if (props.mRows?.length) { return buildTemplate(props.mRows) }
 	return gridTemplateRows.value
 })
 
-const gridTemplateColumns = computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = computed(() => buildTemplate(props.columns))
 
 const mGridTemplateColumns = computed(() => {
-	if (props.mColumns?.length) { return props.mColumns.join(' ') }
+	if (props.mColumns?.length) { return buildTemplate(props.mColumns) }
 	return gridTemplateColumns.value
 })
 </script>

package/src/components/layout/SidebarNavItem.vue

@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import type { NavLink } from '@bagelink/vue'
+import { Btn, Icon, Dropdown } from '@bagelink/vue'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { resolveI18n } from '../../i18n'
+
+interface LinkWithAction extends NavLink {
+	activeRoutes?: string[]
+	children?: LinkWithAction[]
+	action?: () => void
+}
+
+const props = withDefaults(defineProps<{
+	link: LinkWithAction
+	/** sidebar is expanded (true) or collapsed to icons (false) */
+	open: boolean
+	isMobile: boolean
+	bgColor: string
+	textColor: string
+	activeColor: string
+}>(), {})
+
+const route = useRoute()
+
+const hasChildren = computed(() => !!props.link.children?.length)
+
+// active detection (mirrors AppSidebar logic, recursive for parents)
+function linkActive(link: LinkWithAction): boolean {
+	const linkPath = link.to
+	if (link.activeRoutes?.length) {
+		return link.activeRoutes.some(p =>
+			p === '/' ? route.path === p : route.path === p || route.path.startsWith(`${p}/`))
+	}
+	if (!linkPath) return false
+	if (linkPath === '/') return route.path === linkPath
+	return route.path === linkPath || route.path.startsWith(`${linkPath}/`)
+}
+
+const childActive = computed(() => props.link.children?.some(linkActive) ?? false)
+const selfActive = computed(() => linkActive(props.link))
+const isActive = computed(() => selfActive.value || (hasChildren.value && childActive.value))
+
+// expanded/collapsed group state — auto-open when a child is active
+const expanded = ref(childActive.value)
+watch(childActive, v => { if (v) expanded.value = true })
+
+function onParentClick() {
+	if (hasChildren.value) expanded.value = !expanded.value
+	else props.link.action?.()
+}
+</script>
+
+<template>
+	<!-- LEAF link -->
+	<Btn
+		v-if="!hasChildren"
+		:title="!open && !isMobile ? resolveI18n(link.label) : ''"
+		fullWidth alignTxt="start" class="flex-shrink-0 px-075"
+		:class="{ 'nav-btn-active': selfActive }"
+		:style="{
+			backgroundColor: selfActive ? activeColor : bgColor,
+			color: selfActive ? 'white' : textColor,
+		}"
+		:to="link.to || '/'" @click="link.action"
+	>
+		<Icon :name="link.icon" size="1.2" />
+		<span class="nav-text">{{ resolveI18n(link.label) }}</span>
+	</Btn>
+
+	<!-- PARENT with children, EXPANDED sidebar -->
+	<div v-else-if="open || isMobile" class="sidebar-group w100p">
+		<Btn
+			fullWidth alignTxt="start" class="flex-shrink-0 px-075 sidebar-group-toggle"
+			:class="{ 'nav-btn-active': isActive }"
+			:style="{
+				backgroundColor: isActive ? activeColor : bgColor,
+				color: isActive ? 'white' : textColor,
+			}"
+			@click="onParentClick"
+		>
+			<Icon :name="link.icon" size="1.2" />
+			<span class="nav-text flex-grow">{{ resolveI18n(link.label) }}</span>
+			<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron" :class="{ 'sidebar-chevron-open': expanded }" />
+		</Btn>
+		<div class="sidebar-children" :class="{ 'sidebar-children-open': expanded }">
+			<Btn
+				v-for="child in link.children" :key="child.to || child.label"
+				fullWidth alignTxt="start" class="flex-shrink-0 ps-2 pe-075 sidebar-child"
+				:class="{ 'nav-btn-active': linkActive(child) }"
+				:style="{
+					backgroundColor: linkActive(child) ? activeColor : 'transparent',
+					color: linkActive(child) ? 'white' : textColor,
+				}"
+				:to="child.to || '/'" @click="child.action"
+			>
+				<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+				<span class="nav-text">{{ resolveI18n(child.label) }}</span>
+			</Btn>
+		</div>
+	</div>
+
+	<!-- PARENT with children, COLLAPSED sidebar → hover popover flyout -->
+	<Dropdown
+		v-else
+		placement="right-start"
+		:triggers="['hover']"
+		card
+		class="w100p sidebar-flyout-trigger"
+	>
+		<template #trigger>
+			<Btn
+				fullWidth alignTxt="start" class="flex-shrink-0 px-075"
+				:class="{ 'nav-btn-active': isActive }"
+				:style="{
+					backgroundColor: isActive ? activeColor : bgColor,
+					color: isActive ? 'white' : textColor,
+				}"
+			>
+				<Icon :name="link.icon" size="1.2" />
+				<span class="nav-text">{{ resolveI18n(link.label) }}</span>
+			</Btn>
+		</template>
+		<!-- flyout content -->
+		<div class="sidebar-flyout p-05">
+			<p class="sidebar-flyout-label">{{ resolveI18n(link.label) }}</p>
+			<Btn
+				v-for="child in link.children" :key="child.to || child.label"
+				fullWidth alignTxt="start" thin class="flex-shrink-0 px-075 sidebar-flyout-item"
+				:class="{ 'nav-btn-active': linkActive(child) }"
+				:style="{
+					backgroundColor: linkActive(child) ? activeColor : 'transparent',
+					color: linkActive(child) ? 'white' : 'var(--bgl-text-color)',
+				}"
+				:to="child.to || '/'" @click="child.action"
+			>
+				<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+				<span>{{ resolveI18n(child.label) }}</span>
+			</Btn>
+		</div>
+	</Dropdown>
+</template>
+
+<style scoped>
+.sidebar-chevron {
+	margin-inline-start: auto;
+	transition: transform 0.2s ease;
+	opacity: 0.6;
+}
+.sidebar-chevron-open {
+	transform: rotate(180deg);
+}
+.sidebar-children {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 0.25s ease;
+	overflow: hidden;
+}
+.sidebar-children-open {
+	grid-template-rows: 1fr;
+}
+.sidebar-children > * {
+	min-height: 0;
+}
+.sidebar-child {
+	font-size: 0.85rem;
+}
+.sidebar-flyout {
+	min-width: 180px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.sidebar-flyout-label {
+	margin: 0;
+	padding: 0.25rem 0.5rem 0.375rem;
+	font-size: 0.6875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	opacity: 0.45;
+}
+.sidebar-flyout-item {
+	border-radius: var(--bgl-btn-border-radius);
+}
+</style>

package/src/components/layout/index.ts

@@ -4,6 +4,7 @@ export { default as AppSidebar } from './AppSidebar.vue'
 export { useAppLayout } from './appLayoutContext'
 export type { AppLayoutContext } from './appLayoutContext'
 export { default as BottomMenu } from './BottomMenu.vue'
+export { default as Divider } from './Divider.vue'
 export { default as Layout } from './Layout.vue'
 export { default as Panel } from './Panel.vue'
 export { default as Resizable } from './Resizable.vue'

package/src/composables/index.ts

@@ -36,5 +36,5 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 	return getFallbackSchema(data, _columns.value)
 }
 
-export { useTheme } from './useTheme'
+export { configureTheme, useTheme } from './useTheme'
 export { useValidateFieldValue } from './useValidateFieldValue'

package/src/composables/useTheme.ts

@@ -37,10 +37,18 @@ const STORAGE_KEY = 'color-mode'
 const colorMode = ref<string>('system')
 const isDark = ref(false)
 
+/**
+ * Whether dark mode is enabled for this app. Defaults to `false` (light only),
+ * so dark mode is opt-in per project. Call `configureTheme({ allowDark: true })`
+ * once at app startup to enable it. When `false`, any dark/system-dark
+ * preference falls back to light and `bgl-dark-mode` is never applied.
+ */
+const allowDark = ref(false)
+
 const isBrowser = typeof window !== 'undefined'
 
 function getSystemPrefersDark() {
-	return isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+	return allowDark.value && isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 
 function findTheme(value: string) {
@@ -69,11 +77,15 @@ function applyTheme(themeValue: string) {
 			root.classList.add(themeToApply.class)
 		}
 	} else {
-		// Apply the selected theme
+		// Apply the selected theme. If dark mode is disabled for this app, force
+		// any dark selection back to light so projects can opt out entirely.
 		const theme = findTheme(themeValue)
-		if (theme) {
-			root.classList.add(theme.class)
-			isDark.value = theme.isDark ?? false
+		const effectiveTheme = theme && theme.isDark && !allowDark.value
+			? findTheme('light')
+			: theme
+		if (effectiveTheme) {
+			root.classList.add(effectiveTheme.class)
+			isDark.value = effectiveTheme.isDark ?? false
 		}
 	}
 }
@@ -89,6 +101,20 @@ function toggleTheme() {
 	colorMode.value = cyclableThemes[nextIndex].value
 }
 
+/**
+ * Configure theme behavior for the current app. Call once at startup.
+ *
+ * @param options.allowDark  Enable dark mode for this project (default: false).
+ *                           When false, dark / system-dark falls back to light.
+ */
+export function configureTheme(options: { allowDark?: boolean } = {}) {
+	if (options.allowDark !== undefined) {
+		allowDark.value = options.allowDark
+	}
+	// Re-apply with the new policy so a previously-saved dark choice is corrected.
+	applyTheme(colorMode.value)
+}
+
 function addTheme(theme: ThemeOption) {
 	// Check if theme with this value already exists
 	const exists = themeOptions.value.some(t => t.value === theme.value)

package/src/directives/index.ts

@@ -1,4 +1,6 @@
 export { default as pattern } from './pattern'
+export { default as reveal } from './reveal'
+export type { RevealOptions } from './reveal'
 export { default as ripple } from './ripple'
 export { vResize } from './vResize'
 export type { ResizeEvent, ResizeOptions } from './vResize'

package/src/directives/reveal.ts

@@ -0,0 +1,78 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+/**
+ * v-reveal — animate an element into view on first scroll-intersection.
+ *
+ *   <div v-reveal>…</div>                       // default: fade + rise
+ *   <div v-reveal="'left'">…</div>              // slide from a direction
+ *   <div v-reveal="{ y: 'up', delay: 120 }">…</div>
+ *   <Card v-for="…" v-reveal="{ delay: i * 80 }" />   // stagger
+ *
+ * Adds `.bgl-reveal` immediately (hidden, pre-transformed) and toggles
+ * `.bgl-reveal-in` once the element enters the viewport. Honors
+ * `prefers-reduced-motion` (shows instantly, no transform). All visual tuning
+ * lives in CSS (motion.css) via data-attributes, so it's themeable and cheap.
+ */
+
+type Dir = 'up' | 'down' | 'left' | 'right' | 'none'
+
+interface RevealOptions {
+	/** Direction the element travels in from. Default 'up'. */
+	y?: Dir
+	/** Stagger / entrance delay in ms. */
+	delay?: number
+	/** Animate only once (default) or re-run when scrolled away and back. */
+	once?: boolean
+	/** 0–1 visibility threshold before triggering. Default 0.12. */
+	threshold?: number
+}
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined'
+	&& window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+function parse(value: RevealOptions | Dir | undefined): Required<RevealOptions> {
+	const base: Required<RevealOptions> = { y: 'up', delay: 0, once: true, threshold: 0.12 }
+	if (!value) { return base }
+	if (typeof value === 'string') { return { ...base, y: value } }
+	return { ...base, ...value }
+}
+
+const observers = new WeakMap<HTMLElement, IntersectionObserver>()
+
+const reveal: Directive<HTMLElement, RevealOptions | Dir> = {
+	mounted(el, binding: DirectiveBinding<RevealOptions | Dir>) {
+		const opts = parse(binding.value)
+
+		// Reduced motion: reveal instantly, skip all transforms/observers.
+		if (prefersReducedMotion()) { return }
+
+		el.classList.add('bgl-reveal')
+		if (opts.y !== 'none') { el.dataset.revealDir = opts.y }
+		if (opts.delay) { el.style.setProperty('--bgl-reveal-delay', `${opts.delay}ms`) }
+
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					el.classList.add('bgl-reveal-in')
+					if (opts.once) { observer.unobserve(el) }
+				} else if (!opts.once) {
+					el.classList.remove('bgl-reveal-in')
+				}
+			}
+		}, { threshold: opts.threshold, rootMargin: '0px 0px -8% 0px' })
+
+		observer.observe(el)
+		observers.set(el, observer)
+	},
+	unmounted(el) {
+		observers.get(el)?.disconnect()
+		observers.delete(el)
+	},
+	getSSRProps() {
+		return {}
+	},
+}
+
+export default reveal
+export type { RevealOptions }

package/src/plugins/bagel.ts

@@ -5,7 +5,7 @@ import type { BagelToastOptions } from './useToast'
 import FloatingVue from 'floating-vue'
 import lightboxPlugin from '../components/lightbox/index'
 import { DialogPlugin } from '../dialog/useDialog'
-import { ripple, pattern } from '../directives'
+import { ripple, pattern, reveal } from '../directives'
 import { createI18n, getI18n } from '../i18n'
 import clickOutside from '../utils/clickOutside'
 import { ToastPlugin } from './useToast'
@@ -23,6 +23,7 @@ export const BagelVue: Plugin<BagelOptions> = {
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)
+		app.directive('reveal', reveal)
 
 		// Install UI plugins
 		app.use(lightboxPlugin)

package/src/styles/appearance.css

@@ -767,6 +767,17 @@
     filter: saturate(200%) !important;
 }
 
+/* Glass — frosted translucent surface for use over photos / gradients / dark
+ * heroes (nav pills, eyebrow chips, overlays). Light-on-dark by default; flip
+ * with --bgl-glass-bg / --bgl-glass-color / --bgl-glass-border. */
+.glass {
+    background-color: var(--bgl-glass-bg, rgba(255, 255, 255, 0.18)) !important;
+    color: var(--bgl-glass-color, #fff) !important;
+    border: 1px solid var(--bgl-glass-border, rgba(255, 255, 255, 0.28)) !important;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
 /* Backdrop Filter */
 .backdrop-blur-none {
     backdrop-filter: blur(0) !important;

package/src/styles/bagel.css

@@ -21,6 +21,7 @@
 @import "buttons.css";
 @import "scrollbar.css";
 @import "transitions.css";
+@import "motion.css";
 @import "loginCard.css";
 @import "app-layout.css";
 

package/src/styles/buttons.css

@@ -101,6 +101,80 @@
     border-bottom: 1px solid currentColor !important;
 }
 
+.hover-opacity-1,
+.hover-opacity-2,
+.hover-opacity-3,
+.hover-opacity-4,
+.hover-opacity-5,
+.hover-opacity-6,
+.hover-opacity-7,
+.hover-opacity-8,
+.hover-opacity-9,
+.hover-opacity-10 {
+    transition: var(--bgl-transition);
+}
+
+.hover-opacity-1:hover,
+.hover-opacity-1:active,
+.hover-opacity-1:focus {
+    opacity: 0.1;
+}
+
+.hover-opacity-2:hover,
+.hover-opacity-2:active,
+.hover-opacity-2:focus {
+    opacity: 0.2;
+}
+
+
+.hover-opacity-3:hover,
+.hover-opacity-3:active,
+.hover-opacity-3:focus {
+    opacity: 0.3;
+}
+
+.hover-opacity-4:hover,
+.hover-opacity-4:active,
+.hover-opacity-4:focus {
+    opacity: 0.4;
+}
+
+.hover-opacity-5:hover,
+.hover-opacity-5:active,
+.hover-opacity-5:focus {
+    opacity: 0.5;
+}
+
+.hover-opacity-6:hover,
+.hover-opacity-6:active,
+.hover-opacity-6:focus {
+    opacity: 0.6;
+}
+
+.hover-opacity-7:hover,
+.hover-opacity-7:active,
+.hover-opacity-7:focus {
+    opacity: 0.7;
+}
+
+.hover-opacity-8:hover,
+.hover-opacity-8:active,
+.hover-opacity-8:focus {
+    opacity: 0.8;
+}
+
+.hover-opacity-9:hover,
+.hover-opacity-9:active,
+.hover-opacity-9:focus {
+    opacity: 0.9;
+}
+
+.hover-opacity-10:hover,
+.hover-opacity-10:active,
+.hover-opacity-10:focus {
+    opacity: 1;
+}
+
 .border {
     border: 1px solid var(--bgl-border-color);
 }