picocrank 1.18.2 → 1.18.3

package/vue/views/ButtonsExample.vue

@@ -0,0 +1,93 @@
+<template>
+	<Section
+		title="Buttons"
+		subtitle="Femtocrank button styles and semantic types"
+	>
+		<p>
+			Buttons use the global Femtocrank theme. Apply karma classes for intent, or
+			rely on <code>type</code> attributes for form semantics.
+		</p>
+	</Section>
+
+	<Section title="Variants" subtitle="Default and karma-styled buttons">
+		<div role="toolbar" class="buttons-row">
+			<button type="button">Default</button>
+			<button type="button" class="neutral">Neutral</button>
+			<button type="button" class="good">Good</button>
+			<button type="button" class="bad">Bad</button>
+			<button type="button" class="warning">Warning</button>
+		</div>
+	</Section>
+
+	<Section title="Form actions" subtitle="Semantic button types in a fieldset">
+		<form class="buttons-demo-form" @submit.prevent="onSubmit">
+			<fieldset>
+				<button type="submit">Submit</button>
+				<button type="cancel">Cancel</button>
+				<button type="reset" @click="onReset">Reset</button>
+			</fieldset>
+			<p v-if="lastAction" class="subtle">{{ lastAction }}</p>
+		</form>
+	</Section>
+
+	<Section title="Links as buttons" subtitle="Anchor elements with the .button class">
+		<div role="toolbar" class="buttons-row">
+			<a href="#" class="button" @click.prevent>Default link</a>
+			<a href="#" class="button neutral" @click.prevent>Neutral link</a>
+			<a href="#" class="button good" @click.prevent>Good link</a>
+		</div>
+	</Section>
+
+	<Section title="Disabled" subtitle="Inactive buttons">
+		<div role="toolbar" class="buttons-row">
+			<button type="button" disabled>Disabled default</button>
+			<button type="submit" disabled>Disabled submit</button>
+			<button type="button" class="good" disabled>Disabled good</button>
+		</div>
+	</Section>
+
+	<Section title="Toolbars" subtitle="Grouped actions in section headers and content">
+		<template #toolbar>
+			<button type="button">Preview</button>
+			<button type="button" class="good">Save</button>
+		</template>
+
+		<p>
+			Section toolbars are a common place for primary and secondary actions. The
+			toolbar above mirrors the pattern used across other PicoCrank examples.
+		</p>
+
+		<div role="toolbar" class="buttons-row">
+			<button type="button" class="neutral">Neutral</button>
+			<button type="button" class="good">Good</button>
+			<button type="button" class="bad">Bad</button>
+		</div>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Section from '../components/Section.vue'
+
+const lastAction = ref('')
+
+function onSubmit() {
+	lastAction.value = 'Form submitted.'
+}
+
+function onReset() {
+	lastAction.value = 'Form reset.'
+}
+</script>
+
+<style scoped>
+.buttons-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.buttons-demo-form fieldset {
+	margin-bottom: 0;
+}
+</style>

package/vue/views/CalendarExample.vue

@@ -40,6 +40,13 @@
 import { ref, onMounted } from 'vue'
 import Calendar from '../components/Calendar.vue'
 import Section from '../components/Section.vue'
+import {
+	BeachIcon,
+	Calendar01Icon,
+	MeetingRoomIcon,
+	PartyIcon,
+	AlertCircleIcon,
+} from '@hugeicons/core-free-icons'
 
 const events = ref([])
 const loading = ref(false)
@@ -84,7 +91,9 @@ function generateDummyEventsForMonth(monthIndex, year) {
 				id: `weekend-${year}-${monthIndex}-${day}`,
 				title: 'Weekend Activity',
 				date: new Date(year, monthIndex, day, 10, 0),
-				description: 'Relaxing weekend activity'
+				description: 'Relaxing weekend activity',
+				icon: PartyIcon,
+				color: '#e8d5f5',
 			})
 		}
 		
