picocrank 1.18.2 → 1.19.0

package/index.html

@@ -6,6 +6,16 @@
 
 		<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" />
 
+		<script>
+			(function () {
+				var key = 'picocrank-theme';
+				var stored = localStorage.getItem(key);
+				var theme = stored === 'light' || stored === 'dark'
+					? stored
+					: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+				document.documentElement.setAttribute('data-theme', theme);
+			})();
+		</script>
 	</head>
 
 	<body>

package/package.json

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

package/router.js

@@ -7,7 +7,11 @@ import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
 import { CalendarIcon } from '@hugeicons/core-free-icons';
 import { EditIcon } from '@hugeicons/core-free-icons';
 import { Menu01Icon } from '@hugeicons/core-free-icons';
+import { Navigation01Icon } from '@hugeicons/core-free-icons';
 import { ClipboardCopyIcon } from '@hugeicons/core-free-icons';
+import { CursorPointer01Icon } from '@hugeicons/core-free-icons';
+import { LayoutGridIcon } from '@hugeicons/core-free-icons';
+import { StatusIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -19,13 +23,22 @@ const routes = [
       icon: HomeIcon,
     }
   },
+  {
+    name: 'PageStructure',
+    path: '/page-structure',
+    component: () => import('./vue/views/PageStructure.vue'),
+    meta: {
+      title: 'Page structure',
+      icon: LayoutGridIcon,
+    }
+  },
   {
     name: 'TableExample',
     path: '/table-example',
     title: 'Table Example',
     component: () => import('./vue/views/TableExample.vue'),
     meta: {
-      title: 'Table Example',
+      title: 'Table',
       icon: TableIcon,
     }
   },
@@ -35,7 +48,7 @@ const routes = [
     component: () => import('./vue/views/ViewItem.vue'),
     props: true,
     meta: {
-      title: 'View Item',
+      title: 'View item',
       icon: ViewIcon,
     }
   },
@@ -54,7 +67,7 @@ const routes = [
     component: () => import('./vue/views/CalendarExample.vue'),
     props: true,
     meta: {
-      title: 'Calendar Example',
+      title: 'Calendar',
       icon: CalendarIcon,
     }
   },
@@ -67,12 +80,21 @@ const routes = [
       icon: SecurityValidationIcon,
     }
   },
+  {
+    name: 'ButtonsExample',
+    path: '/buttons-example',
+    component: () => import('./vue/views/ButtonsExample.vue'),
+    meta: {
+      title: 'Buttons',
+      icon: CursorPointer01Icon,
+    }
+  },
   {
     name: 'FormExample',
     path: '/form-example',
     component: () => import('./vue/views/FormExample.vue'),
     meta: {
-      title: 'Form Example',
+      title: 'Forms',
       icon: EditIcon,
     }
   },
@@ -81,26 +103,35 @@ const routes = [
     path: '/readonly-textarea-example',
     component: () => import('./vue/views/ReadOnlyTextAreaExample.vue'),
     meta: {
-      title: 'ReadOnlyTextArea Example',
+      title: 'Read-only output',
       icon: ClipboardCopyIcon,
     }
   },
