picocrank 1.26.0 → 1.28.0

package/vue/examples/LoginExample.vue

@@ -1,6 +1,33 @@
 <template>
-	<Section title="Login Example" subtitle="A reusable login form component with local and OAuth2 authentication">
-		<Login 
+	<Section title="Simple login" subtitle="Username and password only" classes="narrow">
+		<Login ref="simpleLoginRef" local-only @local-login="handleSimpleLocalLogin" />
+	</Section>
+
+	<Section
+		title="Simulated server response"
+		subtitle="Choose what the server returns when you submit the simple login form above"
+		classes="narrow"
+	>
+		<FormField label="Response" component-has-label description="Field errors appear on username or password; server and network errors appear below the form.">
+			<RadioGroup
+				v-model="simulatedResponse"
+				name="login-sim-response"
+				variant="list"
+				:options="simulatedResponseOptions"
+			/>
+		</FormField>
+
+		<FormField label="Timing" component-has-label>
+			<label class="simulate-delay-label">
+				<input v-model="simulateDelay" type="checkbox" />
+				<span>Simulate slow response (1.5s)</span>
+			</label>
+		</FormField>
+	</Section>
+
+	<Section title="Login example" subtitle="Local, OAuth2, and custom authentication tabs" classes="narrow">
+		<Login
+			ref="fullLoginRef"
 			:oauth-providers="oauthProviders"
 			:custom-tabs="customTabs"
 			@local-login="handleLocalLogin"
@@ -56,6 +83,67 @@
 import { ref } from 'vue';
 import Section from '../components/Section.vue';
 import Login from '../components/Login.vue';
