npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-command-palette

v0.2.3

Published

[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]

Downloads

3,473

Readme

Command Palette for Vue

NPM Minzip Package NPM Download

A fast, composable, unstyled Command + K interface (Command Palette) for Vue.

Preview

Preview

Concepts

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.

Table of Contents

Features

  • 🧩 Compound Component + Namespaced Components Design
  • 💄 Completely unstyled, but more customizable
  • 🔍 Fuzzy search support to find relevant command
  • ⌨️ keyboard shortcut support to bind custom keybindings to your command

Install

yarn add vue-command-palette
# or
pnpm add vue-command-palette

Usage

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>

Command + K or ?

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>

Events

| Name | Description | Parameters | | :-----------: | --------------------------------------------------------------------- | :--------------- | | select-item | Every time an item is being selected in Command or Command.Dialog | (item) => void |

Styling

All namespaced components have a specific data-attribute starting with command- that can be used for styling.

eg:

div[command-root=''] {
  background: #ffffff;
}

Animation

Command.Dialog

Command.Dialog wraped by built-in components Transition, you can customize the animation using the name command-dialog .

Example Code

List Item Height

Animate height using the --command-list-height CSS variable.

Example Code

Namespaced components

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 [command-root=""]

The root component, Passes the theme props to set your own style.

<Command theme="custom">
  <!-- Contains other namespaced components -->
</Command>

Command.Dialog [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 [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 [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 [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 [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 [command-separator=""]

Usually used to distinguish between different groups

Command.Empty [command-empty=""]

Automatically renders when there are no results for the search query.

Command.Loading [command-loading=""]

Your should manually control loading

Inspiration

  • cmdk - Fast, unstyled command menu React component.
  • kbar - fast, portable, and extensible cmd+k interface for your site.

License

MIT @xiaoluoboding