@bagelink/vue 1.14.13 → 1.15.0

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

@@ -66,21 +66,21 @@ onMounted(() => {
     appearance: none;
     position: relative;
     display: inline-block;
-    background: var(--input-bg);
-    height: calc(var(--input-height) / 2);
-    width: calc(var(--input-height) - 2px);
+    background: var(--bgl-input-bg);
+    height: calc(var(--bgl-input-height) / 2);
+    width: calc(var(--bgl-input-height) - 2px);
     vertical-align: middle;
     border-radius: 2rem;
     box-shadow: 0px 1px 3px #0003 inset;
     transition: 0.25s linear all;
-    outline: 1px solid var(--border-color);
+    outline: 1px solid var(--bgl-border-color);
 
 }
 .bgl-toggle input::before {
   position: absolute;
   content: "";
-  height: calc(var(--input-height) / 2 - 2px);
-  width: calc(var(--input-height) / 2 - 2px);
+  height: calc(var(--bgl-input-height) / 2 - 2px);
+  width: calc(var(--bgl-input-height) / 2 - 2px);
   inset-inline-start: 1px;
   bottom: 1px;
   border-radius: 50%;
@@ -95,8 +95,8 @@ onMounted(() => {
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
-  line-height: var(--input-height);
-  font-size: var(--input-font-size);
+  line-height: var(--bgl-input-height);
+  font-size: var(--bgl-input-font-size);
   vertical-align: middle;
 }
 
@@ -123,7 +123,7 @@ onMounted(() => {
   background: var(--bgl-input-label-active-color, var(--bgl-primary));
 }
 .bgl-toggle :checked::before{
-  margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
+  margin-inline-start:calc(var(--bgl-input-height) / 2 - 2px) ;
 }
 .bgl-toggle input:checked + label {
     color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
@@ -131,13 +131,13 @@ onMounted(() => {
 
 /* ── bgl-outline variant ── */
 .bgl-outline input {
-    outline: 1.5px solid var(--border-color) !important;
+    outline: 1.5px solid var(--bgl-border-color) !important;
     outline-offset: 2px;
 }
 
 /* ── frame variant ── */
 .frame input {
-    outline: 1.5px solid var(--border-color) !important;
+    outline: 1.5px solid var(--bgl-border-color) !important;
     outline-offset: 2px;
     transition: outline-color 0.2s ease, box-shadow 0.2s ease;
     background: transparent;

package/src/components/form/inputs/Upload/upload.css

@@ -1,19 +1,19 @@
 .fileUploadWrap {
-    outline: 1px solid var(--border-color);
-    border-radius: var(--input-border-radius);
+    outline: 1px solid var(--bgl-border-color);
+    border-radius: var(--bgl-input-border-radius);
     text-align: center;
     cursor: pointer;
     transition: var(--bgl-transition);
     position: relative;
-    font-size: var(--input-font-size);
+    font-size: var(--bgl-input-font-size);
     overflow-y: auto;
-    background: var(--input-bg);
+    background: var(--bgl-input-bg);
     height: 215px;
     outline-offset: -1px;
 }
 
 .bagel-input .fileUploadWrap.fileDropZone {
-    background: var(--input-bg);
+    background: var(--bgl-input-bg);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -31,21 +31,21 @@
 }
 
 .multi-image-item-preview {
-    border: 1px solid var(--border-color) !important;
-    border-radius: var(--input-border-radius);
+    border: 1px solid var(--bgl-border-color) !important;
+    border-radius: var(--bgl-input-border-radius);
     margin: 0.5rem !important;
     background: var(--bgl-popup-bg);
     padding: 0;
     padding-inline-end: 1rem;
     padding-inline-start: 0.25rem;
     text-align: start;
-    color: var(--input-color);
+    color: var(--bgl-input-color);
     display: grid;
     grid-template-columns: auto 1fr 22px;
     gap: 0.5rem;
     align-items: center;
-    height: var(--btn-height);
-    font-size: var(--label-font-size);
+    height: var(--bgl-btn-height);
+    font-size: var(--bgl-label-font-size);
 }
 
 .multi-image-item-preview p {
@@ -56,9 +56,9 @@
 
 .multi-preview {
     /* width: 40px; */
-    height: calc(var(--btn-height) - 0.5rem);
-    max-width: calc(var(--btn-height) - 0.5rem);
-    border-radius: calc(var(--input-border-radius) / 2);
+    height: calc(var(--bgl-btn-height) - 0.5rem);
+    max-width: calc(var(--bgl-btn-height) - 0.5rem);
+    border-radius: calc(var(--bgl-input-border-radius) / 2);
     object-fit: cover;
     background: var(--bgl-gray-light);
     text-align: center !important;
@@ -266,7 +266,7 @@
 }
 
 .bagel-input.has-error .fileUploadWrap {
-    outline-color: var(--bgl-red, #dc3545);
+    outline-color: var(--bgl-red);
 }
 
 /* ─── Variant: frame ─────────────────────────────────────────────────────── */
@@ -274,7 +274,7 @@
 .bagel-input.frame .fileUploadWrap,
 .bagel-input.frame .fileUploadWrap.fileDropZone {
     background: transparent;
-    outline-color: var(--border-color);
+    outline-color: var(--bgl-border-color);
     transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -285,5 +285,5 @@
 }
 
 .bagel-input.has-error :deep(.bgl-card) {
-    border-color: var(--bgl-red, #dc3545);
+    border-color: var(--bgl-red);
 }

package/src/components/index.ts

@@ -6,11 +6,12 @@ export { default as Alert } from './Alert.vue'
 export * from './analytics'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
+/** @deprecated Renamed to Badge. Pill is an alias that will be removed in a future version. */
+export { default as Pill } from './Badge.vue'
 export { default as BglVideo } from './BglVideo.vue'
 export { default as Btn } from './Btn.vue'
 export { default as Calendar } from './calendar/Index.vue'
 export { default as Card } from './Card.vue'
-export { default as Carousel } from './Carousel.vue'
 export { default as DataPreview } from './DataPreview.vue'
 export { default as DataTable } from './dataTable/DataTable.vue'
 /** @deprecated Use DataTable instead. TableSchema is an alias that will be removed in a future version. */
@@ -27,26 +28,18 @@ export { default as Icon } from './Icon/Icon.vue'
 export { FONT_AWESOME_ICONS, FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
-export { default as ImportData } from './ImportData.vue'
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed/Index.vue'
 export { default as Menu } from './Menu.vue'
-export { default as Modal } from './Modal.vue'
-export { default as ModalConfirm } from './ModalConfirm.vue'
-export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pagination } from './Pagination.vue'
-export { default as Pill } from './Pill.vue'
 export { default as Rating } from './Rating.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
-export { default as Slider } from './Slider.vue'
 export { default as Spreadsheet } from './Spreadsheet/Index.vue'
 export { default as Swiper } from './Swiper.vue'
-export { default as Title } from './Title.vue'
-export { default as ToolBar } from './ToolBar.vue'
 export { default as TopBar } from './TopBar.vue'
 export { default as Zoomer } from './Zoomer.vue'

package/src/components/layout/AppContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Btn, PageTitle } from '@bagelink/vue'
-import { inject, computed } from 'vue'
+import { useAppLayout } from './appLayoutContext'
 
 interface Props {
 	title?: string
@@ -14,28 +14,13 @@ withDefaults(defineProps<Props>(), {
 	border: true,
 })
 
-// Inject menu state from parent
-const menuState = inject('menuState', {
-	isOpen: { value: true },
-	isMobile: { value: false },
-	toggleMenu: () => { },
-}) as {
-	isOpen: { value: boolean }
-	isMobile: { value: boolean }
-	toggleMenu: () => void
-}
-
-// Inject sidebar card style state
-const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
-
-// Computed property to check if sidebar has card style
-const hasSidebarCard = computed(() => sidebarCardStyle?.value ?? false)
+const { isOpen, toggleMenu, sidebarCardStyle } = useAppLayout()
 </script>
 
 <template>
 	<div
 		class="app-content h-100p flex column" :class="{
-			paddingAppContent: hasSidebarCard,
+			paddingAppContent: sidebarCardStyle,
 		}"
 	>
 		<!-- Header -->
@@ -48,7 +33,8 @@ const hasSidebarCard = computed(() => sidebarCardStyle?.value ?? false)
 				<!-- Menu Toggle Button -->
 				<Btn
 					v-if="showMenuButton" flat icon="dock_to_right" class="menuToggleButton"
-					@click="menuState.toggleMenu"
+					:aria-expanded="isOpen" aria-controls="bgl-app-sidebar" aria-label="Toggle sidebar"
+					@click="toggleMenu"
 				/>
 
 				<!-- Back Button -->

package/src/components/layout/AppLayout.vue

@@ -1,35 +1,69 @@
 <script lang="ts" setup>
-import { ref, provide, onMounted, onUnmounted, computed } from 'vue'
+import { ref, provide, onMounted, onUnmounted, computed, watch } from 'vue'
+import { useEscapeKey } from '../../composables/useEscapeKey'
+import { MOBILE_BREAKPOINT } from '../../utils/constants'
+import { AppLayoutKey, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_COLLAPSED_WIDTH_CARD } from './appLayoutContext'
 
 interface Props {
 	sidebarWidth?: string
 	sidebarCardStyle?: boolean
 	defaultOpen?: boolean
+	/** v-model:open — controlled sidebar state */
+	open?: boolean
+	/** Persist sidebar state to localStorage (desktop only). Default true. */
+	persist?: boolean
+	storageKey?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	sidebarWidth: '260px',
 	sidebarCardStyle: false,
 	defaultOpen: true,
+	open: undefined,
+	persist: true,
+	storageKey: 'bgl-sidebar-open',
 })
 
-// Menu state
-const isOpen = ref(props.defaultOpen)
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+function readStored(): boolean | undefined {
+	if (!props.persist || typeof localStorage === 'undefined') { return undefined }
+	const raw = localStorage.getItem(props.storageKey)
+	return raw === null ? undefined : raw === 'true'
+}
+
+const isOpen = ref(props.open ?? readStored() ?? props.defaultOpen)
 const isMobile = ref(false)
 
-// Check if mobile
+const sidebarCollapsedWidth = props.sidebarCardStyle ? SIDEBAR_COLLAPSED_WIDTH_CARD : SIDEBAR_COLLAPSED_WIDTH
+
+// Sync controlled prop → internal state
+watch(() => props.open, (v) => {
+	if (v !== undefined) { isOpen.value = v }
+})
+
+watch(isOpen, (v) => {
+	emit('update:open', v)
+	// Persist only explicit desktop state — never the forced mobile collapse
+	if (props.persist && !isMobile.value && typeof localStorage !== 'undefined') {
+		localStorage.setItem(props.storageKey, String(v))
+	}
+})
+
 function checkMobile() {
-	isMobile.value = window.innerWidth < 910
+	isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT
 	if (isMobile.value) {
 		isOpen.value = false
 	}
 }
 
-// Toggle menu
 function toggleMenu() {
 	isOpen.value = !isOpen.value
 }
 
+// Esc closes the sidebar overlay on mobile
+useEscapeKey(() => { isOpen.value = false }, () => isMobile.value && isOpen.value)
+
 // Close menu on mobile when clicking outside
 function closeOnMobile() {
 	if (isMobile.value) {
@@ -42,26 +76,21 @@ const mainContentStyles = computed(() => {
 	if (isMobile.value) {
 		return { marginInlineStart: '0' }
 	}
-	const collapsedWidth = props.sidebarCardStyle ? '82px' : '66px'
 	return {
-		marginInlineStart: isOpen.value ? props.sidebarWidth : collapsedWidth
+		marginInlineStart: isOpen.value ? props.sidebarWidth : sidebarCollapsedWidth
 	}
 })
 
-// Provide state to child components
-provide('menuState', {
+provide(AppLayoutKey, {
 	isOpen,
 	isMobile,
 	toggleMenu,
 	closeOnMobile,
 	sidebarWidth: props.sidebarWidth,
-	sidebarCollapsedWidth: props.sidebarCardStyle ? '82px' : '66px'
+	sidebarCollapsedWidth,
+	sidebarCardStyle: props.sidebarCardStyle,
 })
 
-// Provide sidebar card style based on prop
-provide('sidebarCardStyle', { value: props.sidebarCardStyle })
-
-// Initialize
 onMounted(() => {
 	checkMobile()
 	window.addEventListener('resize', checkMobile)
@@ -82,7 +111,7 @@ onUnmounted(() => {
 		/>
 
 		<!-- Sidebar Slot -->
-		<slot name="sidebar" />
+		<slot name="sidebar" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 
 		<!-- Main Content Area -->
 		<main
@@ -90,11 +119,11 @@ onUnmounted(() => {
 			:style="mainContentStyles"
 		>
 			<!-- Header Slot -->
-			<slot name="header" />
+			<slot name="header" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 
 			<!-- Page Content -->
 			<div class="page-content overflow w-100p h-100p">
-				<slot />
+				<slot v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 			</div>
 		</main>
 	</div>

package/src/components/layout/AppSidebar.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { NavLink } from '@bagelink/vue'
 import { Btn, Icon } from '@bagelink/vue'
-import { inject, computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { resolveI18n } from '../../i18n'
+import { useAppLayout, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_COLLAPSED_WIDTH_CARD } from './appLayoutContext'
 
 // Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
@@ -24,13 +25,11 @@ interface Props {
 	frame?: boolean
 	activeRoutes?: string[]
 	centerlinks?: boolean
-	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	card: true,
 	centerlinks: false,
-	defaultOpen: true,
 	bgColor: 'var(--bgl-white)',
 	textColor: 'var(--bgl-black)',
 	activeColor: 'var(--bgl-black)',
@@ -43,32 +42,16 @@ const props = withDefaults(defineProps<Props>(), {
 const route = useRoute()
 const isTransitioning = ref(false)
 
-// Inject menu state from parent
-const _fallbackIsOpen = ref(props.defaultOpen)
-const _fallbackIsMobile = ref(false)
-
-const menuState = inject('menuState', {
-	isOpen: _fallbackIsOpen,
-	isMobile: _fallbackIsMobile,
-	closeOnMobile: () => void 0,
-	sidebarWidth: '260px',
-	sidebarCollapsedWidth: '66px',
-}) as {
-	isOpen: { value: boolean }
-	isMobile: { value: boolean }
-	closeOnMobile: () => void
-	sidebarWidth: string
-	sidebarCollapsedWidth: string
-}
+const { isOpen, isMobile, sidebarWidth, toggleMenu, closeOnMobile } = useAppLayout()
 
 // visually "open" during transition — prevents logo/padding from jumping immediately
-const isVisuallyOpen = computed(() => menuState.isOpen.value || isTransitioning.value)
+const isVisuallyOpen = computed(() => isOpen.value || isTransitioning.value)
 
 // Watch for changes in menu state to handle transitioning
 watch(
-	() => menuState.isOpen.value,
+	() => isOpen.value,
 	() => {
-		if (!menuState.isMobile.value) {
+		if (!isMobile.value) {
 			isTransitioning.value = true
 			// Reset after transition completes
 			setTimeout(() => {
@@ -134,9 +117,9 @@ function isActiveRoute(link: LinkWithAction): boolean {
 const sidebarStyles = computed(() => {
 	let width = '280px'
 
-	if (!menuState.isMobile.value) {
-		const collapsedWidth = props.card ? '82px' : '68px'
-		width = menuState.isOpen.value ? menuState.sidebarWidth : collapsedWidth
+	if (!isMobile.value) {
+		const collapsedWidth = props.card ? SIDEBAR_COLLAPSED_WIDTH_CARD : SIDEBAR_COLLAPSED_WIDTH
+		width = isOpen.value ? sidebarWidth : collapsedWidth
 	}
 
 	return {
@@ -147,20 +130,20 @@ const sidebarStyles = computed(() => {
 
 <template>
 	<aside
+		id="bgl-app-sidebar"
 		class="app-sidebar transition-400 fixed start top bottom h-100vh z-99" :class="{
-			'sidebar-mobile-open': menuState.isMobile.value && menuState.isOpen.value,
-			'sidebar-mobile-closed':
-				menuState.isMobile.value && !menuState.isOpen.value,
+			'sidebar-mobile-open': isMobile && isOpen,
+			'sidebar-mobile-closed': isMobile && !isOpen,
 			'transitioning': isTransitioning,
 			'p-05': props.card,
-			'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
+			'sidebar-collapsed': !isMobile && !isOpen,
 		}" :style="sidebarStyles"
 	>
 		<div
 			:style="{
 				backgroundColor: props.bgColor,
 				color: props.textColor,
-				...(props.card && { borderRadius: 'var(--card-border-radius)' }),
+				...(props.card && { borderRadius: 'var(--bgl-card-border-radius)' }),
 			}" :class="{
 				'card cardWrapSide': props.card,
 				'px-05': !isVisuallyOpen,
@@ -186,7 +169,7 @@ const sidebarStyles = computed(() => {
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start" :class="{ 'justify-content-center': props.centerlinks }">
 				<Btn
 					v-for="link in props.navLinks" :key="link.to"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" fullWidth
+					:title="!isOpen && !isMobile ? resolveI18n(link.label) : ''" fullWidth
 					alignTxt="start" class="flex-shrink-0 px-075" :class="{ 'nav-btn-active': isActiveRoute(link) }"
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
@@ -205,7 +188,7 @@ const sidebarStyles = computed(() => {
 				<!-- Footer Links -->
 				<Btn
 					v-for="link in props.footerLinks" :key="link.to || link.label"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''"
+					:title="!isOpen && !isMobile ? resolveI18n(link.label) : ''"
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
@@ -219,7 +202,7 @@ const sidebarStyles = computed(() => {
 					</span>
 				</Btn>
 				<!-- Custom Footer Content Slot -->
-				<slot name="footer" />
+				<slot name="footer" v-bind="{ isOpen, isMobile, toggleMenu, closeOnMobile }" />
 			</div>
 		</div>
 	</aside>
@@ -227,7 +210,7 @@ const sidebarStyles = computed(() => {
 
 <style>
 .aside_frame {
-	outline: 1px solid var(--border-color);
+	outline: 1px solid var(--bgl-border-color);
 }
 
 .card .aside_frame {
@@ -236,7 +219,7 @@ const sidebarStyles = computed(() => {
 
 .app-sidebar {
 	transition: width 0.4s ease;
-	--input-font-size: 0.875rem;
+	--bgl-input-font-size: 0.875rem;
 	/* 14px */
 }
 

package/src/components/layout/BottomMenu.vue

@@ -59,7 +59,7 @@ defineProps<{
 }
 
 .bgl_bottombar .nav-button {
-  border-radius: var(--card-border-radius);
+  border-radius: var(--bgl-card-border-radius);
 
 }
 

package/src/components/layout/Resizable.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
 import { RESIZABLE_KEY, useResizableLayoutProvider } from '../../composables/useResizableLayout'
+import { MOBILE_BREAKPOINT } from '../../utils/constants'
+
+defineOptions({ name: 'BglResizable' })
 
 interface Props {
 	/** Lay panels side-by-side. Default: vertical (stacked). */
@@ -11,14 +14,14 @@ interface Props {
 	 * Set `:breakpoint="0"` to disable responsive switching entirely.
 	 */
 	mobileVertical?: boolean
-	/** Width (px) below which the mobile layout activates. @default 768 */
+	/** Width (px) below which the mobile layout activates. @default MOBILE_BREAKPOINT (910) */
 	breakpoint?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	horizontal: false,
 	mobileVertical: true,
-	breakpoint: 768,
+	breakpoint: MOBILE_BREAKPOINT,
 })
 
 const containerEl = ref<HTMLElement>()

package/src/components/layout/Skeleton.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+defineOptions({ name: 'BglSkeleton' })
 const {
 	count = 1,
 	height,
 	width,
-	borderRadius = 'var(--skeleton-radius)',
+	borderRadius = 'var(--bgl-skeleton-radius)',
 	round = false,
 	class: className = '',
 } = defineProps<{
@@ -31,11 +32,11 @@ const slots: SetupContext['slots'] = useSlots()
 
 <style scoped>
 .skeleton-wrap {
-	margin-bottom: var(--skeleton-margin);
+	margin-bottom: var(--bgl-skeleton-margin);
 }
 
 .skeleton {
-	background-color: var(--skeleton-bg);
+	background-color: var(--bgl-skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
     position: relative;
@@ -44,7 +45,7 @@ const slots: SetupContext['slots'] = useSlots()
 
 .skeleton::before {
     content: "";
-    background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
+    background: linear-gradient(90deg, transparent 20%, var(--bgl-skeleton-pulse) 50%, transparent 80%);
     animation: loadingAnimation 1s ease-in-out infinite;
     position: absolute;
     inset: 0px;