@@ -105,7 +114,9 @@ function generateDummyEventsForMonth(monthIndex, year) {
 				id: `event-${year}-${monthIndex}-${day}-${Math.random().toString(36).substr(2, 9)}`,
 				title: eventType.title,
 				date: new Date(year, monthIndex, day, hours, minutes),
-				description: `Scheduled ${eventType.title.toLowerCase()}`
+				description: `Scheduled ${eventType.title.toLowerCase()}`,
+				icon: eventType.title === 'Team Meeting' ? MeetingRoomIcon : undefined,
+				color: eventType.title === 'Client Call' ? '#e0f2fe' : undefined,
 			})
 		}
 	}
@@ -116,7 +127,9 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		title: 'Tech Conference',
 		startDate: new Date(year, monthIndex, 5, 9, 0),
 		endDate: new Date(year, monthIndex, 7, 17, 0),
-		description: 'Annual technology conference'
+		description: 'Annual technology conference',
+		icon: Calendar01Icon,
+		color: '#d6e8ff',
 	})
 	
 	dummyEvents.push({
@@ -124,7 +137,9 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		title: 'Vacation',
 		startDate: new Date(year, monthIndex, 15, 0, 0),
 		endDate: new Date(year, monthIndex, 18, 23, 59),
-		description: 'Family vacation time'
+		description: 'Family vacation time',
+		icon: BeachIcon,
+		color: '#fff0d6',
 	})
 	
 	// Add some all-day events
@@ -132,7 +147,9 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		id: `holiday-${year}-${monthIndex}`,
 		title: 'Public Holiday',
 		date: new Date(year, monthIndex, 1, 0, 0),
-		description: 'National holiday - office closed'
+		description: 'National holiday - office closed',
+		icon: PartyIcon,
+		color: '#ffe0e0',
 	})
 	
 	if (daysInMonth >= 25) {
@@ -140,7 +157,9 @@ function generateDummyEventsForMonth(monthIndex, year) {
 			id: `deadline-${year}-${monthIndex}`,
 			title: 'Project Deadline',
 			date: new Date(year, monthIndex, 25, 0, 0),
-			description: 'Important project deadline'
+			description: 'Important project deadline',
+			icon: AlertCircleIcon,
+			color: '#fde8e8',
 		})
 	}
 	