+  {
+    name: 'StatusExample',
+    path: '/status-example',
+    component: () => import('./vue/views/StatusExample.vue'),
+    meta: {
+      title: 'Status & notifications',
+      icon: StatusIcon,
+    }
+  },
   {
     name: 'TabsExample',
     path: '/tabs-example',
     component: () => import('./vue/views/TabsExample.vue'),
     meta: {
-      title: 'Tabs Example',
+      title: 'Tabs',
       icon: Menu01Icon,
     }
   },
   {
-    name: 'UserControlPanel',
-    path: '/user-control-panel',
-    component: () => import('./vue/views/UserControlPanel.vue'),
+    name: 'NavigationGridExample',
+    path: '/navigation-grid',
+    component: () => import('./vue/views/NavigationGridExample.vue'),
     meta: {
-      title: 'User Control Panel',
-      icon: SecurityValidationIcon,
+      title: 'Navigation Grid',
+      icon: Navigation01Icon,
     }
   },
   {
@@ -108,7 +139,7 @@ const routes = [
     path: '/login-example',
     component: () => import('./vue/views/LoginExample.vue'),
     meta: {
-      title: 'Login Example',
+      title: 'Login',
       icon: SecurityValidationIcon,
     }
   }

package/styles/dark-theme.css

@@ -0,0 +1,189 @@
+@layer components {
+html[data-theme="dark"] {
+  color-scheme: dark;
+
+  --border-color: #595959;
+  --hover-background-color: #1d345c;
+  --header-hover-background-color: #1d345c;
+  --standout-bg-color: #1f1f1f;
+  --disabled-background-color: #333;
+  --disabled-text-color: #999;
+
+  & header {
+    background-color: black;
+    box-shadow: 0px 0px 1em #1c1c1c;
+    border-bottom: 1px solid #222;
+  }
+
+  & body {
+    background-color: #262626;
+    color: #ddd;
+  }
+
+  & section {
+    background-color: #343434;
+    color: #ddd;
+    box-shadow: 0 0 .5em #121212;
+  }
+
+  & section .section-header {
+    background-color: #343434;
+    border-bottom-color: var(--border-color);
+  }
+
+  & section .section-subheader {
+    border-bottom-color: var(--border-color);
+  }
+
+  & button,
+  & .button {
+    color: #ddd;
+    border: 1px solid var(--border-color);
+  }
+
+  & button:hover,
+  & .button:hover,
+  & .button:visited {
+    background-color: var(--hover-background-color);
+    color: white;
+  }
+
+  & footer a,
+  & footer a:visited {
+    color: lightblue;
+  }
+
+  & header ul[role="menubar"] a,
+  & header ul[role="menubar"] a:visited {
+    background-color: black;
+  }
+
+  & header ul[role="menubar"] a:hover {
+    background-color: var(--hover-background-color);
+  }
+
+  & header div > ul > li > a {
+    background-color: black;
+    color: white;
+  }
+
+  & ul[role="menubar"] div ul a:hover {
+    background-color: var(--hover-background-color);
+    color: white;
+  }
+
+  & ul[role="menubar"] li:hover {
+    background-color: var(--hover-background-color);
+  }
+
+  & label:has(input[type="checkbox"]):hover,
+  & label:has(input[type="radio"]):hover {
+    background-color: var(--hover-background-color);
+    color: white;
+  }
+
+  & label:has(input:checked) {
+    background-color: #488448;
+    color: white;
+  }
+
+  & label:has(input:checked):hover {
+    background-color: #3a6f3a;
+    color: white;
+  }
+
+  & a,
+  & a:visited,
+  & aside a,
+  & aside a:visited {
+    color: lightblue;
+  }
+
+  & table,
+  & th,
+  & td {
+    border-color: var(--border-color) !important;
+  }
+
+  & table.row-hover tr:hover td {
+    background-color: var(--hover-background-color);
+    color: white;
+  }
+
+  & footer span {
+    background-color: #444;
+  }
+
+  & input[type="text"],
+  & input[type="email"],
+  & input[type="password"],
+  & input[type="url"],
+  & input[type="number"],
+  & input[type="color"],
+  & input[type="datetime-local"] {
+    background-color: #4e4e4e;
+    color: #ddd;
+    border-color: var(--border-color);
+  }
+
+  & select {
+    background-color: #4e4e4e;
+    color: #ddd;
+    border-color: var(--border-color);
+  }
+
+  & textarea {
+    background-color: #4e4e4e;
+    color: #ddd;
+    border-color: var(--border-color);
+  }
+
+  & .grid-boxed .stat-display {
+    background-color: var(--standout-bg-color);
+    border-color: var(--border-color) !important;
+  }
+
+  & pre {
+    background-color: var(--standout-bg-color);
+    color: #ddd;
+    border: 1px solid var(--border-color);
+  }
+
+  & .radio-group {
+    border-color: var(--border-color);
+  }
+
+  & .radio-group label {
+    background-color: #555;
+  }
+
+  & aside {
+    background-color: #000;
+    box-shadow: 0 0 .5em #121212;
+  }
+
+  & aside ul li a:hover {
+    background-color: var(--hover-background-color);
+  }
+
+  & dt {
+    border-color: var(--border-color);
+  }
+
+  & .annotation,
+  & .tag,
+  & .inline-notification {
+    background-color: var(--standout-bg-color);
+    color: #ddd;
+    border-color: var(--border-color);
+  }
+
+  & .annotation-val {
+    color: #ddd;
+  }
+}
+}
+
+html[data-theme="light"] {
+  color-scheme: light;
+}

package/styles.css

@@ -1,3 +1,3 @@
 /* Import femtocrank styles */
 @import 'femtocrank/style.css';
-@import 'femtocrank/dark.css';
+@import './styles/dark-theme.css';

package/vue/components/Calendar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, onUnmounted } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
 
 export interface CalendarEvent {
   id: string | number
@@ -7,6 +8,10 @@ export interface CalendarEvent {
   startDate?: Date | string | null
   endDate?: Date | string | null
   date?: Date | string | null
+  /** Optional Hugeicons icon (from @hugeicons/core-free-icons). */
+  icon?: unknown
+  /** Optional CSS color overriding the default event background. */
+  color?: string
   [key: string]: any
 }
 
@@ -228,6 +233,11 @@ function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
   return 'All day'
 }
 
