picocrank 1.8.6 → 1.8.8

package/package.json

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

package/vue/components/Section.vue

@@ -38,37 +38,4 @@ const props = defineProps({
 		default: "",
 	},
 });
-</script>
-
-<style scoped>
-:slotted(.section-header button).neutral,
-:slotted(.section-header .button).neutral
-{
-	background-color: white;
-	color: #000;
-}
-
-:slotted(.section-header .button:hover).neutral,
-:slotted(.section-header .button:hover).neutral
-{
-	background-color: #f0f0f0;
-}
-
-@media (prefers-color-scheme: dark) {
-	:slotted(.section-header button).neutral,
-	:slotted(.section-header .button).neutral
-	{
-		background-color: #111;
-		border: 1px solid #222;
-		color: #fff;
-	}
-
-	:slotted(.section-header button:hover).neutral,
-	:slotted(.section-header .button:hover).neutral
-	{
-		background-color: #222;
-		border: 1px solid #333;
-		color: #fff;
-	}
-}
-</style>
+</script>

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')