picocrank 1.24.0 → 1.25.1

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()))
+}

package/vue/composables/tableFilters.js

@@ -1,7 +1,37 @@
 const TEXT_OPERATORS = ['contains', 'equals', 'startsWith', 'empty']
 const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte']
 
+const TEXT_OPERATOR_LABELS = {
+	contains: 'Contains',
+	equals: 'Equals',
+	startsWith: 'Starts with',
+	empty: 'Is empty',
+}
+
+const NUMBER_OPERATOR_LABELS = {
+	eq: 'Equals',
+	gt: 'Greater than',
+	gte: 'Greater or equal',
+	lt: 'Less than',
+	lte: 'Less or equal',
+}
+
+let filterIdCounter = 0
+
+export function createFilterId() {
+	if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+		return `filter-${crypto.randomUUID()}`
+	}
+
+	filterIdCounter += 1
+	return `filter-${filterIdCounter}-${Date.now()}`
+}
+
 export function inferFilterType(header, rows = []) {
+	if (!header) {
+		return 'text'
+	}
+
 	if (header.filterType) {
 		return header.filterType
 	}
@@ -85,6 +115,101 @@ export function normalizeFilter(header, partial, rows = []) {
 	}
 }
 
+export function filterEntrySpec(entry) {
+	if (!entry || typeof entry !== 'object') {
+		return null
+	}
+
+	const { id, name, enabled, ...filter } = entry
+	return filter
+}
+
+export function normalizeStoredFilterEntry(header, entry, 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: id || createFilterId(),
+		name: typeof name === 'string' ? name : '',
+		enabled: enabled !== false,
+		...filter,
+	}
+}
+
+export function normalizeColumnFilterEntries(value, header = null, rows = []) {
+	if (!value) {
+		return []
+	}
+
+	if (Array.isArray(value)) {
+		return value
+			.map((entry) => normalizeStoredFilterEntry(header, entry, rows))
+			.filter(Boolean)
+	}
+
+	if (typeof value === 'object' && value.type) {
+		const filter = header ? normalizeFilter(header, value, rows) : value
+		if (!filter || !isFilterActive(filter)) {
+			return []
+		}
+
+		return [{
+			id: value.id || createFilterId(),
+			name: typeof value.name === 'string' ? value.name : '',
+			enabled: value.enabled !== false,
+			...filter,
+		}]
+	}
+
+	return []
+}
+
+export function createFilterEntry(header, partial, rows = [], { name = '' } = {}) {
+	const filter = normalizeFilter(header, partial, rows)
+	if (!filter) {
+		return null
+	}
+
+	return {
+		id: createFilterId(),
+		name: typeof name === 'string' ? name.trim() : '',
+		enabled: true,
+		...filter,
+	}
+}
+
+export function describeFilter(header, entry) {
+	const filter = filterEntrySpec(entry)
+	if (!filter) {
+		return 'Filter'
+	}
+
+	const label = header?.label || header?.key || 'Column'
+
+	switch (filter.type) {
+		case 'text':
+			if (filter.operator === 'empty') {
+				return `${label} is empty`
+			}
+			return `${TEXT_OPERATOR_LABELS[filter.operator] || 'Contains'} “${filter.value}”`
+		case 'number':
+			return `${NUMBER_OPERATOR_LABELS[filter.operator] || 'Equals'} ${filter.value}`
+		case 'boolean':
+			return filter.value ? 'Yes' : 'No'
+		case 'select':
+			return `${filter.values.length} selected`
+		default:
+			return 'Filter'
+	}
+}
+
 export function isFilterActive(filter) {
 	if (!filter) {
 		return false
@@ -104,6 +229,29 @@ export function isFilterActive(filter) {
 	}
 }
 
+export function isFilterEntryActive(entry) {
+	return entry?.enabled !== false && isFilterActive(filterEntrySpec(entry))
+}
+
+export function isColumnFiltered(columnValue, header = null, rows = []) {
+	return normalizeColumnFilterEntries(columnValue, header, rows)
+		.some((entry) => isFilterEntryActive(entry))
+}
+
+export function countActiveFilters(filters = {}, headers = [], rows = []) {
+	const headerByKey = new Map(headers.map((header) => [header.key, header]))
+	let total = 0
+
+	for (const [key, value] of Object.entries(filters ?? {})) {
+		const header = headerByKey.get(key) ?? { key }
+		total += normalizeColumnFilterEntries(value, header, rows)
+			.filter((entry) => isFilterEntryActive(entry))
+			.length
+	}
+
+	return total
+}
+
 function compareText(value, filter) {
 	const text = value == null ? '' : String(value)
 	const needle = String(filter.value ?? '')
@@ -166,6 +314,18 @@ export function applyColumnFilter(row, header, filter) {
 	}
 }
 
+export function applyColumnFilterEntries(row, header, entries) {
+	const activeFilters = normalizeColumnFilterEntries(entries, header)
+		.filter((entry) => isFilterEntryActive(entry))
+		.map((entry) => filterEntrySpec(entry))
+
+	if (activeFilters.length === 0) {
+		return true
+	}
+
+	return activeFilters.every((filter) => applyColumnFilter(row, header, filter))
+}
+
 export function applyFilters(rows, headers, filters) {
 	if (!filters || Object.keys(filters).length === 0) {
 		return rows
@@ -174,12 +334,12 @@ export function applyFilters(rows, headers, filters) {
 	const headerByKey = new Map(headers.map((header) => [header.key, header]))
 
 	return rows.filter((row) => {
-		for (const [key, filter] of Object.entries(filters)) {
+		for (const [key, columnFilters] of Object.entries(filters)) {
 			const header = headerByKey.get(key)
-			if (!header || !isFilterActive(filter)) {
+			if (!header) {
 				continue
 			}
-			if (!applyColumnFilter(row, header, filter)) {
+			if (!applyColumnFilterEntries(row, header, columnFilters)) {
 				return false
 			}
 		}
@@ -223,6 +383,10 @@ export function cloneFilters(filters = {}) {
 	return JSON.parse(JSON.stringify(filters ?? {}))
 }
 
+export function cloneColumnFilterEntries(value, header = null, rows = []) {
+	return normalizeColumnFilterEntries(value, header, rows).map((entry) => ({ ...entry }))
+}
+
 export function sortRows(rows, sortBy, sortDir) {
 	if (!sortBy) {
 		return [...rows]

package/vue/composables/useCustomTheme.js

@@ -3,30 +3,92 @@ import { ref, watch } from 'vue'
 const STYLE_ELEMENT_ID = 'theme-style'
 const DEFAULT_STORAGE_KEY = 'picocrank-custom-theme'
 
-function resolveDefaultBasePath() {
+export const SUPPLEMENTAL_THEME_NAMES = [
+	'catppuccin-latte-frappe',
+	'dracula-alucard',
+	'gruvbox-dark-light',
+	'waffles',
+]
+
+const LEGACY_THEME_ALIASES = {
+	catppuccin: 'catppuccin-latte-frappe',
+	dracula: 'dracula-alucard',
+}
+
+function resolveDefaultBasePath(segment) {
 	try {
 		const base = import.meta.env?.BASE_URL || '/'
-		const joined = base.endsWith('/') ? `${base}themes` : `${base}/themes`
-		return joined.replace(/\/$/, '') || '/themes'
+		const joined = base.endsWith('/') ? `${base}${segment}` : `${base}/${segment}`
+		return joined.replace(/\/$/, '') || `/${segment}`
 	} catch {
-		return '/themes'
+		return `/${segment}`
 	}
 }
 
-const DEFAULT_BASE_PATH = resolveDefaultBasePath()
+const DEFAULT_THEMES_BASE_PATH = resolveDefaultBasePath('themes')
+const DEFAULT_SUPPLEMENTAL_THEMES_BASE_PATH = resolveDefaultBasePath('supplemental-themes')
 
 const availableThemes = ref([])
+const themeLabels = ref({})
 const themePreference = ref('')
-const themesBasePath = ref(DEFAULT_BASE_PATH)
+const themesBasePath = ref(DEFAULT_THEMES_BASE_PATH)
+const supplementalThemesBasePath = ref(DEFAULT_SUPPLEMENTAL_THEMES_BASE_PATH)
 const storageKey = ref(DEFAULT_STORAGE_KEY)
+const includeSupplementalThemes = ref(false)
+const supplementalThemeNames = ref([...SUPPLEMENTAL_THEME_NAMES])
 let initialized = false
 
-function normalizeBasePath(basePath) {
+function normalizeBasePath(basePath, fallback) {
 	if (!basePath || typeof basePath !== 'string') {
-		return DEFAULT_BASE_PATH
+		return fallback
 	}
 	const trimmed = basePath.replace(/\/$/, '')
-	return trimmed || DEFAULT_BASE_PATH
+	return trimmed || fallback
+}
+
+function normalizeStoredThemeName(name) {
+	if (!name) {
+		return ''
+	}
+	return LEGACY_THEME_ALIASES[name] || name
+}
+
+function normalizeThemeEntry(entry) {
+	if (typeof entry === 'string' && entry.length > 0) {
+		return { id: entry, label: entry }
+	}
+	if (entry && typeof entry.id === 'string' && entry.id.length > 0) {
+		return {
+			id: entry.id,
+			label: typeof entry.label === 'string' && entry.label.length > 0 ? entry.label : entry.id,
+		}
+	}
+	return null
+}
+
+function mergeThemeEntries(entries) {
+	const ids = []
+	const labels = {}
+
+	for (const entry of entries) {
+		const normalized = normalizeThemeEntry(entry)
+		if (!normalized) {
+			continue
+		}
+		ids.push(normalized.id)
+		if (normalized.label !== normalized.id) {
+			labels[normalized.id] = normalized.label
+		}
+	}
+
+	return {
+		ids: [...new Set(ids)].sort((a, b) => a.localeCompare(b)),
+		labels,
+	}
+}
+
+function isSupplementalThemeName(name) {
+	return supplementalThemeNames.value.includes(name)
 }
 
 function readStoredTheme(key) {
@@ -36,6 +98,10 @@ function readStoredTheme(key) {
 	return localStorage.getItem(key) || ''
 }
 
+function readStoredThemePreference(key) {
+	return normalizeStoredThemeName(readStoredTheme(key))
+}
+
 function persistTheme(key, value) {
 	if (typeof localStorage === 'undefined') {
 		return
@@ -61,6 +127,18 @@ function ensureStyleElement() {
 	return themeStyle
 }
 
+function isSupplementalTheme(name) {
+	return includeSupplementalThemes.value
+		&& isSupplementalThemeName(name)
+}
+
+function themeStylesheetHref(name) {
+	const basePath = isSupplementalThemeName(name)
+		? supplementalThemesBasePath.value
+		: themesBasePath.value
+	return `${basePath}/${encodeURIComponent(name)}/theme.css`
+}
+
 function applyTheme() {
 	const themeStyle = ensureStyleElement()
 	if (!themeStyle) {
@@ -73,38 +151,74 @@ function applyTheme() {
 		return
 	}
 
-	const href = `${themesBasePath.value}/${encodeURIComponent(name)}/theme.css`
+	if (isSupplementalThemeName(name) && !includeSupplementalThemes.value) {
+		themeStyle.textContent = ''
+		return
+	}
+
+	const href = themeStylesheetHref(name)
 	themeStyle.textContent = `@import url('${href}') layer(theme);`
 }
 
 function setTheme(name) {
-	themePreference.value = name || ''
+	const nextName = normalizeStoredThemeName(name || '')
+	if (nextName && isSupplementalThemeName(nextName) && !includeSupplementalThemes.value) {
+		themePreference.value = ''
+		return
+	}
+	themePreference.value = nextName
 }
 
 function clearTheme() {
 	setTheme('')
 }
 
-async function discoverThemes() {
+function clearStoredSupplementalThemeIfDisabled() {
+	if (
+		themePreference.value
+		&& isSupplementalThemeName(themePreference.value)
+		&& !includeSupplementalThemes.value
+	) {
+		themePreference.value = ''
+	}
+}
+
+async function fetchThemeIndex(basePath) {
 	if (typeof fetch === 'undefined') {
-		availableThemes.value = []
-		return availableThemes.value
+		return []
 	}
 
-	const indexUrl = `${themesBasePath.value}/index.json`
+	const indexUrl = `${basePath}/index.json`
 	try {
 		const response = await fetch(indexUrl, { cache: 'no-store' })
 		if (!response.ok) {
-			availableThemes.value = []
-			return availableThemes.value
+			return []
 		}
 		const data = await response.json()
-		const themes = Array.isArray(data?.themes)
-			? data.themes.filter((theme) => typeof theme === 'string' && theme.length > 0)
-			: []
-		availableThemes.value = themes.sort((a, b) => a.localeCompare(b))
+		return Array.isArray(data?.themes) ? data.themes : []
 	} catch {
-		availableThemes.value = []
+		return []
+	}
+}
+
+async function discoverThemes() {
+	const userThemes = mergeThemeEntries(await fetchThemeIndex(themesBasePath.value))
+	let ids = [...userThemes.ids]
+	let labels = { ...userThemes.labels }
+
+	if (includeSupplementalThemes.value) {
+		const supplementalThemes = mergeThemeEntries(await fetchThemeIndex(supplementalThemesBasePath.value))
+		ids = [...ids, ...supplementalThemes.ids]
+		labels = { ...labels, ...supplementalThemes.labels }
+	}
+
+	availableThemes.value = [...new Set(ids)].sort((a, b) => a.localeCompare(b))
+	themeLabels.value = labels
+
+	clearStoredSupplementalThemeIfDisabled()
+
+	if (themePreference.value && !availableThemes.value.includes(themePreference.value)) {
+		themePreference.value = ''
 	}
 
 	return availableThemes.value
@@ -112,11 +226,24 @@ async function discoverThemes() {
 
 function configure(options = {}) {
 	if (options.themesBasePath !== undefined) {
-		themesBasePath.value = normalizeBasePath(options.themesBasePath)
+		themesBasePath.value = normalizeBasePath(options.themesBasePath, DEFAULT_THEMES_BASE_PATH)
+	}
+	if (options.supplementalThemesBasePath !== undefined) {
+		supplementalThemesBasePath.value = normalizeBasePath(
+			options.supplementalThemesBasePath,
+			DEFAULT_SUPPLEMENTAL_THEMES_BASE_PATH,
+		)
 	}
 	if (options.storageKey !== undefined && typeof options.storageKey === 'string' && options.storageKey) {
 		storageKey.value = options.storageKey
 	}
+	if (options.includeSupplementalThemes !== undefined) {
+		includeSupplementalThemes.value = Boolean(options.includeSupplementalThemes)
+	}
+	if (Array.isArray(options.supplementalThemeNames)) {
+		supplementalThemeNames.value = options.supplementalThemeNames
+			.filter((theme) => typeof theme === 'string' && theme.length > 0)
+	}
 	if (Array.isArray(options.availableThemes)) {
 		availableThemes.value = options.availableThemes
 			.filter((theme) => typeof theme === 'string' && theme.length > 0)
@@ -128,11 +255,21 @@ function initCustomTheme(options = {}) {
 	configure(options)
 
 	if (!initialized) {
-		themePreference.value = readStoredTheme(storageKey.value)
+		const storedTheme = readStoredThemePreference(storageKey.value)
+		if (storedTheme !== readStoredTheme(storageKey.value)) {
+			persistTheme(storageKey.value, storedTheme)
+		}
+		themePreference.value = storedTheme
+		clearStoredSupplementalThemeIfDisabled()
 		watch(themePreference, (value) => {
 			persistTheme(storageKey.value, value)
 			applyTheme()
 		})
+		watch(includeSupplementalThemes, () => {
+			void discoverThemes()
+			clearStoredSupplementalThemeIfDisabled()
+			applyTheme()
+		})
 		initialized = true
 	}
 
@@ -147,15 +284,21 @@ export function useCustomTheme(options) {
 
 	return {
 		availableThemes,
+		themeLabels,
 		themePreference,
 		themesBasePath,
+		supplementalThemesBasePath,
 		storageKey,
+		includeSupplementalThemes,
+		supplementalThemeNames,
 		applyTheme,
 		setTheme,
 		clearTheme,
 		discoverThemes,
 		configure,
 		initCustomTheme,
+		isSupplementalTheme,
+		isSupplementalThemeName,
 	}
 }
 

package/vue/data/examplePeople.js

@@ -35,11 +35,7 @@ export const examplePeople = [
 	{ name: 'George', age: 29, city: 'Miami' },
 ]
 
-/** Longer list matching the previous table example volume (with repeats for pagination). */
+/** Example table rows — the full unique people list. */
 export function getExampleTableRows() {
-	return [
-		...examplePeople,
-		...examplePeople.slice(7),
-		...examplePeople.slice(7, 22),
-	]
+	return [...examplePeople]
 }