picocrank 1.31.1 → 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/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>

package/vue/examples/TableExample.vue

@@ -2,9 +2,53 @@
 	<Section
 		:title="tableSectionTitle"
 		:icon="TableIcon"
-		subtitle="Sortable columns, pagination, and column filters. Right-click or long-press a column header to filter."
+		subtitle="Sortable columns, pagination, and column filters. Right-click or long-press a column header to filter. Enable “Row context menu” to right-click rows."
 		:padding="false"
 	>
+		<template v-if="multiSelectEnabled" #toolbar>
+			<span v-if="selectedKeys.length" class="subtle selection-count">
+				{{ selectedKeys.length }} selected
+			</span>
+			<button
+				type="button"
+				class="inline-icon neutral"
+				:disabled="!selectedKeys.length"
+				@click="bulkExportSelected"
+			>
+				<HugeiconsIcon
+					:icon="Download01Icon"
+					width="1em"
+					height="1em"
+					:strokeWidth="iconStrokeWidth"
+					aria-hidden="true"
+				/>
+				<span>Export</span>
+			</button>
+			<button
+				type="button"
+				class="inline-icon bad"
+				:disabled="!selectedKeys.length"
+				@click="bulkDeleteSelected"
+			>
+				<HugeiconsIcon
+					:icon="Delete02Icon"
+					width="1em"
+					height="1em"
+					:strokeWidth="iconStrokeWidth"
+					aria-hidden="true"
+				/>
+				<span>Delete</span>
+			</button>
+			<button
+				type="button"
+				class="neutral"
+				:disabled="!selectedKeys.length"
+				@click="clearSelection"
+			>
+				Clear selection
+			</button>
+		</template>
+
 		<Table
 			table-id="table-example"
 			row-key="name"
@@ -14,6 +58,9 @@
 			:filterable="enabledFeatures.includes('filters')"
 			:column-options="enabledFeatures.includes('columnOptions')"
 			:loading="enabledFeatures.includes('loading')"
+			:selectable="multiSelectEnabled"
+			v-model:selected-keys="selectedKeys"
+			:row-context-menu="rowContextMenuEnabled ? rowContextMenuItems : null"
 			:horizontal-scroll="layout === 'scroll'"
 			:responsive-columns="layout === 'priorities'"
 			:sticky-cols="stickyCols"
@@ -127,6 +174,25 @@
 			<p v-else-if="enabledFeatures.includes('columnOptions')" class="event-line subtle">
 				Layout: using developer defaults (change columns, order, or filters to see a preset or “Custom” label).
 			</p>
+
+			<p v-if="multiSelectEnabled && selectedKeys.length" class="event-line">
+				<strong>Selection:</strong>
+				{{ selectedKeys.join(', ') }}
+			</p>
+			<p v-else-if="multiSelectEnabled" class="event-line subtle">
+				Selection: enable “Multi-select”, then click rows or checkboxes. Use the toolbar Export / Delete actions on the selected set.
+			</p>
+
+			<p v-if="lastContextMenuAction" class="event-line">
+				<strong>Context menu:</strong>
+				{{ lastContextMenuAction }}
+			</p>
+			<p v-else-if="rowContextMenuEnabled" class="event-line subtle">
+				Context menu: right-click a row. With multi-select, right-click inside the selection to act on all selected rows.
+			</p>
+			<p v-else-if="lastBulkAction" class="event-line subtle">
+				{{ lastBulkAction }}
+			</p>
 		</div>
 	</Section>
 
