Command

<script setup lang="ts">
import { ref } from "vue";
import Command from "./components/ui/command.vue";
const notice = ref('');
</script>

<template>
  <Command :items="[{ value: 'settings', label: 'Open settings', onSelect: () => notice = 'Settings selected' }, { value: 'export', label: 'Export library', onSelect: () => notice = 'Export selected' }]" />
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

<script setup lang="ts">
import { computed, ref, useId } from "vue";
import {
  ListboxRoot,
  ListboxFilter,
  ListboxContent,
  ListboxItem,
} from "reka-ui";
import Dialog from "./dialog.vue";
import { RenderContent, useDisplayModel } from "./display-utils";
import type { CommandItem, DisplayContent } from "./display-types";
const props = withDefaults(
  defineProps<{
    trigger?: DisplayContent;
    title?: string;
    items: CommandItem[];
    open?: boolean;
    defaultOpen?: boolean;
    searchLabel?: string;
    searchPlaceholder?: string;
    emptyMessage?: DisplayContent;
  }>(),
  {
    trigger: "Open commands",
    title: "Command menu",
    open: undefined,
    defaultOpen: false,
    searchLabel: "Search commands",
    searchPlaceholder: "Search commands…",
    emptyMessage: "No matching commands.",
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  select: [item: CommandItem];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
    if (!value) search.value = "";
  },
);
const search = ref("");
const input = ref<InstanceType<typeof ListboxFilter>>();
const listId = `cr-command-list-${useId()}`;
const filtered = computed(() =>
  props.items.filter((item) =>
    `${item.label} ${item.description ?? ""}`
      .toLocaleLowerCase()
      .includes(search.value.toLocaleLowerCase()),
  ),
);
function select(value: unknown) {
  const item = props.items.find((item) => item.value === value);
  if (!item || item.disabled) return;
  item.onSelect?.();
  emit("select", item);
  expanded.value = false;
}
</script>
<template>
  <Dialog
    v-model:open="expanded"
    :trigger="trigger"
    :title="title"
    :initial-focus="() => input?.$el as HTMLInputElement"
    ><template v-if="$slots.trigger" #trigger><slot name="trigger" /></template
    ><ListboxRoot :model-value="null" @update:model-value="select"
      ><ListboxFilter
        ref="input"
        v-model="search"
        role="combobox"
        :aria-expanded="expanded"
        :aria-controls="listId"
        aria-autocomplete="list"
        :aria-label="searchLabel"
        :placeholder="searchPlaceholder"
        class="cr-input" /><ListboxContent
        :id="listId"
        :aria-label="title"
        class="cr-command-list"
        ><ListboxItem
          v-for="item in filtered"
          :key="item.value"
          :value="item.value"
          :disabled="item.disabled"
          class="cr-menu-item"
          ><span class="cr-command-item-text"
            ><span>{{ item.label }}</span
            ><small v-if="item.description" class="cr-description">{{
              item.description
            }}</small></span
          ></ListboxItem
        ></ListboxContent
      >
      <p v-if="!filtered.length" role="status" class="cr-description">
        <slot name="empty"
          ><RenderContent :content="emptyMessage"
        /></slot></p></ListboxRoot
  ></Dialog>
</template>