picocrank 1.25.2 → 1.27.0

package/vue/components/form-validation.spec.js

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+import {
+	flushControlState,
+	MIN_COMMENTS_LENGTH,
+	mountLoginValidationForm,
+	mountValidationForm,
+} from '../test/formTestUtils.js'
+
+describe('form validation integration', () => {
+	it('blocks submit and surfaces native required validation for empty email', async () => {
+		const { wrapper, submitted } = mountValidationForm()
+
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(false)
+		expect(wrapper.find('#email').element.validationMessage).not.toBe('')
+	})
+
+	it('shows computed email format errors as the user types', async () => {
+		const { wrapper } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('not-an-email')
+		await flushControlState()
+
+		expect(wrapper.find('#email').element.getAttribute('aria-invalid')).toBe('true')
+		expect(wrapper.text()).toContain('Enter a valid email address.')
+	})
+
+	it('clears email errors when a valid address is entered', async () => {
+		const { wrapper } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('not-an-email')
+		await flushControlState()
+		await wrapper.find('#email').setValue('user@example.com')
+		await flushControlState()
+
+		expect(wrapper.find('#email').element.hasAttribute('aria-invalid')).toBe(false)
+		expect(wrapper.findAll('.form-field-error')).toHaveLength(0)
+	})
+
+	it('shows comments length validation only when comments are non-empty', async () => {
+		const { wrapper } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		await wrapper.find('#comments').setValue('Too short')
+		await flushControlState()
+
+		expect(wrapper.text()).toContain(`Comments must be at least ${MIN_COMMENTS_LENGTH} characters.`)
+	})
+
+	it('allows submit when email is valid and comments are empty', async () => {
+		const { wrapper, submitted } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(true)
+	})
+
+	it('blocks submit for conflicting accessibility selections via validate()', async () => {
+		const { wrapper, submitted, formData } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		formData.value.accessibility = ['high-contrast', 'low-contrast']
+		await flushControlState()
+
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(false)
+		expect(wrapper.text()).toContain('High contrast and low contrast UI cannot both be selected.')
+	})
+
+	it('submits when accessibility selections are compatible', async () => {
+		const { wrapper, submitted, formData } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		formData.value.accessibility = ['high-contrast']
+		await flushControlState()
+
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(true)
+	})
+})
+
+describe('Login-style server validation', () => {
+	it('maps password errors to the password field', async () => {
+		const { wrapper } = mountLoginValidationForm()
+
+		wrapper.vm.applyServerErrors({ password: 'Incorrect password.' })
+		await flushControlState()
+
+		expect(wrapper.find('#password').element.getAttribute('aria-invalid')).toBe('true')
+		expect(wrapper.text()).toContain('Incorrect password.')
+		expect(wrapper.find('.login-form-error').exists()).toBe(false)
+	})
+
+	it('maps server failures to a form-level NotificationBlock', async () => {
+		const { wrapper } = mountLoginValidationForm()
+
+		wrapper.vm.applyServerErrors({ form: 'Unable to reach authentication service.' })
+		await flushControlState()
+
+		expect(wrapper.find('.login-form-error').exists()).toBe(true)
+		expect(wrapper.find('.login-form-error').attributes('role')).toBe('alert')
+		expect(wrapper.text()).toContain('Unable to reach authentication service.')
+		expect(wrapper.find('#username').element.hasAttribute('aria-invalid')).toBe(false)
+	})
+
+	it('clears field errors when the user edits the control', async () => {
+		const { wrapper, passwordError } = mountLoginValidationForm()
+
+		wrapper.vm.applyServerErrors({ password: 'Incorrect password.' })
+		await flushControlState()
+
+		await wrapper.find('#password').setValue('new-secret')
+		await flushControlState()
+
+		expect(passwordError.value).toBe('')
+		expect(wrapper.find('#password').element.hasAttribute('aria-invalid')).toBe(false)
+	})
+})

package/vue/composables/tableColumnPriorities.js

@@ -0,0 +1,33 @@
+export function isValidColPriority(priority) {
+	return Number.isInteger(priority) && priority >= 1 && priority <= 5
+}
+
+/** Default responsive priority by visible column index (0-based). First column has no auto priority. */
+export function autoColumnPriorityForIndex(index) {
+	if (index <= 0) {
+		return null
+	}
+	if (index === 1) {
+		return 5
+	}
+	if (index === 2) {
+		return 4
+	}
+	if (index === 3) {
+		return 3
+	}
+	if (index === 4) {
+		return 2
+	}
+	return 1
+}
+
+export function defaultColumnPriorityForIndex(header, index, responsiveColumns = true) {
+	if (isValidColPriority(header?.colPriority)) {
+		return header.colPriority
+	}
+	if (!responsiveColumns) {
+		return null
+	}
+	return autoColumnPriorityForIndex(index)
+}

