picocrank 1.23.1 → 1.25.0

package/vue/examples/TableExample.vue

@@ -1,17 +1,24 @@
 <template>
 	<Section
 		title="Table Example"
+		:icon="TableIcon"
 		subtitle="Sortable columns, pagination, and column filters. Right-click or long-press a column header to filter."
 		:padding="false"
 	>
-		<template #toolbar>
-			<button>Add Item</button>
-		</template>
-
 		<Table
-			:data="data"
+			table-id="table-example"
+			row-key="name"
+			:data="tableData"
 			:headers="headers"
-			:show-pagination="true"
+			:show-pagination="enabledFeatures.includes('pagination')"
+			:filterable="enabledFeatures.includes('filters')"
+			:column-options="enabledFeatures.includes('columnOptions')"
+			:loading="enabledFeatures.includes('loading')"
+			:horizontal-scroll="layout === 'scroll'"
+			:sticky-cols="stickyCols"
+			v-model:column-visibility="columnVisibility"
+			:default-column-visibility="defaultColumnVisibility"
+			v-bind="tableListeners"
 		>
 			<template #cell-name="{ row, value }">
 				<router-link :to="{ name: 'ViewItem', params: { id: row.name } }">
@@ -24,23 +31,334 @@
 					{{ value }}
 				</span>
 			</template>
+
+			<template #cell-status="{ value }">
+				<span class="tag fg-good">{{ value }}</span>
+			</template>
 		</Table>
 	</Section>
+
+	<Section
+		title="Explore table options"
+		:icon="Settings01Icon"
+		subtitle="Adjust layout and behaviour for the table above."
+	>
+		<template #toolbar>
+			<button type="button" @click="resetControls">Reset options</button>
+		</template>
+
+		<FormLayout>
+			<FormField label="Data" fake description="Connect or disconnect row data for the table above. Saved column layouts persist in localStorage for this table.">
+				<div class="table-data-actions">
+					<button type="button" :disabled="dataConnected" @click="dataConnected = true">
+						Connect data
+					</button>
+					<button type="button" class="neutral" :disabled="!dataConnected" @click="dataConnected = false">
+						Disconnect data
+					</button>
+				</div>
+			</FormField>
+
+			<FormField label="Features" fake description="Toggle core table behaviour.">
+				<CheckGroup
+					v-model="enabledFeatures"
+					name="table-features"
+					:options="featureOptions"
+				/>
+			</FormField>
+
+			<FormField
+				label="Responsive layout"
+				fake
+				description="Column priorities hide lower-priority columns as the table narrows. Horizontal scroll keeps every column visible with optional sticky leading columns."
+			>
+				<RadioGroup
+					v-model="layout"
+					name="table-layout"
+					:options="layoutOptions"
+				/>
+			</FormField>
+
+			<FormField
+				v-if="layout === 'scroll'"
+				label="Sticky columns"
+				fake
+				description="Pin the first columns while scrolling horizontally."
+			>
+				<RadioGroup
+					v-model="stickyColsOption"
+					name="table-sticky-cols"
+					:options="stickyColOptions"
+				/>
+			</FormField>
+
+			<FormField
+				v-if="layout === 'scroll'"
+				label="Wide table"
+				fake
+				description="Adds extra columns so horizontal scroll is easier to see."
+			>
+				<label>
+					<input v-model="wideTable" type="checkbox" />
+					Show extended columns
+				</label>
+			</FormField>
+		</FormLayout>
+
+		<div class="table-events">
+			<h4>Events</h4>
+			<p v-if="lastRowClick" class="event-line">
+				<strong>Row click:</strong>
+				index {{ lastRowClick.index }}, name “{{ lastRowClick.row.name }}”
+			</p>
+			<p v-else class="event-line subtle">Row click: enable “Row click” above, then click a row to open the detail dialog.</p>
+
+			<p v-if="lastQuery" class="event-line">
+				<strong>Query:</strong>
+				page {{ lastQuery.page }},
+				sort {{ lastQuery.sortBy ?? 'none' }} {{ lastQuery.sortDir }},
+				{{ activeFilterCount }} active filter(s)
+			</p>
+			<p v-else class="event-line subtle">Query: waiting for the first table update…</p>
+		</div>
+	</Section>
+
+	<dialog
+		ref="rowDialogRef"
+		class="row-detail-dialog"
+		@click="onRowDialogBackdropClick"
+	>
+		<div v-if="lastRowClick" class="dialog-panel" @click.stop>
+			<h3>{{ lastRowClick.row.name }}</h3>
+			<p class="subtle">Row index {{ lastRowClick.index }} in the current filtered and sorted result set.</p>
+
+			<dl>
+				<dt>Index</dt>
+				<dd>{{ lastRowClick.index }}</dd>
+
+				<template v-for="header in headers" :key="header.key">
+					<dt>{{ header.label || header.key }}</dt>
+					<dd>
+						<span v-if="header.key === 'status'" class="tag fg-good">
+							{{ lastRowClick.row[header.key] }}
+						</span>
+						<template v-else>
+							{{ lastRowClick.row[header.key] }}
+						</template>
+					</dd>
+				</template>
+			</dl>
+
+			<form method="dialog">
+				<button type="submit" class="neutral">Close</button>
+			</form>
+		</div>
+	</dialog>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { TableIcon, Settings01Icon } from '@hugeicons/core-free-icons'
 import { getExampleTableRows } from '../data/examplePeople.js'
