picocrank 1.27.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",

package/vue/components/Header.spec.js

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import Header from './Header.vue'
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [
+		{ path: '/login', name: 'Login', component: { template: '<div>Login</div>' } },
+	],
+})
+
+const globalStubs = {
+	HugeiconsIcon: true,
+	Breadcrumbs: true,
+	TopBar: true,
+	Sidebar: true,
+}
+
+describe('Header loginRoute', () => {
+	it('shows a Login link when username is empty and loginRoute is set', async () => {
+		const wrapper = mount(Header, {
+			props: {
+				username: '',
+				loginRoute: { name: 'Login' },
+				sidebarEnabled: false,
+			},
+			global: {
+				plugins: [router],
+				stubs: globalStubs,
+			},
+		})
+
+		const loginLink = wrapper.find('a.login-link')
+		expect(loginLink.exists()).toBe(true)
+		expect(loginLink.text()).toBe('Login')
+	})
+
+	it('shows the username control instead of Login when username is set', () => {
+		const wrapper = mount(Header, {
+			props: {
+				username: 'tester',
+				loginRoute: { name: 'Login' },
+				sidebarEnabled: false,
+			},
+			global: {
+				plugins: [router],
+				stubs: globalStubs,
+			},
+		})
+
+		expect(wrapper.find('a.login-link').exists()).toBe(false)
+		expect(wrapper.find('.user-info span').text()).toBe('tester')
+	})
+
+	it('shows neither Login nor username when loginRoute is not set', () => {
+		const wrapper = mount(Header, {
+			props: {
+				username: '',
+				sidebarEnabled: false,
+			},
+			global: {
+				plugins: [router],
+				stubs: globalStubs,
+			},
+		})
+
+		expect(wrapper.find('a.login-link').exists()).toBe(false)
+		expect(wrapper.find('.user-info').exists()).toBe(false)
+	})
+})

package/vue/components/Header.vue

@@ -55,6 +55,13 @@
 					<HugeiconsIcon :icon="UserIcon" width="1em" height="1em" aria-hidden="true" />
 					<span>{{ username }}</span>
 				</button>
+				<RouterLink
+					v-else-if="showLoginLink"
+					:to="loginRoute"
+					class="user-info flex-row neutral login-link"
+				>
+					<span>Login</span>
+				</RouterLink>
 			</slot>
 		</div>
 	</header>
@@ -65,6 +72,7 @@
 
 <script setup>
 	import { computed, ref } from "vue";
+	import { RouterLink } from "vue-router";
 	import { HugeiconsIcon } from "@hugeicons/vue";
 	import { BulbIcon, Menu01Icon, Moon02Icon, Sun01Icon, UserIcon } from "@hugeicons/core-free-icons";
 
@@ -110,6 +118,10 @@
 			type: String,
 			default: "",
 		},
+		loginRoute: {
+			type: [String, Object],
+			default: null,
+		},
 		title: {
 			type: String,
 			default: "Untitled",
@@ -155,6 +167,10 @@
 		() => props.breadcrumbs && !isMobile.value,
 	);
 
+	const showLoginLink = computed(
+		() => !props.username.trim() && props.loginRoute != null && props.loginRoute !== '',
+	);
+
 	function toggleNavSidebar() {
 		if (needsFallbackSidebar.value) {
 			fallbackSidebar.value?.toggle();
@@ -201,6 +217,11 @@
 	font-weight: normal;
 }
 
+.login-link {
+	text-decoration: none;
+	color: inherit;
+}
+
 .user-info span {
 	padding-right: 0;
 	font-weight: normal;
@@ -218,6 +239,7 @@
 
 /* Match Femtocrank header chrome (same idea as #sidebar-button:hover) */
 .header-actions > button,
+.header-actions > a.login-link,
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
@@ -233,6 +255,7 @@
 }
 
 .header-actions > button:hover,
+.header-actions > a.login-link:hover,
 .header-actions :deep(button:hover),
 .user-info:hover {
 	background-color: var(--header-hover-background-color);
@@ -298,4 +321,8 @@ header .search-trigger:hover {
 header .user-info {
 	font-weight: normal;
 }
+
+header .login-link {
+	font-weight: normal;
+}
 </style>

package/vue/examples/App.vue

@@ -2,7 +2,8 @@
 	<Navigation ref="navigation">
 		<Navigation ref="topBarNavigation">
 			<Header
-				username="Guest"
+				:username="headerUsername"
+				:login-route="headerLoginRoute"
 				@toggleSidebar="toggleSidebar"
 				@logoClick="goToIndex"
 				@userClick="goToUserDetails"
@@ -85,6 +86,8 @@
 	const includeSupplementalThemes = ref(true);
 	const topBarEnabled = ref(false);
 	const breadcrumbsEnabled = ref(true);
+	const headerUsername = ref('tester');
+	const headerLoginRoute = { name: 'Login' };
 
 	const { discoverThemes } = initCustomTheme({ includeSupplementalThemes: true });
 
@@ -134,6 +137,10 @@
 		breadcrumbsEnabled.value = !breadcrumbsEnabled.value;
 	}
 
+	function setHeaderUsername(username) {
+		headerUsername.value = username;
+	}
+
 	async function dummyFetchResults(_query, { signal } = {}) {
 		await new Promise((resolve, reject) => {
 			const timer = setTimeout(resolve, 1500)
@@ -200,6 +207,8 @@
 	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 	provide('breadcrumbsEnabled', breadcrumbsEnabled);
 	provide('toggleBreadcrumbsEnabled', toggleBreadcrumbsEnabled);
+	provide('headerUsername', headerUsername);
+	provide('setHeaderUsername', setHeaderUsername);
 
 	watch(quickSearchRef, (quickSearch) => {
 		if (quickSearch) {

package/vue/examples/PageStructure.vue

@@ -102,6 +102,23 @@
 					@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>
 
@@ -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)
 }