picocrank 1.32.0 → 1.34.0

package/vue/components/TopBar.vue

@@ -80,14 +80,18 @@ function handleLinkClick(callback = null) {
 
 <style scoped>
 .topbar {
-	width: 100%;
+	flex: 1 1 auto;
+	min-width: 0;
+	max-width: 100%;
+	overflow: hidden;
 }
 
 .topbar-links {
 	display: flex;
 	align-items: center;
 	gap: 0.125rem;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
+	overflow: hidden;
 }
 
 .topbar-link {

package/vue/components/accordionContext.js

@@ -0,0 +1 @@
+export const accordionContextKey = Symbol('accordion')

package/vue/composables/tableColumnPresets.js

@@ -2,6 +2,7 @@ import {
 	normalizeColumnFilterEntries,
 	normalizeStoredFilterEntry,
 } from './tableFilters.js'
+import { isHeaderGroupable } from './tableGroupBy.js'
 
 export const PRESET_STORE_VERSION = 1
 export const MAX_PRESETS_PER_TABLE = 20
@@ -181,6 +182,13 @@ export function sanitizePresetState(state, headers = [], rows = []) {
 		}
 	}
 
+	if (state.groupBy) {
+		const header = headerByKey.get(state.groupBy)
+		if (isHeaderGroupable(header)) {
+			sanitized.groupBy = state.groupBy
+		}
+	}
+
 	const rawPageSize = Number(state.pageSize)
 	if (Number.isFinite(rawPageSize)) {
 		const normalizedPageSize = Math.floor(rawPageSize)
@@ -225,6 +233,30 @@ export function savePreset(tableId, { name, state, setAsDefault = false }) {
 	return { ok: true, preset, defaultPresetId: store.defaultPresetId }
 }
 
+export function overwritePreset(tableId, presetId, { state }) {
+	if (!tableId || !presetId) {
+		return { ok: false, error: 'Preset not found.' }
+	}
+	if (!state || typeof state !== 'object') {
+		return { ok: false, error: 'Nothing to save.' }
+	}
+
+	const store = readPresetStore(tableId)
+	const index = store.presets.findIndex((item) => item.id === presetId)
+	if (index === -1) {
+		return { ok: false, error: 'Preset not found.' }
+	}
+
+	const preset = {
+		...store.presets[index],
+		savedAt: new Date().toISOString(),
+		state: JSON.parse(JSON.stringify(state)),
+	}
+	store.presets[index] = preset
+	writePresetStore(tableId, store)
+	return { ok: true, preset, defaultPresetId: store.defaultPresetId }
+}
+
 export function deletePreset(tableId, presetId) {
 	if (!tableId || !presetId) {
 		return { ok: false, error: 'Preset not found.' }
@@ -286,6 +318,7 @@ export function normalizeLayoutStateForCompare(state, headers = [], rows = []) {
 		filters: sanitized.filters ?? {},
 		sortBy: sanitized.sortBy ?? null,
 		sortDir: sanitized.sortDir === 'desc' ? 'desc' : 'asc',
+		groupBy: sanitized.groupBy ?? null,
 		pageSize: sanitized.pageSize ?? ALLOWED_PAGE_SIZES[0],
 	}
 }

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

@@ -0,0 +1,173 @@
+export const EMPTY_GROUP_LABEL = '(empty)'
+
+export function isHeaderGroupable(header, tableGroupable = true) {
+	if (!tableGroupable || !header?.key) {
+		return false
+	}
+	if (header.groupable === false) {
+		return false
+	}
+	return true
+}
+
+export function groupableHeaders(headers = [], tableGroupable = true) {
+	return headers.filter((header) => isHeaderGroupable(header, tableGroupable))
+}
+
+export function formatGroupValue(value) {
+	if (value === null || value === undefined || value === '') {
+		return EMPTY_GROUP_LABEL
+	}
+	return String(value)
+}
+
+export function normalizeGroupValue(value) {
+	if (value === null || value === undefined || value === '') {
+		return null
+	}
+	return value
+}
+
+export function buildGroupId(columnKey, value) {
+	const normalized = normalizeGroupValue(value)
+	return `${columnKey}::${normalized === null ? '' : String(normalized)}`
+}
+
+export function compareGroupValues(a, b) {
+	const aEmpty = a === null || a === undefined || a === ''
+	const bEmpty = b === null || b === undefined || b === ''
+	if (aEmpty && bEmpty) {
+		return 0
+	}
+	if (aEmpty) {
+		return 1
+	}
+	if (bEmpty) {
+		return -1
+	}
+	if (typeof a === 'number' && typeof b === 'number') {
+		return a - b
+	}
+	if (typeof a === 'boolean' && typeof b === 'boolean') {
+		return Number(a) - Number(b)
+	}
+	return String(a).localeCompare(String(b))
+}
+
+export function groupRowsByColumn(rows, columnKey) {
+	if (!columnKey || rows.length === 0) {
+		return []
+	}
+
+	const groups = new Map()
+	const order = []
+
+	for (const row of rows) {
+		const value = normalizeGroupValue(row?.[columnKey])
+		const groupId = buildGroupId(columnKey, value)
+		if (!groups.has(groupId)) {
+			const group = {
+				columnKey,
+				value,
+				groupId,
+				rows: [],
+			}
+			groups.set(groupId, group)
+			order.push(groupId)
+		}
+		groups.get(groupId).rows.push(row)
+	}
+
+	return order.map((id) => groups.get(id))
+}
+
+export function paginateGroupedRows(rows, columnKey, page, pageSize) {
+	if (!columnKey || pageSize <= 0) {
+		return []
+	}
+
+	const groups = groupRowsByColumn(rows, columnKey)
+	const start = (page - 1) * pageSize
+	const end = start + pageSize
+	let globalIndex = 0
+	const pageGroups = []
+
+	for (const group of groups) {
+		const groupStart = globalIndex
+		const groupEnd = globalIndex + group.rows.length
+		const overlapStart = Math.max(start, groupStart)
+		const overlapEnd = Math.min(end, groupEnd)
+
+		if (overlapStart < overlapEnd) {
+			const sliceStart = overlapStart - groupStart
+			const sliceEnd = overlapEnd - groupStart
+			pageGroups.push({
+				...group,
+				rows: group.rows.slice(sliceStart, sliceEnd),
+				count: group.rows.length,
+			})
+		}
+
+		globalIndex = groupEnd
+	}
+
+	return pageGroups
+}
+
+export function flattenGroups(groups, collapsedGroupIds = new Set(), sourceRows = null) {
+	const rowIndexByReference = sourceRows
+		? new Map(sourceRows.map((row, index) => [row, index]))
+		: null
+	const items = []
+
+	for (const group of groups) {
+		const collapsed = collapsedGroupIds.has(group.groupId)
+		items.push({
+			kind: 'group',
+			columnKey: group.columnKey,
+			value: group.value,
+			groupId: group.groupId,
+			count: group.count ?? group.rows.length,
+			collapsed,
+		})
+
+		if (!collapsed) {
+			for (const row of group.rows) {
+				items.push({
+					kind: 'row',
+					row,
+					sourceIndex: rowIndexByReference?.get(row) ?? null,
+				})
+			}
+		}
+	}
+
+	return items
+}
+
+export function buildDisplayBodyItems(rows, {
+	groupBy = null,
+	page = 1,
+	pageSize = 10,
+	paginate = true,
+	collapsedGroupIds = new Set(),
+} = {}) {
+	if (!groupBy) {
+		const dataRows = paginate
+			? rows.slice((page - 1) * pageSize, ((page - 1) * pageSize) + pageSize)
+			: rows
+
+		const startIndex = paginate ? (page - 1) * pageSize : 0
+		return dataRows.map((row, index) => ({
+			kind: 'row',
+			row,
+			sourceIndex: startIndex + index,
+		}))
+	}
+
+	const groups = paginate
+		? paginateGroupedRows(rows, groupBy, page, pageSize)
+		: groupRowsByColumn(rows, groupBy)
+
+	return flattenGroups(groups, collapsedGroupIds, rows)
+}

package/vue/composables/tableGroupBy.spec.js

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest'
+import {
+	buildDisplayBodyItems,
+	buildGroupId,
+	compareGroupValues,
+	formatGroupValue,
+	groupRowsByColumn,
+	paginateGroupedRows,
+} from './tableGroupBy.js'
+
+const rows = [
+	{ name: 'Ada', city: 'London' },
+	{ name: 'Grace', city: 'New York' },
+	{ name: 'Katherine', city: 'London' },
+	{ name: 'Alan', city: '' },
+]
+
+describe('tableGroupBy', () => {
+	it('formats empty group values', () => {
+		expect(formatGroupValue(null)).toBe('(empty)')
+		expect(formatGroupValue('Paris')).toBe('Paris')
+	})
+
+	it('groups rows by column while preserving row order within groups', () => {
+		const groups = groupRowsByColumn(rows, 'city')
+
+		expect(groups.map((group) => group.value)).toEqual(['London', 'New York', null])
+		expect(groups[0].rows.map((row) => row.name)).toEqual(['Ada', 'Katherine'])
+		expect(buildGroupId('city', 'London')).toBe('city::London')
+		expect(buildGroupId('city', null)).toBe('city::')
+	})
+
+	it('compares group values with empty values last', () => {
+		expect(compareGroupValues('London', 'New York')).toBeLessThan(0)
+		expect(compareGroupValues(null, 'London')).toBeGreaterThan(0)
+	})
+
+	it('paginates grouped rows by leaf row count', () => {
+		const pageOne = paginateGroupedRows(rows, 'city', 1, 2)
+		const pageTwo = paginateGroupedRows(rows, 'city', 2, 2)
+
+		expect(pageOne).toHaveLength(1)
+		expect(pageOne[0].value).toBe('London')
+		expect(pageOne[0].rows.map((row) => row.name)).toEqual(['Ada', 'Katherine'])
+		expect(pageTwo.map((group) => group.value)).toEqual(['New York', null])
+	})
+
+	it('builds display items with group headers and source indexes', () => {
+		const items = buildDisplayBodyItems(rows, {
+			groupBy: 'city',
+			paginate: false,
+		})
+
+		expect(items.filter((item) => item.kind === 'group').map((item) => item.count)).toEqual([2, 1, 1])
+		expect(items.find((item) => item.kind === 'row' && item.row.name === 'Ada')?.sourceIndex).toBe(0)
+	})
+
+	it('omits collapsed group rows from display items', () => {
+		const londonGroupId = buildGroupId('city', 'London')
+		const items = buildDisplayBodyItems(rows, {
+			groupBy: 'city',
+			paginate: false,
+			collapsedGroupIds: new Set([londonGroupId]),
+		})
+
+		expect(items.some((item) => item.kind === 'row' && item.row.name === 'Ada')).toBe(false)
+		expect(items.some((item) => item.kind === 'group' && item.groupId === londonGroupId && item.collapsed)).toBe(true)
+	})
+})

package/vue/composables/tableViewSettings.js

@@ -0,0 +1,34 @@
+/** Saved layouts and column view state use browser localStorage (requires `tableId`). */
+export const VIEW_CONTROL_LOCAL_STORAGE = 'localStorageControlled'
+
+/** Saved layouts and view persistence are driven by `viewSettings` callbacks. */
+export const VIEW_CONTROL_CALLBACK = 'callbackControlled'
+
+export const VIEW_CONTROL_MODES = [
+	VIEW_CONTROL_LOCAL_STORAGE,
+	VIEW_CONTROL_CALLBACK,
+]
+
+/**
+ * Callback API for {@link VIEW_CONTROL_CALLBACK} (same surface as legacy `layoutPresets`).
+ *
+ * @typedef {object} TableViewSettingsCallbacks
+ * @property {() => Promise<{ presets?: object[], defaultPresetId?: string|null }>|{ presets?: object[], defaultPresetId?: string|null }} list
+ * @property {() => Promise<{ ok: boolean, preset?: object|null }>|{ ok: boolean, preset?: object|null }} [getDefault]
+ * @property {(args: { name: string, state: object, setAsDefault?: boolean }) => Promise<{ ok: boolean, preset?: object, error?: string }>} save
+ * @property {(args: { presetId: string, state: object }) => Promise<{ ok: boolean, preset?: object, error?: string }>} [overwrite]
+ * @property {(presetId: string) => Promise<{ ok: boolean, preset?: object, error?: string }>} load
+ * @property {(presetId: string) => Promise<{ ok: boolean, error?: string }>} delete
+ * @property {(presetId: string|null) => Promise<{ ok: boolean, error?: string }>} setDefault
+ */
+
+export function getViewSettingsHandlers(viewSettings, layoutPresets) {
+	return viewSettings ?? layoutPresets ?? null
+}
+
+export function isViewSettingsControlEnabled(viewControlMode, tableId, handlers) {
+	if (viewControlMode === VIEW_CONTROL_CALLBACK) {
+		return handlers != null
+	}
+	return Boolean(tableId)
+}

package/vue/composables/tableViewSettings.spec.js

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import {
+	getViewSettingsHandlers,
+	isViewSettingsControlEnabled,
+	VIEW_CONTROL_CALLBACK,
+	VIEW_CONTROL_LOCAL_STORAGE,
+} from './tableViewSettings.js'
+
+describe('tableViewSettings', () => {
+	it('prefers viewSettings over layoutPresets', () => {
+		const handlers = { list: () => {} }
+		expect(getViewSettingsHandlers(handlers, { list: () => 'legacy' })).toBe(handlers)
+	})
+
+	it('enables control per mode', () => {
+		expect(isViewSettingsControlEnabled(VIEW_CONTROL_LOCAL_STORAGE, 'users', null)).toBe(true)
+		expect(isViewSettingsControlEnabled(VIEW_CONTROL_LOCAL_STORAGE, '', null)).toBe(false)
+		expect(isViewSettingsControlEnabled(VIEW_CONTROL_CALLBACK, '', { list: () => {} })).toBe(true)
+		expect(isViewSettingsControlEnabled(VIEW_CONTROL_CALLBACK, 'users', null)).toBe(false)
+	})
+})

package/vue/composables/useHeaderTopBarFit.js

@@ -0,0 +1,91 @@
+import { nextTick, onMounted, onUnmounted, ref, toValue, watch } from 'vue'
+
+function headerGapTotal(headerEl) {
+	const style = getComputedStyle(headerEl)
+	const gap = parseFloat(style.columnGap || style.gap) || 0
+	return gap * Math.max(0, headerEl.children.length - 1)
+}
+
+function childrenWidth(headerEl, except = null) {
+	let width = 0
+	for (const child of headerEl.children) {
+		if (child === except) {
+			continue
+		}
+		width += child.getBoundingClientRect().width
+	}
+	return width
+}
+
+/**
+ * Hides the header top bar when link row would wrap or clip (measures against header width).
+ * `active` should stay true while the top bar is eligible (enabled and not mobile-only hidden).
+ */
+export function useHeaderTopBarFit(headerRef, active, spaceLimitedOut) {
+	const internalLimited = ref(false)
+	const spaceLimited = spaceLimitedOut ?? internalLimited
+	const requiredWidth = ref(0)
+	let observer = null
+
+	function update() {
+		if (!toValue(active)) {
+			spaceLimited.value = false
+			requiredWidth.value = 0
+			return
+		}
+
+		const headerEl = headerRef.value
+		if (!headerEl) {
+			return
+		}
+
+		const topBarNav = headerEl.querySelector(':scope > nav.topbar')
+
+		if (topBarNav) {
+			const links = topBarNav.querySelector('.topbar-links')
+			if (!links) {
+				return
+			}
+
+			requiredWidth.value = Math.ceil(links.scrollWidth)
+			const fitsInRow = links.scrollWidth <= links.clientWidth + 1
+			const others = childrenWidth(headerEl, topBarNav)
+			const available = headerEl.clientWidth - others - headerGapTotal(headerEl)
+			const fitsInHeader = requiredWidth.value <= available + 1
+			spaceLimited.value = !fitsInRow || !fitsInHeader
+			return
+		}
+
+		if (requiredWidth.value <= 0) {
+			spaceLimited.value = false
+			return
+		}
+
+		const others = childrenWidth(headerEl)
+		const available = headerEl.clientWidth - others - headerGapTotal(headerEl)
+		spaceLimited.value = requiredWidth.value > available + 1
+	}
+
+	watch(
+		() => toValue(active),
+		() => nextTick(update),
+	)
+
+	onMounted(() => {
+		const headerEl = headerRef.value
+		if (!headerEl) {
+			return
+		}
+
+		observer = new ResizeObserver(() => update())
+		observer.observe(headerEl)
+		nextTick(update)
+	})
+
+	onUnmounted(() => {
+		observer?.disconnect()
+		observer = null
+	})
+
+	return { spaceLimited, remeasure: update }
+}

package/vue/composables/useResponsiveNav.js

@@ -13,7 +13,7 @@ export const MOBILE_NAV_QUERY = '(max-width: 768px)'
  * Explicit sidebar mounting stays with the app. Header owns the top-bar-only
  * mobile fallback via `needsFallbackSidebar`.
  */
-export function useResponsiveNav(sidebarEnabled, topBarEnabled) {
+export function useResponsiveNav(sidebarEnabled, topBarEnabled, topBarSpaceLimited) {
 	const isMobile = useMediaQuery(MOBILE_NAV_QUERY)
 
 	const hasExplicitSidebar = computed(() => !!toValue(sidebarEnabled))
@@ -21,8 +21,10 @@ export function useResponsiveNav(sidebarEnabled, topBarEnabled) {
 		() => !!toValue(topBarEnabled) && !toValue(sidebarEnabled),
 	)
 
+	const topBarCrowded = computed(() => !!toValue(topBarSpaceLimited))
+
 	const needsFallbackSidebar = computed(
-		() => topBarOnly.value && isMobile.value,
+		() => topBarOnly.value && (isMobile.value || topBarCrowded.value),
 	)
 
 	const showSidebarChrome = computed(
@@ -30,7 +32,7 @@ export function useResponsiveNav(sidebarEnabled, topBarEnabled) {
 	)
 
 	const showTopBar = computed(
-		() => !!toValue(topBarEnabled) && !isMobile.value,
+		() => !!toValue(topBarEnabled) && !isMobile.value && !topBarCrowded.value,
 	)
 
 	return {

package/vue/data/navSectionHubs.js

@@ -46,11 +46,16 @@ export const navSectionHubs = {
 				title: 'Tabs',
 				options: { description: 'Tabbed content regions' },
 			},
+			{
+				name: 'AccordionExample',
+				title: 'Accordion',
+				options: { description: 'Collapsible subsections' },
+			},
 		],
 	},
 	NavDataDisplayHub: {
 		title: 'Data display',
-		subtitle: 'Tables, calendars, and read-only output',
+		subtitle: 'Tables, calendars, row lists, and read-only output',
 		sectionId: 'nav-data',
 		links: [
 			{
@@ -68,6 +73,11 @@ export const navSectionHubs = {
 				title: 'Calendar',
 				options: { description: 'Month view with events' },
 			},
+			{
+				name: 'ReorderListExample',
+				title: 'Reorder list',
+				options: { description: 'Drag and drop to reorder row components' },
+			},
 			{
 				name: 'ReadOnlyTextAreaExample',
 				title: 'Read-only output',
@@ -90,6 +100,11 @@ export const navSectionHubs = {
 				title: 'Forms',
 				options: { description: 'Labels, inputs, and fieldsets' },
 			},
+			{
+				name: 'FieldValueExample',
+				title: 'Field value',
+				options: { description: 'Read-only, inline edit, and outline edit' },
+			},
 			{
 				name: 'LoginExample',
 				title: 'Login',

package/vue/examples/AccordionExample.vue

@@ -0,0 +1,33 @@
+<template>
+	<Section
+		title="Accordion"
+		:icon="ArrowDown01Icon"
+		subtitle="Collapsible subsections inside a section."
+		:padding="false"
+	>
+		<p class="padding">
+			<code>Accordion</code> tracks which panels are open.
+			Each <code>AccordionItem</code> is a subsection: a
+			<code>section-subheader</code> trigger and a padded content region.
+			Pass ids in <code>default-open-ids</code> for panels that start expanded.
+		</p>
+
+		<Accordion :default-open-ids="['details']">
+			<AccordionItem item-id="details" title="Details">
+				<p>This subsection starts open.</p>
+			</AccordionItem>
+			<AccordionItem item-id="notes" title="Notes">
+				<p>This subsection starts closed. Select the heading to expand it.</p>
+			</AccordionItem>
+			<AccordionItem item-id="history" title="History">
+				<p>Several subsections can be open at the same time.</p>
+			</AccordionItem>
+		</Accordion>
+	</Section>
+</template>
+
+<script setup>
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons'
+import Accordion from '../components/Accordion.vue'
+import AccordionItem from '../components/AccordionItem.vue'
+</script>