paletteController
The browser half of the command palette.
import { paletteController } from "@sdxc/ui/app";Usage
Wires the palette <dialog> the host sits in, for as long as the host stays mounted.
Signature
paletteController(options: PaletteController.Options): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
options | PaletteController.Options | Yes | The toggle key, the copy it announces with, and where recents come from. |
Examples
<div hidden mix={[paletteController({ shortcut: "mod+k", open: "Open command menu", results: "{count} results", recent: [] })]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/app too.
PALETTE_RECENT_LIMIT
How many recent commands the palette offers before anything is typed.
const PALETTE_RECENT_LIMIT = 5PALETTE_ITEM_ATTRIBUTE
Marks each row with its command's id, which recent and the remembered list name.
const PALETTE_ITEM_ATTRIBUTE = "data-palette-item"PALETTE_CONTROL_ATTRIBUTE
Marks the link or button a row presses.
const PALETTE_CONTROL_ATTRIBUTE = "data-palette-control"PALETTE_GOTO_ATTRIBUTE
Names the page a row's control opens instead of acting.
const PALETTE_GOTO_ATTRIBUTE = "data-palette-goto"PALETTE_PAGE_ATTRIBUTE
Marks a page of commands with its id.
const PALETTE_PAGE_ATTRIBUTE = "data-palette-page"PALETTE_CLONE_ATTRIBUTE
Marks a row the island copied into the Recent group.
const PALETTE_CLONE_ATTRIBUTE = "data-palette-clone"PALETTE_HINT_ATTRIBUTE
Marks a shortcut hint with the combo it prints, so the island reprints it per platform.
const PALETTE_HINT_ATTRIBUTE = "data-shortcut-hint"foldSearchText
Lower-cases text and strips its accents, so "cafe" finds "Café" and "Équipe" finds "equipe".
foldSearchText(value: string): string| Parameter | Type | Required | Description |
|---|---|---|---|
value | string | Yes | Text to fold. |
PaletteController.Options
Plain data only, since the options cross into the browser with the palette's island.
type PaletteController.Options = {
/** The combo that toggles the palette. */
shortcut: string;
/** The help-sheet label of that combo. */
open: string;
/** The announced result count, with `{count}` replaced. */
results: string;
/** Ids of commands the server offers under Recent. */
recent: string[];
/** The `localStorage` key commands run from the palette are remembered under. */
remember?: string;
}