picocrank 1.24.0 → 1.25.0

package/vue/components/ThemeSwitcher.vue

@@ -0,0 +1,119 @@
+<template>
+	<label class="theme-switcher">
+		<span v-if="label" class="theme-switcher-label">{{ label }}</span>
+		<select :value="themePreference" @change="onThemeChange">
+			<option value="">{{ defaultOptionLabel }}</option>
+			<option
+				v-for="name in availableThemes"
+				:key="name"
+				:value="name"
+			>
+				{{ themeLabels[name] || name }}
+			</option>
+		</select>
+	</label>
+	<p v-if="showEmptyHint && availableThemes.length === 0" class="subtle theme-switcher-hint">
+		<slot name="empty">
+			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
+			or set <code>include-supplemental-themes</code> to list bundled supplemental themes.
+		</slot>
+	</p>
+</template>
+
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useCustomTheme } from '../composables/useCustomTheme.js'
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: 'Active theme',
+	},
+	defaultOptionLabel: {
+		type: String,
+		default: 'Default (Femtocrank)',
+	},
+	includeSupplementalThemes: {
+		type: Boolean,
+		default: false,
+	},
+	themesBasePath: {
+		type: String,
+		default: undefined,
+	},
+	supplementalThemesBasePath: {
+		type: String,
+		default: undefined,
+	},
+	storageKey: {
+		type: String,
+		default: undefined,
+	},
+	showEmptyHint: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['change'])
+
+const {
+	availableThemes,
+	themeLabels,
+	themePreference,
+	setTheme,
+	discoverThemes,
+	configure,
+} = useCustomTheme()
+
+function syncOptions() {
+	configure({
+		includeSupplementalThemes: props.includeSupplementalThemes,
+		themesBasePath: props.themesBasePath,
+		supplementalThemesBasePath: props.supplementalThemesBasePath,
+		storageKey: props.storageKey,
+	})
+}
+
+function onThemeChange(event) {
+	const value = event.target.value
+	setTheme(value)
+	emit('change', value)
+}
+
+watch(
+	() => [
+		props.includeSupplementalThemes,
+		props.themesBasePath,
+		props.supplementalThemesBasePath,
+		props.storageKey,
+	],
+	() => {
+		syncOptions()
+		void discoverThemes()
+	},
+)
+
+onMounted(() => {
+	syncOptions()
+	void discoverThemes()
+})
+</script>
+
+<style scoped>
+.theme-switcher {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.75rem;
+	margin: 0;
+}
+
+.theme-switcher select {
+	min-width: 14rem;
+}
+
+.theme-switcher-hint {
+	margin: 0.75rem 0 0;
+}
+</style>

package/vue/components/TopBar.vue

