picocrank 1.31.1 → 1.33.0

package/vue/components/TableColumnFilterPopover.vue

@@ -10,9 +10,27 @@
 			@click.stop
 		>
 			<div class="popover-body">
-				<h4 :id="titleId" ref="titleRef" class="popover-title">
-					{{ popoverTitle }}
-				</h4>
+				<div class="popover-title-row">
+					<h4 :id="titleId" ref="titleRef" class="popover-title">
+						{{ popoverTitle }}
+					</h4>
+					<button
+						v-if="canHide"
+						type="button"
+						class="neutral inline-icon popover-hide-column"
+						:aria-label="`Hide ${columnLabel || 'column'} column`"
+						title="Hide column"
+						@click="hideColumn"
+					>
+						<HugeiconsIcon
+							:icon="ViewOffIcon"
+							width="1em"
+							height="1em"
+							:strokeWidth="2.5"
+							aria-hidden="true"
+						/>
+					</button>
+				</div>
 
 				<div v-if="filterType === 'text'" class="filter-fields">
 					<label>
@@ -148,7 +166,7 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { Delete02Icon } from '@hugeicons/core-free-icons'
+import { Delete02Icon, ViewOffIcon } from '@hugeicons/core-free-icons'
 import CheckGroup from './CheckGroup.vue'
 import RadioGroup from './RadioGroup.vue'
 import {
@@ -186,9 +204,13 @@ const props = defineProps({
 		type: Array,
 		default: () => [],
 	},
+	canHide: {
+		type: Boolean,
+		default: false,
+	},
 })
 
-const emit = defineEmits(['update:open', 'apply', 'clear', 'cancel'])
+const emit = defineEmits(['update:open', 'apply', 'clear', 'cancel', 'hide'])
 
 const MIN_VISIBLE_OPTIONS = 3
 const MAX_VISIBLE_OPTIONS = 20
@@ -441,6 +463,14 @@ function cancel() {
 	emit('cancel')
 }
 
+function hideColumn() {
+	if (!props.canHide) {
+		return
+	}
+	emit('hide')
+	emit('update:open', false)
+}
+
 function detachDocumentListeners() {
 	document.removeEventListener('pointerdown', onDocumentPointerDown)
 	document.removeEventListener('keydown', onDocumentKeyDown)
@@ -459,7 +489,9 @@ async function initializePopover() {
 	updateCheckGroupScrollLimit()
 	await nextTick()
 	positionPopover()
-	popoverRef.value?.querySelector('input, select, button')?.focus()
+	popoverRef.value?.querySelector(
+		'.filter-fields input, .filter-fields select, .filter-fields button, .popover-actions button',
+	)?.focus()
 	attachDocumentListeners()
 }
 
@@ -511,10 +543,26 @@ onBeforeUnmount(() => {
 	flex-direction: column;
 }
 
+.popover-title-row {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 0.5rem;
+	margin-bottom: 0.75rem;
+	flex-shrink: 0;
+}
+
 .popover-title {
-	margin: 0 0 0.75rem;
+	margin: 0;
 	font-size: 0.95rem;
-	flex-shrink: 0;
+	min-width: 0;
+	flex: 1 1 auto;
+}
+
+.popover-hide-column {
+	flex: 0 0 auto;
+	padding: 0.2em 0.45em;
+	line-height: 1;
 }
 
 .filter-fields {

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/composables/tableFilters.js

@@ -387,7 +387,7 @@ export function cloneColumnFilterEntries(value, header = null, rows = []) {
 	return normalizeColumnFilterEntries(value, header, rows).map((entry) => ({ ...entry }))
 }
 
-export function sortRows(rows, sortBy, sortDir) {
+export function sortRows(rows, sortBy, sortDir, comparator = null) {
 	if (!sortBy) {
 		return [...rows]
 	}
@@ -399,6 +399,11 @@ export function sortRows(rows, sortBy, sortDir) {
 		if (av === bv) return 0
 		if (av === null || av === undefined) return 1
 		if (bv === null || bv === undefined) return -1
+		if (typeof comparator === 'function') {
+			const result = Number(comparator(av, bv, a, b))
+			if (!Number.isFinite(result) || result === 0) return 0
+			return sortDir === 'asc' ? result : -result
+		}
 		if (typeof av === 'string' && typeof bv === 'string') {
 			return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av)
 		}

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>