+import FormField from '../components/FormField.vue';
+import RadioGroup from '../components/RadioGroup.vue';
+
+const simpleLoginRef = ref(null);
+const fullLoginRef = ref(null);
+const simulatedResponse = ref('success');
+const simulateDelay = ref(false);
+
+const simulatedResponseOptions = [
+	{ value: 'success', label: 'Success' },
+	{ value: 'wrong-password', label: 'Wrong password' },
+	{ value: 'username-not-found', label: 'Username not found' },
+	{ value: 'account-locked', label: 'Account locked' },
+	{ value: 'server-error', label: 'Server error (500)' },
+	{ value: 'network-error', label: 'Network unavailable' },
+];
+
+const simulatedResponseMessages = {
+	'wrong-password': 'Incorrect password.',
+	'username-not-found': 'No account found for that username.',
+	'account-locked': 'This account is locked. Contact support.',
+	'server-error': 'Sign-in failed. Please try again later.',
+	'network-error': 'Could not reach the server. Check your connection.',
+};
+
+const SIMULATED_DELAY_MS = 1500;
+
+function resolveSimulatedLoginErrors(responseKey) {
+	const message = simulatedResponseMessages[responseKey];
+	if (!message) {
+		return null;
+	}
+	if (responseKey === 'wrong-password') {
+		return { password: message };
+	}
+	if (responseKey === 'username-not-found') {
+		return { username: message };
+	}
+	return { form: message };
+}
+
+async function handleSimpleLocalLogin(credentials) {
+	try {
+		if (simulateDelay.value) {
+			await new Promise((resolve) => setTimeout(resolve, SIMULATED_DELAY_MS));
+		}
+
+		const errors = resolveSimulatedLoginErrors(simulatedResponse.value);
+		if (errors) {
+			simpleLoginRef.value?.setLocalLoginErrors(errors);
+			return;
+		}
+
+		simpleLoginRef.value?.resetLocalForm();
+		alert(`Signed in as ${credentials.username}`);
+	} catch {
+		simpleLoginRef.value?.setLocalLoginErrors({
+			form: 'Sign-in failed. Please try again later.',
+		});
+	}
+}
 
 // Custom tabs configuration
 const customTabs = ref([
@@ -151,6 +239,7 @@ function handleLocalLogin(credentials) {
 
 	// Placeholder success
 	alert(`Local login would authenticate: ${credentials.username}`);
+	fullLoginRef.value?.setLocalLoginLoading(false);
 }
 
 // Handle OAuth login
@@ -220,6 +309,13 @@ function handleSSOLogin(provider) {
 </script>
 
 <style scoped>
+.simulate-delay-label {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	cursor: pointer;
+}
+
 .magic-link-form,
 .sso-providers {
 	display: flex;

package/vue/examples/PageStructure.vue

@@ -11,7 +11,7 @@
 
 	<Section title="Header" subtitle="Branding, search, and top navigation">
 		<FormLayout @submit.prevent>
-			<FormField label="Logo and title" fake>
+			<FormField label="Logo and title" component-has-label>
 				<RadioGroup
 					name="ps-branding"
 					variant="boolean"
@@ -22,7 +22,7 @@
 				/>
 			</FormField>
 
-			<FormField label="QuickSearch" fake>
+			<FormField label="QuickSearch" component-has-label>
 				<RadioGroup
 					name="ps-quicksearch"
 					variant="boolean"
@@ -33,7 +33,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Dummy background search" fake :disabled="!quickSearchEnabled">
+			<FormField label="Dummy background search" component-has-label :disabled="!quickSearchEnabled">
 				<div>
 					<RadioGroup
 						name="ps-dummy-search"
@@ -51,7 +51,7 @@
 				</div>
 			</FormField>
 
-			<FormField label="Dark/Light mode button" fake>
+			<FormField label="Dark/Light mode button" component-has-label>
 				<RadioGroup
 					name="ps-theme-toggle"
 					variant="boolean"
@@ -62,7 +62,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Theme switcher" fake>
+			<FormField label="Theme switcher" component-has-label>
 				<RadioGroup
 					name="ps-theme-switcher"
 					variant="boolean"
@@ -73,7 +73,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Top bar" fake>
+			<FormField label="Top bar" component-has-label>
 				<div>
 					<RadioGroup
 						name="ps-topbar"
@@ -92,7 +92,7 @@
 				</div>
 			</FormField>
 
-			<FormField label="Breadcrumbs" fake>
+			<FormField label="Breadcrumbs" component-has-label>
 				<RadioGroup
 					name="ps-breadcrumbs"
 					variant="boolean"
@@ -102,12 +102,29 @@
 					@update:model-value="setBreadcrumbsEnabled"
 				/>
 			</FormField>
+
+			<FormField label="Header username" component-has-label>
+				<div>
+					<RadioGroup
+						name="ps-header-username"
+						variant="list"
+						aria-label="Header username"
+						:model-value="headerUsername"
+						:options="headerUsernameOptions"
+						@update:model-value="setHeaderUsernameValue"
+					/>
+					<p class="subtle">
+						When no username is set, the header shows a Login link if
+						<code>loginRoute</code> is configured.
+					</p>
+				</div>
+			</FormField>
 		</FormLayout>
 	</Section>
 
 	<Section title="Sidebar" subtitle="Primary navigation panel">
 		<FormLayout @submit.prevent>
-			<FormField label="Sidebar navigation" fake>
+			<FormField label="Sidebar navigation" component-has-label>
 				<div>
 					<RadioGroup
 						name="ps-sidebar"
@@ -124,7 +141,7 @@
 				</div>
 			</FormField>
 
-			<FormField label="Example link states" fake>
+			<FormField label="Example link states" component-has-label>
 				<div>
 					<RadioGroup
 						name="ps-example-links"
@@ -174,6 +191,11 @@ const onOffOptions = [
 	{ label: 'Off', value: false },
 ]
 
+const headerUsernameOptions = [
+	{ label: 'No username', value: '' },
+	{ label: 'tester', value: 'tester' },
+]
+
 const sidebarEnabled = inject('sidebarEnabled')
 const toggleSidebarEnabled = inject('toggleSidebarEnabled')
 const brandingEnabled = inject('brandingEnabled')
@@ -190,6 +212,8 @@ const topBarEnabled = inject('topBarEnabled')
 const toggleTopBarEnabled = inject('toggleTopBarEnabled')
 const breadcrumbsEnabled = inject('breadcrumbsEnabled')
 const toggleBreadcrumbsEnabled = inject('toggleBreadcrumbsEnabled')
+const headerUsername = inject('headerUsername')
+const setHeaderUsername = inject('setHeaderUsername')
 const navigation = inject('navigation', null)
 
 const exampleLinksEnabled = ref(false)
@@ -228,6 +252,10 @@ function setBreadcrumbsEnabled(want) {
 	setFlag(breadcrumbsEnabled, toggleBreadcrumbsEnabled, want)
 }
 
+function setHeaderUsernameValue(username) {
+	setHeaderUsername(username)
+}
+
 function setSidebarEnabled(want) {
 	setFlag(sidebarEnabled, toggleSidebarEnabled, want)
 }

package/vue/examples/TableExample.vue

@@ -50,7 +50,7 @@
 		</template>
 
 		<FormLayout>
-			<FormField label="Data" fake description="Connect or disconnect row data for the table above. Saved column layouts persist in localStorage for this table.">
+			<FormField label="Data" component-has-label description="Connect or disconnect row data for the table above. Saved column layouts persist in localStorage for this table.">
 				<RadioGroup
 					v-model="dataConnected"
 					name="table-data-connection"
@@ -61,7 +61,7 @@
 
 			<FormField
 				label="Wide table"
-				fake
+				component-has-label
 				description="Adds extra columns (email, department, role, status) to the table."
 			>
 				<label>
@@ -70,7 +70,7 @@
 				</label>
 			</FormField>
 
-			<FormField label="Features" fake description="Toggle core table behaviour.">
+			<FormField label="Features" component-has-label description="Toggle core table behaviour.">
 				<CheckGroup
 					v-model="enabledFeatures"
 					name="table-features"
@@ -80,7 +80,7 @@
 
 			<FormField
 				label="Responsive layout"
-				fake
+				component-has-label
 				description="Column priorities hide lower-priority columns as the table narrows. Horizontal scroll keeps every column visible with optional sticky leading columns. Browser layout leaves column sizing to the viewport."
 			>
 				<RadioGroup
@@ -93,7 +93,7 @@
 			<FormField
 				v-if="layout === 'scroll'"
 				label="Sticky columns"
-				fake
+				component-has-label
 				description="Pin the first columns while scrolling horizontally."
 			>
 				<RadioGroup

package/vue/examples/TabsExample.vue

@@ -1,7 +1,7 @@
 <template>
 	<Section
 		title="Horizontal Tabs"
-		subtitle="A flexible tabbed control component with support for multiple tab panes"
+		subtitle="A flexible tabbed control component with support for multiple tab panes and disabled tabs"
 		:padding="horizontalTabsSectionPadding"
 	>
 		<template #toolbar>
@@ -13,6 +13,10 @@
 				<input v-model="horizontalTabsPadding" type="checkbox" />
 				Tab padding
 			</label>
+			<label class="tabs-padding-toggle">
+				<input v-model="detailsTabEnabled" type="checkbox" />
+				Enable Details tab
+			</label>
 		</template>
 
 		<Tabs
@@ -26,6 +30,8 @@
 					<p>
 						This is the Overview tab. It contains general information about the current topic.
 						You can place any content here, including forms, tables, images, or other components.
+						The <strong>Details</strong> tab starts disabled — use the toolbar checkbox to
+						enable it when elevated permissions are granted.
 					</p>
 					<ul>
 						<li>First item in the overview</li>
@@ -97,7 +103,7 @@
 
 	<Section
 		title="Vertical Tabs"
-		subtitle="Side tab strip with arrow-key navigation up and down"
+		subtitle="Side tab strip with arrow-key navigation up and down; disabled tabs are skipped"
 		:padding="verticalTabsSectionPadding"
 	>
 		<template #toolbar>
@@ -109,6 +115,10 @@
 				<input v-model="verticalTabsPadding" type="checkbox" />
 				Tab padding
 			</label>
+			<label class="tabs-padding-toggle">
+				<input v-model="advancedTabEnabled" type="checkbox" />
+				Enable Advanced tab
+			</label>
 		</template>
 
 		<Tabs
@@ -123,6 +133,7 @@
 					<p>
 						Vertical tabs place the tab list beside the panel. Use them when labels are
 						longer or when the layout mirrors a settings sidebar.
+						<strong>Advanced</strong> starts disabled — use the toolbar checkbox to enable it.
 					</p>
 				</div>
 			</template>
@@ -186,24 +197,47 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { computed, ref, reactive } from 'vue';
 import { HomeIcon, Settings01Icon, UserIcon, ViewIcon } from '@hugeicons/core-free-icons';
 import Section from '../components/Section.vue';
 import Tabs from '../components/Tabs.vue';
 import FormLayout from '../components/FormLayout.vue';
 import FormField from '../components/FormField.vue';
 
-const basicTabs = ref([
+const detailsTabEnabled = ref(false);
+const advancedTabEnabled = ref(false);
+
+const basicTabs = computed(() => [
 	{ id: 0, label: 'Overview', icon: HomeIcon },
-	{ id: 1, label: 'Details', icon: ViewIcon },
+	{
+		id: 1,
+		label: 'Details',
+		icon: ViewIcon,
+		...(detailsTabEnabled.value
+			? {}
+			: {
+				disabled: true,
+				disabledTitle: 'Details requires elevated permissions',
+			}),
+	},
 	{ id: 2, label: 'Settings', icon: Settings01Icon },
 ]);
 
-const verticalTabs = ref([
+const verticalTabs = computed(() => [
 	{ id: 'general', label: 'General', icon: HomeIcon },
 	{ id: 'appearance', label: 'Appearance', icon: Settings01Icon },
 	{ id: 'notifications', label: 'Notifications', icon: UserIcon },
-	{ id: 'advanced', label: 'Advanced', icon: Settings01Icon },
+	{
+		id: 'advanced',
+		label: 'Advanced',
+		icon: Settings01Icon,
+		...(advancedTabEnabled.value
+			? {}
+			: {
+				disabled: true,
+				disabledTitle: 'Advanced settings are not available for this account',
+			}),
+	},
 ]);
 
 const horizontalTabsSectionPadding = ref(true);

package/vue/test/formTestUtils.js

@@ -0,0 +1,279 @@
+import { mount } from '@vue/test-utils'
+import { computed, defineComponent, ref } from 'vue'
+import FormField from '../components/FormField.vue'
+import FormLayout from '../components/FormLayout.vue'
+import NotificationBlock from '../components/NotificationBlock.vue'
+
+export const routerLinkStub = {
+	name: 'RouterLink',
+	template: '<a><slot /></a>',
+}
+
+const defaultMountOptions = {
+	attachTo: document.body,
+}
+
+export function mountFormField(options = {}) {
+	const {
+		props = {},
+		slot = '<input id="test-input" />',
+		global = {},
+		attachTo = document.body,
+		...rest
+	} = options
+
+	return mount(FormField, {
+		...defaultMountOptions,
+		attachTo,
+		props: {
+			label: 'Test Field',
+			for: 'test-input',
+			...props,
+		},
+		slots: {
+			default: slot,
+		},
+		global: {
+			stubs: {
+				RouterLink: routerLinkStub,
+				...global.stubs,
+			},
+			...global,
+		},
+		...rest,
+	})
+}
+
+export function mountFormFieldWithError(initialError = '') {
+	const error = ref(initialError)
+
+	const wrapper = mount(
+		defineComponent({
+			components: { FormField },
+			setup() {
+				return { error }
+			},
+			template: `
+				<FormField label="Email" for="email" v-model:error="error">
+					<input id="email" />
+				</FormField>
+			`,
+		}),
+		{
+			attachTo: document.body,
+			global: {
+				stubs: {
+					RouterLink: routerLinkStub,
+				},
+			},
+		},
+	)
+
+	return { wrapper, error }
+}
+
+export async function flushControlState() {
+	const { nextTick } = await import('vue')
+	await nextTick()
+	await nextTick()
+}
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+export const MIN_COMMENTS_LENGTH = 50
+
+export function mountValidationForm() {
+	const formData = ref({
+		email: '',
+		comments: '',
+		accessibility: [],
+	})
+
+	const emailError = computed(() => {
+		const email = formData.value.email.trim()
+		if (!email) {
+			return 'Email is required.'
+		}
+		if (!EMAIL_PATTERN.test(email)) {
+			return 'Enter a valid email address.'
+		}
+		return ''
+	})
+
+	const commentsError = computed(() => {
+		const comments = formData.value.comments.trim()
+		if (comments.length > 0 && comments.length < MIN_COMMENTS_LENGTH) {
+			return `Comments must be at least ${MIN_COMMENTS_LENGTH} characters.`
+		}
+		return ''
+	})
+
+	function validateAccessibilityRequirements() {
+		const selected = formData.value.accessibility
+		if (selected.includes('high-contrast') && selected.includes('low-contrast')) {
+			return 'High contrast and low contrast UI cannot both be selected.'
+		}
+		return ''
+	}
+
+	const submitted = ref(false)
+
+	const wrapper = mount(
+		defineComponent({
+			components: { FormField, FormLayout },
+			setup() {
+				function handleSubmit(event) {
+					if (!event.target.reportValidity()) {
+						return
+					}
+					if (validateAccessibilityRequirements()) {
+						return
+					}
+					submitted.value = true
+				}
+
+				return {
+					formData,
+					emailError,
+					commentsError,
+					validateAccessibilityRequirements,
+					submitted,
+					handleSubmit,
+				}
+			},
+			template: `
+				<FormLayout @submit.prevent="handleSubmit">
+					<FormField
+						label="Email"
+						for="email"
+						:error="emailError"
+					>
+						<input
+							id="email"
+							v-model="formData.email"
+							type="email"
+							required
+						/>
+					</FormField>
+
+					<FormField
+						label="Comments"
+						for="comments"
+						:error="commentsError"
+					>
+						<textarea id="comments" v-model="formData.comments" />
+					</FormField>
+
+					<FormField
+						label="Accessibility requirements"
+						component-has-label
+						:validate="validateAccessibilityRequirements"
+						:validate-deps="[formData.accessibility]"
+					>
+						<div role="group" aria-label="Accessibility requirements">
+							<label>
+								<input
+									type="checkbox"
+									value="high-contrast"
+									v-model="formData.accessibility"
+								/>
+								High contrast
+							</label>
+							<label>
+								<input
+									type="checkbox"
+									value="low-contrast"
+									v-model="formData.accessibility"
+								/>
+								Low contrast
+							</label>
+						</div>
+					</FormField>
+
+					<template #actions>
+						<button type="submit">Submit</button>
+					</template>
+				</FormLayout>
+			`,
+		}),
+		{
+			global: {
+				stubs: {
+					RouterLink: routerLinkStub,
+				},
+			},
+			attachTo: document.body,
+		},
+	)
+
+	return { wrapper, formData, submitted }
+}
+
+export function mountLoginValidationForm() {
+	const usernameError = ref('')
+	const passwordError = ref('')
+	const formError = ref('')
+
+	const wrapper = mount(
+		defineComponent({
+			components: { FormField, NotificationBlock },
+			setup() {
+				const credentials = ref({ username: '', password: '' })
+
+				function applyServerErrors(errors) {
+					usernameError.value = errors.username || ''
+					passwordError.value = errors.password || ''
+					formError.value = errors.form || ''
+				}
+
+				function handleSubmit() {
+					usernameError.value = ''
+					passwordError.value = ''
+					formError.value = ''
+				}
+
+				return {
+					credentials,
+					usernameError,
+					passwordError,
+					formError,
+					applyServerErrors,
+					handleSubmit,
+				}
+			},
+			template: `
+				<form @submit.prevent="handleSubmit">
+					<FormField label="Username" for="username" label-skip v-model:error="usernameError">
+						<input id="username" v-model="credentials.username" required aria-label="Username" />
+					</FormField>
+					<FormField label="Password" for="password" label-skip v-model:error="passwordError">
+						<input id="password" v-model="credentials.password" type="password" required aria-label="Password" />
+					</FormField>
+					<button type="submit">Login</button>
+					<NotificationBlock
+						v-if="formError"
+						class="login-form-error"
+						type="bad"
+						label="Error"
+						:message="formError"
+						role="alert"
+					/>
+				</form>
+			`,
+		}),
+		{
+			global: {
+				stubs: {
+					RouterLink: routerLinkStub,
+				},
+			},
+			attachTo: document.body,
+		},
+	)
+
+	return {
+		wrapper,
+		usernameError,
+		passwordError,
+		formError,
+	}
+}

package/vue/test/setup.js

@@ -0,0 +1,5 @@
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})