picocrank 1.32.0 → 1.34.0

package/docs/filter-query-v1.md

@@ -160,7 +160,11 @@ To mirror client semantics in Node without reimplementing operators, reuse `appl
 
 ## Layout presets vs filterQuery
 
-Saved layouts (localStorage or `layoutPresets` callbacks) store **`filters`** (UI storage shape) inside `state`, not `filterQuery`. When a preset is applied, the table rebuilds `filterQuery` automatically. Server-side layout persistence can store either:
+Saved layouts store **`filters`** (UI storage shape) inside `state`, not `filterQuery`. When a preset is applied, the table rebuilds `filterQuery` automatically.
+
+Table **`viewControlMode`**: `localStorageControlled` (default; needs `tableId`) or `callbackControlled` (needs `viewSettings` with `list` / `save` / `load` / etc.). Legacy `layoutPresets` is an alias for `viewSettings`.
+
+Callback-backed persistence can store either:
 
 - **`state.filters`** — round-trips the table UI exactly, or  
 - **`filterQuery`** — if you control load/save; convert with `filterQueryToFilters` before `setFilters` if needed.

package/docs/table.md

@@ -0,0 +1,99 @@
+# Table
+
+`Table` supports local data and remote `fetchRows` data. Existing usages remain
+uncontrolled; pass any query-state prop to control that field independently.
+
+## Query state
+
+```vue
+<Table
+  v-model:sort-by="sortBy"
+  v-model:sort-dir="sortDir"
+  v-model:page="page"
+  v-model:page-size="pageSize"
+/>
+```
+
+`sortBy`, `sortDir`, `page`, and `pageSize` default to internal state when
+omitted. Controlled values may be changed after mount. User actions emit the
+corresponding `update:*` event. Sorting resets the page by default; set
+`:reset-page-on-sort="false"` to preserve the current page. Page-size, data, and
+filter changes continue to reset to page 1.
+
+A sortable header can provide a value comparator:
+
+```js
+{
+  key: 'version',
+  sortable: true,
+  comparator: (left, right, leftRow, rightRow) =>
+    left.localeCompare(right, undefined, { numeric: true }),
+}
+```
+
+The comparator defines ascending order and receives non-null cell values plus
+their rows. `Table` reverses its result for descending order and keeps null
+values last. `sortRows(rows, sortBy, sortDir, comparator)` accepts the same
+optional comparator.
+
+## Cells and display hooks
+
+Named `#cell-{key}` slots and the generic `#cell` slot receive:
+
+```ts
+{ row, value, header, rowIndex, sourceIndex }
+```
+
+`rowIndex` is the index on the displayed page. For local data, `sourceIndex` is
+the index in `data`; for remote data it is the index in the current response.
+
+The `rowClass` and `rowStyle` callbacks receive
+`{ row, rowIndex, sourceIndex }`. `cellClass`, `cellStyle`, and `cellAttrs`
+receive that context plus `{ value, header }`. Return Vue-compatible class or
+style values. `cellAttrs` is intended for attributes such as `title`, `aria-*`,
+and `data-*`; use the dedicated class/style callbacks for those fields.
+Header `class` continues to apply to both its header and body cells.
+
+## Selection and active cells
+
+`selectionClickMode` controls selectable-row clicks:
+
+- `row` (default): row clicks toggle selection; Ctrl/Cmd also toggles and Shift
+  selects a range on the displayed page.
+- `checkbox`: only checkboxes change selection; row clicks emit `row-click`.
+- `modifier`: Ctrl/Cmd toggles, Shift selects a displayed-page range, and an
+  unmodified click emits `row-click`.
+- `extended`: unmodified clicks replace the selection, Ctrl/Cmd toggles, and
+  Shift adds a range on the displayed page. This matches desktop-style
+  selection while leaving the default behavior unchanged.
+
+The additive `row-click` payload is `{ row, index, event }`, where `event` is
+the native click event.
+
+`activeCell` is an optional controlled `{ rowKey, columnKey }` value:
+
+```vue
+<Table
+  v-model:active-cell="activeCell"
+  @cell-click="onCellClick"
+/>
+```
+
+Clicking a data cell emits `cell-click` with the enriched cell context and adds
+the visibly outlined `table-active-cell` class. The component ref exposes:
+
+- `clearFilters()`
+- `focusActiveCell(options?)` (returns whether a displayed active cell was focused)
+- `clearActiveCell()`
+- `activateCellAt(rowIndex, columnIndex, options?)`
+- `moveActiveCell(rowDelta, columnDelta, options?)`
+- `getActiveCellContext()`
+- the existing `loadDeveloperDefaults()` and `layoutLabel`
+
+Cell indices use `displayRows` and `visibleHeaders` and are clamped to the
+displayed grid. Pass `{ wrapColumns: true }` to `moveActiveCell` to move from
+the last column of one row to the first column of the next (or in reverse),
+which is suitable for Tab/Shift+Tab. Pass `{ focus: true, focusOptions? }` to
+activation or movement methods to focus the destination after Vue renders.
+`getActiveCellContext()` returns the cell slot context plus `rowKey`,
+`columnKey`, and `columnIndex`, or `null` when the active cell is not displayed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.32.0",
+  "version": "1.34.0",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",

