picocrank 1.22.1 → 1.23.0

package/vue/composables/useLongPress.js

@@ -0,0 +1,76 @@
+import { ref } from 'vue'
+
+const DEFAULT_DELAY_MS = 500
+const DEFAULT_MOVE_TOLERANCE_PX = 10
+
+export function useLongPress(callback, options = {}) {
+	const delayMs = options.delayMs ?? DEFAULT_DELAY_MS
+	const moveTolerancePx = options.moveTolerancePx ?? DEFAULT_MOVE_TOLERANCE_PX
+
+	const suppressClick = ref(false)
+	let timer = null
+	let startX = 0
+	let startY = 0
+	let pointerId = null
+
+	function clearTimer() {
+		if (timer !== null) {
+			clearTimeout(timer)
+			timer = null
+		}
+	}
+
+	function onPointerDown(event) {
+		if (typeof callback !== 'function') {
+			return
+		}
+
+		clearTimer()
+		pointerId = event.pointerId
+		startX = event.clientX
+		startY = event.clientY
+
+		timer = window.setTimeout(() => {
+			timer = null
+			suppressClick.value = true
+			callback(event)
+		}, delayMs)
+	}
+
+	function onPointerMove(event) {
+		if (timer === null || event.pointerId !== pointerId) {
+			return
+		}
+
+		const dx = Math.abs(event.clientX - startX)
+		const dy = Math.abs(event.clientY - startY)
+		if (dx > moveTolerancePx || dy > moveTolerancePx) {
+			clearTimer()
+		}
+	}
+
+	function onPointerUp() {
+		clearTimer()
+		pointerId = null
+	}
+
+	function onClick(event) {
+		if (!suppressClick.value) {
+			return
+		}
+
+		event.preventDefault()
+		event.stopPropagation()
+		suppressClick.value = false
+	}
+
+	return {
+		suppressClick,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp,
+		onPointerLeave: onPointerUp,
+		onClick,
+	}
+}

package/vue/views/App.vue

@@ -188,6 +188,7 @@
 
 			navigation.value.addSection('Data display', { name: 'nav-data' })
 			navigation.value.addRouterLink('TableExample', 'Table')
+			navigation.value.addRouterLink('TableRemoteExample', 'Remote table')
 			navigation.value.addRouterLink('CalendarExample', 'Calendar')
 			navigation.value.addRouterLink('ReadOnlyTextAreaExample', 'Read-only output')
 
@@ -198,6 +199,7 @@
 
 			navigation.value.addSection('Feedback & status', { name: 'nav-feedback' })
 			navigation.value.addRouterLink('StatusExample', 'Status & notifications')
+			navigation.value.addRouterLink('DialogExample', 'Dialog')
 
 			navigation.value.addSection('Patterns', { name: 'nav-patterns' })
 			navigation.value.addCallback('Callback example', helloWorld, { icon: Pin02Icon })

package/vue/views/DialogExample.vue

@@ -0,0 +1,123 @@
+<template>
+	<Section
+		title="Dialog"
+		subtitle="Native HTML dialog element with showModal()"
+	>
+		<p>
+			The <code>&lt;dialog&gt;</code> element provides accessible modal and
+			non-modal overlays without a third-party library. Femtocrank styles the
+			element globally; use <code>showModal()</code> for a modal with backdrop,
+			or <code>show()</code> for a non-modal panel.
+		</p>
+	</Section>
+
+	<Section title="Modal dialog" subtitle="Opens with showModal() and closes on backdrop click">
+		<div role="toolbar" class="dialog-actions">
+			<button type="button" @click="openModal">Open modal</button>
+		</div>
+
+		<dialog
+			ref="modalRef"
+			class="example-dialog"
+			@close="onModalClose"
+			@click="onBackdropClick($event, modalRef)"
+		>
+			<div class="dialog-panel" @click.stop>
+				<h3>Confirm action</h3>
+				<p>
+					This modal uses the native dialog API. Press Escape or click outside
+					to dismiss, or choose an action below.
+				</p>
+				<form method="dialog" class="dialog-form">
+					<div role="toolbar" class="dialog-actions">
+						<button type="submit" value="cancel" class="neutral">Cancel</button>
+						<button type="submit" value="confirm" class="good">Confirm</button>
+					</div>
+				</form>
+			</div>
+		</dialog>
+
+		<p v-if="modalResult" class="subtle">{{ modalResult }}</p>
+	</Section>
+
+	<Section title="Non-modal dialog" subtitle="Stays open while the page remains interactive">
+		<div role="toolbar" class="dialog-actions">
+			<button type="button" class="neutral" @click="openPanel">Open panel</button>
+			<button type="button" class="bad" :disabled="!panelRef?.open" @click="closePanel">
+				Close panel
+			</button>
+		</div>
+
+		<dialog ref="panelRef" class="example-dialog example-dialog-panel">
+			<div class="dialog-panel">
+				<h3>Side note</h3>
+				<p>
+					Non-modal dialogs use <code>show()</code> instead of
+					<code>showModal()</code>. They do not trap focus or dim the page.
+				</p>
+				<button type="button" class="neutral" @click="closePanel">Dismiss</button>
+			</div>
+		</dialog>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Section from '../components/Section.vue'
+
+const modalRef = ref(null)
+const panelRef = ref(null)
+const modalResult = ref('')
+
+function openModal() {
+	modalRef.value?.showModal()
+}
+
+function onModalClose(event) {
+	const value = event.target?.returnValue
+	if (value === 'confirm') {
+		modalResult.value = 'Action confirmed.'
+	} else {
+		modalResult.value = 'Dialog closed without confirming.'
+	}
+}
+
+function onBackdropClick(event, dialog) {
+	if (event.target === dialog) {
+		dialog.close('cancel')
+	}
+}
+
+function openPanel() {
+	panelRef.value?.show()
+}
+
+function closePanel() {
+	panelRef.value?.close()
+}
+</script>
+
+<style scoped>
+.dialog-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.dialog-panel h3 {
+	margin: 0 0 0.5rem;
+}
+
+.dialog-panel p {
+	margin: 0 0 1rem;
+}
+
+.dialog-form {
+	margin: 0;
+}
+
+.example-dialog-panel {
+	margin-block-start: 1rem;
+	max-width: 24rem;
+}
+</style>

