> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Box Action

> BoxAction.vue Component Documentation

The `BoxAction.vue` component is a reusable Vue.js component designed to toggle a menu box or overlay panel. It integrates with the `useBoxStore` Pinia store to manage its open and close states programmatically. The component is often used for displaying action menus, filters, or other contextual information.

***

## Features

<CardGroup cols={2}>
  <Card title="Open/Close Management" icon="square-1">
    Uses <code>useBoxStore</code> to control the open/close state.
  </Card>

  <Card title="Customizable Position" icon="square-2">
    Supports <code>left</code> or <code>right</code> positioning of the box using the <code>from</code> prop.
  </Card>

  <Card title="Dynamic Content" icon="square-3">
    Allows the inclusion of custom content via slots.
  </Card>

  <Card title="Accessible" icon="square-4">
    Includes ARIA roles and keyboard support (Escape key) for accessibility.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```vue theme={null}
<template>
  <div class="relative">
    <ButtonText @click="boxes.open('icon_alert')">
      <IconAlert />
      <span class="sr-only">Action Box - Icon Alert</span>
    </ButtonText>
    <BoxAction
      box="icon_alert"
      label="Icon Alert"
      from="left"
    >
      <div>
        <ButtonTextAction><IconUpload /> Upload</ButtonTextAction>
        <ButtonTextAction><IconDownload /> Download</ButtonTextAction>
      </div>
    </BoxAction>
  </div>
</template>

<script setup>
import { useBoxStore, BoxAction, ButtonTextAction  } from '@robojuice/velure-ui';

const boxes = useBoxStore();
</script>
```

***

## Props

<ParamField path="box" type="string" default="''">
  The unique identifier for the box, used to control its state via `useBoxStore`.
</ParamField>

<ParamField path="label" type="string" default="'Filter'">
  The label displayed at the top of the box.
</ParamField>

<ParamField path="from" type="string" default="'left'">
  Specifies the position of the box. Options: `'left'`, `'right'`.
</ParamField>

***

## Example Use Cases

### Left-Aligned Box

```vue theme={null}
<BoxAction box="filters" label="Filters" from="left">
  <div>
    <ButtonTextAction>Option 1</ButtonTextAction>
    <ButtonTextAction>Option 2</ButtonTextAction>
  </div>
</BoxAction>
```

### Right-Aligned Box

```vue theme={null}
<BoxAction box="settings" label="Settings" from="right">
  <div>
    <ButtonTextAction>Setting 1</ButtonTextAction>
    <ButtonTextAction>Setting 2</ButtonTextAction>
  </div>
</BoxAction>
```

### Opening a Box Programmatically

```vue theme={null}
<template>
  <Button @click="boxes.open('settings')">Open Settings</Button>
</template>

<script setup>
import { useBoxStore } from '@robojuice/velure-ui';

const boxes = useBoxStore();
</script>
```

***

## Notes

* **State Management**: The `useBoxStore` Pinia store is required to manage the open/close state of the `BoxAction` component. Ensure the store is properly imported and configured.
* **Custom Content**: Use the default slot to include dynamic content such as buttons, icons, or custom components.
* **Positioning**: The `from` prop controls the alignment of the box. Use `'left'` or `'right'` to suit your design requirements.

For further customization, refer to the component's source code.