@@ -415,7 +434,7 @@ onMounted(() => {
 }
 
 /* Dark theme support */
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
   .date-picker-label {
     color: #d1d5db;
   }

package/vue/views/NavigationGridExample.vue

@@ -0,0 +1,89 @@
+<template>
+	<Section title="Navigation Grid" subtitle="Icon grid navigation for routes and actions">
+		<p>
+			<code>NavigationGrid</code> renders links from a nested
+			<code>Navigation</code> provider as a grid of icon buttons. Use it for
+			settings hubs, dashboards, or anywhere you need compact visual navigation.
+		</p>
+
+		<Navigation ref="localNavigation">
+			<NavigationGrid />
+		</Navigation>
+	</Section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Section from '../components/Section.vue'
+import NavigationGrid from '../components/NavigationGrid.vue'
+import Navigation from '../components/Navigation.vue'
+import {
+	ViewIcon,
+	EditIcon,
+	SecurityValidationIcon,
+	HomeIcon,
+} from '@hugeicons/core-free-icons'
+
+const localNavigation = ref(null)
+
+onMounted(() => {
+	if (!localNavigation.value) {
+		return
+	}
+
+	localNavigation.value.addRouterLink('PageStructure', 'Page structure', {
+		description: 'Configure the example app shell',
+	})
+
+	localNavigation.value.addCallback('Profile', () => {
+		alert('Profile action')
+	}, {
+		icon: ViewIcon,
+		name: 'profile',
+		description: 'Example callback with icon and description',
+	})
+
+	localNavigation.value.addCallback('Editor', () => {
+		alert('Editor action')
+	}, {
+		icon: EditIcon,
+		name: 'editor',
+		description: 'Opens an example editor workflow',
+	})
+
+	localNavigation.value.addCallback('Security', () => {
+		alert('Security action')
+	}, {
+		icon: SecurityValidationIcon,
+		name: 'security',
+		description: 'Demonstrates a standard grid item',
+	})
+
+	localNavigation.value.addCallback('Preferences', () => {
+		alert('Preferences action')
+	}, {
+		icon: HomeIcon,
+		name: 'preferences',
+		description: 'Another callback entry in the grid',
+	})
+
+	localNavigation.value.addCallback('Alerts', () => {
+		alert('Alerts action')
+	}, {
+		icon: ViewIcon,
+		name: 'alerts',
+		description: 'Shows an indicator badge on the tile',
+		iconColor: '#e67e22',
+		indicator: true,
+	})
+
+	localNavigation.value.addCallback('Billing', () => {
+		alert('This item is disabled')
+	}, {
+		icon: EditIcon,
+		name: 'billing',
+		description: 'Demonstrates a disabled grid item',
+		disabled: true,
+	})
+})
+</script>

package/vue/views/PageStructure.vue

@@ -0,0 +1,111 @@
+<template>
+	<Section
+		title="Page structure"
+		subtitle="Configure the example application shell and layout"
+	>
+		<p>
+			Use these controls to turn PicoCrank layout features on or off while you
+			explore the other examples. Changes apply immediately across the app.
+		</p>
+	</Section>
+
+	<Section title="Header" subtitle="Branding, search, and top navigation">
+		<dl>
+			<dt>Logo and title</dt>
+			<dd>
+				<label class="page-structure-control">
+					<input
+						type="checkbox"
+						:checked="brandingEnabled"
+						@change="toggleBrandingEnabled"
+					/>
+					<span>Show logo and title in the header</span>
+				</label>
+			</dd>
+
+			<dt>QuickSearch</dt>
+			<dd>
+				<label class="page-structure-control">
+					<input
+						type="checkbox"
+						:checked="quickSearchEnabled"
+						@change="toggleQuickSearchEnabled"
+					/>
+					<span>Show QuickSearch in the header toolbar</span>
+				</label>
+			</dd>
+
+			<dt>Top bar</dt>
+			<dd>
+				<label class="page-structure-control">
+					<input
+						type="checkbox"
+						:checked="topBarEnabled"
+						@change="toggleTopBarEnabled"
+					/>
+					<span>Show horizontal navigation links below the header</span>
+				</label>
+			</dd>
+
+			<dt>Breadcrumbs</dt>
+			<dd>
+				<label class="page-structure-control">
+					<input
+						type="checkbox"
+						:checked="breadcrumbsEnabled"
+						@change="toggleBreadcrumbsEnabled"
+					/>
+					<span>Show route breadcrumbs in the header</span>
+				</label>
+			</dd>
+		</dl>
+	</Section>
+
+	<Section title="Sidebar" subtitle="Primary navigation panel">
+		<dl>
+			<dt>Sidebar navigation</dt>
+			<dd>
+				<label class="page-structure-control">
+					<input
+						type="checkbox"
+						:checked="sidebarEnabled"
+						@change="toggleSidebarEnabled"
+					/>
+					<span>Show the sidebar navigation panel</span>
+				</label>
+				<p class="subtle">
+					When enabled, use the menu button in the header to open and pin the sidebar.
+				</p>
+			</dd>
+		</dl>
+	</Section>
+</template>
+
+<script setup>
+import { inject } from 'vue'
+import Section from '../components/Section.vue'
+
+const sidebarEnabled = inject('sidebarEnabled')
+const toggleSidebarEnabled = inject('toggleSidebarEnabled')
+const brandingEnabled = inject('brandingEnabled')
+const toggleBrandingEnabled = inject('toggleBrandingEnabled')
+const quickSearchEnabled = inject('quickSearchEnabled')
+const toggleQuickSearchEnabled = inject('toggleQuickSearchEnabled')
+const topBarEnabled = inject('topBarEnabled')
+const toggleTopBarEnabled = inject('toggleTopBarEnabled')
+const breadcrumbsEnabled = inject('breadcrumbsEnabled')
+const toggleBreadcrumbsEnabled = inject('toggleBreadcrumbsEnabled')
+</script>
+
+<style scoped>
+.page-structure-control {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+}
+
+.page-structure-control + .subtle {
+	margin-top: 0.5rem;
+}
+</style>

package/vue/views/StatusExample.vue

@@ -0,0 +1,273 @@
+<template>
+	<Section
+		title="Notifications"
+		subtitle="Block-level status messages using Femtocrank .notification with karma background classes"
+	>
+		<template #toolbar>
+			<button type="button" @click="resetNotifications">Reset notifications</button>
+			<button type="button" class="good" @click="showSampleNotification">Show sample</button>
+		</template>
+
+		<p>Click a notification to dismiss it.</p>
+
+		<div
+			v-for="notification in visibleNotifications"
+			:key="notification.id"
+			class="notification show"
+			:class="notification.class"
+			role="status"
+			@click="dismissNotification(notification.id)"
+		>
+			<strong>{{ notification.label }}:</strong>
+			{{ notification.message }}
+		</div>
+
+		<p v-if="visibleNotifications.length === 0" class="subtle">
+			All notifications dismissed. Use the toolbar to restore them.
+		</p>
+	</Section>
+
+	<Section
+		title="Inline notifications"
+		subtitle="Status embedded in content flow using .inline-notification with karma foreground or background classes"
+	>
+		<p class="fg-info show inline-notification">
+			<strong>INFO:</strong>
+			This is an informational message.
+		</p>
+
+		<p class="fg-note show inline-notification">
+			<strong>NOTE:</strong>
+			This is a note.
+		</p>
+
+		<p class="fg-success show inline-notification">
+			<strong>SUCCESS:</strong>
+			This is a success message.
+		</p>
+
+		<p class="fg-important show inline-notification">
+			<strong>IMPORTANT:</strong>
+			This is an important message.
+		</p>
+
+		<p class="fg-warning show inline-notification">
+			<strong>WARNING:</strong>
+			This is a warning message.
+		</p>
+
+		<p class="fg-severe show inline-notification">
+			<strong>SEVERE:</strong>
+			This is a severe message.
+		</p>
+
+		<p class="critical show inline-notification">
+			<strong>CRITICAL:</strong>
+			This is a critical message using a background karma class.
+		</p>
+	</Section>
+
+	<Section
+		title="Notification popups"
+		subtitle="Transient corner toasts via useNotificationPopups()"
+	>
+		<template #toolbar>
+			<button type="button" class="good" @click="showSuccessPopup">Success</button>
+			<button type="button" class="warning" @click="showWarningPopup">Warning</button>
+			<button type="button" @click="showLinkedPopup">With link</button>
+			<button type="button" @click="showStackedPopups">Stack three</button>
+			<button type="button" class="bad" @click="dismissAllPopups">Dismiss all</button>
+		</template>
+
+		<p>
+			Popups stack in the bottom-right, fade away after 5 seconds, and can be dismissed
+			manually or link to another page.
+		</p>
+	</Section>
+
+	<Section
+		title="In context"
+		subtitle="Inline notifications beside or below form fields"
+	>
+		<form class="status-form" @submit.prevent="submitForm">
+			<label for="status-email">Email</label>
+			<input
+				id="status-email"
+				v-model="formEmail"
+				type="email"
+				placeholder="you@example.com"
+				required
+			/>
+
+			<p
+				v-if="formMessage"
+				class="show inline-notification"
+				:class="formMessageClass"
+				role="status"
+			>
+				<strong>{{ formMessageLabel }}:</strong>
+				{{ formMessage }}
+			</p>
+
+			<fieldset>
+				<button type="submit" class="good">Save</button>
+				<button type="button" @click="clearForm">Clear</button>
+			</fieldset>
+		</form>
+	</Section>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import Section from '../components/Section.vue'
+import { useNotificationPopups } from '../composables/useNotificationPopups.js'
+
+const { show: showPopup, dismissAll: dismissAllPopups } = useNotificationPopups()
+
+const blockNotifications = ref([
+	{
+		id: 'info',
+		class: 'info',
+		label: 'INFO',
+		message: 'This is an informational message.',
+	},
+	{
+		id: 'note',
+		class: 'note',
+		label: 'NOTE',
+		message: 'This is a note.',
+	},
+	{
+		id: 'success',
+		class: 'success',
+		label: 'SUCCESS',
+		message: 'The operation completed successfully.',
+	},
+	{
+		id: 'important',
+		class: 'important',
+		label: 'IMPORTANT',
+		message: 'Please review this before continuing.',
+	},
+	{
+		id: 'warning',
+		class: 'warning',
+		label: 'WARNING',
+		message: 'This action may have side effects.',
+	},
+	{
+		id: 'severe',
+		class: 'severe',
+		label: 'SEVERE',
+		message: 'A severe problem was detected.',
+	},
+	{
+		id: 'critical',
+		class: 'critical',
+		label: 'CRITICAL',
+		message: 'Immediate attention is required.',
+	},
+])
+
+const initialNotificationIds = blockNotifications.value.map((notification) => notification.id)
+
+const visibleNotificationIds = ref([...initialNotificationIds])
+const sampleCounter = ref(0)
+
+const visibleNotifications = computed(() =>
+	blockNotifications.value.filter((notification) => visibleNotificationIds.value.includes(notification.id))
+)
+
+const formEmail = ref('')
+const formMessage = ref('')
+const formMessageClass = ref('fg-note')
+const formMessageLabel = ref('NOTE')
+
+function dismissNotification(id) {
+	visibleNotificationIds.value = visibleNotificationIds.value.filter((visibleId) => visibleId !== id)
+}
+
+function resetNotifications() {
+	blockNotifications.value = blockNotifications.value.filter((notification) =>
+		initialNotificationIds.includes(notification.id)
+	)
+	visibleNotificationIds.value = [...initialNotificationIds]
+	sampleCounter.value = 0
+}
+
+function showSampleNotification() {
+	sampleCounter.value += 1
+	const sample = {
+		id: `sample-${sampleCounter.value}`,
+		class: 'info',
+		label: 'INFO',
+		message: `Sample notification #${sampleCounter.value}.`,
+	}
+	blockNotifications.value.push(sample)
+	visibleNotificationIds.value = [...visibleNotificationIds.value, sample.id]
+}
+
+function submitForm() {
+	if (!formEmail.value.trim()) {
+		formMessageClass.value = 'fg-warning'
+		formMessageLabel.value = 'WARNING'
+		formMessage.value = 'Please enter an email address.'
+		return
+	}
+
+	formMessageClass.value = 'fg-success'
+	formMessageLabel.value = 'SUCCESS'
+	formMessage.value = `Saved preferences for ${formEmail.value.trim()}.`
+}
+
+function clearForm() {
+	formEmail.value = ''
+	formMessage.value = ''
+	formMessageClass.value = 'fg-note'
+	formMessageLabel.value = 'NOTE'
+}
+
+function showSuccessPopup() {
+	showPopup({
+		label: 'SUCCESS',
+		class: 'success',
+		message: 'Your changes were saved.',
+	})
+}
+
+function showWarningPopup() {
+	showPopup({
+		label: 'WARNING',
+		class: 'warning',
+		message: 'Disk space is running low.',
+	})
+}
+
+function showLinkedPopup() {
+	showPopup({
+		label: 'INFO',
+		class: 'info',
+		message: 'A new table example is available.',
+		linkTo: { name: 'TableExample' },
+		linkLabel: 'Open table example',
+	})
+}
+
+function showStackedPopups() {
+	const items = [
+		{ label: 'NOTE', class: 'note', message: 'First popup in the stack.' },
+		{ label: 'INFO', class: 'info', message: 'Second popup in the stack.' },
+		{ label: 'SUCCESS', class: 'success', message: 'Third popup in the stack.' },
+	]
+
+	for (const [index, item] of items.entries()) {
+		window.setTimeout(() => showPopup(item), index * 250)
+	}
+}
+</script>
+
+<style scoped>
+.status-form {
+	max-width: 32rem;
+}
+</style>

package/vue/views/TabsExample.vue

@@ -322,7 +322,7 @@ function saveSettings() {
 	color: var(--text-muted, #666);
 }
 
-@media (prefers-color-scheme: dark) {
+html[data-theme="dark"] {
 	.detail-item,
 	.tab-info,
 	.profile-card {