\n\n\n\n\nA fast, composable, unstyled
\nCommand
+K
interface (Command Palette) for Vue.
Command palette interfaces are used to create a web experience where users can quickly get in charge with keyboard shortcuts, rather than using the mouse.
\nWith macOS's Spotlight
and Raycast
's command palette experience in mind, vue-command-palette
is designed to provide a fast, composable, unstyled command palette to your site.
TOC
\n- \n
- Command Palette for Vue\n
- \n
- Preview \n
- Concepts \n
- Table of Contents \n
- Features \n
- Install \n
- Usage\n
- \n
- Command + K or ? \n
- Events \n
- Styling \n
- Animation\n\n \n
\n - Namespaced components\n
- \n
- Command
[command-root=\"\"]
\n - Command.Dialog
[command-dialog=\"\"]
\n - Command.Input
[command-input=\"\"]
\n - Command.List
[command-list=\"\"]
\n - Command.Group
[command-group=\"\"]
\n - Command.Item
[command-item=\"\"]
\n - Command.Separator
[command-separator=\"\"]
\n - Command.Empty
[command-empty=\"\"]
\n - Command.Loading
[command-loading=\"\"]
\n
\n - Command
- Inspiration \n
- License \n
\n
- \n
- ๐งฉ Compound Component + Namespaced Components Design \n
- ๐ Completely unstyled, but more customizable \n
- ๐ Fuzzy search support to find relevant command \n
- โจ๏ธ keyboard shortcut support to bind custom keybindings to your command \n
yarn add vue-command-palette\n# or\npnpm add vue-command-palette
Then you can import the Command
Compound Component in your project.
<script lang=\"ts\" setup>\nimport { ref } from 'vue'\nimport { Command } from 'vue-command-palette'\n</script>\n\n<template>\n <Command theme=\"custom\">\n <Command.Input placeholder=\"Type a command or search...\" />\n <Command.List>\n <Command.Empty>No results found.</Command.Empty>\n\n <Command.Group heading=\"Letters\">\n <Command.Item>a</Command.Item>\n <Command.Item>b</Command.Item>\n <Command.Separator />\n <Command.Item>c</Command.Item>\n </Command.Group>\n\n <Command.Item>Apple</Command.Item>\n </Command.List>\n </Command>\n</template>\n\n<style>\n// import your custom css\n@import '~/assets/css/custom.css';\n</style>
or in a dialog:
\n<script lang=\"ts\" setup>\nimport { ref } from 'vue'\nimport { Command } from 'vue-command-palette'\n\nconst visible = ref(false)\n</script>\n\n<template>\n <Command.Dialog :visible=\"visible\" theme=\"custom\">\n <template #header>\n <Command.Input placeholder=\"Type a command or search...\" />\n </template>\n <template #body>\n <Command.List>\n <Command.Empty>No results found.</Command.Empty>\n\n <Command.Group heading=\"Letters\">\n <Command.Item>a</Command.Item>\n <Command.Item>b</Command.Item>\n <Command.Separator />\n <Command.Item>c</Command.Item>\n </Command.Group>\n\n <Command.Item>Apple</Command.Item>\n </Command.List>\n </template>\n </Command.Dialog>\n</template>\n\n<style>\n// import your custom css\n@import '~/assets/css/custom.css';\n</style>
Do I have to use command + K? No, it's just a convention that you can use any key binding to perform the Command Palette.
\n\n\nTips, we use
\n@vueuse/core
to bind the keybindings
<script lang=\"ts\" setup>\n import { watch } from 'vue'\n import { useMagicKeys } from '@vueuse/core'\n\n const keys = useMagicKeys()\n const CmdK = keys['Meta+K']\n\n watch(CmdK, (v) => {\n if (v) {\n console.log('Meta + K has been pressed')\n // do your own logic, maybe make dialog visible\n }\n })\n</script>
Name | \nDescription | \nParameters | \n
---|---|---|
select-item | \nEvery time an item is being selected in Command or Command.Dialog | \n(item) => void | \n
All namespaced components have a specific data-attribute
starting with command-
that can be used for styling.
eg:
\ndiv[command-root=''] {\n background: #ffffff;\n}
Command.Dialog
wraped by built-in components Transition, you can customize the animation using the name command-dialog
.
Animate height using the --command-list-height
CSS variable.
With Namespaced components, You can use component tags with dots like <Foo.Bar>
to refer to components nested under object properties. This is useful when you import multiple components from a single file.
The root component, Passes the theme
props to set your own style.
<Command theme=\"custom\">\n <!-- Contains other namespaced components -->\n</Command>
The root component with a dialog interface, Teleport dialog to body
tag. Passes the theme
props to set your own style, and visible
props control whether render it.
<Command.Dialog :visible=\"visible\" theme=\"custom\">\n <!-- Contains other namespaced components -->\n <template #header></template>\n <template #body></template>\n <template #footer></template>\n</Command.Dialog>
data-attribute
within dialog
- \n
[command-dialog-mask]
- the mask is always rendered. \n[command-dialog-wrapper]
- the wrapper on top of mask. \n[command-dialog-header]
- the parent of dialog header slot. \n[command-dialog-body]
- the parent of dialog body slot. \n[command-dialog-footer]
- the parent of dialog footer slot. \n
Usually we need a input in the command palette to search sth.
\n<Command.Input\n placeholder=\"Type a command or search...\"\n v-model:value=\"inputValue\"\n/>
Contains items and groups. Animate height using the --command-list-height
CSS variable.
[command-list] {\n min-height: 300px;\n height: var(--command-list-height);\n max-height: 500px;\n transition: height 100ms ease;\n}
<Command.List>\n <!-- Contains Group, Item, Empty -->\n</Command.List>
Group items ([command-group-items]
) together with the given heading
([command-group-heading]
)
<Command.Group heading=\"Perference\">\n <Command.Item>Toggle Dark Mode</Command.Item>\n <Command.Item>Change Language</Command.Item>\n</Command.Group>
Passed the data-value
, we use data-value
to fetch the value.
<Command.Item\n v-for=\"item in items\"\n :data-value=\"item.label\"\n :shortcut=\"item.shortcut\"\n :perform=\"item.perform\"\n @select=\"(itemInfo) => console.log('selected', itemInfo)\"\n // the itemInfo.value is some as `data-value`\n>\n {{ item.label }}\n</Command.Item>
Usually used to distinguish between different groups
\n\nAutomatically renders when there are no results for the search query.
\n\nYour should manually control loading
- \n
- cmdk - Fast, unstyled command menu React component. \n
- kbar - fast, portable, and extensible cmd+k interface for your site. \n
MIT @xiaoluoboding
\n