+import { countActiveFilters } from '../composables/tableFilters.js'
+
+const defaultFeatures = ['pagination', 'filters', 'columnOptions', 'rowClick']
 
-const headers = ref([
-	{ key: 'name', label: 'Name', sortable: true, filterable: true, filterType: 'text', hidden: false, width: '20%' },
+const defaultColumnVisibility = {
+	birthYear: false,
+}
+
+const enabledFeatures = ref([...defaultFeatures])
+const columnVisibility = ref({ ...defaultColumnVisibility })
+const layout = ref('default')
+const stickyColsOption = ref('2')
+const wideTable = ref(true)
+const dataConnected = ref(true)
+const data = ref([])
+const lastRowClick = ref(null)
+const lastQuery = ref(null)
+const rowDialogRef = ref(null)
+
+const featureOptions = [
+	{ value: 'pagination', label: 'Pagination' },
+	{ value: 'filters', label: 'Column filters' },
+	{ value: 'columnOptions', label: 'Column options' },
+	{ value: 'rowClick', label: 'Row click' },
+	{ value: 'loading', label: 'Loading state' },
+]
+
+const layoutOptions = [
+	{ value: 'default', label: 'Default' },
+	{ value: 'priorities', label: 'Column priorities' },
+	{ value: 'scroll', label: 'Horizontal scroll' },
+]
+
+const stickyColOptions = [
+	{ value: 'none', label: 'None' },
+	{ value: '1', label: '1 column' },
+	{ value: '2', label: '2 columns' },
+	{ value: '3', label: '3 columns' },
+]
+
+const baseHeaders = [
+	{ key: 'name', label: 'Name', sortable: true, filterable: true, filterType: 'text', width: '20%' },
 	{ key: 'age', label: 'Age', sortable: true, filterable: true, filterType: 'number' },
+	{ key: 'birthYear', label: 'Birth year', sortable: true, filterable: true, filterType: 'number' },
 	{ key: 'city', label: 'City', sortable: true, filterable: true, filterType: 'select', width: '200px' },
-])
+]
 
