picocrank 1.20.0 → 1.21.0

package/package.json

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

package/styles/dark-theme.css

@@ -4,6 +4,7 @@ html[data-theme="dark"] {
 
   --border-color: #595959;
   --hover-background-color: #1d345c;
+  --hover-text-color: #fff;
   --header-hover-background-color: #1d345c;
   --standout-bg-color: #1f1f1f;
   --disabled-background-color: #333;

package/vue/components/Navigation.vue

@@ -20,6 +20,11 @@ const router = useRouter()
  * @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)
+ * @param {boolean} options.disabled - Disable the link
+ * @param {boolean} options.indicator - Show a notification indicator dot
+ * @param {number} options.count - Show a notification count badge (takes precedence over indicator)
+ * @param {string} options.iconColor - Optional icon color
+ * @param {string} options.description - Optional description (used by NavigationGrid)
  */
 function addRouterLink(link, altTitle = null, options = {}) {
 	const foundRoute = router.getRoutes().find(r => r.name === link)
@@ -50,7 +55,8 @@ function addRouterLink(link, altTitle = null, options = {}) {
 		description: options.description || foundRoute.meta?.description || null,
 		disabled: options.disabled || false,
 		iconColor: options.iconColor || null,
-		indicator: options.indicator || false
+		indicator: options.indicator || false,
+		count: normalizeCount(options.count),
 	}
 
 	addNavigationLink(routeLink)
@@ -75,12 +81,24 @@ function addCallback(title, callback, options = {}) {
 	description: options.description || null,
 	disabled: options.disabled || false,
 	iconColor: options.iconColor || null,
-	indicator: options.indicator || false
+	indicator: options.indicator || false,
+	count: normalizeCount(options.count),
   }
 
   addNavigationLink(callbackLink)
 }
 
