├── .vscode
    └── extensions.json
├── og:image.png
├── packages
    ├── CommandProvider.vue
    ├── useCommandEvent.ts
    ├── utils.ts
    ├── types.ts
    ├── CommandGroup.vue
    ├── CommandInput.vue
    ├── useCommandState.ts
    ├── CommandList.vue
    ├── CommandDialog.vue
    ├── CommandItem.vue
    ├── index.ts
    └── CommandRoot.vue
├── .github
    └── FUNDING.yml
├── vue-command-palette.gif
├── .prettierrc
├── src
    ├── composables
    │   └── useDarkmode.ts
    ├── vite-env.d.ts
    ├── components
    │   ├── common
    │   │   └── CmdkPlaceholder.vue
    │   ├── command
    │   │   ├── vercel
    │   │   │   ├── Projects.vue
    │   │   │   ├── Item.vue
    │   │   │   ├── Vercel.vue
    │   │   │   └── Home.vue
    │   │   ├── raycast
    │   │   │   ├── Item.vue
    │   │   │   ├── Raycast.vue
    │   │   │   └── Home.vue
    │   │   ├── Linear.vue
    │   │   └── Self.vue
    │   └── icons
    │   │   ├── VercelIcon.vue
    │   │   ├── LinearChangePriorityIcon.vue
    │   │   ├── RaycasTerminalIcon.vue
    │   │   ├── VercelPlusIcon.vue
    │   │   ├── VercelProjectsIcon.vue
    │   │   ├── VercelContactIcon.vue
    │   │   ├── MoonIcon.vue
    │   │   ├── VercelTeamsIcon.vue
    │   │   ├── VercelDocsIcon.vue
    │   │   ├── VercelFeedbackIcon.vue
    │   │   ├── VercelCopyIcon.vue
    │   │   ├── YouTubeIcon.vue
    │   │   ├── LinearChangeLabelsIcon.vue
    │   │   ├── LinearRemoveLabelIcon.vue
    │   │   ├── LinearAssignToIcon.vue
    │   │   ├── RaycastWindowIcon.vue
    │   │   ├── LinearChangeStatusIcon.vue
    │   │   ├── FigmaIcon.vue
    │   │   ├── RaycastFinderIcon.vue
    │   │   ├── LinearSetDueDateIcon.vue
    │   │   ├── RaycastClipboardIcon.vue
    │   │   ├── LinearIcon.vue
    │   │   ├── RaycastIcon.vue
    │   │   ├── SunIcon.vue
    │   │   ├── RaycastHammerIcon.vue
    │   │   ├── RaycastDarkIcon.vue
    │   │   ├── RaycastStarIcon.vue
    │   │   ├── RaycastLightIcon.vue
    │   │   ├── LinearAssignToMeIcon.vue
    │   │   └── SlackIcon.vue
    ├── assets
    │   └── scss
    │   │   ├── highlight.scss
    │   │   ├── vercel.scss
    │   │   ├── linear.scss
    │   │   ├── global.scss
    │   │   ├── algolia.scss
    │   │   ├── framer.scss
    │   │   └── raycast.scss
    ├── main.ts
    ├── plugins
    │   └── highlight.ts
    └── App.vue
├── tsconfig.node.json
├── .gitignore
├── index.html
├── tsconfig.build.json
├── unocss.config.ts
├── tsconfig.json
├── api-extractor.json
├── LICENSE
├── package.json
├── vite.config.ts
├── components.d.ts
├── CHANGELOG.md
└── README.md


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/og:image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoluoboding/vue-command-palette/HEAD/og:image.png


--------------------------------------------------------------------------------
/packages/CommandProvider.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div command-provider="" />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: [xiaoluoboding]
4 | 


--------------------------------------------------------------------------------
/vue-command-palette.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoluoboding/vue-command-palette/HEAD/vue-command-palette.gif


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false,
4 |   "singleQuote": true,
5 |   "semi": false,
6 |   "trailingComma": "none",
7 |   "printWidth": 80
8 | }


--------------------------------------------------------------------------------
/src/composables/useDarkmode.ts:
--------------------------------------------------------------------------------
1 | import { useDark, useToggle } from '@vueuse/core'
2 | 
3 | export const isDark = useDark()
4 | export const toggleDarkmode = useToggle(isDark)
5 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 | 
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/common/CmdkPlaceholder.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup></script>
 2 | 
 3 | <template>
 4 |   <div class="flex-center">
 5 |     <div class="text-6xl text-[var(--app-text)]">
 6 |       ⌘K
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/command/vercel/Projects.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import Item from './Item.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <Item v-for="n in 6" :data-value="`Project ${n}`">
 7 |     {{ `Project ${n}` }}
 8 |   </Item>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     aria-label="Vercel Logo"
 4 |     fill="var(--highContrast)"
 5 |     height="26"
 6 |     viewBox="0 0 75 65"
 7 |   >
 8 |     <path d="M37.59.25l36.95 64H.64l36.95-64z" />
 9 |   </svg>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/assets/scss/highlight.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:meta';
 2 | 
 3 | html {
 4 |   @include meta.load-css('highlight.js/styles/github');
 5 | }
 6 | html.dark {
 7 |   @include meta.load-css('highlight.js/styles/github-dark');
 8 | }
 9 | 
