@bagelink/vue 1.14.13 → 1.15.0

package/src/components/layout/TabsNav.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
 	iconSize?: number | string
 	iconMobileSize?: number | string
 	thin?: boolean
-	size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 	fullWidth?: boolean
 	fullWidthMobile?: boolean
 	alignTxt?: 'center' | 'start' | 'end'
@@ -146,10 +146,10 @@ onBeforeUnmount(() => {
 			{ active: isActive(tab) },
 			{	
 				'bgl_tab-thin': thin,
-				'bgl_tab-xs': size === 'xs' || size === 'extra-small',
-				'bgl_tab-s': size === 's' || size === 'small',
-				'bgl_tab-l': size === 'l' || size === 'large',
-				'bgl_tab-xl': size === 'xl' || size === 'extra-large',
+				'bgl_tab-xs': size === 'xs',
+				'bgl_tab-s': size === 'sm',
+				'bgl_tab-l': size === 'lg',
+				'bgl_tab-xl': size === 'xl',
 				'w-100p justify-center': fullWidth,
 				'w-auto m_w-100p': fullWidthMobile,
 				'bgl_tab-align-center': alignTxt === 'center',
@@ -171,17 +171,17 @@ onBeforeUnmount(() => {
 
 <style>
 :root {
-	--bgl_tabs-background: var(--input-bg);
-	--bgl_tabs-border-radius: var(--input-border-radius);
-	--bgl_tabs-inline-padding: calc(var(--btn-padding) / 8);
-	--bgl_tabs-block-padding: calc(var(--btn-padding) / 8);
+	--bgl_tabs-background: var(--bgl-input-bg);
+	--bgl_tabs-border-radius: var(--bgl-input-border-radius);
+	--bgl_tabs-inline-padding: calc(var(--bgl-btn-padding) / 8);
+	--bgl_tabs-block-padding: calc(var(--bgl-btn-padding) / 8);
 	--bgl_tabs-shadow: inset 0 0 10px #00000012;
 	--bgl_tabs-gap: 0.25rem;
-	--bgl_tabs-font-size: var(--input-font-size);
-	--bgl_tab-inline-padding: calc(var(--btn-padding) / 2);
-	--bgl_tab-block-padding: calc(var(--btn-padding) / 8);
+	--bgl_tabs-font-size: var(--bgl-input-font-size);
+	--bgl_tab-inline-padding: calc(var(--bgl-btn-padding) / 2);
+	--bgl_tab-block-padding: calc(var(--bgl-btn-padding) / 8);
 	--bgl_tab-gap: 0.5rem;
-	--bgl_tabs-border-radius: var(--input-border-radius);
+	--bgl_tabs-border-radius: var(--bgl-input-border-radius);
 	--bgl-tab-hover-bg: rgba(255, 255, 255, .4);
 	--bgl_tabs-indicator-color: var(--bgl-popup-bg);
 	--bgl-tabs-flat-indicator-color: var(--bgl-primary);
@@ -204,7 +204,7 @@ onBeforeUnmount(() => {
 	cursor: pointer;
 	font-size: inherit;
 	font-family: inherit;
-	height: calc(var(--btn-height) - var(--bgl_tabs-block-padding) * 2);
+	height: calc(var(--bgl-btn-height) - var(--bgl_tabs-block-padding) * 2);
 	padding-inline: var(--bgl_tab-inline-padding);
 	padding-block: 0;
 		border-radius: var(--bgl_tab-border-radius);
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
 	background: transparent;
 	border-bottom: 1px solid var(--bgl-tabs-flat-indicator-color);
 	border-radius: 0;
-	top: calc(var(--btn-padding) * 1.25);
+	top: calc(var(--bgl-btn-padding) * 1.25);
 	bottom: unset;
 
 }
@@ -255,30 +255,30 @@ onBeforeUnmount(() => {
 }
 .bgl_tab-thin {
 	padding-inline: calc(var(--bgl_tab-inline-padding) / 2);
-	height: calc(var(--btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
+	height: calc(var(--bgl-btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-xs {
 	padding-inline: calc(var(--bgl_tab-inline-padding) / 3);
-	font-size: calc(var(--input-font-size) * 0.6);
-	height: calc(var(--btn-height) * 0.5 - var(--bgl_tabs-block-padding) * 2);
+	font-size: calc(var(--bgl-input-font-size) * 0.6);
+	height: calc(var(--bgl-btn-height) * 0.5 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-s {
 	padding-inline: calc(var(--bgl_tab-inline-padding) / 1.5);
-	height: calc(var(--btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
+	height: calc(var(--bgl-btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-l {
 	padding-inline: calc(var(--bgl_tab-inline-padding) * 1.3);
-	font-size: calc(var(--input-font-size) * 1.1);
-	height: calc(var(--btn-height) * 1.2 - var(--bgl_tabs-block-padding) * 2);
+	font-size: calc(var(--bgl-input-font-size) * 1.1);
+	height: calc(var(--bgl-btn-height) * 1.2 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-xl {
 	padding-inline: calc(var(--bgl_tab-inline-padding) * 1.6);
-	font-size: calc(var(--input-font-size) * 1.3);
-	height: calc(var(--btn-height) * 1.5 - var(--bgl_tabs-block-padding) * 2);
+	font-size: calc(var(--bgl-input-font-size) * 1.3);
+	height: calc(var(--bgl-btn-height) * 1.5 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-align-start {

package/src/components/layout/appLayoutContext.ts

@@ -0,0 +1,44 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, ref } from 'vue'
+
+export const SIDEBAR_COLLAPSED_WIDTH = '66px'
+export const SIDEBAR_COLLAPSED_WIDTH_CARD = '82px'
+
+export interface AppLayoutContext {
+	/** Sidebar open (expanded) state */
+	isOpen: Ref<boolean>
+	/** Viewport is below MOBILE_BREAKPOINT */
+	isMobile: Ref<boolean>
+	toggleMenu: () => void
+	/** Close the sidebar when on mobile (e.g. after navigating) */
+	closeOnMobile: () => void
+	sidebarWidth: string
+	sidebarCollapsedWidth: string
+	/** Sidebar rendered as a floating card */
+	sidebarCardStyle: boolean
+}
+
+export const AppLayoutKey: InjectionKey<AppLayoutContext> = Symbol('AppLayout')
+
+/**
+ * Access the AppLayout context (sidebar open state, mobile flag, toggle).
+ * Works inside AppLayout's slots — including custom header buttons.
+ * Outside an AppLayout it warns (dev) and returns an inert fallback.
+ */
+export function useAppLayout(): AppLayoutContext {
+	const ctx = inject(AppLayoutKey, null)
+	if (ctx) { return ctx }
+
+	if (import.meta.env?.DEV) {
+		console.warn('[bagelink] useAppLayout() called outside <AppLayout>. AppSidebar/AppContent are designed to be used inside it.')
+	}
+	return {
+		isOpen: ref(true),
+		isMobile: ref(false),
+		toggleMenu: () => {},
+		closeOnMobile: () => {},
+		sidebarWidth: '260px',
+		sidebarCollapsedWidth: SIDEBAR_COLLAPSED_WIDTH,
+		sidebarCardStyle: false,
+	}
+}

package/src/components/layout/index.ts

@@ -1,6 +1,8 @@
 export { default as AppContent } from './AppContent.vue'
 export { default as AppLayout } from './AppLayout.vue'
 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 Layout } from './Layout.vue'
 export { default as Panel } from './Panel.vue'

package/src/components/lightbox/Lightbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LightboxItem } from './lightbox.types'
 
-import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile } from '@bagelink/vue'
+import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile, useEscapeKey } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
 
 const isOpen = ref(false)
@@ -31,14 +31,14 @@ function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 	})
 	if (currentIndex.value === -1) currentIndex.value = 0
 	zoom.value = 1
-	document.addEventListener('keydown', handleKeydown)
 }
 
 function close() {
 	isOpen.value = false
-	document.removeEventListener('keydown', handleKeydown)
 }
 
+useEscapeKey(close, isOpen)
+
 function selectItem(index: number) {
 	currentIndex.value = index
 	zoom.value = 1
@@ -58,12 +58,6 @@ watch(() => currentIndex.value, () => {
 	zoom.value = 1
 })
 
-function handleKeydown(event: KeyboardEvent) {
-	if (event.key === 'Escape') {
-		close()
-	}
-}
-
 defineExpose({ open, close })
 </script>
 

package/src/composables/index.ts

@@ -6,6 +6,7 @@ import { computed, toValue } from 'vue'
 
 export { useAddToCalendar } from './useAddToCalendar'
 export { useDevice } from './useDevice'
+export { useEscapeKey } from './useEscapeKey'
 export { useExcel } from './useExcel'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'

package/src/composables/useDevice.ts

@@ -1,4 +1,5 @@
 import { onMounted, onUnmounted, ref } from 'vue'
+import { MOBILE_BREAKPOINT } from '../utils/constants'
 
 export function useDevice() {
 	const innerWidth = ref(0)
@@ -20,7 +21,7 @@ export function useDevice() {
 
 		// Update current values
 		innerWidth.value = window.innerWidth
-		isMobile.value = window.innerWidth < 768
+		isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT
 		scrollY.value = window.scrollY
 		scrollX.value = window.scrollX
 		innerHeight.value = window.innerHeight

package/src/composables/useEscapeKey.ts

@@ -0,0 +1,56 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { onBeforeUnmount, onMounted, toValue } from 'vue'
+
+interface EscapeEntry {
+	handler: (e: KeyboardEvent) => void
+	enabled: () => boolean
+}
+
+const stack: EscapeEntry[] = []
+let listening = false
+
+function onDocumentKeydown(e: KeyboardEvent) {
+	if (e.key !== 'Escape') { return }
+	// LIFO: the most recently mounted (topmost) active layer handles Escape
+	for (let i = stack.length - 1; i >= 0; i--) {
+		if (stack[i].enabled()) {
+			stack[i].handler(e)
+			return
+		}
+	}
+}
+
+function syncListener() {
+	if (typeof document === 'undefined') { return }
+	if (stack.length > 0 && !listening) {
+		document.addEventListener('keydown', onDocumentKeydown)
+		listening = true
+	} else if (stack.length === 0 && listening) {
+		document.removeEventListener('keydown', onDocumentKeydown)
+		listening = false
+	}
+}
+
+/**
+ * Run a handler when Escape is pressed, while `enabled` is truthy.
+ * - One shared document listener for the whole app
+ * - LIFO: the most recently mounted active layer wins (dropdown inside a lightbox closes first)
+ * - Automatically cleaned up on unmount
+ *
+ * @example
+ * useEscapeKey(() => close(), () => isOpen.value)
+ */
+export function useEscapeKey(handler: (e: KeyboardEvent) => void, enabled: MaybeRefOrGetter<boolean> = true) {
+	const entry: EscapeEntry = { handler, enabled: () => !!toValue(enabled) }
+
+	onMounted(() => {
+		stack.push(entry)
+		syncListener()
+	})
+
+	onBeforeUnmount(() => {
+		const i = stack.indexOf(entry)
+		if (i !== -1) { stack.splice(i, 1) }
+		syncListener()
+	})
+}

package/src/composables/useSchemaField.ts

@@ -4,7 +4,6 @@ import type { Field, Attributes, Path, SchemaChild, BaseBagelField, VNodeFn } fr
 import {
 	TextInput,
 	NumberInput,
-	FieldArray,
 	SelectInput,
 	ToggleInput,
 	CheckInput,
@@ -12,7 +11,6 @@ import {
 	UploadInput,
 	DateInput,
 	TabsNav,
-	BglForm,
 	bindAttrs,
 	classify,
 	keyToLabel,
@@ -74,7 +72,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			text: TextInput,
 			textarea: TextInput,
 			number: NumberInput,
-			array: FieldArray,
+			array: 'div',
 			color: ColorInput,
 			tel: TelInput,
 			select: SelectInput,
@@ -85,7 +83,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			file: UploadInput,
 			date: DateInput,
 			tabs: TabsNav,
-			form: BglForm,
+			form: 'div',
 			range: RangeInput,
 			email: EmailInput
 		}
@@ -195,19 +193,6 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			defaultValue,
 		}
 
-		// Special handling for FieldArray component to pass attrs.schema as schema prop
-		if (Component === FieldArray && field.attrs?.schema) {
-			props.schema = field.attrs.schema
-		}
-		// Special handling for FieldArray component to pass attrs.type as type prop
-		if (Component === FieldArray && field.attrs?.type) {
-			props.type = field.attrs.type
-		}
-		// Special handling for FieldArray component to pass collapsed prop
-		if (Component === FieldArray && 'collapsed' in field) {
-			props.collapsed = (field as any).collapsed
-		}
-
 		// Wire top-level onClick with conditional args
 		if (typeof (field as any).onClick === 'function') {
 			const original = (field as any).onClick as (val?: any, row?: T) => void

package/src/composables/useTheme.ts

@@ -1,5 +1,5 @@
 // composables/useTheme.ts
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 export interface ThemeOption {
 	value: string
@@ -118,33 +118,37 @@ function addTheme(theme: ThemeOption) {
  * setTheme('ocean')
  */
 
-export function useTheme() {
-	onMounted(() => {
-		const saved = window.localStorage.getItem(STORAGE_KEY)
-		const validTheme = themeOptions.value.find(t => t.value === saved)
+// Module-level one-time init: a single matchMedia listener and a single
+// colorMode watcher, no matter how many components call useTheme().
+let initialized = false
 
-		if (validTheme) {
-			colorMode.value = saved!
-		}
+function initTheme() {
+	if (initialized || !isBrowser) { return }
+	initialized = true
+
+	const saved = window.localStorage.getItem(STORAGE_KEY)
+	if (themeOptions.value.some(t => t.value === saved)) {
+		colorMode.value = saved!
+	}
 
-		// Apply initial theme
-		applyTheme(colorMode.value)
+	applyTheme(colorMode.value)
 
-		// React to system changes when in "system" mode
-		const mq = window.matchMedia('(prefers-color-scheme: dark)')
-		const handler = (e: MediaQueryListEvent) => {
-			if (colorMode.value === 'system') {
-				applyTheme('system')
-			}
+	// React to system changes when in "system" mode
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+		if (colorMode.value === 'system') {
+			applyTheme('system')
 		}
-		mq.addEventListener('change', handler)
 	})
 
-	// Watch for mode changes
+	// Persist + apply on mode changes
 	watch(colorMode, (newMode) => {
-		if (isBrowser) localStorage.setItem(STORAGE_KEY, newMode)
+		localStorage.setItem(STORAGE_KEY, newMode)
 		applyTheme(newMode)
 	})
+}
+
+export function useTheme() {
+	initTheme()
 
 	const theme = computed(() => colorMode.value)
 

package/src/form-flow/FormFlow.vue

@@ -10,6 +10,7 @@ import EmailInput from '../components/form/inputs/EmailInput.vue'
 import NumberInput from '../components/form/inputs/NumberInput.vue'
 import PasswordInput from '../components/form/inputs/PasswordInput.vue'
 import RadioGroup from '../components/form/inputs/RadioGroup.vue'
+import RangeInput from '../components/form/inputs/RangeInput.vue'
 import RichText from '../components/form/inputs/RichText/index.vue'
 import SelectBtn from '../components/form/inputs/SelectBtn.vue'
 import SelectInput from '../components/form/inputs/SelectInput.vue'
@@ -223,6 +224,7 @@ function getFieldComponent(fieldOrType: FieldBuilder | string) {
 		array: ArrayInput,
 		upload: UploadInput,
 		color: ColorInput,
+		range: RangeInput,
 	}
 
 	return (componentMap[type] as typeof TextInput | undefined) ?? TextInput

package/src/form-flow/form-flow.ts

@@ -358,6 +358,13 @@ export const $ = {
 		return new Field('color', parseArgs(labelOrConfig, config))
 	},
 
+	range(
+		labelOrConfig?: string | (BaseFieldConfig & { min?: number, max?: number, step?: number, multiRange?: boolean }),
+		config?: BaseFieldConfig & { min?: number, max?: number, step?: number, multiRange?: boolean }
+	): FieldBuilder<number | [number, number]> {
+		return new Field('range', parseArgs(labelOrConfig, config))
+	},
+
 	upload(
 		labelOrConfig?: string | (BaseFieldConfig & {
 			multiple?: boolean

package/src/index.ts

@@ -1,7 +1,6 @@
 import './styles/bagel.css'
 
 export * from './components'
-export * from './components/form/useBagelFormState'
 export * from './composables'
 // Dialog (native <dialog> based)
 export * from './dialog'
@@ -23,14 +22,12 @@ export {
 	useI18n,
 } from './i18n'
 export { type BagelOptions, BagelVue, getI18n } from './plugins/bagel'
-export { ModalPlugin, useModal } from './plugins/useModal'
 
 export { type BagelToastOptions, type ToastApi, ToastPlugin, useToast } from './plugins/useToast'
 
 export * from './types'
 export * from './utils'
 export * from './utils/allCountries'
-export * from './utils/BagelFormUtils'
 export * from './utils/calendar/dateUtils'
 
 export * from './utils/constants'

package/src/plugins/bagel.ts

@@ -2,14 +2,12 @@ import type { Plugin } from 'vue'
 import type { CreateBagelI18nOptions } from '../i18n'
 
 import type { BagelToastOptions } from './useToast'
-import { configure } from '@bagelink/utils'
 import FloatingVue from 'floating-vue'
 import lightboxPlugin from '../components/lightbox/index'
 import { DialogPlugin } from '../dialog/useDialog'
 import { ripple, pattern } from '../directives'
 import { createI18n, getI18n } from '../i18n'
 import clickOutside from '../utils/clickOutside'
-import { ModalPlugin } from './useModal'
 import { ToastPlugin } from './useToast'
 import '@oddbird/popover-polyfill'
 
@@ -29,7 +27,6 @@ export const BagelVue: Plugin<BagelOptions> = {
 		// Install UI plugins
 		app.use(lightboxPlugin)
 		app.use(DialogPlugin)
-		app.use(ModalPlugin)
 		app.use(ToastPlugin, options.toast || {})
 
 		// Install FloatingVue for tooltips/popovers
@@ -46,18 +43,6 @@ export const BagelVue: Plugin<BagelOptions> = {
 		// Setup i18n
 		const i18n = createI18n(options.i18n || {})
 		app.use(i18n as any)
-
-		// Bridge locale into @bagelink/utils
-		configure({
-			locale: () => {
-				try {
-					const { locale } = getI18n().global
-					return typeof locale === 'string' ? locale : locale.value
-				} catch {
-					return 'en'
-				}
-			},
-		})
 	},
 }