picocrank 1.24.0 → 1.25.1

package/vue/components/TableColumnFilterPopover.vue

@@ -26,7 +26,7 @@
 					</label>
 					<label v-if="draft.operator !== 'empty'">
 						<span class="field-label">Value</span>
-						<input v-model="draft.value" type="text" @keydown.enter.prevent="apply" />
+						<input v-model="draft.value" type="text" @keydown.enter.prevent="addFilter" />
 					</label>
 				</div>
 
@@ -43,7 +43,7 @@
 					</label>
 					<label>
 						<span class="field-label">Value</span>
-						<input v-model="draft.value" type="number" @keydown.enter.prevent="apply" />
+						<input v-model="draft.value" type="number" @keydown.enter.prevent="addFilter" />
 					</label>
 				</div>
 
@@ -70,12 +70,76 @@
 					</div>
 					<p v-if="selectOptions.length === 0" class="subtle">No options available.</p>
 				</div>
+
+				<label class="filter-name-field">
+					<span class="field-label">Name (optional)</span>
+					<input
+						v-model="draftName"
+						type="text"
+						placeholder="Label for this filter"
+						@keydown.enter.prevent="addFilter"
+					/>
+				</label>
 			</div>
 
 			<div ref="actionsRef" role="toolbar" class="popover-actions">
 				<button type="button" class="neutral" @click="cancel">Cancel</button>
 				<button type="button" class="neutral" @click="clear">Clear</button>
-				<button type="button" @click="apply">Apply</button>
+				<button type="button" :disabled="!canAddFilter" @click="addFilter">Add filter</button>
+			</div>
+
+			<div v-if="savedFilters.length > 0" class="saved-filters">
+				<p class="saved-filters-heading">Filters</p>
+				<ul class="saved-filters-list">
+					<li
+						v-for="(entry, index) in savedFilters"
+						:key="entry.id"
+						class="saved-filter-item"
+					>
+						<label class="saved-filter-label">
+							<input
+								type="checkbox"
+								:checked="entry.enabled"
+								@change="toggleFilterEnabled(entry.id, $event.target.checked)"
+							/>
+							<span>{{ filterLabel(entry) }}</span>
+						</label>
+						<div class="saved-filter-actions" role="group" :aria-label="`Actions for ${filterLabel(entry)}`">
+							<button
+								type="button"
+								class="neutral saved-filter-action-button"
+								:disabled="index === 0"
+								aria-label="Move filter up"
+								@click="moveFilter(index, -1)"
+							>
+								↑
+							</button>
+							<button
+								type="button"
+								class="neutral saved-filter-action-button"
+								:disabled="index === savedFilters.length - 1"
+								aria-label="Move filter down"
+								@click="moveFilter(index, 1)"
+							>
+								↓
+							</button>
+							<button
+								type="button"
+								class="neutral saved-filter-action-button saved-filter-delete-button"
+								aria-label="Delete filter"
+								@click="deleteFilter(entry.id)"
+							>
+								<HugeiconsIcon
+									:icon="Delete02Icon"
+									width="0.9em"
+									height="0.9em"
+									:strokeWidth="2"
+									aria-hidden="true"
+								/>
+							</button>
+						</div>
+					</li>
+				</ul>
 			</div>
 		</div>
 	</Teleport>
@@ -83,11 +147,17 @@
 
 <script setup>
 import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Delete02Icon } from '@hugeicons/core-free-icons'
 import CheckGroup from './CheckGroup.vue'
 import RadioGroup from './RadioGroup.vue'
 import {
 	createEmptyFilter,
+	createFilterEntry,
+	describeFilter,
 	inferFilterType,
+	isFilterEntryActive,
+	normalizeColumnFilterEntries,
 	normalizeFilter,
 } from '../composables/tableFilters.js'
 
