Glass Command · Vitreo

Preview

Installation

Install the package once, then import the parts you use into a standalone component.

Install

$ npm install ngx-vitreo @angular/cdk @floating-ui/dom

Import

import { GlassCommand, GlassCommandDialog, GlassCommandInput, GlassCommandList / GlassCommandEmpty, GlassCommandGroup, GlassCommandItem, GlassCommandSeparator / GlassCommandShortcut } from 'ngx-vitreo';

@Component({
  imports: [GlassCommand, GlassCommandDialog, GlassCommandInput, GlassCommandList / GlassCommandEmpty, GlassCommandGroup, GlassCommandItem, GlassCommandSeparator / GlassCommandShortcut],
  // ...
})

Usage

<glass-command-dialog [(open)]="open">
  <glass-command label="Commands">
    <glass-command-input placeholder="Type a command or search…" />
    <glass-command-list>
      <glass-command-empty>No results found.</glass-command-empty>
      <glass-command-group heading="Suggestions">
        <glass-command-item (select)="run($event)">
          New file
          <glass-command-shortcut>
            <span glassKbdGroup><kbd glassKbd>⌘</kbd><kbd glassKbd>N</kbd></span>
          </glass-command-shortcut>
        </glass-command-item>
      </glass-command-group>
      <glass-command-separator />
      <glass-command-group heading="Settings">
        <glass-command-item>Preferences</glass-command-item>
      </glass-command-group>
    </glass-command-list>
  </glass-command>
</glass-command-dialog>

API reference

`GlassCommand`

<glass-command>

Input	Type	Default	Description
`label`	`string`	None	Accessible name of the list. Not shown.
`value`	`string (model)`	first match	The highlighted item's value, with [(value)].
`shouldFilter`	`boolean`	`true`	Set to false to filter the items yourself.
`filter`	`(value: string, search: string, keywords?: string[]) => number`	cmdk's fuzzy score	Scores each item from 0 (hidden) to 1 (best match).
`loop`	`boolean`	`false`	Wraps the arrow keys from the last item to the first.

`GlassCommandDialog`

<glass-command-dialog>

Input	Type	Default	Description
`open`	`boolean (model)`	`false`	Controlled open state, with [(open)].
`title`	`string`	`'Command menu'`	Accessible name of the dialog. Not shown.
`class`	`string`	None	Classes for the glass panel.

`GlassCommandInput`

<glass-command-input>

Input	Type	Default	Description
`value`	`string (model)`	None	Controlled search text, with [(value)].
`placeholder`	`string`	None	Shown while the field is empty.

`GlassCommandList / GlassCommandEmpty`

<glass-command-list>, <glass-command-empty>

Input	Type	Default	Description
`—`	`—`	None	The scrolling results, whose height follows them up to 22rem or 60% of the viewport, and what shows when nothing matches.

`GlassCommandGroup`

<glass-command-group>

Input	Type	Default	Description
`heading`	`string`	None	A label over the group. The group hides while none of its items match.

`GlassCommandItem`

<glass-command-item>

Input	Type	Default	Description
`(select)`	`string`	None	Runs on click or Enter, with the item's value.
`value`	`string`	its text	What the search matches and the highlight reports.
`keywords`	`string[]`	`[]`	More words the search matches.
`disabled`	`boolean`	`false`	Dims the item and skips it with the arrow keys.

`GlassCommandSeparator / GlassCommandShortcut`

<glass-command-separator>, <glass-command-shortcut>

Input	Type	Default	Description
`alwaysRender`	`boolean`	`false`	Keeps the separator while a search is typed. The shortcut pushes its keys to the end of the item.