+function normalizeCount(count) {
+  if (count === null || count === undefined || count === false) {
+    return null
+  }
+  const value = Number(count)
+  if (!Number.isFinite(value) || value <= 0) {
+    return null
+  }
+  return Math.floor(value)
+}
+
 function addSeparator(id) {
   const separator = {
     name: id || `nav-separator-${Date.now()}`,
@@ -110,7 +128,7 @@ function addHtml(html, options = {}) {
 }
 
 function removeNavigationLink(linkId) {
-  navigationLinks.value = navigationLinks.value.filter(link => link.id !== linkId)
+  navigationLinks.value = navigationLinks.value.filter(link => link.name !== linkId)
 }
 
 function clearNavigationLinks() {

package/vue/components/NavigationGrid.vue

@@ -10,7 +10,12 @@
 				@click="handleLinkClick(link)"
 			>
 				<span
-					v-if="showIndicator(link)"
+					v-if="showCount(link)"
+					class="nav-button-count"
+					:aria-label="`${link.count} notifications`"
+				>{{ formatCount(link.count) }}</span>
+				<span
+					v-else-if="showIndicator(link)"
 					class="nav-button-indicator"
 					aria-label="Requires attention"
 				/>
@@ -124,8 +129,16 @@ function getIconStyle(link) {
 	return undefined;
 }
 
+function showCount(link) {
+	return !link.disabled && link.count != null && link.count > 0;
+}
+
 function showIndicator(link) {
-	return link.indicator && !link.disabled;
+	return link.indicator && !link.disabled && !showCount(link);
+}
+
+function formatCount(count) {
+	return count > 99 ? '99+' : String(count);
 }
 
 function handleLinkClick(link) {
@@ -246,12 +259,35 @@ function handleLinkClick(link) {
 	flex-shrink: 0;
 }
 
+.nav-button-count {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	min-width: 1.25rem;
+	padding: 0.1rem 0.4rem;
+	border-radius: 999px;
+	background: var(--indicator-color, #dc3545);
+	color: #fff;
+	font-size: 0.75em;
+	font-weight: 600;
+	line-height: 1.2;
+	text-align: center;
+	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 {
+.navigation-grid.compact .nav-button-count {
+	top: 0.35rem;
+	right: 0.35rem;
+}
+
+.nav-button.active .nav-button-indicator,
+.nav-button.active .nav-button-count {
 	box-shadow: 0 0 0 2px var(--primary-color, #007bff);
 }
 

package/vue/components/Sidebar.vue

@@ -37,24 +37,49 @@
 						<li
 							v-else
 							:title="item.link.title"
+							:class="{ disabled: item.link.disabled }"
 						>
 							<div v-if="item.link.type === 'separator'" class="separator"></div>
-							<div v-else-if="item.link.type === 'callback'">
-								<a href="#" @click.prevent="handleLinkClick(() => item.link.callback())">
-									<HugeiconsIcon :icon="item.link.icon" />
-									<span>{{ item.link.title }}</span>
-								</a>
-							</div>
 							<div v-else-if="item.link.type === 'html'" v-html="item.link.html"></div>
+							<a
+								v-else-if="item.link.type === 'callback' || item.link.disabled"
+								href="#"
+								:class="{ active: isLinkActive(item.link), disabled: item.link.disabled }"
+								:aria-disabled="item.link.disabled || undefined"
+								@click.prevent="handleNavItemClick(item.link)"
+							>
+								<HugeiconsIcon :icon="item.link.icon" />
+								<span class="nav-link-title">{{ item.link.title }}</span>
+								<span
+									v-if="showCount(item.link)"
+									class="nav-link-count"
+									:aria-label="`${item.link.count} notifications`"
+								>{{ formatCount(item.link.count) }}</span>
+								<span
+									v-else-if="showIndicator(item.link)"
+									class="nav-link-indicator"
+									aria-label="Requires attention"
+								/>
+							</a>
 							<router-link
 								v-else
 								v-bind="item.link.props || {}"
 								:to="item.link.to || item.link.path"
-								:class="{ active: isActive(item.link) }"
+								:class="{ active: isLinkActive(item.link) }"
 								@click="handleLinkClick()"
 							>
 								<HugeiconsIcon :icon="item.link.icon" />
-								<span>{{ item.link.title }}</span>
+								<span class="nav-link-title">{{ item.link.title }}</span>
+								<span
+									v-if="showCount(item.link)"
+									class="nav-link-count"
+									:aria-label="`${item.link.count} notifications`"
+								>{{ formatCount(item.link.count) }}</span>
+								<span
+									v-else-if="showIndicator(item.link)"
+									class="nav-link-indicator"
+									aria-label="Requires attention"
+								/>
 							</router-link>
 						</li>
 					</template>
@@ -212,6 +237,36 @@ function close() {
   isStuck.value = false
 }
 
+function isLinkActive(link) {
+  if (link.disabled) {
+    return false
+  }
+  return isActive(link)
+}
+
+function showCount(link) {
+  return !link.disabled && link.count != null && link.count > 0
+}
+
+function showIndicator(link) {
+  return link.indicator && !link.disabled && !showCount(link)
+}
+
+function formatCount(count) {
+  return count > 99 ? '99+' : String(count)
+}
+
+function handleNavItemClick(link) {
+  if (link.disabled) {
+    return
+  }
+  if (link.type === 'callback' && link.callback) {
+    handleLinkClick(() => link.callback())
+    return
+  }
+  handleLinkClick()
+}
+
 function handleLinkClick(callback = null) {
   if (callback) {
     callback()
@@ -294,6 +349,39 @@ button {
 	gap: 0.75rem;
 	padding: .75em;
 	border-radius: 0;
+	position: relative;
+}
+
+.nav-link-title {
+	flex: 1;
+	min-width: 0;
+}
+
+.nav-link-indicator {
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	background: var(--indicator-color, #dc3545);
+	flex-shrink: 0;
+}
+
+.nav-link-count {
+	min-width: 1.25rem;
+	padding: 0.1rem 0.4rem;
+	border-radius: 999px;
+	background: var(--indicator-color, #dc3545);
+	color: #fff;
+	font-size: 0.75em;
+	font-weight: 600;
+	line-height: 1.2;
+	text-align: center;
+	flex-shrink: 0;
+}
+
+.navigation-links a.disabled,
+.navigation-links li.disabled a {
+	cursor: not-allowed;
+	opacity: 0.55;
 }
 
 .nav-section-header {
@@ -308,12 +396,13 @@ button {
 	font-size: 1em;
 	color: inherit;
 	background: transparent;
+	border-radius: 0;
 	cursor: pointer;
 }
 
 .nav-section-header:hover {
 	background-color: var(--hover-background-color);
-	color: white;
+	color: var(--hover-text-color);
 }
 
 .nav-section-chevron {

package/vue/views/NavigationGridExample.vue

@@ -77,6 +77,16 @@ onMounted(() => {
 		indicator: true,
 	})
 
+	localNavigation.value.addCallback('Inbox', () => {
+		alert('Inbox action')
+	}, {
+		icon: ViewIcon,
+		name: 'inbox',
+		description: 'Shows a notification count on the tile',
+		iconColor: '#e67e22',
+		count: 12,
+	})
+
 	localNavigation.value.addCallback('Billing', () => {
 		alert('This item is disabled')
 	}, {

package/vue/views/PageStructure.vue

@@ -77,13 +77,42 @@
 					When enabled, use the menu button in the header to open and pin the sidebar.
 				</p>
 			</dd>
+
+			<dt>Example link states</dt>
+			<dd>
+				<label class="page-structure-control">
+					<input
+						type="checkbox"
+						:checked="exampleLinksEnabled"
+						@change="toggleExampleLinks"
+					/>
+					<span>Add example links that demonstrate indicator, count, and disabled states</span>
+				</label>
+				<p class="subtle">
+					Adds a “Link states” section to the sidebar with an attention indicator,
+					a notification count badge, and a disabled item.
+				</p>
+			</dd>
 		</dl>
 	</Section>
 </template>
 
 <script setup>
-import { inject } from 'vue'
+import { inject, ref, onBeforeUnmount } from 'vue'
 import Section from '../components/Section.vue'
+import {
+	Notification01Icon,
+	Alert02Icon,
+	UnavailableIcon,
+} from '@hugeicons/core-free-icons'
+
+const EXAMPLE_SECTION_ID = 'nav-link-states'
+const EXAMPLE_LINK_NAMES = [
+	EXAMPLE_SECTION_ID,
+	'example-indicator',
+	'example-count',
+	'example-disabled',
+]
 
 const sidebarEnabled = inject('sidebarEnabled')
 const toggleSidebarEnabled = inject('toggleSidebarEnabled')
@@ -95,6 +124,70 @@ const topBarEnabled = inject('topBarEnabled')
 const toggleTopBarEnabled = inject('toggleTopBarEnabled')
 const breadcrumbsEnabled = inject('breadcrumbsEnabled')
 const toggleBreadcrumbsEnabled = inject('toggleBreadcrumbsEnabled')
+const navigation = inject('navigation', null)
+
+const exampleLinksEnabled = ref(false)
+
+function removeExampleLinks() {
+	if (!navigation) {
+		return
+	}
+	for (const name of EXAMPLE_LINK_NAMES) {
+		navigation.removeNavigationLink(name)
+	}
+}
+
+function addExampleLinks() {
+	if (!navigation) {
+		return
+	}
+
+	removeExampleLinks()
+
+	navigation.addSection('Link states', { name: EXAMPLE_SECTION_ID })
+
+	navigation.addCallback('Needs attention', () => {
+		alert('Example link with a notification indicator')
+	}, {
+		name: 'example-indicator',
+		icon: Alert02Icon,
+		indicator: true,
+	})
+
+	navigation.addCallback('Inbox', () => {
+		alert('Example link with a notification count')
+	}, {
+		name: 'example-count',
+		icon: Notification01Icon,
+		count: 3,
+	})
+
+	navigation.addCallback('Unavailable', () => {
+		alert('This should not run while disabled')
+	}, {
+		name: 'example-disabled',
+		icon: UnavailableIcon,
+		disabled: true,
+	})
+}
+
+function toggleExampleLinks() {
+	exampleLinksEnabled.value = !exampleLinksEnabled.value
+	if (exampleLinksEnabled.value) {
+		if (!sidebarEnabled.value) {
+			toggleSidebarEnabled()
+		}
+		addExampleLinks()
+	} else {
+		removeExampleLinks()
+	}
+}
+
+onBeforeUnmount(() => {
+	if (exampleLinksEnabled.value) {
+		removeExampleLinks()
+	}
+})
 </script>
 
 <style scoped>