package/vue/composables/tableFilters.js

@@ -120,7 +120,7 @@ export function filterEntrySpec(entry) {
 		return null
 	}
 
-	const { id, name, enabled, ...filter } = entry
+	const { id: _id, name: _name, enabled: _enabled, ...filter } = entry
 	return filter
 }
 

package/vue/data/navSectionHubs.js

@@ -0,0 +1,196 @@
+import { Pin02Icon } from '@hugeicons/core-free-icons'
+
+export const topBarHubRoutes = [
+	'NavLayoutsHub',
+	'NavDataDisplayHub',
+	'NavFormsInputHub',
+	'NavFeedbackStatusHub',
+	'NavPatternsHub',
+]
+
+export function helloWorld() {
+	alert('Hello World')
+}
+
+export const navSectionHubs = {
+	NavLayoutsHub: {
+		title: 'Layouts',
+		subtitle: 'Page structure, navigation, and application shell',
+		sectionId: 'nav-layouts',
+		links: [
+			{
+				name: 'PageStructure',
+				options: { description: 'Configure the example app shell' },
+			},
+			{
+				name: 'ThemePreview',
+				title: 'Theme Switcher',
+				options: { description: 'Drop-in themes on Femtocrank' },
+			},
+			{
+				name: 'ViewItem',
+				title: 'View item',
+				options: { params: { id: 1 }, description: 'Detail view with breadcrumbs' },
+			},
+			{
+				name: 'NavigationGridExample',
+				title: 'Navigation Grid',
+				options: { description: 'Icon grid for settings hubs' },
+			},
+			{
+				name: 'Admin',
+				options: { description: 'Admin-style section layout' },
+			},
+			{
+				name: 'TabsExample',
+				title: 'Tabs',
+				options: { description: 'Tabbed content regions' },
+			},
+		],
+	},
+	NavDataDisplayHub: {
+		title: 'Data display',
+		subtitle: 'Tables, calendars, and read-only output',
+		sectionId: 'nav-data',
+		links: [
+			{
+				name: 'TableExample',
+				title: 'Table',
+				options: { description: 'Sorting, pagination, and filters' },
+			},
+			{
+				name: 'TableRemoteExample',
+				title: 'Remote table',
+				options: { description: 'Server-style fetchRows pagination and filters' },
+			},
+			{
+				name: 'CalendarExample',
+				title: 'Calendar',
+				options: { description: 'Month view with events' },
+			},
+			{
+				name: 'ReadOnlyTextAreaExample',
+				title: 'Read-only output',
+				options: { description: 'Copyable read-only text areas' },
+			},
+		],
+	},
+	NavFormsInputHub: {
+		title: 'Forms & input',
+		subtitle: 'Buttons, forms, and authentication',
+		sectionId: 'nav-forms',
+		links: [
+			{
+				name: 'ButtonsExample',
+				title: 'Buttons',
+				options: { description: 'Button variants and toolbars' },
+			},
+			{
+				name: 'FormExample',
+				title: 'Forms',
+				options: { description: 'Labels, inputs, and fieldsets' },
+			},
+			{
+				name: 'LoginExample',
+				title: 'Login',
+				options: { description: 'Auth form with OAuth tabs' },
+			},
+		],
+	},
+	NavFeedbackStatusHub: {
+		title: 'Feedback & status',
+		subtitle: 'Notifications, dialogs, and inline status',
+		sectionId: 'nav-feedback',
+		links: [
+			{
+				name: 'StatusExample',
+				title: 'Status & notifications',
+				options: { description: 'Block, inline, and popup notifications' },
+			},
+			{
+				name: 'DialogExample',
+				title: 'Dialog',
+				options: { description: 'Modal dialogs and confirmations' },
+			},
+		],
+	},
+	NavPatternsHub: {
+		title: 'Patterns',
+		subtitle: 'Reusable UI patterns and interactions',
+		sectionId: 'nav-patterns',
+		links: [
+			{
+				type: 'callback',
+				title: 'Callback example',
+				callback: helloWorld,
+				options: {
+					icon: Pin02Icon,
+					description: 'Navigation item that runs a function instead of routing',
+				},
+			},
+		],
+	},
+}
+
+function registerNavLink(nav, link, { onHelloWorld = helloWorld } = {}) {
+	if (link.type === 'callback') {
+		const callback = link.callback ?? onHelloWorld
+		nav.addCallback(link.title, callback, link.options ?? {})
+		return
+	}
+
+	nav.addRouterLink(link.name, link.title ?? null, link.options ?? {})
+}
+
+/** Flat example list for the sidebar — hub routes are not registered here. */
+export function registerSidebarNavigation(nav, { onHelloWorld = helloWorld } = {}) {
+	if (!nav) {
+		return
+	}
+
+	nav.addRouterLink('Welcome')
+
+	for (const routeName of topBarHubRoutes) {
+		const hub = navSectionHubs[routeName]
+		nav.addSection(hub.title, { name: hub.sectionId })
+
+		for (const link of hub.links) {
+			registerNavLink(nav, link, { onHelloWorld })
+		}
+	}
+}
+
+/** Hub category links for the header top bar. */
+export function registerTopBarNavigation(nav) {
+	if (!nav) {
+		return
+	}
+
+	for (const routeName of topBarHubRoutes) {
+		nav.addRouterLink(routeName)
+	}
+}
+
+/** Example links for a single hub page (NavigationGrid). */
+export function registerHubNavigation(nav, hubRouteName, { onHelloWorld = helloWorld } = {}) {
+	const hub = navSectionHubs[hubRouteName]
+	if (!nav || !hub) {
+		return
+	}
+
+	for (const link of hub.links) {
+		registerNavLink(nav, link, { onHelloWorld })
+	}
+}
+
+/** Hub overview grid for the welcome page. */
+export function registerWelcomeHubGrid(nav) {
+	if (!nav) {
+		return
+	}
+
+	for (const routeName of topBarHubRoutes) {
+		const hub = navSectionHubs[routeName]
+		nav.addRouterLink(routeName, hub.title, { description: hub.subtitle })
+	}
+}