@@ -97,7 +97,7 @@ function handleLinkClick(callback = null) {
 	padding: 0.5em 0.75em;
 	border-radius: 0.25em;
 	text-decoration: none;
-	color: inherit;
+	color: var(--header-text-color, inherit);
 	transition: background-color 0.15s ease;
 	white-space: nowrap;
 	border: 0;
@@ -124,7 +124,7 @@ function handleLinkClick(callback = null) {
 
 html[data-theme="dark"] {
 	.topbar-link {
-		color: #f8f9fa;
+		color: var(--header-text-color, #f8f9fa);
 	}
 	
 	.separator {

package/vue/composables/tableColumnPresets.js

@@ -0,0 +1,296 @@
+import {
+	normalizeColumnFilterEntries,
+	normalizeStoredFilterEntry,
+} from './tableFilters.js'
+
+export const PRESET_STORE_VERSION = 1
+export const MAX_PRESETS_PER_TABLE = 20
+export const ALLOWED_PAGE_SIZES = [10, 25, 50, 100]
+
+let presetIdCounter = 0
+
+export function createPresetId() {
+	if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+		return `preset-${crypto.randomUUID()}`
+	}
+
+	presetIdCounter += 1
+	return `preset-${presetIdCounter}-${Date.now()}`
+}
+
+export function getPresetStorageKey(tableId) {
+	const origin = typeof window !== 'undefined' ? window.location.origin : 'ssr'
+	return `picocrank-table-layouts:v${PRESET_STORE_VERSION}:${origin}:${tableId}`
+}
+
+function createEmptyStore() {
+	return {
+		version: PRESET_STORE_VERSION,
+		defaultPresetId: null,
+		presets: [],
+	}
+}
+
+function normalizeStore(raw) {
+	if (!raw || typeof raw !== 'object') {
+		return createEmptyStore()
+	}
+
+	const presets = Array.isArray(raw.presets)
+		? raw.presets.filter((preset) => preset?.id && preset?.name && preset?.state)
+		: []
+
+	const defaultPresetId = typeof raw.defaultPresetId === 'string'
+		&& presets.some((preset) => preset.id === raw.defaultPresetId)
+		? raw.defaultPresetId
+		: null
+
+	return {
+		version: PRESET_STORE_VERSION,
+		defaultPresetId,
+		presets,
+	}
+}
+
+export function readPresetStore(tableId) {
+	if (!tableId || typeof localStorage === 'undefined') {
+		return createEmptyStore()
+	}
+
+	try {
+		const raw = localStorage.getItem(getPresetStorageKey(tableId))
+		if (!raw) {
+			return createEmptyStore()
+		}
+		return normalizeStore(JSON.parse(raw))
+	} catch {
+		return createEmptyStore()
+	}
+}
+
+export function writePresetStore(tableId, store) {
+	if (!tableId || typeof localStorage === 'undefined') {
+		return false
+	}
+
+	localStorage.setItem(getPresetStorageKey(tableId), JSON.stringify(normalizeStore(store)))
+	return true
+}
+
+export function listPresets(tableId) {
+	const store = readPresetStore(tableId)
+	return {
+		presets: store.presets.map((preset) => ({ ...preset })),
+		defaultPresetId: store.defaultPresetId,
+	}
+}
+
+export function getDefaultPreset(tableId) {
+	const store = readPresetStore(tableId)
+	if (!store.defaultPresetId) {
+		return null
+	}
+	return store.presets.find((preset) => preset.id === store.defaultPresetId) ?? null
+}
+
+function isValidColPriority(priority) {
+	return Number.isInteger(priority) && priority >= 1 && priority <= 5
+}
+
+function headerMaps(headers = []) {
+	const headerByKey = new Map()
+	const manageableKeys = []
+	const configurableKeys = []
+
+	for (const header of headers) {
+		if (!header?.key || header.hidden) {
+			continue
+		}
+		manageableKeys.push(header.key)
+		headerByKey.set(header.key, header)
+		if (header.hideable !== false) {
+			configurableKeys.push(header.key)
+		}
+	}
+
+	return { headerByKey, manageableKeys, configurableKeys }
+}
+
+export function sanitizePresetState(state, headers = [], rows = []) {
+	if (!state || typeof state !== 'object') {
+		return null
+	}
+
+	const { headerByKey, manageableKeys, configurableKeys } = headerMaps(headers)
+	const sanitized = {}
+
+	if (Array.isArray(state.columnOrder)) {
+		const fromOrder = state.columnOrder.filter((key) => manageableKeys.includes(key))
+		const missing = manageableKeys.filter((key) => !fromOrder.includes(key))
+		sanitized.columnOrder = [...fromOrder, ...missing]
+	}
+
+	if (state.columnVisibility && typeof state.columnVisibility === 'object') {
+		sanitized.columnVisibility = Object.fromEntries(
+			configurableKeys.map((key) => [
+				key,
+				state.columnVisibility[key] !== false,
+			]),
+		)
+	}
+
+	if (state.columnPriorities && typeof state.columnPriorities === 'object') {
+		const priorities = {}
+		for (const [key, value] of Object.entries(state.columnPriorities)) {
+			if (!manageableKeys.includes(key)) {
+				continue
+			}
+			if (value === null || value === '') {
+				priorities[key] = null
+				continue
+			}
+			if (isValidColPriority(value)) {
+				priorities[key] = value
+			}
+		}
+		sanitized.columnPriorities = priorities
+	}
+
+	if (state.filters && typeof state.filters === 'object') {
+		const filters = {}
+		for (const [key, columnFilters] of Object.entries(state.filters)) {
+			const header = headerByKey.get(key)
+			if (!header || header.filterable === false) {
+				continue
+			}
+			const entries = normalizeColumnFilterEntries(columnFilters, header, rows)
+				.map((entry) => normalizeStoredFilterEntry(header, entry, rows))
+				.filter(Boolean)
+			if (entries.length > 0) {
+				filters[key] = entries
+			}
+		}
+		sanitized.filters = filters
+	}
+
+	if (state.sortBy) {
+		const header = headerByKey.get(state.sortBy)
+		if (header?.sortable) {
+			sanitized.sortBy = state.sortBy
+			sanitized.sortDir = state.sortDir === 'desc' ? 'desc' : 'asc'
+		}
+	}
+
+	const rawPageSize = Number(state.pageSize)
+	if (Number.isFinite(rawPageSize)) {
+		const normalizedPageSize = Math.floor(rawPageSize)
+		if (ALLOWED_PAGE_SIZES.includes(normalizedPageSize)) {
+			sanitized.pageSize = normalizedPageSize
+		}
+	}
+
+	return sanitized
+}
+
+export function savePreset(tableId, { name, state, setAsDefault = false }) {
+	const trimmedName = String(name ?? '').trim()
+	if (!tableId) {
+		return { ok: false, error: 'Table identity is required.' }
+	}
+	if (!trimmedName) {
+		return { ok: false, error: 'Preset name is required.' }
+	}
+	if (!state || typeof state !== 'object') {
+		return { ok: false, error: 'Nothing to save.' }
+	}
+
+	const store = readPresetStore(tableId)
+	if (store.presets.length >= MAX_PRESETS_PER_TABLE) {
+		return { ok: false, error: `Maximum of ${MAX_PRESETS_PER_TABLE} saved layouts reached.` }
+	}
+
+	const preset = {
+		id: createPresetId(),
+		name: trimmedName,
+		savedAt: new Date().toISOString(),
+		state: JSON.parse(JSON.stringify(state)),
+	}
+
+	store.presets.push(preset)
+	if (setAsDefault) {
+		store.defaultPresetId = preset.id
+	}
+
+	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.' }
+	}
+
+	const store = readPresetStore(tableId)
+	const nextPresets = store.presets.filter((preset) => preset.id !== presetId)
+	if (nextPresets.length === store.presets.length) {
+		return { ok: false, error: 'Preset not found.' }
+	}
+
+	store.presets = nextPresets
+	if (store.defaultPresetId === presetId) {
+		store.defaultPresetId = null
+	}
+
+	writePresetStore(tableId, store)
+	return { ok: true, defaultPresetId: store.defaultPresetId }
+}
+
+export function setDefaultPreset(tableId, presetId) {
+	if (!tableId) {
+		return { ok: false, error: 'Table identity is required.' }
+	}
+
+	const store = readPresetStore(tableId)
+	if (presetId === null) {
+		store.defaultPresetId = null
+		writePresetStore(tableId, store)
+		return { ok: true, defaultPresetId: null }
+	}
+
+	const preset = store.presets.find((item) => item.id === presetId)
+	if (!preset) {
+		return { ok: false, error: 'Preset not found.' }
+	}
+
+	store.defaultPresetId = presetId
+	writePresetStore(tableId, store)
+	return { ok: true, defaultPresetId: presetId }
+}
+
+export function getPresetById(tableId, presetId) {
+	const store = readPresetStore(tableId)
+	return store.presets.find((preset) => preset.id === presetId) ?? null
+}
+
+export function cloneLayoutState(state) {
+	return JSON.parse(JSON.stringify(state ?? {}))
+}
+
+export function normalizeLayoutStateForCompare(state, headers = [], rows = []) {
+	const sanitized = sanitizePresetState(state, headers, rows) ?? {}
+
+	return {
+		columnOrder: sanitized.columnOrder ?? [],
+		columnVisibility: sanitized.columnVisibility ?? {},
+		columnPriorities: sanitized.columnPriorities ?? {},
+		filters: sanitized.filters ?? {},
+		sortBy: sanitized.sortBy ?? null,
+		sortDir: sanitized.sortDir === 'desc' ? 'desc' : 'asc',
+		pageSize: sanitized.pageSize ?? ALLOWED_PAGE_SIZES[0],
+	}
+}
+
+export function layoutStatesEqual(left, right, headers = [], rows = []) {
+	return JSON.stringify(normalizeLayoutStateForCompare(left, headers, rows))
+		=== JSON.stringify(normalizeLayoutStateForCompare(right, headers, rows))
+}

package/vue/composables/tableFilterQuery.js

@@ -0,0 +1,202 @@
+import {
+	applyColumnFilter,
+	filterEntrySpec,
+	isFilterActive,
+	isFilterEntryActive,
+	normalizeColumnFilterEntries,
+	normalizeFilter,
+} from './tableFilters.js'
+
+export const FILTER_QUERY_VERSION = 1
+
+/** @see docs/filter-query-v1.md */
+
+export function createEmptyFilterQuery() {
+	return {
+		version: FILTER_QUERY_VERSION,
+		match: 'all',
+		columns: [],
+	}
+}
+
+function normalizeFilterSpec(entry, header, rows) {
+	if (!entry || typeof entry !== 'object') {
+		return null
+	}
+
+	const { id, name, enabled, ...partial } = entry
+	const filter = normalizeFilter(header, partial, rows)
+	if (!filter) {
+		return null
+	}
+
+	return {
+		id: typeof id === 'string' ? id : undefined,
+		name: typeof name === 'string' ? name : '',
+		enabled: enabled !== false,
+		...filter,
+	}
+}
+
+export function normalizeFilterQuery(filterQuery, headers = [], rows = []) {
+	if (!filterQuery || typeof filterQuery !== 'object') {
+		return createEmptyFilterQuery()
+	}
+
+	const headerByKey = new Map(
+		headers
+			.filter((header) => header?.key)
+			.map((header) => [header.key, header]),
+	)
+
+	const columns = Array.isArray(filterQuery.columns)
+		? filterQuery.columns
+			.map((column) => {
+				if (!column?.key || !headerByKey.has(column.key)) {
+					return null
+				}
+
+				const header = headerByKey.get(column.key)
+				if (header.filterable === false) {
+					return null
+				}
+
+				const filters = Array.isArray(column.filters)
+					? column.filters
+						.map((entry) => normalizeFilterSpec(entry, header, rows))
+						.filter(Boolean)
+					: []
+
+				if (filters.length === 0) {
+					return null
+				}
+
+				return {
+					key: column.key,
+					match: column.match === 'any' ? 'any' : 'all',
+					filters,
+				}
+			})
+			.filter(Boolean)
+		: []
+
+	return {
+		version: FILTER_QUERY_VERSION,
+		match: filterQuery.match === 'any' ? 'any' : 'all',
+		columns,
+	}
+}
+
+export function buildFilterQuery(filters = {}, headers = [], rows = [], { includeInactive = true } = {}) {
+	const headerByKey = new Map(
+		headers
+			.filter((header) => header?.key)
+			.map((header) => [header.key, header]),
+	)
+
+	const columns = []
+
+	for (const [key, columnFilters] of Object.entries(filters ?? {})) {
+		const header = headerByKey.get(key)
+		if (!header || header.filterable === false) {
+			continue
+		}
+
+		const entries = normalizeColumnFilterEntries(columnFilters, header, rows)
+			.map((entry) => normalizeFilterSpec(entry, header, rows))
+			.filter(Boolean)
+			.filter((entry) => includeInactive || isFilterEntryActive(entry))
+
+		if (entries.length === 0) {
+			continue
+		}
+
+		columns.push({
+			key,
+			match: 'all',
+			filters: entries,
+		})
+	}
+
+	return {
+		version: FILTER_QUERY_VERSION,
+		match: 'all',
+		columns,
+	}
+}
+
+export function filterQueryToFilters(filterQuery, headers = [], rows = []) {
+	const normalized = normalizeFilterQuery(filterQuery, headers, rows)
+	const filters = {}
+
+	for (const column of normalized.columns) {
+		filters[column.key] = column.filters.map((entry) => ({ ...entry }))
+	}
+
+	return filters
+}
+
+function applyColumnFilterQuery(row, header, columnQuery) {
+	const activeFilters = (columnQuery.filters ?? [])
+		.filter((entry) => entry.enabled !== false)
+		.map((entry) => filterEntrySpec(entry))
+		.filter((filter) => isFilterActive(filter))
+
+	if (activeFilters.length === 0) {
+		return true
+	}
+
+	if (columnQuery.match === 'any') {
+		return activeFilters.some((filter) => applyColumnFilter(row, header, filter))
+	}
+
+	return activeFilters.every((filter) => applyColumnFilter(row, header, filter))
+}
+
+export function applyFilterQuery(rows, headers = [], filterQuery) {
+	const normalized = normalizeFilterQuery(filterQuery, headers, rows)
+	if (normalized.columns.length === 0) {
+		return rows
+	}
+
+	const headerByKey = new Map(
+		headers
+			.filter((header) => header?.key)
+			.map((header) => [header.key, header]),
+	)
+
+	return rows.filter((row) => {
+		const columnResults = normalized.columns.map((column) => {
+			const header = headerByKey.get(column.key)
+			if (!header) {
+				return true
+			}
+			return applyColumnFilterQuery(row, header, column)
+		})
+
+		if (normalized.match === 'any') {
+			return columnResults.some(Boolean)
+		}
+
+		return columnResults.every(Boolean)
+	})
+}
+
+export function countActiveFilterQuery(filterQuery, headers = [], rows = []) {
+	const normalized = normalizeFilterQuery(filterQuery, headers, rows)
+	let total = 0
+
+	for (const column of normalized.columns) {
+		total += column.filters.filter((entry) => isFilterEntryActive(entry)).length
+	}
+
+	return total
+}
+
+export function isFilterQueryActive(filterQuery, headers = [], rows = []) {
+	return countActiveFilterQuery(filterQuery, headers, rows) > 0
+}
+
+export function cloneFilterQuery(filterQuery) {
+	return JSON.parse(JSON.stringify(filterQuery ?? createEmptyFilterQuery()))
+}