-const data = ref([])
+const extendedHeaders = [
+	{ key: 'email', label: 'Email', sortable: true, filterable: true, filterType: 'text' },
+	{ key: 'department', label: 'Department', sortable: true, filterable: true, filterType: 'select' },
+	{ key: 'role', label: 'Role', sortable: true, filterable: true, filterType: 'text' },
+	{ key: 'status', label: 'Status', sortable: true, filterable: true, filterType: 'select' },
+]
+
+const priorityByKey = {
+	age: 2,
+	birthYear: 3,
+	city: 1,
+	department: 2,
+	role: 1,
+	status: 1,
+}
+
+const stickyCols = computed(() => {
+	if (layout.value !== 'scroll' || stickyColsOption.value === 'none') {
+		return null
+	}
+	return Number(stickyColsOption.value)
+})
+
+const useExtendedColumns = computed(() => layout.value === 'scroll' && wideTable.value)
+
+const headers = computed(() => {
+	const columns = useExtendedColumns.value
+		? [...baseHeaders, ...extendedHeaders]
+		: [...baseHeaders]
+
+	if (layout.value !== 'priorities') {
+		return columns
+	}
+
+	return columns.map((header) => {
+		const colPriority = priorityByKey[header.key]
+		if (!colPriority) {
+			return { ...header }
+		}
+		return { ...header, colPriority }
+	})
+})
+
+const tableData = computed(() => {
+	if (!dataConnected.value) {
+		return []
+	}
+
+	const birthYear = new Date().getFullYear()
+
+	return data.value.map((row) => {
+		const withBirthYear = {
+			...row,
+			birthYear: birthYear - row.age,
+		}
+
+		if (!useExtendedColumns.value) {
+			return withBirthYear
+		}
+
+		return {
+			...withBirthYear,
+			email: `${String(row.name).toLowerCase()}@example.com`,
+			department: row.age >= 30 ? 'Operations' : 'Engineering',
+			role: row.age >= 35 ? 'Manager' : 'Member',
+			status: row.age % 2 === 0 ? 'Active' : 'Pending',
+		}
+	})
+})
+
+const activeFilterCount = computed(() => {
+	if (!lastQuery.value?.filters) {
+		return 0
+	}
+	return countActiveFilters(lastQuery.value.filters, headers.value, tableData.value)
+})
+
+const tableListeners = computed(() => {
+	const listeners = {
+		onQueryChange: handleQueryChange,
+	}
+	if (enabledFeatures.value.includes('rowClick')) {
+		listeners.onRowClick = handleRowClick
+	}
+	return listeners
+})
+
+function handleRowClick(payload) {
+	lastRowClick.value = payload
+	rowDialogRef.value?.showModal()
+}
+
+function onRowDialogBackdropClick(event) {
+	if (event.target === rowDialogRef.value) {
+		rowDialogRef.value.close()
+	}
+}
+
+function handleQueryChange(query) {
+	lastQuery.value = query
+}
+
+function resetControls() {
+	enabledFeatures.value = [...defaultFeatures]
+	columnVisibility.value = { ...defaultColumnVisibility }
+	layout.value = 'default'
+	stickyColsOption.value = '2'
+	wideTable.value = true
+	dataConnected.value = true
+	lastRowClick.value = null
+	if (rowDialogRef.value?.open) {
+		rowDialogRef.value.close()
+	}
+}
 
 onMounted(() => {
 	data.value = getExampleTableRows()
 })
 </script>
+
+<style scoped>
+.table-events {
+	margin-top: 1.5rem;
+}
+
+.table-data-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.table-events h4 {
+	margin-top: 0;
+}
+
+.event-line {
+	margin: 0.35rem 0;
+}
+
+.row-detail-dialog .dialog-panel h3 {
+	margin: 0 0 0.5rem;
+}
+
+.row-detail-dialog .dialog-panel p {
+	margin: 0 0 1rem;
+}
+
+.row-detail-dialog dl {
+	margin: 0 0 1rem;
+}
+
+.row-detail-dialog form {
+	margin: 0;
+}
+</style>

package/vue/examples/TableRemoteExample.vue

@@ -1,14 +1,17 @@
 <template>
 	<Section
 		title="Remote table"
-		subtitle="Server-style pagination with fetchRows. Filters, sort, and page changes are sent to the callback. Right-click or long-press a column header to filter."
+		:icon="CloudServerIcon"
+		subtitle="Server-style pagination with fetchRows. Filter queries, sort, and page changes are sent to the callback. Right-click or long-press a column header to filter. Layout save/load uses server callbacks instead of localStorage."
 		:padding="false"
 	>
 		<p v-if="lastQuerySummary" class="subtle query-summary">{{ lastQuerySummary }}</p>
 
 		<Table