package/vue/data/routeBreadcrumbs.js

@@ -0,0 +1,90 @@
+import { navSectionHubs, topBarHubRoutes } from './navSectionHubs.js'
+
+/** Example route name → hub route name (from navSectionHubs). */
+const routeToHub = Object.fromEntries(
+	topBarHubRoutes.flatMap((hubRouteName) =>
+		navSectionHubs[hubRouteName].links
+			.filter((link) => link.name)
+			.map((link) => [link.name, hubRouteName]),
+	),
+)
+
+export function welcomeCrumb() {
+	return { name: 'Welcome', to: { name: 'Welcome' } }
+}
+
+export function hubMenuItems() {
+	return topBarHubRoutes.map((hubRouteName) => {
+		const hub = navSectionHubs[hubRouteName]
+		return {
+			name: hub.title,
+			to: { name: hubRouteName },
+		}
+	})
+}
+
+/** Hub section picker — all example categories in one dropdown. */
+export function hubMenuCrumb(activeHubRouteName) {
+	const hub = navSectionHubs[activeHubRouteName]
+	return {
+		name: hub.title,
+		to: { name: activeHubRouteName },
+		menu: hubMenuItems(),
+	}
+}
+
+export function routeCrumb(routeName, title, params = undefined) {
+	return {
+		name: title,
+		to: params ? { name: routeName, params } : { name: routeName },
+	}
+}
+
+/** Welcome → hub section (hub landing pages). */
+export function hubSectionBreadcrumbs(hubRouteName) {
+	return () => [welcomeCrumb(), hubMenuCrumb(hubRouteName)]
+}
+
+/** Welcome → hub menu → example page (most grid-linked examples). */
+export function hubChildBreadcrumbs(hubRouteName, routeName, title) {
+	return () => [
+		welcomeCrumb(),
+		hubMenuCrumb(hubRouteName),
+		routeCrumb(routeName, title),
+	]
+}
+
+/** Resolve hub for a route name when only the child is known. */
+export function hubForRoute(routeName) {
+	return routeToHub[routeName] ?? null
+}
+
+const viewItemLabels = {
+	1: 'Acme deployment',
+	Alice: 'Alice',
+	Bob: 'Bob',
+}
+
+export function viewItemLabel(id) {
+	const key = String(id)
+	if (viewItemLabels[key]) {
+		return viewItemLabels[key]
+	}
+	return key.charAt(0).toUpperCase() + key.slice(1)
+}
+
+/** Table row detail: Welcome → hub menu → Table → record. */
+export function viewItemBreadcrumbs(route) {
+	const id = route.params.id
+	return [
+		welcomeCrumb(),
+		hubMenuCrumb('NavDataDisplayHub'),
+		routeCrumb('TableExample', 'Table'),
+		routeCrumb('ViewItem', viewItemLabel(id), { id }),
+	]
+}
+
+/** Standalone pages with no hub parent. */
+export function standaloneBreadcrumbs(routeName, title) {
+	return () => [welcomeCrumb(), routeCrumb(routeName, title)]
+}

package/vue/examples/Admin.vue

@@ -10,28 +10,28 @@
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
 				
 				<div class="grid-boxed">
-					<div class="stat-display">
+					<div class="stat-display good">
 						<h4>Total Users</h4>
-						<div class="stat fg-good">1,247</div>
-						<div class="subtle">+12% from last month</div>
+						<span class="stat">1,247</span>
+						<span class="subtle">+12% from last month</span>
 					</div>
 					