10 | code.hljs {
11 |   border-radius: 16px;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import 'uno.css'
 5 | import '@unocss/reset/tailwind-compat.css'
 6 | import './assets/scss/global.scss'
 7 | import highlight from '~/plugins/highlight'
 8 | 
 9 | const app = createApp(App)
10 | 
11 | app.use(highlight)
12 | app.mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearChangePriorityIcon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
3 |     <rect x="1" y="8" width="3" height="6" rx="1" />
4 |     <rect x="6" y="5" width="3" height="9" rx="1" />
5 |     <rect x="11" y="2" width="3" height="12" rx="1" />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | lib
13 | dist-ssr
14 | *.local
15 | 
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | temp
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycasTerminalIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="24"
 4 |     height="24"
 5 |     viewBox="0 0 24 24"
 6 |     fill="none"
 7 |     stroke="currentColor"
 8 |     strokeWidth="2"
 9 |     strokeLinecap="round"
10 |     strokeLinejoin="round"
11 |   >
12 |     <polyline points="4 17 10 11 4 5" />
13 |     <line x1="12" y1="19" x2="20" y2="19" />
14 |   </svg>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelPlusIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path d="M12 5v14" />
14 |     <path d="M5 12h14" />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title>Vue Command Palette</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <script type="module" src="/src/main.ts"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/packages/useCommandEvent.ts:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import type { ItemInfo } from './types'
 3 | 
 4 | export interface Events {
 5 |   selectItem: ItemInfo
 6 |   rerenderList: boolean
 7 | }
 8 | 
 9 | function useCommandEvent() {
10 |   const itemInfo = ref<ItemInfo>()
11 |   const rerenderList = ref(false)
12 | 
13 |   return {
14 |     itemInfo,
15 |     rerenderList,
16 |   }
17 | }
18 | 
19 | export { useCommandEvent }
20 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelProjectsIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path d="M3 3h7v7H3z" />
14 |     <path d="M14 3h7v7h-7z" />
15 |     <path d="M14 14h7v7h-7z" />
16 |     <path d="M3 14h7v7H3z" />
17 |   </svg>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelContactIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path
14 |       d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
15 |     />
16 |     <path d="M22 6l-10 7L2 6" />
17 |   </svg>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/src/components/icons/MoonIcon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg width="1em" height="1em" viewBox="0 0 32 32">
3 |     <path
4 |       d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z"
5 |       fill="currentColor"
6 |     />
7 |   </svg>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelTeamsIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
14 |     <circle cx="9" cy="7" r="4" />
15 |     <path d="M23 21v-2a4 4 0 00-3-3.87" />
16 |     <path d="M16 3.13a4 4 0 010 7.75" />
17 |   </svg>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelDocsIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
14 |     <path d="M14 2v6h6" />
15 |     <path d="M16 13H8" />
16 |     <path d="M16 17H8" />
17 |     <path d="M10 9H8" />
18 |   </svg>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "compilerOptions": {
 4 |     "declaration": true,
 5 |     "noEmit": false,
 6 |     "emitDeclarationOnly": true,
 7 |     "outDir": "lib",
 8 |     "declarationDir": "./temp",
 9 |     "moduleResolution": "Node",
10 |     "baseUrl": "./",
11 |   },
12 |   "vueCompilerOptions": {
13 |     "skipTemplateCodegen": true,
14 |   },
15 |   "include": [
16 |     "packages/**/*.ts",
17 |     "packages/**/*.d.ts",
18 |     "packages/**/*.tsx",
19 |     "packages/**/*.vue"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelFeedbackIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path
14 |       d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
15 |     />
16 |   </svg>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, presetAttributify, presetUno } from 'unocss'
 2 | 
 3 | export default defineConfig({
 4 |   presets: [presetUno(), presetAttributify()],
 5 |   shortcuts: [
 6 |     {
 7 |       'flex-center': 'flex justify-center items-center',
 8 |       'flex-col-center': 'flex flex-col justify-center items-center',
 9 |       'flex-between': 'flex justify-between items-center',
10 |       'text-neon':
11 |         'text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 to-emerald-700 dark:to-emerald-300 ',
12 |     },
13 |   ],
14 | })
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "moduleResolution": "Node",
 6 |     "paths": {
 7 |       "@/*": ["packages/*"],
 8 |       "~/*": ["./src/*"]
 9 |     },
10 |     "sourceMap": true,
11 |   },
12 |   "references": [{ "path": "./tsconfig.node.json" }],
13 |   "include": [
14 |     "src/**/*.ts",
15 |     "src/**/*.d.ts",
16 |     "src/**/*.tsx",
17 |     "src/**/*.vue",
18 |     "packages/**/*.ts",
19 |     "packages/**/*.d.ts",
20 |     "packages/**/*.tsx",
21 |     "packages/**/*.vue"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/packages/utils.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Helpers
 3 |  */
 4 | 
 5 | export function findNextSibling(el: Element, selector: string) {
 6 |   let sibling = el.nextElementSibling
 7 | 
 8 |   while (sibling) {
 9 |     if (sibling.matches(selector))
10 |       return sibling
11 |     sibling = sibling.nextElementSibling
12 |   }
13 | }
14 | 
15 | export function findPreviousSibling(el: Element, selector: string) {
16 |   let sibling = el.previousElementSibling
17 | 
18 |   while (sibling) {
19 |     if (sibling.matches(selector))
20 |       return sibling
21 |     sibling = sibling.previousElementSibling
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/icons/VercelCopyIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="none"
 4 |     height="24"
 5 |     shapeRendering="geometricPrecision"
 6 |     stroke="currentColor"
 7 |     strokeLinecap="round"
 8 |     strokeLinejoin="round"
 9 |     strokeWidth="1.5"
10 |     viewBox="0 0 24 24"
11 |     width="24"
12 |   >
13 |     <path
14 |       d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"
15 |     />
16 |   </svg>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/src/components/icons/YouTubeIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 48 48"
 5 |     width="48px"
 6 |     height="48px"
 7 |   >
 8 |     <path
 9 |       fill="#FF3D00"
10 |       d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z"
11 |     />
12 |     <path fill="#FFF" d="M20 31L20 17 32 24z" />
13 |   </svg>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearChangeLabelsIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
 3 |     <path
 4 |       fillRule="evenodd"
 5 |       clipRule="evenodd"
 6 |       d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
 7 |     />
 8 |   </svg>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearRemoveLabelIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
 3 |     <path
 4 |       fillRule="evenodd"
 5 |       clipRule="evenodd"
 6 |       d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
 7 |     />
 8 |   </svg>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearAssignToIcon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
3 |     <path
4 |       d="M7 7a2.5 2.5 0 10.001-4.999A2.5 2.5 0 007 7zm0 1c-1.335 0-4 .893-4 2.667v.666c0 .367.225.667.5.667h2.049c.904-.909 2.417-1.911 4.727-2.009v-.72a.27.27 0 01.007-.063C9.397 8.404 7.898 8 7 8zm4.427 2.028a.266.266 0 01.286.032l2.163 1.723a.271.271 0 01.013.412l-2.163 1.97a.27.27 0 01-.452-.2v-.956c-3.328.133-5.282 1.508-5.287 1.535a.27.27 0 01-.266.227h-.022a.27.27 0 01-.249-.271c0-.046 1.549-3.328 5.824-3.509v-.72a.27.27 0 01.153-.243z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastWindowIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="32"
 4 |     height="32"
 5 |     viewBox="0 0 16 16"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       d="M14.25 4.75V3.75C14.25 2.64543 13.3546 1.75 12.25 1.75H3.75C2.64543 1.75 1.75 2.64543 1.75 3.75V4.75M14.25 4.75V12.25C14.25 13.3546 13.3546 14.25 12.25 14.25H3.75C2.64543 14.25 1.75 13.3546 1.75 12.25V4.75M14.25 4.75H1.75"
11 |       stroke="currentColor"
12 |       strokeWidth="1.5"
13 |       strokeLinecap="round"
14 |       strokeLinejoin="round"
15 |     />
16 |   </svg>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/src/components/command/vercel/Item.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { Command } from '@/index'
 3 | import type { ItemInfo } from '@/types'
 4 | 
 5 | defineProps({
 6 |   shortcut: {
 7 |     type: Array,
 8 |   },
 9 | })
10 | 
11 | const emit = defineEmits<(e: 'select', item: ItemInfo) => void>()
12 | 
13 | const onSelect = (item: ItemInfo) => emit('select', item)
14 | </script>
15 | 
16 | <template>
17 |   <Command.Item @select="onSelect">
18 |     <slot />
19 |     <div command-vercel-shortcuts="">
20 |       <kbd v-for="key in shortcut" key="key">{{ key }}</kbd>
21 |     </div>
22 |   </Command.Item>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/src/components/command/raycast/Item.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { Command } from '@/index'
 3 | import type { ItemInfo } from '@/types'
 4 | 
 5 | defineProps({
 6 |   isCommand: {
 7 |     type: Boolean,
 8 |     default: false,
 9 |   },
10 | })
11 | 
12 | const emit = defineEmits<(e: 'select', item: ItemInfo) => void>()
13 | 
14 | const onSelect = (item: ItemInfo) => emit('select', item)
15 | </script>
16 | 
17 | <template>
18 |   <Command.Item @select="onSelect">
19 |     <slot />
20 |     <span command-raycast-meta="">
21 |       {{ isCommand ? 'Command' : 'Application' }}
22 |     </span>
23 |   </Command.Item>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearChangeStatusIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="16" height="16" viewBox="-1 -1 15 15" fill="currentColor">
 3 |     <path
 4 |       d="M10.5714 7C10.5714 8.97245 8.97245 10.5714 7 10.5714L6.99975 3.42857C8.9722 3.42857 10.5714 5.02755 10.5714 7Z"
 5 |     />
 6 |     <path
 7 |       fillRule="evenodd"
 8 |       clipRule="evenodd"
 9 |       d="M7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z"
10 |     />
11 |   </svg>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/icons/FigmaIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 48 48"
 5 |     width="48px"
 6 |     height="48px"
 7 |   >
 8 |     <path
 9 |       fill="#e64a19"
10 |       d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z"
11 |     />
12 |     <path
13 |       fill="#7c4dff"
14 |       d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z"
15 |     />
16 |     <path
17 |       fill="#66bb6a"
18 |       d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"
19 |     />
20 |     <path
21 |       fill="#ff7043"
22 |       d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z"
23 |     />
24 |     <circle cx="32" cy="24" r="7" fill="#29b6f6" />
25 |   </svg>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastFinderIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="32"
 4 |     height="32"
 5 |     viewBox="0 0 16 16"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       d="M5 4.75V6.25M11 4.75V6.25M8.75 1.75H3.75C2.64543 1.75 1.75 2.64543 1.75 3.75V12.25C1.75 13.3546 2.64543 14.25 3.75 14.25H8.75M8.75 1.75H12.25C13.3546 1.75 14.25 2.64543 14.25 3.75V12.25C14.25 13.3546 13.3546 14.25 12.25 14.25H8.75M8.75 1.75L7.08831 7.1505C6.9202 7.69686 7.32873 8.25 7.90037 8.25C8.36961 8.25 8.75 8.63039 8.75 9.09963V14.25M5 10.3203C5 10.3203 5.95605 11.25 8 11.25C10.0439 11.25 11 10.3203 11 10.3203"
11 |       stroke="currentColor"
12 |       strokeWidth="1.5"
13 |       strokeLinecap="round"
14 |       strokeLinejoin="round"
15 |     />
16 |   </svg>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/packages/types.ts:
--------------------------------------------------------------------------------
 1 | import type { IFuseOptions } from 'fuse.js'
 2 | 
 3 | export interface ItemInfo {
 4 |   key: string
 5 |   value: string
 6 | }
 7 | 
 8 | export type Noop = () => void
 9 | 
10 | export interface CommandRootProps {
11 |   theme?: string
12 |   fuseOptions?: IFuseOptions<any>
13 | }
14 | 
15 | export type CommandRootEmits = {
16 |   selectItem: [item: ItemInfo]
17 | }
18 | 
19 | export interface CommandItemProps {
20 |   shortcut?: string[]
21 |   perform?: Noop
22 | }
23 | 
24 | export type CommandItemEmits = {
25 |   select: [item: ItemInfo]
26 | }
27 | 
28 | export interface CommandInputProps {
29 |   placeholder?: string
30 |   value?: string
31 | }
32 | 
33 | export type CommandInputEmits = {
34 |   input: [ie: InputEvent]
35 |   'update:value': [val: any]
36 | }
37 | 
38 | export interface CommandGroupProps {
39 |   heading: string
40 | }
41 | 


--------------------------------------------------------------------------------
/api-extractor.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 3 |   "mainEntryPointFilePath": "<projectFolder>/temp/index.d.ts",
 4 |   "bundledPackages": [],
 5 |   "compiler": {
 6 |     "tsconfigFilePath": "<projectFolder>/tsconfig.build.json"
 7 |   },
 8 |   "apiReport": {
 9 |     "enabled": false
10 |   },
11 |   "docModel": {
12 |     "enabled": false
13 |   },
14 |   "dtsRollup": {
15 |     "enabled": true,
16 |     "untrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>.d.ts"
17 |   },
18 |   "tsdocMetadata": {
19 |     "enabled": false
20 |   },
21 |   "messages": {
22 |     "extractorMessageReporting": {
23 |       "ae-forgotten-export": {
24 |         "logLevel": "none"
25 |       },
26 |       "ae-missing-release-tag": {
27 |         "logLevel": "none"
28 |       }
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearSetDueDateIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
 3 |     <path
 4 |       fillRule="evenodd"
 5 |       clipRule="evenodd"
 6 |       d="M15 5C15 2.79086 13.2091 1 11 1H5C2.79086 1 1 2.79086 1 5V11C1 13.2091 2.79086 15 5 15H6.25C6.66421 15 7 14.6642 7 14.25C7 13.8358 6.66421 13.5 6.25 13.5H5C3.61929 13.5 2.5 12.3807 2.5 11V6H13.5V6.25C13.5 6.66421 13.8358 7 14.25 7C14.6642 7 15 6.66421 15 6.25V5ZM11.5001 8C11.9143 8 12.2501 8.33579 12.2501 8.75V10.75L14.2501 10.75C14.6643 10.75 15.0001 11.0858 15.0001 11.5C15.0001 11.9142 14.6643 12.25 14.2501 12.25L12.2501 12.25V14.25C12.2501 14.6642 11.9143 15 11.5001 15C11.0859 15 10.7501 14.6642 10.7501 14.25V12.25H8.75C8.33579 12.25 8 11.9142 8 11.5C8 11.0858 8.33579 10.75 8.75 10.75L10.7501 10.75V8.75C10.7501 8.33579 11.0859 8 11.5001 8Z"
 7 |     />
 8 |   </svg>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastClipboardIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div command-raycast-clipboard-icon="">
 3 |     <svg
 4 |       width="32"
 5 |       height="32"
 6 |       viewBox="0 0 16 16"
 7 |       fill="none"
 8 |       xmlns="http://www.w3.org/2000/svg"
 9 |     >
10 |       <path
11 |         d="M6.07512 2.75H4.75C3.64543 2.75 2.75 3.64543 2.75 4.75V12.25C2.75 13.3546 3.64543 14.25 4.75 14.25H11.25C12.3546 14.25 13.25 13.3546 13.25 12.25V4.75C13.25 3.64543 12.3546 2.75 11.25 2.75H9.92488M9.88579 3.02472L9.5934 4.04809C9.39014 4.75952 8.73989 5.25 8 5.25V5.25C7.26011 5.25 6.60986 4.75952 6.4066 4.04809L6.11421 3.02472C5.93169 2.38591 6.41135 1.75 7.07573 1.75H8.92427C9.58865 1.75 10.0683 2.3859 9.88579 3.02472Z"
12 |         stroke="currentColor"
13 |         strokeWidth="1.5"
14 |         strokeLinecap="round"
15 |         strokeLinejoin="round"
16 |       />
17 |     </svg>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="64" height="64" viewBox="0 0 64 64" fill="none" style="{style}">
 3 |     <path
 4 |       d="M0.403013 37.3991L26.6009 63.597C13.2225 61.3356 2.66442 50.7775 0.403013 37.3991Z"
 5 |       fill="#5E6AD2"
 6 |     />
 7 |     <path
 8 |       d="M0 30.2868L33.7132 64C35.7182 63.8929 37.6742 63.6013 39.5645 63.142L0.85799 24.4355C0.398679 26.3259 0.10713 28.2818 0 30.2868Z"
 9 |       fill="#5E6AD2"
10 |     />
11 |     <path
12 |       d="M2.53593 19.4042L44.5958 61.4641C46.1277 60.8066 47.598 60.0331 48.9956 59.1546L4.84543 15.0044C3.96691 16.402 3.19339 17.8723 2.53593 19.4042Z"
13 |       fill="#5E6AD2"
14 |     />
15 |     <path
16 |       d="M7.69501 11.1447C13.5677 4.32093 22.2677 0 31.9769 0C49.6628 0 64 14.3372 64 32.0231C64 41.7323 59.6791 50.4323 52.8553 56.305L7.69501 11.1447Z"
17 |       fill="#5E6AD2"
18 |     />
19 |   </svg>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="28"
 4 |     height="28"
 5 |     viewBox="0 0 28 28"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       fillRule="evenodd"
11 |       clipRule="evenodd"
12 |       d="M7 18.073V20.994L0 13.994L1.46 12.534L7 18.075V18.073ZM9.921 20.994H7L14 27.994L15.46 26.534L9.921 20.994V20.994ZM26.535 15.456L27.996 13.994L13.996 -0.00598145L12.538 1.46002L18.077 6.99802H14.73L10.864 3.14002L9.404 4.60002L11.809 7.00402H10.129V17.87H20.994V16.19L23.399 18.594L24.859 17.134L20.994 13.268V9.92102L26.534 15.456H26.535ZM7.73 6.27002L6.265 7.73202L7.833 9.29802L9.294 7.83802L7.73 6.27002ZM20.162 18.702L18.702 20.164L20.268 21.732L21.73 20.27L20.162 18.702V18.702ZM4.596 9.40402L3.134 10.866L7 14.732V11.809L4.596 9.40402ZM16.192 21H13.268L17.134 24.866L18.596 23.404L16.192 21Z"
13 |       fill="#FF6363"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/icons/SunIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="1em" height="1em" viewBox="0 0 32 32">
 3 |     <path
 4 |       d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
 5 |       fill="currentColor"
 6 |     />
 7 |     <path
 8 |       d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z"
 9 |       fill="currentColor"
10 |     />
11 |     <path d="M2 15.005h5v2H2z" fill="currentColor" />
12 |     <path
13 |       d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z"
14 |       fill="currentColor"
15 |     />
16 |     <path d="M15 25.005h2v5h-2z" fill="currentColor" />
17 |     <path
18 |       d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z"
19 |       fill="currentColor"
20 |     />
21 |     <path d="M25 15.005h5v2h-5z" fill="currentColor" />
22 |     <path
23 |       d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z"
24 |       fill="currentColor"
25 |     />
26 |     <path d="M15 2.005h2v5h-2z" fill="currentColor" />
27 |   </svg>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastHammerIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div command-raycast-hammer-icon="">
 3 |     <svg
 4 |       width="32"
 5 |       height="32"
 6 |       viewBox="0 0 16 16"
 7 |       fill="none"
 8 |       xmlns="http://www.w3.org/2000/svg"
 9 |     >
10 |       <path
11 |         d="M6.73762 6.19288L2.0488 11.2217C1.6504 11.649 1.6504 12.3418 2.0488 12.769L3.13083 13.9295C3.52923 14.3568 4.17515 14.3568 4.57355 13.9295L9.26238 8.90071M6.73762 6.19288L7.0983 5.80605C7.4967 5.37877 7.4967 4.686 7.0983 4.25872L6.01627 3.09822L6.37694 2.71139C7.57213 1.42954 9.50991 1.42954 10.7051 2.71139L13.9512 6.19288C14.3496 6.62017 14.3496 7.31293 13.9512 7.74021L12.8692 8.90071C12.4708 9.328 11.8248 9.328 11.4265 8.90071L11.0658 8.51388C10.6674 8.0866 10.0215 8.0866 9.62306 8.51388L9.26238 8.90071M6.73762 6.19288L9.26238 8.90071"
12 |         stroke="currentColor"
13 |         strokeWidth="1.5"
14 |         strokeLinecap="round"
15 |         strokeLinejoin="round"
16 |       />
17 |     </svg>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastDarkIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="1024"
 4 |     height="1024"
 5 |     viewBox="0 0 1024 1024"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       fillRule="evenodd"
11 |       clipRule="evenodd"
12 |       d="M301.144 634.799V722.856L90 511.712L134.244 467.804L301.144 634.799ZM389.201 722.856H301.144L512.288 934L556.34 889.996L389.201 722.856ZM889.996 555.956L934 511.904L512.096 90L468.092 134.052L634.799 300.952H534.026L417.657 184.679L373.605 228.683L446.065 301.144H395.631V628.561H723.048V577.934L795.509 650.395L839.561 606.391L723.048 489.878V389.105L889.996 555.956ZM323.17 278.926L279.166 322.978L326.385 370.198L370.39 326.145L323.17 278.926ZM697.855 653.61L653.994 697.615L701.214 744.834L745.218 700.782L697.855 653.61ZM228.731 373.413L184.679 417.465L301.144 533.93V445.826L228.731 373.413ZM578.174 722.856H490.07L606.535 839.321L650.587 795.269L578.174 722.856Z"
13 |       fill="#FF6363"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastStarIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="32"
 4 |     height="32"
 5 |     viewBox="0 0 16 16"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       d="M7.43376 2.17103C7.60585 1.60966 8.39415 1.60966 8.56624 2.17103L9.61978 5.60769C9.69652 5.85802 9.92611 6.02873 10.186 6.02873H13.6562C14.2231 6.02873 14.4665 6.75397 14.016 7.10088L11.1582 9.3015C10.9608 9.45349 10.8784 9.71341 10.9518 9.95262L12.0311 13.4735C12.2015 14.0292 11.5636 14.4777 11.1051 14.1246L8.35978 12.0106C8.14737 11.847 7.85263 11.847 7.64022 12.0106L4.89491 14.1246C4.43638 14.4777 3.79852 14.0292 3.96889 13.4735L5.04824 9.95262C5.12157 9.71341 5.03915 9.45349 4.84178 9.3015L1.98404 7.10088C1.53355 6.75397 1.77692 6.02873 2.34382 6.02873H5.81398C6.07389 6.02873 6.30348 5.85802 6.38022 5.60769L7.43376 2.17103Z"
11 |       stroke="currentColor"
12 |       strokeWidth="1.5"
13 |       strokeLinecap="round"
14 |       strokeLinejoin="round"
15 |     />
16 |   </svg>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/packages/CommandGroup.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { computed } from 'vue'
 3 | import { nanoid } from 'nanoid'
 4 | 
 5 | import { useCommandState } from './useCommandState'
 6 | import type { CommandGroupProps } from './types';
 7 | 
 8 | defineOptions({
 9 |   name: 'Command.Group',
10 | })
11 | 
12 | defineProps<CommandGroupProps>()
13 | 
14 | const groupId = computed(() => `command-group-${nanoid()}`)
15 | 
16 | const { filtered, isSearching } = useCommandState()
17 | 
18 | const isRender = computed(() =>
19 |   !isSearching.value ? true : filtered.value.groups.has(groupId.value),
20 | )
21 | </script>
22 | 
23 | <template>
24 |   <div
25 |     v-show="isRender"
26 |     :key="groupId"
27 |     command-group=""
28 |     role="presentation"
29 |     :command-group-key="groupId"
30 |     :data-value="heading"
31 |   >
32 |     <div v-if="heading" command-group-heading="">
33 |       {{ heading }}
34 |     </div>
35 |     <div command-group-items="" role="group">
36 |       <slot />
37 |     </div>
38 |   </div>
39 | </template>
40 | 


--------------------------------------------------------------------------------
/src/components/icons/RaycastLightIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="1024"
 4 |     height="1024"
 5 |     viewBox="0 0 1024 1024"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       fillRule="evenodd"
11 |       clipRule="evenodd"
12 |       d="M934.302 511.971L890.259 556.017L723.156 388.902V300.754L934.302 511.971ZM511.897 89.5373L467.854 133.583L634.957 300.698H723.099L511.897 89.5373ZM417.334 184.275L373.235 228.377L445.776 300.923H533.918L417.334 184.275ZM723.099 490.061V578.209L795.641 650.755L839.74 606.652L723.099 490.061ZM697.868 653.965L723.099 628.732H395.313V300.754L370.081 325.987L322.772 278.675L278.56 322.833L325.869 370.146L300.638 395.379V446.071L228.097 373.525L183.997 417.627L300.638 534.275V634.871L133.59 467.925L89.4912 512.027L511.897 934.461L555.996 890.359L388.892 723.244H489.875L606.516 839.892L650.615 795.79L578.074 723.244H628.762L653.994 698.011L701.303 745.323L745.402 701.221L697.868 653.965Z"
13 |       fill="#FF6363"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Yunwei Xiao 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/packages/CommandInput.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { computed, ref, watchEffect } from 'vue'
 3 | </script>
 4 | 
 5 | <script lang="ts" setup>
 6 | import type { CommandInputEmits, CommandInputProps } from './types';
 7 | import { useCommandState } from './useCommandState'
 8 | 
 9 | defineOptions({
10 |   name: 'Command.Input',
11 | })
12 | 
13 | defineProps<CommandInputProps>()
14 | 
15 | const emit = defineEmits<CommandInputEmits>()
16 | 
17 | const inputRef = ref<HTMLInputElement | null>(null)
18 | const { search } = useCommandState()
19 | const localSearch = computed(() => search.value)
20 | 
21 | function handleInput(e: Event) {
22 |   const event = e as InputEvent
23 |   const input = e.target as HTMLInputElement
24 |   search.value = input?.value
25 |   emit('input', event)
26 |   emit('update:value', search.value)
27 | }
28 | 
29 | watchEffect(() => {
30 |   inputRef.value?.focus()
31 | })
32 | </script>
33 | 
34 | <template>
35 |   <input
36 |     ref="inputRef"
37 |     command-input=""
38 |     auto-focus
39 |     auto-complete="off"
40 |     auto-correct="off"
41 |     :spell-check="false"
42 |     aria-autocomplete="list"
43 |     role="combobox"
44 |     :aria-expanded="true"
45 |     :placeholder="placeholder"
46 |     :value="localSearch"
47 |     @input="handleInput"
48 |   >
49 | </template>
50 | 


--------------------------------------------------------------------------------
/packages/useCommandState.ts:
--------------------------------------------------------------------------------
 1 | import { computed, reactive, toRefs } from 'vue'
 2 | 
 3 | interface FilteredItem {
 4 |   count: number
 5 |   items: Map<string, any>
 6 |   groups: Set<string>
 7 | }
 8 | 
 9 | interface State {
10 |   // Event State
11 |   selectedNode: string
12 |   selectedGroup: string
13 |   shouldRerender: boolean
14 |   // Input State
15 |   search: string
16 |   filtered: FilteredItem
17 | }
18 | 
19 | const state = reactive<State>({
20 |   selectedNode: '',
21 |   selectedGroup: '',
22 |   shouldRerender: false,
23 |   /** Value of the search query. */
24 |   search: '',
25 |   filtered: {
26 |     /** The count of all visible items. */
27 |     count: 0,
28 |     /** Map from visible item id. */
29 |     items: new Map(),
30 |     /** Set of groups with at least one visible item. */
31 |     groups: new Set(),
32 |   },
33 | })
34 | 
35 | function useCommandState() {
36 |   const isSearching = computed(() => state.search !== '')
37 | 
38 |   const resetStore = () => {
39 |     // reset the command state
40 |     state.search = ''
41 |     state.filtered.count = 0
42 |     state.filtered.items = new Map()
43 |     state.filtered.groups = new Set()
44 |   }
45 | 
46 |   return {
47 |     isSearching,
48 |     resetStore,
49 |     ...toRefs(state),
50 |   }
51 | }
52 | 
53 | export { useCommandState }
54 | 


--------------------------------------------------------------------------------
/src/components/icons/LinearAssignToMeIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
 3 |     <path
 4 |       d="M7.00003 7C8.38128 7 9.50003 5.88125 9.50003 4.5C9.50003 3.11875 8.38128 2 7.00003 2C5.61878 2 4.50003 3.11875 4.50003 4.5C4.50003 5.88125 5.61878 7 7.00003 7Z"
 5 |     />
 6 |     <path
 7 |       fillRule="evenodd"
 8 |       clipRule="evenodd"
 9 |       d="M7.00005 8C5.66505 8 3.00006 8.89333 3.00006 10.6667V11.3333C3.00006 11.7 3.22506 12 3.50006 12H3.98973C4.01095 11.9415 4.04535 11.8873 4.09266 11.8425L7.21783 8.88444C7.28966 8.81658 7.38297 8.77917 7.4796 8.77949C7.69459 8.78018 7.86826 8.96356 7.86753 9.1891L7.86214 10.629C9.00553 10.5858 10.0366 10.4354 10.9441 10.231C10.5539 8.74706 8.22087 8 7.00005 8Z"
10 |     />
11 |     <path
12 |       d="M6.72511 14.718C6.80609 14.7834 6.91767 14.7955 7.01074 14.749C7.10407 14.7036 7.16321 14.6087 7.16295 14.5047L7.1605 13.7849C11.4352 13.5894 12.9723 10.3023 12.9722 10.2563C12.9722 10.1147 12.8634 9.9971 12.7225 9.98626L12.7009 9.98634C12.5685 9.98689 12.4561 10.0833 12.4351 10.2142C12.4303 10.2413 10.4816 11.623 7.15364 11.7666L7.1504 10.8116C7.14981 10.662 7.02829 10.5412 6.87896 10.5418C6.81184 10.5421 6.74721 10.5674 6.69765 10.6127L4.54129 12.5896C4.43117 12.6906 4.42367 12.862 4.52453 12.9723C4.53428 12.9829 4.54488 12.9928 4.55621 13.0018L6.72511 14.718Z"
13 |     />
14 |   </svg>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/icons/SlackIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 48 48"
 5 |     width="48px"
 6 |     height="48px"
 7 |   >
 8 |     <path
 9 |       fill="#33d375"
10 |       d="M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4	C33,17.741,33,9.254,33,8z"
11 |     />
12 |     <path
13 |       fill="#33d375"
14 |       d="M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z"
15 |     />
16 |     <path
17 |       fill="#40c4ff"
18 |       d="M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4	C17.741,14,9.254,14,8,14z"
19 |     />
20 |     <path
21 |       fill="#40c4ff"
22 |       d="M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z"
23 |     />
24 |     <path
25 |       fill="#e91e63"
26 |       d="M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984	c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z"
27 |     />
28 |     <path
29 |       fill="#e91e63"
30 |       d="M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994	S4,30.228,4,28.022z"
31 |     />
32 |     <path
33 |       fill="#ffc107"
34 |       d="M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4	C29.258,33,37.746,33,39,33z"
35 |     />
36 |     <path
37 |       fill="#ffc107"
38 |       d="M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z"
39 |     />
40 |   </svg>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/src/components/command/raycast/Raycast.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import Home from './Home.vue'
 3 | import { isDark } from '~/composables/useDarkmode'
 4 | 
 5 | import { Command } from '@/index'
 6 | import type { ItemInfo } from '@/types'
 7 | import RaycastLightIcon from '~/components/icons/RaycastLightIcon.vue'
 8 | import RaycastDarkIcon from '~/components/icons/RaycastDarkIcon.vue'
 9 | 
10 | function handleSelectItem(item: ItemInfo) {
11 |   console.log(item)
12 | }
13 | </script>
14 | 
15 | <template>
16 |   <Command.Dialog
17 |     :visible="true"
18 |     theme="raycast"
19 |     @select-item="handleSelectItem"
20 |   >
21 |     <template #header>
22 |       <div command-raycast-top-shine="" />
23 |       <Command.Input placeholder="Search for apps and commands..." />
24 |       <hr command-raycast-loader="">
25 |     </template>
26 |     <template #body>
27 |       <!-- <Command.Loading> Hang on... </Command.Loading> -->
28 |       <Command.List ref="dialogRef">
29 |         <Command.Empty>No results found.</Command.Empty>
30 |         <Home />
31 |       </Command.List>
32 |     </template>
33 |     <template #footer>
34 |       <RaycastDarkIcon v-if="isDark" />
35 |       <RaycastLightIcon v-else />
36 |       <button command-raycast-open-trigger="">
37 |         Open Application
38 |         <kbd>↵</kbd>
39 |       </button>
40 | 
41 |       <hr>
42 |       <button command-raycast-subcommand-trigger="">
43 |         Actions
44 |         <kbd>⌘</kbd>
45 |         <kbd>K</kbd>
46 |       </button>
47 |     </template>
48 |   </Command.Dialog>
49 | </template>
50 | 
51 | <style lang="scss">
52 | @import '~/assets/scss/raycast.scss';
53 | </style>
54 | 


--------------------------------------------------------------------------------
/packages/CommandList.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { onBeforeUnmount, ref, watchEffect } from 'vue'
 3 | </script>
 4 | 
 5 | <script lang="ts" setup>
 6 | import { useCommandEvent } from './useCommandEvent'
 7 | 
 8 | defineOptions({
 9 |   name: 'Command.List',
10 | })
11 | 
12 | const { rerenderList } = useCommandEvent()
13 | 
14 | const listRef = ref<HTMLDivElement>()
15 | const heightRef = ref<HTMLDivElement>()
16 | 
17 | let observer: ResizeObserver | null = null
18 | let sizer: HTMLDivElement | undefined
19 | 
20 | /**
21 |  * Contains `Item`, `Group`, and `Separator`.
22 |  * Use the `--command-list-height` CSS variable to animate height based on the number of results.
23 |  */
24 | watchEffect(() => {
25 |   sizer = heightRef.value
26 |   const wrapper = listRef.value
27 |   let animationFrame: any
28 |   if (sizer && wrapper) {
29 |     observer = new ResizeObserver((entries) => {
30 |       animationFrame = requestAnimationFrame(() => {
31 |         const height = sizer?.offsetHeight
32 |         wrapper?.style.setProperty(
33 |           '--command-list-height',
34 |           `${height?.toFixed(1)}px`,
35 |         )
36 | 
37 |         rerenderList.value = true
38 |       })
39 |     })
40 |     observer.observe(sizer)
41 | 
42 |     return () => {
43 |       cancelAnimationFrame(animationFrame)
44 |       observer?.unobserve(sizer!)
45 |     }
46 |   }
47 | })
48 | 
49 | onBeforeUnmount(() => {
50 |   if (observer !== null && sizer)
51 |     observer.unobserve(sizer)
52 | })
53 | </script>
54 | 
55 | <template>
56 |   <div ref="listRef" command-list="" role="listbox" aria-label="Suggestions">
57 |     <div ref="heightRef" command-list-sizer="">
58 |       <slot />
59 |     </div>
60 |   </div>
61 | </template>
62 | 


--------------------------------------------------------------------------------
/packages/CommandDialog.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { onBeforeUnmount, ref, watch } from 'vue'
 3 | import { whenever } from '@vueuse/core'
 4 | 
 5 | import Command from './CommandRoot.vue'
 6 | import { useCommandState } from './useCommandState'
 7 | import { useCommandEvent } from './useCommandEvent'
 8 | import type { ItemInfo } from './types'
 9 | 
10 | defineOptions({
11 |   name: 'Command.Dialog',
12 | })
13 | 
14 | const props = defineProps<{
15 |   visible: boolean
16 |   theme: string
17 | }>()
18 | 
19 | const emit = defineEmits<{
20 |   (e: 'selectItem', item: ItemInfo): void
21 | }>()
22 | 
23 | const { resetStore } = useCommandState()
24 | const { itemInfo } = useCommandEvent()
25 | const dialogRef = ref<HTMLDivElement>()
26 | 
27 | watch(
28 |   () => itemInfo.value,
29 |   (item) => {
30 |     emit('selectItem', item!)
31 |   },
32 | )
33 | 
34 | whenever(() => props.visible, resetStore)
35 | 
36 | onBeforeUnmount(resetStore)
37 | </script>
38 | 
39 | <template>
40 |   <Teleport ref="dialogRef" to="body">
41 |     <Transition name="command-dialog" appear>
42 |       <Command v-if="visible" :theme="theme">
43 |         <div command-dialog>
44 |           <div command-dialog-mask>
45 |             <div command-dialog-wrapper>
46 |               <div command-dialog-header>
47 |                 <slot name="header" />
48 |               </div>
49 |               <div command-dialog-body>
50 |                 <slot name="body" />
51 |               </div>
52 |               <div v-if="$slots.footer" command-dialog-footer>
53 |                 <slot name="footer" />
54 |               </div>
55 |             </div>
56 |           </div>
57 |         </div>
58 |       </Command>
59 |     </Transition>
60 |   </Teleport>
61 | </template>
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-command-palette",
 3 |   "type": "module",
 4 |   "version": "0.2.3",
 5 |   "author": "xiaoluoboding <xiaoluoboding@gmail.com>",
 6 |   "homepage": "https://github.com/xiaoluoboding/vue-command-palette",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git+https://github.com/xiaoluoboding/vue-command-palette.git"
10 |   },
11 |   "exports": {
12 |     ".": {
13 |       "types": "./lib/index.d.ts",
14 |       "import": "./lib/vue-command-palette.js",
15 |       "require": "./lib/vue-command-palette.cjs"
16 |     }
17 |   },
18 |   "main": "./lib/vue-command-palette.cjs",
19 |   "module": "./lib/vue-command-palette.js",
20 |   "types": "./lib/index.d.ts",
21 |   "files": [
22 |     "lib"
23 |   ],
24 |   "scripts": {
25 |     "dev": "vite",
26 |     "build:docs": "vite build --mode docs",
27 |     "build:lib": "vite build --mode lib && pnpm run build:types",
28 |     "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",
29 |     "preview": "vite preview",
30 |     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
31 |   },
32 |   "dependencies": {
33 |     "fuse.js": "^7.0.0",
34 |     "nanoid": "^5.0.6"
35 |   },
36 |   "devDependencies": {
37 |     "@iconify/json": "^2.2.189",
38 |     "@microsoft/api-extractor": "^7.42.3",
39 |     "@types/node": "^20.11.24",
40 |     "@unocss/reset": "^0.58.5",
41 |     "@vitejs/plugin-vue": "^5.0.4",
42 |     "@vue/tsconfig": "^0.5.1",
43 |     "@vueuse/core": "^10.9.0",
44 |     "highlight.js": "^11.9.0",
45 |     "sass": "^1.71.1",
46 |     "typescript": "^5.3.3",
47 |     "unocss": "^0.58.5",
48 |     "unplugin-icons": "^0.18.5",
49 |     "unplugin-vue-components": "^0.26.0",
50 |     "vite": "^5.1.5",
51 |     "vue": "^3.4.21",
52 |     "vue-tsc": "^2.0.5"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { URL, fileURLToPath } from 'node:url'
 2 | import { resolve } from 'node:path'
 3 | import type { UserConfig } from 'vite'
 4 | import { defineConfig } from 'vite'
 5 | import vue from '@vitejs/plugin-vue'
 6 | import UnoCSS from 'unocss/vite'
 7 | import Icons from 'unplugin-icons/vite'
 8 | import IconsResolver from 'unplugin-icons/resolver'
 9 | import Components from 'unplugin-vue-components/vite'
10 | 
11 | // https://vitejs.dev/config/
12 | export default defineConfig(({ command, mode }) => {
13 |   const userConfig: UserConfig = {}
14 | 
15 |   console.log(command)
16 |   console.log(mode)
17 | 
18 |   if (mode === 'lib') {
19 |     userConfig.build = {
20 |       lib: {
21 |         entry: resolve(__dirname, 'packages/index.ts'),
22 |         name: 'VueCommandPalette',
23 |         fileName: 'vue-command-palette',
24 |       },
25 |       outDir: 'lib',
26 |       emptyOutDir: true,
27 |       sourcemap: true,
28 |       rollupOptions: {
29 |         external: ['vue', 'fuse.js'],
30 |         output: [
31 |           {
32 |             format: 'cjs',
33 |             entryFileNames: 'vue-command-palette.cjs'
34 |           },
35 |           {
36 |             format: 'es',
37 |             entryFileNames: 'vue-command-palette.js',
38 |             preserveModules: false
39 |           }
40 |         ],
41 |       },
42 |     }
43 |   }
44 | 
45 |   return {
46 |     resolve: {
47 |       alias: {
48 |         '@': fileURLToPath(new URL('./packages', import.meta.url)),
49 |         '~': fileURLToPath(new URL('./src', import.meta.url)),
50 |       },
51 |     },
52 |     plugins: [
53 |       vue(),
54 |       UnoCSS(),
55 |       Components({
56 |         resolvers: [
57 |           IconsResolver({
58 |             prefix: '',
59 |           }),
60 |         ],
61 |       }),
62 |       Icons(),
63 |     ],
64 |     ...userConfig,
65 |   }
66 | })
67 | 


--------------------------------------------------------------------------------
/packages/CommandItem.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { computed, onBeforeUnmount, ref, watchEffect } from 'vue'
 3 | </script>
 4 | 
 5 | <script lang="ts" setup>
 6 | import { nanoid } from 'nanoid'
 7 | import { useMagicKeys, whenever } from '@vueuse/core'
 8 | 
 9 | import { useCommandState } from './useCommandState'
10 | import { useCommandEvent } from './useCommandEvent'
11 | import type { CommandItemEmits, CommandItemProps } from './types'
12 | 
13 | defineOptions({
14 |   name: 'Command.Item',
15 | })
16 | 
17 | const props = defineProps<CommandItemProps>()
18 | 
19 | const emit = defineEmits<CommandItemEmits>()
20 | 
21 | const SELECT_EVENT = `command-item-select`
22 | const VALUE_ATTR = `data-value`
23 | 
24 | const { current } = useMagicKeys()
25 | const { selectedNode, filtered, isSearching } = useCommandState()
26 | const { itemInfo } = useCommandEvent()
27 | 
28 | const itemRef = ref<HTMLDivElement>()
29 | 
30 | const itemId = computed(() => `command-item-${nanoid()}`)
31 | 
32 | const isRender = computed(() => {
33 |   const itemKey = filtered.value.items.get(itemId.value)
34 | 
35 |   return !isSearching.value ? true : itemKey !== undefined
36 | })
37 | 
38 | const currentKeys = computed(() => Array.from(current))
39 | 
40 | function handleSelect() {
41 |   const itemInfoObj = {
42 |     key: itemId.value,
43 |     value: itemRef.value?.getAttribute(VALUE_ATTR) || '',
44 |   }
45 | 
46 |   itemInfo.value = itemInfoObj
47 |   emit('select', itemInfoObj)
48 | }
49 | 
50 | whenever(currentKeys, (v) => {
51 |   if (props.shortcut && props.shortcut.length > 0) {
52 |     const hasKey = props.shortcut.every(key => current.has(key.toLowerCase()))
53 |     if (hasKey && props.perform)
54 |       props.perform()
55 |   }
56 | })
57 | 
58 | watchEffect(() => {
59 |   itemRef.value?.addEventListener(SELECT_EVENT, handleSelect)
60 | })
61 | 
62 | onBeforeUnmount(() => {
63 |   itemRef.value?.removeEventListener(SELECT_EVENT, handleSelect)
64 | })
65 | </script>
66 | 
67 | <template>
68 |   <div
69 |     v-show="isRender"
70 |     ref="itemRef"
71 |     :key="itemId"
72 |     command-item=""
73 |     role="option"
74 |     :aria-selected="selectedNode === itemId"
75 |     :aria-disabled="!isRender"
76 |     :command-item-key="itemId"
77 |     @click="handleSelect"
78 |   >
79 |     <slot />
80 |   </div>
81 | </template>
82 | 


--------------------------------------------------------------------------------
/packages/index.ts:
--------------------------------------------------------------------------------
 1 | import { computed, defineComponent, h } from 'vue'
 2 | import Root from './CommandRoot.vue'
 3 | import Dialog from './CommandDialog.vue'
 4 | import Group from './CommandGroup.vue'
 5 | import Input from './CommandInput.vue'
 6 | import Item from './CommandItem.vue'
 7 | import List from './CommandList.vue'
 8 | import { useCommandState } from './useCommandState'
 9 | 
10 | /**
11 |  * Command Empty Node
12 |  */
13 | const Empty = defineComponent({
14 |   name: 'Command.Empty',
15 |   setup(props, { attrs, slots }) {
16 |     const { filtered } = useCommandState()
17 |     const isRender = computed(() => filtered.value.count === 0)
18 |     return () =>
19 |       isRender.value
20 |         ? h(
21 |           'div',
22 |           {
23 |             'command-empty': '',
24 |             'role': 'presentation',
25 |             ...attrs,
26 |           },
27 |           slots,
28 |         )
29 |         : h('div', {
30 |           'command-empty': 'hidden',
31 |           'role': 'presentation',
32 |           'style': {
33 |             display: 'none',
34 |           },
35 |           ...attrs,
36 |         })
37 |   },
38 | })
39 | 
40 | /**
41 |  * Command Loading Node
42 |  */
43 | const Loading = defineComponent({
44 |   name: 'Command.Loading',
45 |   setup(props, { attrs, slots }) {
46 |     return () =>
47 |       h(
48 |         'div',
49 |         {
50 |           'command-loading': '',
51 |           'role': 'progressbar',
52 |           ...attrs,
53 |         },
54 |         slots,
55 |       )
56 |   },
57 | })
58 | 
59 | /**
60 |  * Command Separator Node
61 |  */
62 | const Separator = defineComponent({
63 |   name: 'Command.Separator',
64 |   setup(props, { attrs, slots }) {
65 |     return () =>
66 |       h('div', {
67 |         'command-separator': '',
68 |         'role': 'separator',
69 |         ...attrs,
70 |       })
71 |   },
72 | })
73 | 
74 | const Command = Object.assign(Root, {
75 |   Root,
76 |   Dialog,
77 |   Empty,
78 |   Group,
79 |   Input,
80 |   Item,
81 |   List,
82 |   Loading,
83 |   Separator,
84 | }) as typeof Root & {
85 |   readonly Root: typeof Root
86 |   readonly Dialog: typeof Dialog
87 |   readonly Empty: typeof Empty
88 |   readonly Group: typeof Group
89 |   readonly Input: typeof Input
90 |   readonly Item: typeof Item
91 |   readonly List: typeof List
92 |   readonly Loading: typeof Loading
93 |   readonly Separator: typeof Separator
94 | }
95 | 
96 | export { Command, useCommandState }
97 | export type { CommandGroupProps, CommandInputEmits, CommandInputProps, CommandItemEmits, CommandItemProps, CommandRootEmits, CommandRootProps } from './types'
98 | 


--------------------------------------------------------------------------------
/src/components/command/Linear.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import LinearAssignToIcon from '../icons/LinearAssignToIcon.vue'
 3 | import LinearAssignToMeIcon from '../icons/LinearAssignToMeIcon.vue'
 4 | import LinearChangeStatusIcon from '../icons/LinearChangeStatusIcon.vue'
 5 | import LinearChangePriorityIcon from '../icons/LinearChangePriorityIcon.vue'
 6 | import LinearChangeLabelsIcon from '../icons/LinearChangeLabelsIcon.vue'
 7 | import LinearRemoveLabelIcon from '../icons/LinearRemoveLabelIcon.vue'
 8 | import LinearSetDueDateIcon from '../icons/LinearSetDueDateIcon.vue'
 9 | import { Command } from '@/index'
10 | 
11 | const items = [
12 |   {
13 |     icon: LinearAssignToIcon,
14 |     label: 'Assign to...',
15 |     shortcut: ['A'],
16 |     perform: () => {
17 |       console.log('action')
18 |     },
19 |   },
20 |   {
21 |     icon: LinearAssignToMeIcon,
22 |     label: 'Assign to me',
23 |     shortcut: ['I'],
24 |   },
25 |   {
26 |     icon: LinearChangeStatusIcon,
27 |     label: 'Change status...',
28 |     shortcut: ['S'],
29 |   },
30 |   {
31 |     icon: LinearChangePriorityIcon,
32 |     label: 'Change priority...',
33 |     shortcut: ['P'],
34 |   },
35 |   {
36 |     icon: LinearChangeLabelsIcon,
37 |     label: 'Change labels...',
38 |     shortcut: ['L'],
39 |   },
40 |   {
41 |     icon: LinearRemoveLabelIcon,
42 |     label: 'Remove label...',
43 |     shortcut: ['⇧', 'L'],
44 |   },
45 |   {
46 |     icon: LinearSetDueDateIcon,
47 |     label: 'Set due date...',
48 |     shortcut: ['⇧', 'D'],
49 |   },
50 | ]
51 | 
52 | function handleSelectItem(item: any) {
53 |   console.log(item)
54 | }
55 | </script>
56 | 
57 | <template>
58 |   <Command.Dialog :visible="true" theme="linear">
59 |     <template #header>
60 |       <div command-linear-badge="">
61 |         Issue - FUN-343
62 |       </div>
63 |       <Command.Input placeholder="Type a command or search..." />
64 |     </template>
65 |     <template #body>
66 |       <!-- <Command.Loading> Hang on... </Command.Loading> -->
67 |       <Command.List>
68 |         <Command.Empty>No results found.</Command.Empty>
69 |         <Command.Item
70 |           v-for="item in items"
71 |           :data-value="item.label"
72 |           :shortcut="item.shortcut"
73 |           :perform="item.perform"
74 |           @select="handleSelectItem"
75 |         >
76 |           <component :is="item.icon" />
77 |           <div>{{ item.label }}</div>
78 |           <div command-linear-shortcuts>
79 |             <kbd v-for="key in item.shortcut" key="key">{{ key }}</kbd>
80 |           </div>
81 |         </Command.Item>
82 |       </Command.List>
83 |     </template>
84 |   </Command.Dialog>
85 | </template>
86 | 
87 | <style lang="scss">
88 | @import '~/assets/scss/linear.scss';
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/command/vercel/Vercel.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { computed, ref } from 'vue'
  3 | import { useMagicKeys, whenever } from '@vueuse/core'
  4 | 
  5 | import Home from './Home.vue'
  6 | import Projects from './Projects.vue'
  7 | import { toggleDarkmode } from '~/composables/useDarkmode'
  8 | import { Command, useCommandState } from '@/index'
  9 | import type { ItemInfo } from '@/types'
 10 | 
 11 | const { current } = useMagicKeys()
 12 | const { search } = useCommandState()
 13 | 
 14 | const activePage = ref('home')
 15 | const inputValue = ref('')
 16 | 
 17 | const isHomePage = computed(() => activePage.value === 'home')
 18 | 
 19 | const currentView = computed(() => {
 20 |   return isHomePage.value ? Home : Projects
 21 | })
 22 | 
 23 | const pageTree = computed(() => {
 24 |   let pages = ['Home']
 25 |   if (isHomePage.value)
 26 |     pages = ['Home']
 27 |   else
 28 |     pages.push(activePage.value)
 29 | 
 30 |   return pages
 31 | })
 32 | 
 33 | function togglePage() {
 34 |   activePage.value = isHomePage.value ? 'projects' : 'home'
 35 |   search.value = ''
 36 | }
 37 | 
 38 | function handleKeyDown() {
 39 |   if (isHomePage.value || inputValue.value.length)
 40 |     return
 41 | 
 42 |   togglePage()
 43 | }
 44 | 
 45 | whenever(() => current.has('backspace'), handleKeyDown)
 46 | 
 47 | function handleSelectItem(item: ItemInfo) {
 48 |   if (item.value === 'Search Projects...')
 49 |     togglePage()
 50 | 
 51 |   if (item.value === 'Toggle Dark Mode')
 52 |     toggleDarkmode()
 53 | }
 54 | </script>
 55 | 
 56 | <template>
 57 |   <Command.Dialog
 58 |     :visible="true"
 59 |     theme="vercel"
 60 |     @select-item="handleSelectItem"
 61 |   >
 62 |     <template #header>
 63 |       <div command-vercel-label>
 64 |         <label v-for="page in pageTree" command-vercel-badge>
 65 |           {{ page }}
 66 |         </label>
 67 |       </div>
 68 |       <Command.Input
 69 |         v-model:value="inputValue"
 70 |         placeholder="What do you need?"
 71 |       />
 72 |     </template>
 73 |     <!-- <Command.Loading> Hang on... </Command.Loading> -->
 74 |     <template #body>
 75 |       <Command.List ref="dialogRef">
 76 |         <Command.Empty>No results found.</Command.Empty>
 77 |         <Transition name="pop-page">
 78 |           <KeepAlive>
 79 |             <component :is="currentView" :key="activePage" />
 80 |           </KeepAlive>
 81 |         </Transition>
 82 |       </Command.List>
 83 |     </template>
 84 |   </Command.Dialog>
 85 | </template>
 86 | 
 87 | <style lang="scss">
 88 | @import '~/assets/scss/vercel.scss';
 89 | 
 90 | .pop-page-enter-active {
 91 |   animation: scale-in 0.2s;
 92 | }
 93 | .pop-page-leave-active {
 94 |   animation: scale-in 0.2s reverse;
 95 | }
 96 | 
 97 | @keyframes scale-in {
 98 |   0% {
 99 |     transform: scale(0.96);
100 |     opacity: 0;
101 |   }
102 | 
103 |   100% {
104 |     transform: scale(1);
105 |     opacity: 1;
106 |   }
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/plugins/highlight.ts:
--------------------------------------------------------------------------------
  1 | import type { Plugin } from 'vue'
  2 | import { computed, defineComponent, h, ref, watch } from 'vue'
  3 | import hljs from 'highlight.js/lib/core'
  4 | import javascript from 'highlight.js/lib/languages/javascript'
  5 | import xml from 'highlight.js/lib/languages/xml'
  6 | 
  7 | hljs.registerLanguage('javascript', javascript)
  8 | hljs.registerLanguage('xml', xml)
  9 | 
 10 | function escapeHtml(value: string): string {
 11 |   return value
 12 |     .replace(/&/g, '&amp;')
 13 |     .replace(/</g, '&lt;')
 14 |     .replace(/>/g, '&gt;')
 15 |     .replace(/"/g, '&quot;')
 16 |     .replace(/'/g, '&#x27;')
 17 | }
 18 | 
 19 | const component = defineComponent({
 20 |   props: {
 21 |     code: {
 22 |       type: String,
 23 |       required: true,
 24 |     },
 25 |     language: {
 26 |       type: String,
 27 |       default: '',
 28 |     },
 29 |     autodetect: {
 30 |       type: Boolean,
 31 |       default: true,
 32 |     },
 33 |     ignoreIllegals: {
 34 |       type: Boolean,
 35 |       default: true,
 36 |     },
 37 |   },
 38 |   setup(props) {
 39 |     const language = ref(props.language)
 40 |     watch(
 41 |       () => props.language,
 42 |       (newLanguage) => {
 43 |         language.value = newLanguage
 44 |       },
 45 |     )
 46 | 
 47 |     const autodetect = computed(() => props.autodetect || !language.value)
 48 |     const cannotDetectLanguage = computed(
 49 |       () => !autodetect.value && !hljs.getLanguage(language.value),
 50 |     )
 51 | 
 52 |     const className = computed((): string => {
 53 |       if (cannotDetectLanguage.value)
 54 |         return ''
 55 |       else
 56 |         return `hljs ${language.value}`
 57 |     })
 58 | 
 59 |     const highlightedCode = computed((): string => {
 60 |       // No idea what language to use, return raw code
 61 |       if (cannotDetectLanguage.value) {
 62 |         console.warn(
 63 |           `The language "${language.value}" you specified could not be found.`,
 64 |         )
 65 |         return escapeHtml(props.code)
 66 |       }
 67 | 
 68 |       if (autodetect.value) {
 69 |         const result = hljs.highlightAuto(props.code)
 70 |         language.value = result.language ?? ''
 71 |         return result.value
 72 |       }
 73 |       else {
 74 |         const result = hljs.highlight(props.code, {
 75 |           language: language.value,
 76 |           ignoreIllegals: props.ignoreIllegals,
 77 |         })
 78 |         return result.value
 79 |       }
 80 |     })
 81 | 
 82 |     return {
 83 |       className,
 84 |       highlightedCode,
 85 |     }
 86 |   },
 87 |   render() {
 88 |     return h('pre', {}, [
 89 |       h('code', {
 90 |         class: this.className,
 91 |         innerHTML: this.highlightedCode,
 92 |         tabindex: '0',
 93 |       }),
 94 |     ])
 95 |   },
 96 | })
 97 | 
 98 | const plugin: Plugin & { component: typeof component } = {
 99 |   install(app) {
100 |     app.component('Highlight', component)
101 |   },
102 |   component,
103 | }
104 | 
105 | export default plugin
106 | 


--------------------------------------------------------------------------------
/src/components/command/raycast/Home.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import Item from './Item.vue'
  3 | import { Command } from '@/index'
  4 | import FigmaIcon from '~/components/icons/FigmaIcon.vue'
  5 | import RaycastIcon from '~/components/icons/RaycastIcon.vue'
  6 | import YouTubeIcon from '~/components/icons/YouTubeIcon.vue'
  7 | import SlackIcon from '~/components/icons/SlackIcon.vue'
  8 | import LinearIcon from '~/components/icons/LinearIcon.vue'
  9 | 
 10 | import ClipboardIcon from '~/components/icons/RaycastClipboardIcon.vue'
 11 | import HammerIcon from '~/components/icons/RaycastHammerIcon.vue'
 12 | 
 13 | const items1 = [
 14 |   {
 15 |     icon: LinearIcon,
 16 |     label: 'Linear',
 17 |     isCommand: false,
 18 |   },
 19 |   {
 20 |     icon: FigmaIcon,
 21 |     label: 'Figma',
 22 |     isCommand: false,
 23 |   },
 24 |   {
 25 |     icon: SlackIcon,
 26 |     label: 'Slack',
 27 |     isCommand: false,
 28 |   },
 29 |   {
 30 |     icon: YouTubeIcon,
 31 |     label: 'YouTube',
 32 |     isCommand: false,
 33 |   },
 34 |   {
 35 |     icon: RaycastIcon,
 36 |     label: 'Raycast',
 37 |     isCommand: false,
 38 |   },
 39 | ]
 40 | 
 41 | const items2 = [
 42 |   {
 43 |     icon: ClipboardIcon,
 44 |     label: 'Clipboard History',
 45 |     isCommand: true,
 46 |   },
 47 |   {
 48 |     icon: HammerIcon,
 49 |     label: 'Import Extension',
 50 |     isCommand: true,
 51 |   },
 52 |   {
 53 |     icon: HammerIcon,
 54 |     label: 'Manage Extensions',
 55 |     isCommand: true,
 56 |   },
 57 | ]
 58 | </script>
 59 | 
 60 | <template>
 61 |   <Command.Group heading="Suggestions">
 62 |     <Item
 63 |       v-for="item in items1"
 64 |       :key="item.label"
 65 |       :is-command="item.isCommand"
 66 |       :data-value="item.label"
 67 |     >
 68 |       <div class="icon_blur-logo">
 69 |         <div class="icon_bg" />
 70 |         <div class="icon_inner">
 71 |           <component :is="item.icon" />
 72 |         </div>
 73 |       </div>
 74 |       {{ item.label }}
 75 |     </Item>
 76 |   </Command.Group>
 77 |   <Command.Group heading="Commands">
 78 |     <Item
 79 |       v-for="item in items2"
 80 |       :key="item.label"
 81 |       :is-command="item.isCommand"
 82 |       :data-value="item.label"
 83 |     >
 84 |       <component :is="item.icon" />
 85 |       {{ item.label }}
 86 |     </Item>
 87 |   </Command.Group>
 88 | </template>
 89 | 
 90 | <style scoped>
 91 | .icon_blur-logo {
 92 |   display: flex;
 93 |   align-items: center;
 94 |   justify-content: center;
 95 |   position: relative;
 96 |   border-radius: 4px;
 97 |   overflow: hidden;
 98 |   box-shadow: inset 0 0 1px 1px rgb(0 0 0 / 2%);
 99 |   width: 20px;
100 |   height: 20px;
101 | }
102 | .icon_inner,
103 | .icon_bg {
104 |   display: flex;
105 |   align-items: center;
106 |   justify-content: center;
107 |   pointer-events: none;
108 |   user-select: none;
109 |   width: 100%;
110 |   height: 100%;
111 | }
112 | 
113 | .icon_inner svg {
114 |   filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
115 |   transition: filter 0.15s ease;
116 |   height: 14px;
117 |   width: 14px;
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/components/command/vercel/Home.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import Item from './Item.vue'
  3 | import { Command } from '@/index'
  4 | 
  5 | import { isDark } from '~/composables/useDarkmode'
  6 | import ProjectsIcon from '~/components/icons/VercelProjectsIcon.vue'
  7 | import PlusIcon from '~/components/icons/VercelPlusIcon.vue'
  8 | import TeamsIcon from '~/components/icons/VercelTeamsIcon.vue'
  9 | import DocsIcon from '~/components/icons/VercelDocsIcon.vue'
 10 | import FeedbackIcon from '~/components/icons/VercelFeedbackIcon.vue'
 11 | import ContactIcon from '~/components/icons/VercelContactIcon.vue'
 12 | import SunIcon from '~/components/icons/SunIcon.vue'
 13 | import MoonIcon from '~/components/icons/MoonIcon.vue'
 14 | 
 15 | const items1 = [
 16 |   {
 17 |     icon: ProjectsIcon,
 18 |     label: 'Search Projects...',
 19 |     shortcut: ['S', 'P'],
 20 |   },
 21 |   {
 22 |     icon: PlusIcon,
 23 |     label: 'Create New Project...',
 24 |   },
 25 | ]
 26 | 
 27 | const items2 = [
 28 |   {
 29 |     icon: TeamsIcon,
 30 |     label: 'Search Team...',
 31 |     shortcut: ['⇧', 'P'],
 32 |   },
 33 |   {
 34 |     icon: PlusIcon,
 35 |     label: 'Create New Team...',
 36 |   },
 37 | ]
 38 | 
 39 | const items3 = [
 40 |   {
 41 |     icon: DocsIcon,
 42 |     label: 'Search Docs...',
 43 |     shortcut: ['⇧', 'D'],
 44 |   },
 45 |   {
 46 |     icon: FeedbackIcon,
 47 |     label: 'Send Feedback...',
 48 |   },
 49 |   {
 50 |     icon: ContactIcon,
 51 |     label: 'Contact Support',
 52 |   },
 53 | ]
 54 | 
 55 | const items4 = [
 56 |   {
 57 |     icon: SunIcon,
 58 |     label: 'Toggle Dark Mode',
 59 |     shortcut: ['G', 'T'],
 60 |   },
 61 | ]
 62 | </script>
 63 | 
 64 | <template>
 65 |   <div>
 66 |     <Command.Group heading="Projects">
 67 |       <Item
 68 |         v-for="item in items1"
 69 |         :key="item.label"
 70 |         :shortcut="item.shortcut"
 71 |         :data-value="item.label"
 72 |       >
 73 |         <component :is="item.icon" />
 74 |         {{ item.label }}
 75 |       </Item>
 76 |     </Command.Group>
 77 |     <Command.Group heading="Teams">
 78 |       <Item
 79 |         v-for="item in items2"
 80 |         :key="item.label"
 81 |         :shortcut="item.shortcut"
 82 |         :data-value="item.label"
 83 |       >
 84 |         <component :is="item.icon" />
 85 |         {{ item.label }}
 86 |       </Item>
 87 |     </Command.Group>
 88 |     <Command.Group heading="Help">
 89 |       <Item
 90 |         v-for="item in items3"
 91 |         :key="item.label"
 92 |         :shortcut="item.shortcut"
 93 |         :data-value="item.label"
 94 |       >
 95 |         <component :is="item.icon" />
 96 |         {{ item.label }}
 97 |       </Item>
 98 |     </Command.Group>
 99 |     <Command.Group heading="Preference">
100 |       <Item
101 |         v-for="item in items4"
102 |         :key="item.label"
103 |         :shortcut="item.shortcut"
104 |         :data-value="item.label"
105 |       >
106 |         <MoonIcon v-if="isDark" />
107 |         <SunIcon v-else />
108 |         {{ item.label }}
109 |       </Item>
110 |     </Command.Group>
111 |   </div>
112 | </template>
113 | 


--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // Generated by unplugin-vue-components
 5 | // Read more: https://github.com/vuejs/core/pull/3399
 6 | export {}
 7 | 
 8 | declare module 'vue' {
 9 |   export interface GlobalComponents {
10 |     CmdkPlaceholder: typeof import('./src/components/common/CmdkPlaceholder.vue')['default']
11 |     FigmaIcon: typeof import('./src/components/icons/FigmaIcon.vue')['default']
12 |     Home: typeof import('./src/components/command/raycast/Home.vue')['default']
13 |     Item: typeof import('./src/components/command/raycast/Item.vue')['default']
14 |     Linear: typeof import('./src/components/command/Linear.vue')['default']
15 |     LinearAssignToIcon: typeof import('./src/components/icons/LinearAssignToIcon.vue')['default']
16 |     LinearAssignToMeIcon: typeof import('./src/components/icons/LinearAssignToMeIcon.vue')['default']
17 |     LinearChangeLabelsIcon: typeof import('./src/components/icons/LinearChangeLabelsIcon.vue')['default']
18 |     LinearChangePriorityIcon: typeof import('./src/components/icons/LinearChangePriorityIcon.vue')['default']
19 |     LinearChangeStatusIcon: typeof import('./src/components/icons/LinearChangeStatusIcon.vue')['default']
20 |     LinearIcon: typeof import('./src/components/icons/LinearIcon.vue')['default']
21 |     LinearRemoveLabelIcon: typeof import('./src/components/icons/LinearRemoveLabelIcon.vue')['default']
22 |     LinearSetDueDateIcon: typeof import('./src/components/icons/LinearSetDueDateIcon.vue')['default']
23 |     Logo: typeof import('./src/components/icons/Logo.vue')['default']
24 |     MoonIcon: typeof import('./src/components/icons/MoonIcon.vue')['default']
25 |     Projects: typeof import('./src/components/command/vercel/Projects.vue')['default']
26 |     Raycast: typeof import('./src/components/command/raycast/Raycast.vue')['default']
27 |     RaycastClipboardIcon: typeof import('./src/components/icons/RaycastClipboardIcon.vue')['default']
28 |     RaycastDarkIcon: typeof import('./src/components/icons/RaycastDarkIcon.vue')['default']
29 |     RaycasTerminalIcon: typeof import('./src/components/icons/RaycasTerminalIcon.vue')['default']
30 |     RaycastFinderIcon: typeof import('./src/components/icons/RaycastFinderIcon.vue')['default']
31 |     RaycastHammerIcon: typeof import('./src/components/icons/RaycastHammerIcon.vue')['default']
32 |     RaycastIcon: typeof import('./src/components/icons/RaycastIcon.vue')['default']
33 |     RaycastLightIcon: typeof import('./src/components/icons/RaycastLightIcon.vue')['default']
34 |     RaycastStarIcon: typeof import('./src/components/icons/RaycastStarIcon.vue')['default']
35 |     RaycastWindowIcon: typeof import('./src/components/icons/RaycastWindowIcon.vue')['default']
36 |     Self: typeof import('./src/components/command/Self.vue')['default']
37 |     SlackIcon: typeof import('./src/components/icons/SlackIcon.vue')['default']
38 |     SunIcon: typeof import('./src/components/icons/SunIcon.vue')['default']
39 |     Vercel: typeof import('./src/components/command/vercel/Vercel.vue')['default']
40 |     VercelContactIcon: typeof import('./src/components/icons/VercelContactIcon.vue')['default']
41 |     VercelCopyIcon: typeof import('./src/components/icons/VercelCopyIcon.vue')['default']
42 |     VercelDocsIcon: typeof import('./src/components/icons/VercelDocsIcon.vue')['default']
43 |     VercelFeedbackIcon: typeof import('./src/components/icons/VercelFeedbackIcon.vue')['default']
44 |     VercelIcon: typeof import('./src/components/icons/VercelIcon.vue')['default']
45 |     VercelPlusIcon: typeof import('./src/components/icons/VercelPlusIcon.vue')['default']
46 |     VercelProjectsIcon: typeof import('./src/components/icons/VercelProjectsIcon.vue')['default']
47 |     VercelTeamsIcon: typeof import('./src/components/icons/VercelTeamsIcon.vue')['default']
48 |     YouTubeIcon: typeof import('./src/components/icons/YouTubeIcon.vue')['default']
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/assets/scss/vercel.scss:
--------------------------------------------------------------------------------
  1 | .vercel {
  2 |   [command-root] {
  3 |     max-width: 640px;
  4 |     width: 100%;
  5 |     padding: 8px;
  6 |     background: #ffffff;
  7 |     border-radius: 12px;
  8 |     overflow: hidden;
  9 |     font-family: var(--font-sans);
 10 |     border: 1px solid var(--gray6);
 11 |     box-shadow: var(--command-shadow);
 12 |     transition: transform 100ms ease;
 13 | 
 14 |     .dark & {
 15 |       background: rgba(22, 22, 22, 0.7);
 16 |     }
 17 |   }
 18 | 
 19 |   [command-input] {
 20 |     font-family: var(--font-sans);
 21 |     border: none;
 22 |     width: 100%;
 23 |     font-size: 17px;
 24 |     padding: 8px 8px 16px 8px;
 25 |     outline: none;
 26 |     background: var(--bg);
 27 |     color: var(--gray12);
 28 |     border-bottom: 1px solid var(--gray6);
 29 |     margin-bottom: 16px;
 30 |     border-radius: 0;
 31 | 
 32 |     &::placeholder {
 33 |       color: var(--gray9);
 34 |     }
 35 |   }
 36 | 
 37 |   [command-vercel-badge] {
 38 |     height: 20px;
 39 |     background: var(--grayA3);
 40 |     display: inline-flex;
 41 |     align-items: center;
 42 |     padding: 0 8px;
 43 |     font-size: 12px;
 44 |     color: var(--grayA11);
 45 |     border-radius: 4px;
 46 |     margin: 4px 0 4px 4px;
 47 |     user-select: none;
 48 |     text-transform: capitalize;
 49 |     font-weight: 500;
 50 |   }
 51 | 
 52 |   [command-item] {
 53 |     content-visibility: auto;
 54 | 
 55 |     cursor: pointer;
 56 |     height: 48px;
 57 |     border-radius: 8px;
 58 |     font-size: 14px;
 59 |     display: flex;
 60 |     align-items: center;
 61 |     gap: 8px;
 62 |     padding: 0 16px;
 63 |     color: var(--gray11);
 64 |     user-select: none;
 65 |     will-change: background, color;
 66 |     transition: all 150ms ease;
 67 |     transition-property: none;
 68 | 
 69 |     &[aria-selected='true'] {
 70 |       background: var(--grayA3);
 71 |       color: var(--gray12);
 72 |     }
 73 | 
 74 |     &[aria-disabled='true'] {
 75 |       color: var(--gray8);
 76 |       cursor: not-allowed;
 77 |     }
 78 | 
 79 |     &:active {
 80 |       transition-property: background;
 81 |       background: var(--gray4);
 82 |     }
 83 | 
 84 |     & + [command-item] {
 85 |       margin-top: 4px;
 86 |     }
 87 | 
 88 |     svg {
 89 |       width: 18px;
 90 |       height: 18px;
 91 |     }
 92 |   }
 93 | 
 94 |   [command-list] {
 95 |     height: min(330px, calc(var(--command-list-height)));
 96 |     max-height: 400px;
 97 |     overflow: auto;
 98 |     overscroll-behavior: contain;
 99 |     transition: 100ms ease;
100 |     transition-property: height;
101 |   }
102 | 
103 |   [command-vercel-shortcuts] {
104 |     display: flex;
105 |     margin-left: auto;
106 |     gap: 8px;
107 | 
108 |     kbd {
109 |       font-family: var(--font-sans);
110 |       font-size: 12px;
111 |       min-width: 20px;
112 |       padding: 4px;
113 |       height: 20px;
114 |       border-radius: 4px;
115 |       color: var(--gray11);
116 |       background: var(--gray4);
117 |       display: inline-flex;
118 |       align-items: center;
119 |       justify-content: center;
120 |       text-transform: uppercase;
121 |     }
122 |   }
123 | 
124 |   [command-separator] {
125 |     height: 1px;
126 |     width: 100%;
127 |     background: var(--gray5);
128 |     margin: 4px 0;
129 |   }
130 | 
131 |   *:not([hidden]) + [command-group] {
132 |     margin-top: 8px;
133 |   }
134 | 
135 |   [command-group-heading] {
136 |     user-select: none;
137 |     font-size: 12px;
138 |     color: var(--gray11);
139 |     padding: 0 8px;
140 |     display: flex;
141 |     align-items: center;
142 |     margin-bottom: 8px;
143 |   }
144 | 
145 |   [command-empty] {
146 |     font-size: 14px;
147 |     display: flex;
148 |     align-items: center;
149 |     justify-content: center;
150 |     height: 48px;
151 |     white-space: pre-wrap;
152 |     color: var(--gray11);
153 |   }
154 | 
155 |   [command-dialog-wrapper] {
156 |     padding: 8px;
157 |   }
158 | }
159 | 


--------------------------------------------------------------------------------
/src/assets/scss/linear.scss:
--------------------------------------------------------------------------------
  1 | .linear {
  2 |   margin: 0 auto;
  3 |   display: flex;
  4 |   justify-content: center;
  5 |   [command-root] {
  6 |     kbd {
  7 |       font-family: var(--font-sans);
  8 |       background: var(--gray3);
  9 |       color: var(--gray11);
 10 |       height: 20px;
 11 |       width: 24px;
 12 |       border-radius: 4px;
 13 |       padding: 0 4px;
 14 |       display: flex;
 15 |       align-items: center;
 16 |       justify-content: center;
 17 |     }
 18 |   }
 19 | 
 20 |   [command-linear-badge] {
 21 |     height: 24px;
 22 |     padding: 8px;
 23 |     font-size: 12px;
 24 |     color: var(--gray11);
 25 |     background: var(--gray3);
 26 |     border-radius: 4px;
 27 |     width: fit-content;
 28 |     display: flex;
 29 |     align-items: center;
 30 |     margin: 16px 16px 0;
 31 |   }
 32 | 
 33 |   [command-linear-shortcuts] {
 34 |     display: flex;
 35 |     margin-left: auto;
 36 |     gap: 8px;
 37 | 
 38 |     kbd {
 39 |       font-family: var(--font-sans);
 40 |       font-size: 13px;
 41 |       color: var(--gray11);
 42 |     }
 43 |   }
 44 | 
 45 |   [command-input] {
 46 |     font-family: var(--font-sans);
 47 |     border: none;
 48 |     width: 100%;
 49 |     font-size: 18px;
 50 |     padding: 20px;
 51 |     outline: none;
 52 |     background: var(--bg);
 53 |     color: var(--gray12);
 54 |     border-bottom: 1px solid var(--gray6);
 55 |     border-radius: 0;
 56 |     caret-color: #6e5ed2;
 57 |     margin: 0;
 58 | 
 59 |     &::placeholder {
 60 |       color: var(--gray9);
 61 |     }
 62 |   }
 63 | 
 64 |   [command-item] {
 65 |     content-visibility: auto;
 66 | 
 67 |     cursor: pointer;
 68 |     height: 48px;
 69 |     font-size: 14px;
 70 |     display: flex;
 71 |     align-items: center;
 72 |     gap: 12px;
 73 |     padding: 0 16px;
 74 |     color: var(--gray12);
 75 |     user-select: none;
 76 |     will-change: background, color;
 77 |     transition: all 150ms ease;
 78 |     transition-property: none;
 79 |     position: relative;
 80 | 
 81 |     &[aria-selected='true'],
 82 |     &:hover {
 83 |       background: var(--gray3);
 84 | 
 85 |       svg {
 86 |         color: var(--gray12);
 87 |       }
 88 | 
 89 |       &:after {
 90 |         content: '';
 91 |         position: absolute;
 92 |         left: 0;
 93 |         z-index: 123;
 94 |         width: 3px;
 95 |         height: 100%;
 96 |         background: #5f6ad2;
 97 |       }
 98 |     }
 99 | 
100 |     &[aria-disabled='true'] {
101 |       color: var(--gray8);
102 |       cursor: not-allowed;
103 |     }
104 | 
105 |     &:active {
106 |       transition-property: background;
107 |       background: var(--gray4);
108 |     }
109 | 
110 |     svg {
111 |       width: 16px;
112 |       height: 16px;
113 |       color: var(--gray10);
114 |     }
115 |   }
116 | 
117 |   [command-list] {
118 |     height: min(300px, var(--command-list-height));
119 |     max-height: 360px;
120 |     overflow: auto;
121 |     overscroll-behavior: contain;
122 |     transition: 100ms ease;
123 |     transition-property: height;
124 |   }
125 | 
126 |   * + [command-group] {
127 |     margin-top: 8px;
128 |   }
129 | 
130 |   [command-group-heading] {
131 |     user-select: none;
132 |     font-size: 12px;
133 |     color: var(--gray11);
134 |     padding: 0 8px;
135 |     display: flex;
136 |     align-items: center;
137 |   }
138 | 
139 |   [command-empty=''] {
140 |     font-size: 14px;
141 |     display: flex;
142 |     align-items: center;
143 |     justify-content: center;
144 |     height: 64px;
145 |     white-space: pre-wrap;
146 |     color: var(--gray11);
147 |   }
148 | 
149 |   [command-separator] {
150 |     height: 1px;
151 |     width: 100%;
152 |     background: var(--gray5);
153 |     margin: 4px 0;
154 |   }
155 | 
156 |   [command-dialog-wrapper] {
157 |     max-width: 640px;
158 |     width: 100%;
159 |     background: #ffffff;
160 |     border-radius: 12px;
161 |     overflow: hidden;
162 |     padding: 0;
163 |     font-family: var(--font-sans);
164 |     box-shadow: var(--command-shadow);
165 | 
166 |     .dark & {
167 |       background: linear-gradient(
168 |         136.61deg,
169 |         rgb(39, 40, 43) 13.72%,
170 |         rgb(45, 46, 49) 74.3%
171 |       );
172 |     }
173 |   }
174 | 
175 |   [command-dialog-footer] ul,
176 |   [command-dialog-footer] ul li {
177 |     display: flex;
178 |     align-items: center;
179 |   }
180 | 
181 |   [command-dialog-footer] ul li {
182 |     gap: 4px;
183 |     margin-left: 4px;
184 |     margin-right: 4px;
185 |   }
186 | }
187 | 


--------------------------------------------------------------------------------
/src/assets/scss/global.scss:
--------------------------------------------------------------------------------
  1 | @import 'highlight.scss';
  2 | 
  3 | html,
  4 | body,
  5 | #app {
  6 |   height: 100%;
  7 | }
  8 | body {
  9 |   margin: 0;
 10 |   padding: 0;
 11 | }
 12 | 
 13 | ul {
 14 |   margin: 0;
 15 |   padding: 0;
 16 | }
 17 | 
 18 | :root {
 19 |   --font-sans: 'Inter', --apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 20 |     Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 21 |   --app-bg: var(--gray1);
 22 |   --app-text: #000000;
 23 |   --command-shadow: 0 16px 70px rgb(0 0 0 / 20%);
 24 | 
 25 |   --lowContrast: #ffffff;
 26 |   --highContrast: #000000;
 27 |   --vcp-c-brand: #44bd87;
 28 |   --vcp-c-accent: #35495e;
 29 | 
 30 |   --gray1: hsl(0, 0%, 98%);
 31 |   --gray2: hsl(0, 0%, 97.3%);
 32 |   --gray3: hsl(0, 0%, 95.1%);
 33 |   --gray4: hsl(0, 0%, 93%);
 34 |   --gray5: hsl(0, 0%, 90.9%);
 35 |   --gray6: hsl(0, 0%, 88.7%);
 36 |   --gray7: hsl(0, 0%, 85.8%);
 37 |   --gray8: hsl(0, 0%, 78%);
 38 |   --gray9: hsl(0, 0%, 56.1%);
 39 |   --gray10: hsl(0, 0%, 52.3%);
 40 |   --gray11: hsl(0, 0%, 43.5%);
 41 |   --gray12: hsl(0, 0%, 9%);
 42 | 
 43 |   --grayA1: hsla(0, 0%, 0%, 0.012);
 44 |   --grayA2: hsla(0, 0%, 0%, 0.027);
 45 |   --grayA3: hsla(0, 0%, 0%, 0.047);
 46 |   --grayA4: hsla(0, 0%, 0%, 0.071);
 47 |   --grayA5: hsla(0, 0%, 0%, 0.09);
 48 |   --grayA6: hsla(0, 0%, 0%, 0.114);
 49 |   --grayA7: hsla(0, 0%, 0%, 0.141);
 50 |   --grayA8: hsla(0, 0%, 0%, 0.22);
 51 |   --grayA9: hsla(0, 0%, 0%, 0.439);
 52 |   --grayA10: hsla(0, 0%, 0%, 0.478);
 53 |   --grayA11: hsla(0, 0%, 0%, 0.565);
 54 |   --grayA12: hsla(0, 0%, 0%, 0.91);
 55 | 
 56 |   --blue1: hsl(206, 100%, 99.2%);
 57 |   --blue2: hsl(210, 100%, 98%);
 58 |   --blue3: hsl(209, 100%, 96.5%);
 59 |   --blue4: hsl(210, 98.8%, 94%);
 60 |   --blue5: hsl(209, 95%, 90.1%);
 61 |   --blue6: hsl(209, 81.2%, 84.5%);
 62 |   --blue7: hsl(208, 77.5%, 76.9%);
 63 |   --blue8: hsl(206, 81.9%, 65.3%);
 64 |   --blue9: hsl(206, 100%, 50%);
 65 |   --blue10: hsl(208, 100%, 47.3%);
 66 |   --blue11: hsl(211, 100%, 43.2%);
 67 |   --blue12: hsl(211, 100%, 15%);
 68 | }
 69 | 
 70 | .dark {
 71 |   --app-bg: var(--gray1);
 72 |   --app-text: #ffffff;
 73 | 
 74 |   --lowContrast: #000000;
 75 |   --highContrast: #ffffff;
 76 | 
 77 |   --gray1: hsl(0, 0%, 8.5%);
 78 |   --gray2: hsl(0, 0%, 11%);
 79 |   --gray3: hsl(0, 0%, 13.6%);
 80 |   --gray4: hsl(0, 0%, 15.8%);
 81 |   --gray5: hsl(0, 0%, 17.9%);
 82 |   --gray6: hsl(0, 0%, 20.5%);
 83 |   --gray7: hsl(0, 0%, 24.3%);
 84 |   --gray8: hsl(0, 0%, 31.2%);
 85 |   --gray9: hsl(0, 0%, 43.9%);
 86 |   --gray10: hsl(0, 0%, 49.4%);
 87 |   --gray11: hsl(0, 0%, 62.8%);
 88 |   --gray12: hsl(0, 0%, 93%);
 89 | 
 90 |   --grayA1: hsla(0, 0%, 100%, 0);
 91 |   --grayA2: hsla(0, 0%, 100%, 0.026);
 92 |   --grayA3: hsla(0, 0%, 100%, 0.056);
 93 |   --grayA4: hsla(0, 0%, 100%, 0.077);
 94 |   --grayA5: hsla(0, 0%, 100%, 0.103);
 95 |   --grayA6: hsla(0, 0%, 100%, 0.129);
 96 |   --grayA7: hsla(0, 0%, 100%, 0.172);
 97 |   --grayA8: hsla(0, 0%, 100%, 0.249);
 98 |   --grayA9: hsla(0, 0%, 100%, 0.386);
 99 |   --grayA10: hsla(0, 0%, 100%, 0.446);
100 |   --grayA11: hsla(0, 0%, 100%, 0.592);
101 |   --grayA12: hsla(0, 0%, 100%, 0.923);
102 | 
103 |   --blue1: hsl(212, 35%, 9.2%);
104 |   --blue2: hsl(216, 50%, 11.8%);
105 |   --blue3: hsl(214, 59.4%, 15.3%);
106 |   --blue4: hsl(214, 65.8%, 17.9%);
107 |   --blue5: hsl(213, 71.2%, 20.2%);
108 |   --blue6: hsl(212, 77.4%, 23.1%);
109 |   --blue7: hsl(211, 85.1%, 27.4%);
110 |   --blue8: hsl(211, 89.7%, 34.1%);
111 |   --blue9: hsl(206, 100%, 50%);
112 |   --blue10: hsl(209, 100%, 60.6%);
113 |   --blue11: hsl(210, 100%, 66.1%);
114 |   --blue12: hsl(206, 98%, 95.8%);
115 | }
116 | 
117 | body {
118 |   background: var(--app-bg);
119 | }
120 | 
121 | div [command-dialog-mask] {
122 |   background-color: rgba(0, 0, 0, 0.3);
123 |   height: 100vh;
124 |   left: 0;
125 |   position: fixed;
126 |   top: 0;
127 |   width: 100vw;
128 |   z-index: 200;
129 |   animation: 333ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running shown;
130 | }
131 | 
132 | div [command-dialog-wrapper] {
133 |   position: relative;
134 |   background: var(--gray2);
135 |   border-radius: 6px;
136 |   box-shadow: none;
137 |   flex-direction: column;
138 |   margin: 20vh auto auto;
139 |   max-width: 560px;
140 |   animation: 333ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running shown;
141 | }
142 | 
143 | div [command-dialog-footer] {
144 |   border-top: 1px solid var(--gray6);
145 |   align-items: center;
146 |   background: var(--gray4);
147 |   color: var(--gray11);
148 |   border-radius: 0 0 8px 8px;
149 |   box-shadow: none;
150 |   display: flex;
151 |   flex-direction: row-reverse;
152 |   flex-shrink: 0;
153 |   height: 44px;
154 |   justify-content: space-between;
155 |   padding: 0 12px;
156 |   position: relative;
157 |   user-select: none;
158 |   width: 100%;
159 |   z-index: 300;
160 |   font-size: 12px;
161 | }
162 | 


--------------------------------------------------------------------------------
/src/assets/scss/algolia.scss:
--------------------------------------------------------------------------------
  1 | .algolia {
  2 |   [command-root] {
  3 |     padding: 8px;
  4 |   }
  5 | 
  6 |   [command-input] {
  7 |     font-family: var(--font-sans);
  8 |     width: 100%;
  9 |     font-size: 18px;
 10 |     padding: 12px;
 11 |     outline: none;
 12 |     background: var(--bg);
 13 |     color: var(--gray12);
 14 |     border-bottom: 1px solid var(--gray6);
 15 |     border-radius: 4px;
 16 |     caret-color: var(--vcp-c-brand);
 17 |     margin: 0;
 18 |     border: 1px solid var(--vcp-c-brand);
 19 | 
 20 |     &::placeholder {
 21 |       color: var(--gray9);
 22 |     }
 23 |   }
 24 | 
 25 |   [command-list] {
 26 |     height: var(--command-list-height);
 27 |     max-height: 360px;
 28 |     overflow: auto;
 29 |     overscroll-behavior: contain;
 30 |     transition: 100ms ease;
 31 |     transition-property: height;
 32 |   }
 33 | 
 34 |   [command-item] {
 35 |     position: relative;
 36 |     content-visibility: auto;
 37 |     cursor: pointer;
 38 |     height: 56px;
 39 |     font-size: 14px;
 40 |     display: flex;
 41 |     align-items: center;
 42 |     gap: 12px;
 43 |     padding: 0px 16px;
 44 |     color: var(--gray12);
 45 |     user-select: none;
 46 |     will-change: background, color;
 47 |     transition: all 150ms ease;
 48 |     transition-property: none;
 49 |     border-radius: 4px;
 50 |     margin-top: 4px;
 51 | 
 52 |     &:first-child {
 53 |       margin-top: 0px;
 54 |     }
 55 | 
 56 |     &[aria-selected='true'],
 57 |     &:hover {
 58 |       background: var(--vcp-c-brand);
 59 |       color: #fff;
 60 | 
 61 |       svg {
 62 |         color: #fff;
 63 |       }
 64 | 
 65 |       [command-linear-shortcuts] {
 66 |         display: flex;
 67 |         margin-left: auto;
 68 |         gap: 8px;
 69 | 
 70 |         kbd {
 71 |           font-family: var(--font-sans);
 72 |           font-size: 13px;
 73 |           color: var(--gray11);
 74 |         }
 75 |       }
 76 |     }
 77 | 
 78 |     &[aria-disabled='true'] {
 79 |       color: var(--gray8);
 80 |       cursor: not-allowed;
 81 |     }
 82 | 
 83 |     &:active {
 84 |       transition-property: background;
 85 |       background: var(--gray4);
 86 |     }
 87 | 
 88 |     svg {
 89 |       width: 16px;
 90 |       height: 16px;
 91 |       color: var(--gray10);
 92 |     }
 93 |   }
 94 | 
 95 |   [command-empty=''] {
 96 |     font-size: 14px;
 97 |     display: flex;
 98 |     align-items: center;
 99 |     justify-content: center;
100 |     height: 64px;
101 |     white-space: pre-wrap;
102 |     color: var(--gray11);
103 |   }
104 | 
105 |   [command-dialog-mask] {
106 |     background-color: rgba(75, 75, 75, 0.8);
107 |   }
108 | 
109 |   [command-dialog-header] {
110 |     padding: 12px;
111 |   }
112 | 
113 |   [command-dialog-body] {
114 |     padding: 0 12px 12px;
115 |   }
116 | 
117 |   [command-dialog-footer] {
118 |     align-items: center;
119 |     border-radius: 0 0 8px 8px;
120 |     box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
121 |     display: flex;
122 |     flex-direction: row-reverse;
123 |     flex-shrink: 0;
124 |     height: 44px;
125 |     justify-content: space-between;
126 |     padding: 0 12px;
127 |     position: relative;
128 |     user-select: none;
129 |     width: 100%;
130 |     z-index: 300;
131 |   }
132 | 
133 |   [command-group-heading] {
134 |     color: var(--vcp-c-brand);
135 |     font-size: 0.85em;
136 |     font-weight: 600;
137 |     line-height: 32px;
138 |     margin: 0 -4px;
139 |     padding: 8px 4px 0;
140 |     top: 0;
141 |     z-index: 10;
142 |     width: 100%;
143 |   }
144 | 
145 |   .command-palette-commands {
146 |     color: var(--docsearch-muted-color);
147 |     display: flex;
148 |     list-style: none;
149 |     margin: 0;
150 |     padding: 0;
151 | 
152 |     li {
153 |       display: flex;
154 |       align-items: center;
155 |     }
156 |     li:not(:last-of-type) {
157 |       margin-right: 0.8em;
158 |     }
159 |   }
160 | 
161 |   .command-palette-logo {
162 |     a {
163 |       display: flex;
164 |       align-items: center;
165 |       gap: 8px;
166 |     }
167 |     svg {
168 |       height: 24px;
169 |       width: 24px;
170 |     }
171 |   }
172 | 
173 |   .command-palette-commands-key {
174 |     align-items: center;
175 |     background: var(--gray3);
176 |     border-radius: 2px;
177 |     display: flex;
178 |     height: 18px;
179 |     justify-content: center;
180 |     margin-right: 0.4em;
181 |     padding: 0 0 1px;
182 |     color: var(--gray11);
183 |     border: 0;
184 |     width: 20px;
185 |   }
186 | }
187 | 
188 | .dark .algolia [command-dialog-footer] {
189 |   box-shadow: none;
190 | }
191 | 
192 | // transition for command-dialog
193 | .command-dialog-enter-active,
194 | .command-dialog-leave-active {
195 |   transition: opacity 0.2s ease-in-out;
196 | }
197 | 
198 | .command-dialog-enter-from,
199 | .command-dialog-leave-to {
200 |   opacity: 0;
201 | }
202 | 
203 | .command-dialog-enter-active {
204 |   transition-duration: 0.5s;
205 | }
206 | 
207 | // transition for command-dialog-wrapper
208 | .command-dialog-enter-active [command-dialog-wrapper] {
209 |   transition-delay: 0.2s;
210 | }
211 | 
212 | .command-dialog-enter-from [command-dialog-wrapper],
213 | .command-dialog-leave-to [command-dialog-wrapper] {
214 |   opacity: 0;
215 |   transform: translateY(10px) scale(0.95);
216 | }
217 | 
218 | .command-dialog-enter-active [command-dialog-wrapper] {
219 |   transition: transform ease-out 0.3s;
220 | }
221 | 
222 | .command-dialog-enter-to [command-dialog-wrapper],
223 | .command-dialog-leave-from [command-dialog-wrapper] {
224 |   opacity: 1;
225 |   transform: translateY(0) scale(1);
226 | }
227 | 
228 | .command-dialog-leave-active [command-dialog-wrapper] {
229 |   transition: transfrom ease-in 0.2s;
230 | }
231 | 


--------------------------------------------------------------------------------
/src/assets/scss/framer.scss:
--------------------------------------------------------------------------------
  1 | .framer {
  2 |   [command-root] {
  3 |     max-width: 640px;
  4 |     width: 100%;
  5 |     padding: 8px;
  6 |     background: #ffffff;
  7 |     border-radius: 16px;
  8 |     overflow: hidden;
  9 |     font-family: var(--font-sans);
 10 |     border: 1px solid var(--gray6);
 11 |     box-shadow: var(--command-shadow);
 12 | 
 13 |     .dark & {
 14 |       background: var(--gray2);
 15 |     }
 16 |   }
 17 | 
 18 |   [command-framer-header] {
 19 |     display: flex;
 20 |     align-items: center;
 21 |     gap: 8px;
 22 |     height: 48px;
 23 |     padding: 0 8px;
 24 |     border-bottom: 1px solid var(--gray5);
 25 |     margin-bottom: 12px;
 26 |     padding-bottom: 8px;
 27 | 
 28 |     svg {
 29 |       width: 20px;
 30 |       height: 20px;
 31 |       color: var(--gray9);
 32 |       transform: translateY(1px);
 33 |     }
 34 |   }
 35 | 
 36 |   [command-input] {
 37 |     font-family: var(--font-sans);
 38 |     border: none;
 39 |     width: 100%;
 40 |     font-size: 16px;
 41 |     outline: none;
 42 |     background: var(--bg);
 43 |     color: var(--gray12);
 44 | 
 45 |     &::placeholder {
 46 |       color: var(--gray9);
 47 |     }
 48 |   }
 49 | 
 50 |   [command-item] {
 51 |     content-visibility: auto;
 52 | 
 53 |     cursor: pointer;
 54 |     border-radius: 12px;
 55 |     font-size: 14px;
 56 |     display: flex;
 57 |     align-items: center;
 58 |     gap: 12px;
 59 |     color: var(--gray12);
 60 |     padding: 8px 8px;
 61 |     margin-right: 8px;
 62 |     font-weight: 500;
 63 |     transition: all 150ms ease;
 64 |     transition-property: none;
 65 | 
 66 |     &[aria-selected='true'] {
 67 |       background: var(--blue9);
 68 |       color: #ffffff;
 69 | 
 70 |       [command-framer-item-subtitle] {
 71 |         color: #ffffff;
 72 |       }
 73 |     }
 74 | 
 75 |     &[aria-disabled='true'] {
 76 |       color: var(--gray8);
 77 |       cursor: not-allowed;
 78 |     }
 79 | 
 80 |     & + [command-item] {
 81 |       margin-top: 4px;
 82 |     }
 83 | 
 84 |     svg {
 85 |       width: 16px;
 86 |       height: 16px;
 87 |       color: #ffffff;
 88 |     }
 89 |   }
 90 | 
 91 |   [command-framer-icon-wrapper] {
 92 |     display: flex;
 93 |     align-items: center;
 94 |     justify-content: center;
 95 |     min-width: 32px;
 96 |     height: 32px;
 97 |     background: orange;
 98 |     border-radius: 8px;
 99 |   }
100 | 
101 |   [command-framer-item-meta] {
102 |     display: flex;
103 |     flex-direction: column;
104 |     gap: 4px;
105 |   }
106 | 
107 |   [command-framer-item-subtitle] {
108 |     font-size: 12px;
109 |     font-weight: 400;
110 |     color: var(--gray11);
111 |   }
112 | 
113 |   [command-framer-items] {
114 |     min-height: 308px;
115 |     display: flex;
116 |   }
117 | 
118 |   [command-framer-left] {
119 |     width: 40%;
120 |   }
121 | 
122 |   [command-framer-separator] {
123 |     width: 1px;
124 |     border: 0;
125 |     margin-right: 8px;
126 |     background: var(--gray6);
127 |   }
128 | 
129 |   [command-framer-right] {
130 |     display: flex;
131 |     align-items: center;
132 |     justify-content: center;
133 |     border-radius: 8px;
134 |     margin-left: 8px;
135 |     width: 60%;
136 | 
137 |     button {
138 |       width: 120px;
139 |       height: 40px;
140 |       background: var(--blue9);
141 |       border-radius: 6px;
142 |       font-weight: 500;
143 |       color: white;
144 |       font-size: 14px;
145 |     }
146 | 
147 |     input[type='text'] {
148 |       height: 40px;
149 |       width: 160px;
150 |       border: 1px solid var(--gray6);
151 |       background: #ffffff;
152 |       border-radius: 6px;
153 |       padding: 0 8px;
154 |       font-size: 14px;
155 |       font-family: var(--font-sans);
156 |       box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
157 | 
158 |       &::placeholder {
159 |         color: var(--gray9);
160 |       }
161 | 
162 |       @media (prefers-color-scheme: dark) {
163 |         background: var(--gray3);
164 |       }
165 |     }
166 | 
167 |     [command-framer-radio] {
168 |       display: flex;
169 |       align-items: center;
170 |       gap: 4px;
171 |       color: var(--gray12);
172 |       font-weight: 500;
173 |       font-size: 14px;
174 |       accent-color: var(--blue9);
175 | 
176 |       input {
177 |         width: 20px;
178 |         height: 20px;
179 |       }
180 |     }
181 | 
182 |     img {
183 |       width: 40px;
184 |       height: 40px;
185 |       border-radius: 9999px;
186 |       border: 1px solid var(--gray6);
187 |     }
188 | 
189 |     [command-framer-container] {
190 |       width: 100px;
191 |       height: 100px;
192 |       background: var(--blue9);
193 |       border-radius: 16px;
194 |     }
195 | 
196 |     [command-framer-badge] {
197 |       background: var(--blue3);
198 |       padding: 0 8px;
199 |       height: 28px;
200 |       font-size: 14px;
201 |       line-height: 28px;
202 |       color: var(--blue11);
203 |       border-radius: 9999px;
204 |       font-weight: 500;
205 |     }
206 | 
207 |     [command-framer-slider] {
208 |       height: 20px;
209 |       width: 200px;
210 |       background: linear-gradient(90deg, var(--blue9) 40%, var(--gray3) 0%);
211 |       border-radius: 9999px;
212 | 
213 |       div {
214 |         width: 20px;
215 |         height: 20px;
216 |         background: #ffffff;
217 |         border-radius: 9999px;
218 |         box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.32);
219 |         transform: translateX(70px);
220 |       }
221 |     }
222 |   }
223 | 
224 |   [command-list] {
225 |     overflow: auto;
226 |   }
227 | 
228 |   [command-separator] {
229 |     height: 1px;
230 |     width: 100%;
231 |     background: var(--gray5);
232 |     margin: 4px 0;
233 |   }
234 | 
235 |   [command-group-heading] {
236 |     user-select: none;
237 |     font-size: 12px;
238 |     color: var(--gray11);
239 |     padding: 0 8px;
240 |     display: flex;
241 |     align-items: center;
242 |     margin-bottom: 8px;
243 |   }
244 | 
245 |   [command-empty] {
246 |     font-size: 14px;
247 |     padding: 32px;
248 |     white-space: pre-wrap;
249 |     color: var(--gray11);
250 |   }
251 | }
252 | 
253 | @media (max-width: 640px) {
254 |   .framer {
255 |     [command-framer-icon-wrapper] {
256 |     }
257 | 
258 |     [command-framer-item-subtitle] {
259 |       display: none;
260 |     }
261 |   }
262 | }
263 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## [0.2.3](https://github.com/xiaoluoboding/vue-command-palette/compare/v0.2.2...v0.2.3) (2023-09-20)
  2 | 
  3 | 
  4 | ### Bug Fixes
  5 | 
  6 | * fixed the debounce search bug [#18](https://github.com/xiaoluoboding/vue-command-palette/issues/18) ([5d72166](https://github.com/xiaoluoboding/vue-command-palette/commit/5d72166779778a88df790b6dc7175319918e2a2f))
  7 | 
  8 | 
  9 | 
 10 | ## [0.2.2](https://github.com/xiaoluoboding/vue-command-palette/compare/v0.2.1...v0.2.2) (2023-09-12)
 11 | 
 12 | 
 13 | ### Bug Fixes
 14 | 
 15 | * fixed blank when filter text ([08da9ef](https://github.com/xiaoluoboding/vue-command-palette/commit/08da9ef7d1c28fcd411dfabde40c56485a55ac9b))
 16 | 
 17 | 
 18 | 
 19 | ## [0.2.1](https://github.com/xiaoluoboding/vue-command-palette/compare/v0.2.0...v0.2.1) (2023-09-12)
 20 | 
 21 | 
 22 | ### Bug Fixes
 23 | 
 24 | * filter the item when rerender ([f26308f](https://github.com/xiaoluoboding/vue-command-palette/commit/f26308f964b5ec50f767bac98e0f833a5eae6d44))
 25 | * fixed the bug [#14](https://github.com/xiaoluoboding/vue-command-palette/issues/14) ([f8e4ac8](https://github.com/xiaoluoboding/vue-command-palette/commit/f8e4ac86b3d1074bbe0ea78de259b26f2372b1ea))
 26 | * fixed the bug of [#14](https://github.com/xiaoluoboding/vue-command-palette/issues/14) ([9df6def](https://github.com/xiaoluoboding/vue-command-palette/commit/9df6def24bd0414232ae7f1bd0aef0d46277aac0))
 27 | 
 28 | 
 29 | ### Features
 30 | 
 31 | * allow user reset or update the search value ([5f140ed](https://github.com/xiaoluoboding/vue-command-palette/commit/5f140edfabc776571d2b67270ab3cdc84eafea59))
 32 | 
 33 | 
 34 | 
 35 | # [0.2.0](https://github.com/xiaoluoboding/vue-command-palette/compare/v0.1.4...v0.2.0) (2023-08-22)
 36 | 
 37 | 
 38 | ### Bug Fixes
 39 | 
 40 | * fixed the type error ([70bf1f5](https://github.com/xiaoluoboding/vue-command-palette/commit/70bf1f53469aa9e0ecf0bf32383afb1ffab3988e))
 41 | 
 42 | 
 43 | ### Features
 44 | 
 45 | * add types for command component ([e619b5e](https://github.com/xiaoluoboding/vue-command-palette/commit/e619b5ed560a924716381ce06a2e8d6fa2ca54c9))
 46 | * close on clicking outside ([ca71816](https://github.com/xiaoluoboding/vue-command-palette/commit/ca71816ea4b5f6750a7388b068782629c02ede7d))
 47 | 
 48 | 
 49 | 
 50 | ## [0.1.4](https://github.com/xiaoluoboding/vue-command-palette/compare/v0.1.3...v0.1.4) (2022-12-14)
 51 | 
 52 | 
 53 | ### Bug Fixes
 54 | 
 55 | * bottom scroll bar ([5c38a00](https://github.com/xiaoluoboding/vue-command-palette/commit/5c38a00fef77c386b158a1e601229995b3e3783b))
 56 | 
 57 | 
 58 | 
 59 | ## [0.1.3](https://github.com/xiaoluoboding/vue-command-palette/compare/v0.1.2...v0.1.3) (2022-09-15)
 60 | 
 61 | 
 62 | 
 63 | ## [0.1.2](https://github.com/xiaoluoboding/vue-command-palette/compare/fec87bf5042b5bfd389421524ff3ec3226c39879...v0.1.2) (2022-09-15)
 64 | 
 65 | 
 66 | ### Bug Fixes
 67 | 
 68 | * fixed the input event ([810ba79](https://github.com/xiaoluoboding/vue-command-palette/commit/810ba79da3fdbceb03deba11fd6b7de28dc32ef0))
 69 | * fixed the list component types ([f60e20a](https://github.com/xiaoluoboding/vue-command-palette/commit/f60e20a117e6197c9b922e5aa24a1090937ef34f))
 70 | 
 71 | 
 72 | ### Features
 73 | 
 74 | * add fuzzy search items in group ([684f1e8](https://github.com/xiaoluoboding/vue-command-palette/commit/684f1e8aa0aa02663e99bc2d7db059daf0960507))
 75 | * add rerender list event ([db85fb9](https://github.com/xiaoluoboding/vue-command-palette/commit/db85fb9cb16d65f36785bd7733c80333e51e403f))
 76 | * add the cmdk it's self ([b8dc650](https://github.com/xiaoluoboding/vue-command-palette/commit/b8dc6500b19f5746669f49b8e6b725529e1f8f03))
 77 | * add the code demo ([0cfb97b](https://github.com/xiaoluoboding/vue-command-palette/commit/0cfb97b3e5cb40888b928d389143aa820aff51de))
 78 | * add the demo of linear ([8e98e98](https://github.com/xiaoluoboding/vue-command-palette/commit/8e98e98545dc5c749d22e900aff82036985d1930))
 79 | * add the fuzzy search feature ([48969d9](https://github.com/xiaoluoboding/vue-command-palette/commit/48969d918ff6885556c1d7dac2db555685c6610c))
 80 | * add the input v-model:value attribute ([1536795](https://github.com/xiaoluoboding/vue-command-palette/commit/153679526f68cdb1d52a06620893430241b86694))
 81 | * add the keyboard event feature ([585ca53](https://github.com/xiaoluoboding/vue-command-palette/commit/585ca533c1ece2dcf985ff8cc1b8d76990e83424))
 82 | * add the list height animation ([278ba13](https://github.com/xiaoluoboding/vue-command-palette/commit/278ba131c07ecabfdf9fc31bb433253c943d5b60))
 83 | * add the perform action ([9837cc6](https://github.com/xiaoluoboding/vue-command-palette/commit/9837cc6177f93cce0965ff68ead9304a423cd6b3))
 84 | * add the raycast cmdk demo ([754f7fe](https://github.com/xiaoluoboding/vue-command-palette/commit/754f7fe5d339fd5c971699615783333719b4ae01))
 85 | * add the select item event on cmdk component ([1dc7b2a](https://github.com/xiaoluoboding/vue-command-palette/commit/1dc7b2a6ab07b49f1fa5a645dc825240175063fc))
 86 | * add the toggle dark mode action ([8633f95](https://github.com/xiaoluoboding/vue-command-palette/commit/8633f95bc59ae0c7acff40fc7530c6ceb7113455))
 87 | * add the vercel cmdk demo ([1d59805](https://github.com/xiaoluoboding/vue-command-palette/commit/1d5980503f7921c09f54ea751a8dc35a817acfe9))
 88 | * add transition for self dialog ([fb2ed08](https://github.com/xiaoluoboding/vue-command-palette/commit/fb2ed08513ca56a69ba6c51a4ba43e049e899d1d))
 89 | * change the demo page ([1d2b16b](https://github.com/xiaoluoboding/vue-command-palette/commit/1d2b16b6bb370d6c1ee2987d55509d7822767236))
 90 | * create the lib ([fec87bf](https://github.com/xiaoluoboding/vue-command-palette/commit/fec87bf5042b5bfd389421524ff3ec3226c39879))
 91 | * deal with the event emitter ([5e36efd](https://github.com/xiaoluoboding/vue-command-palette/commit/5e36efdb833f68cfc4e0bcf688c9021d1c8a6982))
 92 | * fixed the dark mode toggle ([923f178](https://github.com/xiaoluoboding/vue-command-palette/commit/923f178faed6b78d8b22999c99ace78f0440ae55))
 93 | * fixed the empty node ([624dc08](https://github.com/xiaoluoboding/vue-command-palette/commit/624dc081a72d693e5db17a9fddbf6d3d8607233a))
 94 | * handle dispatch the event on item ([71081a4](https://github.com/xiaoluoboding/vue-command-palette/commit/71081a4f74af7cdd5406d604c9a83b995aa8ff33))
 95 | * hidden the empty node ([7cae74f](https://github.com/xiaoluoboding/vue-command-palette/commit/7cae74f480019d532f7df530ad967fe9c4222777))
 96 | * navigate to the group first item ([ae5a3d0](https://github.com/xiaoluoboding/vue-command-palette/commit/ae5a3d02ff9007206a78abfb3e575046f9dc459c))
 97 | * no valid idx, then go to the first/last of item ([a9c6db4](https://github.com/xiaoluoboding/vue-command-palette/commit/a9c6db4d279212acad118d47e138f52226605f74))
 98 | * rename cmdk to command ([9850592](https://github.com/xiaoluoboding/vue-command-palette/commit/985059217e81092094e32a97d8d8b2a0d96c5f73))
 99 | * use the provide/inject api ([07868b7](https://github.com/xiaoluoboding/vue-command-palette/commit/07868b78e510f1916063c9baa64e524bfe88ddbe))
100 | 
101 | 
102 | 
103 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { computed, ref, watch } from 'vue'
  3 | import { useMagicKeys } from '@vueuse/core'
  4 | 
  5 | import { isDark, toggleDarkmode } from '~/composables/useDarkmode'
  6 | import Linear from '~/components/command/Linear.vue'
  7 | import Vercel from '~/components/command/vercel/Vercel.vue'
  8 | import Raycast from '~/components/command/raycast/Raycast.vue'
  9 | import Self from '~/components/command/Self.vue'
 10 | import Logo from '~/components/icons/Logo.vue'
 11 | import SunIcon from '~/components/icons/SunIcon.vue'
 12 | import MoonIcon from '~/components/icons/MoonIcon.vue'
 13 | 
 14 | const isOpenDialog = ref(false)
 15 | const isOpenThemeDialog = ref(false)
 16 | const selectedView = ref('')
 17 | // const target = ref(null)
 18 | const currentDialog = computed(() => {
 19 |   if (selectedView.value === 'Linear')
 20 |     return Linear
 21 |   if (selectedView.value === 'Vercel')
 22 |     return Vercel
 23 |   if (selectedView.value === 'Raycast')
 24 |     return Raycast
 25 |   return Linear
 26 | })
 27 | 
 28 | const keys = useMagicKeys()
 29 | const CmdK = keys['Meta+K']
 30 | const Escape = keys.Escape
 31 | 
 32 | function handleChangeDialog(view = 'self') {
 33 |   const isSelf = view === 'self'
 34 |   selectedView.value = view
 35 |   isOpenDialog.value = isSelf
 36 |   isOpenThemeDialog.value = !isSelf
 37 | }
 38 | function handleOpenDialog(value: any) {
 39 |   if (value)
 40 |     isOpenDialog.value = true
 41 |   else
 42 |     isOpenDialog.value = false
 43 | }
 44 | 
 45 | watch(CmdK, (v) => {
 46 |   if (v) {
 47 |     console.log('Meta + K has been pressed')
 48 |     isOpenDialog.value = true
 49 |   }
 50 | })
 51 | watch(Escape, (v) => {
 52 |   if (v) {
 53 |     console.log('Escape has been pressed')
 54 |     isOpenDialog.value = false
 55 |     isOpenThemeDialog.value = false
 56 |   }
 57 | })
 58 | // onClickOutside(target, (event) => {
 59 | //   console.log('Clicked the outside element of Command K Palette')
 60 | //   isOpenDialog.value = false
 61 | // })
 62 | 
 63 | const demoCode1 = `<!-- <template> -->
 64 | <Command.Dialog :visible="visible" theme="custom">
 65 |   <template #header>
 66 |     <Command.Input placeholder="Type a command or search..." />
 67 |   </template>
 68 |   <template #body>
 69 |     <Command.List>
 70 |       <Command.Empty>No results found.</Command.Empty>
 71 | 
 72 |       <Command.Group heading="Letters">
 73 |         <Command.Item>a</Command.Item>
 74 |         <Command.Item>b</Command.Item>
 75 |         <Command.Separator />
 76 |         <Command.Item>c</Command.Item>
 77 |       </Command.Group>
 78 | 
 79 |       <Command.Item>Apple</Command.Item>
 80 |     </Command.List>
 81 |   </template>
 82 | </Command.Dialog>
 83 | `
 84 | 
 85 | const demoCode2 = `// <script lang="ts" setup>
 86 | import { ref } from 'vue'
 87 | import { Command } from 'vue-command-palette'
 88 | 
 89 | const visible = ref(false)
 90 | `
 91 | </script>
 92 | 
 93 | <template>
 94 |   <div class="w-full h-full">
 95 |     <div class="container mx-auto max-w-5xl relative">
 96 |       <nav class="h-20 py-4 flex-between text-[var(--app-text)]">
 97 |         <div class="font-semibold text-xl flex-center gap-2">
 98 |           <Logo class="h-6 w-6" />
 99 |           Vue Command Palette
100 |         </div>
101 |         <div class="flex-center gap-4">
102 |           <button
103 |             class="bg-transparent opacity-50 hover:opacity-100 transition"
104 |             @click="(e) => toggleDarkmode()"
105 |           >
106 |             <MoonIcon v-if="isDark" class="w-6 h-6" />
107 |             <SunIcon v-else class="w-6 h-6" />
108 |           </button>
109 |           <a
110 |             class="opacity-50 hover:opacity-100 transition"
111 |             href="https://github.com/xiaoluoboding/vue-command-palette"
112 |           >
113 |             <carbon:logo-github class="h-6 w-6" />
114 |           </a>
115 |         </div>
116 |       </nav>
117 |       <header class="py-20">
118 |         <div class="font-extrabold">
119 |           <span class="text-6xl text-neon"> A Command Palette </span>
120 |           <div class="text-6xl text-[var(--app-text)]">
121 |             for Vue
122 |           </div>
123 |         </div>
124 |         <div
125 |           class="text-2xl font-semibold text-slate-700 py-4 dark:text-slate-200"
126 |         >
127 |           Fast, composable, unstyled command palette for Vue.
128 |         </div>
129 |         <div class="flex gap-4 mt-8">
130 |           <a
131 |             class="bg-gray-200 hover:bg-gray-300 transition rounded-full text-lg font-semibold py-3 px-6 w-full sm:w-auto text-center"
132 |             href="https://github.com/xiaoluoboding/vue-command-palette"
133 |           >Documentation</a>
134 |           <button
135 |             class="bg-emerald-400 hover:bg-emerald-500 flex items-center justify-center space-x-3 transition rounded-full text-white text-lg font-semibold py-3 px-6 w-full sm:w-auto cursor-pointer"
136 |             @click="isOpenDialog = true"
137 |           >
138 |             <span>Try it out</span>
139 |             <span class="space-x-1 hidden sm:inline-flex">
140 |               <span
141 |                 class="bg-gradient-to-b text-sm from-white via-white to-gray-200 pb-0.5 pt-px px-1 text-gray-800 rounded"
142 |               >
143 |                 ⌘
144 |               </span>
145 |               <span
146 |                 class="bg-gradient-to-b text-sm from-white via-white to-gray-200 pb-0.5 pt-px px-1 text-gray-800 rounded"
147 |               >
148 |                 K
149 |               </span>
150 |             </span>
151 |           </button>
152 |         </div>
153 |       </header>
154 | 
155 |       <main class="grid grid-cols-1 gap-8 text-xs 2xl:text-sm">
156 |         <Highlight :autodetect="false" language="html" :code="demoCode1" />
157 |         <Highlight
158 |           :autodetect="false"
159 |           language="javascript"
160 |           :code="demoCode2"
161 |         />
162 |       </main>
163 | 
164 |       <footer
165 |         class="mt-16 w-full flex-center text-[var(--app-text)]"
166 |         text="slate-900 dark:slate-300 opacity-60 sm"
167 |       >
168 |         <div class="copyright flex flex-col justify-center items-center">
169 |           <p>
170 |             Code with ❤ & ☕️ by
171 |             <a class="text-neon" href="https://github.com/xiaoluoboding">
172 |               @xiaoluoboding
173 |             </a>
174 |             <span> © {{ new Date().getFullYear() }}</span>
175 |           </p>
176 |           <p class="flex items-center space-x-1">
177 |             <carbon:logo-twitter class="text-emerald-500" />
178 |             <span>
179 |               <a
180 |                 href="https://twitter.com/robert_shaw_x"
181 |                 class="text-neon"
182 |                 target="_blank"
183 |               >
184 |                 Follow me on Twitter
185 |               </a>
186 |             </span>
187 |             <span class="px-2 text-emerald-300">|</span>
188 |             <carbon:cafe class="text-emerald-500" />
189 |             <span>
190 |               <a
191 |                 href="https://www.buymeacoffee.com/xlbd"
192 |                 target="_blank"
193 |                 class="text-neon"
194 |               >
195 |                 Buy me a coffee
196 |               </a>
197 |             </span>
198 |             <span class="px-2 text-emerald-300">|</span>
199 |             <mdi:heart class="text-emerald-500" />
200 |             <span>
201 |               <a
202 |                 href="https://github.com/sponsors/xiaoluoboding"
203 |                 target="_blank"
204 |                 class="text-neon"
205 |               >
206 |                 Sponsor me on GitHub
207 |               </a>
208 |             </span>
209 |           </p>
210 |         </div>
211 |       </footer>
212 | 
213 |       <div class="w-full mx-auto">
214 |         <Self
215 |           :visible="isOpenDialog"
216 |           @dialog="handleOpenDialog"
217 |           @select="handleChangeDialog"
218 |         />
219 |         <component :is="currentDialog" v-if="isOpenThemeDialog" />
220 |       </div>
221 |     </div>
222 |   </div>
223 | </template>
224 | 


--------------------------------------------------------------------------------
/src/components/command/Self.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { computed, ref } from 'vue'
  3 | import { onClickOutside, useMagicKeys, whenever } from '@vueuse/core'
  4 | 
  5 | import { Command, useCommandState } from '@/index'
  6 | import { isDark, toggleDarkmode } from '~/composables/useDarkmode'
  7 | import RaycastIcon from '~/components/icons/RaycastIcon.vue'
  8 | import LinearIcon from '~/components/icons/LinearIcon.vue'
  9 | import VercelIcon from '~/components/icons/VercelIcon.vue'
 10 | import SunIcon from '~/components/icons/SunIcon.vue'
 11 | import MoonIcon from '~/components/icons/MoonIcon.vue'
 12 | import Logo from '~/components/icons/Logo.vue'
 13 | 
 14 | defineProps<{
 15 |   visible: boolean
 16 | }>()
 17 | 
 18 | const emit = defineEmits(['select', 'dialog'])
 19 | const el = ref<HTMLDivElement | null>(null)
 20 | 
 21 | const items = [
 22 |   {
 23 |     icon: LinearIcon,
 24 |     label: 'Linear',
 25 |     shortcut: ['L'],
 26 |     perform: () => {},
 27 |   },
 28 |   {
 29 |     icon: RaycastIcon,
 30 |     label: 'Raycast',
 31 |     shortcut: ['R'],
 32 |     perform: () => {},
 33 |   },
 34 |   {
 35 |     icon: VercelIcon,
 36 |     label: 'Vercel',
 37 |     shortcut: ['V'],
 38 |     perform: () => {},
 39 |   },
 40 | ]
 41 | 
 42 | const preferenceItems = [
 43 |   {
 44 |     icon: SunIcon,
 45 |     label: 'Toggle Dark Mode',
 46 |     shortcut: ['G', 'T'],
 47 |     perform: () => toggleDarkmode(),
 48 |   },
 49 | ]
 50 | 
 51 | const activePage = ref('home')
 52 | const inputValue = ref('')
 53 | 
 54 | const isHomePage = computed(() => activePage.value === 'home')
 55 | 
 56 | const { current } = useMagicKeys()
 57 | const { search } = useCommandState()
 58 | 
 59 | function togglePage() {
 60 |   activePage.value = 'home'
 61 |   emit('select', 'self')
 62 | }
 63 | 
 64 | whenever(
 65 |   () => current.has('backspace'),
 66 |   () => {
 67 |     const commandInputEl = document.querySelector(
 68 |       'input[command-input]',
 69 |     ) as HTMLInputElement
 70 |     if (
 71 |       isHomePage.value
 72 |       || inputValue.value.length
 73 |       || commandInputEl.value.length
 74 |     )
 75 |       return
 76 |     togglePage()
 77 |   },
 78 | )
 79 | 
 80 | function handleSelectTheme(item: any) {
 81 |   activePage.value = item.value
 82 |   search.value = ''
 83 |   emit('select', item.value)
 84 | }
 85 | onClickOutside(el, (e: Event) => {
 86 |   const divEl = e.target as HTMLDivElement
 87 |   if (divEl?.hasAttribute('command-dialog-mask'))
 88 |     emit('dialog', false)
 89 | })
 90 | </script>
 91 | 
 92 | <template>
 93 |   <Command.Dialog ref="el" :visible="visible" theme="algolia">
 94 |     <template #header>
 95 |       <Command.Input
 96 |         v-model:value="inputValue"
 97 |         placeholder="Type a command or search..."
 98 |       />
 99 |     </template>
100 |     <template #body>
101 |       <Command.List>
102 |         <Command.Empty>No results found.</Command.Empty>
103 |         <Command.Group heading="Theme">
104 |           <Command.Item
105 |             v-for="item in items"
106 |             :data-value="item.label"
107 |             :shortcut="item.shortcut"
108 |             :perform="item.perform"
109 |             @select="handleSelectTheme"
110 |           >
111 |             <component :is="item.icon" />
112 |             <div>{{ item.label }}</div>
113 |             <div command-linear-shortcuts class="hidden">
114 |               <svg width="20" height="20" viewBox="0 0 20 20">
115 |                 <g
116 |                   stroke="currentColor"
117 |                   fill="none"
118 |                   fill-rule="evenodd"
119 |                   stroke-linecap="round"
120 |                   stroke-linejoin="round"
121 |                 >
122 |                   <path d="M18 3v4c0 2-2 4-4 4H2" />
123 |                   <path d="M8 17l-6-6 6-6" />
124 |                 </g>
125 |               </svg>
126 |             </div>
127 |           </Command.Item>
128 |         </Command.Group>
129 |         <Command.Group heading="Preference">
130 |           <Command.Item
131 |             v-for="item in preferenceItems"
132 |             :key="item.label"
133 |             :data-value="item.label"
134 |             :shortcut="item.shortcut"
135 |             :perform="item.perform"
136 |             @select="() => toggleDarkmode()"
137 |           >
138 |             <MoonIcon v-if="isDark" class="w-6 h-6" />
139 |             <SunIcon v-else class="w-6 h-6" />
140 |             {{ item.label }}
141 |             <div command-linear-shortcuts class="hidden">
142 |               <svg width="20" height="20" viewBox="0 0 20 20">
143 |                 <g
144 |                   stroke="currentColor"
145 |                   fill="none"
146 |                   fill-rule="evenodd"
147 |                   stroke-linecap="round"
148 |                   stroke-linejoin="round"
149 |                 >
150 |                   <path d="M18 3v4c0 2-2 4-4 4H2" />
151 |                   <path d="M8 17l-6-6 6-6" />
152 |                 </g>
153 |               </svg>
154 |             </div>
155 |           </Command.Item>
156 |         </Command.Group>
157 |       </Command.List>
158 |     </template>
159 |     <template #footer>
160 |       <div class="command-palette-logo">
161 |         <a
162 |           href="https://github.com/xiaoluoboding/vue-command-palette"
163 |           target="_blank"
164 |           rel="noopener noreferrer"
165 |         >
166 |           <span class="command-palette-Label">Search by</span>
167 |           <Logo />
168 |         </a>
169 |       </div>
170 |       <ul class="command-palette-commands">
171 |         <li>
172 |           <kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Enter key" role="img">
173 |             <g
174 |               fill="none"
175 |               stroke="currentColor"
176 |               stroke-linecap="round"
177 |               stroke-linejoin="round"
178 |               stroke-width="1.2"
179 |             >
180 |               <path
181 |                 d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
182 |               />
183 |             </g></svg></kbd><span class="command-palette-Label">to select</span>
184 |         </li>
185 |         <li>
186 |           <kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Arrow down" role="img">
187 |             <g
188 |               fill="none"
189 |               stroke="currentColor"
190 |               stroke-linecap="round"
191 |               stroke-linejoin="round"
192 |               stroke-width="1.2"
193 |             >
194 |               <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
195 |             </g></svg></kbd><kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Arrow up" role="img">
196 |             <g
197 |               fill="none"
198 |               stroke="currentColor"
199 |               stroke-linecap="round"
200 |               stroke-linejoin="round"
201 |               stroke-width="1.2"
202 |             >
203 |               <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
204 |             </g></svg></kbd><span class="command-palette-Label">to navigate</span>
205 |         </li>
206 |         <li>
207 |           <kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Escape key" role="img">
208 |             <g
209 |               fill="none"
210 |               stroke="currentColor"
211 |               stroke-linecap="round"
212 |               stroke-linejoin="round"
213 |               stroke-width="1.2"
214 |             >
215 |               <path
216 |                 d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
217 |               />
218 |             </g></svg></kbd><span class="command-palette-Label">to close</span>
219 |         </li>
220 |       </ul>
221 |     </template>
222 |   </Command.Dialog>
223 | </template>
224 | 
225 | <style lang="scss">
226 | @import '~/assets/scss/algolia.scss';
227 | </style>
228 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Command Palette for Vue
  2 | 
  3 | [![NPM][npmBadge]][npmUrl]
  4 | [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]
  5 | [![NPM Download][npmDtBadge]][npmDtUrl]
  6 | 
  7 | [npmBadge]: https://img.shields.io/npm/v/vue-command-palette.svg?maxAge=2592000
  8 | [npmUrl]: https://www.npmjs.com/package/vue-command-palette
  9 | [npmDtBadge]: https://img.shields.io/npm/dt/vue-command-palette.svg
 10 | [npmDtUrl]: https://www.npmjs.com/package/vue-command-palette
 11 | [bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/vue-command-palette
 12 | [bundlePhobiaUrl]: https://bundlephobia.com/package/vue-command-palette@latest
 13 | 
 14 | > A fast, composable, unstyled `Command` + `K` interface (Command Palette) for Vue.
 15 | 
 16 | ## Preview
 17 | 
 18 | ![Preview](vue-command-palette.gif)
 19 | 
 20 | ## Concepts
 21 | 
 22 | 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.
 23 | 
 24 | 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.
 25 | 
 26 | ## Table of Contents
 27 | 
 28 | <details>
 29 | 
 30 | <summary>TOC</summary>
 31 | 
 32 | - [Command Palette for Vue](#command-palette-for-vue)
 33 |   - [Preview](#preview)
 34 |   - [Concepts](#concepts)
 35 |   - [Table of Contents](#table-of-contents)
 36 |   - [Features](#features)
 37 |   - [Install](#install)
 38 |   - [Usage](#usage)
 39 |     - [Command + K or ?](#command--k-or-)
 40 |     - [Events](#events)
 41 |     - [Styling](#styling)
 42 |     - [Animation](#animation)
 43 |       - [Command.Dialog](#commanddialog)
 44 |       - [List Item Height](#list-item-height)
 45 |   - [Namespaced components](#namespaced-components)
 46 |     - [Command `[command-root=""]`](#command-command-root)
 47 |     - [Command.Dialog `[command-dialog=""]`](#commanddialog-command-dialog)
 48 |     - [Command.Input `[command-input=""]`](#commandinput-command-input)
 49 |     - [Command.List `[command-list=""]`](#commandlist-command-list)
 50 |     - [Command.Group `[command-group=""]`](#commandgroup-command-group)
 51 |     - [Command.Item `[command-item=""]`](#commanditem-command-item)
 52 |     - [Command.Separator `[command-separator=""]`](#commandseparator-command-separator)
 53 |     - [Command.Empty `[command-empty=""]`](#commandempty-command-empty)
 54 |     - [Command.Loading `[command-loading=""]`](#commandloading-command-loading)
 55 |   - [Inspiration](#inspiration)
 56 |   - [License](#license)
 57 | 
 58 | </details>
 59 | 
 60 | ## Features
 61 | 
 62 | - 🧩 [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) + [Namespaced Components](https://vuejs.org/api/sfc-script-setup.html#using-components) Design
 63 | - 💄 Completely unstyled, but more customizable
 64 | - 🔍 Fuzzy search support to find relevant command
 65 | - ⌨️ keyboard shortcut support to bind custom keybindings to your command
 66 | 
 67 | ## Install
 68 | 
 69 | ```bash
 70 | yarn add vue-command-palette
 71 | # or
 72 | pnpm add vue-command-palette
 73 | ```
 74 | 
 75 | ## Usage
 76 | 
 77 | Then you can import the `Command` [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) in your project.
 78 | 
 79 | ```vue
 80 | <script lang="ts" setup>
 81 | import { ref } from 'vue'
 82 | import { Command } from 'vue-command-palette'
 83 | </script>
 84 | 
 85 | <template>
 86 |   <Command theme="custom">
 87 |     <Command.Input placeholder="Type a command or search..." />
 88 |     <Command.List>
 89 |       <Command.Empty>No results found.</Command.Empty>
 90 | 
 91 |       <Command.Group heading="Letters">
 92 |         <Command.Item>a</Command.Item>
 93 |         <Command.Item>b</Command.Item>
 94 |         <Command.Separator />
 95 |         <Command.Item>c</Command.Item>
 96 |       </Command.Group>
 97 | 
 98 |       <Command.Item>Apple</Command.Item>
 99 |     </Command.List>
100 |   </Command>
101 | </template>
102 | 
103 | <style>
104 | // import your custom css
105 | @import '~/assets/css/custom.css';
106 | </style>
107 | ```
108 | 
109 | or in a dialog:
110 | 
111 | ```vue
112 | <script lang="ts" setup>
113 | import { ref } from 'vue'
114 | import { Command } from 'vue-command-palette'
115 | 
116 | const visible = ref(false)
117 | </script>
118 | 
119 | <template>
120 |   <Command.Dialog :visible="visible" theme="custom">
121 |     <template #header>
122 |       <Command.Input placeholder="Type a command or search..." />
123 |     </template>
124 |     <template #body>
125 |       <Command.List>
126 |         <Command.Empty>No results found.</Command.Empty>
127 | 
128 |         <Command.Group heading="Letters">
129 |           <Command.Item>a</Command.Item>
130 |           <Command.Item>b</Command.Item>
131 |           <Command.Separator />
132 |           <Command.Item>c</Command.Item>
133 |         </Command.Group>
134 | 
135 |         <Command.Item>Apple</Command.Item>
136 |       </Command.List>
137 |     </template>
138 |   </Command.Dialog>
139 | </template>
140 | 
141 | <style>
142 | // import your custom css
143 | @import '~/assets/css/custom.css';
144 | </style>
145 | ```
146 | 
147 | ### <kbd>Command</kbd> + <kbd>K</kbd> or ?
148 | 
149 | 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.
150 | 
151 | > Tips, we use `@vueuse/core` to bind the keybindings
152 | 
153 | ```html
154 | <script lang="ts" setup>
155 |   import { watch } from 'vue'
156 |   import { useMagicKeys } from '@vueuse/core'
157 | 
158 |   const keys = useMagicKeys()
159 |   const CmdK = keys['Meta+K']
160 | 
161 |   watch(CmdK, (v) => {
162 |     if (v) {
163 |       console.log('Meta + K has been pressed')
164 |       // do your own logic, maybe make dialog visible
165 |     }
166 |   })
167 | </script>
168 | ```
169 | 
170 | ### Events
171 | 
172 | |     Name      | Description                                                           | Parameters       |
173 | | :-----------: | --------------------------------------------------------------------- | :--------------- |
174 | | `select-item` | Every time an item is being selected in `Command` or `Command.Dialog` | `(item) => void` |
175 | 
176 | ### Styling
177 | 
178 | All namespaced components have a specific `data-attribute` starting with `command-` that can be used for styling.
179 | 
180 | eg:
181 | 
182 | ```css
183 | div[command-root=''] {
184 |   background: #ffffff;
185 | }
186 | ```
187 | 
188 | ### Animation
189 | 
190 | #### Command.Dialog
191 | 
192 | `Command.Dialog` wraped by built-in components [Transition](https://vuejs.org/guide/built-ins/transition.html), you can customize the animation using the name `command-dialog` .
193 | 
194 | [Example Code](https://github.com/xiaoluoboding/vue-command-palette/blob/main/src/assets/scss/algolia.scss#L193)
195 | 
196 | #### List Item Height
197 | 
198 | Animate height using the `--command-list-height` CSS variable.
199 | 
200 | [Example Code](https://github.com/xiaoluoboding/vue-command-palette/blob/main/src/assets/scss/algolia.scss#L26)
201 | 
202 | ## Namespaced components
203 | 
204 | With [Namespaced components](https://vuejs.org/api/sfc-script-setup.html#using-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.
205 | 
206 | ### Command `[command-root=""]`
207 | 
208 | The root component, Passes the `theme` props to set your own style.
209 | 
210 | ```vue
211 | <Command theme="custom">
212 |   <!-- Contains other namespaced components -->
213 | </Command>
214 | ```
215 | 
216 | ### Command.Dialog `[command-dialog=""]`
217 | 
218 | The root component with a dialog interface, [Teleport](https://vuejs.org/guide/built-ins/teleport.html) dialog to `body` tag. Passes the `theme` props to set your own style, and `visible` props control whether render it.
219 | 
220 | ```vue
221 | <Command.Dialog :visible="visible" theme="custom">
222 |   <!-- Contains other namespaced components -->
223 |   <template #header></template>
224 |   <template #body></template>
225 |   <template #footer></template>
226 | </Command.Dialog>
227 | ```
228 | 
229 | `data-attribute` within dialog
230 | 
231 | - `[command-dialog-mask]` - the mask is always rendered.
232 | - `[command-dialog-wrapper]` - the wrapper on top of mask.
233 | - `[command-dialog-header]` - the parent of dialog header slot.
234 | - `[command-dialog-body]` - the parent of dialog body slot.
235 | - `[command-dialog-footer]` - the parent of dialog footer slot.
236 | 
237 | ### Command.Input `[command-input=""]`
238 | 
239 | Usually we need a input in the command palette to search sth.
240 | 
241 | ```vue
242 | <Command.Input
243 |   placeholder="Type a command or search..."
244 |   v-model:value="inputValue"
245 | />
246 | ```
247 | 
248 | ### Command.List `[command-list=""]`
249 | 
250 | Contains items and groups. Animate height using the `--command-list-height` CSS variable.
251 | 
252 | ```css
253 | [command-list] {
254 |   min-height: 300px;
255 |   height: var(--command-list-height);
256 |   max-height: 500px;
257 |   transition: height 100ms ease;
258 | }
259 | ```
260 | 
261 | ```vue
262 | <Command.List>
263 |   <!-- Contains Group, Item, Empty -->
264 | </Command.List>
265 | ```
266 | 
267 | ### Command.Group `[command-group=""]`
268 | 
269 | Group items (`[command-group-items]`) together with the given `heading` (`[command-group-heading]`)
270 | 
271 | ```vue
272 | <Command.Group heading="Perference">
273 |   <Command.Item>Toggle Dark Mode</Command.Item>
274 |   <Command.Item>Change Language</Command.Item>
275 | </Command.Group>
276 | ```
277 | 
278 | ### Command.Item `[command-item=""]`
279 | 
280 | Passed the `data-value`, we use `data-value` to fetch the value.
281 | 
282 | ```vue
283 | <Command.Item
284 |   v-for="item in items"
285 |   :data-value="item.label"
286 |   :shortcut="item.shortcut"
287 |   :perform="item.perform"
288 |   @select="(itemInfo) => console.log('selected', itemInfo)"
289 |   // the itemInfo.value is some as `data-value`
290 | >
291 |   {{ item.label }}
292 | </Command.Item>
293 | ```
294 | 
295 | ### Command.Separator `[command-separator=""]`
296 | 
297 | Usually used to distinguish between different groups
298 | 
299 | ### Command.Empty `[command-empty=""]`
300 | 
301 | Automatically renders when there are no results for the search query.
302 | 
303 | ### Command.Loading `[command-loading=""]`
304 | 
305 | Your should manually control `loading`
306 | 
307 | ## Inspiration
308 | 
309 | - [cmdk](https://github.com/pacocoursey/cmdk) - Fast, unstyled command menu React component.
310 | - [kbar](https://github.com/timc1/kbar) - fast, portable, and extensible cmd+k interface for your site.
311 | 
312 | ## License
313 | 
314 | MIT [@xiaoluoboding](https://github.com/xiaoluoboding)
315 | 


--------------------------------------------------------------------------------
/packages/CommandRoot.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { computed, nextTick, onMounted, provide, ref, watch } from 'vue'
  3 | import { refDebounced } from '@vueuse/core'
  4 | import Fuse from 'fuse.js'
  5 | 
  6 | import { useCommandState } from './useCommandState'
  7 | import { useCommandEvent } from './useCommandEvent'
  8 | import { findNextSibling, findPreviousSibling } from './utils'
  9 | import type { CommandRootEmits, CommandRootProps, ItemInfo } from './types'
 10 | 
 11 | defineOptions({
 12 |   name: 'Command.Root',
 13 | })
 14 | 
 15 | const props = withDefaults(defineProps<CommandRootProps>(), {
 16 |   theme: 'default',
 17 |   fuseOptions() {
 18 |     return {
 19 |       threshold: 0.2,
 20 |       keys: ['label'],
 21 |     }
 22 |   },
 23 | })
 24 | 
 25 | const emit = defineEmits<CommandRootEmits>()
 26 | 
 27 | const ITEM_SELECTOR = '[command-item=""]'
 28 | const ITEM_KEY_SELECTOR = 'command-item-key'
 29 | // const LIST_SELECTOR = `[command-list-sizer=""]`
 30 | const GROUP_SELECTOR = `[command-group=""]`
 31 | const GROUP_KEY_SELECTOR = 'command-group-key'
 32 | // const GROUP_ITEMS_SELECTOR = `[command-group-items=""]`
 33 | const GROUP_HEADING_SELECTOR = `[command-group-heading=""]`
 34 | const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`
 35 | const SELECTED_ITEM_SELECTOR = `${ITEM_SELECTOR}[aria-selected="true"]`
 36 | const SELECT_EVENT = `command-item-select`
 37 | const VALUE_ATTR = `data-value`
 38 | 
 39 | provide('theme', props.theme || 'default')
 40 | const { selectedNode, search, filtered, shouldRerender } = useCommandState()
 41 | const { itemInfo, rerenderList } = useCommandEvent()
 42 | 
 43 | const commandRef = ref<HTMLDivElement>()
 44 | const commandList = refDebounced(ref(new Map()), 333)
 45 | const allItemIds = refDebounced(ref<Set<string>>(new Set()), 333) // [...itemIds]
 46 | const allGroupIds = refDebounced(ref<Map<string, Set<string>>>(new Map())) // groupId -> [...itemIds]
 47 | 
 48 | const commandFuseList = computed(() => {
 49 |   const fuseList = [] as any[]
 50 |   for (const [key, label] of commandList.value.entries()) {
 51 |     fuseList.push({
 52 |       key,
 53 |       label,
 54 |     })
 55 |   }
 56 |   return fuseList
 57 | })
 58 | 
 59 | const fuse = computed(() => {
 60 |   const fuseIndex = Fuse.createIndex(
 61 |     props.fuseOptions.keys!,
 62 |     commandFuseList.value,
 63 |   )
 64 |   return new Fuse(commandFuseList.value, props.fuseOptions, fuseIndex)
 65 | })
 66 | 
 67 | function scrollSelectedIntoView() {
 68 |   const item = getSelectedItem()
 69 | 
 70 |   if (item) {
 71 |     if (item.parentElement?.firstElementChild === item) {
 72 |       // First item in Group, ensure heading is in view
 73 |       item
 74 |         .closest(GROUP_SELECTOR)
 75 |         ?.querySelector(GROUP_HEADING_SELECTOR)
 76 |         ?.scrollIntoView({ block: 'nearest' })
 77 |     }
 78 | 
 79 |     // Ensure the item is always in view
 80 |     item.scrollIntoView({ block: 'nearest' })
 81 |   }
 82 | }
 83 | 
 84 | /** Getters */
 85 | 
 86 | function getSelectedItem() {
 87 |   return commandRef.value?.querySelector(SELECTED_ITEM_SELECTOR)
 88 | }
 89 | 
 90 | function getAllGroups() {
 91 |   const allGroupEl = commandRef.value?.querySelectorAll(
 92 |     GROUP_SELECTOR,
 93 |   ) as NodeListOf<HTMLElement>
 94 |   return allGroupEl ? Array.from(allGroupEl) : []
 95 | }
 96 | 
 97 | function getAllItems(rootNode: HTMLElement | undefined = commandRef.value) {
 98 |   const allItemEl = rootNode?.querySelectorAll(
 99 |     ITEM_SELECTOR,
100 |   ) as NodeListOf<HTMLElement>
101 |   return allItemEl ? Array.from(allItemEl) : []
102 | }
103 | 
104 | function getValidItems(rootNode: HTMLElement | undefined = commandRef.value) {
105 |   const allItemEl = rootNode?.querySelectorAll(
106 |     VALID_ITEM_SELECTOR,
107 |   ) as NodeListOf<HTMLElement>
108 |   return allItemEl ? Array.from(allItemEl) : []
109 | }
110 | 
111 | function selectedFirstItem() {
112 |   const [firstItem] = getValidItems()
113 |   if (firstItem && firstItem.getAttribute(ITEM_KEY_SELECTOR))
114 |     selectedNode.value = firstItem.getAttribute(ITEM_KEY_SELECTOR) || ''
115 | }
116 | 
117 | /** Setters */
118 | 
119 | /**
120 |  * set the selected item index by index
121 |  */
122 | function updateSelectedToIndex(index: number) {
123 |   const items = getValidItems()
124 |   const item = items[index]
125 |   if (item)
126 |     selectedNode.value = item.getAttribute(ITEM_KEY_SELECTOR) || ''
127 | }
128 | 
129 | function updateSelectedByChange(change: 1 | -1) {
130 |   const selected = getSelectedItem()
131 |   const items = getValidItems()
132 |   const index = items.findIndex(item => item === selected)
133 | 
134 |   // Get item at this index
135 |   const newSelected = items[index + change]
136 |   if (newSelected) {
137 |     selectedNode.value = newSelected.getAttribute(ITEM_KEY_SELECTOR) || ''
138 |   }
139 |   else {
140 |     // no valid idx, then go to the first/last of item
141 |     change > 0
142 |       ? updateSelectedToIndex(0)
143 |       : updateSelectedToIndex(items.length - 1)
144 |   }
145 | }
146 | 
147 | function updateSelectedToGroup(change: 1 | -1) {
148 |   const selected = getSelectedItem()
149 |   let group = selected?.closest(GROUP_SELECTOR)
150 |   let item: HTMLElement | null | undefined = null
151 |   // console.group('update selected to group')
152 |   // console.log(selected)
153 |   // console.log(group)
154 | 
155 |   while (group && !item) {
156 |     group
157 |       = change > 0
158 |         ? findNextSibling(group, GROUP_SELECTOR)
159 |         : findPreviousSibling(group, GROUP_SELECTOR)
160 |     item = group?.querySelector(VALID_ITEM_SELECTOR)
161 |   }
162 |   // console.log(group)
163 |   // console.log(item)
164 |   // console.groupEnd()
165 | 
166 |   if (item)
167 |     selectedNode.value = item.getAttribute(ITEM_KEY_SELECTOR) || ''
168 |   else
169 |     updateSelectedByChange(change)
170 | }
171 | 
172 | const first = () => updateSelectedToIndex(0)
173 | const last = () => updateSelectedToIndex(getValidItems().length - 1)
174 | 
175 | function next(e: KeyboardEvent) {
176 |   e.preventDefault()
177 |   if (e.metaKey) {
178 |     // Last item
179 |     last()
180 |   }
181 |   else if (e.altKey) {
182 |     // Next group
183 |     updateSelectedToGroup(1)
184 |   }
185 |   else {
186 |     // Next item
187 |     updateSelectedByChange(1)
188 |   }
189 | }
190 | 
191 | function prev(e: KeyboardEvent) {
192 |   e.preventDefault()
193 |   if (e.metaKey) {
194 |     // First item
195 |     first()
196 |   }
197 |   else if (e.altKey) {
198 |     // Previous group
199 |     updateSelectedToGroup(-1)
200 |   }
201 |   else {
202 |     // Previous item
203 |     updateSelectedByChange(-1)
204 |   }
205 | }
206 | 
207 | function handleKeyDown(e: KeyboardEvent) {
208 |   // console.log('keydown', e)
209 |   switch (e.key) {
210 |     case 'n':
211 |     case 'j': {
212 |       // vim keybind down
213 |       if (e.ctrlKey)
214 |         next(e)
215 | 
216 |       break
217 |     }
218 |     case 'ArrowDown': {
219 |       next(e)
220 |       break
221 |     }
222 |     case 'p':
223 |     case 'k': {
224 |       // vim keybind up
225 |       if (e.ctrlKey)
226 |         prev(e)
227 | 
228 |       break
229 |     }
230 |     case 'ArrowUp': {
231 |       prev(e)
232 |       break
233 |     }
234 |     case 'Home': {
235 |       // First item
236 |       first()
237 |       break
238 |     }
239 |     case 'End': {
240 |       // Last item
241 |       last()
242 |       break
243 |     }
244 |     case 'Enter': {
245 |       // Trigger item handleSelect
246 |       const item = getSelectedItem()
247 |       if (item) {
248 |         const event = new Event(SELECT_EVENT)
249 |         item.dispatchEvent(event)
250 |       }
251 |     }
252 |   }
253 | }
254 | 
255 | /**
256 |  * Filters the current items.
257 |  */
258 | function filterItems() {
259 |   if (!search.value) {
260 |     filtered.value.count = allItemIds.value.size
261 |     // Do nothing, each item will know to show itself because search is empty
262 |     return
263 |   }
264 | 
265 |   // Reset the groups
266 |   filtered.value.groups = new Set()
267 | 
268 |   const items = new Map()
269 | 
270 |   const list = fuse.value.search(search.value).map(r => r.item)
271 | 
272 |   // transform list to map
273 |   for (const { key, label } of list)
274 |     items.set(key, label)
275 | 
276 |   // Check which groups have at least 1 item shown
277 |   for (const [groupId, itemIdsInGroup] of allGroupIds.value) {
278 |     for (const itemId of itemIdsInGroup) {
279 |       if (items.get(itemId))
280 |         filtered.value.groups.add(groupId)
281 |     }
282 |   }
283 | 
284 |   filtered.value.count = items.size
285 |   filtered.value.items = items
286 | }
287 | 
288 | function initStore() {
289 |   const groups = getAllGroups()
290 |   const items = getAllItems()
291 | 
292 |   for (const item of items) {
293 |     const itemKey = item.getAttribute(ITEM_KEY_SELECTOR) || ''
294 |     const itemLabel = item.getAttribute(VALUE_ATTR) || ''
295 |     allItemIds.value.add(itemKey)
296 |     commandList.value.set(itemKey, itemLabel)
297 |     filtered.value.count = commandList.value.size
298 |   }
299 | 
300 |   // map the items in group
301 |   for (const group of groups) {
302 |     const itemsInGroup = getAllItems(group)
303 |     const groupId = group.getAttribute(GROUP_KEY_SELECTOR) || ''
304 |     const itemIds = new Set('')
305 | 
306 |     for (const item of itemsInGroup) {
307 |       const itemKey = item.getAttribute(ITEM_KEY_SELECTOR) || ''
308 |       itemIds.add(itemKey)
309 |     }
310 |     allGroupIds.value.set(groupId, itemIds)
311 |   }
312 | }
313 | 
314 | /**
315 |  * handle scroll into view
316 |  */
317 | watch(
318 |   () => selectedNode.value,
319 |   (newVal) => {
320 |     if (newVal)
321 |       nextTick(scrollSelectedIntoView)
322 |   },
323 |   { deep: true },
324 | )
325 | 
326 | /**
327 |  * when search's value is changed, trigger filter action
328 |  */
329 | watch(
330 |   () => search.value,
331 |   () => {
332 |     if (shouldRerender.value)
333 |       return
334 |     filterItems()
335 |     nextTick(selectedFirstItem)
336 |   },
337 | )
338 | 
339 | watch(
340 |   () => itemInfo.value,
341 |   (item) => {
342 |     emit('selectItem', item!)
343 |   },
344 | )
345 | 
346 | function rerenderMenuList(isRerender: boolean) {
347 |   if (isRerender) {
348 |     shouldRerender.value = isRerender
349 |     initStore()
350 |     nextTick(() => {
351 |       filterItems()
352 |       selectedFirstItem()
353 |       shouldRerender.value = false
354 |     })
355 |   }
356 | }
357 | 
358 | watch(
359 |   () => rerenderList.value,
360 |   (val) => {
361 |     if (val)
362 |       rerenderMenuList(val)
363 |   },
364 | )
365 | 
366 | onMounted(() => {
367 |   initStore()
368 |   nextTick(selectedFirstItem)
369 | })
370 | </script>
371 | 
372 | <template>
373 |   <div
374 |     ref="commandRef"
375 |     :class="theme"
376 |     :command-theme="theme"
377 |     @keydown="handleKeyDown"
378 |   >
379 |     <div command-root>
380 |       <slot />
381 |     </div>
382 |   </div>
383 | </template>
384 | 


--------------------------------------------------------------------------------
/src/assets/scss/raycast.scss:
--------------------------------------------------------------------------------
  1 | .raycast {
  2 |   [command-dialog-wrapper] {
  3 |     max-width: 640px;
  4 |     width: 100%;
  5 |     background: var(--gray1);
  6 |     border-radius: 12px;
  7 |     padding: 8px 0;
  8 |     font-family: var(--font-sans);
  9 |     box-shadow: var(--command-shadow);
 10 |     border: 1px solid var(--gray6);
 11 |     position: relative;
 12 | 
 13 |     .dark & {
 14 |       background: var(--gray2);
 15 |       border: 0;
 16 | 
 17 |       &:after {
 18 |         content: '';
 19 |         background: linear-gradient(
 20 |           to right,
 21 |           var(--gray6) 20%,
 22 |           var(--gray6) 40%,
 23 |           var(--gray10) 50%,
 24 |           var(--gray10) 55%,
 25 |           var(--gray6) 70%,
 26 |           var(--gray6) 100%
 27 |         );
 28 |         z-index: -1;
 29 |         position: absolute;
 30 |         border-radius: 12px;
 31 |         top: -1px;
 32 |         left: -1px;
 33 |         width: calc(100% + 2px);
 34 |         height: calc(100% + 2px);
 35 |         animation: shine 3s ease forwards 0.1s;
 36 |         background-size: 200% auto;
 37 |       }
 38 | 
 39 |       &:before {
 40 |         content: '';
 41 |         z-index: -1;
 42 |         position: absolute;
 43 |         border-radius: 12px;
 44 |         top: -1px;
 45 |         left: -1px;
 46 |         width: calc(100% + 2px);
 47 |         height: calc(100% + 2px);
 48 |         box-shadow: 0 0 0 1px transparent;
 49 |         animation: border 1s linear forwards 0.5s;
 50 |       }
 51 |     }
 52 | 
 53 |     kbd {
 54 |       font-family: var(--font-sans);
 55 |       background: var(--gray3);
 56 |       color: var(--gray11);
 57 |       height: 20px;
 58 |       width: 20px;
 59 |       border-radius: 4px;
 60 |       padding: 0 4px;
 61 |       display: flex;
 62 |       align-items: center;
 63 |       justify-content: center;
 64 | 
 65 |       &:first-of-type {
 66 |         margin-left: 8px;
 67 |       }
 68 |     }
 69 |   }
 70 | 
 71 |   [command-input] {
 72 |     font-family: var(--font-sans);
 73 |     border: none;
 74 |     width: 100%;
 75 |     font-size: 15px;
 76 |     padding: 8px 16px;
 77 |     outline: none;
 78 |     background: var(--bg);
 79 |     color: var(--gray12);
 80 | 
 81 |     &::placeholder {
 82 |       color: var(--gray9);
 83 |     }
 84 |   }
 85 | 
 86 |   [command-raycast-top-shine] {
 87 |     .dark & {
 88 |       background: linear-gradient(
 89 |         90deg,
 90 |         rgba(56, 189, 248, 0),
 91 |         var(--gray5) 20%,
 92 |         var(--gray9) 67.19%,
 93 |         rgba(236, 72, 153, 0)
 94 |       );
 95 |       height: 1px;
 96 |       position: absolute;
 97 |       top: -1px;
 98 |       width: 100%;
 99 |       z-index: -1;
100 |       opacity: 0;
101 |       animation: showTopShine 0.1s ease forwards 0.2s;
102 |     }
103 |   }
104 | 
105 |   [command-raycast-loader] {
106 |     --loader-color: var(--gray9);
107 |     border: 0;
108 |     width: 100%;
109 |     width: 100%;
110 |     left: 0;
111 |     height: 1px;
112 |     background: var(--gray6);
113 |     position: relative;
114 |     overflow: visible;
115 |     display: block;
116 |     margin-top: 12px;
117 |     margin-bottom: 12px;
118 | 
119 |     &:after {
120 |       content: '';
121 |       width: 50%;
122 |       height: 1px;
123 |       position: absolute;
124 |       background: linear-gradient(
125 |         90deg,
126 |         transparent 0%,
127 |         var(--loader-color) 50%,
128 |         transparent 100%
129 |       );
130 |       top: -1px;
131 |       opacity: 0;
132 |       animation-duration: 1.5s;
133 |       animation-delay: 1s;
134 |       animation-timing-function: ease;
135 |       animation-name: loading;
136 |     }
137 |   }
138 | 
139 |   [command-item] {
140 |     content-visibility: auto;
141 | 
142 |     cursor: pointer;
143 |     height: 40px;
144 |     border-radius: 8px;
145 |     font-size: 14px;
146 |     display: flex;
147 |     align-items: center;
148 |     gap: 8px;
149 |     padding: 0 8px;
150 |     color: var(--gray12);
151 |     user-select: none;
152 |     will-change: background, color;
153 |     transition: all 150ms ease;
154 |     transition-property: none;
155 | 
156 |     &[aria-selected='true'] {
157 |       background: var(--gray4);
158 |       color: var(--gray12);
159 |     }
160 | 
161 |     &[aria-disabled='true'] {
162 |       color: var(--gray8);
163 |       cursor: not-allowed;
164 |     }
165 | 
166 |     &:active {
167 |       transition-property: background;
168 |       background: var(--gray4);
169 |     }
170 | 
171 |     &:first-child {
172 |       margin-top: 8px;
173 |     }
174 | 
175 |     & + [command-item] {
176 |       margin-top: 4px;
177 |     }
178 | 
179 |     svg {
180 |       width: 18px;
181 |       height: 18px;
182 |     }
183 |   }
184 | 
185 |   [command-raycast-meta] {
186 |     margin-left: auto;
187 |     color: var(--gray11);
188 |     font-size: 13px;
189 |   }
190 | 
191 |   [command-list] {
192 |     padding: 0 8px;
193 |     height: var(--cmd-list-height);
194 |     overflow: auto;
195 |     overscroll-behavior: contain;
196 |     scroll-padding-block-end: 48px;
197 |     transition: 100ms ease;
198 |     transition-property: height;
199 |     padding-bottom: 40px;
200 |   }
201 | 
202 |   [command-raycast-open-trigger],
203 |   [command-raycast-subcommand-trigger] {
204 |     color: var(--gray11);
205 |     background: var(--grayA5);
206 |     padding: 0px 4px 0px 8px;
207 |     border-radius: 6px;
208 |     font-weight: 500;
209 |     font-size: 12px;
210 |     height: 28px;
211 |     letter-spacing: -0.25px;
212 |   }
213 | 
214 |   [command-raycast-clipboard-icon],
215 |   [command-raycast-hammer-icon] {
216 |     width: 20px;
217 |     height: 20px;
218 |     border-radius: 6px;
219 |     display: flex;
220 |     align-items: center;
221 |     justify-content: center;
222 |     color: #ffffff;
223 | 
224 |     svg {
225 |       width: 14px;
226 |       height: 14px;
227 |     }
228 |   }
229 | 
230 |   [command-raycast-clipboard-icon] {
231 |     background: linear-gradient(to bottom, #f55354, #eb4646);
232 |   }
233 | 
234 |   [command-raycast-hammer-icon] {
235 |     background: linear-gradient(to bottom, #6cb9a3, #2c6459);
236 |   }
237 | 
238 |   [command-raycast-open-trigger] {
239 |     display: flex;
240 |     align-items: center;
241 |     color: var(--gray12);
242 |   }
243 | 
244 |   [command-raycast-subcommand-trigger] {
245 |     display: flex;
246 |     align-items: center;
247 |     gap: 4px;
248 |     right: 8px;
249 |     bottom: 8px;
250 | 
251 |     svg {
252 |       width: 14px;
253 |       height: 14px;
254 |     }
255 | 
256 |     hr {
257 |       height: 100%;
258 |       background: var(--gray6);
259 |       border: 0;
260 |       width: 1px;
261 |     }
262 | 
263 |     &[aria-expanded='true'],
264 |     &:hover {
265 |       background: var(--gray4);
266 | 
267 |       kbd {
268 |         background: var(--gray7);
269 |       }
270 |     }
271 |   }
272 | 
273 |   [command-separator] {
274 |     height: 1px;
275 |     width: 100%;
276 |     background: var(--gray5);
277 |     margin: 4px 0;
278 |   }
279 | 
280 |   * + [command-group] {
281 |     margin-top: 8px;
282 |   }
283 | 
284 |   [command-group-heading] {
285 |     user-select: none;
286 |     font-size: 12px;
287 |     color: var(--gray11);
288 |     padding: 0 8px;
289 |     display: flex;
290 |     align-items: center;
291 |   }
292 | 
293 |   [command-dialog-footer] {
294 |     display: flex;
295 |     flex-direction: row;
296 |     height: 40px;
297 |     align-items: center;
298 |     width: 100%;
299 |     position: absolute;
300 |     background: var(--gray1);
301 |     bottom: 0;
302 |     padding: 8px;
303 |     border-top: 1px solid var(--gray6);
304 |     border-radius: 0 0 12px 12px;
305 | 
306 |     svg {
307 |       width: 20px;
308 |       height: 20px;
309 |       filter: grayscale(1);
310 |       margin-right: auto;
311 |     }
312 | 
313 |     hr {
314 |       height: 12px;
315 |       width: 1px;
316 |       border: 0;
317 |       background: var(--gray6);
318 |       margin: 0 4px 0px 12px;
319 |     }
320 | 
321 |     @media (prefers-color-scheme: dark) {
322 |       background: var(--gray2);
323 |     }
324 |   }
325 | 
326 |   [command-popover] {
327 |     z-index: var(--layer-portal);
328 |     position: fixed;
329 |     left: 50%;
330 |     top: var(--page-top);
331 |     transform: translateX(-50%);
332 | 
333 |     [command] {
334 |       width: 640px;
335 |       transform-origin: center center;
336 |       animation: dialogIn var(--transition-fast) forwards;
337 |     }
338 | 
339 |     &[data-state='closed'] [command] {
340 |       animation: dialogOut var(--transition-fast) forwards;
341 |     }
342 |   }
343 | 
344 |   [command-empty] {
345 |     font-size: 14px;
346 |     display: flex;
347 |     align-items: center;
348 |     justify-content: center;
349 |     height: 64px;
350 |     white-space: pre-wrap;
351 |     color: var(--gray11);
352 |   }
353 | }
354 | 
355 | @keyframes loading {
356 |   0% {
357 |     opacity: 0;
358 |     transform: translateX(0);
359 |   }
360 | 
361 |   50% {
362 |     opacity: 1;
363 |     transform: translateX(100%);
364 |   }
365 | 
366 |   100% {
367 |     opacity: 0;
368 |     transform: translateX(0);
369 |   }
370 | }
371 | 
372 | @keyframes shine {
373 |   to {
374 |     background-position: 200% center;
375 |     opacity: 0;
376 |   }
377 | }
378 | 
379 | @keyframes border {
380 |   to {
381 |     box-shadow: 0 0 0 1px var(--gray6);
382 |   }
383 | }
384 | 
385 | @keyframes showTopShine {
386 |   to {
387 |     opacity: 1;
388 |   }
389 | }
390 | 
391 | .raycast-submenu {
392 |   [command-root] {
393 |     display: flex;
394 |     flex-direction: column;
395 |     width: 320px;
396 |     border: 1px solid var(--gray6);
397 |     background: var(--gray2);
398 |     border-radius: 8px;
399 |   }
400 | 
401 |   [command-list] {
402 |     padding: 8px;
403 |     overflow: auto;
404 |     overscroll-behavior: contain;
405 |     transition: 100ms ease;
406 |     transition-property: height;
407 |   }
408 | 
409 |   [command-item] {
410 |     height: 40px;
411 | 
412 |     cursor: pointer;
413 |     height: 40px;
414 |     border-radius: 8px;
415 |     font-size: 13px;
416 |     display: flex;
417 |     align-items: center;
418 |     gap: 8px;
419 |     padding: 0 8px;
420 |     color: var(--gray12);
421 |     user-select: none;
422 |     will-change: background, color;
423 |     transition: all 150ms ease;
424 |     transition-property: none;
425 | 
426 |     &[aria-selected='true'] {
427 |       background: var(--gray5);
428 |       color: var(--gray12);
429 | 
430 |       [command-raycast-submenu-shortcuts] kbd {
431 |         background: var(--gray7);
432 |       }
433 |     }
434 | 
435 |     &[aria-disabled='true'] {
436 |       color: var(--gray8);
437 |       cursor: not-allowed;
438 |     }
439 | 
440 |     svg {
441 |       width: 16px;
442 |       height: 16px;
443 |     }
444 | 
445 |     [command-raycast-submenu-shortcuts] {
446 |       display: flex;
447 |       margin-left: auto;
448 |       gap: 2px;
449 | 
450 |       kbd {
451 |         font-family: var(--font-sans);
452 |         background: var(--gray5);
453 |         color: var(--gray11);
454 |         height: 20px;
455 |         width: 20px;
456 |         border-radius: 4px;
457 |         padding: 0 4px;
458 |         font-size: 12px;
459 |         display: flex;
460 |         align-items: center;
461 |         justify-content: center;
462 | 
463 |         &:first-of-type {
464 |           margin-left: 8px;
465 |         }
466 |       }
467 |     }
468 |   }
469 | 
470 |   [command-group-heading] {
471 |     text-transform: capitalize;
472 |     font-size: 12px;
473 |     color: var(--gray11);
474 |     font-weight: 500;
475 |     margin-bottom: 8px;
476 |     margin-top: 8px;
477 |     margin-left: 4px;
478 |   }
479 | 
480 |   [command-input] {
481 |     padding: 12px;
482 |     font-family: var(--font-sans);
483 |     border: 0;
484 |     border-top: 1px solid var(--gray6);
485 |     font-size: 13px;
486 |     background: transparent;
487 |     margin-top: auto;
488 |     width: 100%;
489 |     outline: 0;
490 |     border-radius: 0;
491 |   }
492 | 
493 |   animation-duration: 0.2s;
494 |   animation-timing-function: ease;
495 |   animation-fill-mode: forwards;
496 |   transform-origin: var(--radix-popover-content-transform-origin);
497 | 
498 |   &[data-state='open'] {
499 |     animation-name: slideIn;
500 |   }
501 | 
502 |   &[data-state='closed'] {
503 |     animation-name: slideOut;
504 |   }
505 | 
506 |   [command-empty] {
507 |     display: flex;
508 |     align-items: center;
509 |     justify-content: center;
510 |     height: 64px;
511 |     white-space: pre-wrap;
512 |     font-size: 14px;
513 |     color: var(--gray11);
514 |   }
515 | }
516 | 
517 | @keyframes slideIn {
518 |   0% {
519 |     opacity: 0;
520 |     transform: scale(0.96);
521 |   }
522 | 
523 |   100% {
524 |     opacity: 1;
525 |     transform: scale(1);
526 |   }
527 | }
528 | 
529 | @keyframes slideOut {
530 |   0% {
531 |     opacity: 1;
532 |     transform: scale(1);
533 |   }
534 | 
535 |   100% {
536 |     opacity: 0;
537 |     transform: scale(0.96);
538 |   }
539 | }
540 | 
541 | @media (max-width: 640px) {
542 |   .raycast {
543 |     [command-input] {
544 |       font-size: 16px;
545 |     }
546 |   }
547 | }
548 | 


--------------------------------------------------------------------------------