docs: inline Key components in useMagicKeys and useKeyModifier demos

vueuse · broBinChen · Jul 16, 2025 · Jul 17, 2025 · Jul 16, 2025 · 50349e29b52586a45c0a3bafc4b696497bcd13c4
commit 50349e29b52586a45c0a3bafc4b696497bcd13c4
diff --git a/packages/core/useKeyModifier/demo.vue b/packages/core/useKeyModifier/demo.vue
@@ -1,13 +1,32 @@
 <script setup lang="ts">
 import { useKeyModifier } from '@vueuse/core'
-import Key from '../useMagicKeys/Key.vue'
+import { defineComponent, h } from 'vue'
 
 const capsLock = useKeyModifier('CapsLock')
 const numLock = useKeyModifier('NumLock')
 const scrollLock = useKeyModifier('ScrollLock')
 const shift = useKeyModifier('Shift')
 const control = useKeyModifier('Control')
 const alt = useKeyModifier('Alt')
+
+const Key = defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  render() {
+    return h('div', {
+      class: [
+        'font-mono px-4 py-2 rounded',
+        this.value
+          ? 'opacity-100 text-primary bg-primary bg-opacity-15'
+          : 'opacity-50 bg-gray-600 bg-opacity-10 dark:(bg-gray-400 bg-opacity-10)',
+      ],
+    }, this.$slots.default?.())
+  },
+})
 </script>
 
 <template>

diff --git a/packages/core/useMagicKeys/Key.vue b/packages/core/useMagicKeys/Key.vue
diff --git a/packages/core/useMagicKeys/demo.vue b/packages/core/useMagicKeys/demo.vue
@@ -1,10 +1,28 @@
 <script setup lang="ts">
 import { useMagicKeys } from '@vueuse/core'
-import { computed } from 'vue'
-import Key from './Key.vue'
+import { computed, defineComponent, h } from 'vue'
 
 const { shift, v, u, e, s, v_u_e, u_s_e, current } = useMagicKeys()
 const keys = computed(() => Array.from(current))
+
+const Key = defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  render() {
+    return h('div', {
+      class: [
+        'font-mono px-4 py-2 rounded',
+        this.value
+          ? 'opacity-100 text-primary bg-primary bg-opacity-15'
+          : 'opacity-50 bg-gray-600 bg-opacity-10 dark:(bg-gray-400 bg-opacity-10)',
+      ],
+    }, this.$slots.default?.())
+  },
+})
 </script>
 
 <template>