@@ -165,11 +231,13 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { TableIcon, Settings01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { TableIcon, Settings01Icon, Download01Icon, Delete02Icon, ViewIcon } from '@hugeicons/core-free-icons'
 import { getExampleTableRows } from '../data/examplePeople.js'
 import { countActiveFilters } from '../composables/tableFilters.js'
 
-const defaultFeatures = ['pagination', 'filters', 'columnOptions', 'rowClick']
+const iconStrokeWidth = 2.5
+const defaultFeatures = ['pagination', 'filters', 'columnOptions', 'rowClick', 'rowContextMenu']
 
 const defaultColumnVisibility = {
 	birthYear: false,
@@ -184,9 +252,15 @@ const dataConnected = ref(true)
 const data = ref([])
 const lastRowClick = ref(null)
 const lastQuery = ref(null)
+const lastBulkAction = ref(null)
+const lastContextMenuAction = ref(null)
+const selectedKeys = ref([])
 const tableLayoutLabel = ref('')
 const rowDialogRef = ref(null)
 
+const multiSelectEnabled = computed(() => enabledFeatures.value.includes('multiSelect'))
+const rowContextMenuEnabled = computed(() => enabledFeatures.value.includes('rowContextMenu'))
+
 const tableSectionTitle = computed(() => {
 	if (tableLayoutLabel.value) {
 		return `Table Example (${tableLayoutLabel.value})`
@@ -204,6 +278,8 @@ const featureOptions = [
 	{ value: 'filters', label: 'Column filters' },
 	{ value: 'columnOptions', label: 'Column options' },
 	{ value: 'rowClick', label: 'Row click' },
+	{ value: 'multiSelect', label: 'Multi-select' },
+	{ value: 'rowContextMenu', label: 'Row context menu' },
 	{ value: 'loading', label: 'Loading state' },
 ]
 
@@ -285,12 +361,56 @@ const tableListeners = computed(() => {
 	const listeners = {
 		onQueryChange: handleQueryChange,
 	}
-	if (enabledFeatures.value.includes('rowClick')) {
+	// Row click opens the detail dialog; multi-select uses row clicks for selection instead.
+	if (enabledFeatures.value.includes('rowClick') && !multiSelectEnabled.value) {
 		listeners.onRowClick = handleRowClick
 	}
 	return listeners
 })
 
+const rowContextMenuItems = computed(() => [
+	{
+		id: 'view',
+		label: 'View details',
+		icon: ViewIcon,
+		action: ({ row, rows }) => {
+			const target = rows[0] ?? row
+			if (!target) {
+				return
+			}
+			lastContextMenuAction.value = `View “${target.name}”`
+			lastRowClick.value = {
+				row: target,
+				index: tableData.value.findIndex((item) => item.name === target.name),
+			}
+			rowDialogRef.value?.showModal()
+		},
+	},
+	{
+		id: 'export',
+		label: 'Export',
+		icon: Download01Icon,
+		action: ({ keys }) => {
+			lastContextMenuAction.value = `Exported ${keys.length} row(s): ${keys.join(', ')}`
+			lastBulkAction.value = lastContextMenuAction.value
+		},
+	},
+	{ divider: true },
+	{
+		id: 'delete',
+		label: 'Delete',
+		icon: Delete02Icon,
+		danger: true,
+		action: ({ keys }) => {
+			const removeSet = new Set(keys)
+			data.value = data.value.filter((row) => !removeSet.has(row.name))
+			selectedKeys.value = selectedKeys.value.filter((key) => !removeSet.has(key))
+			lastContextMenuAction.value = `Deleted ${keys.length} row(s): ${keys.join(', ')}`
+			lastBulkAction.value = lastContextMenuAction.value
+		},
+	},
+])
+
 function handleRowClick(payload) {
 	lastRowClick.value = payload
 	rowDialogRef.value?.showModal()
@@ -306,6 +426,29 @@ function handleQueryChange(query) {
 	lastQuery.value = query
 }
 
+function clearSelection() {
+	selectedKeys.value = []
+	lastBulkAction.value = 'Selection cleared.'
+}
+
+function bulkExportSelected() {
+	if (!selectedKeys.value.length) {
+		return
+	}
+	lastBulkAction.value = `Exported ${selectedKeys.value.length} row(s): ${selectedKeys.value.join(', ')}`
+}
+
+function bulkDeleteSelected() {
+	if (!selectedKeys.value.length) {
+		return
+	}
+	const removed = [...selectedKeys.value]
+	const removeSet = new Set(removed)
+	data.value = data.value.filter((row) => !removeSet.has(row.name))
+	selectedKeys.value = []
+	lastBulkAction.value = `Deleted ${removed.length} row(s): ${removed.join(', ')}`
+}
+
 function statusTagClass(value) {
 	if (value === 'Active') {
 		return 'good'
@@ -323,7 +466,11 @@ function resetControls() {
 	stickyColsOption.value = '2'
 	wideTable.value = true
 	dataConnected.value = true
+	data.value = getExampleTableRows()
 	lastRowClick.value = null
+	lastBulkAction.value = null
+	lastContextMenuAction.value = null
+	selectedKeys.value = []
 	if (rowDialogRef.value?.open) {
 		rowDialogRef.value.close()
 	}
@@ -347,6 +494,11 @@ onMounted(() => {
 	margin: 0.35rem 0;
 }
 
+.selection-count {
+	align-self: center;
+	margin-right: 0.5rem;
+}
+
 .row-detail-dialog .dialog-panel h3 {
 	margin: 0 0 0.5rem;
 }