Command

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import { CommandDialog, Button, Kbd } from 'frontile';
import {
  UserIcon,
  StarIcon,
  SearchIcon,
  CodeIcon
} from 'site/components/icons';

const commands = [
  {
    key: 'calendar',
    label: 'Calendar',
    section: 'Suggestions',
    Icon: StarIcon
  },
  {
    key: 'search-emoji',
    label: 'Search Emoji',
    section: 'Suggestions',
    Icon: SearchIcon
  },
  {
    key: 'calculator',
    label: 'Calculator',
    section: 'Suggestions',
    Icon: CodeIcon
  },
  {
    key: 'profile',
    label: 'Profile',
    section: 'Settings',
    Icon: UserIcon,
    shortcut: 'mod+p'
  },
  {
    key: 'billing',
    label: 'Billing',
    section: 'Settings',
    Icon: CodeIcon,
    shortcut: 'mod+b'
  },
  {
    key: 'settings',
    label: 'Settings',
    section: 'Settings',
    Icon: CodeIcon,
    shortcut: 'mod+s'
  }
];

export default class CommandDialogExample extends Component {
  @tracked isOpen = false;
  @tracked lastSelected;

  open = () => (this.isOpen = true);
  close = () => (this.isOpen = false);

  select = (key) => {
    this.lastSelected = key;
    this.isOpen = false;
  };

  <template>
    <div class='demo-stack items-center'>
      <div class='flex items-center gap-4'>
        <Button @variant='outline' {{on 'click' this.open}}>
          Open palette
          <Kbd @keys='mod+k' @size='sm' @variant='outline' @class='ml-2' />
        </Button>
        {{#if this.lastSelected}}
          <span class='font-body text-body-sm text-neutral'>Selected:
            {{this.lastSelected}}</span>
        {{/if}}
      </div>

      <CommandDialog
        @isOpen={{this.isOpen}}
        @onOpen={{this.open}}
        @onClose={{this.close}}
        @onSelect={{this.select}}
        @shortcut='mod+k'
        @items={{commands}}
        @groupBy='section'
        @label='Search commands'
        @placeholder='Type a command or search…'
        as |c|
      >
        <c.Input />
        <c.List>
          <:item as |ctx|>
            <ctx.Item @key={{ctx.key}} @shortcut={{ctx.item.shortcut}}>
              <:start><ctx.item.Icon /></:start>
              <:default>{{ctx.label}}</:default>
            </ctx.Item>
          </:item>
          <:empty>No results for "{{c.query}}"</:empty>
        </c.List>
        <c.Footer />
      </CommandDialog>
    </div>
  </template>
}

import { Command } from 'frontile';
import { array } from '@ember/helper';

const commands = [
  { key: 'calendar', label: 'Calendar', section: 'Suggestions' },
  { key: 'search-emoji', label: 'Search Emoji', section: 'Suggestions' },
  { key: 'calculator', label: 'Calculator', section: 'Suggestions' },
  { key: 'profile', label: 'Profile', section: 'Settings' },
  { key: 'billing', label: 'Billing', section: 'Settings' },
  { key: 'settings', label: 'Settings', section: 'Settings' }
];

<template>
  <div class='demo-stack'>
    <Command
      @items={{commands}}
      @groupBy='section'
      @groups={{array 'Suggestions' 'Settings'}}
      @disabledKeys={{array 'calculator'}}
      @isBordered={{true}}
      @placeholder='Type a command or search…'
      as |c|
    >
      <c.Input />
      <c.List>
        <:item as |ctx|>
          <ctx.Item @key={{ctx.key}}>{{ctx.label}}</ctx.Item>
        </:item>
      </c.List>
    </Command>
  </div>
</template>

import Component from '@glimmer/component';
import { Command } from 'frontile';

const ALL = [
  'Argentina',
  'Australia',
  'Austria',
  'Brazil',
  'Canada',
  'Denmark',
  'Finland',
  'France',
  'Germany',
  'Japan',
  'Mexico',
  'Netherlands',
  'New Zealand',
  'Norway',
  'Poland',
  'South Africa',
  'Spain',
  'Sweden'
];

export default class AsyncCommandExample extends Component {
  search = async (query) => {
    // Stand-in for a network request.
    await new Promise((resolve) => setTimeout(resolve, 400));

    if (!query) return [];

    return ALL.filter((name) =>
      name.toLowerCase().includes(query.toLowerCase())
    ).map((name) => ({ key: name.toLowerCase(), label: name }));
  };

  <template>
    <div class='demo-stack'>
      <Command
        @onSearch={{this.search}}
        @isBordered={{true}}
        @placeholder='Search countries…'
        as |c|
      >
        <c.Input />
        <c.List>
          <:item as |ctx|>
            <ctx.Item @key={{ctx.key}}>{{ctx.label}}</ctx.Item>
          </:item>
          <:loading>Searching…</:loading>
          <:prompt>Search for a country…</:prompt>
          <:empty>No matches for "{{c.query}}"</:empty>
        </c.List>
      </Command>
    </div>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Command } from 'frontile';
import { filterAndRankItems } from 'frontile/utils/filter';
import { array } from '@ember/helper';

const NAVIGATION = [
  { key: 'nav:accounts', label: 'Accounts', section: 'Navigation' },
  { key: 'nav:billing', label: 'Billing', section: 'Navigation' },
  { key: 'nav:settings', label: 'Settings', section: 'Navigation' }
];

const RECENTS = [{ key: 'recent:acme', label: 'Acme Corp', section: 'Recent' }];

// Stand-in for a server that matches fields the client never sees — here, a
// trade name. Try "acme": the second row has no "acme" in its label at all.
const REMOTE = [
  { key: 'acct:1', label: 'Wile E. Coyote Enterprises', section: 'Accounts' },
  { key: 'acct:2', label: 'Acme Anvils LLC', section: 'Accounts' }
];

export default class MixedCommandExample extends Component {
  @tracked query = '';
  @tracked remote = [];
  @tracked isLoading = false;

  updateQuery = async (query) => {
    this.query = query;

    if (!query.trim()) {
      this.remote = [];
      return;
    }

    this.isLoading = true;
    await new Promise((resolve) => setTimeout(resolve, 300));
    this.remote = REMOTE;
    this.isLoading = false;
  };

  // Static entries are ranked with the same scorer the component would use.
  // Remote entries are appended as-is: the server already decided.
  get items() {
    const local =
      filterAndRankItems(
        [...RECENTS, ...NAVIGATION],
        this.query,
        (item) => item.label
      ) ?? [];

    return [...local, ...this.remote];
  }

  <template>
    <div class='demo-stack'>
      <Command
        @items={{this.items}}
        @query={{this.query}}
        @onQueryChange={{this.updateQuery}}
        @isLoading={{this.isLoading}}
        @disableFiltering={{true}}
        @groupBy='section'
        @groups={{array 'Recent' 'Navigation' 'Accounts'}}
        @isBordered={{true}}
        @placeholder="Try 'acme'…"
        as |c|
      >
        <c.Input />
        <c.List>
          <:item as |ctx|>
            <ctx.Item @key={{ctx.key}} @description={{ctx.item.section}}>
              {{ctx.label}}
            </ctx.Item>
          </:item>
          <:empty>No results for "{{c.query}}"</:empty>
        </c.List>
      </Command>
    </div>
  </template>
}