picocrank 1.18.2 → 1.18.3

package/vue/components/NotificationPopups.vue

@@ -0,0 +1,73 @@
+<template>
+	<Teleport to="body">
+		<div
+			class="notification-popup-stack"
+			aria-live="polite"
+			aria-relevant="additions"
+		>
+			<TransitionGroup name="notification-popup">
+				<NotificationPopup
+					v-for="popup in notificationPopups"
+					:key="popup.id"
+					:popup="popup"
+					@dismiss="dismissNotificationPopup"
+				/>
+			</TransitionGroup>
+		</div>
+	</Teleport>
+</template>
+
+<script setup>
+import { onUnmounted } from 'vue'
+import NotificationPopup from './NotificationPopup.vue'
+import {
+	notificationPopups,
+	dismissNotificationPopup,
+	dismissAllNotificationPopups,
+	showNotificationPopup,
+	clearNotificationPopupTimers,
+} from '../composables/useNotificationPopups.js'
+
+onUnmounted(() => {
+	clearNotificationPopupTimers()
+})
+
+defineExpose({
+	popups: notificationPopups,
+	show: showNotificationPopup,
+	dismiss: dismissNotificationPopup,
+	dismissAll: dismissAllNotificationPopups,
+})
+</script>
+
+<style scoped>
+.notification-popup-stack {
+	position: fixed;
+	right: 1rem;
+	bottom: 1rem;
+	z-index: 1000;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	pointer-events: none;
+}
+
+.notification-popup-stack :deep(.notification-popup) {
+	pointer-events: auto;
+}
+
+.notification-popup-enter-active,
+.notification-popup-leave-active {
+	transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.notification-popup-enter-from,
+.notification-popup-leave-to {
+	opacity: 0;
+	transform: translateX(1rem);
+}
+
+.notification-popup-move {
+	transition: transform 0.3s ease;
+}
+</style>

package/vue/components/Pagination.vue

@@ -215,7 +215,7 @@ option {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
   .pagination-text {
 	color: #adb5bd;
   }

package/vue/components/QuickSearch.vue

@@ -437,7 +437,7 @@ mark {
 }
 
 /* Dark theme */
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
   .search-input {
     background-color: #1f2937;
     border-color: #374151;

package/vue/components/Sidebar.vue

@@ -15,43 +15,177 @@
 
 			<nav class="mainnav">
 				<ul class="navigation-links">
-					<li v-for="link in navigationLinks" :key="link.name" :title="link.title">
-						<!-- Render separator if link is a separator -->
-						<div v-if="link.type === 'separator'" class="separator"></div>
-						<div v-else-if="link.type === 'callback'">
-							<a href="#" @click.prevent="handleLinkClick(() => link.callback())">
-								<HugeiconsIcon :icon="link.icon" />
-								<span>{{ link.title }}</span>
-							</a>
-						</div>
-						<div v-else-if="link.type === 'html'" v-html="link.html"></div>
-					<router-link v-else v-bind="link.props || {}" :to="link.to || link.path" :class="{ active: isActive(link) }" @click="handleLinkClick()">
-						<HugeiconsIcon :icon="link.icon" />
-						<span>{{ link.title }}</span>
-					</router-link>
-					</li>
+					<template v-for="item in visibleNavItems" :key="item.key">
+						<li v-if="item.kind === 'section-header'" class="nav-section-header-item">
+							<button
+								type="button"
+								class="nav-section-header"
+								:aria-expanded="!item.collapsed"
+								:aria-controls="`nav-section-${item.section.id}`"
+								@click="toggleSection(item.section.id)"
+							>
+								<span>{{ item.section.title }}</span>
+								<HugeiconsIcon
+									:icon="item.collapsed ? ArrowRight01Icon : ArrowDown01Icon"
+									width="0.85em"
+									height="0.85em"
+									class="nav-section-chevron"
+								/>
+							</button>
+						</li>
+
+						<li
+							v-else
+							:title="item.link.title"
+						>
+							<div v-if="item.link.type === 'separator'" class="separator"></div>
+							<div v-else-if="item.link.type === 'callback'">
+								<a href="#" @click.prevent="handleLinkClick(() => item.link.callback())">
+									<HugeiconsIcon :icon="item.link.icon" />
+									<span>{{ item.link.title }}</span>
+								</a>
+							</div>
+							<div v-else-if="item.link.type === 'html'" v-html="item.link.html"></div>
+							<router-link
+								v-else
+								v-bind="item.link.props || {}"
+								:to="item.link.to || item.link.path"
+								:class="{ active: isActive(item.link) }"
+								@click="handleLinkClick()"
+							>
+								<HugeiconsIcon :icon="item.link.icon" />
+								<span>{{ item.link.title }}</span>
+							</router-link>
+						</li>
+					</template>
 				</ul>
 			</nav>
 	</aside>
 </template>
 
 <script setup>
-import { ref, inject, onUnmounted, watch, nextTick } from 'vue'
+import { ref, inject, onUnmounted, watch, nextTick, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { Pin02Icon } from '@hugeicons/core-free-icons'
-import { PinIcon } from '@hugeicons/core-free-icons'
+import { Pin02Icon, PinIcon, ArrowDown01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons'
+
+const STORAGE_KEY = 'picocrank-nav-sections-collapsed'
 
 const isOpen = ref(false)
 const isStuck = ref(false)
 const sidebarRef = ref(null)
+const route = useRoute()
 
-// Get navigation from Navigation component
 const navigation = inject('navigation', null)
 
-// Get navigation links and isActive function from navigation
 const navigationLinks = navigation ? navigation.navigationLinks : ref([])
 const isActive = navigation ? navigation.isActive : (() => false)
 
+function loadCollapsedSections() {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY)
+		if (!raw) return new Set()
+		const parsed = JSON.parse(raw)
+		return new Set(Array.isArray(parsed) ? parsed : [])
+	} catch {
+		return new Set()
+	}
+}
+
+const collapsedSections = ref(loadCollapsedSections())
+
+function saveCollapsedSections() {
+	localStorage.setItem(STORAGE_KEY, JSON.stringify([...collapsedSections.value]))
+}
+
+function isSectionCollapsed(sectionId) {
+	return collapsedSections.value.has(sectionId)
+}
+
+function toggleSection(sectionId) {
+	const next = new Set(collapsedSections.value)
+	if (next.has(sectionId)) {
+		next.delete(sectionId)
+	} else {
+		next.add(sectionId)
+	}
+	collapsedSections.value = next
+	saveCollapsedSections()
+}
+
+const navigationGroups = computed(() => {
+	const ungrouped = []
+	const sections = []
+	let currentSection = null
+
+	for (const link of navigationLinks.value) {
+		if (link.type === 'section') {
+			currentSection = { id: link.name, title: link.title, items: [] }
+			sections.push(currentSection)
+			continue
+		}
+
+		if (link.type === 'separator') {
+			continue
+		}
+
+		if (currentSection) {
+			currentSection.items.push(link)
+		} else {
+			ungrouped.push(link)
+		}
+	}
+
+	return { ungrouped, sections }
+})
+
+const visibleNavItems = computed(() => {
+	const items = []
+
+	for (const link of navigationGroups.value.ungrouped) {
+		items.push({ key: link.name, kind: 'link', link })
+	}
+
+	for (const section of navigationGroups.value.sections) {
+		const collapsed = isSectionCollapsed(section.id)
+		items.push({
+			key: section.id,
+			kind: 'section-header',
+			section,
+			collapsed,
+		})
+
+		if (!collapsed) {
+			for (const link of section.items) {
+				items.push({
+					key: link.name,
+					kind: 'link',
+					link,
+				})
+			}
+		}
+	}
+
+	return items
+})
+
+function expandSectionContainingActiveRoute() {
+	for (const section of navigationGroups.value.sections) {
+		const hasActiveLink = section.items.some((link) => isActive(link))
+		if (!hasActiveLink || !isSectionCollapsed(section.id)) {
+			continue
+		}
+		const next = new Set(collapsedSections.value)
+		next.delete(section.id)
+		collapsedSections.value = next
+		saveCollapsedSections()
+	}
+}
+
+watch(() => route.fullPath, () => {
+	expandSectionContainingActiveRoute()
+}, { immediate: true })
+
 function toggleStick() {
   isStuck.value = !isStuck.value
 }
@@ -88,19 +222,15 @@ function handleLinkClick(callback = null) {
 }
 
 function handleClickOutside(event) {
-  // Only close if sidebar is open and unpinned
   if (!isOpen.value || isStuck.value) {
     return
   }
 
   const target = event.target
   
-  // Check if click is on the sidebar toggle button or its container
-  // These elements should not trigger the close action
   const sidebarButton = document.getElementById('sidebar-button')
   const sidebarTogglerButton = document.getElementById('sidebar-toggler-button')
   
-  // Don't close if clicking on toggle button or its parent container
   if (sidebarButton && sidebarButton.contains(target)) {
     return
   }
@@ -109,26 +239,21 @@ function handleClickOutside(event) {
     return
   }
 
-  // Check if click is outside the sidebar element
   if (sidebarRef.value && !sidebarRef.value.contains(target)) {
     close()
   }
 }
 
-// Watch for sidebar open/close state to manage event listener
 watch([isOpen, isStuck], ([open, stuck]) => {
   nextTick(() => {
     if (open && !stuck) {
-      // Add event listener when sidebar is open and unpinned
       document.addEventListener('click', handleClickOutside)
     } else {
-      // Remove event listener when sidebar is closed or pinned
       document.removeEventListener('click', handleClickOutside)
     }
   })
 }, { immediate: true })
 
-// Clean up event listener on unmount
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
 })
@@ -171,6 +296,31 @@ button {
 	border-radius: 0;
 }
 
+.nav-section-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	width: 100%;
+	padding: 0.75em;
+	text-align: left;
+	font-weight: 600;
+	font-size: 1em;
+	color: inherit;
+	background: transparent;
+	cursor: pointer;
+}
+
+.nav-section-header:hover {
+	background-color: var(--hover-background-color);
+	color: white;
+}
+
+.nav-section-chevron {
+	flex-shrink: 0;
+	opacity: 0.8;
+}
+
 .separator {
 	height: 1px;
 	background-color: #eee;
@@ -183,11 +333,15 @@ button {
 	text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
   .navigation-links a {
 	color: #f8f9fa;
   }
 
+  .nav-section-header {
+	color: #f8f9fa;
+  }
+
   .separator {
 	background-color: #444;
   }
@@ -206,4 +360,4 @@ button {
 	  left: 0;
   }
 }
-</style> 
+</style>

package/vue/components/Tabs.vue

@@ -197,7 +197,7 @@ defineExpose({
 }
 
 /* Dark theme support */
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
 	.tabs-header {
 		border-bottom-color: var(--border-color, #444);
 	}

package/vue/components/TopBar.vue

@@ -2,8 +2,10 @@
 	<nav class="topbar">
 		<div class="topbar-links flex-row">
 			<template v-for="link in navigationLinks" :key="link.name">
+				<!-- Skip section headers in the top bar -->
+				<template v-if="link.type === 'section'"></template>
 				<!-- Render separator as a divider -->
-				<div v-if="link.type === 'separator'" class="separator"></div>
+				<div v-else-if="link.type === 'separator'" class="separator"></div>
 				<!-- Render callback link -->
 				<a v-else-if="link.type === 'callback'" href="#" @click.prevent="handleLinkClick(() => link.callback())" class="button topbar-link">
 					<HugeiconsIcon :icon="link.icon" width="1em" height="1em" />
@@ -120,7 +122,7 @@ function handleLinkClick(callback = null) {
 	margin: 0 0.125rem;
 }
 
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
 	.topbar-link {
 		color: #f8f9fa;
 	}

package/vue/composables/useNotificationPopups.js

@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+
+export const NOTIFICATION_POPUPS_KEY = Symbol('notificationPopups')
+
+const DEFAULT_DURATION_MS = 5000
+
+export const notificationPopups = ref([])
+const timers = new Map()
+let nextId = 0
+
+function clearTimer(id) {
+	const timer = timers.get(id)
+	if (timer !== undefined) {
+		clearTimeout(timer)
+		timers.delete(id)
+	}
+}
+
+export function dismissNotificationPopup(id) {
+	clearTimer(id)
+	notificationPopups.value = notificationPopups.value.filter((popup) => popup.id !== id)
+}
+
+export function dismissAllNotificationPopups() {
+	for (const popup of notificationPopups.value) {
+		clearTimer(popup.id)
+	}
+	notificationPopups.value = []
+}
+
+export function showNotificationPopup(options = {}) {
+	const message = options.message?.trim()
+	if (!message) {
+		console.warn('[NotificationPopups] show() requires a message.')
+		return null
+	}
+
+	const id = options.id || `notification-popup-${Date.now()}-${nextId++}`
+	const popup = {
+		id,
+		message,
+		label: options.label || null,
+		class: options.class || 'info',
+		linkTo: options.linkTo || null,
+		linkLabel: options.linkLabel || null,
+		durationMs: options.durationMs ?? DEFAULT_DURATION_MS,
+	}
+
+	notificationPopups.value = [...notificationPopups.value, popup]
+
+	const durationMs = popup.durationMs
+	if (durationMs > 0) {
+		const timer = setTimeout(() => dismissNotificationPopup(id), durationMs)
+		timers.set(id, timer)
+	}
+
+	return id
+}
+
+/**
+ * Access the global notification popup stack.
+ * Requires `<NotificationPopups />` to be mounted (typically in App.vue).
+ */
+export function useNotificationPopups() {
+	return {
+		popups: notificationPopups,
+		show: showNotificationPopup,
+		dismiss: dismissNotificationPopup,
+		dismissAll: dismissAllNotificationPopups,
+	}
+}
+
+export function clearNotificationPopupTimers() {
+	for (const timer of timers.values()) {
+		clearTimeout(timer)
+	}
+	timers.clear()
+}

package/vue/composables/useTheme.js

@@ -0,0 +1,60 @@
+import { ref, computed, watch } from 'vue'
+
+const STORAGE_KEY = 'picocrank-theme'
+
+function getSystemTheme() {
+	if (typeof window === 'undefined') {
+		return 'light'
+	}
+	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function readStoredTheme() {
+	if (typeof window === 'undefined') {
+		return 'light'
+	}
+	const stored = localStorage.getItem(STORAGE_KEY)
+	if (stored === 'light' || stored === 'dark') {
+		return stored
+	}
+	return getSystemTheme()
+}
+
+function applyTheme(value) {
+	if (typeof document === 'undefined') {
+		return
+	}
+	document.documentElement.setAttribute('data-theme', value)
+}
+
+export const theme = ref(readStoredTheme())
+
+applyTheme(theme.value)
+
+watch(theme, (value) => {
+	applyTheme(value)
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem(STORAGE_KEY, value)
+	}
+})
+
+export function useTheme() {
+	const isDark = computed(() => theme.value === 'dark')
+
+	function toggleTheme() {
+		theme.value = theme.value === 'dark' ? 'light' : 'dark'
+	}
+
+	function setTheme(value) {
+		if (value === 'light' || value === 'dark') {
+			theme.value = value
+		}
+	}
+
+	return {
+		theme,
+		isDark,
+		toggleTheme,
+		setTheme,
+	}
+}

package/vue/views/App.vue

@@ -26,20 +26,22 @@
 			</div>
 		</div>
 	</Navigation>
+
+	<NotificationPopups />
 </template>
 
 <script setup>
 	import { ref, onMounted, provide } from 'vue';
-	import { useRouter } from 'vue-router';
-	import { Pin02Icon, SecurityValidationIcon, EditIcon, ViewIcon, HomeIcon } from '@hugeicons/core-free-icons'
+	import { Pin02Icon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
 	import Navigation from './../components/Navigation.vue'
+	import NotificationPopups from './../components/NotificationPopups.vue'
 	import '../../styles.css'
+	import '../composables/useTheme.js'
 	import logoUrl from '/logo.png';
 
 	const quickSearchRef = ref(null)
-	const router = useRouter();
 	const sidebar = ref(null);
 	const navigation = ref(null);
 	const sidebarEnabled = ref(true);
@@ -90,24 +92,29 @@
 	onMounted(() => {
 		if (navigation.value) {
 			navigation.value.addRouterLink('Welcome')
-			navigation.value.addRouterLink('TableExample')
-			navigation.value.addRouterLink('CalendarExample')
-			navigation.value.addRouterLink('FormExample')
-			navigation.value.addRouterLink('ReadOnlyTextAreaExample')
-			navigation.value.addRouterLink('TabsExample')
-			navigation.value.addSeparator('separator-1');
-			navigation.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })
-			navigation.value.addSeparator('separator-2');
-			navigation.value.addCallback('Callback Example', helloWorld, { icon: Pin02Icon })
-			navigation.value.addSeparator('separator-3');
-			navigation.value.addHtml('<h2 style = "padding: 0.75em;">Authentication</h2>', { name: 'auth-heading' })
-			navigation.value.addRouterLink('LoginExample')
-			navigation.value.addSeparator('separator-4');
-			navigation.value.addHtml('<h2 style = "padding: 0.75em;">User Control Panel</h2>', { name: 'user-panel-heading' })
-			navigation.value.addRouterLink('UserControlPanel')
-			navigation.value.addSeparator('separator-5');
-			navigation.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
+
+			navigation.value.addSection('Layouts', { name: 'nav-layouts' })
+			navigation.value.addRouterLink('PageStructure', 'Page structure')
+			navigation.value.addRouterLink('ViewItem', 'View item', { params: { id: 1 } })
+			navigation.value.addRouterLink('NavigationGridExample', 'Navigation Grid')
 			navigation.value.addRouterLink('Admin')
+			navigation.value.addRouterLink('TabsExample', 'Tabs')
+
+			navigation.value.addSection('Data display', { name: 'nav-data' })
+			navigation.value.addRouterLink('TableExample', 'Table')
+			navigation.value.addRouterLink('CalendarExample', 'Calendar')
+			navigation.value.addRouterLink('ReadOnlyTextAreaExample', 'Read-only output')
+
+			navigation.value.addSection('Forms & input', { name: 'nav-forms' })
+			navigation.value.addRouterLink('ButtonsExample', 'Buttons')
+			navigation.value.addRouterLink('FormExample', 'Forms')
+			navigation.value.addRouterLink('LoginExample', 'Login')
+
+			navigation.value.addSection('Feedback & status', { name: 'nav-feedback' })
+			navigation.value.addRouterLink('StatusExample', 'Status & notifications')
+
+			navigation.value.addSection('Patterns', { name: 'nav-patterns' })
+			navigation.value.addCallback('Callback example', helloWorld, { icon: Pin02Icon })
 		}
 
 		if (sidebar.value) {