Usage

Makes a container element clickable while preserving nested interactive element behavior. Solves the "nested interactive elements" problem: when a card is clickable but contains buttons/links, clicking those should NOT trigger the card's action. Detects interactive ancestors between the click target and the container, and ignores text selections. Supports href navigation (including middle-click and Ctrl/Cmd+click for new tabs).

import { useClickableContainer } from '@astryx-vue/core'

<script setup lang="ts">
import { useClickableContainer } from '@astryx-vue/core'
import { useTemplateRef } from 'vue'

const cardRef = useTemplateRef<HTMLElement>('card')
const { onClick, onMouseUp } = useClickableContainer({
  containerRef: cardRef,
  href: '/reports/quarterly',
})
</script>

<template>
  <div ref="card" v-bind="{ onClick, onMouseUp }">
    <button type="button">
      Download
    </button>
  </div>
</template>

Best practices

Guidance	Practices
Do	Attach both onClick and onMouseUp to the container element (@click and @mouseup) for full click handling including middle-click.
Do	Use inside ClickableCard or SelectableCard for the standard card interaction pattern.
Don't	Use when the entire container is a single interactive element; just use a <button> or <a> directly.