picocrank 1.21.4 → 1.22.0

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: '',

package/vue/views/PageStructure.vue

@@ -10,103 +10,132 @@
 	</Section>
 
 	<Section title="Header" subtitle="Branding, search, and top navigation">
-		<dl>
-			<dt>Logo and title</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="brandingEnabled"
-						@change="toggleBrandingEnabled"
-					/>
-					<span>Show logo and title in the header</span>
-				</label>
-			</dd>
-
-			<dt>QuickSearch</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="quickSearchEnabled"
-						@change="toggleQuickSearchEnabled"
-					/>
-					<span>Show QuickSearch in the header toolbar</span>
-				</label>
-				<p class="subtle">
-					On narrow screens it collapses to a search button that opens search in an overlay.
-				</p>
-			</dd>
-
-			<dt>Top bar</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="topBarEnabled"
-						@change="toggleTopBarEnabled"
+		<FormLayout @submit.prevent>
+			<FormField label="Logo and title" fake>
+				<RadioGroup
+					name="ps-branding"
+					variant="boolean"
+					aria-label="Logo and title"
+					:model-value="brandingEnabled"
+					:options="showHideOptions"
+					@update:model-value="setBrandingEnabled"
+				/>
+			</FormField>
+
+			<FormField label="QuickSearch" fake>
+				<RadioGroup
+					name="ps-quicksearch"
+					variant="boolean"
+					aria-label="QuickSearch"
+					:model-value="quickSearchEnabled"
+					:options="showHideOptions"
+					@update:model-value="setQuickSearchEnabled"
+				/>
+			</FormField>
+
+			<FormField label="Dummy background search" fake :disabled="!quickSearchEnabled">
+				<div>
+					<RadioGroup
+						name="ps-dummy-search"
+						variant="boolean"
+						aria-label="Dummy background search"
+						:model-value="dummySearchFetchEnabled"
+						:options="onOffOptions"
+						:disabled="!quickSearchEnabled"
+						@update:model-value="setDummySearchFetchEnabled"
 					/>
-					<span>Show horizontal navigation links below the header</span>
-				</label>
-				<p class="subtle">
-					On narrow screens: if both are on, the sidebar takes precedence and the top bar is hidden.
-					If only the top bar is on, Header collapses it into a mobile sidebar automatically.
-				</p>
-			</dd>
-
-			<dt>Breadcrumbs</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="breadcrumbsEnabled"
-						@change="toggleBreadcrumbsEnabled"
+					<p class="subtle">
+						Turns on QuickSearch’s background-fetch loading UI. Local matches still
+						appear immediately while the dummy request runs.
+					</p>
+				</div>
+			</FormField>
+
+			<FormField label="Dark/Light mode button" fake>
+				<RadioGroup
+					name="ps-theme-toggle"
+					variant="boolean"
+					aria-label="Dark/Light mode button"
+					:model-value="themeToggleEnabled"
+					:options="showHideOptions"
+					@update:model-value="setThemeToggleEnabled"
+				/>
+			</FormField>
+
+			<FormField label="Top bar" fake>
+				<div>
+					<RadioGroup
+						name="ps-topbar"
+						variant="boolean"
+						aria-label="Top bar"
+						:model-value="topBarEnabled"
+						:options="showHideOptions"
+						@update:model-value="setTopBarEnabled"
 					/>
-					<span>Show route breadcrumbs in the header</span>
-				</label>
-			</dd>
-		</dl>
+					<p class="subtle">
+						On narrow screens: if both are on, the sidebar takes precedence and the top bar is hidden.
+						If only the top bar is on, Header collapses it into a mobile sidebar automatically.
+					</p>
+				</div>
+			</FormField>
+
+			<FormField label="Breadcrumbs" fake>
+				<RadioGroup
+					name="ps-breadcrumbs"
+					variant="boolean"
+					aria-label="Breadcrumbs"
+					:model-value="breadcrumbsEnabled"
+					:options="showHideOptions"
+					@update:model-value="setBreadcrumbsEnabled"
+				/>
+			</FormField>
+		</FormLayout>
 	</Section>
 
 	<Section title="Sidebar" subtitle="Primary navigation panel">
-		<dl>
-			<dt>Sidebar navigation</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="sidebarEnabled"
-						@change="toggleSidebarEnabled"
+		<FormLayout @submit.prevent>
+			<FormField label="Sidebar navigation" fake>
+				<div>
+					<RadioGroup
+						name="ps-sidebar"
+						variant="boolean"
+						aria-label="Sidebar navigation"
+						:model-value="sidebarEnabled"
+						:options="showHideOptions"
+						@update:model-value="setSidebarEnabled"
 					/>
-					<span>Show the sidebar navigation panel</span>
-				</label>
-				<p class="subtle">
-					When enabled, use the menu button in the header to open and pin the sidebar.
-				</p>
-			</dd>
-
-			<dt>Example link states</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="exampleLinksEnabled"
-						@change="toggleExampleLinks"
+					<p class="subtle">
+						When enabled, use the menu button in the header to open and pin the sidebar.
+					</p>
+				</div>
+			</FormField>
+
+			<FormField label="Example link states" fake>
+				<div>
+					<RadioGroup
+						name="ps-example-links"
+						variant="boolean"
+						aria-label="Example link states"
+						:model-value="exampleLinksEnabled"
+						:options="onOffOptions"
+						@update:model-value="setExampleLinks"
 					/>
