e5cecae352
* docs: improve the api reference of all the components * docs(app): #152 add new-york theme This pull request is intended to add the new-york theme for the newly created component examples. Closes: #152 * chore: build registry * chore: change usage of lucide icon in new-york --------- Co-authored-by: zernonia <zernonia@gmail.com>
71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { useMagicKeys } from '@vueuse/core'
|
|
|
|
import { ref, watch } from 'vue'
|
|
import {
|
|
CommandDialog,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
} from '@/lib/registry/default/ui/command'
|
|
|
|
const open = ref(false)
|
|
|
|
const keys = useMagicKeys()
|
|
const CmdJ = keys['Cmd+J']
|
|
|
|
function handleOpenChange() {
|
|
open.value = !open.value
|
|
}
|
|
|
|
watch(CmdJ, (v) => {
|
|
if (v)
|
|
handleOpenChange()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<p class="text-sm text-muted-foreground">
|
|
Press
|
|
<kbd
|
|
class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
|
|
>
|
|
<span class="text-xs">⌘</span>J
|
|
</kbd>
|
|
</p>
|
|
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
|
<CommandInput placeholder="Type a command or search..." />
|
|
<CommandList>
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandGroup heading="Suggestions">
|
|
<CommandItem value="calendar">
|
|
Calendar
|
|
</CommandItem>
|
|
<CommandItem value="search-emoji">
|
|
Search Emoji
|
|
</CommandItem>
|
|
<CommandItem value="calculator">
|
|
Calculator
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
<CommandSeparator />
|
|
<CommandGroup heading="Settings">
|
|
<CommandItem value="profile">
|
|
Profile
|
|
</CommandItem>
|
|
<CommandItem value="billing">
|
|
Billing
|
|
</CommandItem>
|
|
<CommandItem value="settings">
|
|
Settings
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</CommandDialog>
|
|
</div>
|
|
</template>
|