picocrank 1.33.0 → 1.35.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

@@ -36,6 +36,16 @@ their rows. `Table` reverses its result for descending order and keeps null
 values last. `sortRows(rows, sortBy, sortDir, comparator)` accepts the same
 optional comparator.
 
+## Column resize
+
+Hover a data-column header to reveal a drag handle on its right edge. Drag to
+set a pixel width; the first drag freezes sibling column widths so only the
+active column changes. Double-click the handle to clear that column’s width and
+return it to browser auto sizing. Set `resizable: false` on a header to hide its
+handle. Initial widths still come from optional `header.width`. While any
+column has a resized width, overflowing header and cell content is clipped with
+ellipsis.
+
 ## Cells and display hooks
 
 Named `#cell-{key}` slots and the generic `#cell` slot receive:
@@ -79,8 +89,17 @@ the native click event.
 />
 ```
 
-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:
+Clicking a data cell emits `cell-click` with the enriched cell context, focuses
+the cell when the click target is not interactive, and adds the visibly outlined
+`table-active-cell` class. While an active cell is focused, arrow keys move
+selection within the displayed grid (with focus following).
+
+Sortable headers expose `aria-sort` (`none` / `ascending` / `descending`).
+Filterable headers use `aria-haspopup="dialog"` and `aria-expanded`. The table
+sets `aria-busy` while loading and `aria-colcount` for the visible column count
+(including select and column-options columns when present).
+
+The component ref exposes:
 
 - `clearFilters()`
 - `focusActiveCell(options?)` (returns whether a displayed active cell was focused)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.33.0",
+  "version": "1.35.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)
+	})
+})

package/vue/components/FieldValue.vue

@@ -0,0 +1,222 @@
+<template>
+	<div
+		class="field-value"
+		:class="{
+			'is-inline': hasInlineEdit,
+			'is-outline': hasOutlineEdit,
+			'is-readonly': readOnly,
+		}"
+	>
+		<div
+			v-if="editing"
+			ref="editRoot"
+			class="field-value-edit"
+			@click.stop
+		>
+			<slot
+				name="edit"
+				:value="draft"
+				:update="updateDraft"
+				:commit="commit"
+				:cancel="cancel"
+			/>
+		</div>
+		<div
+			v-else
+			class="field-value-display"
+			:class="{ editable: hasInlineEdit }"
+			@click="startEdit"
+		>
+			<span class="field-value-content">
+				<slot>{{ displayText }}</slot>
+			</span>
+			<HugeiconsIcon
+				v-if="hasInlineEdit"
+				:icon="Edit03Icon"
+				class="field-value-icon"
+				width="0.9em"
+				height="0.9em"
+				aria-hidden="true"
+			/>
+			<router-link
+				v-else-if="to"
+				:to="to"
+				class="field-value-icon field-value-outline"
+				:title="editLabel"
+				:aria-label="editLabel"
+				@click.stop
+			>
+				<HugeiconsIcon
+					:icon="FileEditIcon"
+					width="0.9em"
+					height="0.9em"
+					aria-hidden="true"
+				/>
+			</router-link>
+			<a
+				v-else-if="href"
+				:href="href"
+				class="field-value-icon field-value-outline"
+				:title="editLabel"
+				:aria-label="editLabel"
+				@click.stop
+			>
+				<HugeiconsIcon
+					:icon="FileEditIcon"
+					width="0.9em"
+					height="0.9em"
+					aria-hidden="true"
+				/>
+			</a>
+			<span
+				v-else
+				class="field-value-icon field-value-readonly"
+				title="Read only"
+				aria-label="Read only"
+			>
+				<HugeiconsIcon
+					:icon="SquareLock01Icon"
+					width="0.9em"
+					height="0.9em"
+					aria-hidden="true"
+				/>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, useSlots } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Edit03Icon, FileEditIcon, SquareLock01Icon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+	modelValue: {
+		type: [String, Number, Boolean],
+		default: '',
+	},
+	/**
+	 * Route for outline edit. Shown when no edit template is provided.
+	 */
+	to: {
+		type: [String, Object],
+		default: null,
+	},
+	/**
+	 * URL for outline edit when a router location is not used.
+	 */
+	href: {
+		type: String,
+		default: '',
+	},
+	editLabel: {
+		type: String,
+		default: 'Edit',
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'commit', 'cancel'])
+
+const slots = useSlots()
+const editing = ref(false)
+const draft = ref('')
+const editRoot = ref(null)
+
+const hasInlineEdit = computed(() => typeof slots.edit === 'function')
+const hasOutlineEdit = computed(() => !hasInlineEdit.value && Boolean(props.to || props.href))
+const readOnly = computed(() => !hasInlineEdit.value && !hasOutlineEdit.value)
+const displayText = computed(() => (props.modelValue == null ? '' : String(props.modelValue)))
+
+function startEdit() {
+	if (!hasInlineEdit.value || editing.value) {
+		return
+	}
+	draft.value = displayText.value
+	editing.value = true
+	nextTick(() => {
+		const control = editRoot.value?.querySelector('input, select, textarea')
+		if (!control) {
+			return
+		}
+		control.focus()
+		if (control instanceof HTMLInputElement && control.type !== 'checkbox') {
+			control.select()
+		}
+	})
+}
+
+function updateDraft(value) {
+	draft.value = value == null ? '' : String(value)
+}
+
+function commit() {
+	if (!editing.value) {
+		return
+	}
+	emit('update:modelValue', draft.value)
+	emit('commit', draft.value)
+	editing.value = false
+}
+
+function cancel() {
+	if (!editing.value) {
+		return
+	}
+	editing.value = false
+	draft.value = displayText.value
+	emit('cancel')
+}
+</script>
+
+<style scoped>
+.field-value-display,
+.field-value-edit {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	min-height: 1.5em;
+}
+
+.field-value-display.editable {
+	cursor: pointer;
+	padding: 0.25rem;
+	border-radius: 3px;
+}
+
+.field-value-display.editable:hover {
+	background-color: var(--hover-background-color, #f8f9fa);
+}
+
+.field-value-content {
+	min-width: 0;
+}
+
+.field-value-icon {
+	flex-shrink: 0;
+	color: var(--muted-text-color, #8a8a8a);
+	opacity: 0.55;
+}
+
+.field-value-outline,
+.field-value-readonly {
+	display: inline-flex;
+	line-height: 0;
+}
+
+.field-value-outline {
+	text-decoration: none;
+}
+
+.field-value-display.editable:hover .field-value-icon,
+.field-value-outline:hover {
+	opacity: 0.9;
+}
+
+.field-value-edit :deep(input),
+.field-value-edit :deep(select),
+.field-value-edit :deep(textarea) {
+	width: 100%;
+	max-width: 28rem;
+	box-sizing: border-box;
+}
+</style>