Components

Command

The command palette: a modal sheet at the top of the page carrying a search field over the caller's commands, grouped as a ledger with a keycap hint at each row. The shell is the dialog machinery — scrim, focus trap, Escape — and the searching is the combobox machinery driving our own list: the vessel and the list live inside the sheet, so the combobox renders no separate popup and the machine's content grafts onto the sheet's list. The input part carries one `as never`: its prop union outgrows what h() can resolve (TS2590).

#Basic usage

command/basic Vue React

Nothing run yet.

command/basic.vue

<script setup lang="ts">
import { Button, Command } from "@bysages/vue";
import { ref } from "vue";

const open = ref(false);
const status = ref("Nothing run yet.");

const commands = [
  { label: "New document", value: "file.new", group: "File", hint: "N" },
  { label: "Save", value: "file.save", group: "File", hint: "S" },
  { label: "Export as PDF", value: "file.export", group: "File", hint: "E" },
  { label: "Toggle theme", value: "appearance.theme", group: "Appearance", hint: "T" },
  { label: "Increase density", value: "appearance.density-up", group: "Appearance", hint: "+" },
  { label: "Decrease density", value: "appearance.density-down", group: "Appearance", hint: "-" },
  { label: "Open documentation", value: "help.docs", group: "Help", hint: "?" },
  { label: "Keyboard shortcuts", value: "help.keys", group: "Help", hint: "K" },
];

const run = (value: string) => {
  status.value = `Ran ${value}`;
};
</script>

<template>
  <div class="w-full">
    <Button @click="open = true">
      Open command palette
      <span class="ms-2 text-xs text-tertiary"> Ctrl K </span>
    </Button>
    <Command v-model:open="open" :items="commands" placeholder="Type a command…" @select="run" />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </div>
</template>

command/searching Vue React

Open the palette and type “the”, “app”, or nothing at all — typing narrows the ledger across every group, and the empty state speaks when nothing answers.

command/searching.vue

<script setup lang="ts">
import { Button, Command } from "@bysages/vue";
import { ref } from "vue";

const open = ref(false);

const commands = [
  { label: "New document", value: "file.new", group: "File", hint: "N" },
  { label: "Save", value: "file.save", group: "File", hint: "S" },
  { label: "Export as PDF", value: "file.export", group: "File", hint: "E" },
  { label: "Toggle theme", value: "appearance.theme", group: "Appearance", hint: "T" },
  { label: "Increase density", value: "appearance.density-up", group: "Appearance", hint: "+" },
  { label: "Decrease density", value: "appearance.density-down", group: "Appearance", hint: "-" },
  { label: "Open documentation", value: "help.docs", group: "Help", hint: "?" },
  { label: "Keyboard shortcuts", value: "help.keys", group: "Help", hint: "K" },
];
</script>

<template>
  <div class="w-full">
    <p class="mb-4 text-sm text-tertiary">
      Open the palette and type “the”, “app”, or nothing at all — typing narrows the ledger across
      every group, and the empty state speaks when nothing answers.
    </p>
    <Button @click="open = true">Open and start typing</Button>
    <Command
      v-model:open="open"
      :items="commands"
      placeholder="Type a command…"
      @select="open = false"
    />
  </div>
</template>

#Props

#Command

The input part carries one as never: its prop union outgrows what h() can resolve (TS2590).

Prop	Type	Default	Description
`items`	`Array as PropType<CommandEntry[]>`	`() => []`	—
`placeholder`	`String`	`undefined`	—
`open`	`Boolean`	`undefined`	—
`autoFilter`	`Boolean`	`true`	—
`inputValue`	`String`	`undefined`	—
`emptyText`	`String`	`"No matching commands"`	—
`onSelect`	`Function as PropType<(value: string) => void>`	`undefined`	—