@@ -105,8 +175,8 @@ const props = defineProps({
 		default: null,
 	},
 	value: {
-		type: Object,
-		default: null,
+		type: Array,
+		default: () => [],
 	},
 	rows: {
 		type: Array,
@@ -132,6 +202,8 @@ const popoverStyle = ref({ top: '0px', left: '0px' })
 const checkGroupScrollStyle = ref({})
 const titleId = useId()
 const draft = ref(createEmptyFilter({ key: '' }))
+const draftName = ref('')
+const savedFilters = ref([])
 
 const filterType = computed(() => {
 	if (!props.header) {
@@ -142,18 +214,16 @@ const filterType = computed(() => {
 
 const columnLabel = computed(() => props.header?.label || props.header?.key || '')
 
-const selectedCount = computed(() => {
-	if (filterType.value !== 'select' || !Array.isArray(draft.value.values)) {
-		return 0
-	}
-	return draft.value.values.length
-})
+const activeSavedCount = computed(() =>
+	savedFilters.value.filter((entry) => isFilterEntryActive(entry)).length,
+)
 
 const popoverTitle = computed(() => {
-	if (filterType.value === 'select') {
-		return `Filter ${columnLabel.value} (${selectedCount.value} selected)`
+	const base = columnLabel.value
+	if (activeSavedCount.value > 0) {
+		return `Filter ${base} (${activeSavedCount.value})`
 	}
-	return `Filter ${columnLabel.value}`
+	return `Filter ${base}`
 })
 
 const booleanOptions = [
@@ -177,6 +247,15 @@ const booleanValue = computed({
 	},
 })
 
+const canAddFilter = computed(() =>
+	Boolean(normalizeFilter(props.header, draft.value, props.rows)),
+)
+
+function filterLabel(entry) {
+	const name = entry.name?.trim()
+	return name || describeFilter(props.header, entry)
+}
+
 function positionPopover() {
 	const anchor = props.anchorEl
 	if (!anchor || !popoverRef.value) {
@@ -254,22 +333,28 @@ function updateCheckGroupScrollLimit() {
 	}
 }
 
-function resetDraft() {
+function resetDraftForm() {
 	if (!props.header) {
 		draft.value = createEmptyFilter({ key: '' })
+		draftName.value = ''
 		return
 	}
 
-	const base = createEmptyFilter(props.header, props.rows)
-	if (props.value) {
-		draft.value = {
-			...base,
-			...JSON.parse(JSON.stringify(props.value)),
-		}
+	draft.value = createEmptyFilter(props.header, props.rows)
+	draftName.value = ''
+}
+
+function resetSavedFilters() {
+	if (!props.header) {
+		savedFilters.value = []
 		return
 	}
 
-	draft.value = base
+	savedFilters.value = normalizeColumnFilterEntries(props.value, props.header, props.rows)
+}
+
+function emitFilters() {
+	emit('apply', savedFilters.value.map((entry) => ({ ...entry })))
 }
 
 function onDocumentPointerDown(event) {
@@ -295,48 +380,110 @@ function onDocumentKeyDown(event) {
 	}
 }
 
-function apply() {
-	const normalized = normalizeFilter(props.header, draft.value, props.rows)
-	emit('apply', normalized)
-	emit('update:open', false)
+function addFilter() {
+	if (!canAddFilter.value) {
+		return
+	}
+
+	const entry = createFilterEntry(
+		props.header,
+		draft.value,
+		props.rows,
+		{ name: draftName.value },
+	)
+	if (!entry) {
+		return
+	}
+
+	savedFilters.value = [...savedFilters.value, entry]
+	resetDraftForm()
+	emitFilters()
+	nextTick(() => {
+		updateCheckGroupScrollLimit()
+		positionPopover()
+	})
+}
+
+function toggleFilterEnabled(id, enabled) {
+	savedFilters.value = savedFilters.value.map((entry) => (
+		entry.id === id ? { ...entry, enabled } : entry
+	))
+	emitFilters()
+}
+
+function moveFilter(index, direction) {
+	const targetIndex = index + direction
+	if (targetIndex < 0 || targetIndex >= savedFilters.value.length) {
+		return
+	}
+
+	const next = [...savedFilters.value]
+	const [entry] = next.splice(index, 1)
+	next.splice(targetIndex, 0, entry)
+	savedFilters.value = next
+	emitFilters()
+}
+
+function deleteFilter(id) {
+	savedFilters.value = savedFilters.value.filter((entry) => entry.id !== id)
+	emitFilters()
 }
 
 function clear() {
+	savedFilters.value = []
+	resetDraftForm()
 	emit('clear')
 	emit('update:open', false)
 }
 
 function cancel() {
-	emit('cancel')
 	emit('update:open', false)
+	emit('cancel')
+}
+
+function detachDocumentListeners() {
+	document.removeEventListener('pointerdown', onDocumentPointerDown)
+	document.removeEventListener('keydown', onDocumentKeyDown)
+}
+
+function attachDocumentListeners() {
+	detachDocumentListeners()
+	document.addEventListener('pointerdown', onDocumentPointerDown)
+	document.addEventListener('keydown', onDocumentKeyDown)
+}
+
+async function initializePopover() {
+	resetSavedFilters()
+	resetDraftForm()
+	await nextTick()
+	updateCheckGroupScrollLimit()
+	await nextTick()
+	positionPopover()
+	popoverRef.value?.querySelector('input, select, button')?.focus()
+	attachDocumentListeners()
 }
 
 watch(
-	() => [props.open, props.header, props.value, props.selectOptions.length],
-	async ([isOpen]) => {
+	() => [props.open, props.header?.key],
+	async ([isOpen, headerKey], previous) => {
+		const wasOpen = previous?.[0] ?? false
+		const previousHeaderKey = previous?.[1]
+
 		if (!isOpen) {
 			checkGroupScrollStyle.value = {}
-			document.removeEventListener('pointerdown', onDocumentPointerDown)
-			document.removeEventListener('keydown', onDocumentKeyDown)
+			detachDocumentListeners()
 			return
 		}
 
-		resetDraft()
-		await nextTick()
-		updateCheckGroupScrollLimit()
-		await nextTick()
-		positionPopover()
-		popoverRef.value?.querySelector('input, select, button')?.focus()
-
-		document.addEventListener('pointerdown', onDocumentPointerDown)
-		document.addEventListener('keydown', onDocumentKeyDown)
+		if (!wasOpen || headerKey !== previousHeaderKey) {
+			await initializePopover()
+		}
 	},
 	{ immediate: true },
 )
 
 onBeforeUnmount(() => {
-	document.removeEventListener('pointerdown', onDocumentPointerDown)
-	document.removeEventListener('keydown', onDocumentKeyDown)
+	detachDocumentListeners()
 })
 </script>
 
@@ -382,13 +529,22 @@ onBeforeUnmount(() => {
 	min-height: 0;
 }
 
+.filter-name-field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	margin-top: 0.75rem;
+	flex-shrink: 0;
+}
+
 .checkgroup-scroll {
 	overflow-y: auto;
 	min-height: 0;
 	overscroll-behavior: contain;
 }
 
-.filter-fields label {
+.filter-fields label,
+.filter-name-field {
 	display: flex;
 	flex-direction: column;
 	gap: 0.25rem;
@@ -410,12 +566,75 @@ onBeforeUnmount(() => {
 	border-top: 1px solid var(--border-color, #e1e5e9);
 }
 
+.saved-filters {
+	flex-shrink: 0;
+	margin-top: 0.75rem;
+	padding-top: 0.75rem;
+	border-top: 1px solid var(--border-color, #e1e5e9);
+	min-height: 0;
+}
+
+.saved-filters-heading {
+	margin: 0 0 0.5rem;
+	font-size: 0.85rem;
+	color: var(--text-muted, #666);
+}
+
+.saved-filters-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+	max-height: 12rem;
+	overflow-y: auto;
+}
+
+.saved-filter-item {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 0.35rem;
+}
+
+.saved-filter-label {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.45rem;
+	min-width: 0;
+}
+
+.saved-filter-label span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.saved-filter-actions {
+	display: inline-flex;
+	gap: 0.15rem;
+}
+
+.saved-filter-action-button {
+	min-width: 1.6rem;
+	padding-inline: 0.25rem;
+	font-size: 0.85rem;
+	line-height: 1.2;
+}
+
+.saved-filter-delete-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
 html[data-theme="dark"] .table-column-filter-popover {
 	background: var(--background-color, #1e1e1e);
 	border-color: var(--border-color, #444);
 }
 
-html[data-theme="dark"] .popover-actions {
+html[data-theme="dark"] .popover-actions,
+html[data-theme="dark"] .saved-filters {
 	border-top-color: var(--border-color, #444);
 }
 </style>