picocrank 1.31.0 → 1.32.0

package/vue/components/TableRowContextMenu.vue

@@ -0,0 +1,267 @@
+<template>
+	<Teleport to="body">
+		<nav
+			v-if="open"
+			ref="menuRef"
+			class="menu context-menu table-row-context-menu"
+			role="menu"
+			tabindex="-1"
+			:style="style"
+			aria-label="Row actions"
+			@click.stop
+			@contextmenu.prevent
+			@keydown="onMenuKeyDown"
+		>
+			<ul class="noListStyle">
+				<li>
+					<div>
+						<ul>
+							<template v-for="(item, index) in items" :key="itemKey(item, index)">
+								<li
+									v-if="item.divider"
+									role="separator"
+								/>
+								<li v-else>
+									<button
+										type="button"
+										role="menuitem"
+										:class="{
+											'inline-icon': Boolean(item.icon),
+											bad: item.danger,
+										}"
+										:disabled="item.disabled"
+										@click="onSelect(item)"
+									>
+										<HugeiconsIcon
+											v-if="item.icon"
+											:icon="item.icon"
+											width="1em"
+											height="1em"
+											:strokeWidth="2.5"
+											aria-hidden="true"
+										/>
+										<span>{{ itemLabel(item) }}</span>
+									</button>
+								</li>
+							</template>
+						</ul>
+					</div>
+				</li>
+			</ul>
+		</nav>
+	</Teleport>
+</template>
+
+<script setup>
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+
+const props = defineProps({
+	open: {
+		type: Boolean,
+		default: false,
+	},
+	items: {
+		type: Array,
+		default: () => [],
+	},
+	clientX: {
+		type: Number,
+		default: 0,
+	},
+	clientY: {
+		type: Number,
+		default: 0,
+	},
+	targetCount: {
+		type: Number,
+		default: 1,
+	},
+})
+
+const emit = defineEmits(['update:open', 'select', 'cancel'])
+
+const MENU_MARGIN_PX = 8
+const menuRef = ref(null)
+const style = ref({ top: '0px', left: '0px' })
+
+function itemKey(item, index) {
+	if (item.divider) {
+		return `divider-${index}`
+	}
+	return item.id ?? item.label ?? index
+}
+
+function itemLabel(item) {
+	if (typeof item.label === 'function') {
+		return item.label({ count: props.targetCount })
+	}
+	const label = item.label ?? ''
+	if (props.targetCount > 1 && item.showCount !== false) {
+		return `${label} (${props.targetCount})`
+	}
+	return label
+}
+
+function positionMenu() {
+	const menu = menuRef.value
+	if (!menu) {
+		return
+	}
+
+	const rect = menu.getBoundingClientRect()
+	const margin = MENU_MARGIN_PX
+	let top = props.clientY
+	let left = props.clientX
+
+	if (left + rect.width > window.innerWidth - margin) {
+		left = window.innerWidth - rect.width - margin
+	}
+	if (top + rect.height > window.innerHeight - margin) {
+		top = window.innerHeight - rect.height - margin
+	}
+	if (left < margin) {
+		left = margin
+	}
+	if (top < margin) {
+		top = margin
+	}
+
+	style.value = {
+		top: `${top}px`,
+		left: `${left}px`,
+	}
+}
+
+function close() {
+	emit('update:open', false)
+	emit('cancel')
+}
+
+function onSelect(item) {
+	if (item.disabled) {
+		return
+	}
+	emit('select', item)
+	emit('update:open', false)
+}
+
+function enabledMenuItems() {
+	if (!menuRef.value) {
+		return []
+	}
+	return [...menuRef.value.querySelectorAll('[role="menuitem"]:not([disabled])')]
+}
+
+function onMenuKeyDown(event) {
+	const items = enabledMenuItems()
+	const active = document.activeElement
+	const currentIndex = items.indexOf(active)
+	const focusIsOnMenuShell = active === menuRef.value
+
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		close()
+		return
+	}
+
+	if (event.key === 'ArrowDown') {
+		event.preventDefault()
+		const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length
+		items[nextIndex]?.focus()
+		return
+	}
+
+	if (event.key === 'ArrowUp') {
+		event.preventDefault()
+		const nextIndex = currentIndex < 0
+			? items.length - 1
+			: (currentIndex - 1 + items.length) % items.length
+		items[nextIndex]?.focus()
+		return
+	}
+
+	if (event.key === 'Home') {
+		event.preventDefault()
+		items[0]?.focus()
+		return
+	}
+
+	if (event.key === 'End') {
+		event.preventDefault()
+		items[items.length - 1]?.focus()
+		return
+	}
+
+	if (event.key !== 'Tab' || items.length === 0) {
+		return
+	}
+
+	// Tab through items; leave (and close) rather than jumping to the rest of the page.
+	if (event.shiftKey) {
+		if (focusIsOnMenuShell || currentIndex <= 0) {
+			event.preventDefault()
+			close()
+		}
+		return
+	}
+
+	if (currentIndex === items.length - 1) {
+		event.preventDefault()
+		close()
+	}
+}
+
+function onDocumentPointerDown(event) {
+	if (!props.open) {
+		return
+	}
+	if (menuRef.value?.contains(event.target)) {
+		return
+	}
+	close()
+}
+
+function onDocumentKeyDown(event) {
+	if (!props.open) {
+		return
+	}
+	if (event.key === 'Escape') {
+		close()
+	}
+}
+
+function attachListeners() {
+	window.addEventListener('pointerdown', onDocumentPointerDown, true)
+	window.addEventListener('keydown', onDocumentKeyDown)
+}
+
+function detachListeners() {
+	window.removeEventListener('pointerdown', onDocumentPointerDown, true)
+	window.removeEventListener('keydown', onDocumentKeyDown)
+}
+
+watch(
+	() => props.open,
+	async (isOpen) => {
+		detachListeners()
+		if (!isOpen) {
+			return
+		}
+		style.value = {
+			top: `${props.clientY}px`,
+			left: `${props.clientX}px`,
+		}
+		await nextTick()
+		positionMenu()
+		// Focus the menu shell so keyboard users can Tab/arrow into items,
+		// without visually selecting the first action on open.
+		menuRef.value?.focus({ preventScroll: true })
+		attachListeners()
+	},
+)
+
+onBeforeUnmount(() => {
+	detachListeners()
+})
+</script>