-					<div class="stat-display">
+					<div class="stat-display bad">
 						<h4>Active Sessions</h4>
-						<div class="stat fg-bad">89</div>
-						<div class="subtle">-3% from last hour</div>
+						<span class="stat">89</span>
+						<span class="subtle">-3% from last hour</span>
 					</div>
 					
-					<div class="stat-display">
+					<div class="stat-display warning">
 						<h4>System Load</h4>
-						<div class="stat fg-warning">67%</div>
-						<div class="subtle">Moderate</div>
+						<span class="stat">67%</span>
+						<span class="subtle">Moderate</span>
 					</div>
 					
-					<div class="stat-display">
+					<div class="stat-display good">
 						<h4>Storage Used</h4>
-						<div class="stat fg-good">2.4 GB</div>
-						<div class="subtle">45% of total</div>
+						<span class="stat">2.4 GB</span>
+						<span class="subtle">45% of total</span>
 					</div>
 				</div>
 			</div>

package/vue/examples/App.vue

@@ -1,6 +1,21 @@
 <template>
 	<Navigation ref="navigation">
-		<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" @userClick="goToUserDetails" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="themeToggleEnabled">
+		<Navigation ref="topBarNavigation">
+			<Header
+				username="Guest"
+				@toggleSidebar="toggleSidebar"
+				@logoClick="goToIndex"
+				@userClick="goToUserDetails"
+				title="PicoCrank"
+				:logoUrl="logoUrl"
+				:sidebarEnabled="sidebarEnabled"
+				:navigation="navigation"
+				:topBarNavigation="topBarNavigation"
+				:topBarEnabled="topBarEnabled"
+				:showBranding="brandingEnabled"
+				:breadcrumbs="breadcrumbsEnabled"
+				:themeToggleEnabled="themeToggleEnabled"
+			>
 			<template #toolbar>
 				<ExampleHeaderThemeSwitcher
 					v-if="themeSwitcherEnabled"
@@ -16,6 +31,7 @@
 				/>
 			</template>
 		</Header>
+		</Navigation>
 
 		<div id = "layout">
 			<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
@@ -38,7 +54,7 @@
 <script setup>
 	import { ref, onMounted, provide, watch } from 'vue';
 	import { useRouter } from 'vue-router';
-	import { Pin02Icon, UserIcon } from '@hugeicons/core-free-icons'
+	import { UserIcon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
 	import ExampleHeaderThemeSwitcher from './ExampleHeaderThemeSwitcher.vue'
@@ -48,12 +64,18 @@
 	import '../composables/useTheme.js'
 	import { initCustomTheme } from '../composables/useCustomTheme.js'
 	import { examplePeople } from '../data/examplePeople.js'
+	import {
+		helloWorld,
+		registerSidebarNavigation,
+		registerTopBarNavigation,
+	} from '../data/navSectionHubs.js'
 	import logoUrl from '/logo.png';
 
 	const router = useRouter();
 	const quickSearchRef = ref(null)
 	const sidebar = ref(null);
 	const navigation = ref(null);
+	const topBarNavigation = ref(null);
 	const sidebarEnabled = ref(true);
 	const brandingEnabled = ref(true);
 	const quickSearchEnabled = ref(true);
@@ -62,7 +84,7 @@
 	const themeSwitcherEnabled = ref(true);
 	const includeSupplementalThemes = ref(true);
 	const topBarEnabled = ref(false);
-	const breadcrumbsEnabled = ref(false);
+	const breadcrumbsEnabled = ref(true);
 
 	const { discoverThemes } = initCustomTheme({ includeSupplementalThemes: true });
 
@@ -188,35 +210,8 @@
 	onMounted(() => {
 		discoverThemes()
 
-		if (navigation.value) {
-			navigation.value.addRouterLink('Welcome')
-
-			navigation.value.addSection('Layouts', { name: 'nav-layouts' })
-			navigation.value.addRouterLink('PageStructure', 'Page structure')
-			navigation.value.addRouterLink('ThemePreview', 'Theme Switcher')
-			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('TableRemoteExample', 'Remote 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.addRouterLink('DialogExample', 'Dialog')
-
-			navigation.value.addSection('Patterns', { name: 'nav-patterns' })
-			navigation.value.addCallback('Callback example', helloWorld, { icon: Pin02Icon })
-		}
+		registerSidebarNavigation(navigation.value, { onHelloWorld: helloWorld })
+		registerTopBarNavigation(topBarNavigation.value)
 
 		if (sidebar.value) {
 			sidebar.value.open();
@@ -226,8 +221,4 @@
 		registerQuickSearchItems()
 	});
 
-	function helloWorld() {
-		alert('Hello World')
-	}
-
 </script>