docs: prevent default browser behaviour with ctrl-k/j in useMagicKeys (#246)

build registry for stackblitz and codesandbox demos

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -49,7 +49,13 @@ const links = [
 ]
 
 const isOpen = ref(false)
-const { Meta_K, Ctrl_K } = useMagicKeys()
+const { Meta_K, Ctrl_K } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'k' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
 
 watch([Meta_K, Ctrl_K], (v) => {
   if (v[0] || v[1])

apps/www/src/lib/registry/default/example/CommandDialogDemo.vue

@@ -14,17 +14,22 @@ import {
 
 const open = ref(false)
 
-const keys = useMagicKeys()
-const CmdJ = keys['Cmd+J']
+const { Meta_J, Ctrl_J } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'j' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+
+watch([Meta_J, Ctrl_J], (v) => {
+  if (v[0] || v[1])
+    handleOpenChange()
+})
 
 function handleOpenChange() {
   open.value = !open.value
 }
-
-watch(CmdJ, (v) => {
-  if (v)
-    handleOpenChange()
-})
 </script>
 
 <template>
@@ -37,7 +42,7 @@ watch(CmdJ, (v) => {
         <span class="text-xs">⌘</span>J
       </kbd>
     </p>
-    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+    <CommandDialog v-model:open="open">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>

apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue

@@ -14,17 +14,22 @@ import {
 
 const open = ref(false)
 
-const keys = useMagicKeys()
-const CmdJ = keys['Cmd+J']
+const { Meta_J, Ctrl_J } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'j' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+
+watch([Meta_J, Ctrl_J], (v) => {
+  if (v[0] || v[1])
+    handleOpenChange()
+})
 
 function handleOpenChange() {
   open.value = !open.value
 }
-
-watch(CmdJ, (v) => {
-  if (v)
-    handleOpenChange()
-})
 </script>
 
 <template>
@@ -37,7 +42,7 @@ watch(CmdJ, (v) => {
         <span class="text-xs">⌘</span>J
       </kbd>
     </p>
-    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+    <CommandDialog v-model:open="open">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>

apps/www/src/public/registry/styles/default/dialog.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
     },
     {
       "name": "DialogClose.vue",

apps/www/src/public/registry/styles/default/input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst { class: className, ...rest } = useAttrs()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className ?? '')\" v-bind=\"rest\">\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')\">\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/new-york/dialog.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
     },
     {
       "name": "DialogClose.vue",

apps/www/src/public/registry/styles/new-york/input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst { class: className, ...rest } = useAttrs()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className ?? '')\" v-bind=\"rest\">\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')\">\n</template>\n"
     },
     {
       "name": "index.ts",