picocrank 1.12.5 → 1.13.1

package/package.json

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

package/vue/components/Header.vue

@@ -1,8 +1,12 @@
 <template>
 	<header>
-		<div class = "image-and-title flex-row" :id = "sidebarEnabled ? 'sidebar-button' : null" @click = "sidebarEnabled && emit('toggleSidebar')">
-			<img :src = "logoUrl" alt = "Logo" class = "logo" />
-			<h1>{{ title }}</h1>
+		<div
+			:id = "sidebarEnabled ? 'sidebar-button' : null"
+			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding }]"
+			@click = "sidebarEnabled && emit('toggleSidebar')"
+		>
+			<img v-if="showBranding" :src = "logoUrl" alt = "Logo" class = "logo" />
+			<h1 v-if="showBranding">{{ title }}</h1>
 
 			<div class = "fg1" />
 
@@ -11,6 +15,8 @@
 			</button>
 		</div>
 
+		<TopBar v-if="topBarEnabled" :navigation="navigation" />
+
 		<Breadcrumbs v-if="breadcrumbs" />
 
 		<slot name="toolbar" />
@@ -30,6 +36,7 @@
 	import { Menu01Icon } from "@hugeicons/core-free-icons";
 
 	import Breadcrumbs from "./Breadcrumbs.vue";
+	import TopBar from "./TopBar.vue";
 
 	const emit = defineEmits(["toggleSidebar"]);
 
@@ -54,6 +61,18 @@
 			type: Boolean,
 			default: true,
 		},
+		showBranding: {
+			type: Boolean,
+			default: true,
+		},
+		topBarEnabled: {
+			type: Boolean,
+			default: false,
+		},
+		navigation: {
+			type: Object,
+			default: null,
+		},
 	});
 </script>
 
@@ -67,6 +86,10 @@ button:hover {
 	background-color: transparent;
 }
 
+#sidebar-button.disabled-branding {
+	width: auto;
+}
+
 .user-info span {
 	padding-right: 0.5rem;
 }

package/vue/components/TopBar.vue

@@ -0,0 +1,132 @@
+<template>
+	<nav class="topbar">
+		<div class="topbar-links flex-row">
+			<template v-for="link in navigationLinks" :key="link.name">
+				<!-- Render separator as a divider -->
+				<div v-if="link.type === 'separator'" class="separator"></div>
+				<!-- Render callback link -->
+				<a v-else-if="link.type === 'callback'" href="#" @click.prevent="handleLinkClick(() => link.callback())" class="button topbar-link">
+					<HugeiconsIcon :icon="link.icon" width="1em" height="1em" />
+					<span>{{ link.title }}</span>
+				</a>
+				<!-- Render HTML content -->
+				<div v-else-if="link.type === 'html'" v-html="link.html" class="topbar-html"></div>
+				<!-- Render router link -->
+				<router-link v-else v-bind="link.props || {}" :to="link.to || link.path" :class="['button', 'topbar-link', { active: isActive(link) }]">
+					<HugeiconsIcon :icon="link.icon" width="1em" height="1em" />
+					<span>{{ link.title }}</span>
+				</router-link>
+			</template>
+		</div>
+	</nav>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+
+const props = defineProps({
+	navigation: {
+		type: Object,
+		default: null
+	}
+})
+
+// Try to get navigation from inject first, fall back to prop
+const injectedNavigation = inject('navigation', null)
+
+// Get navigation object - handle both component ref and direct object
+const navigation = computed(() => {
+	const nav = props.navigation || injectedNavigation
+	if (!nav) return null
+	
+	// If it's a component ref, access its exposed API
+	if (nav.value) {
+		return nav.value
+	}
+	
+	// Otherwise, assume it's the navigation object directly
+	return nav
+})
+
+// Get navigation links and isActive function from navigation
+// navigationLinks is a ref, so we return it directly (Vue will unwrap it in template)
+const navigationLinks = computed(() => {
+	const nav = navigation.value
+	if (!nav || !nav.navigationLinks) {
+		return []
+	}
+	// Return the ref itself - Vue will unwrap it in the template
+	return nav.navigationLinks
+})
+
+// Get isActive function - create a function that accesses the navigation computed
+function isActive(link) {
+	const nav = navigation.value
+	if (!nav || !nav.isActive) {
+		return false
+	}
+	return nav.isActive(link)
+}
+
+function handleLinkClick(callback = null) {
+	if (callback) {
+		callback()
+	}
+}
+</script>
+
+<style scoped>
+.topbar {
+	width: 100%;
+}
+
+.topbar-links {
+	display: flex;
+	align-items: center;
+	gap: 0.125rem;
+	flex-wrap: wrap;
+}
+
+.topbar-link {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.5em 0.75em;
+	border-radius: 0.25em;
+	text-decoration: none;
+	color: inherit;
+	transition: background-color 0.15s ease;
+	white-space: nowrap;
+	border: 0;
+	font-weight: normal;
+}
+
+.topbar-link.active {
+	text-decoration: underline;
+	font-weight: 500;
+}
+
+.topbar-html {
+	display: flex;
+	align-items: center;
+}
+
+.separator {
+	width: 1px;
+	height: 1.5em;
+	background-color: currentColor;
+	opacity: 0.3;
+	margin: 0 0.125rem;
+}
+
+@media (prefers-color-scheme: dark) {
+	.topbar-link {
+		color: #f8f9fa;
+	}
+	
+	.separator {
+		opacity: 0.5;
+	}
+}
+</style>

