picocrank 1.12.4 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,12 +18,12 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^3.1.0",
+    "@hugeicons/core-free-icons": "^3.1.1",
     "@hugeicons/vue": "^1.0.4",
     "@vitejs/plugin-vue": "^6.0.3",
-    "femtocrank": "^2.4.12",
+    "femtocrank": "^2.5.0",
     "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
   },

package/vue/components/Header.vue

@@ -11,6 +11,8 @@
 			</button>
 		</div>
 
+		<TopBar v-if="topBarEnabled" :navigation="navigation" />
+
 		<Breadcrumbs v-if="breadcrumbs" />
 
 		<slot name="toolbar" />
@@ -30,6 +32,7 @@
 	import { Menu01Icon } from "@hugeicons/core-free-icons";
 
 	import Breadcrumbs from "./Breadcrumbs.vue";
+	import TopBar from "./TopBar.vue";
 
 	const emit = defineEmits(["toggleSidebar"]);
 
@@ -54,6 +57,14 @@
 			type: Boolean,
 			default: true,
 		},
+		topBarEnabled: {
+			type: Boolean,
+			default: false,
+		},
+		navigation: {
+			type: Object,
+			default: null,
+		},
 	});
 </script>
 

package/vue/components/NavigationGrid.vue

@@ -124,7 +124,7 @@ function handleLinkClick(link) {
 
 .navigation-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 	gap: 1rem;
 	padding: 1rem 0;
 }

package/vue/components/Pagination.vue

@@ -20,6 +20,17 @@
     </div>
     
     <div class="pagination-controls">
+      <button 
+        class="button"
+        :disabled="currentPageValue === 1"
+        @click="goToPage(1)"
+        title="First page"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+          <path fill="currentColor" d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z"/>
+        </svg>
+      </button>
+      
       <button 
         class="button"
         :disabled="currentPageValue === 1"
@@ -31,37 +42,11 @@
         </svg>
       </button>
 
-      
-        <button 
-          v-if="showFirstPage"
-          class="button"
-          :class="{ active: currentPageValue === 1 }"
-          @click="goToPage(1)"
-        >
-          1
-        </button>
-        
-        <span v-if="showFirstEllipsis" class="pagination-ellipsis">...</span>
-        
-        <button 
-          v-for="page in visiblePages" 
-          :key="page"
-          class="button"
-          :class="{ active: currentPageValue === page }"
-          @click="goToPage(page)"
-        >
-          {{ page }}
-        </button>
-        
-        <span v-if="showLastEllipsis" class="pagination-ellipsis">...</span>
-        
-        <button 
-          v-if="showLastPage"
-          class="button"
-          :class="{ active: currentPageValue === totalPages }"
-          @click="goToPage(totalPages)"
-        >
-        {{ totalPages }}
+      <button 
+        class="button active"
+        disabled
+      >
+        {{ currentPageValue }}
       </button>
       
       <button 
@@ -74,6 +59,17 @@
           <path fill="currentColor" d="M8.59 16.59L10 18l6-6l-6-6L8.59 7.41L13.17 12z"/>
         </svg>
       </button>
+      
+      <button 
+        class="button"
+        :disabled="currentPageValue === totalPages"
+        @click="goToPage(totalPages)"
+        title="Last page"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+          <path fill="currentColor" d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z"/>
+        </svg>
+      </button>
     </div>
   </div>
 </template>
@@ -126,30 +122,6 @@ const totalPages = computed(() => Math.ceil(props.total / localPageSize.value))
 const startItem = computed(() => (currentPageValue.value - 1) * localPageSize.value)
 const endItem = computed(() => Math.min(currentPageValue.value * localPageSize.value, props.total))
 
