picocrank 1.24.0 → 1.25.1

package/vue/components/Tabs.vue

@@ -146,7 +146,7 @@ defineExpose({
 	border-radius: 0;
 	cursor: pointer;
 	font-size: 1em;
-	color: var(--text-muted, #666);
+	color: var(--tab-fg);
 	transition: all 0.2s ease;
 	white-space: nowrap;
 	position: relative;
@@ -158,13 +158,13 @@ defineExpose({
 }
 
 .tab-button.active {
-	color: var(--primary-color, #007bff);
-	border-bottom-color: var(--primary-color, #007bff);
+	color: var(--tab-active-fg);
+	border-bottom-color: var(--tab-active-fg);
 	font-weight: bold;
 }
 
 .tab-button:focus {
-	outline: 2px solid var(--primary-color, #007bff);
+	outline: 2px solid var(--tab-focus-outline-color);
 	outline-offset: -2px;
 	border-radius: 0;
 }
@@ -196,27 +196,6 @@ defineExpose({
 	}
 }
 
-/* Dark theme support */
-html[data-theme="dark"] {
-	.tabs-header {
-		border-bottom-color: var(--border-color, #444);
-	}
-
-	.tab-button {
-		color: var(--text-muted, #999);
-	}
-
-	.tab-button:hover {
-		color: var(--text-color, #fff);
-		background-color: var(--hover-background-color, #333);
-	}
-
-	.tab-button.active {
-		color: var(--primary-color, #60a5fa);
-		border-bottom-color: var(--primary-color, #60a5fa);
-	}
-}
-
 /* Responsive */
 @media (max-width: 768px) {
 	.tabs-header {

package/vue/components/ThemeSwitcher.vue

@@ -0,0 +1,158 @@
+<template>
+	<label :class="['theme-switcher', { 'theme-switcher--compact': compact }]">
+		<span v-if="label" class="theme-switcher-label">{{ label }}</span>
+		<select
+			ref="selectRef"
+			:id="selectId || undefined"
+			:value="themePreference"
+			:aria-label="compact ? (label || 'Active theme') : undefined"
+			@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 && !compact && 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>
+export const HEADER_THEME_SWITCHER_SELECT_ID = 'picocrank-header-theme-switcher'
+</script>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { useCustomTheme } from '../composables/useCustomTheme.js'
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: 'Active theme',
+	},
+	defaultOptionLabel: {
+		type: String,
+		default: 'Default (Femtocrank only)',
+	},
+	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,
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
+	selectId: {
+		type: String,
+		default: undefined,
+	},
+})
+
+const emit = defineEmits(['change'])
+
+const {
+	availableThemes,
+	themeLabels,
+	themePreference,
+	setTheme,
+	discoverThemes,
+	configure,
+} = useCustomTheme()
+
+const selectRef = ref(null)
+
+function focusSelect() {
+	selectRef.value?.focus()
+	selectRef.value?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
+
+defineExpose({
+	focus: focusSelect,
+})
+
+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--compact {
+	flex-wrap: nowrap;
+	gap: 0;
+}
+
+.theme-switcher--compact select {
+	min-width: 10rem;
+	max-width: 13.5rem;
+}
+
+.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-fg-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-fg-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))
+}