picocrank 1.18.1 → 1.18.2

package/package.json

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

package/vue/components/Navigation.vue

@@ -47,7 +47,10 @@ function addRouterLink(link, altTitle = null, options = {}) {
 		icon: foundRoute.meta?.icon || PinIcon,
 		type: 'route',
 		props: options.props || {},
-		description: options.description || foundRoute.meta?.description || null
+		description: options.description || foundRoute.meta?.description || null,
+		disabled: options.disabled || false,
+		iconColor: options.iconColor || null,
+		indicator: options.indicator || false
 	}
 
 	addNavigationLink(routeLink)
@@ -69,7 +72,10 @@ function addCallback(title, callback, options = {}) {
 	icon: options.icon || PinIcon,
 	callback: callback || (() => {}),
 	title: title,
-	description: options.description || null
+	description: options.description || null,
+	disabled: options.disabled || false,
+	iconColor: options.iconColor || null,
+	indicator: options.indicator || false
   }
 
   addNavigationLink(callbackLink)

package/vue/components/NavigationGrid.vue

@@ -4,11 +4,17 @@
 			<button
 				v-for="link in filteredLinks"
 				:key="link.name"
-				:class="['nav-button', { active: isLinkActive(link) }]"
+				:class="['nav-button', { active: isLinkActive(link), disabled: link.disabled }]"
+				:disabled="link.disabled"
 				:title="link.title"
 				@click="handleLinkClick(link)"
 			>
-				<div class="nav-button-icon">
+				<span
+					v-if="showIndicator(link)"
+					class="nav-button-indicator"
+					aria-label="Requires attention"
+				/>
+				<div class="nav-button-icon" :style="getIconStyle(link)">
 					<HugeiconsIcon
 						:icon="link.icon"
 						:width="iconSize"
@@ -102,10 +108,30 @@ const filteredLinks = computed(() => {
 });
 
 function isLinkActive(link) {
+	if (link.disabled) {
+		return false;
+	}
 	return isActive(link);
 }
 
+function getIconStyle(link) {
+	if (link.disabled || isLinkActive(link)) {
+		return undefined;
+	}
+	if (link.iconColor) {
+		return { color: link.iconColor };
+	}
+	return undefined;
+}
+
+function showIndicator(link) {
+	return link.indicator && !link.disabled;
+}
+
 function handleLinkClick(link) {
+	if (link.disabled) {
+		return;
+	}
 	if (link.type === 'route') {
 		const to = link.to || link.path;
 		if (to) {
@@ -147,6 +173,7 @@ function handleLinkClick(link) {
 	cursor: pointer;
 	transition: all 0.2s ease;
 	text-align: left;
+	position: relative;
 }
 
 .navigation-grid.compact .nav-button {
@@ -188,6 +215,46 @@ function handleLinkClick(link) {
 	color: #fff;
 }
 
+.nav-button:disabled,
+.nav-button.disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.nav-button:disabled:hover,
+.nav-button.disabled:hover {
+	border-color: var(--border-color, #e1e5e9);
+	transform: none;
+	box-shadow: none;
+	background: transparent;
+}
+
+.nav-button:disabled .nav-button-icon,
+.nav-button.disabled .nav-button-icon {
+	color: var(--text-muted, #999);
+}
+
+.nav-button-indicator {
+	position: absolute;
+	top: 0.75rem;
+	right: 0.75rem;
+	width: 0.625rem;
+	height: 0.625rem;
+	border-radius: 50%;
+	background: var(--indicator-color, #dc3545);
+	box-shadow: 0 0 0 2px var(--background-color, #fff);
+	flex-shrink: 0;
+}
+
+.navigation-grid.compact .nav-button-indicator {
+	top: 0.5rem;
+	right: 0.5rem;
+}
+
+.nav-button.active .nav-button-indicator {
+	box-shadow: 0 0 0 2px var(--primary-color, #007bff);
+}
+
 .nav-button-label {
 	font-weight: bold;
 	font-size: 1.125rem;

package/vue/views/UserControlPanel.vue

@@ -60,7 +60,9 @@ onMounted(() => {
 		}, { 
 			icon: ViewIcon, 
 			name: 'notifications',
-			description: 'Manage notification settings'
+			description: 'Manage notification settings',
+			iconColor: '#e67e22',
+			indicator: true
 		});
 		
 		localNavigation.value.addCallback('Billing', () => {
@@ -68,7 +70,8 @@ onMounted(() => {
 		}, { 
 			icon: EditIcon, 
 			name: 'billing',
-			description: 'View billing and subscription details'
+			description: 'View billing and subscription details',
+			disabled: true
 		});
 	}
 });