-const maxVisiblePages = 5
-const visiblePages = computed(() => {
-  const pages = []
-  const halfVisible = Math.floor(maxVisiblePages / 2)
-  
-  let start = Math.max(1, currentPageValue.value - halfVisible)
-  let end = Math.min(totalPages.value, start + maxVisiblePages - 1)
-  
-  if (end - start < maxVisiblePages - 1) {
-    start = Math.max(1, end - maxVisiblePages + 1)
-  }
-  
-  for (let i = start; i <= end; i++) {
-    pages.push(i)
-  }
-  
-  return pages
-})
-
-const showFirstPage = computed(() => visiblePages.value[0] > 1)
-const showLastPage = computed(() => visiblePages.value[visiblePages.value.length - 1] < totalPages.value)
-const showFirstEllipsis = computed(() => visiblePages.value[0] > 2)
-const showLastEllipsis = computed(() => visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1)
-
 function goToPage(page) {
   if (page >= 1 && page <= totalPages.value && page !== currentPageValue.value) {
     localCurrentPage.value = page
@@ -193,7 +165,7 @@ watch(() => props.pageSize, (newSize) => {
 
 .pagination-text {
   font-size: 0.875rem;
-  color: #6c757d;
+  color: #666;
 }
 
 .pagination-controls {
@@ -203,6 +175,7 @@ watch(() => props.pageSize, (newSize) => {
 }
 
 .button {
+  border: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -211,22 +184,10 @@ watch(() => props.pageSize, (newSize) => {
 }
 
 .button:disabled {
-  opacity: 0.5;
   background: transparent;
   cursor: not-allowed;
 }
 
-.button.active {
-  background: #545f69;
-  color: #fff;
-}
-
-.pagination-ellipsis {
-  padding: 0.5rem;
-  color: #6c757d;
-  font-size: 0.875rem;
-}
-
 #page-size {
   background: transparent;
   margin-left: 0.5rem;
@@ -253,4 +214,10 @@ option {
     justify-content: center;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .pagination-text {
+	color: #adb5bd;
+  }
+}
 </style> 

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">
 		<template #toolbar>
 			<QuickSearch
+				v-if="quickSearchEnabled"
 				ref="quickSearchRef"
 				placeholder="Search items..."
 				:search-fields="['title', 'name']"
@@ -42,6 +43,8 @@
 	const sidebar = ref(null);
 	const navigation = ref(null);
 	const sidebarEnabled = ref(true);
+	const quickSearchEnabled = ref(true);
+	const topBarEnabled = ref(false);
 
 	function toggleSidebar() {
 		if (sidebar.value) {
@@ -53,9 +56,21 @@
 		sidebarEnabled.value = !sidebarEnabled.value;
 	}
 
-	// Provide sidebar state and toggle function for child components
+	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('quickSearchEnabled', quickSearchEnabled);
+	provide('toggleQuickSearchEnabled', toggleQuickSearchEnabled);
+	provide('topBarEnabled', topBarEnabled);
+	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 
 	onMounted(() => {
 		if (navigation.value) {
@@ -84,15 +99,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/Welcome.vue

@@ -1,10 +1,20 @@
 <template>
 	<Section title = "Welcome" classes = "">
 		<template #toolbar>
-			<button @click="toggleSidebarEnabled" :class="sidebarEnabled ? 'neutral' : 'good'">
-				<HugeiconsIcon :icon="Menu01Icon" width="1em" height="1em" />
-				{{ sidebarEnabled ? 'Disable Sidebar' : 'Enable Sidebar' }}
-			</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="sidebarEnabled" @change="toggleSidebarEnabled" />
+					<span>Enable Sidebar</span>
+				</label>
+				<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.
@@ -83,7 +93,11 @@
 	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, QuickSearch, and TopBar state and toggle functions from App.vue
 	const sidebarEnabled = inject('sidebarEnabled');
 	const toggleSidebarEnabled = inject('toggleSidebarEnabled');
+	const quickSearchEnabled = inject('quickSearchEnabled');
+	const toggleQuickSearchEnabled = inject('toggleQuickSearchEnabled');
+	const topBarEnabled = inject('topBarEnabled');
+	const toggleTopBarEnabled = inject('toggleTopBarEnabled');
 </script>