# useClickableContainer

## 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).

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

```vue
<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. |

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `UseClickableContainerOptions` | — | Configuration object for the clickable container. Required. |
| `options.containerRef` | `Ref` | — | Ref to the outer container element. Required. |
| `options.interactiveRef` | `Ref` | — | Ref to the primary interactive element inside (link, button). If no `onClick` or `href` is provided, clicks are proxied to this element. |
| `options.onClick` | `(event: MouseEvent) => void` | — | Click handler fired when the container surface (not a nested interactive element) is clicked. |
| `options.href` | `string` | — | Navigation URL. When provided, clicking the container navigates to this URL. |
| `options.target` | `string` | — | Link target (for example `'_blank'`). Used with `href` for navigation behavior. |
| `options.disabled` | `boolean` | `false` | Whether the container is disabled. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `onClick` | `(event: MouseEvent) => void` | Click handler to attach to the container element. |
| `onMouseUp` | `(event: MouseEvent) => void` | Mouse up handler to attach to the container (handles middle-click navigation for `href`). |