feat(defineShortcuts): add cursorTarget to scope the shortcut to specific element

[J-Michalek]

🔗 Linked issue

Resolves: #4165

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I have added the option to specify which element can trigger the keyboard shortcut. This is useful when the user doesn't want to use a global shortcut but instead scope it to the cursorTarget element.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4169

commit: c06353b

[benjamincanac]

@J-Michalek Closing this as it brings too much complexity for something you can already achieve easily, here is an example:

<script setup lang="ts">
import { useElementHover } from '@vueuse/core'

const cursorTarget = ref<HTMLElement | null>(null)
const isTargetHovered = useElementHover(cursorTarget)
const open = ref(false)

const shortcuts = computed(() => ({
  i: isTargetHovered.value
    ? {
        handler: () => {
          open.value = !open.value
        }
      }
    : undefined
}))

defineShortcuts(shortcuts)
</script>

<template>
  <UPopover v-model:open="open">
    <Placeholder ref="cursorTarget" class="size-48" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>