+function getEventStyle(event: CalendarEvent): Record<string, string> | undefined {
+  if (!event.color) return undefined
+  return { '--event-color': event.color }
+}
+
 // Get ordinal suffix for a number (1st, 2nd, 3rd, 4th, etc.)
 function getOrdinalSuffix(day: number): string {
   const j = day % 10
@@ -655,8 +665,10 @@ watch([currentMonth, currentYear], () => {
                   'multi-day-start': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'start',
                   'multi-day-middle': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'middle',
                   'multi-day-end': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'end',
-                  'drag-source': draggingEventId === event.id
+                  'drag-source': draggingEventId === event.id,
+                  'has-custom-color': Boolean(event.color)
                 }"
+                :style="getEventStyle(event)"
                 :draggable="eventDragEnabled"
                 @dragstart.stop="onEventDragStart(event, day.date, $event)"
                 @dragend.stop="onEventDragEnd"
@@ -666,6 +678,13 @@ watch([currentMonth, currentYear], () => {
                 <slot name="event" :event="event" :date="day.date" :position="getMultiDayPosition(event, day.date)">
                   <div class="event-content">
                     <div class="event-title">
+                      <HugeiconsIcon
+                        v-if="event.icon"
+                        :icon="event.icon"
+                        class="event-icon"
+                        width="0.9em"
+                        height="0.9em"
+                      />
                       {{ event.title }}
                       <span v-if="isMultiDayEvent(event)" class="multi-day-indicator">
                         {{ getMultiDayPosition(event, day.date) === 'start' ? '▶' :
@@ -932,6 +951,21 @@ watch([currentMonth, currentYear], () => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 
+.calendar-event.has-custom-color {
+  background: var(--event-color);
+  border-color: color-mix(in srgb, var(--event-color) 75%, black);
+}
+
+.calendar-event.has-custom-color:hover {
+  background: var(--event-color);
+  border-color: color-mix(in srgb, var(--event-color) 75%, black);
+  filter: brightness(0.92);
+}
+
+.event-icon {
+  flex-shrink: 0;
+}
+
 .calendar-event.multi-day-start {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
@@ -1034,7 +1068,7 @@ watch([currentMonth, currentYear], () => {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
   .calendar-container {
     background: #565656;
     border-color: #374151;

package/vue/components/Header.vue

@@ -2,7 +2,7 @@
 	<header>
 		<div
 			:id = "sidebarEnabled ? 'sidebar-button' : null"
-			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding }]"
+			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !sidebarEnabled && showBranding }]"
 			@click = "onImageAndTitleClick"
 		>
 			<img v-if="showBranding" :src = "logoUrl" alt = "Logo" class = "logo" />
@@ -23,6 +23,16 @@
 		
 		<div class = "fg1"></div>
 
+		<button
+			type="button"
+			class="theme-toggle neutral"
+			:aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+			:title="isDark ? 'Light mode' : 'Dark mode'"
+			@click="toggleTheme"
+		>
+			<HugeiconsIcon :icon="isDark ? Sun01Icon : Moon02Icon" width="1em" height="1em" />
+		</button>
+
 		<slot name = "user-info">
 			<div class = "user-info">
 				<span v-if="username">{{ username }}</span>
@@ -33,10 +43,13 @@
 
 <script setup>
 	import { HugeiconsIcon } from "@hugeicons/vue";
-	import { Menu01Icon } from "@hugeicons/core-free-icons";
+	import { Menu01Icon, Moon02Icon, Sun01Icon } from "@hugeicons/core-free-icons";
 
 	import Breadcrumbs from "./Breadcrumbs.vue";
 	import TopBar from "./TopBar.vue";
+	import { useTheme } from '../composables/useTheme.js';
+
+	const { isDark, toggleTheme } = useTheme();
 
 	const emit = defineEmits(["toggleSidebar", "logoClick"]);
 
@@ -98,7 +111,20 @@ button:hover {
 	width: auto;
 }
 
+.logo-home-link {
+	cursor: pointer;
+}
+
+.logo-home-link:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+
 .user-info span {
 	padding-right: 0.5rem;
 }
+
+.theme-toggle {
+	margin-right: 0.25rem;
+}
 </style>

package/vue/components/Navigation.vue

@@ -90,6 +90,15 @@ function addSeparator(id) {
   addNavigationLink(separator)
 }
 
+function addSection(title, options = {}) {
+  const section = {
+    name: options.name || `nav-section-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`,
+    type: 'section',
+    title,
+  }
+  addNavigationLink(section)
+}
+
 function addHtml(html, options = {}) {
   const htmlLink = {
     name: options.name || `html-item-${Date.now()}`,
@@ -153,6 +162,7 @@ provide('navigation', {
   addNavigationLink,
   addCallback,
   addSeparator,
+  addSection,
   addHtml,
   removeNavigationLink,
   clearNavigationLinks,
@@ -167,6 +177,7 @@ defineExpose({
   addNavigationLink,
   addCallback,
   addSeparator,
+  addSection,
   addHtml,
   removeNavigationLink,
   clearNavigationLinks,

package/vue/components/NavigationGrid.vue

@@ -90,7 +90,7 @@ const filteredLinks = computed(() => {
 	// Exclude separators and HTML items by default
 	if (props.excludeNonButtons) {
 		links = links.filter(link => 
-			link.type !== 'separator' && link.type !== 'html'
+			link.type !== 'separator' && link.type !== 'html' && link.type !== 'section'
 		);
 	}
 
@@ -286,7 +286,7 @@ function handleLinkClick(link) {
 }
 
 /* Dark theme support */
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
 	.nav-button {
 		background: transparent;
 	}

package/vue/components/NotificationPopup.vue

@@ -0,0 +1,118 @@
+<template>
+	<div
+		class="notification-popup notification show"
+		:class="popup.class"
+		role="status"
+	>
+		<button
+			type="button"
+			class="notification-popup-dismiss"
+			aria-label="Dismiss notification"
+			@click.stop="emit('dismiss', popup.id)"
+		>
+			<HugeiconsIcon :icon="Cancel01Icon" width="1em" height="1em" />
+		</button>
+
+		<div class="notification-popup-body">
+			<p class="notification-popup-message">
+				<strong v-if="popup.label">{{ popup.label }}:</strong>
+				{{ popup.message }}
+			</p>
+
+			<RouterLink
+				v-if="popup.linkTo && !isExternalLink"
+				:to="popup.linkTo"
+				class="notification-popup-link"
+				@click="emit('dismiss', popup.id)"
+			>
+				{{ popup.linkLabel || 'View' }}
+			</RouterLink>
+
+			<a
+				v-else-if="popup.linkTo && isExternalLink"
+				:href="popup.linkTo"
+				class="notification-popup-link"
+				target="_blank"
+				rel="noopener noreferrer"
+				@click="emit('dismiss', popup.id)"
+			>
+				{{ popup.linkLabel || 'View' }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Cancel01Icon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+	popup: {
+		type: Object,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['dismiss'])
+
+const isExternalLink = computed(() =>
+	typeof props.popup.linkTo === 'string' && /^https?:\/\//.test(props.popup.linkTo)
+)
+</script>
+
+<style scoped>
+.notification-popup {
+	position: relative;
+	width: min(22rem, calc(100vw - 2rem));
+	margin: 0;
+	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
+	cursor: default;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.notification-popup-message {
+	margin: 0;
+}
+
+.notification-popup-body {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.notification-popup-link {
+	color: inherit;
+	font-weight: bold;
+	text-decoration: underline;
+	align-self: flex-start;
+}
+
+.notification-popup-link:hover {
+	opacity: 0.85;
+}
+
+.notification-popup-dismiss {
+	position: absolute;
+	top: 0.35rem;
+	right: 0.35rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.75rem;
+	height: 1.75rem;
+	padding: 0;
+	border: 0;
+	border-radius: 0.35rem;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+	opacity: 0.75;
+}
+
+.notification-popup-dismiss:hover {
+	opacity: 1;
+	background: rgba(0, 0, 0, 0.08);
+}
+</style>