From 53326100121eab968b69d6f60a27d6e42e1c9144 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sat, 6 Jan 2024 11:10:26 +0330
Subject: [PATCH] docs: prevent default browser behaviour with `ctrl-k/j` in
 `useMagicKeys` (#246)

build registry for stackblitz and codesandbox demos
---
 .../.vitepress/theme/layout/MainLayout.vue    |  8 ++++++-
 .../default/example/CommandDialogDemo.vue     | 21 ++++++++++++-------
 .../new-york/example/CommandDialogDemo.vue    | 21 ++++++++++++-------
 .../registry/styles/default/dialog.json       |  2 +-
 .../public/registry/styles/default/input.json |  2 +-
 .../registry/styles/new-york/dialog.json      |  2 +-
 .../registry/styles/new-york/input.json       |  2 +-
 7 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 9a0b7a0c..23bc4121 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/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])
diff --git a/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue b/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
index 9f18c79a..ddc3f24c 100644
--- a/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue b/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue
index e8b4e11a..f5e1beb1 100644
--- a/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue
+++ b/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>
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index c9f9387f..76ff177f 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/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",
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
index 4290905d..ae1e2ad9 100644
--- a/apps/www/src/public/registry/styles/default/input.json
+++ b/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",
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index c7aade14..cb379fd1 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/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",
diff --git a/apps/www/src/public/registry/styles/new-york/input.json b/apps/www/src/public/registry/styles/new-york/input.json
index 26a6a806..fb565151 100644
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ b/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",