picocrank 1.18.1 → 1.18.3

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 {

package/vue/views/ViewItem.vue

@@ -1,5 +1,191 @@
 <template>
-	<Section title="View Item" padding>
-		View Item
-	</Section>
+	<section class="with-header-and-content">
+		<div class="section-header flex-row">
+			<div class="fg1">
+				<h2 :title="item.subtitle">{{ item.title }}</h2>
+			</div>
+			<div role="toolbar">
+				<router-link :to="{ name: 'TableExample' }" class="button neutral">Back to table</router-link>
+				<button type="button" class="good">Edit</button>
+			</div>
+		</div>
+
+		<div class="section-content padding">
+			<p>{{ item.summary }}</p>
+
+			<dl>
+				<dt>ID</dt>
+				<dd>{{ id }}</dd>
+
+				<dt>Name</dt>
+				<dd>{{ item.name }}</dd>
+
+				<dt>Status</dt>
+				<dd>
+					<span class="tag" :class="item.statusClass">{{ item.status }}</span>
+				</dd>
+
+				<dt>Role</dt>
+				<dd>{{ item.role }}</dd>
+
+				<dt>Location</dt>
+				<dd>{{ item.location }}</dd>
+			</dl>
+		</div>
+
+		<div class="section-subheader">
+			<h3>Contact</h3>
+		</div>
+
+		<div class="section-content padding">
+			<dl>
+				<dt>Email</dt>
+				<dd><a :href="`mailto:${item.email}`">{{ item.email }}</a></dd>
+
+				<dt>Phone</dt>
+				<dd>{{ item.phone }}</dd>
+
+				<dt>Timezone</dt>
+				<dd>{{ item.timezone }}</dd>
+			</dl>
+		</div>
+
+		<div class="section-subheader">
+			<h3>Details</h3>
+		</div>
+
+		<div class="section-content padding">
+			<dl>
+				<dt>Department</dt>
+				<dd>{{ item.department }}</dd>
+
+				<dt>Manager</dt>
+				<dd>{{ item.manager }}</dd>
+
+				<dt>Start date</dt>
+				<dd>{{ item.startDate }}</dd>
+
+				<dt>Last updated</dt>
+				<dd>{{ item.lastUpdated }}</dd>
+			</dl>
+		</div>
+
+		<div class="section-subheader">
+			<h3>Recent activity</h3>
+		</div>
+
+		<div class="section-content padding">
+			<ul>
+				<li v-for="(entry, index) in item.activity" :key="index">
+					<span class="subtle">{{ entry.when }}</span>
+					— {{ entry.text }}
+				</li>
+			</ul>
+		</div>
+	</section>
 </template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	id: {
+		type: [String, Number],
+		required: true,
+	},
+})
+
+const itemsById = {
+	1: {
+		title: 'Acme deployment',
+		subtitle: 'Production release #1842',
+		summary: 'Read-only detail view for a single record, using Femtocrank definition lists and section subheaders.',
+		name: 'Acme deployment',
+		status: 'Active',
+		statusClass: 'fg-good',
+		role: 'Release',
+		location: 'us-east-1',
+		email: 'releases@example.com',
+		phone: '+1 555 0100',
+		timezone: 'UTC',
+		department: 'Platform engineering',
+		manager: 'Alex Morgan',
+		startDate: '12 March 2026',
+		lastUpdated: '9 July 2026, 09:14',
+		activity: [
+			{ when: '2 hours ago', text: 'Health check passed for all regions.' },
+			{ when: 'Yesterday', text: 'Configuration reviewed by on-call engineer.' },
+			{ when: '3 days ago', text: 'Deployed from build 1842.' },
+		],
+	},
+	Alice: {
+		title: 'Alice',
+		subtitle: 'Senior analyst',
+		summary: 'Example person record linked from the table example.',
+		name: 'Alice',
+		status: 'Active',
+		statusClass: 'fg-good',
+		role: 'Senior analyst',
+		location: 'New York',
+		email: 'alice@example.com',
+		phone: '+1 555 0142',
+		timezone: 'America/New_York',
+		department: 'Operations',
+		manager: 'Jordan Lee',
+		startDate: '4 June 2022',
+		lastUpdated: '8 July 2026, 16:30',
+		activity: [
+			{ when: 'Today', text: 'Approved quarterly forecast submission.' },
+			{ when: '2 days ago', text: 'Updated territory assignment.' },
+		],
+	},
+	Bob: {
+		title: 'Bob',
+		subtitle: 'Support specialist',
+		summary: 'Example person record linked from the table example.',
+		name: 'Bob',
+		status: 'Away',
+		statusClass: 'fg-warning',
+		role: 'Support specialist',
+		location: 'Los Angeles',
+		email: 'bob@example.com',
+		phone: '+1 555 0198',
+		timezone: 'America/Los_Angeles',
+		department: 'Customer success',
+		manager: 'Sam Patel',
+		startDate: '19 January 2024',
+		lastUpdated: '5 July 2026, 11:02',
+		activity: [
+			{ when: '4 hours ago', text: 'Set status to away.' },
+			{ when: 'Yesterday', text: 'Closed ticket #8821.' },
+		],
+	},
+}
+
+const item = computed(() => {
+	const key = String(props.id)
+	if (itemsById[key]) {
+		return itemsById[key]
+	}
+
+	const label = key.charAt(0).toUpperCase() + key.slice(1)
+	return {
+		title: label,
+		subtitle: `Record ${key}`,
+		summary: 'Generic detail view for records opened from the table or navigation.',
+		name: label,
+		status: 'Unknown',
+		statusClass: 'fg-note',
+		role: '—',
+		location: '—',
+		email: `${key.toLowerCase()}@example.com`,
+		phone: '—',
+		timezone: 'UTC',
+		department: '—',
+		manager: '—',
+		startDate: '—',
+		lastUpdated: '—',
+		activity: [{ when: '—', text: 'No activity recorded for this item.' }],
+	}
+})
+</script>