package/router.js

@@ -6,6 +6,7 @@ import { ViewIcon } from '@hugeicons/core-free-icons';
 import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
 import { CalendarIcon } from '@hugeicons/core-free-icons';
 import { EditIcon } from '@hugeicons/core-free-icons';
+import { Edit03Icon } from '@hugeicons/core-free-icons';
 import { Menu01Icon } from '@hugeicons/core-free-icons';
 import { Navigation01Icon } from '@hugeicons/core-free-icons';
 import { ClipboardCopyIcon } from '@hugeicons/core-free-icons';
@@ -16,6 +17,8 @@ import { PaintBoardIcon } from '@hugeicons/core-free-icons';
 import { UserIcon } from '@hugeicons/core-free-icons';
 import { InformationCircleIcon } from '@hugeicons/core-free-icons';
 import { Loading03Icon } from '@hugeicons/core-free-icons';
+import { DragDropVerticalIcon } from '@hugeicons/core-free-icons';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
 
 import {
 	hubChildBreadcrumbs,
@@ -117,6 +120,16 @@ const routes = [
       breadcrumbs: hubChildBreadcrumbs('NavDataDisplayHub', 'CalendarExample', 'Calendar'),
     }
   },
+  {
+    name: 'ReorderListExample',
+    path: '/reorder-list-example',
+    component: () => import('./vue/examples/ReorderListExample.vue'),
+    meta: {
+      title: 'Reorder list',
+      icon: DragDropVerticalIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavDataDisplayHub', 'ReorderListExample', 'Reorder list'),
+    }
+  },
   {
     name: 'Login',
     path: '/login',
@@ -147,6 +160,16 @@ const routes = [
       breadcrumbs: hubChildBreadcrumbs('NavFormsInputHub', 'FormExample', 'Forms'),
     }
   },
+  {
+    name: 'FieldValueExample',
+    path: '/field-value-example',
+    component: () => import('./vue/examples/FieldValueExample.vue'),
+    meta: {
+      title: 'Field value',
+      icon: Edit03Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavFormsInputHub', 'FieldValueExample', 'Field value'),
+    }
+  },
   {
     name: 'ReadOnlyTextAreaExample',
     path: '/readonly-textarea-example',
@@ -187,6 +210,16 @@ const routes = [
       breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'LoadingAreaExample', 'Loading area'),
     }
   },
+  {
+    name: 'AccordionExample',
+    path: '/accordion-example',
+    component: () => import('./vue/examples/AccordionExample.vue'),
+    meta: {
+      title: 'Accordion',
+      icon: ArrowDown01Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'AccordionExample', 'Accordion'),
+    }
+  },
   {
     name: 'TabsExample',
     path: '/tabs-example',

package/styles/picocrank-extensions.css

@@ -93,6 +93,8 @@
 
 	/* Matches Femtocrank header min-height (logo 2em + .5em padding). */
 	--picocrank-fixed-header-offset: 3em;
+
+	--field-invalid-outline: 0 0 0 3px color-mix(in srgb, var(--karma-bad) 35%, transparent);
 }
 
 /* No fixed header → no sidebar/main offset. */
@@ -133,11 +135,18 @@ section .section-header [role="toolbar"] .button {
 	flex-shrink: 0;
 }
 