-					<span>Add example links that demonstrate indicator, count, and disabled states</span>
-				</label>
-				<p class="subtle">
-					Adds a “Link states” section to the sidebar with an attention indicator,
-					a notification count badge, and a disabled item.
-				</p>
-			</dd>
-		</dl>
+					<p class="subtle">
+						Adds a “Link states” section to the sidebar with an attention indicator,
+						a notification count badge, and a disabled item.
+					</p>
+				</div>
+			</FormField>
+		</FormLayout>
 	</Section>
 </template>
 
 <script setup>
 import { inject, ref, onBeforeUnmount } 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 {
 	Notification01Icon,
 	Alert02Icon,
@@ -121,12 +150,26 @@ const EXAMPLE_LINK_NAMES = [
 	'example-disabled',
 ]
 
+const showHideOptions = [
+	{ label: 'Shown', value: true },
+	{ label: 'Hidden', value: false },
+]
+
+const onOffOptions = [
+	{ label: 'On', value: true },
+	{ label: 'Off', value: false },
+]
+
 const sidebarEnabled = inject('sidebarEnabled')
 const toggleSidebarEnabled = inject('toggleSidebarEnabled')
 const brandingEnabled = inject('brandingEnabled')
 const toggleBrandingEnabled = inject('toggleBrandingEnabled')
 const quickSearchEnabled = inject('quickSearchEnabled')
 const toggleQuickSearchEnabled = inject('toggleQuickSearchEnabled')
+const dummySearchFetchEnabled = inject('dummySearchFetchEnabled')
+const toggleDummySearchFetchEnabled = inject('toggleDummySearchFetchEnabled')
+const themeToggleEnabled = inject('themeToggleEnabled')
+const toggleThemeToggleEnabled = inject('toggleThemeToggleEnabled')
 const topBarEnabled = inject('topBarEnabled')
 const toggleTopBarEnabled = inject('toggleTopBarEnabled')
 const breadcrumbsEnabled = inject('breadcrumbsEnabled')
@@ -135,6 +178,40 @@ const navigation = inject('navigation', null)
 
 const exampleLinksEnabled = ref(false)
 
+function setFlag(flag, toggle, want) {
+	if (flag.value !== want) {
+		toggle()
+	}
+}
+
+function setBrandingEnabled(want) {
+	setFlag(brandingEnabled, toggleBrandingEnabled, want)
+}
+
+function setQuickSearchEnabled(want) {
+	setFlag(quickSearchEnabled, toggleQuickSearchEnabled, want)
+}
+
+function setDummySearchFetchEnabled(want) {
+	setFlag(dummySearchFetchEnabled, toggleDummySearchFetchEnabled, want)
+}
+
+function setThemeToggleEnabled(want) {
+	setFlag(themeToggleEnabled, toggleThemeToggleEnabled, want)
+}
+
+function setTopBarEnabled(want) {
+	setFlag(topBarEnabled, toggleTopBarEnabled, want)
+}
+
+function setBreadcrumbsEnabled(want) {
+	setFlag(breadcrumbsEnabled, toggleBreadcrumbsEnabled, want)
+}
+
+function setSidebarEnabled(want) {
+	setFlag(sidebarEnabled, toggleSidebarEnabled, want)
+}
+
 function removeExampleLinks() {
 	if (!navigation) {
 		return
@@ -178,9 +255,12 @@ function addExampleLinks() {
 	})
 }
 
-function toggleExampleLinks() {
-	exampleLinksEnabled.value = !exampleLinksEnabled.value
-	if (exampleLinksEnabled.value) {
+function setExampleLinks(want) {
+	if (exampleLinksEnabled.value === want) {
+		return
+	}
+	exampleLinksEnabled.value = want
+	if (want) {
 		if (!sidebarEnabled.value) {
 			toggleSidebarEnabled()
 		}
@@ -198,14 +278,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.page-structure-control {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	cursor: pointer;
-}
-
-.page-structure-control + .subtle {
+.subtle {
 	margin-top: 0.5rem;
 }
 </style>

package/vue/views/TableExample.vue

@@ -30,6 +30,7 @@
 
 <script setup>
 	import { ref, onMounted } from 'vue'
+	import { getExampleTableRows } from '../data/examplePeople.js'
 
 	const headers = ref([
 		{ key: "name", label: "Name", sortable: true, hidden: false, width: "20%" },
@@ -40,81 +41,6 @@
 	const data = ref([])
 
 	onMounted(() => {
-		data.value = [
-			{ name: "Alice", age: 30, city: "New York", foo: "bar" },
-			{ 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" },
-			{ 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" },
-			{ 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" },
-		]
+		data.value = getExampleTableRows()
 	})
 </script>