docs: update README.md

Author: xiaoluoboding

README.md

@@ -1,10 +1,18 @@
-# Command Palette for Vue 3
+# Command Palette for Vue
+
+![vue-command-palette minzip package size](https://img.shields.io/bundlephobia/minzip/vue-command-palette)
+![vue-command-palette package version](https://img.shields.io/npm/v/vue-command-palette.svg?colorB=green)
+
+> A fast, composable, unstyled `command` + `k` command palette for Vue.
 
 ## Preview
 
+![Preview](public/vue-command-palette.gif)
+
 ## Features
 
 - 🧩 [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) Design
+- 💄 Completely unstyled, but more customizable
 - 🔍 Fuzzy search support to find relevant command
 - ⌨️ keyboard shortcut support to bind custom keybindings to your command
 
@@ -42,8 +50,6 @@ Then you can import the `Command` [Compound Component](https://kentcdodds.com/bl
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Command } from 'vue-command-palette'
-
-const visible = ref(false)
 </script>
 
 <style>
@@ -116,6 +122,11 @@ const visible = ref(false)
 
 ### Command.Loading
 
+## Inspiration
+
+- [cmdk](https://github.com/pacocoursey/cmdk) - Fast, unstyled command menu React component.
+- [kbar](https://github.com/timc1/kbar) - fast, portable, and extensible cmd+k interface for your site.
+
 ## License
 
 MIT [@xiaoluoboding](https://github.com/xiaoluoboding)

components.d.ts

@@ -7,6 +7,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
+    'Carbon:logoGithub': typeof import('~icons/carbon/logo-github')['default']
+    'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
     CmdkPlaceholder: typeof import('./src/components/common/CmdkPlaceholder.vue')['default']
     FigmaIcon: typeof import('./src/components/icons/FigmaIcon.vue')['default']
     Home: typeof import('./src/components/command/raycast/Home.vue')['default']
@@ -21,6 +24,7 @@ declare module '@vue/runtime-core' {
     LinearRemoveLabelIcon: typeof import('./src/components/icons/LinearRemoveLabelIcon.vue')['default']
     LinearSetDueDateIcon: typeof import('./src/components/icons/LinearSetDueDateIcon.vue')['default']
     Logo: typeof import('./src/components/icons/Logo.vue')['default']
+    'Mdi:heart': typeof import('~icons/mdi/heart')['default']
     MoonIcon: typeof import('./src/components/icons/MoonIcon.vue')['default']
     Projects: typeof import('./src/components/command/vercel/Projects.vue')['default']
     Raycast: typeof import('./src/components/command/raycast/Raycast.vue')['default']

packages/CommandList.vue

@@ -39,10 +39,7 @@ watchEffect(() => {
     observer = new ResizeObserver((entries) => {
       nextTick(() => {
         const height = sizer?.offsetHeight
-        const wrapperH = wrapper?.offsetHeight
 
-        console.log(height)
-        console.log(wrapperH)
         wrapper?.style.setProperty(
           '--command-list-height',
           `${height?.toFixed(1)}px`

public/vue-command-palette.gif

@@ -204,7 +204,15 @@ const togglePage = () => {
 whenever(
   () => current.has('backspace'),
   () => {
-    if (isHomePage.value || inputValue.value.length) return
+    const commandInputEl = document.querySelector(
+      'input[command-input]'
+    ) as HTMLInputElement
+    if (
+      isHomePage.value ||
+      inputValue.value.length ||
+      commandInputEl.value.length
+    )
+      return
     togglePage()
   }
 )