package/vue/views/App.vue

@@ -1,7 +1,8 @@
 <template>
-	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled">
+	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled">
 		<template #toolbar>
 			<QuickSearch
+				v-if="quickSearchEnabled"
 				ref="quickSearchRef"
 				placeholder="Search items..."
 				:search-fields="['title', 'name']"
@@ -42,6 +43,9 @@
 	const sidebar = ref(null);
 	const navigation = ref(null);
 	const sidebarEnabled = ref(true);
+	const brandingEnabled = ref(true);
+	const quickSearchEnabled = ref(true);
+	const topBarEnabled = ref(false);
 
 	function toggleSidebar() {
 		if (sidebar.value) {
@@ -53,9 +57,28 @@
 		sidebarEnabled.value = !sidebarEnabled.value;
 	}
 
-	// Provide sidebar state and toggle function for child components
+	function toggleBrandingEnabled() {
+		brandingEnabled.value = !brandingEnabled.value;
+	}
+
+	function toggleQuickSearchEnabled() {
+		quickSearchEnabled.value = !quickSearchEnabled.value;
+	}
+
+	function toggleTopBarEnabled() {
+		topBarEnabled.value = !topBarEnabled.value;
+	}
+
+	// Provide sidebar, QuickSearch, and TopBar state and toggle functions for child components
 	provide('sidebarEnabled', sidebarEnabled);
 	provide('toggleSidebarEnabled', toggleSidebarEnabled);
+	provide('brandingEnabled', brandingEnabled);
+	provide('toggleBrandingEnabled', toggleBrandingEnabled);
+
+	provide('quickSearchEnabled', quickSearchEnabled);
+	provide('toggleQuickSearchEnabled', toggleQuickSearchEnabled);
+	provide('topBarEnabled', topBarEnabled);
+	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 
 	onMounted(() => {
 		if (navigation.value) {
@@ -84,15 +107,17 @@
 			sidebar.value.stick();
 		}
 
-		quickSearchRef.value.addItem({
-			id: 'hello-world',
-			title: 'Hello World',
-			name: 'hello-world',
-			description: 'This is a test item',
-			category: 'Actions',
-			type: 'callback',
-			callback: helloWorld
-		})
+		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
+			})
+		}
 	});
 
 	function helloWorld() {

package/vue/views/FormExample.vue

@@ -1,102 +1,186 @@
 <template>
 	<Section 
 		title="Form Example" 
-		subtitle="A simple form with various input types"
-		>
+		subtitle="A simple form demonstrating Femtocrank form layout"
+	>
 		<template #toolbar>
 			<button @click="resetForm">Reset</button>
 		</template>
 
 		<form @submit.prevent="handleSubmit">
-			<div class="form-group">
-				<label for="name">Name</label>
-				<input 
-					id="name"
-					v-model="formData.name" 
-					type="text" 
-					placeholder="Enter your name"
-					required
-				/>
-			</div>
-
-			<div class="form-group">
-				<label for="email">Email</label>
-				<input 
-					id="email"
-					v-model="formData.email" 
-					type="email" 
-					placeholder="Enter your email"
-					required
-				/>
-			</div>
-
-			<div class="form-group">
-				<label for="country">Country</label>
-				<select id="country" v-model="formData.country" required>
-					<option value="">Select a country</option>
-					<option value="us">United States</option>
-					<option value="uk">United Kingdom</option>
-					<option value="ca">Canada</option>
-					<option value="au">Australia</option>
-					<option value="de">Germany</option>
-					<option value="fr">France</option>
-				</select>
-			</div>
-
-			<div class="form-group">
-				<label for="message">Message</label>
-				<textarea 
-					id="message"
-					v-model="formData.message" 
-					placeholder="Enter your message"
-					rows="4"
-				></textarea>
+			<!-- Name -->
+			<label for="name">Name</label>
+			<input 
+				id="name"
+				v-model="formData.name" 
+				type="text" 
+				placeholder="Enter your name"
+				required
+			/>
+
+			<!-- Role (radio group) -->
+			<span class="fake-label">Role</span>
+			<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>
 
-			<div class="form-group">
+			<!-- Salary (select) -->
+			<label for="salary">Salary</label>
+			<select id="salary" v-model="formData.salary">
+				<option value="0">Select a salary</option>
+				<option value="10000">£10,000</option>
+				<option value="20000">£20,000</option>
+				<option value="30000">£30,000</option>
+				<option value="40000">£40,000</option>
+				<option value="50000">£50,000</option>
+			</select>
+
+			<!-- Email -->
+			<label for="email">Email</label>
+			<input 
+				id="email"
+				v-model="formData.email" 
+				type="email" 
+				placeholder="Enter your email"
+				required
+			/>
+
+			<!-- Administrator checkbox -->
+			<label>Is Administrator?</label>
+			<input 
+				type="checkbox" 
+				id="is-admin"
+				v-model="formData.isAdmin"
+			/>
+
+			<!-- Website -->
+			<label for="website">Website</label>
+			<input 
+				id="website"
+				v-model="formData.website" 
+				type="url" 
+				placeholder="https://example.com"
+			/>
+
+			<!-- Favourite food (disabled) -->
+			<label for="favourite-food">Favourite Food</label>
+			<input 
+				id="favourite-food"
+				v-model="formData.favouriteFood"
+				type="text"
+				placeholder="e.g. Pizza"
+				disabled
+			/>
+
+			<!-- Favourite colour -->
+			<label for="favourite-colour">Favourite Colour</label>
+			<input
+				id="favourite-colour"
+				v-model="formData.favouriteColour"
+				type="color"
+			/>
+
+			<!-- Favourite number -->
+			<label for="favourite-number">Favourite Number</label>
+			<input
+				id="favourite-number"
+				v-model.number="formData.favouriteNumber"
+				type="number"
+				min="0"
+				max="100"
+				step="1"
+			/>
+
+			<!-- Newsletters (checkbox group) -->
+			<span class="fake-label">
+				Newsletters
+			</span>
+			<div>
 				<label>
 					<input 
-						type="checkbox" 
-						v-model="formData.newsletter"
+						type="checkbox"
+						id="newsletter1"
+						v-model="formData.newsletter1"
 					/>
-					Subscribe to newsletter
+					<span>Newsletter 1</span>
 				</label>
-			</div>
 
-			<div class="form-group">
-				<label>Preferred Contact Method</label>
-				<div class="radio-group">
-					<label>
-						<input 
-							type="radio" 
-							v-model="formData.contactMethod" 
-							value="email"
-						/>
-						Email
-					</label>
-					<label>
-						<input 
-							type="radio" 
-							v-model="formData.contactMethod" 
-							value="phone"
-						/>
-						Phone
-					</label>
-					<label>
-						<input 
-							type="radio" 
-							v-model="formData.contactMethod" 
-							value="mail"
-						/>
-						Mail
-					</label>
-				</div>
+				<label>
+					<input 
+						type="checkbox"
+						id="newsletter2"
+						v-model="formData.newsletter2"
+					/>
+					<span>Newsletter 2</span>
+				</label>
 			</div>
 
-			<div class="form-actions">
+			<!-- Comments -->
+			<label for="comments">Comments</label>
+			<textarea
+				id="comments"
+				v-model="formData.comments"
+			></textarea>
+
+			<!-- Readonly textarea -->
+			<label for="readonly">Readonly</label>
+			<textarea
+				id="readonly"
+				v-model="formData.readonlyText"
+				readonly
+			></textarea>
+
+			<!-- Disabled textarea -->
+			<label for="disabled">Disabled</label>
+			<textarea
+				id="disabled"
+				v-model="formData.disabledText"
+				disabled
+			></textarea>
+
+			<!-- Datetime -->
+			<label for="datetime">
+				Datetime
+			</label>
+			<input
+				id="datetime"
+				type="datetime-local"
+				v-model="formData.datetime"
+			/>
+
+			<!-- Buttons in fieldset to match simple.html -->
+			<fieldset>
 				<button type="submit">Submit</button>
-				<button type="button" @click="resetForm">Clear</button>
-			</div>
+				<button type="button" @click="handleCancel">Cancel</button>
+				<button type="reset" @click="resetForm">Reset</button>
+				<button type="submit" disabled>Disabled</button>
+			</fieldset>
 		</form>
 
 		<div v-if="submitted" class="form-result">
@@ -112,11 +196,20 @@ import Section from '../components/Section.vue'
 
 const formData = ref({
 	name: '',
+	role: '',
+	salary: '0',
 	email: '',
-	country: '',
-	message: '',
-	newsletter: false,
-	contactMethod: 'email'
+	isAdmin: false,
+	website: '',
+	favouriteFood: '',
+	favouriteColour: '#dee3e7',
+	favouriteNumber: 50,
+	newsletter1: false,
+	newsletter2: false,
+	comments: '',
+	readonlyText: 'This is a readonly textarea.',
+	disabledText: 'This is a disabled textarea.',
+	datetime: ''
 })
 
 const submitted = ref(false)
@@ -128,141 +221,29 @@ function handleSubmit() {
 	alert('Form submitted! Check the console and the form result below.')
 }
 
+function handleCancel() {
+	// For demo purposes, just reset submitted state
+	submitted.value = false
+}
+
 function resetForm() {
 	formData.value = {
 		name: '',
+		role: '',
+		salary: '0',
 		email: '',
-		country: '',
-		message: '',
-		newsletter: false,
-		contactMethod: 'email'
+		isAdmin: false,
+		website: '',
+		favouriteFood: '',
+		favouriteColour: '#dee3e7',
+		favouriteNumber: 50,
+		newsletter1: false,
+		newsletter2: false,
+		comments: '',
+		readonlyText: 'This is a readonly textarea.',
+		disabledText: 'This is a disabled textarea.',
+		datetime: ''
 	}
 	submitted.value = false
 }
-</script>
-
-<style scoped>
-.form-group {
-	margin-bottom: 1.5rem;
-}
-
-.form-group label {
-	display: block;
-	margin-bottom: 0.5rem;
-	font-weight: 500;
-}
-
-.form-group input[type="text"],
-.form-group input[type="email"],
-.form-group select,
-.form-group textarea {
-	width: 100%;
-	padding: 0.5rem;
-	border: 1px solid #ccc;
-	border-radius: 0.25rem;
-	font-size: 1rem;
-}
-
-.form-group textarea {
-	resize: vertical;
-	font-family: inherit;
-}
-
-.form-group input[type="checkbox"],
-.form-group input[type="radio"] {
-	margin-right: 0.5rem;
-}
-
-.form-group label:has(input[type="checkbox"]) {
-	display: flex;
-	align-items: center;
-	font-weight: normal;
-}
-
-.radio-group {
-	display: flex;
-	gap: 1.5rem;
-	flex-wrap: wrap;
-}
-
-.radio-group label {
-	display: flex;
-	align-items: center;
-	font-weight: normal;
-}
-
-.form-actions {
-	display: flex;
-	gap: 1rem;
-	margin-top: 2rem;
-}
-
-.form-actions button {
-	padding: 0.75rem 1.5rem;
-	border: none;
-	border-radius: 0.25rem;
-	font-size: 1rem;
-	cursor: pointer;
-}
-
-.form-actions button[type="submit"] {
-	background-color: #0366d6;
-	color: white;
-}
-
-.form-actions button[type="submit"]:hover {
-	background-color: #0256c2;
-}
-
-.form-actions button[type="button"] {
-	background-color: #6c757d;
-	color: white;
-}
-
-.form-actions button[type="button"]:hover {
-	background-color: #5a6268;
-}
-
-.form-result {
-	margin-top: 2rem;
-	padding: 1rem;
-	background-color: #f8f9fa;
-	border-radius: 0.25rem;
-	border: 1px solid #dee2e6;
-}
-
-.form-result h3 {
-	margin-top: 0;
-	margin-bottom: 1rem;
-}
-
-.form-result pre {
-	margin: 0;
-	padding: 1rem;
-	background-color: white;
-	border-radius: 0.25rem;
-	overflow-x: auto;
-}
-
-@media (prefers-color-scheme: dark) {
-	.form-group input[type="text"],
-	.form-group input[type="email"],
-	.form-group select,
-	.form-group textarea {
-		background-color: #333;
-		border-color: #555;
-		color: #fff;
-	}
-
-	.form-result {
-		background-color: #2d2d2d;
-		border-color: #444;
-	}
-
-	.form-result pre {
-		background-color: #1a1a1a;
-		color: #fff;
-	}
-}
-</style>
-
+</script>

package/vue/views/Welcome.vue

@@ -5,14 +5,28 @@
 				<HugeiconsIcon :icon="Menu01Icon" width="1em" height="1em" />
 				{{ sidebarEnabled ? 'Disable Sidebar' : 'Enable Sidebar' }}
 			</button>
+			<button @click="toggleBrandingEnabled" :class="brandingEnabled ? 'neutral' : 'good'">
+				<HugeiconsIcon :icon="HighlighterIcon" width="1em" height="1em" />
+				{{ brandingEnabled ? 'Hide Logo & Title' : 'Show Logo & Title' }}
+			</button>
+			<div style="display: flex; gap: 1rem; align-items: center;">
+				<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+					<input type="checkbox" :checked="quickSearchEnabled" @change="toggleQuickSearchEnabled" />
+					<span>Enable QuickSearch</span>
+				</label>
+				<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+					<input type="checkbox" :checked="topBarEnabled" @change="toggleTopBarEnabled" />
+					<span>Enable TopBar</span>
+				</label>
+			</div>
 		</template>
 		<p>
-			Welcome to Femtocrank, a web-based tool for analyzing and visualizing the performance of your code.
-			To get started, you can either upload a file or paste your code directly into the editor.
+			Welcome to <strong>PicoCrank</strong>! This is a flexible example application to showcase a modular Vue 3 UI with a focus on ease of navigation, live UI controls, and modern design elements. Use the toolbar above to interactively enable or disable interface features like the sidebar, branding, QuickSearch, and the top navigation bar.
 		</p>
 		<p>
-			For more information on how to use Femtocrank, please refer to the <a href = "/docs">documentation</a>.
+			Explore the sections below to see reusable components in action, including toolbars, buttons, and layout options. PicoCrank is designed to be a starting point for your own rapid Vue projects&mdash;inspect the code and try customizing the UI!
 		</p>
+
 	</Section>
 
 	<Section title = "Lorum" id = "lorem">
@@ -83,7 +97,13 @@
 	import { HighlighterIcon } from '@hugeicons/core-free-icons';
 	import { Menu01Icon } from '@hugeicons/core-free-icons';
 
-	// Inject sidebar state and toggle function from App.vue
+	// Inject sidebar and branding state and toggle functions from App.vue
 	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 topBarEnabled = inject('topBarEnabled');
+	const toggleTopBarEnabled = inject('toggleTopBarEnabled');
 </script>