picocrank 1.22.2 → 1.23.1

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 → examples}/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')
 

package/vue/{views → examples}/ButtonsExample.vue

@@ -5,7 +5,9 @@
 	>
 		<p>
 			Buttons use the global Femtocrank theme. Apply karma classes for intent, or
-			rely on <code>type</code> attributes for form semantics.
+			rely on <code>type</code> attributes for form semantics. Use
+			<code>.inline-icon</code> on buttons with icons, and
+			<code>aria-label</code> when there is no visible text.
 		</p>
 	</Section>
 
@@ -19,6 +21,47 @@
 		</div>
 	</Section>
 
+	<Section title="Icon and text" subtitle="Hugeicons with a visible label">
+		<div role="toolbar" class="buttons-row">
+			<button type="button" class="inline-icon">
+				<HugeiconsIcon :icon="Add01Icon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+				<span>Add item</span>
+			</button>
+			<button type="button" class="inline-icon neutral">
+				<HugeiconsIcon :icon="EditIcon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+				<span>Edit</span>
+			</button>
+			<button type="button" class="inline-icon good">
+				<HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+				<span>Search</span>
+			</button>
+			<button type="button" class="inline-icon">
+				<HugeiconsIcon :icon="Copy01Icon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+				<span>Copy</span>
+			</button>
+		</div>
+	</Section>
+
+	<Section title="Icon only" subtitle="Hugeicons without visible text">
+		<div role="toolbar" class="buttons-row">
+			<button type="button" class="inline-icon" aria-label="Add item">
+				<HugeiconsIcon :icon="Add01Icon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+			</button>
+			<button type="button" class="inline-icon neutral" aria-label="Edit">
+				<HugeiconsIcon :icon="EditIcon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+			</button>
+			<button type="button" class="inline-icon good" aria-label="Search">
+				<HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+			</button>
+			<button type="button" class="inline-icon bad" aria-label="Delete">
+				<HugeiconsIcon :icon="Delete02Icon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+			</button>
+			<button type="button" class="inline-icon neutral" aria-label="Settings">
+				<HugeiconsIcon :icon="Settings01Icon" width="1em" height="1em" :strokeWidth="iconStrokeWidth" aria-hidden="true" />
+			</button>
+		</div>
+	</Section>
+
 	<Section title="Form actions" subtitle="Semantic button types in a fieldset">
 		<FormLayout class="buttons-demo-form" @submit.prevent="onSubmit">
 			<template #actions>
@@ -67,10 +110,20 @@
 
 <script setup>
 import { ref } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import {
+	Add01Icon,
+	Copy01Icon,
+	Delete02Icon,
+	EditIcon,
+	SearchIcon,
+	Settings01Icon,
+} from '@hugeicons/core-free-icons'
 import Section from '../components/Section.vue'
 import FormLayout from '../components/FormLayout.vue'
 
 const lastAction = ref('')
+const iconStrokeWidth = 2.5
 
 function onSubmit() {
 	lastAction.value = 'Form submitted.'

package/vue/examples/TableExample.vue

@@ -0,0 +1,46 @@
+<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>
+
+			<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'
+
+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([])
+
+onMounted(() => {
+	data.value = getExampleTableRows()
+})
+</script>

package/vue/examples/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 → examples}/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',

package/vue/views/TableExample.vue

@@ -1,46 +0,0 @@
-<template>
-	<Section 
-		title="Table Example" 
-		subtitle="A simple table with sortable columns and pagination"
-		: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>
-
-			 <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'
-
-	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 data = ref([])
-
-	onMounted(() => {
-		data.value = getExampleTableRows()
-	})
-</script>