picocrank 1.21.5 → 1.22.1

package/vite.config.js

@@ -1,6 +1,62 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const themesDir = path.join(__dirname, 'public', 'themes')
+
+function scanThemeNames() {
+  if (!fs.existsSync(themesDir)) {
+    return []
+  }
+
+  return fs
+    .readdirSync(themesDir, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .filter((entry) => fs.existsSync(path.join(themesDir, entry.name, 'theme.css')))
+    .map((entry) => entry.name)
+    .sort((a, b) => a.localeCompare(b))
+}
+
+function writeThemesIndex() {
+  fs.mkdirSync(themesDir, { recursive: true })
+  const themes = scanThemeNames()
+  const indexPath = path.join(themesDir, 'index.json')
+  fs.writeFileSync(indexPath, `${JSON.stringify({ themes }, null, 2)}\n`)
+  return themes
+}
+
+function themesIndexPlugin() {
+  return {
+    name: 'picocrank-themes-index',
+    buildStart() {
+      writeThemesIndex()
+    },
+    configureServer(server) {
+      writeThemesIndex()
+
+      const refreshIndex = (filePath) => {
+        if (!filePath) {
+          return
+        }
+        const normalized = path.resolve(filePath)
+        if (!normalized.startsWith(themesDir)) {
+          return
+        }
+        writeThemesIndex()
+      }
+
+      server.watcher.add(themesDir)
+      server.watcher.on('add', refreshIndex)
+      server.watcher.on('unlink', refreshIndex)
+      server.watcher.on('addDir', refreshIndex)
+      server.watcher.on('unlinkDir', refreshIndex)
+    },
+  }
+}
 
 export default defineConfig({
   base: '/',
@@ -36,6 +92,7 @@ export default defineConfig({
     },
   },
   plugins: [
+    themesIndexPlugin(),
     Components({
       dirs: "./vue/",
       extensions: ['vue'],

package/vue/components/CheckGroup.vue

@@ -0,0 +1,156 @@
+<template>
+	<div
+		:class="['multiple-checklist', { disabled }]"
+		role="group"
+		:aria-labelledby="ariaLabelledby || undefined"
+		:aria-label="ariaLabel || undefined"
+		:aria-disabled="disabled ? 'true' : undefined"
+	>
+		<label
+			v-for="option in normalizedOptions"
+			:key="option.key"
+			:class="{ disabled: disabled || option.disabled }"
+		>
+			<input
+				type="checkbox"
+				:name="groupName"
+				:value="option.key"
+				:checked="isSelected(option)"
+				:disabled="disabled || option.disabled"
+				@change="toggle(option)"
+			/>
+			<span>{{ option.label }}</span>
+		</label>
+	</div>
+</template>
+
+<script setup>
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+	modelValue: {
+		type: Array,
+		default: () => [],
+	},
+	options: {
+		type: Array,
+		required: true,
+		validator: (options) => Array.isArray(options) && options.every((option) => {
+			if (typeof option === 'string' || typeof option === 'number') {
+				return true
+			}
+			return option
+				&& typeof option === 'object'
+				&& 'value' in option
+				&& typeof option.label === 'string'
+		}),
+	},
+	name: {
+		type: String,
+		default: '',
+	},
+	// Accepted for API parity with RadioGroup; CheckGroup has a single Femtocrank layout.
+	variant: {
+		type: String,
+		default: 'default',
+		validator: (value) => ['default', 'boolean', 'list'].includes(value),
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	ariaLabelledby: {
+		type: String,
+		default: '',
+	},
+	ariaLabel: {
+		type: String,
+		default: '',
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const generatedName = useId()
+
+const groupName = computed(() => props.name || generatedName)
+
+const selectedValues = computed(() => (
+	Array.isArray(props.modelValue) ? props.modelValue : []
+))
+
+const normalizedOptions = computed(() => props.options.map((option, index) => {
+	if (typeof option === 'string' || typeof option === 'number') {
+		return {
+			key: String(index),
+			label: String(option),
+			value: option,
+			disabled: false,
+		}
+	}
+
+	return {
+		key: String(index),
+		label: option.label,
+		value: option.value,
+		disabled: Boolean(option.disabled),
+	}
+}))
+
+function isSelected(option) {
+	return selectedValues.value.includes(option.value)
+}
+
+function toggle(option) {
+	if (props.disabled || option.disabled) {
+		return
+	}
+
+	const next = isSelected(option)
+		? selectedValues.value.filter((value) => value !== option.value)
+		: [...selectedValues.value, option.value]
+
+	emit('update:modelValue', next)
+	emit('change', next)
+}
+</script>
+
+<style scoped>
+.multiple-checklist label {
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: 0.5em;
+	padding-inline: 0.75em;
+	margin: 0;
+}
+
+.multiple-checklist input[type="checkbox"] {
+	margin: 0;
+	flex-shrink: 0;
+}
+
+.multiple-checklist.disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+}
+
+.multiple-checklist label.disabled,
+.multiple-checklist.disabled label {
+	background-color: var(--disabled-background-color);
+	color: var(--disabled-text-color);
+	cursor: not-allowed;
+}
+
+.multiple-checklist label.disabled:hover,
+.multiple-checklist label.disabled:has(input:focus-visible),
+.multiple-checklist label.disabled:has(input:checked),
+.multiple-checklist label.disabled:has(input:checked):hover,
+.multiple-checklist.disabled label:hover,
+.multiple-checklist.disabled label:has(input:focus-visible),
+.multiple-checklist.disabled label:has(input:checked),
+.multiple-checklist.disabled label:has(input:checked):hover {
+	background-color: var(--disabled-background-color);
+	color: var(--disabled-text-color);
+}
+</style>

package/vue/components/FormField.vue

@@ -1,6 +1,6 @@
 <template>
-	<label v-if="!fake" :for="controlId">{{ label }}</label>
-	<span v-else class="fake-label">{{ label }}</span>
+	<label v-if="!fake" :for="controlId" :class="{ disabled }">{{ label }}</label>
+	<span v-else class="fake-label" :class="{ disabled }">{{ label }}</span>
 	<slot />
 </template>
 
@@ -24,7 +24,19 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const controlId = computed(() => props.htmlFor || props.for)
 </script>
+
+<style scoped>
+label.disabled,
+.fake-label.disabled {
+	color: var(--disabled-text-color);
+	cursor: not-allowed;
+}
+</style>

package/vue/components/Header.vue

@@ -10,8 +10,17 @@
 
 			<div class = "fg1" />
 
-			<button v-if="showSidebarChrome" id = "sidebar-toggler-button" aria-label = "Open sidebar navigation" aria-pressed = "false" aria-haspopup = "menu" class = "neutral">
-				<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" :strokeWidth = 3 />
+			<button
+				v-if="showSidebarChrome"
+				id="sidebar-toggler-button"
+				type="button"
+				class="neutral"
+				aria-expanded="false"
+				aria-controls="picocrank-sidebar"
+				aria-label="Open sidebar navigation"
+				@click.stop="toggleNavSidebar"
+			>
+				<HugeiconsIcon :icon="Menu01Icon" width="1em" height="1em" :strokeWidth="3" aria-hidden="true" />
 			</button>
 		</div>
 
@@ -19,26 +28,35 @@
 
 		<Breadcrumbs v-if="breadcrumbs" />
 
-		<slot name="toolbar" />
-		
 		<div class = "fg1"></div>
 
-		<button
-			v-if="themeToggleEnabled"
-			type="button"
-			class="theme-toggle neutral"
-			:aria-label="themeToggleLabel"
-			:title="themeToggleTitle"
-			@click="toggleTheme"
-		>
-			<HugeiconsIcon :icon="themeToggleIcon" width="1em" height="1em" />
-		</button>
-
-		<slot name = "user-info">
-			<div class = "user-info">
-				<span v-if="username">{{ username }}</span>
-			</div>
-		</slot>
+		<div class="header-actions flex-row">
+			<button
+				v-if="themeToggleEnabled"
+				type="button"
+				class="theme-toggle neutral"
+				:aria-label="themeToggleLabel"
+				:title="themeToggleTitle"
+				@click="toggleTheme"
+			>
+				<HugeiconsIcon :icon="themeToggleIcon" width="1em" height="1em" />
+			</button>
+
+			<slot name="toolbar" />
+
+			<slot name = "user-info">
+				<button
+					v-if="username"
+					type="button"
+					class="user-info flex-row neutral"
+					:aria-label="`View profile for ${username}`"
+					@click="emit('userClick')"
+				>
+					<HugeiconsIcon :icon="UserIcon" width="1em" height="1em" aria-hidden="true" />
+					<span>{{ username }}</span>
+				</button>
+			</slot>
+		</div>
 	</header>
 
 	<!-- Top-bar-only mobile: Header owns the fallback sidebar so consumers need no extra wiring. -->
@@ -48,7 +66,7 @@
 <script setup>
 	import { computed, ref } from "vue";
 	import { HugeiconsIcon } from "@hugeicons/vue";
-	import { BulbIcon, Menu01Icon, Moon02Icon, Sun01Icon } from "@hugeicons/core-free-icons";
+	import { BulbIcon, Menu01Icon, Moon02Icon, Sun01Icon, UserIcon } from "@hugeicons/core-free-icons";
 
 	import Breadcrumbs from "./Breadcrumbs.vue";
 	import TopBar from "./TopBar.vue";
@@ -81,7 +99,7 @@
 		return `Theme ${current.toLowerCase()}. Switch to ${next.toLowerCase()} mode`;
 	});
 
-	const emit = defineEmits(["toggleSidebar", "logoClick"]);
+	const emit = defineEmits(["toggleSidebar", "logoClick", "userClick"]);
 
 	const props = defineProps({
 		breadcrumbs: {
@@ -147,15 +165,6 @@
 </script>
 
 <style scoped>
-button {
-	border: 0;
-	color: #fff;
-}
-
-button:hover {
-	background-color: transparent;
-}
-
 #sidebar-button.disabled-branding {
 	width: auto;
 }
@@ -169,11 +178,108 @@ button:hover {
 	color: var(--header-hover-text-color);
 }
 
+.user-info {
+	gap: 0.4rem;
+	align-self: stretch;
+	padding: 0 0.6em;
+	border-radius: 0;
+	font-weight: normal;
+}
+
 .user-info span {
-	padding-right: 0.5rem;
+	padding-right: 0;
+	font-weight: normal;
+}
+
+.header-actions {
+	align-self: stretch;
+	gap: 0.25rem;
 }
 
 .theme-toggle {
-	margin-right: 0.25rem;
+	margin-right: 0;
+}
+
+/* Match Femtocrank header chrome (same idea as #sidebar-button:hover) */
+.header-actions > button,
+.header-actions :deep(button) {
+	border: 0;
+	border-radius: 0;
+	color: #fff;
+	background-color: transparent;
+	align-self: stretch;
+	display: inline-flex;
+	align-items: center;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0.6em;
+	padding-right: 0.6em;
+}
+
+.header-actions > button:hover,
+.header-actions :deep(button:hover),
+.user-info:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+
+/* Sidebar toggler keeps existing full-height chrome */
+#sidebar-toggler-button {
+	border: 0;
+	border-radius: 0;
+	color: #fff;
+	background-color: transparent;
+	align-self: stretch;
+	display: inline-flex;
+	align-items: center;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+#sidebar-toggler-button:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+</style>
+
+<!--
+  Unscoped descendant selector: the search trigger lives inside QuickSearch in the
+  toolbar slot, so scoped / :slotted / :deep cannot fully restyle it alone.
+-->
+<style>
+header .header-actions {
+	gap: 0.25rem;
+}
+
+header .quick-search {
+	align-self: stretch;
+	display: inline-flex;
+}
+
+header .search-trigger,
+header .search-trigger.neutral {
+	border: 0;
+	border-radius: 0;
+	color: #fff;
+	background-color: transparent;
+	align-self: stretch;
+	height: 100%;
+	display: inline-flex;
+	align-items: center;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0.6em;
+	padding-right: 0.6em;
+	margin-right: 0;
+	font-weight: normal;
+}
+
+header .search-trigger:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+
+header .user-info {
+	font-weight: normal;
 }
 </style>