package/vue/data/navSectionHubs.js

@@ -112,6 +112,11 @@ export const navSectionHubs = {
 				title: 'Dialog',
 				options: { description: 'Modal dialogs and confirmations' },
 			},
+			{
+				name: 'LoadingAreaExample',
+				title: 'Loading area',
+				options: { description: 'Async placeholder with spinner' },
+			},
 		],
 	},
 	NavPatternsHub: {

package/vue/examples/Admin.vue

@@ -8,67 +8,99 @@
 			<div class="admin-section">
 				<h3>System Overview</h3>
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
+
+				<FormLayout @submit.prevent>
+					<FormField
+						label="Grid"
+						component-has-label
+						description="How many StatusCard columns to show."
+					>
+						<RadioGroup
+							v-model="gridLayout"
+							name="status-card-grid"
+							variant="boolean"
+							:options="gridLayoutOptions"
+						/>
+					</FormField>
+
+					<FormField label="Content align" component-has-label>
+						<RadioGroup
+							v-model="cardAlign"
+							name="status-card-align"
+							variant="boolean"
+							:options="alignOptions"
+						/>
+					</FormField>
+
+					<FormField label="Bar labels" component-has-label>
+						<RadioGroup
+							v-model="showBarLabels"
+							name="status-card-bar-labels"
+							variant="boolean"
+							:options="showHideOptions"
+						/>
+					</FormField>
+
+					<FormField label="Compact" component-has-label>
+						<RadioGroup
+							v-model="cardCompact"
+							name="status-card-compact"
+							variant="boolean"
+							:options="onOffOptions"
+						/>
+					</FormField>
+				</FormLayout>
 				
-				<div class="grid-boxed">
-					<div class="stat-display good">
-						<h4>Total Users</h4>
-						<span class="stat">1,247</span>
-						<span class="subtle">+12% from last month</span>
-					</div>
-					
-					<div class="stat-display bad">
-						<h4>Active Sessions</h4>
-						<span class="stat">89</span>
-						<span class="subtle">-3% from last hour</span>
-					</div>
-					
-					<div class="stat-display warning">
-						<h4>System Load</h4>
-						<span class="stat">67%</span>
-						<span class="subtle">Moderate</span>
-					</div>
-					
-					<div class="stat-display good">
-						<h4>Storage Used</h4>
-						<span class="stat">2.4 GB</span>
-						<span class="subtle">45% of total</span>
-					</div>
+				<div :class="gridClass">
+					<StatusCard
+						v-for="card in overviewCards"
+						:key="card.title"
+						:karma="card.karma"
+						:bar-label="showBarLabels ? card.barLabel : ''"
+						:align="cardAlign"
+						:compact="cardCompact"
+						:to="card.to"
+					>
+						<h4>{{ card.title }}</h4>
+						<span class="stat">{{ card.stat }}</span>
+						<span class="subtle">{{ card.subtle }}</span>
+					</StatusCard>
 				</div>
 			</div>
 			
 			<div class="admin-section">
 				<h3>Recent Activity</h3>
-				<div class="activity-list">
-					<div class="activity-item">
-						<span class="activity-time">2 minutes ago</span>
-						<span class="activity-text">User "john.doe" logged in</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">5 minutes ago</span>
-						<span class="activity-text">New user account created</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">12 minutes ago</span>
-						<span class="activity-text">System backup completed</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">1 hour ago</span>
-						<span class="activity-text">Database maintenance performed</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">2 hours ago</span>
-						<span class="activity-text">User "admin" updated settings</span>
-					</div>
-				</div>
+				<ul>
+					<li>
+						<span class="subtle">2 minutes ago</span>
+						— User "john.doe" logged in
+					</li>
+					<li>
+						<span class="subtle">5 minutes ago</span>
+						— New user account created
+					</li>
+					<li>
+						<span class="subtle">12 minutes ago</span>
+						— System backup completed
+					</li>
+					<li>
+						<span class="subtle">1 hour ago</span>
+						— Database maintenance performed
+					</li>
+					<li>
+						<span class="subtle">2 hours ago</span>
+						— User "admin" updated settings
+					</li>
+				</ul>
 			</div>
 			
 			<div class="admin-section">
 				<h3>Quick Actions</h3>
-				<div role = "toolbar">
-					<button class="action-btn">Create User</button>
-					<button class="action-btn">System Backup</button>
-					<button class="action-btn">View Logs</button>
-					<button class="action-btn">Settings</button>
+				<div role="toolbar">
+					<button type="button">Create User</button>
+					<button type="button">System Backup</button>
+					<button type="button">View Logs</button>
+					<button type="button">Settings</button>
 				</div>
 			</div>
 		</div>
@@ -76,6 +108,69 @@
 </template>
 
 <script setup>
-	// This is a placeholder admin view with dummy content
-	// No functionality implemented yet
+import { computed, ref } from 'vue'
+
+const showBarLabels = ref(true)
+const cardCompact = ref(false)
+const cardAlign = ref('start')
+const gridLayout = ref('3')
+
+const showHideOptions = [
+	{ label: 'Shown', value: true },
+	{ label: 'Hidden', value: false },
+]
+
+const onOffOptions = [
+	{ label: 'On', value: true },
+	{ label: 'Off', value: false },
+]
+
+const alignOptions = [
+	{ value: 'start', label: 'Start' },
+	{ value: 'center', label: 'Center' },
+]
+
+const gridLayoutOptions = [
+	{ value: '3', label: '3 columns' },
+	{ value: '2', label: '2 columns' },
+]
+
+const gridClass = computed(() => (
+	gridLayout.value === '2' ? 'grid-boxed-2' : 'grid-boxed'
+))
+
+const overviewCards = [
+	{
+		karma: 'good',
+		barLabel: 'Users',
+		title: 'Total Users',
+		stat: '1,247',
+		subtle: '+12% from last month',
+		to: { name: 'UserDetails' },
+	},
+	{
+		karma: 'bad',
+		barLabel: 'Live',
+		title: 'Active Sessions',
+		stat: '89',
+		subtle: '-3% from last hour',
+		to: { name: 'TableExample' },
+	},
+	{
+		karma: 'warning',
+		barLabel: 'Load',
+		title: 'System Load',
+		stat: '67%',
+		subtle: 'Moderate',
+		to: { name: 'StatusExample' },
+	},
+	{
+		karma: 'good',
+		barLabel: 'Disk',
+		title: 'Storage Used',
+		stat: '2.4 GB',
+		subtle: '45% of total',
+		to: { name: 'ViewItem', params: { id: '1' } },
+	},
+]
 </script>

package/vue/examples/LoadingAreaExample.vue

@@ -0,0 +1,175 @@
+<template>
+	<Section
+		title="Loading area"
+		:icon="Loading03Icon"
+		subtitle="Placeholder for async regions — wrap content or use as a standalone status block."
+	>
+		<p>
+			Bind <code>:loading</code> around a default slot for the usual Vue pattern, or
+			render <code>&lt;LoadingArea /&gt;</code> on its own while data is pending.
+			The spinner uses Hugeicons <code>Loading03Icon</code> with a CSS rotation
+			(respects <code>prefers-reduced-motion</code>).
+		</p>
+	</Section>
+
+	<Section title="Wrap content" subtitle="Toggle loading to swap between placeholder and content">
+		<template #toolbar>
+			<button type="button" class="neutral" @click="contentLoading = !contentLoading">
+				{{ contentLoading ? 'Show content' : 'Show loading' }}
+			</button>
+		</template>
+
+		<LoadingArea :loading="contentLoading" message="Fetching table rows…" min-height="10rem">
+			<div class="demo-panel">
+				<p>Content is ready. This block is the default slot.</p>
+				<ul>
+					<li>Ada — London</li>
+					<li>Grace — New York</li>
+					<li>Katherine — Newport News</li>
+				</ul>
+			</div>
+		</LoadingArea>
+	</Section>
+
+	<Section title="Overlay mode" subtitle="Keep layout size while covering content">
+		<template #toolbar>
+			<button type="button" class="neutral" @click="runOverlayFetch">
+				{{ overlayLoading ? 'Loading…' : 'Simulate refresh' }}
+			</button>
+		</template>
+
+		<LoadingArea
+			:loading="overlayLoading"
+			overlay
+			message="Refreshing…"
+			min-height="8rem"
+		>
+			<div class="demo-panel">
+				<p>
+					With <code>overlay</code>, the default slot stays mounted so the area does
+					not collapse. Useful for refresh-in-place.
+				</p>
+				<p class="subtle">Last refreshed: {{ lastRefreshedLabel }}</p>
+			</div>
+		</LoadingArea>
+	</Section>
+
+	<Section title="Standalone placeholder" subtitle="No default slot — just the loading state">
+		<LoadingArea message="Connecting to server…" min-height="8rem" />
+	</Section>
+
+	<Section title="Custom placeholder slot" subtitle="Replace the spinner with your own markup">
+		<LoadingArea :loading="true" min-height="8rem">
+			<template #placeholder>
+				<p class="custom-placeholder">Preparing preview…</p>
+			</template>
+		</LoadingArea>
+	</Section>
+
+	<Section title="Idiomatic async example" subtitle="ref + async function with try/finally">
+		<template #toolbar>
+			<button type="button" class="good" :disabled="peopleLoading" @click="loadPeople">
+				{{ peopleLoading ? 'Loading…' : 'Load people' }}
+			</button>
+			<button type="button" class="neutral" :disabled="!people.length" @click="people = []">
+				Clear
+			</button>
+		</template>
+
+		<LoadingArea :loading="peopleLoading" message="Loading people…" min-height="10rem">
+			<div v-if="peopleError" class="demo-panel">
+				<p class="annotation bad">{{ peopleError }}</p>
+			</div>
+			<div v-else-if="people.length" class="demo-panel">
+				<ul>
+					<li v-for="person in people" :key="person.name">
+						{{ person.name }} — {{ person.city }}
+					</li>
+				</ul>
+			</div>
+			<p v-else class="subtle">No people loaded yet. Click “Load people”.</p>
+		</LoadingArea>
+	</Section>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { Loading03Icon } from '@hugeicons/core-free-icons'
+import { getExampleTableRows } from '../data/examplePeople.js'
+
+const contentLoading = ref(true)
+const overlayLoading = ref(false)
+const lastRefreshedAt = ref(Date.now())
+const people = ref([])
+const peopleLoading = ref(false)
+const peopleError = ref('')
+
+let overlayTimer = null
+let peopleTimer = null
+
+const lastRefreshedLabel = computed(() =>
+	new Date(lastRefreshedAt.value).toLocaleTimeString(),
+)
+
+function runOverlayFetch() {
+	if (overlayLoading.value) {
+		return
+	}
+	overlayLoading.value = true
+	clearTimeout(overlayTimer)
+	overlayTimer = setTimeout(() => {
+		lastRefreshedAt.value = Date.now()
+		overlayLoading.value = false
+		overlayTimer = null
+	}, 1500)
+}
+
+async function loadPeople() {
+	peopleLoading.value = true
+	peopleError.value = ''
+	try {
+		people.value = await fetchPeople()
+	} catch (error) {
+		peopleError.value = error?.message || 'Failed to load people.'
+		people.value = []
+	} finally {
+		peopleLoading.value = false
+	}
+}
+
+function fetchPeople() {
+	return new Promise((resolve, reject) => {
+		clearTimeout(peopleTimer)
+		peopleTimer = setTimeout(() => {
+			peopleTimer = null
+			if (Math.random() < 0.15) {
+				reject(new Error('Simulated network failure. Try again.'))
+				return
+			}
+			resolve(getExampleTableRows().slice(0, 5))
+		}, 1200)
+	})
+}
+
+onBeforeUnmount(() => {
+	clearTimeout(overlayTimer)
+	clearTimeout(peopleTimer)
+})
+</script>
+
+<style scoped>
+.demo-panel {
+	padding: 1rem;
+}
+
+.demo-panel ul {
+	margin: 0.5rem 0 0;
+	padding-left: 1.25rem;
+}
+
+.custom-placeholder {
+	margin: 0;
+	font-style: italic;
+	color: var(--muted-text-color);
+}
+</style>