picocrank 1.8.7 → 1.8.9

package/.github/workflows/pages.yml

@@ -24,8 +24,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
-          cache: 'npm'
+          node-version: "22"
           
       - name: Install dependencies
         run: npm ci
@@ -50,4 +49,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

package/README.md

@@ -2,7 +2,7 @@
   <img alt = "project logo" src = "logo.png" width = "128" />
   <h1>PicoCrank</h1>
 
-  A set of zero dependency Vue components built on the [FemtoCrank](https://github.com/jamesread/femtocrank) global CSS theme.
+  A lightweight set of Vue components built on the [FemtoCrank](https://github.com/jamesread/femtocrank) global CSS theme.
 
   [![Maturity Badge](https://img.shields.io/badge/maturity-Production-brightgreen)](#none)
   [![Discord](https://img.shields.io/discord/846737624960860180?label=Discord%20Server)](https://discord.gg/jhYWWpNJ3v)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "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": "^1.2.1",
+    "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/vue": "^1.0.3",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.2",
     "femtocrank": "^2.4.11",
     "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.2.2",
+    "vite": "^7.2.4",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },

package/vue/components/Sidebar.vue

@@ -19,16 +19,16 @@
 						<!-- Render separator if link is a separator -->
 						<div v-if="link.type === 'separator'" class="separator"></div>
 						<div v-else-if="link.type === 'callback'">
-							<a href="#" @click.prevent="link.callback()">
+							<a href="#" @click.prevent="handleLinkClick(() => link.callback())">
 								<HugeiconsIcon :icon="link.icon" />
 								<span>{{ link.title }}</span>
 							</a>
 						</div>
 						<div v-else-if="link.type === 'html'" v-html="link.html"></div>
-						<router-link v-else :to="link.path" :class="{ active: isActive(link.path) }">
-							<HugeiconsIcon :icon="link.icon" />
-							<span>{{ link.title }}</span>
-						</router-link>
+					<router-link v-else v-bind="link.props || {}" :to="link.to || link.path" :class="{ active: isActive(link) }" @click="handleLinkClick()">
+						<HugeiconsIcon :icon="link.icon" />
+						<span>{{ link.title }}</span>
+					</router-link>
 					</li>
 				</ul>
 			</nav>
@@ -49,22 +49,44 @@ const navigationLinks = ref([])
 const route = useRoute()
 const router = useRouter()
 
-function addRouterLink(link, altTitle = null) {
-	const route = router.getRoutes().find(r => r.name === link)
+/**
+ * Add a router link to the sidebar navigation
+ * @param {string} link - Route name
+ * @param {string|null} altTitle - Optional alternative title
+ * @param {object} options - Additional options
+ * @param {object} options.params - Route params to pass (e.g., { id: 1 })
+ * @param {object} options.props - Props to pass to router-link (e.g., { replace: true, custom: true })
+ * @param {object|string} options.to - Override the 'to' prop (if provided, takes precedence over params)
+ */
+function addRouterLink(link, altTitle = null, options = {}) {
+	const foundRoute = router.getRoutes().find(r => r.name === link)
+
+	if (!foundRoute) {
+		console.warn(`Route "${link}" not found`)
+		return
+	}
 
-	const title = altTitle || route.meta.title || route.name
+	const title = altTitle || foundRoute.meta?.title || foundRoute.name
 
-	if (route) {
-		const routeLink = {
-			name: link,
-			title: title,
-			path: route.path,
-			icon: route.meta.icon || PinIcon,
-			type: 'route'
-		}
+	// Determine the 'to' value: use options.to if provided, otherwise construct from params, or fall back to path
+	let toValue = foundRoute.path
+	if (options.to) {
+		toValue = options.to
+	} else if (options.params) {
+		toValue = { name: link, params: options.params }
+	}
 
-		addNavigationLink(routeLink)
+	const routeLink = {
+		name: link,
+		title: title,
+		path: foundRoute.path,
+		to: toValue,
+		icon: foundRoute.meta?.icon || PinIcon,
+		type: 'route',
+		props: options.props || {}
 	}
+
+	addNavigationLink(routeLink)
 }
 
 function addNavigationLink(link) {
@@ -145,8 +167,43 @@ function close() {
   isStuck.value = false
 }
 
-function isActive(path) {
-  return route.path === path
+function isActive(link) {
+  // If link has a 'to' object with a name, compare route name and params
+  if (link.to && typeof link.to === 'object' && link.to.name) {
+    // Compare route names first
+    if (route.name !== link.to.name) {
+      return false
+    }
+    
+    // If params are specified in the link, all specified params must match
+    if (link.to.params && Object.keys(link.to.params).length > 0) {
+      const linkParams = link.to.params
+      const routeParams = route.params
+      
+      // Check if all params in link.to.params match route.params
+      for (const key in linkParams) {
+        if (String(routeParams[key]) !== String(linkParams[key])) {
+          return false
+        }
+      }
+    }
+    
+    // Route name matches, and either no params specified or all params match
+    return true
+  }
+  
+  // Fall back to path comparison for string paths
+  const linkPath = typeof link.to === 'string' ? link.to : link.path
+  return route.path === linkPath
+}
+
+function handleLinkClick(callback = null) {
+  if (callback) {
+    callback()
+  }
+  if (!isStuck.value) {
+    close()
+  }
 }
 
 defineExpose({

package/vue/components/Table.vue

@@ -80,7 +80,6 @@
 		return [...items.value].sort((a, b) => {
 		    const av = a[col];
 			const bv = b[col];
-			console.log("sort values", col, av, bv)
 
             if (av === bv) return 0;
 			if (av === null || av === undefined) return 1;
@@ -123,8 +122,6 @@
 		    sortBy.value = header.key;
 		    sortDir.value = 'asc';
 		}
-
-		console.log(`Sorting by ${sortBy.value} in ${sortDir.value} order`);
 	}
 </script>
 

package/vue/views/App.vue

@@ -59,9 +59,9 @@
 			sidebar.value.addRouterLink('TableExample')
 			sidebar.value.addRouterLink('CalendarExample')
 			sidebar.value.addSeparator('separator-1');
-			sidebar.value.addRouterLink('ViewItem', { id: 1 })
+			sidebar.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })
 			sidebar.value.addSeparator('separator-2');
-			sidebar.value.addCallback('Hello World', helloWorld, { icon: Pin02Icon })
+			sidebar.value.addCallback('Callback Example', helloWorld, { icon: Pin02Icon })
 			sidebar.value.addSeparator('separator-3');
 			sidebar.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
 			sidebar.value.addRouterLink('Admin')