Filter UI

Filter field and menu filtering for AppKit.

Installation

.package(url: "https://github.com/freyaalminde/filter-ui.git", branch: "main"),

.product(name: "FilterUI", package: "filter-ui"),

Overview

Filter Search Field

A filter search field is a search field with a special appearance and added functionality.

Note: Vibrancy affects the appearance.

let field = FilterSearchField()

Filter buttons can be added to the trailing edge of the filter field.

let field = FilterSearchField()
field.addFilterButton(systemSymbolName: "doc", toolTip: …)
field.addFilterButton(image: …, alternateImage: …, toolTip: …)

Progress can be displayed, either indeterminate or determinate.

let field = FilterSearchField()
field.progress = FilterSearchField.indeterminateProgress
field.progress = 0.25

Filter Token Field

The filter token field lets you use tokens for filtering.

Different comparison types can be used with the filter token field.

let field = FilterTokenField()
field.objectValue = [
    FilterTokenValue(objectValue: "Hello", comparisonType: .contains),
    FilterTokenValue(objectValue: "Filter UI", comparisonType: .contains),
]

Filtering Menu

Filter UI provides a subclass of NSMenu called FilteringMenu which adds a filter field to the menu, similar to how the jump bar menus in Xcode are filterable.

Menu filtering works by replacing the standard keystroke-based selection (type select). When a user presses a key, the filter field appears at the top of the menu and is focused. While typing, menu items are filtered based on fuzzy matching of the items’ titles. Matching parts are displayed in bold while non-matching parts are grayed out.

Roadmap

1.0

Token field
- 1px top clipping issue
- Users should be able to leave text without it turning into a token
Resolve issues with cancel buttons

Later

Mini, small, and large sizes
Token fields should support keys
Filtering menu without using private APIs

Acknowledgements

Thanks to FuzzySearch by Viktoras Laukevičius for fuzzy matching of strings.

Big thanks goes out to OEXTokenField by Octiplex for ideas on how to customize token fields.

freysie/filter-ui