picocrank 1.32.0 → 1.34.0

package/vue/examples/FieldValueExample.vue

@@ -0,0 +1,143 @@
+<template>
+	<Section
+		title="Field value"
+		:icon="Edit03Icon"
+		subtitle="A displayed value with read-only, inline edit, or outline edit."
+	>
+		<p>
+			Pass an <code>#edit</code> template to edit in place. Without that template, set
+			<code>to</code> or <code>href</code> so the icon opens another page. Otherwise the
+			value is read-only. Use the <code>#title</code> slot on <code>Section</code> for an
+			editable heading.
+		</p>
+	</Section>
+
+	<Section subtitle="FieldValue in the Section title slot — click the heading to rename">
+		<template #title>
+			<FieldValue v-model="sectionTitle">
+				<template #edit="{ value, update, commit, cancel }">
+					<input
+						:value="value"
+						type="text"
+						class="field-value-title-input"
+						@input="update($event.target.value)"
+						@keyup.enter="commit"
+						@keyup.escape="cancel"
+						@blur="commit"
+					/>
+				</template>
+			</FieldValue>
+		</template>
+		<p>
+			The value above is the section heading. It uses the same inline edit pattern as
+			definition-list fields below.
+		</p>
+	</Section>
+
+	<Section title="Read only" subtitle="No edit template and no outline target">
+		<dl class="field-value-dl">
+			<dt>Created</dt>
+			<dd>
+				<FieldValue model-value="2 hours ago" />
+			</dd>
+		</dl>
+	</Section>
+
+	<Section title="Inline edit" subtitle="An edit template replaces the value until commit or cancel">
+		<dl class="field-value-dl">
+			<dt>Name</dt>
+			<dd>
+				<FieldValue v-model="name" @commit="lastCommit = $event">
+					<template #edit="{ value, update, commit, cancel }">
+						<input
+							:value="value"
+							type="text"
+							@input="update($event.target.value)"
+							@keyup.enter="commit"
+							@keyup.escape="cancel"
+							@blur="commit"
+						/>
+					</template>
+				</FieldValue>
+			</dd>
+
+			<dt>Active</dt>
+			<dd>
+				<FieldValue v-model="active">
+					<template #default>{{ active === '1' ? 'Yes' : 'No' }}</template>
+					<template #edit="{ value, update, commit }">
+						<input
+							type="checkbox"
+							:checked="value === '1'"
+							@change="event => {
+								update(event.target.checked ? '1' : '0')
+								commit()
+							}"
+						/>
+					</template>
+				</FieldValue>
+			</dd>
+		</dl>
+		<p v-if="lastCommit" class="subtle">Last saved name: {{ lastCommit }}</p>
+	</Section>
+
+	<Section title="Outline edit" subtitle="The icon navigates; the value itself stays read-only">
+		<dl class="field-value-dl">
+			<dt>Website</dt>
+			<dd>
+				<FieldValue
+					model-value="example.com"
+					to="/form-example"
+					edit-label="Edit on the form page"
+				/>
+			</dd>
+
+			<dt>Docs</dt>
+			<dd>
+				<FieldValue
+					model-value="femtocrank"
+					href="https://github.com/jamesread/femtocrank"
+					edit-label="Open documentation"
+				/>
+			</dd>
+		</dl>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Edit03Icon } from '@hugeicons/core-free-icons'
+import Section from '../components/Section.vue'
+import FieldValue from '../components/FieldValue.vue'
+
+const sectionTitle = ref('Project settings')
+const name = ref('Ada Lovelace')
+const active = ref('1')
+const lastCommit = ref('')
+</script>
+
+<style scoped>
+.field-value-dl {
+	grid-template-columns: 12rem minmax(0, 1fr);
+}
+
+.field-value-dl dt {
+	grid-column: 1;
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+.field-value-dl dd {
+	grid-column: 2;
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+.field-value-title-input {
+	font: inherit;
+	font-weight: inherit;
+	color: inherit;
+	min-width: 12rem;
+	max-width: 100%;
+}
+</style>

package/vue/examples/FormExample.vue

@@ -101,12 +101,17 @@
 				/>
 			</FormField>
 
-			<FormField label="Is Administrator?">
-				<input 
-					type="checkbox" 
-					id="is-admin"
-					v-model="formData.isAdmin"
-				/>
+			<FormField label="Is Administrator?" component-has-label>
+				<div>
+					<label>
+						<input
+							id="is-admin"
+							v-model="formData.isAdmin"
+							type="checkbox"
+						/>
+						<span>Administrator</span>
+					</label>
+				</div>
 			</FormField>
 
 			<FormField

package/vue/examples/ReorderListExample.vue

@@ -0,0 +1,236 @@
+<template>
+	<Section
+		title="Reorder list"
+		:icon="DragDropVerticalIcon"
+		subtitle="Drag the handle, or use the arrows, to change the order of any components shown as rows."
+	>
+		<p>
+			<code>ReorderList</code> is a vertical list, separate from <code>Table</code>.
+			Each row’s body is the <code>#item</code> slot, so the reordered content can be
+			any component. The list emits <code>update:modelValue</code> with a new array.
+			While dragging, a line marks the gap where the row will be inserted (native HTML5 drag-and-drop).
+			<code>showMoveButtons</code>, <code>showDragHandles</code>, and <code>dragWholeRow</code>
+			control how rows are reordered.
+		</p>
+	</Section>
+
+	<Section title="Checklist" subtitle="Status cards in a row list">
+		<template #toolbar>
+			<label class="reorder-example-toggle">
+				<input v-model="showMoveButtons" type="checkbox" />
+				Move buttons
+			</label>
+			<label class="reorder-example-toggle">
+				<input v-model="showDragHandles" type="checkbox" />
+				Drag handles
+			</label>
+			<label class="reorder-example-toggle">
+				<input v-model="dragWholeRow" type="checkbox" />
+				Whole row drag
+			</label>
+			<button type="button" class="neutral" @click="resetTasks">
+				Reset order
+			</button>
+		</template>
+
+		<ReorderList
+			v-model="tasks"
+			item-key="id"
+			aria-label="Checklist order"
+			:show-move-buttons="showMoveButtons"
+			:show-drag-handles="showDragHandles"
+			:drag-whole-row="dragWholeRow"
+		>
+			<template #item="{ item }">
+				<div class="task-row">
+					<div class="task-copy">
+						<strong>{{ item.title }}</strong>
+						<p class="subtle">{{ item.detail }}</p>
+					</div>
+					<span class="tag">{{ item.tag }}</span>
+				</div>
+			</template>
+		</ReorderList>
+	</Section>
+
+	<Section title="Current order" subtitle="Bound array after each move">
+		<ol class="order-readout">
+			<li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
+		</ol>
+	</Section>
+
+	<Section
+		title="Nested lists"
+		subtitle="Reorder phases, then reorder steps inside each phase — each list is its own ReorderList."
+	>
+		<template #toolbar>
+			<button type="button" class="neutral" @click="resetPhases">
+				Reset nested demo
+			</button>
+		</template>
+
+		<ReorderList
+			v-model="phases"
+			item-key="id"
+			aria-label="Release phases"
+			:show-drag-handles="true"
+		>
+			<template #item="{ item }">
+				<div class="nested-phase">
+					<p class="nested-phase-title">{{ item.title }}</p>
+					<ReorderList
+						v-model="item.steps"
+						item-key="id"
+						class="nested-phase-steps"
+						:aria-label="`${item.title} steps`"
+						drag-whole-row
+					>
+						<template #item="{ item: step }">
+							<span class="nested-step-label">{{ step.label }}</span>
+						</template>
+					</ReorderList>
+				</div>
+			</template>
+		</ReorderList>
+	</Section>
+
+	<Section title="Nested order" subtitle="Phases and their step arrays after moves">
+		<ul class="nested-readout">
+			<li v-for="phase in phases" :key="phase.id">
+				<strong>{{ phase.title }}</strong>
+				<ol>
+					<li v-for="step in phase.steps" :key="step.id">{{ step.label }}</li>
+				</ol>
+			</li>
+		</ul>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { DragDropVerticalIcon } from '@hugeicons/core-free-icons'
+import Section from '../components/Section.vue'
+import ReorderList from '../components/ReorderList.vue'
+
+const initialTasks = [
+	{ id: 'deploy', title: 'Deploy service', detail: 'Production rollout window', tag: 'Ops' },
+	{ id: 'review', title: 'Review access', detail: 'Quarterly IAM check', tag: 'Security' },
+	{ id: 'backup', title: 'Verify backups', detail: 'Nightly snapshot', tag: 'Ops' },
+	{ id: 'notes', title: 'Publish notes', detail: 'Changelog for 2.4', tag: 'Docs' },
+]
+
+const tasks = ref(initialTasks.map((task) => ({ ...task })))
+const showMoveButtons = ref(false)
+const showDragHandles = ref(true)
+const dragWholeRow = ref(false)
+
+function resetTasks() {
+	tasks.value = initialTasks.map((task) => ({ ...task }))
+}
+
+const initialPhases = [
+	{
+		id: 'build',
+		title: 'Build',
+		steps: [
+			{ id: 'build-lint', label: 'Run linters' },
+			{ id: 'build-test', label: 'Unit tests' },
+			{ id: 'build-image', label: 'Container image' },
+		],
+	},
+	{
+		id: 'staging',
+		title: 'Staging',
+		steps: [
+			{ id: 'staging-deploy', label: 'Deploy to staging' },
+			{ id: 'staging-smoke', label: 'Smoke tests' },
+		],
+	},
+	{
+		id: 'production',
+		title: 'Production',
+		steps: [
+			{ id: 'prod-approve', label: 'Change approval' },
+			{ id: 'prod-deploy', label: 'Rolling deploy' },
+			{ id: 'prod-verify', label: 'Post-deploy checks' },
+		],
+	},
+]
+
+const phases = ref(clonePhases(initialPhases))
+
+function clonePhases(source) {
+	return source.map((phase) => ({
+		...phase,
+		steps: phase.steps.map((step) => ({ ...step })),
+	}))
+}
+
+function resetPhases() {
+	phases.value = clonePhases(initialPhases)
+}
+</script>
+
+<style scoped>
+.task-row {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	min-width: 0;
+}
+
+.task-copy {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.task-copy p {
+	margin: 0.15rem 0 0;
+}
+
+.order-readout {
+	margin: 0;
+	padding-left: 1.25rem;
+}
+
+.reorder-example-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4em;
+	margin-right: 0.75em;
+	cursor: pointer;
+	user-select: none;
+}
+
+.nested-phase {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.nested-phase-title {
+	margin: 0 0 0.5rem;
+	font-weight: bold;
+}
+
+.nested-phase-steps {
+	margin-top: 0.25rem;
+}
+
+.nested-phase-steps :deep(.reorder-list-row) {
+	padding: 0.4rem 0.55rem;
+}
+
+.nested-step-label {
+	display: block;
+}
+
+.nested-readout {
+	margin: 0;
+	padding-left: 1.25rem;
+}
+
+.nested-readout ol {
+	margin: 0.35rem 0 0.75rem;
+	padding-left: 1.25rem;
+}
+</style>

package/vue/examples/TableExample.vue

@@ -2,7 +2,7 @@
 	<Section
 		:title="tableSectionTitle"
 		:icon="TableIcon"
-		subtitle="Sortable columns, pagination, and column filters. Right-click or long-press a column header to filter. Enable “Row context menu” to right-click rows."
+		subtitle="Sortable columns, pagination, column filters, and group-by. Right-click or long-press a column header to filter or group. Use Column options for group-by as well."
 		:padding="false"
 	>
 		<template v-if="multiSelectEnabled" #toolbar>
@@ -66,6 +66,7 @@
 			:sticky-cols="stickyCols"
 			v-model:column-visibility="columnVisibility"
 			v-model:layout-label="tableLayoutLabel"
+			v-model:group-by="tableGroupBy"
 			:default-column-visibility="defaultColumnVisibility"
 			v-bind="tableListeners"
 		>
@@ -163,6 +164,7 @@
 				<strong>Query:</strong>
 				page {{ lastQuery.page }},
 				sort {{ lastQuery.sortBy ?? 'none' }} {{ lastQuery.sortDir }},
+				group {{ lastQuery.groupBy ?? 'none' }},
 				{{ activeFilterCount }} active filter(s)
 			</p>
 			<p v-else class="event-line subtle">Query: waiting for the first table update…</p>
@@ -256,6 +258,7 @@ const lastBulkAction = ref(null)
 const lastContextMenuAction = ref(null)
 const selectedKeys = ref([])
 const tableLayoutLabel = ref('')
+const tableGroupBy = ref(null)
 const rowDialogRef = ref(null)
 
 const multiSelectEnabled = computed(() => enabledFeatures.value.includes('multiSelect'))
@@ -471,6 +474,7 @@ function resetControls() {
 	lastBulkAction.value = null
 	lastContextMenuAction.value = null
 	selectedKeys.value = []
+	tableGroupBy.value = null
 	if (rowDialogRef.value?.open) {
 		rowDialogRef.value.close()
 	}

package/vue/examples/TableRemoteExample.vue

@@ -2,7 +2,7 @@
 	<Section
 		title="Remote table"
 		: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."
+		subtitle="Server-style pagination with fetchRows. Filter queries, sort, and page changes are sent to the callback. Saved views use callbackControlled view settings (not localStorage)."
 		:padding="false"
 	>
 		<p v-if="lastQuerySummary" class="subtle query-summary">{{ lastQuerySummary }}</p>
@@ -11,7 +11,8 @@
 			row-key="name"
 			:headers="headers"
 			:fetch-rows="fetchRows"
-			:layout-presets="layoutPresets"
+			view-control-mode="callbackControlled"
+			:view-settings="viewSettings"
 			:show-pagination="true"
 			:remote-debounce-ms="250"
 		/>
@@ -61,7 +62,7 @@ function createRemotePresetId() {
 	return `remote-preset-${remotePresetCounter}`
 }
 
-const layoutPresets = {
+const viewSettings = {
 	async list() {
 		return {
 			presets: remoteLayoutStore.value.presets.map((preset) => ({ ...preset })),
@@ -105,6 +106,29 @@ const layoutPresets = {
 		}
 	},
 
+	async overwrite({ presetId, state }) {
+		const index = remoteLayoutStore.value.presets.findIndex((item) => item.id === presetId)
+		if (index === -1) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		const preset = {
+			...remoteLayoutStore.value.presets[index],
+			savedAt: new Date().toISOString(),
+			state: JSON.parse(JSON.stringify(state)),
+		}
+		remoteLayoutStore.value.presets = remoteLayoutStore.value.presets.map((item, i) => (
+			i === index ? preset : item
+		))
+
+		console.info('[remote table] overwrote 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) {
@@ -171,7 +195,7 @@ async function fetchRows(query, { signal } = {}) {
 	const start = (query.page - 1) * query.pageSize
 	const rows = sorted.slice(start, start + query.pageSize)
 
-	lastQuerySummary.value = `Last query: page ${query.page}, ${countActiveFilterQuery(query.filterQuery, headers.value, allRows)} active filter(s), ${sorted.length} matching row(s).`
+	lastQuerySummary.value = `Last query: page ${query.page}, group ${query.groupBy ?? 'none'}, ${countActiveFilterQuery(query.filterQuery, headers.value, allRows)} active filter(s), ${sorted.length} matching row(s).`
 
 	return {
 		rows,