Command Palette

<script setup>
import { computed, ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { CommandPalette } from "@dicehub/kappa/components/command-palette";

const open = ref(false);
const query = ref("");
const selected = ref("");
const groups = [
  {
    label: "Commands",
    items: [
      { id: "create", title: "Create new project" },
      { id: "settings", title: "Open settings" },
      { id: "search", title: "Search files" },
    ],
  },
  {
    label: "Pages",
    items: [
      { id: "home", title: "Home" },
      { id: "dashboard", title: "Dashboard" },
    ],
  },
];
const filteredGroups = computed(() => groups
  .map((group) => ({
    ...group,
    items: group.items.filter((item) =>
      item.title.toLowerCase().includes(query.value.toLowerCase()),
    ),
  }))
  .filter((group) => group.items.length));
const flatten = (items) => items.flatMap((group) => group.items);
const title = (item) => item.title;
const select = (item) => {
  selected.value = item.title;
  query.value = "";
  open.value = false;
};
</script>

<template>
  <Button @click="open = true">Open Command Palette</Button>
  <p v-if="selected">Last selected: {{ selected }}</p>
  <CommandPalette.Root
    v-model:open="open"
    v-model:value="query"
    :filter="false"
    :get-selectable-items="flatten"
    :item-to-string-value="title"
    :items="filteredGroups"
    @select="select"
  >
    <CommandPalette.Input placeholder="Type a command or search..." />
    <CommandPalette.List>
      <CommandPalette.Results v-slot="{ item: group }">
        <CommandPalette.Group :items="group.items">
          <CommandPalette.GroupLabel>{{ group.label }}</CommandPalette.GroupLabel>
          <CommandPalette.Items v-slot="{ item }">
            <CommandPalette.Item :value="item">{{ item.title }}</CommandPalette.Item>
          </CommandPalette.Items>
        </CommandPalette.Group>
      </CommandPalette.Results>
      <CommandPalette.Empty>No commands found.</CommandPalette.Empty>
    </CommandPalette.List>
    <CommandPalette.Footer>
      <span><kbd>↑↓</kbd> Navigate</span>
      <span><kbd>Enter</kbd> Select</span>
    </CommandPalette.Footer>
  </CommandPalette.Root>
</template>

<script setup>
import { ref } from "vue";
import { CommandPalette } from "@dicehub/kappa/components/command-palette";

const open = ref(false);
const actions = [
  { id: "copy", title: "Copy" },
  { id: "paste", title: "Paste" },
  { id: "cut", title: "Cut" },
  { id: "delete", title: "Delete" },
];
</script>

<template>
  <button @click="open = true">Open Simple Palette</button>
  <CommandPalette.Root v-model:open="open" :items="actions" @select="open = false">
    <CommandPalette.Input placeholder="Search actions..." />
    <CommandPalette.List>
      <CommandPalette.Results v-slot="{ item }">
        <CommandPalette.Item :value="item">{{ item.title }}</CommandPalette.Item>
      </CommandPalette.Results>
      <CommandPalette.Empty>No actions found.</CommandPalette.Empty>
    </CommandPalette.List>
  </CommandPalette.Root>
</template>

<script setup>
import { ref } from "vue";
import { CommandPalette } from "@dicehub/kappa/components/command-palette";

const open = ref(false);
const loading = ref(false);
const items = ref([]);
const openPalette = async () => {
  open.value = true;
  loading.value = true;
  items.value = await loadCommands();
  loading.value = false;
};
</script>

<template>
  <button @click="openPalette">Open with Loading</button>
  <CommandPalette.Root v-model:open="open" :items="loading ? [] : items">
    <CommandPalette.Input placeholder="Search..." />
    <CommandPalette.List>
      <CommandPalette.Loading v-if="loading" />
      <template v-else>
        <CommandPalette.Results v-slot="{ item }">
          <CommandPalette.Item :value="item">{{ item.title }}</CommandPalette.Item>
        </CommandPalette.Results>
        <CommandPalette.Empty>No results found.</CommandPalette.Empty>
      </template>
    </CommandPalette.List>
  </CommandPalette.Root>
</template>

<CommandPalette.Input
  autocomplete="off"
  autocapitalize="none"
  autocorrect="off"
  data-1p-ignore="true"
  data-lpignore="true"
  placeholder="Search commands..."
  :spellcheck="false"
/>

<script setup>
import { ref } from "vue";
import { CommandPalette } from "@dicehub/kappa/components/command-palette";

const open = ref(false);
const results = [
  { id: "button", title: "Button", breadcrumbs: ["Components"] },
  { id: "dialog", title: "Dialog", breadcrumbs: ["Components"] },
  { id: "header", title: "Page Header", breadcrumbs: ["Blocks"] },
];
</script>

<template>
  <button @click="open = true">Open with ResultItem</button>
  <CommandPalette.Root v-model:open="open" :items="results" @select="open = false">
    <CommandPalette.Input placeholder="Search documentation..." />
    <CommandPalette.List>
      <CommandPalette.Results v-slot="{ item }">
        <CommandPalette.ResultItem
          :breadcrumbs="item.breadcrumbs"
          :description="item.description"
          :title="item.title"
          :value="item"
        />
      </CommandPalette.Results>
      <CommandPalette.Empty>No pages found.</CommandPalette.Empty>
    </CommandPalette.List>
  </CommandPalette.Root>
</template>