Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
vue-command-palette
Advanced tools
[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]
A fast, composable, unstyled
Command
+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.
With 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.
yarn add vue-command-palette
# or
pnpm add vue-command-palette
Then you can import the Command
Compound Component in your project.
<template>
<Command theme="custom">
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Letters">
<Command.Item>a</Command.Item>
<Command.Item>b</Command.Item>
<Command.Separator />
<Command.Item>c</Command.Item>
</Command.Group>
<Command.Item>Apple</Command.Item>
</Command.List>
</Command>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Command } from 'vue-command-palette'
</script>
<style>
// import your custom css
@import '~/assets/css/custom.css';
</style>
or in a dialog:
<template>
<Command.Dialog :visible="visible" theme="custom">
<template #header>
<Command.Input placeholder="Type a command or search..." />
</template>
<template #body>
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Letters">
<Command.Item>a</Command.Item>
<Command.Item>b</Command.Item>
<Command.Separator />
<Command.Item>c</Command.Item>
</Command.Group>
<Command.Item>Apple</Command.Item>
</Command.List>
</template>
</Command.Dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Command } from 'vue-command-palette'
const visible = ref(false)
</script>
<style>
// import your custom css
@import '~/assets/css/custom.css';
</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.
Tips, we use
@vueuse/core
to bind the keybindings
<script lang="ts" setup>
import { watch } from 'vue'
import { useMagicKeys } from '@vueuse/core'
const keys = useMagicKeys()
const CmdK = keys['Meta+K']
watch(CmdK, (v) => {
if (v) {
console.log('Meta + K has been pressed')
// do your own logic, maybe make dialog visible
}
})
</script>
Name | Description | Parameters |
---|---|---|
select-item | Every time an item is being selected in Command or Command.Dialog | (item) => void |
All namespaced components have a specific data-attribute
starting with command-
that can be used for styling.
eg:
div[command-root=''] {
background: #ffffff;
}
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.
[command-root=""]
The root component, Passes the theme
props to set your own style.
<Command theme="custom">
<!-- Contains other namespaced components -->
</Command>
[command-dialog=""]
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">
<!-- Contains other namespaced components -->
<template #header></template>
<template #body></template>
<template #footer></template>
</Command.Dialog>
data-attribute
within dialog
[command-dialog-mask]
- the mask is always rendered.[command-dialog-wrapper]
- the wrapper on top of mask.[command-dialog-header]
- the parent of dialog header slot.[command-dialog-body]
- the parent of dialog body slot.[command-dialog-footer]
- the parent of dialog footer slot.[command-input=""]
Usually we need a input in the command palette to search sth.
<Command.Input
placeholder="Type a command or search..."
v-model:value="inputValue"
/>
[command-list=""]
Contains items and groups. Animate height using the --command-list-height
CSS variable.
[command-list] {
min-height: 300px;
height: var(--command-list-height);
max-height: 500px;
transition: height 100ms ease;
}
<Command.List>
<!-- Contains Group, Item, Empty -->
</Command.List>
[command-group=""]
Group items ([command-group-items]
) together with the given heading
([command-group-heading]
)
<Command.Group heading="Perference">
<Command.Item>Toggle Dark Mode</Command.Item>
<Command.Item>Change Language</Command.Item>
</Command.Group>
[command-item=""]
Passed the data-value
, we use data-value
to fetch the value.
<Command.Item
v-for="item in items"
:data-value="item.label"
:shortcut="item.shortcut"
:perform="item.perform"
@select="(itemInfo) => console.log('selected', itemInfo)"
// the itemInfo.value is some as `data-value`
>
{{ item.label }}
</Command.Item>
[command-separator=""]
Usually used to distinguish between different groups
[command-empty=""]
Automatically renders when there are no results for the search query.
[command-loading=""]
Your should manually control loading
MIT @xiaoluoboding
FAQs
[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]
We found that vue-command-palette demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.