picocrank 1.21.5 → 1.22.0

package/vue/components/SidebarNavLink.vue

@@ -0,0 +1,161 @@
+<template>
+	<li
+		:title="link.title"
+		:class="{ disabled: link.disabled }"
+	>
+		<div v-if="link.type === 'separator'" class="separator" role="separator" />
+		<div v-else-if="link.type === 'html'" v-html="link.html"></div>
+		<a
+			v-else-if="link.type === 'callback' || link.disabled"
+			href="#"
+			:class="{ active: active, disabled: link.disabled }"
+			:aria-label="accessibleName"
+			:aria-disabled="link.disabled || undefined"
+			:tabindex="link.disabled ? -1 : undefined"
+			@click.prevent="emit('select', link)"
+		>
+			<HugeiconsIcon :icon="link.icon" aria-hidden="true" />
+			<span class="nav-link-title" aria-hidden="true">{{ link.title }}</span>
+			<span
+				v-if="showCount"
+				class="nav-link-count"
+				aria-hidden="true"
+			>{{ formatCount(link.count) }}</span>
+			<span
+				v-else-if="showIndicator"
+				class="nav-link-indicator"
+				aria-hidden="true"
+			/>
+		</a>
+		<router-link
+			v-else
+			v-bind="link.props || {}"
+			:to="link.to || link.path"
+			:class="{ active }"
+			:aria-label="needsCustomName ? accessibleName : undefined"
+			:aria-current="active ? 'page' : undefined"
+			@click="emit('select', link)"
+		>
+			<HugeiconsIcon :icon="link.icon" aria-hidden="true" />
+			<span class="nav-link-title" :aria-hidden="needsCustomName ? 'true' : undefined">{{ link.title }}</span>
+			<span
+				v-if="showCount"
+				class="nav-link-count"
+				aria-hidden="true"
+			>{{ formatCount(link.count) }}</span>
+			<span
+				v-else-if="showIndicator"
+				class="nav-link-indicator"
+				aria-hidden="true"
+			/>
+		</router-link>
+	</li>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+
+const props = defineProps({
+	link: {
+		type: Object,
+		required: true,
+	},
+	active: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['select'])
+
+const showCount = computed(() => (
+	!props.link.disabled && props.link.count != null && props.link.count > 0
+))
+
+const showIndicator = computed(() => (
+	props.link.indicator && !props.link.disabled && !showCount.value
+))
+
+const needsCustomName = computed(() => showCount.value || showIndicator.value)
+
+const accessibleName = computed(() => {
+	const parts = [props.link.title]
+	if (showCount.value) {
+		parts.push(`${props.link.count} notifications`)
+	} else if (showIndicator.value) {
+		parts.push('Requires attention')
+	}
+	if (props.link.disabled) {
+		parts.push('unavailable')
+	}
+	return parts.join(', ')
+})
+
+function formatCount(count) {
+	return count > 99 ? '99+' : String(count)
+}
+</script>
+
+<style scoped>
+a {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: .75em;
+	border-radius: 0;
+	position: relative;
+}
+
+a.active {
+	text-decoration: underline;
+}
+
+.nav-link-title {
+	flex: 1;
+	min-width: 0;
+}
+
+.nav-link-indicator {
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	background: var(--indicator-color, #dc3545);
+	flex-shrink: 0;
+}
+
+.nav-link-count {
+	min-width: 1.25rem;
+	padding: 0.1rem 0.4rem;
+	border-radius: 999px;
+	background: var(--indicator-color, #dc3545);
+	color: #fff;
+	font-size: 0.75em;
+	font-weight: 600;
+	line-height: 1.2;
+	text-align: center;
+	flex-shrink: 0;
+}
+
+a.disabled,
+li.disabled a {
+	cursor: not-allowed;
+	opacity: 0.55;
+}
+
+.separator {
+	height: 1px;
+	background-color: #eee;
+	margin: 0.5rem 0.75rem;
+}
+
+html[data-theme="dark"] {
+	a {
+		color: #f8f9fa;
+	}
+
+	.separator {
+		background-color: #444;
+	}
+}
+</style>

package/vue/composables/useCustomTheme.js

@@ -0,0 +1,162 @@
+import { ref, watch } from 'vue'
+
+const STYLE_ELEMENT_ID = 'theme-style'
+const DEFAULT_STORAGE_KEY = 'picocrank-custom-theme'
+
+function resolveDefaultBasePath() {
+	try {
+		const base = import.meta.env?.BASE_URL || '/'
+		const joined = base.endsWith('/') ? `${base}themes` : `${base}/themes`
+		return joined.replace(/\/$/, '') || '/themes'
+	} catch {
+		return '/themes'
+	}
+}
+
+const DEFAULT_BASE_PATH = resolveDefaultBasePath()
+
+const availableThemes = ref([])
+const themePreference = ref('')
+const themesBasePath = ref(DEFAULT_BASE_PATH)
+const storageKey = ref(DEFAULT_STORAGE_KEY)
+let initialized = false
+
+function normalizeBasePath(basePath) {
+	if (!basePath || typeof basePath !== 'string') {
+		return DEFAULT_BASE_PATH
+	}
+	const trimmed = basePath.replace(/\/$/, '')
+	return trimmed || DEFAULT_BASE_PATH
+}
+
+function readStoredTheme(key) {
+	if (typeof localStorage === 'undefined') {
+		return ''
+	}
+	return localStorage.getItem(key) || ''
+}
+
+function persistTheme(key, value) {
+	if (typeof localStorage === 'undefined') {
+		return
+	}
+	if (!value) {
+		localStorage.removeItem(key)
+		return
+	}
+	localStorage.setItem(key, value)
+}
+
+function ensureStyleElement() {
+	if (typeof document === 'undefined') {
+		return null
+	}
+	let themeStyle = document.getElementById(STYLE_ELEMENT_ID)
+	if (!themeStyle) {
+		themeStyle = document.createElement('style')
+		themeStyle.id = STYLE_ELEMENT_ID
+		themeStyle.type = 'text/css'
+		document.head.appendChild(themeStyle)
+	}
+	return themeStyle
+}
+
+function applyTheme() {
+	const themeStyle = ensureStyleElement()
+	if (!themeStyle) {
+		return
+	}
+
+	const name = themePreference.value
+	if (!name) {
+		themeStyle.textContent = ''
+		return
+	}
+
+	const href = `${themesBasePath.value}/${encodeURIComponent(name)}/theme.css`
+	themeStyle.textContent = `@import url('${href}') layer(theme);`
+}
+
+function setTheme(name) {
+	themePreference.value = name || ''
+}
+
+function clearTheme() {
+	setTheme('')
+}
+
+async function discoverThemes() {
+	if (typeof fetch === 'undefined') {
+		availableThemes.value = []
+		return availableThemes.value
+	}
+
+	const indexUrl = `${themesBasePath.value}/index.json`
+	try {
+		const response = await fetch(indexUrl, { cache: 'no-store' })
+		if (!response.ok) {
+			availableThemes.value = []
+			return availableThemes.value
+		}
+		const data = await response.json()
+		const themes = Array.isArray(data?.themes)
+			? data.themes.filter((theme) => typeof theme === 'string' && theme.length > 0)
+			: []
+		availableThemes.value = themes.sort((a, b) => a.localeCompare(b))
+	} catch {
+		availableThemes.value = []
+	}
+
+	return availableThemes.value
+}
+
+function configure(options = {}) {
+	if (options.themesBasePath !== undefined) {
+		themesBasePath.value = normalizeBasePath(options.themesBasePath)
+	}
+	if (options.storageKey !== undefined && typeof options.storageKey === 'string' && options.storageKey) {
+		storageKey.value = options.storageKey
+	}
+	if (Array.isArray(options.availableThemes)) {
+		availableThemes.value = options.availableThemes
+			.filter((theme) => typeof theme === 'string' && theme.length > 0)
+			.sort((a, b) => a.localeCompare(b))
+	}
+}
+
+function initCustomTheme(options = {}) {
+	configure(options)
+
+	if (!initialized) {
+		themePreference.value = readStoredTheme(storageKey.value)
+		watch(themePreference, (value) => {
+			persistTheme(storageKey.value, value)
+			applyTheme()
+		})
+		initialized = true
+	}
+
+	applyTheme()
+	return useCustomTheme()
+}
+
+export function useCustomTheme(options) {
+	if (options) {
+		configure(options)
+	}
+
+	return {
+		availableThemes,
+		themePreference,
+		themesBasePath,
+		storageKey,
+		applyTheme,
+		setTheme,
+		clearTheme,
+		discoverThemes,
+		configure,
+		initCustomTheme,
+	}
+}
+
+export { initCustomTheme }

package/vue/data/examplePeople.js

@@ -0,0 +1,45 @@
+/** Example people used by the table example and QuickSearch. */
+export const examplePeople = [
+	{ name: 'Alice', age: 30, city: 'New York' },
+	{ name: 'Bob', age: 25, city: 'Los Angeles' },
+	{ name: 'Charlie', age: 35, city: 'Chicago' },
+	{ name: 'David', age: 28, city: 'Houston' },
+	{ name: 'Eve', age: 22, city: 'Phoenix' },
+	{ name: 'Frank', age: 40, city: 'Philadelphia' },
+	{ name: 'Grace', age: 29, city: 'San Antonio' },
+	{ name: 'Hannah', age: 32, city: 'San Diego' },
+	{ name: 'Ian', age: 27, city: 'Dallas' },
+	{ name: 'Jack', age: 31, city: 'San Jose' },
+	{ name: 'Kathy', age: 26, city: 'Austin' },
+	{ name: 'Leo', age: 33, city: 'Jacksonville' },
+	{ name: 'Mia', age: 24, city: 'Fort Worth' },
+	{ name: 'Nina', age: 38, city: 'Columbus' },
+	{ name: 'Oscar', age: 36, city: 'Charlotte' },
+	{ name: 'Paul', age: 34, city: 'San Francisco' },
+	{ name: 'Quinn', age: 23, city: 'Indianapolis' },
+	{ name: 'Rita', age: 37, city: 'Seattle' },
+	{ name: 'Sam', age: 39, city: 'Denver' },
+	{ name: 'Tina', age: 21, city: 'Washington D.C.' },
+	{ name: 'Uma', age: 28, city: 'Miami' },
+	{ name: 'Victor', age: 30, city: 'Portland' },
+	{ name: 'Wendy', age: 29, city: 'Nashville' },
+	{ name: 'Xavier', age: 31, city: 'Oklahoma City' },
+	{ name: 'Yara', age: 27, city: 'Tampa' },
+	{ name: 'Zane', age: 32, city: 'Albuquerque' },
+	{ name: 'Ava', age: 26, city: 'Las Vegas' },
+	{ name: 'Ben', age: 33, city: 'New Orleans' },
+	{ name: 'Cara', age: 25, city: 'San Francisco' },
+	{ name: 'Drew', age: 34, city: 'Seattle' },
+	{ name: 'Ethan', age: 28, city: 'Denver' },
+	{ name: 'Fiona', age: 30, city: 'Washington D.C.' },
+	{ name: 'George', age: 29, city: 'Miami' },
+]
+
+/** Longer list matching the previous table example volume (with repeats for pagination). */
+export function getExampleTableRows() {
+	return [
+		...examplePeople,
+		...examplePeople.slice(7),
+		...examplePeople.slice(7, 22),
+	]
+}

package/vue/views/App.vue

@@ -1,13 +1,14 @@
 <template>
 	<Navigation ref="navigation">
-		<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="true">
+		<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">
 			<template #toolbar>
 				<QuickSearch
 					v-if="quickSearchEnabled"
 					ref="quickSearchRef"
 					placeholder="Search items..."
-					:search-fields="['title', 'name']"
+					:search-fields="['title', 'name', 'description', 'category']"
 					:max-results="15"
+					:fetch-results="dummySearchFetchEnabled ? dummyFetchResults : null"
 				/>
 			</template>
 		</Header>
@@ -31,15 +32,17 @@
 </template>
 
 <script setup>
-	import { ref, onMounted, provide } from 'vue';
+	import { ref, onMounted, provide, watch } from 'vue';
 	import { useRouter } from 'vue-router';
-	import { Pin02Icon } from '@hugeicons/core-free-icons'
+	import { Pin02Icon, UserIcon } 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 { initCustomTheme } from '../composables/useCustomTheme.js'
+	import { examplePeople } from '../data/examplePeople.js'
 	import logoUrl from '/logo.png';
 
 	const router = useRouter();
@@ -49,9 +52,13 @@
 	const sidebarEnabled = ref(true);
 	const brandingEnabled = ref(true);
 	const quickSearchEnabled = ref(true);
+	const dummySearchFetchEnabled = ref(false);
+	const themeToggleEnabled = ref(true);
 	const topBarEnabled = ref(false);
 	const breadcrumbsEnabled = ref(false);
 
+	const { discoverThemes } = initCustomTheme();
+
 	function toggleSidebar() {
 		if (sidebar.value) {
 			sidebar.value.toggle();
@@ -62,6 +69,10 @@
 		router.push({ name: 'Welcome' });
 	}
 
+	function goToUserDetails() {
+		router.push({ name: 'UserDetails' });
+	}
+
 	function toggleSidebarEnabled() {
 		sidebarEnabled.value = !sidebarEnabled.value;
 	}
@@ -74,6 +85,14 @@
 		quickSearchEnabled.value = !quickSearchEnabled.value;
 	}
 
+	function toggleDummySearchFetchEnabled() {
+		dummySearchFetchEnabled.value = !dummySearchFetchEnabled.value;
+	}
+
+	function toggleThemeToggleEnabled() {
+		themeToggleEnabled.value = !themeToggleEnabled.value;
+	}
+
 	function toggleTopBarEnabled() {
 		topBarEnabled.value = !topBarEnabled.value;
 	}
@@ -82,6 +101,54 @@
 		breadcrumbsEnabled.value = !breadcrumbsEnabled.value;
 	}
 
+	async function dummyFetchResults(_query, { signal } = {}) {
+		await new Promise((resolve, reject) => {
+			const timer = setTimeout(resolve, 1500)
+			if (!signal) {
+				return
+			}
+			const onAbort = () => {
+				clearTimeout(timer)
+				reject(new DOMException('Aborted', 'AbortError'))
+			}
+			if (signal.aborted) {
+				onAbort()
+				return
+			}
+			signal.addEventListener('abort', onAbort, { once: true })
+		})
+		return []
+	}
+
+	function registerQuickSearchItems() {
+		if (!quickSearchRef.value) {
+			return
+		}
+
+		quickSearchRef.value.addItem({
+			id: 'hello-world',
+			title: 'Hello World',
+			name: 'hello-world',
+			description: 'This is a test item',
+			category: 'Actions',
+			type: 'callback',
+			callback: helloWorld
+		})
+
+		for (const person of examplePeople) {
+			quickSearchRef.value.addItem({
+				id: `person-${person.name}`,
+				title: person.name,
+				name: person.name,
+				description: `${person.city} · age ${person.age}`,
+				category: 'People',
+				type: 'route',
+				path: `/view-item/${encodeURIComponent(person.name)}`,
+				icon: UserIcon,
+			})
+		}
+	}
+
 	// Provide sidebar, QuickSearch, TopBar, and breadcrumbs state and toggle functions for child components
 	provide('sidebarEnabled', sidebarEnabled);
 	provide('toggleSidebarEnabled', toggleSidebarEnabled);
@@ -90,17 +157,30 @@
 
 	provide('quickSearchEnabled', quickSearchEnabled);
 	provide('toggleQuickSearchEnabled', toggleQuickSearchEnabled);
+	provide('dummySearchFetchEnabled', dummySearchFetchEnabled);
+	provide('toggleDummySearchFetchEnabled', toggleDummySearchFetchEnabled);
+	provide('themeToggleEnabled', themeToggleEnabled);
+	provide('toggleThemeToggleEnabled', toggleThemeToggleEnabled);
 	provide('topBarEnabled', topBarEnabled);
 	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 	provide('breadcrumbsEnabled', breadcrumbsEnabled);
 	provide('toggleBreadcrumbsEnabled', toggleBreadcrumbsEnabled);
 
+	watch(quickSearchRef, (quickSearch) => {
+		if (quickSearch) {
+			registerQuickSearchItems()
+		}
+	})
+
 	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')
@@ -128,17 +208,7 @@
 			sidebar.value.stick();
 		}
 
-		if (quickSearchRef.value) {
-			quickSearchRef.value.addItem({
-				id: 'hello-world',
-				title: 'Hello World',
-				name: 'hello-world',
-				description: 'This is a test item',
-				category: 'Actions',
-				type: 'callback',
-				callback: helloWorld
-			})
-		}
+		registerQuickSearchItems()
 	});
 
 	function helloWorld() {

package/vue/views/FormExample.vue

@@ -19,35 +19,20 @@
 			</FormField>
 
 			<FormField label="Role" fake>
-				<div class="radio-group">
-					<label>
-						<input 
-							type="radio" 
-							name="role"
-							value="sales"
-							v-model="formData.role"
-						/>
-						<span>Sales</span>
-					</label>
-					<label>
-						<input 
-							type="radio" 
-							name="role"
-							value="engineering"
-							v-model="formData.role"
-						/>
-						<span>Engineering</span>
-					</label>
-					<label>
-						<input 
-							type="radio" 
-							name="role"
-							value="hr"
-							v-model="formData.role"
-						/>
-						<span>HR</span>
-					</label>
-				</div>
+				<RadioGroup
+					v-model="formData.role"
+					name="role"
+					:options="roleOptions"
+				/>
+			</FormField>
+
+			<FormField label="Term" fake>
+				<RadioGroup
+					v-model="formData.term"
+					name="term"
+					variant="boolean"
+					:options="termOptions"
+				/>
 			</FormField>
 
 			<FormField label="Salary" for="salary">
@@ -61,6 +46,23 @@
 				</select>
 			</FormField>
 
+			<FormField label="Compensation" fake>
+				<RadioGroup
+					v-model="formData.compensation"
+					name="compensation"
+					variant="list"
+					:options="compensationOptions"
+				/>
+			</FormField>
+
+			<FormField label="Accessibility requirements" fake>
+				<CheckGroup
+					v-model="formData.accessibility"
+					name="accessibility"
+					:options="accessibilityOptions"
+				/>
+			</FormField>
+
 			<FormField label="Email" for="email">
 				<input 
 					id="email"
@@ -190,11 +192,41 @@ import { ref } from 'vue'
 import Section from '../components/Section.vue'
 import FormLayout from '../components/FormLayout.vue'
 import FormField from '../components/FormField.vue'
+import RadioGroup from '../components/RadioGroup.vue'
+import CheckGroup from '../components/CheckGroup.vue'
+
+// From femtocrank/tests/simple.html — Role (default), Term (boolean), Compensation (list)
+const roleOptions = [
+	{ label: 'Sales', value: 'sales' },
+	{ label: 'Engineering', value: 'engineering' },
+	{ label: 'HR', value: 'hr' },
+]
+
+const termOptions = [
+	{ label: 'Full Time', value: 'full-time' },
+	{ label: 'Part Time', value: 'part-time' },
+]
+
+const compensationOptions = [
+	{ label: 'Performance Incentive', value: 'performance-incentive' },
+	{ label: 'Sales Target Incentive', value: 'sales-target-incentive' },
+	{ label: 'Objective Incentive', value: 'objective-incentive' },
+]
+
+const accessibilityOptions = [
+	{ label: 'Screen reader support', value: 'screen-reader' },
+	{ label: 'Keyboard navigation', value: 'keyboard-navigation' },
+	{ label: 'High contrast', value: 'high-contrast' },
+	{ label: 'Captions / transcripts', value: 'captions' },
+]
 
 const formData = ref({
 	name: '',
 	role: '',
+	term: '',
 	salary: '0',
+	compensation: '',
+	accessibility: [],
 	email: '',
 	isAdmin: false,
 	website: '',
@@ -227,7 +259,10 @@ function resetForm() {
 	formData.value = {
 		name: '',
 		role: '',
+		term: '',
 		salary: '0',
+		compensation: '',
+		accessibility: [],
 		email: '',
 		isAdmin: false,
 		website: '',