package/vue/views/TableExample.vue

@@ -1,46 +1,46 @@
 <template>
-	<Section 
-		title="Table Example" 
-		subtitle="A simple table with sortable columns and pagination"
-		:padding = "false"
-		>
-		 <template #toolbar>
-			 <button>Add Item</button>
-		 </template>
+	<Section
+		title="Table Example"
+		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" 
-			 :headers = "headers" 
-			 :show-pagination = "true"
-			 >
-			 <template #cell-name="{ row, value }">
-				 <router-link :to="{ name: 'ViewItem', params: { id: row.name } }">
-					 {{ value }}
-				 </router-link>
-			 </template>
+		<Table
+			:data="data"
+			:headers="headers"
+			:show-pagination="true"
+		>
+			<template #cell-name="{ row, value }">
+				<router-link :to="{ name: 'ViewItem', params: { id: row.name } }">
+					{{ value }}
+				</router-link>
+			</template>
 
-			 <template #cell-city="{ row, value }">
-				 <span class = "subtle">
-				 {{ value }}
-				 </span>
-			 </template>
+			<template #cell-city="{ row, value }">
+				<span class="subtle">
+					{{ value }}
+				</span>
+			</template>
 		</Table>
 	</Section>
 </template>
 
 <script setup>
-	import { ref, onMounted } from 'vue'
-	import { getExampleTableRows } from '../data/examplePeople.js'
+import { ref, onMounted } from 'vue'
+import { getExampleTableRows } from '../data/examplePeople.js'
 
-	const headers = ref([
-		{ key: "name", label: "Name", sortable: true, hidden: false, width: "20%" },
-		{ key: "age", label: "Age", sortable: false },
-		{ key: "city", label: "City", sortable: true, width: "200px" },
-	])
+const headers = ref([
+	{ key: 'name', label: 'Name', sortable: true, filterable: true, filterType: 'text', hidden: false, width: '20%' },
+	{ key: 'age', label: 'Age', sortable: true, filterable: true, filterType: 'number' },
+	{ key: 'city', label: 'City', sortable: true, filterable: true, filterType: 'select', width: '200px' },
+])
 
-	const data = ref([])
+const data = ref([])
 
-	onMounted(() => {
-		data.value = getExampleTableRows()
-	})
+onMounted(() => {
+	data.value = getExampleTableRows()
+})
 </script>

package/vue/views/TableRemoteExample.vue

@@ -0,0 +1,79 @@
+<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."
+		:padding="false"
+	>
+		<p v-if="lastQuerySummary" class="subtle query-summary">{{ lastQuerySummary }}</p>
+
+		<Table
+			:headers="headers"
+			:fetch-rows="fetchRows"
+			:show-pagination="true"
+			:remote-debounce-ms="250"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getExampleTableRows } from '../data/examplePeople.js'
+import { applyFilters, sortRows } from '../composables/tableFilters.js'
+
+const allRows = getExampleTableRows()
+
+const headers = ref([
+	{ key: 'name', label: 'Name', sortable: true, filterable: true, filterType: 'text', width: '20%' },
+	{ key: 'age', label: 'Age', sortable: true, filterable: true, filterType: 'number' },
+	{
+		key: 'city',
+		label: 'City',
+		sortable: true,
+		filterable: true,
+		filterType: 'select',
+		filterOptions: [...new Set(allRows.map((row) => row.city))].sort().map((city) => ({
+			value: city,
+			label: city,
+		})),
+		width: '200px',
+	},
+])
+
+const lastQuerySummary = ref('')
+
+async function fetchRows(query, { signal } = {}) {
+	await new Promise((resolve, reject) => {
+		const timer = window.setTimeout(resolve, 200)
+		if (!signal) {
+			return
+		}
+		const onAbort = () => {
+			window.clearTimeout(timer)
+			reject(new DOMException('Aborted', 'AbortError'))
+		}
+		if (signal.aborted) {
+			onAbort()
+			return
+		}
+		signal.addEventListener('abort', onAbort, { once: true })
+	})
+
+	const filtered = applyFilters(allRows, headers.value, query.filters)
+	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).`
+
+	return {
+		rows,
+		total: sorted.length,
+	}
+}
+</script>
+
+<style scoped>
+.query-summary {
+	margin: 0 0 0.75rem 1rem;
+}
+</style>

package/vue/views/Welcome.vue

@@ -120,7 +120,7 @@ const popularExamples = [
 		name: 'TableExample',
 		category: 'Data display',
 		label: 'Table',
-		description: 'Sortable columns and pagination',
+		description: 'Sorting, pagination, and column filters',
 	},
 	{
 		name: 'CalendarExample',
@@ -160,7 +160,10 @@ onMounted(() => {
 		description: 'Drop-in themes on Femtocrank',
 	})
 	nav.addRouterLink('TableExample', 'Table', {
-		description: 'Lists with sorting and pagination',
+		description: 'Lists with sorting, pagination, and filters',
+	})
+	nav.addRouterLink('TableRemoteExample', 'Remote table', {
+		description: 'Server-style fetchRows pagination and filters',
 	})
 	nav.addRouterLink('CalendarExample', 'Calendar', {
 		description: 'Month view with events',