-section .section-header [role="toolbar"] > :not(button):not(.button) {
+/* Grow search/filter controls only — toolbar labels stay content-sized. */
+section .section-header [role="toolbar"] > :not(button):not(.button):not(label):not(span) {
 	flex: 1 1 auto;
 	min-width: 0;
 }
 
+section .section-header [role="toolbar"] > label {
+	flex: 0 0 auto;
+	width: auto;
+	min-width: auto;
+}
+
 section.narrow {
 	max-width: 480px;
 	margin-left: auto;
@@ -157,6 +166,10 @@ form > .form-field-label-skip {
 	grid-column: 1 / -1;
 }
 
+label > input[type="checkbox"] {
+	margin-right: 0.35em;
+}
+
 /*
  * FormField applies .field-invalid when an error is set programmatically.
  * Mirrors femtocrank :user-invalid (which only applies after user interaction).
@@ -167,7 +180,11 @@ select.field-invalid {
 	border-color: var(--karma-bad-border);
 	background-color: var(--karma-bad-wash);
 	color: var(--text-color);
-	box-shadow: 0 0 0 3px color-mix(in srgb, var(--karma-bad) 35%, transparent);
+	box-shadow: var(--field-invalid-outline);
+}
+
+.notification.attached-below {
+	margin: 0;
 }
 
 input.field-invalid:focus-visible,
@@ -184,6 +201,10 @@ select.field-invalid:focus-visible {
  * (unlayered) so they are not overridden by stuck-mode defaults.
  * Alternatively wrap with .layout-fixed-header when header and #layout are direct children.
  */
+header {
+	flex-wrap: nowrap;
+}
+
 header.fixed {
 	top: 0;
 	left: 0;

package/vue/components/Accordion.spec.js

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Accordion from './Accordion.vue'
+import AccordionItem from './AccordionItem.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+}
+
+describe('Accordion', () => {
+	it('opens the default subsection and toggles the rest', async () => {
+		const wrapper = mount(Accordion, {
+			props: {
+				defaultOpenIds: ['details'],
+			},
+			slots: {
+				default: `
+					<AccordionItem item-id="details" title="Details"><p class="details">Open</p></AccordionItem>
+					<AccordionItem item-id="notes" title="Notes"><p class="notes">Closed</p></AccordionItem>
+				`,
+			},
+			global: {
+				stubs: globalStubs,
+				components: { AccordionItem },
+			},
+		})
+
+		await nextTick()
+
+		const details = wrapper.get('#accordion-item-details')
+		const notes = wrapper.get('#accordion-item-notes')
+		expect(details.attributes('open')).toBeDefined()
+		expect(notes.attributes('open')).toBeUndefined()
+
+		notes.element.open = true
+		await notes.trigger('toggle')
+		await nextTick()
+
+		expect(wrapper.get('#accordion-item-notes').attributes('open')).toBeDefined()
+
+		details.element.open = false
+		await details.trigger('toggle')
+		await nextTick()
+
+		expect(wrapper.get('#accordion-item-details').attributes('open')).toBeUndefined()
+	})
+})

package/vue/components/Accordion.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="accordion">
+		<slot />
+	</div>
+</template>
+
+<script setup>
+import { provide, ref, watch } from 'vue'
+import { accordionContextKey } from './accordionContext.js'
+
+const props = defineProps({
+	/** Panel ids that start expanded. */
+	defaultOpenIds: {
+		type: Array,
+		default: () => [],
+	},
+})
+
+const openIds = ref(new Set())
+
+function syncDefaultOpen() {
+	openIds.value = new Set(props.defaultOpenIds.filter(Boolean))
+}
+
+watch(() => props.defaultOpenIds, syncDefaultOpen, { immediate: true, deep: true })
+
+function isOpen(id) {
+	return openIds.value.has(id)
+}
+
+function setOpen(id, isOpenNow) {
+	const currently = openIds.value.has(id)
+	if (currently === isOpenNow) {
+		return
+	}
+	const next = new Set(openIds.value)
+	if (isOpenNow) {
+		next.add(id)
+	} else {
+		next.delete(id)
+	}
+	openIds.value = next
+}
+
+provide(accordionContextKey, { isOpen, setOpen })
+</script>

package/vue/components/AccordionItem.vue

@@ -0,0 +1,103 @@
+<template>
+	<details
+		:id="`accordion-item-${itemId}`"
+		class="accordion-item"
+		:open="open"
+		@toggle="onToggle"
+	>
+		<summary
+			class="section-subheader accordion-trigger flex-row"
+			:id="`accordion-trigger-${itemId}`"
+		>
+			<HugeiconsIcon
+				class="accordion-chevron"
+				:icon="ArrowDown01Icon"
+				width="1em"
+				height="1em"
+				aria-hidden="true"
+			/>
+			<h3>{{ title }}</h3>
+		</summary>
+		<div
+			:id="`accordion-panel-${itemId}`"
+			class="section-content padding"
+		>
+			<slot />
+		</div>
+	</details>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons'
+import { accordionContextKey } from './accordionContext.js'
+
+const props = defineProps({
+	itemId: {
+		type: String,
+		required: true,
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+})
+
+const accordion = inject(accordionContextKey, null)
+
+const open = computed(() => accordion?.isOpen(props.itemId) ?? false)
+
+function onToggle(event) {
+	accordion?.setOpen(props.itemId, event.currentTarget.open)
+}
+</script>
+
+<style scoped>
+.accordion-trigger {
+	width: 100%;
+	margin: 0;
+	padding-right: 1em;
+	border: none;
+	background: none;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+	text-align: left;
+	list-style: none;
+	gap: 0.35rem;
+	box-sizing: border-box;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.accordion-trigger:hover {
+	background-color: var(--hover-background-color);
+	color: var(--hover-text-color, inherit);
+}
+
+.accordion-trigger:focus-visible {
+	outline: 2px solid var(--focus-outline-color, var(--text-color));
+	outline-offset: -2px;
+}
+
+.accordion-trigger::-webkit-details-marker {
+	display: none;
+}
+
+.accordion-trigger::marker {
+	content: '';
+}
+
+.accordion-trigger h3 {
+	margin: 0;
+}
+
+.accordion-chevron {
+	flex-shrink: 0;
+	transition: transform 0.15s ease;
+}
+
+.accordion-item[open] .accordion-chevron {
+	transform: rotate(180deg);
+}
+</style>

package/vue/components/FieldValue.spec.js

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import FieldValue from './FieldValue.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+	RouterLink: {
+		props: ['to'],
+		template: '<a class="outline-link" :href="typeof to === \'string\' ? to : \'#\'"><slot /></a>',
+	},
+}
+
+describe('FieldValue', () => {
+	it('shows a read-only icon when no edit template or outline target is provided', () => {
+		const wrapper = mount(FieldValue, {
+			props: { modelValue: 'Yesterday' },
+			global: { stubs: globalStubs },
+		})
+
+		expect(wrapper.text()).toContain('Yesterday')
+		expect(wrapper.find('[aria-label="Read only"]').exists()).toBe(true)
+		expect(wrapper.find('.field-value-outline').exists()).toBe(false)
+	})
+
+	it('shows an inline-edit icon and the edit template after click', async () => {
+		const wrapper = mount(FieldValue, {
+			props: { modelValue: 'Ada' },
+			slots: {
+				edit: '<input class="edit-box" :value="value" />',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		expect(wrapper.find('[aria-label="Read only"]').exists()).toBe(false)
+		expect(wrapper.find('.field-value-display.editable').exists()).toBe(true)
+
+		await wrapper.find('.field-value-display').trigger('click')
+		await nextTick()
+
+		expect(wrapper.find('.edit-box').exists()).toBe(true)
+		expect(wrapper.find('.edit-box').element.value).toBe('Ada')
+	})
+
+	it('commits the edited value from the template', async () => {
+		const wrapper = mount(FieldValue, {
+			props: { modelValue: 'Ada' },
+			slots: {
+				edit: `
+					<input
+						class="edit-box"
+						:value="value"
+						@input="update($event.target.value)"
+						@keyup.enter="commit"
+					/>
+				`,
+			},
+			global: { stubs: globalStubs },
+		})
+
+		await wrapper.find('.field-value-display').trigger('click')
+		await nextTick()
+		const input = wrapper.find('.edit-box')
+		await input.setValue('Grace')
+		await input.trigger('keyup.enter')
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['Grace'])
+		expect(wrapper.emitted('commit')?.[0]).toEqual(['Grace'])
+		expect(wrapper.text()).toContain('Ada')
+	})
+
+	it('shows an outline-edit link when a route is provided and no edit template', () => {
+		const wrapper = mount(FieldValue, {
+			props: {
+				modelValue: 'Website',
+				to: '/customers/1/edit',
+				editLabel: 'Edit customer',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		const link = wrapper.find('.field-value-outline')
+		expect(link.exists()).toBe(true)
+		expect(link.attributes('aria-label')).toBe('Edit customer')
+		expect(link.attributes('href')).toBe('/customers/1/edit')
+		expect(wrapper.find('[aria-label="Read only"]').exists()).toBe(false)
+	})
+})