Listbox

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { Listbox } from '@frontile/collections';

export default class DemoComponent extends Component {
  @tracked selectedKeys: string[] = [];

  @action
  onAction(key: string) {
    console.log('Click on key', key);
  }

  @action
  onSelectionChange(keys: string[]) {
    this.selectedKeys = keys;
  }

  <template>
    <div class="w-[260px] border px-1 py-2 rounded border-default-200 text-foreground not-prose">
      <Listbox
        @isKeyboardEventsEnabled={{true}}
        @allowEmpty={{true}}
        @selectionMode="multiple"
        @items={{animals}}
        @selectedKeys={{this.selectedKeys}}
        @onSelectionChange={{this.onSelectionChange}}
        @onAction={{this.onAction}}
        @intent="primary"
      />
    </div>
    <div class="py-2 px-1">
      Selected Keys: "{{this.selectedKeys}}"
    </div>
  </template>
}

const animals = [
  'cheetah',
  'crocodile',
  'elephant',
  'giraffe',
  'kangaroo',
  'koala',
  'lemming',
  'lemur',
  'lion',
  'lobster',
  'panda',
  'penguin',
  'tiger',
  'zebra'
];

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { Listbox } from '@frontile/collections';

const disabledKeys = ['reset']

export default class DemoComponent extends Component {

  @action
  onAction(key: string) {
    console.log('Click on key', key);
  }

  <template>
    <div class="w-[260px] border px-1 py-2 rounded border-default-200 text-foreground not-prose">
      <Listbox
        @isKeyboardEventsEnabled={{true}}
        @onAction={{this.onAction}}
        @appearance="faded"
        @disabledKeys={{disabledKeys}}
        as |l|
      >
        <l.Item @key="profile" @description="View my profile">
          My Provile
        </l.Item>
        <l.Item @key="settings" @shortcut="⌘⇧S">Settings</l.Item>
        <l.Item @key="notifications" @shortcut="⌘⇧N" @withDivider={{true}}>
          Notifications
        </l.Item>
        <l.Item
          @key="reset"
          @intent="danger"
          @class="text-danger"
        >
          Reset Settings 
        </l.Item>
        <l.Item
          @key="delete"
          @shortcut="⌘⇧D"
          @intent="danger"
          @class="text-danger"
        >
          Delete Account
        </l.Item>
      </Listbox>
    </div>
  </template>
}