+			row-key="name"
 			:headers="headers"
 			:fetch-rows="fetchRows"
+			:layout-presets="layoutPresets"
 			:show-pagination="true"
 			:remote-debounce-ms="250"
 		/>
@@ -17,8 +20,13 @@
 
 <script setup>
 import { ref } from 'vue'
+import { CloudServerIcon } from '@hugeicons/core-free-icons'
 import { getExampleTableRows } from '../data/examplePeople.js'
-import { applyFilters, sortRows } from '../composables/tableFilters.js'
+import {
+	applyFilterQuery,
+	countActiveFilterQuery,
+} from '../composables/tableFilterQuery.js'
+import { sortRows } from '../composables/tableFilters.js'
 
 const allRows = getExampleTableRows()
 
@@ -41,7 +49,107 @@ const headers = ref([
 
 const lastQuerySummary = ref('')
 
+const remoteLayoutStore = ref({
+	defaultPresetId: null,
+	presets: [],
+})
+
+let remotePresetCounter = 0
+
+function createRemotePresetId() {
+	remotePresetCounter += 1
+	return `remote-preset-${remotePresetCounter}`
+}
+
+const layoutPresets = {
+	async list() {
+		return {
+			presets: remoteLayoutStore.value.presets.map((preset) => ({ ...preset })),
+			defaultPresetId: remoteLayoutStore.value.defaultPresetId,
+		}
+	},
+
+	async getDefault() {
+		const { defaultPresetId, presets } = remoteLayoutStore.value
+		if (!defaultPresetId) {
+			return { ok: true, preset: null }
+		}
+
+		const preset = presets.find((item) => item.id === defaultPresetId) ?? null
+		return { ok: true, preset: preset ? { ...preset } : null }
+	},
+
+	async save({ name, state, setAsDefault = false }) {
+		const trimmedName = String(name ?? '').trim()
+		if (!trimmedName) {
+			return { ok: false, error: 'Preset name is required.' }
+		}
+
+		const preset = {
+			id: createRemotePresetId(),
+			name: trimmedName,
+			savedAt: new Date().toISOString(),
+			state: JSON.parse(JSON.stringify(state)),
+		}
+
+		remoteLayoutStore.value.presets = [...remoteLayoutStore.value.presets, preset]
+		if (setAsDefault) {
+			remoteLayoutStore.value.defaultPresetId = preset.id
+		}
+
+		console.info('[remote table] saved layout preset', preset)
+		return {
+			ok: true,
+			preset,
+			defaultPresetId: remoteLayoutStore.value.defaultPresetId,
+		}
+	},
+
+	async load(presetId) {
+		const preset = remoteLayoutStore.value.presets.find((item) => item.id === presetId)
+		if (!preset) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		console.info('[remote table] loaded layout preset', preset)
+		return { ok: true, preset: { ...preset } }
+	},
+
+	async delete(presetId) {
+		const nextPresets = remoteLayoutStore.value.presets.filter((item) => item.id !== presetId)
+		if (nextPresets.length === remoteLayoutStore.value.presets.length) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		remoteLayoutStore.value.presets = nextPresets
+		if (remoteLayoutStore.value.defaultPresetId === presetId) {
+			remoteLayoutStore.value.defaultPresetId = null
+		}
+
+		console.info('[remote table] deleted layout preset', presetId)
+		return { ok: true, defaultPresetId: remoteLayoutStore.value.defaultPresetId }
+	},
+
+	async setDefault(presetId) {
+		if (presetId === null) {
+			remoteLayoutStore.value.defaultPresetId = null
+			return { ok: true, defaultPresetId: null }
+		}
+
+		const preset = remoteLayoutStore.value.presets.find((item) => item.id === presetId)
+		if (!preset) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		remoteLayoutStore.value.defaultPresetId = presetId
+		console.info('[remote table] set default layout preset', presetId)
+		return { ok: true, defaultPresetId: presetId }
+	},
+}
+
 async function fetchRows(query, { signal } = {}) {
+	console.log('[remote table] filterQuery', query.filterQuery)
+
 	await new Promise((resolve, reject) => {
 		const timer = window.setTimeout(resolve, 200)
 		if (!signal) {
@@ -58,12 +166,12 @@ async function fetchRows(query, { signal } = {}) {
 		signal.addEventListener('abort', onAbort, { once: true })
 	})
 
-	const filtered = applyFilters(allRows, headers.value, query.filters)
+	const filtered = applyFilterQuery(allRows, headers.value, query.filterQuery)
 	const sorted = sortRows(filtered, query.sortBy, query.sortDir)
 	const start = (query.page - 1) * query.pageSize
 	const rows = sorted.slice(start, start + query.pageSize)
 
-	lastQuerySummary.value = `Last query: page ${query.page}, ${Object.keys(query.filters ?? {}).length} active filter(s), ${sorted.length} matching row(s).`
+	lastQuerySummary.value = `Last query: page ${query.page}, ${countActiveFilterQuery(query.filterQuery, headers.value, allRows)} active filter(s), ${sorted.length} matching row(s).`
 
 	return {
 		rows,

package/vue/examples/ThemePreview.vue

@@ -4,32 +4,27 @@
 		subtitle="Drop-in themes layered on Femtocrank — not part of the Vite CSS/JS bundle"
 	>
 		<p>
-			Themes live under <code>public/themes/&lt;name&gt;/theme.css</code>. Drop a folder
+			Themes live under <code>public/themes/&lt;name&gt;/theme.css</code> (app themes) and
+			optionally <code>supplemental-themes/</code> (Catppuccin, Dracula / Alucard, Gruvbox, waffles). Drop a folder
 			in and restart the dev server (or rebuild); PicoCrank discovers themes from
-			<code>index.json</code> and applies them with <code>useCustomTheme()</code>.
+			<code>index.json</code> and applies them with <code>useCustomTheme()</code> or
+			<code>ThemeSwitcher</code>. Supplemental themes are bundled by default but only
+			listed when <code>include-supplemental-themes</code> is enabled.
 		</p>
 
-		<label class="theme-picker">
-			<span>Active theme</span>
-			<select :value="themePreference" @change="onThemeChange">
-				<option value="">Default (Femtocrank)</option>
-				<option
-					v-for="name in availableThemes"
-					:key="name"
-					:value="name"
-				>
-					{{ name }}
-				</option>
-			</select>
-		</label>
+		<ThemeSwitcher
+			class="theme-switcher-block"
+			:include-supplemental-themes="true"
+			@change="onThemeChange"
+		/>
 
 		<p v-if="availableThemes.length === 0" class="subtle">
 			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
-			and restart Vite.
+			or enable supplemental themes on <code>ThemeSwitcher</code>.
 		</p>
 		<p v-else class="subtle">
 			Preference is stored in localStorage and applies across the whole examples site.
-			Light/dark mode (header sun/moon) is separate from drop-in themes.
+			Light/dark mode (header sun/moon) switches Femtocrank defaults, or the dual-variant supplemental themes when active.
 		</p>
 	</Section>
 
@@ -118,32 +113,23 @@
 
 <script setup>
 import Section from '../components/Section.vue'
+import ThemeSwitcher from '../components/ThemeSwitcher.vue'
 import FormLayout from '../components/FormLayout.vue'
 import FormField from '../components/FormField.vue'
 import { useCustomTheme } from '../composables/useCustomTheme.js'
 
-const { availableThemes, themePreference, setTheme, discoverThemes } = useCustomTheme()
+const { availableThemes } = useCustomTheme()
 
-discoverThemes()
-
-function onThemeChange(event) {
-	setTheme(event.target.value)
+function onThemeChange() {
+	// ThemeSwitcher updates shared useCustomTheme state.
 }
 </script>
 
 <style scoped>
-.theme-picker {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.75rem;
+.theme-switcher-block {
 	margin: 1rem 0;
 }
 
-.theme-picker select {
-	min-width: 14rem;
-}
-
 .preview-row {
 	display: flex;
 	flex-wrap: wrap;